/* The UX sketch's styles, shared by the ux-*.html pages, their index (space-command-ux.html) and the other mocks, so each opens from disk
   or from tools/preview-mocks.sh alike. Edit here; every mock follows. */
/* Layout: a design-board page. Palette + roles up top, then the dockable panel mocked side by side in dark and light. */
:root {
  /* Raw palette, dark (user-supplied) */
  --d-base:#292520; --d-surface:#322d27; --d-overlay:#3c3731; --d-text:#e5c7a9; --d-dim:#a8927c; --d-faint:#6f6255;
  --d-terracotta:#ff645a; --d-amber:#f5ae2e; --d-clay:#d0633d; --d-oak:#509552; --d-sage:#1398b9; --d-moss:#85c54c; --d-leaf:#98e036;
  /* Derived light: same hues, darkened for contrast on warm paper */
  --l-base:#f6f1ea; --l-surface:#fffdf9; --l-overlay:#ebe3d8; --l-text:#2f2a24; --l-dim:#7a6b5c; --l-faint:#b3a594;
  --l-terracotta:#d63a31; --l-amber:#b57609; --l-clay:#b04e2b; --l-oak:#3d7a3f; --l-sage:#0d7895; --l-moss:#5c9a2a; --l-leaf:#5f9a12;

  /* Page chrome (follows viewer theme) */
  --page:#efe9e1; --ink:#2f2a24; --ink-dim:#7a6b5c; --rule:#dcd2c5; --card:#fbf8f3;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* The app's own face (docs/design/README.md, Look › Type). The page chrome stays SF Pro. */
  --app: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page:#1f1c18; --ink:#e5c7a9; --ink-dim:#a8927c; --rule:#3c3731; --card:#292520; color-scheme: dark } }
:root[data-theme="dark"] { --page:#1f1c18; --ink:#e5c7a9; --ink-dim:#a8927c; --rule:#3c3731; --card:#292520; color-scheme: dark }

body { background:var(--page); color:var(--ink); font-family:var(--ui); line-height:1.45; }
.sc, .tray, .win { font-family:var(--app); }
.wrap { max-width:1080px; margin:0 auto; padding-block:40px 64px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); display:grid; gap:48px; }
h1 { font-size:28px; font-weight:650; letter-spacing:-.01em; margin:0; display:flex; align-items:center; gap:12px; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); font-weight:600; margin:0 0 16px; }
p.lede { margin:8px 0 0; color:var(--ink-dim); max-width:62ch; }
/* The mark is the app icon itself (favicon.svg): Paper in light mode, Charcoal in dark, drawn as paths. */
.badge { display:block; width:32px; height:32px; flex:none; }

/* Palette */
.swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.sw { background:var(--card); border:1px solid var(--rule); border-radius:10px; overflow:hidden; font-size:12px; }
.sw .chips { display:flex; height:44px; }
.sw .chips span { flex:1; }
.sw .meta { padding:8px 10px; display:grid; gap:2px; }
.sw b { font-size:13px; }
.sw code { font-family:var(--mono); color:var(--ink-dim); font-size:11px; }
.sw .role { color:var(--ink-dim); }

/* Board of panels */
.board { display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; }
.board figure { margin:0; display:grid; gap:10px; flex:1 1 340px; max-width:380px; min-width:0; grid-template-columns:minmax(0, 1fr); }
.board figcaption { font-size:12px; color:var(--ink-dim); }

