/* ================================================================
   Daylight — the Notes view: everything on screen while you read and write
   a note. Scoped to body.surface-daylight.

   The shape of it: one 680px column of words centred in the white page tile.
   A quiet breadcrumb line, the title in Figtree 36/700 (the serif belongs to
   the older surfaces), then prose at 17/1.7. Every block that used to be a
   bordered card — equations, callouts, code, cards, embeds, diagrams — is a
   soft INSET fill with a radius of 14 and no coloured left edge, so the note
   reads as one page instead of a stack of boxes. Colour is used only where it
   means something: links, the checkbox fill, and a late date.

   Colours are the theme's own variables, so this file is light AND dark.
   ================================================================ */

/* ---- The column ---- */
/* 48px of side padding inside the user's reading width gives the mockup's
   680px measure at the default 780px setting, and still honours Wide/Full. */
body.surface-daylight #editor-container { padding: 40px 48px 180px; }
body.surface-daylight #editor:empty::before { color: var(--text-muted); }

/* ---- The header: eyebrow · title · one quiet meta line ----
   #doc-crumb is that one line — where the note lives, who else is in it, and
   the save-gate notice when saving fails. It sits above the title, so it reads
   as an eyebrow. (The element order is universal, see open-surface.js.) */
body.surface-daylight #doc-crumb {
  gap: 10px;
  margin: 0 0 10px;
  min-height: 20px;
}
body.surface-daylight #crumb-path {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
/* The presence line: a quiet accent word with its dot, not a banner. */
body.surface-daylight #doc-crumb #note-presence {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}
/* If the banner is ever shown in place (before the relocation runs), it is a
   soft accent strip rather than a bordered band. */
body.surface-daylight #note-presence {
  border-bottom: 0;
  border-radius: 10px;
  margin: 0 14px;
  padding: 5px 12px;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
/* Saving failed — the one place the note header may go red. Quiet, but plain. */
body.surface-daylight #crumb-notice {
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 10px;
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
}

/* The title. NOT the serif here: Daylight has one family. Never display:none —
   this is also the rename box (crud.js). */
body.surface-daylight #editor-container #note-title {
  font-family: var(--font-ui);
  font-size: 36px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 0 0 14px;
}
body.surface-daylight #editor-container #note-title:hover { opacity: 1; }
/* The same single treatment as the base rule — Daylight restated only the
   box-shadow, which left the small-label background and padding showing through
   on the surface everyone uses. */
body.surface-daylight #editor-container #note-title.inline-rename {
  box-shadow: inset 0 -2px 0 var(--accent);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
body.surface-daylight #editor-container #note-title.inline-rename:hover { background: transparent; opacity: 1; }

/* ---- Properties: a disclosure in sentence case over an inset table ---- */
body.surface-daylight .prop-bar { gap: 6px; margin: 2px 0 6px; }
body.surface-daylight .prop-toggle {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 3px 8px;
}
body.surface-daylight .prop-toggle:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .prop-count {
  font-size: 12px;
  font-weight: 500;
  padding: 1px 8px;
  background: var(--chip-bg);
  color: var(--chip-text);
}
body.surface-daylight .markdown-body .properties {
  border: 0;
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: none;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 14px;
}
body.surface-daylight .properties .prop-key {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
body.surface-daylight .properties .prop-value { color: var(--text-normal); }
body.surface-daylight .prop-ic { font-family: var(--font-ui); color: var(--text-muted); }
body.surface-daylight .prop-ic.is-static:hover { color: var(--text-muted); }
body.surface-daylight .prop-chip {
  border-radius: 999px;
  padding: 1px 6px 1px 10px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--card-bg);
  color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight .prop-chip.is-status { background: var(--card-bg); color: var(--text-heading); }
body.surface-daylight :is(.prop-chip-add, .prop-new, .prop-locked) { font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight .prop-date { font-size: 13px; color: var(--text-normal); }

/* ---- Edit toolbar and find: quiet furniture on the page tile ---- */
body.surface-daylight #toolbar {
  border-bottom: 0;
  gap: 2px;
  padding: 2px 16px 6px;
}
body.surface-daylight #toolbar button { color: var(--text-muted); border-radius: 8px; }
body.surface-daylight #toolbar button:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .tb-sep { background: var(--border); }
body.surface-daylight .tb-hint { font-size: 12.5px; color: var(--text-muted); }

body.surface-daylight #find-bar {
  border-bottom: 0;
  margin: 0 14px 6px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--bg-secondary);
}
body.surface-daylight #find-count { font-size: 12.5px; color: var(--text-muted); min-width: 58px; }
body.surface-daylight #find-bar .settings-mini {
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--card-bg);
  color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight mark.find-hit.active { outline-color: var(--accent); }

