/* shared/sl.css — the ONE Streetlight stylesheet. The look is Soft (Jake, sync 2026-10-26, picked on
   pages/dashboard-styles: "I like soft. lets go with that."): a warm canvas, white rounded cards, a rounded face.
   Every page links it:  <link rel="stylesheet" href="/api/page-asset/shared/sl.css">
   and loads shared/sl.js. A page may add ≤ 15 lines of its own LAYOUT; it never sets
   colours, fonts, widths or radii (node kernel/check.mjs, template rule).
   Sections: 1 tokens · 2 base · 3 frame · 4 controls · 5 tiles · 6 tables · 7 facts ·
   8 figure · 9 calendar · 10 narrow · 11 rows (flow panels) · 12 lists + boards (home) ·
   13 outputs · 14 say bar + ⧉ · 15 zoom · 16 skeleton viewer · 17 search · 18 legacy aliases · 19 quiz · 20 path links · 21 power-plane console ·
   22 cards (the Soft treatment) · 23 tables · 24 ⇡ not in the cloud yet.
   Additions: FOUNDATION owns this file; others ask in pages/the-refactor/reports/css-requests.md.
   The viewer's copy of these colours for old pages: FAMILY_LIGHT / FAMILY_DARK in local-viewer/server.mjs. */


/* 1. Tokens ---------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #f1eee9;        /* the warm canvas */
  --card: #ffffff;      /* a card on the canvas; also controls and inputs */
  --surface: #f6f4f0;   /* tiles, table heads, the calendar's empty days — a wash inside a card */
  --ink: #2c2925;
  --ink-2: #57524b;     /* secondary text that still has to read */
  --muted: #8b857b;
  --line: #ebe6de;
  --accent: #4a6fa5;    /* links, focus, selected, "has entry"; the only colour */
  --accent-ink: #ffffff;
  --up: #be185d;        /* ⇡ not in the cloud yet (24): the one mark, nothing else is this colour */
  --shadow: 0 1px 2px rgba(60, 50, 40, .05), 0 10px 30px rgba(60, 50, 40, .06);

  --font: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale: five steps, nothing else */
  --t1: 30px; --t2: 23px; --t3: 17px; --t4: 16px; --t5: 13px;

  /* spacing: 4-px steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;

  --w: 960px;           /* the one page width */
  --measure: 68ch;      /* the one text column */
  --bar: 44px;          /* the top line's height */
  --r: 14px;            /* the radius of a control or a wash */
  --r-card: 22px;       /* the radius of a card */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1916; --card: #262320; --surface: #2f2b27; --ink: #f1eee9; --ink-2: #cfc9bf; --muted: #a39c91;
    --line: #3b3631; --accent: #8fb0de; --accent-ink: #1b1916; --up: #f472b6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1916; --card: #262320; --surface: #2f2b27; --ink: #f1eee9; --ink-2: #cfc9bf; --muted: #a39c91;
  --line: #3b3631; --accent: #8fb0de; --accent-ink: #1b1916; --up: #f472b6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
}