/* ===== The panel (scoped tokens) ===== */
[data-look="dark"] { --base:var(--d-base); --surface:var(--d-surface); --overlay:var(--d-overlay); --text:var(--d-text); --dim:var(--d-dim); --faint:var(--d-faint);
  --terracotta:var(--d-terracotta); --amber:var(--d-amber); --clay:var(--d-clay); --oak:var(--d-oak); --sage:var(--d-sage); --moss:var(--d-moss); --leaf:var(--d-leaf);
  --edge:rgba(255,235,210,.07); --shadow:0 18px 50px rgba(0,0,0,.45);
  --raised:#3d362e; --raised-edge:rgba(255,235,210,.13); --raised-shadow:0 6px 18px rgba(0,0,0,.35); }
[data-look="light"] { --base:var(--l-base); --surface:var(--l-surface); --overlay:var(--l-overlay); --text:var(--l-text); --dim:var(--l-dim); --faint:var(--l-faint);
  --terracotta:var(--l-terracotta); --amber:var(--l-amber); --clay:var(--l-clay); --oak:var(--l-oak); --sage:var(--l-sage); --moss:var(--l-moss); --leaf:var(--l-leaf);
  --edge:rgba(60,40,20,.09); --shadow:0 18px 50px rgba(80,60,30,.18);
  --raised:#fff7ea; --raised-edge:rgba(160,110,40,.22); --raised-shadow:0 6px 18px rgba(80,60,30,.14); }

.sc { background:var(--base); color:var(--text); border-radius:18px; border:1px solid var(--edge); box-shadow:var(--shadow); padding:14px 12px 12px; display:flex; flex-direction:column; gap:12px; font-size:13px; }
.sc button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.sc :focus-visible { outline:2px solid var(--sage); outline-offset:2px; border-radius:6px; }

.top { display:flex; align-items:center; gap:8px; padding:0 4px; }
.top .badge { width:24px; height:24px; }

.search { display:flex; align-items:center; gap:7px; background:var(--overlay); border-radius:8px; padding:5px 9px; color:var(--faint); font-size:12.5px; }
.search svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; flex:none; }
.search input { flex:1; min-width:0; background:none; border:0; outline:0; font:inherit; color:var(--text); padding:0; }
.search input::placeholder { color:var(--faint); }
.search kbd { font-family:var(--mono); font-size:10px; color:var(--faint); border:1px solid var(--faint); border-radius:4px; padding:0 4px; opacity:.8; }
.search:focus-within { box-shadow:0 0 0 2px color-mix(in srgb, var(--sage) 60%, transparent); }

/* ===== Tray: menu bar strip + popover ===== */
.tray { display:grid; justify-items:end; gap:0; }
.menubar { width:100%; height:26px; border-radius:8px 8px 0 0; display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:0 12px; font-size:12px; color:var(--dim);
  background:color-mix(in srgb, var(--base) 75%, var(--overlay)); border:1px solid var(--edge); border-bottom:0; box-sizing:border-box; }
.menubar .mb-icon { display:flex; align-items:center; gap:3px; padding:2px 5px; border-radius:5px; background:var(--overlay); color:var(--text); }
.menubar .mb-icon svg { height:11px; width:auto; display:block; }
/* The menu bar mark is the icon's glyph paths with lighter strokes, in the label colour, drawn with the dot as one image. A #p0 anywhere adds a Terracotta dot beside it, centred, not a count. */
.menubar .mb-icon i { width:5px; height:5px; border-radius:50%; background:var(--terracotta); align-self:center; margin-left:1px; }
.pop { position:relative; width:300px; max-width:100%; margin-top:10px; margin-right:56px; padding:12px; gap:10px; }
.pop::before { content:""; position:absolute; top:-7px; right:22px; width:12px; height:12px; background:var(--base); border-left:1px solid var(--edge); border-top:1px solid var(--edge); transform:rotate(45deg); }
.pop .focus { padding:8px 10px; }
.pop .focus .t { font-size:13px; }
.sc .cog { width:24px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--dim); flex:none; }
.sc .cog.end { margin-left:auto; }
/* The kebab is narrower and its dots are thin, so it sits closer than a tab would to look evenly spaced. */
.sc .tabs + .cog { margin-left:-10px; }
.sc .cog:hover { background:var(--overlay); color:var(--text); }
.cog svg { width:16px; height:16px; fill:currentColor; }
.lbl { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; padding:0 4px; }
.next { display:grid; gap:1px; }
.next .proj-chip { display:block; margin-top:1px; font-size:10.5px; color:var(--faint); }
.attn { display:flex; gap:8px; align-items:baseline; padding:6px 8px; border-radius:8px; background:color-mix(in srgb, var(--amber) 9%, transparent); font-size:12px; color:var(--dim); }
.attn b { color:var(--text); font-weight:600; }
.attn .health { align-self:flex-start; margin-top:5px; }
.pop .foot { justify-content:space-between; align-items:center; }
.pop .foot kbd { font-family:var(--mono); font-size:10px; border:1px solid var(--faint); border-radius:4px; padding:0 4px; color:var(--dim); }
.scope { font-weight:650; font-size:16px; display:block; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* Affordances: every control glyph is drawn at least 12px, in Dim (never Faint) at rest, with a hit area of at least
   24x24. The ▾ menu triangle is a drawn chevron, the same everywhere. Native Settings keeps AppKit's own sizes. */
.scope small { display:inline-block; width:12px; height:12px; margin-left:4px; vertical-align:middle; position:relative; top:-1px; font-size:0; color:var(--dim); background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tabs { margin-left:auto; display:flex; gap:2px; }
.tabs button { width:24px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--dim); }
.tabs button[aria-pressed="true"] { background:var(--overlay); color:var(--text); }
.tabs svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.progress { display:flex; align-items:center; gap:10px; padding:0 4px; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.bar { flex:1; height:4px; border-radius:2px; background:var(--overlay); overflow:hidden; }
.bar i { display:block; height:100%; width:33%; background:var(--moss); border-radius:2px; }

.focus { position:relative; border-radius:12px; padding:10px 12px; background:var(--surface);
  border:1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--leaf) 12%, transparent), 0 0 24px color-mix(in srgb, var(--leaf) 14%, transparent); display:grid; gap:4px; }
.focus .k { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--leaf); font-weight:700; }
.focus .t { font-weight:600; font-size:14px; }
.src { font-family:var(--mono); font-size:10.5px; color:var(--faint); display:flex; gap:6px; align-items:center; min-width:0; }
.src span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.proj { background:var(--surface); border-radius:12px; border:1px solid var(--edge); }
.proj > header { display:flex; align-items:center; gap:8px; padding:9px 12px; }
.proj > header .chev { color:var(--faint); width:10px; font-size:10px; }
.proj > header .name { font-weight:600; }
.proj > header .count { margin-left:auto; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.health { width:7px; height:7px; border-radius:50%; flex:none; }
.kind { font-size:10px; color:var(--dim); border:1px solid var(--overlay); border-radius:5px; padding:0 5px; }

.sec { padding:2px 12px 10px; display:grid; gap:2px; }
.sec + .sec { border-top:1px solid var(--edge); padding-top:8px; }
.sec h4 { margin:0 0 2px; font-size:11.5px; font-weight:600; color:var(--dim); display:flex; align-items:baseline; gap:8px; min-width:0; }
.sec h4 .src { margin-left:auto; }
/* The section's file stays out of the way: → opens it, and a click on the heading reveals its path underneath. */
.sec h4[data-src] { flex-wrap:wrap; cursor:pointer; }
.sec h4 .go { margin-left:auto; width:24px; height:24px; margin-block:-6px; display:grid; place-items:center; border:0; padding:0; background:none; color:var(--dim); font:400 13px var(--app, inherit); cursor:pointer; border-radius:6px; }
.sec h4 .go:hover { color:var(--text); }
.sec h4.open::after { content:attr(data-src); flex-basis:100%; font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--faint); overflow-wrap:anywhere; }
/* A tagged ### heading is a label over its items, never a box. It strikes through once they're all done. */
.sec.all-done h4 .t { color:var(--faint); text-decoration:line-through; }
/* Done means it's no longer a current priority: the chip stays as a reminder, without its colour. */
.item.done .tag, .sec.all-done h4 .tag { color:var(--faint); background:var(--overlay); }
.item { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:start; padding:5px 4px; border-radius:7px; }
.item:hover { background:var(--overlay); }
.box { box-sizing:border-box; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--faint); margin-top:2.5px; }
.item.done .box { background:var(--moss); border-color:var(--moss); }
.item.done .txt { color:var(--faint); text-decoration:line-through; }
.txt { min-width:0; }
.tag { display:inline-block; vertical-align:1px; margin-left:3px; font-size:10.5px; font-weight:600; padding:0 6px; border-radius:5px; line-height:17px; white-space:nowrap; }
.p0 { color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 14%, transparent); }
.p1 { color:var(--clay); background:color-mix(in srgb, var(--clay) 14%, transparent); }
.p2 { color:var(--amber); background:color-mix(in srgb, var(--amber) 14%, transparent); }
.idea { color:var(--sage); background:color-mix(in srgb, var(--sage) 14%, transparent); }
.snooze { color:var(--dim); border:1px dashed var(--faint); }
.cat { color:var(--dim); background:var(--overlay); }