/* ================================================================
   The note body — edit mode and reading mode are the same page.
   ================================================================ */
/* Prose at 17/1.7: the reading-size setting still moves it (default 15 → 17). */
body.surface-daylight .markdown-body {
  font-size: calc(var(--editor-font-size, 15px) + 2px);
  line-height: 1.7;
  color: var(--text-normal);
}
body.surface-daylight .markdown-body p { margin: 0.75em 0; text-wrap: pretty; }
body.surface-daylight .markdown-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-heading);
}
body.surface-daylight .markdown-body h1 { font-size: 1.6em; line-height: 1.2; letter-spacing: -0.02em; margin: 1.3em 0 0.4em; }
body.surface-daylight .markdown-body h2 { font-size: 1.24em; line-height: 1.3; letter-spacing: -0.01em; margin: 1.5em 0 0.4em; }
body.surface-daylight .markdown-body h3 { font-size: 1.06em; line-height: 1.35; letter-spacing: -0.01em; margin: 1.5em 0 0.35em; }
body.surface-daylight .markdown-body h4 { font-size: 1em; letter-spacing: 0; margin: 1.4em 0 0.3em; }
body.surface-daylight .markdown-body :is(h5, h6) { font-size: 0.92em; letter-spacing: 0; color: var(--text-muted); }
body.surface-daylight .markdown-body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0.2em; }
body.surface-daylight .markdown-body hr { border-top-color: var(--border); margin: 1.8em 0; }

/* Lists */
body.surface-daylight .markdown-body :is(ul, ol) { padding-left: 1.5em; margin: 0.6em 0; }
body.surface-daylight .markdown-body li { margin: 0.3em 0; }
body.surface-daylight .markdown-body li::marker { color: var(--text-muted); }

/* To-do lines: a round box that fills with the accent. The check's colour is
   base.css's (white on the light accent, ink on the dark one); only the
   geometry changes here, and the input stays a real input. */
body.surface-daylight .markdown-body li > input[type="checkbox"],
body.surface-daylight .markdown-body li.task-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-width: 1.5px;
  margin-right: 10px;
  vertical-align: -4px;
}
body.surface-daylight .markdown-body li > input[type="checkbox"]:checked::after,
body.surface-daylight .markdown-body li.task-item input[type="checkbox"]:checked::after {
  left: 6.4px;
  top: 3.4px;
  width: 5px;
  height: 9px;
  border-width: 0 2.2px 2.2px 0;
}
/* Done: struck, and in the secondary grey — never the faint one, the words are
   still there to be read. */
