/* THE ONE UNLAYERED SHEET, LINKED LAST. Lexxy, CodeMirror and the spreadsheet grid ship their
   own unlayered CSS, and an unlayered rule outranks every layered one — so the overrides that
   must beat them cannot live in a layer. Nothing else in the app may be unlayered
   (test/css_hygiene_test.rb). Tokens only; no new colours. */

/* Lexxy (the build-log and notes editors): the element is <lexxy-editor class="lexxy-content">
   in light DOM. */
lexxy-editor, lexxy-editor.lexxy-content {
  background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-panel);
  font-family: var(--font-ui);
}
lexxy-editor:focus-within { border-color: var(--fg); }
lexxy-editor button, lexxy-toolbar button { color: var(--fg-muted); }
lexxy-editor button:hover, lexxy-toolbar button:hover { color: var(--fg); background: var(--raised); }
lexxy-toolbar { border-bottom: 1px solid var(--line); background: var(--surface); }
/* The RENDERED rich text (`div.lexxy-content`, from action_text's content layout) is painted by
   lexxy-content.css in its own near-black (`oklch(0.2 0 0)`), which on the dark theme is black on
   black — a build-log entry read as almost empty. The editor rule
   above covers only `lexxy-editor`; this covers the read-only rendering. Inherit, so it follows
   whatever the surrounding page colour is in either theme. */