.suggest { border-radius:12px; padding:10px 12px; border:1px dashed color-mix(in srgb, var(--sage) 50%, transparent); display:grid; gap:8px; font-size:12px; }
.suggest p { margin:0; color:var(--dim); }
.suggest p b { color:var(--text); font-weight:600; }
.suggest .why { font-family:var(--mono); font-size:10.5px; color:var(--faint); }
/* Quiet at rest, detail on click: .x rows expand in place to show evidence (.more) and choices (.do) */
.x { cursor:pointer; border-radius:8px; }
.x:hover { background:color-mix(in srgb, var(--text) 5%, transparent); }
.more { display:none; margin-top:3px; font-size:11px; color:var(--faint); font-weight:400; }
.x.open .more { display:block; }
.focus.x { border-radius:12px; }
.focus.x:hover { background:color-mix(in srgb, var(--text) 4%, var(--surface)); }
.do { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; }
/* HIG order: alternatives, then Cancel, then the primary action trailing */
.do { justify-content:flex-end; }
.do button { color:var(--dim); font-weight:600; font-size:11px; padding:0; }
.do button:last-child { color:var(--sage); }
.compose .do button:last-child { background:var(--sage); color:var(--base); padding:3px 12px; border-radius:6px; }
.compose .do { align-items:center; }

.foot { display:flex; gap:6px; padding:6px 4px 0; border-top:1px solid var(--edge); font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.foot b { color:var(--text); font-weight:600; }

/* ===== Project detail ===== */
.dt-top { display:flex; align-items:center; gap:8px; padding:0 4px; }
.back { color:var(--dim); font-size:20px; line-height:1; min-width:24px; min-height:24px; display:grid; place-items:center; padding:0 0 2px; }
.dt-top .title { flex:1; min-width:0; text-align:left; font-size:16px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-top .title:hover { text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:4px; }
.dt-top .icon-btn { background:none; }
.menu { width:210px; max-width:100%; background:var(--surface); color:var(--text); border:1px solid var(--edge); border-radius:9px; box-shadow:var(--shadow); padding:4px; font-size:12.5px; display:grid; }
.menu span { display:flex; justify-content:space-between; padding:4px 10px; border-radius:5px; }
.menu span.hl { background:var(--sage); color:var(--base); }
.menu span small { color:inherit; opacity:.6; font-size:11px; }
.menu hr { border:0; border-top:1px solid var(--edge); margin:4px 6px; }
.card { background:var(--surface); border-radius:12px; border:1px solid var(--edge); }
.card.lead { background:var(--raised); border-color:var(--raised-edge); box-shadow:var(--raised-shadow); }
.icon-btn { width:26px; height:24px; border-radius:7px; display:grid; place-items:center; color:var(--dim); background:var(--overlay); }
.icon-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; }
.info { position:relative; width:290px; max-width:100%; margin:8px 0 0 auto; gap:0; padding:6px 0; }
.info::before { content:""; position:absolute; top:-7px; right:22px; width:12px; height:12px; background:var(--base); border-left:1px solid var(--edge); border-top:1px solid var(--edge); transform:rotate(45deg); }
.irow { display:grid; grid-template-columns:72px 1fr; gap:10px; padding:8px 14px; font-size:12px; align-items:baseline; }
.irow + .irow { border-top:1px solid var(--edge); }
.irow > span:first-child { color:var(--faint); font-size:11px; }
.irow .val { min-width:0; display:grid; gap:4px; }
.irow .val .src span { white-space:normal; overflow-wrap:anywhere; }
.irow .tag { margin:0; justify-self:start; }
.irow .act { color:var(--sage); font-size:11px; font-weight:600; justify-self:start; }
.hrow { display:grid; grid-template-columns:7px 1fr; gap:10px; align-items:start; padding:8px 12px; font-size:12px; }
.hrow .health { margin-top:5px; }
.hrow + .hrow { border-top:1px solid var(--edge); }
.hrow .what { color:var(--text); min-width:0; }
.hrow .what b { color:var(--text); font-weight:600; }
.ctx { display:block; margin-top:1px; font-size:10.5px; color:var(--faint); }
.phase { display:grid; grid-template-columns:1fr 54px auto; gap:8px; align-items:center; padding:4px 4px; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.phase.now { color:var(--text); font-weight:600; }
.phase .bar { height:3px; }
.phase .bar i { width:var(--w); }
.phase.now + .item, .phase.now ~ .item { margin-left:10px; }

/* ===== Posts ===== */
.post { display:grid; grid-template-columns:18px 1fr; gap:8px; padding:5px 4px; }
.mark { width:9px; height:9px; border-radius:50%; margin:4px 0 0 3px; box-sizing:border-box; }
.mark.draft { background:var(--sage); }
.mark.pub { background:var(--oak); }
.post .ttl { font-weight:500; }
.meta { display:block; margin-top:1px; font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.fm { display:block; font-family:var(--mono); font-size:10.5px; line-height:1.5; background:var(--overlay); color:var(--dim); border-radius:6px; padding:6px 8px; margin-top:6px; white-space:pre; overflow-x:auto; }
.add { margin-left:auto; color:var(--dim); font-size:18px; line-height:1; width:24px; height:24px; border-radius:6px; }
.add:hover { background:var(--overlay); color:var(--text); }
/* Preview, like a tape deck: ▶ starts the site's preview server, then a pulsing dot and its port (click to open) with ■ to stop. */
.deck { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--sage); }
.deck .pp { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--dim); padding:0; }
.deck .pp:hover { background:var(--overlay); color:var(--sage); }
.deck[data-on] .pp:hover { color:var(--text); }
.deck .pp svg { width:12px; height:12px; fill:currentColor; }
.deck .port { display:inline-flex; align-items:center; gap:5px; }
.deck .port i { width:6px; height:6px; border-radius:50%; background:var(--sage); animation:live-pulse 2s ease-out infinite; }
.deck[data-on="starting"] .port i { animation-duration:.8s; }
.deck .port button { color:inherit; padding:0; }
.deck .port button:hover { text-decoration:underline; text-underline-offset:3px; }
@keyframes live-pulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--sage) 55%, transparent); }
  70%  { box-shadow:0 0 0 6px color-mix(in srgb, var(--sage) 0%, transparent); }
  100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--sage) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .deck .port i { animation:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent); } }