body.surface-daylight .markdown-body li:has(> input[type="checkbox"]:checked),
body.surface-daylight .markdown-body li.task-item.done > .task-text {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

/* Quotes and callouts: soft fills with a small sentence-case label. No
   coloured left border anywhere — the fill says what kind of block it is. */
body.surface-daylight .markdown-body blockquote {
  border-left: 0;
  border-radius: 14px;
  background: var(--bg-secondary);
  padding: 12px 18px;
  margin: 1em 0;
  color: var(--text-normal);
}
body.surface-daylight .markdown-body .callout {
  border: 0;
  border-left: 0;
  border-radius: 14px;
  box-shadow: none;
  padding: 14px 18px;
  margin: 1em 0;
  background: var(--area-calculus-fill);
}
body.surface-daylight .markdown-body .callout .callout-title {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
  color: color-mix(in srgb, var(--area-calculus) 72%, var(--text-heading));
}
body.surface-daylight .markdown-body .callout .callout-body { color: var(--text-heading); }
/* The coloured dot goes; the label already names the block. (Toggles keep
   their ::before — it is the fold chevron, not decoration.) */
body.surface-daylight .markdown-body .callout:not([class*="callout-toggle"]) > .callout-title::before { display: none; }
body.surface-daylight .markdown-body .callout-warn {
  background: var(--area-projects-fill);
  border-left-color: transparent;
}
body.surface-daylight .markdown-body .callout-warn .callout-title { color: color-mix(in srgb, var(--area-projects) 72%, var(--text-heading)); }
body.surface-daylight .markdown-body .callout-success {
  background: var(--area-chemistry-fill);
  border-left-color: transparent;
}
body.surface-daylight .markdown-body .callout-success .callout-title { color: color-mix(in srgb, var(--area-chemistry) 72%, var(--text-heading)); }
/* Folding toggles are lines of text, not blocks: no fill, no label colour. */
body.surface-daylight .markdown-body :is(.callout-toggle, .callout-toggle-h1, .callout-toggle-h2, .callout-toggle-h3) { background: transparent; }
body.surface-daylight .markdown-body :is(.callout-toggle, .callout-toggle-h1, .callout-toggle-h2, .callout-toggle-h3) > .callout-title { color: var(--text-heading); }
body.surface-daylight .markdown-body :is(.callout-toggle-h1, .callout-toggle-h2, .callout-toggle-h3) > .callout-title { font-size: 1.24em; }

/* Code: the one place the monospace stays. An inset block, radius 14. */
body.surface-daylight .markdown-body code {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5px 6px;
  font-size: 0.85em;
  color: var(--code-text);
}
body.surface-daylight .markdown-body pre {
  background: var(--bg-secondary);
  border: 0;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 1em 0;
  box-shadow: none;
}
body.surface-daylight .markdown-body pre code { font-size: 13.5px; line-height: 1.65; color: var(--code-block-text); }
body.surface-daylight :is(.code-copy, #code-chip, .pm-code-chip) {
  font-family: var(--font-ui);
  font-size: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight .code-copy:hover { color: var(--text-heading); }
body.surface-daylight .markdown-body pre.collapsed::after { font-size: 12px; color: var(--text-muted); }

/* Tables in a note: hairlines only, no vertical rules, no shadow. */
body.surface-daylight .markdown-body table {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  background: transparent;
  margin: 1.1em 0;
}
body.surface-daylight .markdown-body :is(th, td) {
  border-bottom-color: var(--border);
  padding: 10px 14px;
  font-size: 14.5px;
}
body.surface-daylight .markdown-body :is(td + td, th + th) { border-left: 0; }
body.surface-daylight .markdown-body th {
  background: var(--bg-secondary);
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Pictures and their captions */
body.surface-daylight .markdown-body img { border-radius: 14px; box-shadow: var(--dl-shadow); }
body.surface-daylight .markdown-body figcaption { font-size: 13px; color: var(--text-muted); }

/* Embeds and block references: the embedded note is an inset panel with a
   small label, not a bordered quote. */
body.surface-daylight .markdown-body .embed,
body.surface-daylight .markdown-body .embed[data-embed] {
  border: 0;
  border-left: 0;
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: none;
  padding: 0;
  margin: 1em 0;
}
body.surface-daylight .markdown-body .embed { padding: 4px 18px 12px; }
body.surface-daylight .embed[data-embed] .embed-head {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  padding: 12px 18px 4px;
}
body.surface-daylight .embed[data-embed] .embed-head:hover { color: var(--text-heading); }
body.surface-daylight .embed[data-embed] .embed-inner { padding: 0 18px 12px; }
body.surface-daylight .markdown-body .embed-title { font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight .markdown-body .embed-missing { color: var(--text-muted); }
body.surface-daylight .embed .tn-filedoc-body { background: transparent; }

/* Maths and diagrams: the equation inset from the mockup. */
body.surface-daylight .markdown-body .tn-math-block {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 1em 0;
}
body.surface-daylight .tn-mermaid,
body.surface-daylight .tn-tasks,
body.surface-daylight .markdown-body .card {
  border: 0;
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: none;
  padding: 16px 18px;
}
body.surface-daylight :is(.tn-tasks-head, .tn-dv-head) {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
body.surface-daylight :is(.tn-tasks-empty, .tn-filedoc-note) { font-size: 13px; color: var(--text-muted); font-style: normal; }
body.surface-daylight .tn-task { font-size: 14.5px; border-radius: 8px; }
body.surface-daylight .tn-task:hover { background: var(--dl-hover); }
body.surface-daylight .tn-task-box { width: 18px; height: 18px; border-radius: 50%; border-color: var(--border); }
body.surface-daylight .tn-task.done .tn-task-box::after { left: 5.4px; top: 2.4px; width: 4.5px; height: 8px; }
body.surface-daylight .tn-task.done .tn-task-text { color: var(--text-muted); }
body.surface-daylight .tn-tasks-note { font-size: 13px; color: var(--text-muted); font-weight: 500; }
body.surface-daylight .tn-dv-item { font-size: 14.5px; border-radius: 8px; }
body.surface-daylight .tn-dv-item:hover { background: var(--dl-hover); }

/* Words with colour: highlights, links, tags */
body.surface-daylight .markdown-body mark { border-radius: 5px; padding: 0 3px; }
body.surface-daylight .markdown-body a { color: var(--link); font-weight: 500; }
body.surface-daylight .markdown-body a.internal-link { font-weight: 500; }
/* An unresolved link is a note that does not exist yet: quiet words with a
   dotted line, in a grey that still passes 4.5:1 (the faint link grey did not). */
body.surface-daylight .markdown-body a.internal-link.unresolved {
  color: var(--text-muted);
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  text-underline-offset: 3px;
}
body.surface-daylight .markdown-body .tag {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78em;
  font-weight: 500;
  background: var(--tag-bg);
  color: var(--tag-text);
}
body.surface-daylight .markdown-body .tag:hover { filter: none; background: color-mix(in srgb, var(--tag-text) 18%, var(--tag-bg)); }
body.surface-daylight .markdown-body time { color: var(--text-muted); font-weight: 500; }

/* Flashcard lines: one soft block per card, no coloured edge. The JOIN rules
   (a prompt running into its own answer) are mirrored here, or a shorthand
   radius at this specificity would square the run's ends. */
body.surface-daylight :is(#editor, .editor2, #split-content) :is([data-card-id], [data-card-part]) {
  background: color-mix(in srgb, var(--tag-bg) 65%, transparent);
  border-left: 0;
  border-radius: 12px;
  padding: 7px 14px;
}
body.surface-daylight :is(#editor, #split-content) [data-card-part] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
body.surface-daylight :is(#editor, .editor2, #split-content) :is([data-card-id], [data-card-part]):has(+ [data-card-part]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
body.surface-daylight :is(#editor, .editor2, #split-content) :is(ul, ol)[data-card-part] { padding-left: calc(1.5em + 14px); }
body.surface-daylight .tn-card-front { font-weight: 550; color: var(--text-heading); }
body.surface-daylight .tn-card-back { color: var(--text-muted); }
body.surface-daylight .tn-card-sep::after { color: var(--text-muted); }
/* The "card" marker while you write: the kit's quiet chip. */
body.surface-daylight[data-mode="edit"] :is(#editor, .editor2) [data-card-id]:not(.tn-folded)::after {
  content: 'card';
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--card-bg);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight mark.tn-cloze {
  background: var(--tag-bg);
  color: var(--tag-text);
  border-bottom: 2px solid color-mix(in srgb, var(--tag-text) 45%, transparent);
  border-radius: 5px;
}
body.surface-daylight .markdown-body :is(h1, h2, h3, h4, h5, h6).tn-folded::after {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border-radius: 999px;
}

/* Due dates on a to-do line: a small phrase, not a pill. Late is the only one
   that gets colour, and it is still just small red words. */
body.surface-daylight .tn-due::after {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-left: 8px;
  vertical-align: 0;
}
body.surface-daylight .tn-due[data-tone="late"]::after,
body.surface-daylight .tn-due[data-tone="bad"]::after {
  color: var(--danger);
  background: transparent;
  box-shadow: none;
}
body.surface-daylight :is(#editor[contenteditable="true"], .editor2) .tn-due:hover::after {
  color: var(--accent);
  background: transparent;
}
body.surface-daylight :is(.cols .col, td, th, .tn-tasks) .tn-due::after { font-size: 12.5px; margin-left: 6px; }

/* ---- The outline bar at the right edge of the note ---- */
body.surface-daylight #outline-float .of-bar { background: color-mix(in srgb, var(--text-muted) 38%, transparent); }
body.surface-daylight #outline-float .of-bar.active { background: var(--accent); }
body.surface-daylight #outline-float .of-panel {
  background: var(--card-bg);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--dl-shadow-float);
  padding: 8px 6px;
}
body.surface-daylight #outline-float .of-item {
  font-size: 13.5px;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-muted);
}
body.surface-daylight #outline-float .of-item.h1 { font-weight: 500; color: var(--text-heading); }
body.surface-daylight #outline-float .of-item:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #outline-float .of-item.active { color: var(--accent); font-weight: 500; }

/* ---- The slash menu and link autocomplete (editor-menus.js) ----
   Floating panels in the kit's shape, and a selected row is the accent TINT
   with ink text — never a solid blue bar with white words. */
body.surface-daylight :is(#slash-menu, #autocomplete) {
  background: var(--card-bg);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--dl-shadow-float);
  padding: 6px;
}
body.surface-daylight .slash-item { gap: 12px; padding: 8px 10px; border-radius: 10px; }
body.surface-daylight .slash-item .si-icon {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}
body.surface-daylight .slash-item .si-name { font-size: 14px; font-weight: 500; color: var(--text-heading); }
body.surface-daylight .slash-item .si-desc { font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight .slash-item:hover { background: var(--dl-hover); }
body.surface-daylight .slash-item.selected { background: var(--dl-select); color: var(--text-heading); }
body.surface-daylight .slash-item.selected .si-desc { color: var(--text-muted); }
body.surface-daylight .slash-item.selected .si-icon {
  background: var(--card-bg);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--accent);
}
body.surface-daylight .ac-item {
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--text-normal);
}
body.surface-daylight .ac-item:hover { background: var(--dl-hover); }
body.surface-daylight .ac-item .ac-folder { font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight .ac-item.selected { background: var(--dl-select); color: var(--text-heading); }
body.surface-daylight .ac-item.selected .ac-folder { color: var(--text-muted); }

/* ---- Block handles and block selection ---- */
body.surface-daylight :is(#block-handle, .pm-block-handle) button { border-radius: 8px; color: var(--text-muted); }
body.surface-daylight :is(#block-handle, .pm-block-handle) button:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight :is(#block-drop-line, .pm-block-drop-line) { height: 2.5px; border-radius: 2px; box-shadow: none; }
body.surface-daylight :is(#editor > .bh-selected, .editor2 .bh-selected) {
  background: var(--dl-select);
  box-shadow: 0 0 0 4px var(--dl-select);
  border-radius: 8px;
}

/* ---- No note open ---- */
body.surface-daylight .empty-inner { gap: 8px; }
body.surface-daylight .empty-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin-bottom: 14px;
}
body.surface-daylight .empty-action {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 10px;
  padding: 9px 14px;
}
body.surface-daylight .empty-action:hover {
  background: var(--bg-secondary);
  color: var(--text-heading);
  box-shadow: none;
}

/* ================================================================
   The right panel's block CONTENTS. The tiles are frame.css's; these are the
   rows inside them: Connections, Outline, Recent, and the assistant.
   ================================================================ */
body.surface-daylight .panel-section-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  padding: 8px 2px 4px;
}
body.surface-daylight .conn-section > summary::before { color: var(--text-muted); font-size: 12px; }

/* A backlink is a row of words with a hairline over it — the mockup's
   "Linked from" list. Not a card inside a card. */
body.surface-daylight .backlink-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 11px 2px;
}
body.surface-daylight .backlink-item + .backlink-item { border-top: 1px solid var(--border); }
body.surface-daylight .backlink-item:hover { transform: none; box-shadow: none; }
body.surface-daylight .backlink-item:hover .bl-title { color: var(--accent); }
body.surface-daylight .backlink-item .bl-title {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 2px;
}
body.surface-daylight .backlink-item .bl-snippet {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}
body.surface-daylight .backlink-item .bl-snippet b {
  background: transparent;
  color: var(--accent);
  font-weight: 500;
  padding: 0;
}
body.surface-daylight .rel-item .bl-snippet { font-style: normal; color: var(--text-muted); }
body.surface-daylight .rel-link {
  font-size: 12px;
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
}
body.surface-daylight .rel-link:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body.surface-daylight :is(.panel-empty, .wg-empty, .recent-empty) {
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
  padding: 6px 2px;
}

/* Outline and Recent: quiet rows, the current one in ink. */
body.surface-daylight .outline-item {
  font-size: 14px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--text-muted);
}
body.surface-daylight .outline-item.h1 { font-weight: 500; color: var(--text-heading); }
body.surface-daylight .outline-item:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .outline-item.active { color: var(--text-heading); font-weight: 500; background: var(--dl-select); }
body.surface-daylight .recent-row {
  font-size: 14px;
  gap: 10px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--text-normal);
}
body.surface-daylight .recent-row:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .recent-row.active { color: var(--text-heading); font-weight: 500; }
body.surface-daylight .recent-row .rc-icon { color: var(--text-muted); opacity: 1; }
body.surface-daylight .recent-row.active .rc-icon { color: var(--accent); }