/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: var(--t4)/1.5 var(--font); }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { font-size: var(--t1); line-height: 1.2; margin: 0 0 var(--s2); }
h2 { font-size: var(--t2); line-height: 1.25; margin: var(--s6) 0 var(--s3); }
h3 { font-size: var(--t3); margin: var(--s5) 0 var(--s2); }
p  { margin: 0 0 var(--s3); max-width: var(--measure); }
small, .meta { font-size: var(--t5); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* 3. Frame: top line + one width ------------------------------------ */
.top { height: var(--bar); border-bottom: 0; background: var(--bg); }
.top > div { max-width: var(--w); height: 100%; margin: 0 auto; padding: 0 var(--s4);
             display: flex; align-items: center; gap: var(--s4); font-size: var(--t5); }
.top .home { font-weight: 600; color: var(--ink); text-decoration: none; }
.top .path { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* no ◐: the theme follows the system (an old page that still carries the button never shows it) */
button.theme[aria-label="Switch light or dark"] { display: none !important; }
main { max-width: var(--w); margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); }

/* the up link: always above the h1, always names its parent with its icon */
.up { display: inline-block; font-size: var(--t5); margin: 0 0 var(--s3); text-decoration: none; }
.up::before { content: "\2039\00a0"; }
.up:hover { text-decoration: underline; }
.lede { color: var(--muted); font-size: var(--t3); margin-bottom: var(--s5); }
.lede:empty { display: none; }   /* no taglines: a title, then the content; .lede speaks only when something is wrong */
.icon { font-style: normal; }

/* 4. Controls -------------------------------------------------------- */
button, select { font: inherit; font-size: var(--t5); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s1) var(--s3); cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg [aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.bar .end { margin-left: auto; }

/* 5. Tiles (icon view) ---------------------------------------------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5) var(--s4);
         grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.tiles a { display: flex; flex-direction: column; align-items: center; gap: var(--s2);
           color: var(--ink); text-decoration: none; text-align: center; font-size: var(--t5); }
.tiles .glyph { width: 72px; height: 72px; border-radius: 18px; background: var(--card);
                border: 1px solid transparent; box-shadow: var(--shadow); display: grid; place-items: center; font-size: 36px; }
.tiles a:hover .glyph { border-color: var(--accent); }

/* 6. Tables (list view, lists) -------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--t4); }
th { text-align: left; font-size: var(--t5); font-weight: 600; color: var(--muted);
     padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th button { all: unset; cursor: pointer; }
th button:hover { color: var(--ink); }
th[aria-sort="ascending"] button::after { content: " \25B2"; }
th[aria-sort="descending"] button::after { content: " \25BC"; }
td.n, th.n { white-space: nowrap; font-variant-numeric: tabular-nums; }
td .icon { margin-right: var(--s2); }

/* 7. Key–value list (item facts) ------------------------------------ */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4);
           margin: 0 0 var(--s5); font-size: var(--t5); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

/* 8. Figure ---------------------------------------------------------- */
figure { margin: 0 0 var(--s5); }
figure svg, figure img { display: block; width: 100%; height: auto; border-radius: var(--r); }
figcaption { font-size: var(--t5); color: var(--muted); margin-top: var(--s2); }

/* 9. Calendar (a thing's front view may use it) --------------------- */
.months { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.month h3 { font-size: var(--t5); margin: 0 0 var(--s2); color: var(--muted); font-weight: 600; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.days span, .days a { aspect-ratio: 1; border-radius: 6px; background: var(--card);
  font-size: 10px; display: grid; place-items: center; color: var(--muted); text-decoration: none; }
.days a { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.days .pad { background: none; }

/* 10. Narrow ---------------------------------------------------------- */
@media (max-width: 600px) {
  :root { --t1: 24px; --t2: 18px; }
  .hide-narrow { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .tiles .glyph { width: 60px; height: 60px; font-size: 30px; border-radius: 14px; }
}

/* 11. Rows — the row family the flow panels share (was mockups/flow/flow.css) ---- */

/* a row: content left, its controls right, inside the row's own line */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; }
.row .body { flex: 1; min-width: 0; }
.row .t { color: var(--ink); text-decoration: none; }
a.row:hover .t, .row a.t:hover { text-decoration: underline; }
.row .sub { font-size: var(--t5); color: var(--muted); }
.kind { font-size: var(--t5); color: var(--muted); white-space: nowrap; }

/* controls: ⧉ ✕ ✓ only, always on the thing they act on */
.ctl { display: inline-flex; gap: var(--s1); flex: none; -webkit-user-select: none; user-select: none; }   /* a copied row never carries ⧉ ✓ ✕ */
.ctl button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  font-size: var(--t4); color: var(--muted); }
.ctl button:hover { color: var(--ink); border-color: var(--ink); }
.ctl .ok:hover { color: var(--accent); border-color: var(--accent); }

/* a group: one bordered box, its header owns its ✕ */
.group { border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 var(--s4); overflow: hidden; }
.group > header { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4);
  background: var(--surface); border-bottom: 1px solid var(--line); }
.group > header h2, .group > header h3 { margin: 0; font-size: var(--t3); flex: 1; }
.group > header a { color: var(--ink); text-decoration: none; }
.group > header a:hover { text-decoration: underline; }
.group > header .n { font-weight: 400; color: var(--muted); font-size: var(--t5); margin-left: var(--s2); }
.group .inner { padding: var(--s3) var(--s4) var(--s1); }
.group .rows { border-top: 0; }
.group .rows > li:last-child { border-bottom: 0; }
.ac { font-size: var(--t5); color: var(--muted); margin: var(--s1) 0 0; max-width: var(--measure); }
.ac b { color: var(--ink); font-weight: 600; }
.suggest { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s2); }
.suggest a, .suggest button { font-size: var(--t5); border: 1px solid var(--accent); color: var(--accent);
  background: var(--card); border-radius: var(--r); padding: var(--s1) var(--s3); text-decoration: none; }

/* caret rows: <details> opens in place */
details.r > summary { list-style: none; cursor: pointer; }
details.r > summary::-webkit-details-marker { display: none; }
details.r > summary .car { color: var(--muted); width: 14px; flex: none; transition: transform .1s; }
details.r[open] > summary .car { transform: rotate(90deg); }
details.r .open { padding: 0 0 var(--s4) calc(14px + var(--s3)); }
details.r .open p { font-size: var(--t4); }
details.r.here { box-shadow: inset 3px 0 0 var(--accent); }
pre.ev { font: 12px/1.45 var(--mono); background: var(--surface); border-radius: var(--r);
  padding: var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--s3); }