.deck + .add { margin-left:2px; }

/* Scope menu: the panel title. Options depend on the tab; picking one narrows the tab to it. */
.sc { position:relative; }
.scope:has(small) { cursor:pointer; border-radius:6px; padding:0 4px; margin:0 -4px; }
.scope:has(small):hover { background:var(--overlay); }
.scope-menu { position:absolute; z-index:5; top:46px; left:40px; width:220px; }
.scope-menu span { justify-content:flex-start; gap:6px; cursor:default; }
.scope-menu span:hover { background:var(--sage); color:var(--base); }
.scope-menu .ck { width:14px; flex:none; font-style:normal; }
.scope-menu .k { margin-left:auto; }

/* One site: drafts, then every post by year, with a year index to jump. */
.site-bar { display:flex; align-items:center; gap:8px; padding:0 4px; }
.years { display:flex; flex-wrap:wrap; gap:2px 8px; font-family:var(--mono); font-size:10.5px; }
.years button { color:var(--faint) !important; padding:0 !important; }
.years button:hover, .years button[aria-current="true"] { color:var(--text) !important; }
.site-list { max-height:420px; overflow:auto; overscroll-behavior:contain; }
.site-list .sec h4 { position:sticky; top:0; background:var(--surface); padding:6px 0 2px; margin:0; z-index:1; }
.proj > header .name.go, .more-link { cursor:pointer; }
.proj > header .name.go:hover { text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px; }
.compose { display:grid; gap:8px; padding:4px 12px 12px; }
.ttl-in { font:inherit; font-size:14px; font-weight:600; color:var(--text); background:var(--overlay); border:0; border-radius:7px; padding:6px 9px; outline:0; }
.ttl-in:focus { box-shadow:0 0 0 2px color-mix(in srgb, var(--sage) 60%, transparent); }
.seg { display:flex; gap:2px; background:var(--overlay); border-radius:7px; padding:2px; justify-self:start; }
.seg button { padding:2px 10px; border-radius:5px; font-size:11.5px; color:var(--dim); }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--text); font-weight:600; }
.compose .fm { margin:0; }
.where { padding:4px 6px; margin:0 -6px; }
.where-row { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--dim); }
.where.open .more { display:grid; gap:6px; justify-items:start; margin-top:8px; }
.path { font-family:var(--mono); font-size:10.5px; color:var(--faint); overflow-wrap:anywhere; }
.compose { justify-items:stretch; }
.compose .do { margin:0; }

.intro { display:block; margin-top:4px; font-size:11.5px; line-height:1.45; color:var(--dim); font-style:italic; }
.more-link { justify-self:start; margin-left:30px; padding:3px 0 0; font-size:11px; color:var(--faint); }
.more-link:hover { color:var(--text); }

/* Search: hidden by default; ⌘F slides it in under the header */
.search-wrap { display:grid; grid-template-rows:0fr; margin-bottom:-12px; transition:grid-template-rows .18s ease, margin-bottom .18s ease; }
.pop > .search-wrap { margin-bottom:-10px; }
.search-wrap > .search { min-height:0; overflow:hidden; padding-block:0; transition:padding .18s ease; }
.search-wrap.open { grid-template-rows:1fr; margin-bottom:0; }
.search-wrap.open > .search { padding-block:5px; }
@media (prefers-reduced-motion: reduce) { .search-wrap, .search-wrap > .search { transition:none; } }

.fields { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); }
.fields .mark { margin:0; }

/* Post detail: reads like the post, not like its source */
.pd-meta { display:flex; align-items:center; gap:8px; padding:0 4px 0 23px; font-size:11.5px; color:var(--dim); margin-top:-6px; }
.pd-meta .mark { margin:0; }
.dt-top .title.multiline { flex:1 1 auto; margin:0; cursor:pointer; white-space:normal; text-wrap:balance; line-height:1.25; }
.sc > * { flex-shrink:0; }
.read { background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:14px 16px; max-height:340px; overflow:auto; font-size:13px; line-height:1.6; color:var(--text); display:grid; gap:10px; }
.read p { margin:0; }
.read h5 { margin:6px 0 0; font-size:13px; font-weight:650; }
.read ul { margin:0; padding-left:18px; display:grid; gap:2px; }
.read em { color:var(--dim); }
.read .img { aspect-ratio:16/9; max-width:100%; border-radius:8px; background:linear-gradient(135deg, color-mix(in srgb, var(--amber) 35%, var(--overlay)), color-mix(in srgb, var(--clay) 30%, var(--overlay))); display:grid; place-items:end start; padding:6px 8px; font-size:10.5px; color:var(--base); font-family:var(--mono); }

.date { cursor:pointer; border-bottom:1px dotted transparent; }
.date:hover { border-bottom-color:currentColor; }