/* Generic block rows (Study, Calendar, the widgets' own lists). */
body.surface-daylight .wg-row { font-size: 14px; padding: 6px 8px; border-radius: 8px; }
body.surface-daylight .wg-row.wg-click:hover { background: var(--dl-hover); }
body.surface-daylight .wg-row-l { color: var(--text-normal); }
body.surface-daylight .wg-row-v { font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight .wg-sub { font-size: 12.5px; color: var(--text-muted); }

/* The assistant dock: a conversation on the tile. Your words sit in the accent
   TINT (ink text reads in both modes; white on the night accent would not). */
body.surface-daylight #chat-dock .chat-msg { font-size: 13.5px; line-height: 1.6; padding: 9px 12px; border-radius: 14px; }
body.surface-daylight #chat-dock .chat-user {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-heading);
}
body.surface-daylight #chat-dock .chat-assistant { background: var(--bg-secondary); color: var(--text-normal); }
body.surface-daylight #chat-dock .chat-activity { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); }
body.surface-daylight #chat-dock .chat-tray { border-top-color: var(--border); }
body.surface-daylight #chat-dock .chat-tray-head {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
body.surface-daylight #chat-dock .chat-prop { font-size: 13px; }
body.surface-daylight #chat-dock .cp-kind {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body.surface-daylight #chat-dock :is(.cp-status, .ct-note, .chat-cost) { font-size: 12px; color: var(--text-muted); }
body.surface-daylight #chat-dock .cp-body { border-radius: 10px; background: var(--bg-secondary); }
body.surface-daylight #chat-dock .chat-consent {
  border: 0;
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 13px;
  padding: 11px 13px;
}
body.surface-daylight #chat-dock .chat-input {
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 10px;
  border-color: var(--border);
  background: var(--card-bg);
}
body.surface-daylight #chat-dock :is(.chat-send, .chat-allow, .ct-apply) {
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  background: var(--accent);
  color: var(--app-bg);
}
body.surface-daylight #chat-dock .chat-stop { border: 0; border-radius: 10px; background: var(--danger); color: var(--app-bg); }
body.surface-daylight #chat-dock :is(.ct-clear, .chat-expand) {
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  padding: 6px 12px;
  background: var(--card-bg);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.surface-daylight #chat-dock :is(.ct-clear, .chat-expand):hover { color: var(--text-heading); }

/* The "somebody is working here" rule, on Daylight. The base rule puts it at
   left:-14px, which is measured against the base editor's padding; Daylight
   gives the document its own, so the margin mark would land inside the text.
   Same colours, its own offset — the sixth time Daylight's own metrics have
   needed a copy of a base rule. */
body.surface-daylight .peer-at::before { left: -18px; }
body.surface-daylight .peer-at::after { left: -18px; }