/* full-width layout: the one exception to --w, Jake 10-18 */
main.full { max-width: none; }
.split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.split.closed { grid-template-columns: 36px minmax(0, 1fr); }
.flist { position: sticky; top: var(--s4); }
.flist ul { list-style: none; margin: 0; padding: 0; }
.flist li a { display: flex; gap: var(--s2); padding: var(--s2); border-radius: var(--r);
  color: var(--ink); text-decoration: none; font-size: var(--t5); }
.flist li a[aria-current="true"] { background: var(--card); box-shadow: var(--shadow); font-weight: 600; }
.flist li a .n { margin-left: auto; color: var(--muted); }
.split.closed .flist ul, .split.closed .flist .lbl { display: none; }
@media (max-width: 600px) {
  .split, .split.closed { grid-template-columns: minmax(0, 1fr); }
  .flist { position: static; }
  .split.closed .flist { margin-bottom: 0; }
  .row { gap: var(--s2); }
}

/* 12. Lists + boards (was mockups/home/home.css) ------------------------------- */

/* whole-row links (sl.js behaviour B: tr[data-href]) */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: var(--surface); }
input[type="search"] { font: inherit; font-size: var(--t5); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s1) var(--s3); }

/* picture boards (templates set, walk strip) */
.board { display: grid; gap: var(--s4); grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); margin: 0 0 var(--s5); }
.board figure { margin: 0; }
.board img { border: 1px solid var(--line); aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.walk { --n: 5; }
.walk img { aspect-ratio: 3 / 4; }

@media (max-width: 600px) {
  .board, .walk { --n: 2; }
}

/* 13. Outputs — the frame every output template shares (icon + h1 + its controls) -- */
.head { display: flex; align-items: flex-start; gap: var(--s3); }
.head h1 { flex: 1; min-width: 0; }
.k { font-size: var(--t5); color: var(--muted); font-weight: 600; margin: var(--s4) 0 var(--s1); }
.say-it { font-size: var(--t3); font-weight: 600; max-width: var(--measure); }
.num { font-size: var(--t1); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stats { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0 0 var(--s4); }
.stats small { display: block; }
.meter { position: relative; height: 10px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); overflow: hidden; max-width: 560px; margin: var(--s2) 0; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.meter s { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
svg.viz { display: block; width: 100%; height: auto; overflow: visible; }
svg.viz text { fill: var(--ink); font: 13px var(--font); }
svg.viz .d, svg.viz .b { fill: var(--muted); }
svg.viz .m { fill: var(--accent); }
svg.viz .ax { stroke: var(--line); }
svg.viz path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.card { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); margin: 0 0 var(--s4); }
.card .q { font-weight: 600; margin: 0 0 var(--s3); }
.opts { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.opts button { text-align: left; font-size: var(--t4); padding: var(--s2) var(--s3); }
.opts .pick { border-color: var(--ink); font-weight: 600; }
.opts .right { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.explain { background: var(--surface); border-radius: var(--r); padding: var(--s3); font-size: var(--t4); }
.foot { margin-top: var(--s6); padding-top: var(--s3); border-top: 0;
  font-size: var(--t5); color: var(--muted); }
.pager { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t5); margin: var(--s5) 0 0; }
.pager .end { margin-left: auto; }

/* 14. Say bar + ⧉ — "copy context, say your bit". The app draws its own bar natively;
   a page in a plain tab may carry <form class="say"> and sl.js fills it. ---------- */
input[type="text"], textarea { font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); }
textarea { width: 100%; min-height: 80px; }
.say { position: sticky; bottom: 0; z-index: 19; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); background: var(--bg); border-top: 1px solid var(--line); }
.say input { flex: 1; }
.say .ctx { font-size: var(--t5); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
button[data-ctx] { min-width: 30px; }
.sl-toast { position: fixed; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 1001;
  background: var(--ink); color: var(--bg); padding: var(--s1) var(--s3); border-radius: var(--r);
  font-size: var(--t5); opacity: 0; transition: opacity .15s; pointer-events: none; max-width: 90vw; }
.sl-toast.on { opacity: 1; }
/* ✕ undo bar (sl.js SL.undoable): fixed at the bottom, so nothing on the page moves when it comes or goes */
.sl-undo { position: fixed; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 1002; display: none;
  align-items: center; gap: var(--s3); background: var(--ink); color: var(--bg); padding: var(--s1) var(--s2) var(--s1) var(--s3);
  border-radius: var(--r); font-size: var(--t5); max-width: calc(100vw - 32px); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.sl-undo.on { display: flex; }
.sl-undo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-undo button { background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 600; }

/* 15. Zoom — click any image (sl.js); Esc or a click closes ---------------------- */
main img, figure img { cursor: zoom-in; }
#sl-zoom { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92); cursor: zoom-out; color: #fff; }
#sl-zoom.on { display: flex; }
#sl-zoom figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s2); max-width: 96vw; max-height: 96vh; }
#sl-zoom img { display: block; max-width: 96vw; max-height: calc(96vh - 48px); width: auto; height: auto; object-fit: contain;
  border-radius: 0; cursor: zoom-out; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
#sl-zoom figcaption { display: flex; align-items: baseline; gap: var(--s3); max-width: 96vw; padding: 0 var(--s4); font-size: var(--t5);
  line-height: 1.4; color: rgba(255, 255, 255, .85); cursor: default; }
#sl-zoom .n { flex: none; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); }
#sl-zoom .cap { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#sl-zoom .file { flex: none; color: rgba(255, 255, 255, .6); text-decoration: underline; cursor: pointer; }
#sl-zoom .x { position: absolute; top: var(--s3); right: var(--s3); width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font: 26px/40px var(--font); cursor: pointer; }
#sl-zoom .x:hover { background: rgba(255, 255, 255, .25); }
#sl-zoom:not(.one) { cursor: default; }

/* 16. Skeleton viewer (/api/view): any file, read in the same language ----------- */
.chat { display: flex; flex-direction: column; gap: var(--s3); }
.bub { max-width: min(78%, var(--measure)); padding: var(--s2) var(--s3); border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bub.tool { font: 12px/1.45 var(--mono); color: var(--muted); background: var(--card); }
.bub .who { display: block; font-size: var(--t5); opacity: .75; margin-bottom: var(--s1); }
.md { max-width: var(--measure); }
.md pre, pre.plain { font: 12px/1.45 var(--mono); background: var(--surface); border-radius: var(--r);
  padding: var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
.md code { font-family: var(--mono); font-size: .9em; }
.md blockquote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--line); color: var(--muted); }
.tree { font: 13px/1.5 var(--mono); }
.tree details { margin-left: var(--s4); }
.tree > details { margin-left: 0; }
.tree summary { cursor: pointer; color: var(--muted); }
.tree .kv { margin-left: var(--s4); overflow-wrap: anywhere; }
.tree .key { color: var(--ink); font-weight: 600; }
.tree .str { color: var(--accent); }

/* 17. Search results (grouped: Tables · Staging · Library · Back Office · Logs) --- */
.results h2 { font-size: var(--t5); color: var(--muted); text-transform: none; margin: var(--s5) 0 var(--s1); }
.results .row .t { font-weight: 600; }
.results mark { background: none; color: var(--ink); font-weight: 700; text-decoration: underline; }

/* 18. Legacy aliases — old token names some pages still read; they resolve to the family. */
:root { --dim: var(--muted); --paper: var(--surface); --fg: var(--ink); --border: var(--line); }

/* 19. Quiz — one quiz page (pages/quizzes/quizzes/<slug>/<slug>.html, kernel/templates/quiz.html): the cards, the
   confidence row, reveal, 🔥, ✎ notes, the sticky tally, spent rounds. Right/wrong are the one pair of signal
   colours a quiz needs besides the accent. (FIXER-LIBRARY, the-refactor 2026-10-19) ------------------------- */
:root { --right: #15803d; --wrong: #b42318; }
:root[data-theme="dark"] { --right: #4ade80; --wrong: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --right: #4ade80; --wrong: #f87171; } }
[data-output="quiz"] .sub { color: var(--muted); max-width: var(--measure); }
.qtier { font-size: var(--t3); margin: var(--s5) 0 var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--line); }
.qcard { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.qq { font-weight: 600; margin: 0 0 var(--s3); }
.retake, .qedge-label, .qedge span, .qnote label { font-size: var(--t5); color: var(--muted); }
.retake { margin: calc(-1 * var(--s2)) 0 var(--s2); }
.qconf { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--t5); margin: 0 0 var(--s3); }
.qconf button, .qedge button { border-radius: 999px; }
.qconf button.sel, .qopts button.pick { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.qopts { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s3); }
.qopts button { text-align: left; font-size: var(--t4); line-height: 1.45; padding: var(--s2) var(--s3); }
.qcard.open .qopts button { cursor: default; }
.qcard.open .qopts button[data-right] { border-color: var(--right); color: var(--right); font-weight: 600; }
.qcard.open .qopts button.pick:not([data-right]) { border-color: var(--wrong); color: var(--wrong); }
.qreveal { font-weight: 600; }
.qreveal:disabled { opacity: .45; cursor: not-allowed; }
.qa { display: none; margin: var(--s3) 0 0; padding: var(--s2) var(--s3); background: var(--surface);
  border-left: 3px solid var(--right); border-radius: 0 var(--r) var(--r) 0; }
.qcard.open .qa { display: block; }
.qedge { display: none; margin: var(--s2) 0 0; align-items: center; gap: var(--s2); }
.qcard.open .qedge { display: flex; }
.qedge button.sel { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.qnote { margin: var(--s3) 0 0; }
.qnote label { display: block; margin: 0 0 var(--s1); }
.qnote textarea { min-height: 44px; resize: vertical; }
.qfree textarea { min-height: 90px; }
.qtally { position: sticky; bottom: var(--s2); background: var(--ink); color: var(--bg); border-radius: var(--r);
  padding: var(--s2) var(--s4); font-size: var(--t5); margin-top: var(--s4); }
.qcommit { margin-top: var(--s3); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-size: var(--t5); color: var(--muted); }
.qprev { margin: var(--s4) 0 0; border: 1px dashed var(--line); border-radius: var(--r); padding: var(--s2) var(--s4); color: var(--muted); }
.qprev summary { cursor: pointer; font-weight: 600; font-size: var(--t5); }
.qprev-round { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--line); }
.qprev-line { font-size: var(--t5); margin: 0 0 var(--s2); color: var(--ink); }
.qprev .qcard { opacity: .85; }
.qprev .qnote textarea { pointer-events: none; opacity: .8; }
.trail { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t5); color: var(--muted); }
.qprev ul { margin: var(--s1) 0 0; padding-left: 18px; font-size: var(--t5); }
.qprev .miss { color: var(--wrong); font-weight: 600; }
.qprev .hit { color: var(--right); }
.hear { margin: calc(-1 * var(--s1)) 0 var(--s3); font-size: var(--t5); }
.hear a { display: inline-block; border: 1px dashed var(--line); border-radius: 999px; padding: 1px var(--s3); margin: 2px var(--s2) 2px 0; text-decoration: none; }

/* 20. Path links — every level of the top line's path is a link (FIXER-LIBRARY) ---- */
.top .path a { color: inherit; text-decoration: none; }
.top .path a:hover { color: var(--ink); text-decoration: underline; }

/* 21. Power-plane console (pages/power-plane/console.html, served on :7375) — its live controls: Make it work,
   record, the preview stage, OBS layouts, slots, the QR dialog, the media grids. Scoped to main.pp. (FIXER-LIBRARY) */
.pp { --live: #dc2626; --on: #15803d; }
.pp .ctrls { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.pp .k { margin: var(--s4) 0 var(--s2); }
.pp button, .pp select { font-size: var(--t4); padding: var(--s2) var(--s3); }
.pp button:hover { border-color: var(--accent); color: var(--accent); }
.pp label.tog { display: inline-flex; gap: var(--s2); align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); cursor: pointer; }
.pp label.tog input { width: 18px; height: 18px; accent-color: var(--accent); }
.pp label.tog.small { font-size: var(--t5); padding: 2px var(--s2); margin-top: var(--s1); gap: var(--s1); }
.pp label.tog.small input { width: 14px; height: 14px; }
.pp #st, .pp #nqmsg { font-size: var(--t5); color: var(--muted); }
.pp #log { font: 12px/1.5 var(--mono); white-space: pre-wrap; color: var(--muted); max-height: 140px; overflow: auto; }
.pp #ocr, .pp .empty, .pp #drop, .pp #nqdrop { border: 1px dashed var(--line); border-radius: var(--r); padding: var(--s3); color: var(--muted); }
.pp #ocr { white-space: pre-wrap; min-height: 2.5em; color: var(--ink); }
.pp #drop, .pp #nqdrop { text-align: center; }
.pp #drop.over, .pp #nqdrop.over { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.pp #nqdrop img { max-width: 100%; max-height: 160px; display: block; margin: var(--s2) auto 0; }
.pp textarea#notes { min-height: 260px; resize: vertical; }
.pp #slots { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.pp #inframe { display: flex; flex-direction: column; gap: var(--s2); }
.pp #slotsview summary { cursor: pointer; color: var(--muted); }
.pp .slot { display: grid; grid-template-columns: 84px 28px 84px minmax(0, 1fr); gap: var(--s3); align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); }
.pp .slot img.qr { width: 84px; height: 84px; image-rendering: pixelated; background: #fff; border-radius: 4px; }
.pp .slot img.m { width: 84px; height: 84px; object-fit: contain; }
.pp .slot .m.text { display: grid; place-items: center; background: #fff; color: #111; font-weight: 700; font-size: 12px; text-align: center; border-radius: 6px; padding: 4px; overflow: hidden; }
.pp .slot .arrow { font-size: 22px; color: var(--muted); text-align: center; }
.pp .slot b { font-size: var(--t3); } .pp .slot small { color: var(--muted); display: block; }
.pp .slot select, .pp .slot button { font-size: var(--t5); padding: 2px var(--s2); margin-top: var(--s1); max-width: 100%; }
.pp .slot .kind { font-weight: 600; margin-left: var(--s2); }
.pp .size { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.pp .size b { min-width: 1.6em; text-align: center; font-size: var(--t4); }
.pp #newqr { font-size: var(--t5); padding: 2px var(--s3); margin-left: var(--s2); }
.pp dialog { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink); padding: var(--s4); width: min(520px, 92vw); }
.pp dialog::backdrop { background: rgb(0 0 0 / .5); }
.pp dialog .tabs { display: flex; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; align-items: center; }
.pp dialog .tabs .sep { color: var(--muted); font-size: var(--t5); margin-left: var(--s2); }
.pp dialog .tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pp dialog input[type="text"], .pp dialog textarea { width: 100%; margin: var(--s1) 0 var(--s3); }
.pp .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.pp .t { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); text-align: center; font-size: 12px; }
.pp .t img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 2px; }
.pp .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .t button { font-size: 11px; padding: 2px var(--s2); margin: 3px 1px 0; }
.pp .t.file { border-color: var(--accent); }
.pp .stage { position: relative; aspect-ratio: 1 / 1; background: #000; border-radius: var(--r); overflow: hidden; }
.pp .stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp #pvmsg { position: absolute; inset: 0; display: grid; place-items: center; color: #aaa; font-size: var(--t5); text-align: center; padding: var(--s5); }
.pp #pvmsg[hidden] { display: none; }
.pp #rec { position: absolute; top: var(--s3); left: var(--s3); background: var(--live); color: #fff; font-weight: 700; border-radius: var(--r); padding: var(--s1) var(--s3); font-size: var(--t5); }
.pp .recbtn { font-size: var(--t3); padding: var(--s3) var(--s5); border-color: var(--live); }
.pp .recbtn:hover, .pp .recbtn.on { background: var(--live); color: #fff; border-color: var(--live); }
.pp #fix { display: block; width: 100%; margin-top: var(--s3); font-size: var(--t1); font-weight: 700; padding: var(--s5); border-radius: var(--r); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pp #fix:hover { filter: brightness(1.1); } .pp #fix:disabled { opacity: .75; cursor: progress; filter: none; }
.pp #fix small { display: block; font-size: var(--t5); font-weight: 400; color: inherit; opacity: .9; margin-top: var(--s1); }
.pp #fixsteps { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--t5); }
.pp #fixsteps:empty { display: none; }
.pp #fixsteps li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: var(--s2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); }
.pp #fixsteps li i { font-style: normal; font-weight: 700; text-align: center; }
.pp #fixsteps li span { color: var(--muted); display: block; overflow-wrap: anywhere; }
.pp #fixsteps li.ok { border-color: var(--on); } .pp #fixsteps li.ok i, .pp #fixsum.ok { color: var(--on); }
.pp #fixsteps li.fail { border-color: var(--live); } .pp #fixsteps li.fail i, .pp #fixsum.fail { color: var(--live); }
.pp #fixsteps li.running { border-color: var(--accent); }
.pp #fixsum { font-weight: 700; margin-top: var(--s2); font-size: var(--t3); }

/* 22. Cards — the Soft treatment: what holds content is a white rounded card on the warm canvas, no border,
   a soft shadow. A card inside a card is flat. (Jake, sync 2026-10-26: "I like soft.") ------------------- */
.group, .card, .qcard, .bub, main > .rows, main > table, main > section > table, main > div > table {
  background: var(--card); border-color: transparent; border-radius: var(--r-card); box-shadow: var(--shadow); }
.group > header { background: var(--surface); border-bottom-color: var(--line); }
main > .rows { border-top: 0; padding: 0 var(--s5); }
main > .rows > li:last-child { border-bottom: 0; }
main > table, main > section > table, main > div > table { border-collapse: separate; border-spacing: 0; overflow: hidden; }
main > table tr:last-child > td, main > section > table tr:last-child > td, main > div > table tr:last-child > td { border-bottom: 0; }
:is(.group, .card, .qcard) :is(.group, .card, .qcard, table, .rows) { box-shadow: none; border-radius: var(--r); }
.qcard { padding: var(--s4) var(--s5); }
.mgrid { --bg: var(--card); background: var(--card); border-color: transparent !important; border-radius: var(--r-card);
  box-shadow: var(--shadow); overflow: hidden; }   /* the calendar's month: one card; its days read --bg */
.mgrid > :nth-child(7n) { border-right-color: transparent; }
.bub.me { background: var(--accent); }
.qtier, .qprev-round, .trail { border-color: var(--line); }
.trail { border-top: 0; }
.qconf button, .qedge button, .hear a { border-radius: 999px; }
@media (max-width: 600px) {
  .group, .card, .qcard, main > .rows, main > table { border-radius: 18px; }
  main > .rows { padding: 0 var(--s4); }
}

/* 23. Tables (the rail's Tables page, pages/tables/): the pill's spinner, a row's marks, the pop-ups, a row's page */
.spin { width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; vertical-align: -1px; animation: sl-spin .8s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.t.unread { font-weight: 700; }
.mark { font-size: var(--t5); color: var(--muted); margin-left: var(--s1); white-space: nowrap; }
.ctl button:disabled { opacity: .35; cursor: default; }
dialog.pop { border: 0; border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  padding: var(--s5); width: min(620px, 92vw); max-height: 86vh; overflow: auto; }
dialog.pop::backdrop { background: rgb(0 0 0 / .35); }
dialog.pop h2 { margin-top: 0; padding-right: var(--s6); }
dialog.pop .x { position: absolute; top: var(--s3); right: var(--s3); }
.numtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); margin: 0 0 var(--s4); }
.numtiles div { background: var(--surface); border-radius: var(--r); padding: var(--s2) var(--s3); }
.numtiles .num { font-size: var(--t2); } .numtiles small { display: block; color: var(--muted); }
.colchip { display: inline-block; border: 1px solid var(--line); border-radius: var(--r); padding: 0 6px; margin: 0 4px 4px 0; font: var(--t5)/1.7 var(--mono); }
.colchip.strict { border-color: var(--accent); color: var(--accent); }
details.cells > summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.cells[open] > summary { white-space: normal; }
iframe.rowpage { width: 100%; height: calc(100vh - 210px); min-height: 420px; border: 0; border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow); }

/* 24. ⇡ — the one mark on anything that is not in the cloud yet (an input, a comment, a row, a ✓ ✕ ▶, a guideline).
   Written only by SL.unsent() in shared/sl.js; it sits after the thing's name, inside the line, and moves nothing:
   in a table cell it takes no room at all (its 22px sit in the 24px between two cells' text), so no column shifts. */
.unsent { display: inline-block; width: 18px; font: 400 var(--t5)/1.2 var(--font); text-align: center; color: var(--up);
  border: 1px solid var(--up); border-radius: var(--r); margin-left: var(--s1); vertical-align: 1px; white-space: nowrap;
  cursor: default; -webkit-user-select: none; user-select: none; }
td .unsent { margin-right: -22px; }