/* ===== Item actions ===== */
.p3 { color:var(--dim); background:color-mix(in srgb, var(--dim) 14%, transparent); }
.p4 { color:var(--faint); background:color-mix(in srgb, var(--faint) 14%, transparent); }
.item.act .box { cursor:pointer; }
.item.act .box:hover { border-color:var(--moss); }
.item.done .box { position:relative; }
.item.done .box::after { content:""; position:absolute; left:50%; top:45%; width:3px; height:6.5px; box-sizing:border-box; border:solid var(--base); border-width:0 1.6px 1.6px 0; transform:translate(-50%, -50%) rotate(45deg); }
.acts { display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; margin-top:6px; }
.acts .do { margin:0; }
.tiers { display:flex; gap:3px; }
.tiers button { font-size:10.5px; font-weight:600; padding:0 6px; line-height:17px; border-radius:5px; }
.tiers button:not(.on) { background:none; color:var(--faint); box-shadow:inset 0 0 0 1px var(--overlay); }
.tiers button:not(.on):hover { color:var(--text); }
.confirm { display:none; }
.item.confirming .confirm { display:block; }
.item.confirming .acts { display:none; }
.confirm .do { margin-top:4px; }
.item.leaving { opacity:0; transition:opacity .25s ease; }
.do button.dismiss { color:var(--dim); }
.item.refused .box { border-color:var(--terracotta); }
.err { display:block; color:var(--terracotta); font-size:11.5px; }
.pick { display:grid; gap:2px; margin-top:6px; }
.pick button { text-align:left; font-size:11.5px; color:var(--text); padding:3px 6px; border-radius:6px; background:var(--overlay); }
.pick button:hover { box-shadow:inset 0 0 0 1px var(--sage); }
.pick .ln { font-family:var(--mono); color:var(--faint); margin-right:6px; }
.recover { display:flex; gap:8px; align-items:baseline; padding:8px 10px; border-radius:10px; font-size:12px; color:var(--dim); background:color-mix(in srgb, var(--terracotta) 9%, transparent); }
.recover b { color:var(--text); font-weight:600; font-family:var(--mono); font-size:11.5px; }
.recover .health { align-self:flex-start; margin-top:5px; }
/* No focus in this group today: the card asks once, without the glow, which belongs to a real focus. */
.focus.ask { border-style:dashed; box-shadow:none; }
.focus.ask .t { font-weight:600; color:var(--dim); }
.focus.ask .do { margin-top:2px; }
.focus.leaving { opacity:0; transition:opacity .25s ease; }
/* Picking: the next task clicked becomes the focus. Esc cancels. */
.sc.picking .item { cursor:pointer; }
/* The box stays the box: picking never takes it over. */
.sc.picking .item:hover { background:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--leaf) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .item.leaving, .focus.leaving { transition:none; } }