.lexxy-content { color: inherit; }
/* Links are ink (design-system.md rule 13): the accent is spent on the one action. */
.lexxy-content a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* CodeMirror 6 (the source viewer, the editor, diffs, history blobs, the README editor).

   UNSCOPED, AND THAT IS THE WHOLE ARRANGEMENT (2026-10-21). Every colour below is a token, so one
   rule holds in Paper and Graphite alike and a theme switch repaints an open editor with no
   remount; the syntax colours are the same idea in JS (lib/codemirror_theme.js, a HighlightStyle of
   --code-* properties). oneDark is gone and nothing is chosen at mount. Do NOT scope a rule here to
   `:root[data-theme="light"]` or a media query: CodeMirror's view now ALWAYS runs its LIGHT
   base-theme variant (nothing sets EditorView.darkTheme), so a rule that applies only in one theme
   leaves that variant's literals (#f5f5f5 gutters, #d9d9d9 selection, black cursor) in the other.

   WHY THESE SELECTORS WIN, measured rather than assumed. CodeMirror's style module is a <style>
   that style-mod inserts as the FIRST child of <head>, so this sheet (unlayered, linked last) wins
   every tie by source order. Its rules are its generated scope classes — `&` is one class, `&light`
   another — so `&light .cm-gutters` is (0,2,0) and `.cm-editor .cm-gutters` ties it. Where the
   library's selector is longer the rule here copies its shape (`.cm-editor.cm-focused > .cm-scroller
   > .cm-selectionLayer …`, `.cm-editor.cm-merge-b …`) so it ties again instead of out-guessing it.
   test/system/code_theme_test.rb reads the computed ground, the gutter and a keyword's colour in
   both themes and across a live switch.

   Tints: the selection and the active line keep ACCENT tints (design-system.md rule 13 — text
   affordances, not UI selection state); the diff speaks --ok / --danger; everything else is the
   panel vocabulary (--surface, --raised, --line, --fg, --fg-muted). */
.cm-editor { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); color: var(--fg); }
.cm-editor.cm-focused { outline: none; border-color: var(--fg); }
.cm-editor .cm-gutters { background: var(--raised); color: var(--fg-muted); border-right: 1px solid var(--line); }
.cm-editor .cm-activeLine { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cm-editor .cm-activeLineGutter { background: color-mix(in srgb, var(--accent) 12%, var(--raised)); }
.cm-editor .cm-cursor, .cm-editor .cm-dropCursor { border-left-color: var(--fg); }
.cm-editor .cm-selectionBackground, .cm-editor ::selection,
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cm-editor .cm-selectionMatch { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cm-editor.cm-focused .cm-matchingBracket { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.cm-editor.cm-focused .cm-nonmatchingBracket { background: var(--danger-soft); }
.cm-editor .cm-specialChar { color: var(--danger); }
.cm-editor .cm-foldPlaceholder { background: var(--raised); border-color: var(--line); color: var(--fg-muted); }
.cm-editor .cm-snippetField { background: color-mix(in srgb, var(--fg) 12%, transparent); }

/* Search (Mod-F, basicSetup's keymap) and the completion / hover tooltips, which mount INSIDE
   .cm-editor. The selected completion is a selection, so it is ink (rule 13). */
.cm-editor .cm-searchMatch { background: var(--warn-soft); outline: 1px solid var(--warn); }
.cm-editor .cm-searchMatch-selected { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cm-editor .cm-panels { background: var(--raised); color: var(--fg); }
.cm-editor .cm-panels-top { border-bottom: 1px solid var(--line); }
.cm-editor .cm-panels-bottom { border-top: 1px solid var(--line); }
.cm-editor .cm-textfield { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-control); }
.cm-editor .cm-button, .cm-editor .cm-button:active { background: var(--surface); background-image: none; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-control); }
.cm-editor .cm-tooltip { background: var(--raised); color: var(--fg); border: 1px solid var(--line); }
.cm-editor .cm-tooltip-section:not(:first-child) { border-top-color: var(--line); }
.cm-editor .cm-tooltip-autocomplete ul li[aria-selected] { background: var(--fg); color: var(--surface); }
.cm-editor .cm-tooltip-autocomplete-disabled ul li[aria-selected] { background: var(--fg-muted); color: var(--surface); }

/* The unified merge view (diffview_controller.js; the editor carries .cm-merge-b, and a deleted
   chunk is a .cm-deletedChunk widget above the line it was replaced by). Line tints are the soft
   tokens, the changed characters inside a line the strong ones mixed down, the change gutter the
   strong ones whole. */
.cm-editor.cm-merge-b .cm-changedLine { background: var(--ok-soft); }
.cm-editor .cm-deletedChunk { background: var(--danger-soft); }
.cm-editor.cm-merge-b .cm-changedText { background: color-mix(in srgb, var(--ok) 28%, transparent); }
.cm-editor.cm-merge-b .cm-deletedText { background: color-mix(in srgb, var(--danger) 28%, transparent); }
.cm-editor.cm-merge-b .cm-changedLineGutter { background: var(--ok); }
.cm-editor .cm-deletedLineGutter { background: var(--danger); }

/* The spreadsheet grid (jspreadsheet CE + jsuites) stays a LIGHT ISLAND in PR 1 — spec §13 names
   it as the one third-party surface that may keep its own scheme. color-scheme: light keeps its
   native form controls readable when the shell is dark. */
.sheet-grid { color-scheme: light; background: #ffffff; color: #1a1e26; border-radius: var(--radius-panel); padding: 4px; }

/* THE WORKBOOK VIEWER'S GRID FOLLOWS THE THEME (2026-10-21; files/viewers/_spreadsheet). Unlike the
   project Sheets page above, an .xlsx is a file page, and every other viewer there is painted in
   tokens, so this grid is too, in both themes: cells on --surface, headers on --raised, rules in
   --line, and selection in ink (--fg), design-system.md rule 13. Scoped to `.spreadsheet-grid` so
   the Sheets page keeps its light island. These beat jspreadsheet.css only because the controller
   inserts that sheet BEFORE this one — the order spreadsheet_controller.js#loadStyles keeps. */
.spreadsheet-grid { color-scheme: inherit; }
.spreadsheet-grid .jss_content { scrollbar-color: var(--line-strong) transparent; }
.spreadsheet-grid .jss_worksheet { background-color: var(--surface); color: var(--fg); font: 400 13px/18px var(--font-ui);
                                   border-right-color: var(--line); border-bottom-color: var(--line); }
.spreadsheet-grid .jss_worksheet > tbody > tr > td { border-top-color: var(--line); border-left-color: var(--line); }
.spreadsheet-grid .jss_worksheet > thead > tr > td,
.spreadsheet-grid .jss_worksheet > tbody > tr > td:first-child {
  background-color: var(--raised); color: var(--fg-muted); border-top-color: var(--line); border-left-color: var(--line);
  font: 400 12px/18px var(--font-mono);
}
/* The column letters stay centred whatever alignment the column itself carries. */
.spreadsheet-grid .jss_worksheet > thead > tr > td { text-align: center; }
.spreadsheet-grid .jss_worksheet > thead > tr > td.selected,
.spreadsheet-grid .jss_worksheet > tbody > tr.selected > td:first-child { background-color: var(--line); color: var(--fg); }
.spreadsheet-grid .jss_worksheet > tbody > tr > td.readonly { color: var(--fg-muted); }
.spreadsheet-grid .jss_worksheet > tbody > tr > td.editor { background-color: var(--surface); }
.spreadsheet-grid .jss_worksheet > tbody > tr > td > input { color: var(--fg); }
.spreadsheet-grid .jss_worksheet .highlight,
.spreadsheet-grid .jss_worksheet .selection { background-color: color-mix(in srgb, var(--fg) 8%, transparent); }
.spreadsheet-grid .jss_worksheet .highlight-selected { background-color: transparent; }
.spreadsheet-grid .jss_worksheet .highlight-top { border-top-color: var(--fg); box-shadow: 0 -1px var(--line); }
.spreadsheet-grid .jss_worksheet .highlight-left { border-left-color: var(--fg); box-shadow: -1px 0 var(--line); }
.spreadsheet-grid .jss_worksheet .highlight-right { border-right-color: var(--fg); }
.spreadsheet-grid .jss_worksheet .highlight-bottom { border-bottom-color: var(--fg); }
.spreadsheet-grid .jss_worksheet .selection-top,
.spreadsheet-grid .jss_worksheet .copying-top { border-top-color: var(--fg); }
.spreadsheet-grid .jss_worksheet .selection-left,
.spreadsheet-grid .jss_worksheet .copying-left { border-left-color: var(--fg); }
.spreadsheet-grid .jss_worksheet .selection-right,
.spreadsheet-grid .jss_worksheet .copying-right { border-right-color: var(--fg); }
.spreadsheet-grid .jss_worksheet .selection-bottom,
.spreadsheet-grid .jss_worksheet .copying-bottom { border-bottom-color: var(--fg); }
.spreadsheet-grid .jss_corner { background-color: var(--fg); border-color: var(--surface); }
.spreadsheet-grid .jcontextmenu { background: var(--surface); color: var(--fg); border: 1px solid var(--line);
                                  border-radius: var(--radius-panel); box-shadow: 0 6px 18px color-mix(in srgb, var(--fg) 18%, transparent); }
.spreadsheet-grid .jcontextmenu > div { font: 400 13px/18px var(--font-ui); padding-left: 12px; }
.spreadsheet-grid .jcontextmenu > div a { color: var(--fg); }
.spreadsheet-grid .jcontextmenu > div:hover { background: var(--raised); }