/* ===== Clipboard: a tool tab, set apart from the file views ===== */
.clips { display:grid; padding:4px; }
.clip { display:grid; gap:2px; padding:7px 8px; }
.clip + .clip { border-top:1px solid var(--edge); border-radius:0; }
.clip.open { background:color-mix(in srgb, var(--text) 4%, transparent); border-radius:8px; }
.clip.open + .clip { border-top-color:transparent; }
.cp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.cp.code, .pv.code { font-family:var(--mono); font-size:11.5px; }
.cp a, .pv a { color:inherit; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:2px; }
.hint { color:var(--sage); }
.meta .ok { color:var(--moss); }
.clip .more { margin-top:0; }
.tf { display:flex; flex-wrap:wrap; gap:3px; margin-top:8px; }
.tf button { font-size:10.5px; font-weight:600; padding:0 7px; line-height:18px; border-radius:5px; color:var(--faint); box-shadow:inset 0 0 0 1px var(--overlay); }
.tf button:hover { color:var(--text); }
.tf button[aria-pressed="true"] { color:var(--sage); background:color-mix(in srgb, var(--sage) 14%, transparent); box-shadow:none; }
.pv { display:block; position:relative; margin-top:6px; padding:7px 9px; border-radius:7px; background:var(--overlay); border-left:2px solid var(--sage); color:var(--text); font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; cursor:pointer; }
.pv.code { font-size:11px; }
.pv.orig { border-left-color:var(--faint); color:var(--dim); padding-top:18px; }
.pv.orig::before { content:"Original"; position:absolute; top:4px; left:9px; font-family:var(--app); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.cap { display:grid; gap:8px; margin-top:8px; }
.cap .ttl-in { font-size:12.5px; font-weight:500; }
.cap-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.cap .to { font-family:var(--mono); font-size:10.5px; color:var(--dim); padding:0; }
.cap .to:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.cap .pick { margin:0; }
.cap .do { margin:0; }
.wait p { color:var(--dim); }
.wait .do { margin:0; }
/* An unread copy: what kind it is comes from detection, which doesn't prompt. Clicking reads it, and macOS asks. */
.clip.waiting .cp { color:var(--sage); }

/* ===== Settings: native window, system greys, Sage as the accent ===== */
.board figure.wide { flex:1 1 480px; max-width:540px; }
/* About is a fixed-width window, so its figures don't shrink under it (except on a narrow screen). */
.board figure:has(> .about) { flex:0 0 380px; min-width:min(380px, 100%); }
[data-os="light"] { --w-bg:#f2f1ef; --w-chrome:#e9e8e5; --w-group:#fff; --w-sep:rgba(0,0,0,.09); --w-text:#1d1d1f; --w-dim:#6e6e73; --w-faint:#a1a1a6; --w-ctl:#e3e3e6; --w-accent:var(--l-sage); --w-amber:var(--l-amber); }
[data-os="dark"] { --w-bg:#1f1f1f; --w-chrome:#2a2a2a; --w-group:#2c2c2c; --w-sep:rgba(255,255,255,.08); --w-text:#ececec; --w-dim:#9a9a9f; --w-faint:#636368; --w-ctl:#3d3d40; --w-accent:var(--d-sage); --w-amber:var(--d-amber); }
.win { background:var(--w-bg); color:var(--w-text); border-radius:14px; overflow:hidden; border:1px solid var(--w-sep); box-shadow:0 18px 50px rgba(0,0,0,.3); font-size:13px; }
.win button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
.win :focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; border-radius:6px; }
.win-chrome { background:var(--w-chrome); border-bottom:1px solid var(--w-sep); }
.win-bar { display:grid; grid-template-columns:56px 1fr 56px; align-items:center; padding:9px 12px 0; }
.lights { display:flex; gap:7px; }
.lights i { width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.lights i:nth-child(2) { background:#febc2e; } .lights i:nth-child(3) { background:#28c840; }
.win-title { text-align:center; font-weight:600; }
.wtabs { display:flex; justify-content:center; flex-wrap:wrap; gap:2px; padding:6px 8px 8px; }
.wtabs button { display:grid; justify-items:center; gap:2px; padding:4px 8px; border-radius:7px; font-size:10.5px; color:var(--w-dim); }
.wtabs button[aria-selected="true"] { background:color-mix(in srgb, var(--w-text) 9%, transparent); color:var(--w-accent); }
.wtabs svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.form { padding:16px; display:grid; gap:16px; }
.grp h6 { margin:0 0 6px 4px; font-size:11.5px; font-weight:600; color:var(--w-dim); }
.rows { background:var(--w-group); border:1px solid var(--w-sep); border-radius:10px; }
.row { display:flex; align-items:center; gap:10px; padding:7px 12px; min-height:24px; }
.row + .row { border-top:1px solid var(--w-sep); }
.row .lab { flex:1; min-width:0; }
.row .sub { display:block; font-size:11px; color:var(--w-dim); }
.row .sub.warn { color:var(--w-amber); }
.note { margin:6px 4px 0; font-size:11px; color:var(--w-dim); }
.wmono { font-family:var(--mono); font-size:11.5px; overflow-wrap:anywhere; }
.dimv { color:var(--w-dim); font-size:12px; }
.pu, .win .btn { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:6px; background:var(--w-ctl); font-size:12.5px; white-space:nowrap; }
.pu svg { width:7px; height:10px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.tg { width:32px; height:18px; border-radius:9px; background:var(--w-ctl) !important; position:relative; flex:none; transition:background .15s; }
.tg::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:left .15s; }
.tg[aria-checked="true"] { background:var(--w-accent) !important; }
.tg[aria-checked="true"]::after { left:16px; }
.inf { color:var(--w-accent); font-size:11px; }
.win .cfg { color:var(--w-accent); font-family:var(--mono); font-size:10.5px; }
.row.fold { cursor:default; }
.row.fold.sel { background:color-mix(in srgb, var(--w-accent) 14%, transparent); }
.rows > .row.fold.sel:first-child { border-radius:9px 9px 0 0; }
.pm { display:flex; border-top:1px solid var(--w-sep); padding:2px 4px; }
.pm button { width:24px; height:20px; border-radius:5px; color:var(--w-dim); font-size:14px; }
.recw { display:flex; align-items:center; gap:10px; }
.rec { min-width:128px; padding:2px 8px; border-radius:6px; border:1px solid var(--w-sep) !important; background:var(--w-group) !important; color:var(--w-faint) !important; font-size:12px !important; text-align:center; }
.rec.set { color:var(--w-text) !important; font-family:var(--mono) !important; }
.sug { color:var(--w-accent) !important; font-size:11.5px !important; font-weight:600 !important; }
@media (prefers-reduced-motion: reduce) { .tg, .tg::after { transition:none; } }

/* ===== About: the app's own palette ===== */
.about { box-sizing:border-box; width:380px; max-width:100%; padding:38px 22px 18px; gap:14px; text-align:center; align-items:center; overflow:hidden; }
/* The teaser site's stripe across the top, 16px thick: always the bright tones, lifted toward the window in light mode. */
.about::before { content:""; position:absolute; top:0; left:0; right:0; height:16px; --b:24px; --soft:100%;
  --s-moss:color-mix(in srgb, #85c54c var(--soft), var(--base)); --s-amber:color-mix(in srgb, #f5ae2e var(--soft), var(--base));
  --s-clay:color-mix(in srgb, #d0633d var(--soft), var(--base)); --s-terracotta:color-mix(in srgb, #ff645a var(--soft), var(--base));
  --s-sage:color-mix(in srgb, #1398b9 var(--soft), var(--base));
  background:linear-gradient(to right,
  var(--s-moss) 0 var(--b), var(--s-amber) 0 calc(var(--b) * 2), var(--s-clay) 0 calc(var(--b) * 3), var(--s-terracotta) 0 calc(var(--b) * 4),
  var(--s-sage) 0 calc(100% - var(--b) * 4),
  var(--s-terracotta) 0 calc(100% - var(--b) * 3), var(--s-clay) 0 calc(100% - var(--b) * 2), var(--s-amber) 0 calc(100% - var(--b)), var(--s-moss) 0); }
.about[data-look="light"]::before { --soft:85%; }
.about .badge.big { width:56px; height:56px; justify-self:center; }
.about .name { font-size:20px; font-weight:650; margin-top:-2px; }
.ver { font-size:12px !important; color:var(--dim) !important; font-variant-numeric:tabular-nums; margin-top:-10px; }
.tagline { margin:0; color:var(--dim); font-size:13px; line-height:1.45; text-wrap:balance; }
.tagline b { color:var(--text); font-weight:600; }
/* What's New in SF Mono, like a changelog, with room between entries. */
.about .card { align-self:stretch; text-align:left; padding:12px 14px; display:grid; gap:6px; }
.about .card h4 { margin:0; font-size:12px; font-weight:600; color:var(--dim); }
.about .card ul { margin:0; padding-left:16px; display:grid; gap:5px; font-family:var(--mono); font-size:12px; line-height:1.45; }
.ab-links { display:flex; justify-content:center; gap:18px; font-size:13px; }
.ab-links button { color:var(--sage) !important; font-weight:600; }
.ack { font-size:12px; color:var(--dim); padding:3px 8px; }
.ack .more { text-align:left; font-size:11.5px; }
.ack .more span { display:flex; justify-content:space-between; gap:16px; }
.copy { font-size:11px; color:var(--faint); }
.copy .flag { font-size:16px; line-height:0; vertical-align:-2px; margin-left:2px; }

/* ===== Ideas: a Sage ring, not a box. Make a Task turns the ring into one. ===== */
.ring { box-sizing:border-box; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--sage); margin:3.5px 0 0 1px; cursor:default; transition:border-radius .2s ease, border-color .2s ease; }
.idea-row.tasked .ring { width:14px; height:14px; margin:2.5px 0 0; border-radius:4px; border-color:var(--faint); cursor:pointer; }
.idea-row.tasked .ring:hover { border-color:var(--moss); }
.idea-row.tasked.done .ring { background:var(--moss); border-color:var(--moss); }
.idea-row.tasked.done .it, .idea-row.gone .it { color:var(--faint); text-decoration:line-through; }
.idea-row.gone .ring { border-color:var(--faint); }
.idea-row.snoozed { opacity:.55; }
.idea-row .meta { margin-top:1px; }
.proj > header .tag { margin:0; }
.proj > header .name.vault { color:var(--dim); }
@media (prefers-reduced-motion: reduce) { .ring { transition:none; } }

/* ===== Projects: a momentum board; a row opens to what changed since you last looked ===== */
.plist { display:grid; padding:4px; }
.prow { display:grid; grid-template-columns:7px 1fr auto; gap:0 10px; align-items:start; padding:8px; }
.prow + .prow { border-top:1px solid var(--edge); border-radius:0; }
.prow[hidden] { display:none; }
.prow.open { background:color-mix(in srgb, var(--text) 4%, transparent); border-radius:8px; }
.prow.open + .prow { border-top-color:transparent; }
.prow .health { margin-top:6px; }
.pmain { min-width:0; display:grid; }
.pname { font-weight:500; color:var(--dim); justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prow.news .pname { color:var(--text); font-weight:600; }
.pname:hover { text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px; }
.pmeta { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--faint); margin-top:1px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pmeta .bar { flex:0 0 36px; height:3px; }
.pmeta .bar i { width:var(--w); }
.trail { display:flex; align-items:flex-end; gap:2px; height:14px; margin-top:3px; }
.trail i { width:3px; border-radius:1px; background:var(--moss); }
.trail i.z { background:var(--overlay); }
.prow > .more { grid-column:2 / -1; margin-top:6px; }
.since { display:block; color:var(--dim); font-size:11px; }
.rv { display:grid; gap:1px; margin-top:6px; }
.rv .lbl { padding:0; margin-bottom:1px; }
.ri { display:grid; grid-template-columns:14px 1fr; gap:6px; font-size:11.5px; color:var(--text); }
.ri .box { width:11px; height:11px; margin-top:2.5px; border-radius:3px; }
.ri .mark { width:7px; height:7px; margin:5px 0 0 2px; }
.ri.done { color:var(--faint); text-decoration:line-through; }
.ri.done .box { background:var(--moss); border-color:var(--moss); }
.more-n { justify-self:start; margin-left:20px; color:var(--faint) !important; font-size:11px; padding:0; }
.more-n:hover { color:var(--text) !important; }
.rh { display:flex; gap:8px; align-items:center; color:var(--text); font-size:11.5px; margin-top:6px; }

/* ===== Onboarding: a short welcome window in the app's palette ===== */
.welcome { padding:18px 18px 16px; gap:14px; min-height:380px;
  --w-ctl:var(--overlay); --w-accent:var(--sage); --w-sep:var(--edge); --w-group:var(--surface); --w-faint:var(--faint); --w-text:var(--text); }
.steps { display:flex; gap:5px; justify-content:center; }
.steps i { width:6px; height:6px; border-radius:50%; background:var(--overlay); }
.steps i.on { background:var(--sage); }
.welcome .badge.big { width:44px; height:44px; align-self:center; }
.welcome h3 { margin:0; font-size:17px; font-weight:650; text-align:center; text-wrap:balance; }
.welcome .sub { margin:-8px 0 0; color:var(--dim); font-size:12.5px; text-align:center; text-wrap:balance; }
.drop { border:1.5px dashed color-mix(in srgb, var(--sage) 50%, transparent); border-radius:12px; padding:12px; display:grid; gap:6px; justify-items:center; color:var(--faint); font-size:12px; }
.drop .f { justify-self:stretch; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--text); padding:4px 8px; background:var(--overlay); border-radius:6px; }
.drop .f button { color:var(--dim); font-size:16px; line-height:1; width:24px; height:24px; margin:-4px -6px -4px 0; display:grid; place-items:center; }
.drop .f button:hover { color:var(--text); }
.welcome .nest { margin:-4px 0 0; color:var(--faint); font-size:11.5px; text-align:center; text-wrap:balance; line-height:1.45; }
.welcome .wl.cap { max-height:112px; overflow:auto; -webkit-mask-image:linear-gradient(to bottom, #000 75%, transparent); mask-image:linear-gradient(to bottom, #000 75%, transparent); }
.tour-end .do { justify-content:flex-end; }
.tour-end .do .primary { background:var(--sage); color:var(--base); padding:3px 12px; border-radius:6px; }
.tourfile .ctxmenu { align-self:flex-start; width:max-content; display:grid; padding:5px; min-width:180px; background:var(--raised); border:1px solid var(--edge); border-radius:8px; box-shadow:var(--raised-shadow); font-size:12.5px; }
.tourfile .ctxmenu span { padding:3px 10px; border-radius:4px; }
.tourfile .ctxmenu span:last-child { background:var(--sage); color:var(--base); }
.tourfile .ctxmenu hr { border:0; border-top:1px solid var(--edge); margin:4px 6px; width:auto; }
.welcome .wnote { margin:0; font-size:11.5px; color:var(--dim); line-height:1.45; }
.welcome .wnote b { color:var(--text); font-weight:600; margin-right:4px; }
.welcome .lnk, .tour-end .lnk { color:var(--sage); padding:0; font-size:inherit; }
.welcome .wrow .ctx { display:block; white-space:normal; font-size:11px; margin-top:2px; }
.welcome .wrow .meta { display:block; }
.welcome .do.sm { margin:0; gap:8px; font-size:11px; flex:none; }
.welcome .do.sm button:last-child { color:var(--sage); }
.welcome .acc .tap { cursor:pointer; }
.welcome .acc .chev { color:var(--dim); width:24px; text-align:center; }
.welcome .sub-rows { border-left:2px solid color-mix(in srgb, var(--sage) 50%, transparent); margin-left:12px; }
.welcome .sub-rows .wrow { padding-left:22px; }
.welcome .seg button:disabled { opacity:.45; }
.welcome .wrow .lab:has(.meta), .welcome .wrow .lab:has(.ctx) { white-space:normal; }
.privacy { margin:0; text-align:center; font-size:11px; color:var(--faint); }
.welcome > .do { margin-top:auto; align-items:center; }
.welcome > .do button:last-child { background:var(--sage); color:var(--base); padding:3px 12px; border-radius:6px; }
.wl { display:grid; }
.wrow { display:flex; align-items:center; gap:10px; padding:7px 12px; font-size:12.5px; }
.wrow + .wrow { border-top:1px solid var(--edge); }
.wrow .lab { flex:1; min-width:0; }
.wrow .ctx { color:var(--sage); }
.welcome .lbl { margin-bottom:-8px; }
.welcome .rec { min-width:0; }
.welcome .wrow .lab { white-space:nowrap; }
.tour p { margin:0; color:var(--dim); }
.tour .to { font-family:var(--mono); font-size:10.5px; color:var(--dim); padding:0; justify-self:start; }
.tour .to:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.tour .do { margin:0; }
.tour-done { margin:0; font-size:12px; color:var(--moss); padding:0 4px; }
.tour-done .wmono { color:var(--dim); }
.tourfile { gap:8px; }
.tf-name { font-family:var(--mono); font-size:10.5px; color:var(--faint); padding:0 4px; }
.tourfile pre { margin:0; padding:12px 14px; background:var(--surface); border:1px solid var(--edge); border-radius:12px; font-family:var(--mono); font-size:11px; line-height:1.65; white-space:pre-wrap; color:var(--text); }
.tourfile pre .k { color:var(--sage); }
.tourfile pre .h { color:var(--dim); }

/* Teaser link */
.site-card { display:grid; gap:6px; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:16px 18px; color:var(--ink); text-decoration:none; }
.site-card b { font-family:var(--mono); font-size:15px; }
.site-card span { color:var(--ink-dim); font-size:13px; }
.site-card:hover { border-color:var(--pg-sage); }
.site-card:focus-visible { outline:2px solid var(--pg-sage); outline-offset:2px; }

/* ===== Value prop (page chrome, both themes) ===== */
:root { --pg-leaf:#5f9a12; --pg-moss:#5c9a2a; --pg-sage:#0d7895; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pg-leaf:#98e036; --pg-moss:#85c54c; --pg-sage:#1398b9; } }
:root[data-theme="dark"] { --pg-leaf:#98e036; --pg-moss:#85c54c; --pg-sage:#1398b9; }
.hero { display:grid; gap:14px; }
.hero h1 { font-size:34px; }
.promise { margin:0; font-size:21px; line-height:1.35; font-weight:600; max-width:30ch; text-wrap:balance; }
.hero .lede { margin:0; }
.flow { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; counter-reset:step; }
.step { position:relative; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; display:grid; gap:6px; align-content:start; font-size:13px; color:var(--ink-dim); counter-increment:step; }
.flow .step b::before { content:counter(step) "  "; color:var(--pg-sage); font-family:var(--mono); }
.step b { color:var(--ink); font-size:14px; }
.step code, .hero .lede code { font-family:var(--mono); font-size:11.5px; }
.step .eg { margin-top:4px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.chip { font-style:normal; font-weight:600; font-size:11px; padding:0 6px; border-radius:5px; color:var(--pg-sage); background:color-mix(in srgb, var(--pg-sage) 14%, transparent); }
.mini-bar { flex:1; height:4px; border-radius:2px; background:var(--rule); overflow:hidden; }
.mini-bar i { display:block; width:43%; height:100%; background:var(--pg-moss); }
.focus-step { border-color:color-mix(in srgb, var(--pg-leaf) 55%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--pg-leaf) 12%, transparent), 0 0 24px color-mix(in srgb, var(--pg-leaf) 12%, transparent); }
.mini-focus { font-weight:600; color:var(--ink); }
.mini-focus::before { content:"Focus"; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--pg-leaf); font-weight:700; }
.posts-step { background:none; border-style:dashed; }
.principle { margin:4px 0 0; font-size:13px; color:var(--ink-dim); font-style:italic; }

/* Process footer */
.process { border-top:1px solid var(--rule); padding-top:20px; font-size:12.5px; color:var(--ink-dim); }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; margin:0 0 10px; }
.stats div { display:grid; gap:2px; }
.stats dt { order:2; font-size:11.5px; }
.stats dd { order:1; margin:0; font-size:20px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }
.process p { margin:0; max-width:70ch; }

/* Contents: a rail on the right on wide screens, a button that opens the list on narrower ones */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
.wrap > section, .wrap > footer, .wrap > header { scroll-margin-top:24px; }
.toc { position:fixed; z-index:10; top:calc(env(safe-area-inset-top, 0px) + 40px); right:max(24px, env(safe-area-inset-right, 0px)); width:170px; font-size:12px; }
.toc ol { list-style:none; margin:0; padding:0; display:grid; gap:1px; border-left:1px solid var(--rule); }
.toc a { display:block; padding:3px 10px; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-dim); text-decoration:none; }
.toc a:hover { color:var(--ink); }
.toc a[aria-current="true"] { color:var(--ink); font-weight:600; border-left-color:var(--pg-sage); }
.toc a:focus-visible, .toc-btn:focus-visible { outline:2px solid var(--pg-sage); outline-offset:2px; border-radius:6px; }
.toc-btn { display:none; }
@media (min-width: 1300px) { body { padding-right:190px; } }
@media (max-width: 1299px) {
  .toc { top:auto; bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); width:auto; }
  .toc-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:7px 14px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18); }
  .toc ol { display:none; position:absolute; right:0; bottom:calc(100% + 8px); width:200px; max-height:70vh; overflow:auto; padding:6px; background:var(--card); border:1px solid var(--rule); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
  .toc.open ol { display:grid; }
  .toc a { margin:0; border:0; border-radius:6px; padding:5px 8px; }
  .toc a[aria-current="true"] { background:color-mix(in srgb, var(--pg-sage) 12%, transparent); }
}

/* Pieces list */
.pieces { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.piece { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:12px 14px; font-size:13px; }
.piece b { display:block; margin-bottom:2px; }
.piece span { color:var(--ink-dim); }
.piece.drop b::before { content:"Drop · "; color:var(--d-terracotta); }
.piece.keep b::before { content:"Keep · "; color:var(--d-oak); }

/* The mock pages: the index's lists and each page's way back to it. */
.crumb { margin:0 0 8px; font-size:13px; }
.crumb a, .mocks a { color:var(--l-sage); }