/* Inter is self-hosted (SIL OFL). It used to come from Google Fonts, which
       cost two preconnects plus a render-blocking stylesheet on every load, and
       broke the app's offline story. v20 is variable, so one file per subset
       covers 400-700; latin-ext is only fetched if a glyph needs it. */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url(assets/fonts/inter-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* Monochrome, inverted: black is the primary surface, white the secondary.
       Every value below is the mirror of the old paper theme, so the light-theme
       relationships still hold — wash sits one step off paper, line-strong is the
       heavier of the two rules, dim is the quietest text. Flip these eleven and
       the whole app flips with them; nothing downstream hardcodes a colour. */
    :root {
      color-scheme: dark;
      --paper: #000000;
      --wash: #0e0e0e;
      --ink: #ffffff;
      /* Text laid ON an --ink fill (buttons, the rail mark) — the inverse of --ink. */
      --on-ink: #000000;
      /* Hover/active surface: the dark-side twin of the old #f2f2f2 tint. */
      --tint: #1c1c1c;
      --line: #262626;
      --line-strong: #4a4a4a;
      --text: #f4f4f4;
      --muted: #a6a6a6;
      --dim: #767676;
      /* Red has to be lifted well off black to stay legible; its wash likewise. */
      --danger: #ff6b5e;
      --danger-wash: #2a1210;
      --page-pad: clamp(16px, 2.8vw, 40px);
      --page-pad-left: var(--page-pad);
      --page-pad-right: var(--page-pad);
      --rail-w: 64px;
      --board-gap: 14px;
      --lane-count: 3;
      --lane-min: 260px;
      --lane-max: 380px;
      font-family: Inter, "Helvetica Neue", "Segoe UI", Helvetica, Arial, system-ui, sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      min-width: 320px;
      width: 100%;
      background: var(--paper);
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    button, input, select, textarea, label { touch-action: manipulation; }

    body {
      min-height: 100vh;
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      background: var(--paper);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    :focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    /* --- Left rail ------------------------------------------------------- */
    .rail {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: var(--rail-w);
      padding: 20px 0;
      border-right: 1px solid var(--line);
      background: var(--paper);
    }

    .rail-mark {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      margin-bottom: 24px;
      background: var(--ink);
      color: var(--on-ink);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      user-select: none;
    }

    .rail-btn {
      appearance: none;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 0;
      background: transparent;
      color: var(--dim);
      cursor: pointer;
      transition: color 160ms ease, background 160ms ease;
    }
    .rail-btn svg { width: 18px; height: 18px; }
    .rail-btn:hover { color: var(--ink); }
    .rail-btn.active { background: var(--tint); color: var(--ink); }

    main {
      width: auto;
      max-width: none;
      margin: 0 0 0 var(--rail-w);
      padding: 44px var(--page-pad-right) 64px var(--page-pad-left);
    }

    .hero-shell {
      position: relative;
      margin-bottom: 14px;
      padding: 4px 0 14px;
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .18em;
      line-height: 1;
      text-transform: uppercase;
    }

    .signal-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ink);
      animation: signal-blink 2.4s ease-in-out infinite;
    }

    .signal-dot.ok { background: var(--ink); }
    .signal-dot.err { background: var(--danger); }
    .signal-dot.busy { background: var(--dim); }

    .hero-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .hero-row > div:first-child { }

    h1 {
      max-width: 12ch;
      color: var(--text);
      font-size: clamp(26px, 3.4vw, 38px);
      font-weight: 600;
      letter-spacing: -.035em;
      line-height: 1;
    }

    .hero-subtitle {
      max-width: 28rem;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      letter-spacing: -.005em;
    }

    /* Thin progress ring — white arc over a dark track. */
    .progress-orb {
      --progress: 0%;
      position: relative;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      align-content: center;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: var(--paper);
    }

    .progress-orb::before {
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background: conic-gradient(var(--ink) var(--progress), var(--line) var(--progress));
      content: "";
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      padding: 3px;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
    }

    .progress-orb::after { content: none; }

    .orb-ring { display: none; }

    .progress-orb strong, .progress-orb span:last-child { position: relative; z-index: 1; }

    .progress-orb strong {
      margin-top: 6px;
      color: var(--text);
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .progress-orb span:last-child {
      margin-top: 4px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .meta {
      color: var(--muted);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .meta strong { color: var(--text); font-size: 15px; font-weight: 700; }

    .control-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

    /* Mode tabs — underlined text row, editorial style. */
    .mode-tabs {
      display: flex;
      gap: 28px;
      margin-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }

    .mode-tabs button {
      appearance: none;
      position: relative;
      padding: 4px 0 13px;
      border: 0;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      background: transparent;
      color: var(--dim);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 160ms ease, border-color 160ms ease;
    }


    .mode-tabs button:hover { color: var(--text); }
    .mode-tabs button[aria-selected="true"] {
      border-bottom-color: var(--ink);
      color: var(--text);
    }

    /* Projects — session handoffs from a Drive folder.

       The content is a pile of dated pickups of the same work, so the page is
       built as a directory (which projects are live) plus a dossier (where this
       one stands, what is next, and how it got here). Boxes are deliberately
       avoided: four identical bordered cards gave every section the same weight,
       which is exactly the thing that made the first pass unreadable. Hierarchy
       comes from a label in the margin, hairline rules, and type scale. */
    .projects-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .projects-bar .handoff-status { margin: 0; }

    /* The hero orb reports how much of the *task board* is done. On Projects it
       reads as "your projects are 0% complete", which is both wrong and the
       loudest thing on the page — so it is hidden here. */
    /* The board's completion orb means nothing outside the board itself. */
    body[data-mode="projects"] .progress-orb { display: none; }
    body[data-mode="history"] .progress-orb { display: none; }

    /* Task history — a quiet ledger: day heading, then one line per task with
       the time in a fixed column so the eye can run down it. */
    .history-filter { display: flex; gap: 6px; }
    .history-filter button {
      appearance: none;
      min-width: 52px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--muted);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 160ms ease, border-color 160ms ease;
    }
    .history-filter button:hover { border-color: var(--line-strong); color: var(--text); }
    .history-filter button.active { border-color: var(--ink); color: var(--text); }
    .history-status { min-height: 16px; margin: 0 0 14px; color: var(--dim); font-size: 11px; }
    .history-status.is-error { color: var(--danger); }
    .history-list { display: grid; gap: 26px; padding-bottom: 24px; }
    .history-day-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin: 0 0 6px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
      color: var(--text);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .history-day-count { color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
    .history-rows { margin: 0; padding: 0; list-style: none; }
    .history-row {
      display: grid;
      grid-template-columns: 76px 74px minmax(0, 1fr);
      align-items: baseline;
      gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }
    .history-row:last-child { border-bottom: 0; }
    .history-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .history-chip {
      justify-self: start;
      padding: 3px 7px;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .history-chip[data-tone="ticked"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
    .history-chip[data-tone="deleted"] { border-color: var(--danger); color: var(--danger); }
    .history-body { min-width: 0; }
    .history-title { color: var(--text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
    .history-row[data-kind="deleted"] .history-title { color: var(--muted); }
    .history-meta { margin-top: 3px; color: var(--dim); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
    @media (max-width: 680px) {
      /* Filters and refresh share one row under the count and search. */
      .history-filter { flex: 1 1 60%; min-width: 0; gap: 4px; }
      .history-filter button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px; }
      .history-bar .sync-btn { flex: 0 0 auto; min-height: 40px; }
      .history-row { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
      .history-time { grid-column: 1; }
      .history-chip { grid-column: 2; justify-self: start; }
      .history-body { grid-column: 1 / -1; }
    }

    .projects-layout {
      display: grid;
      grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
      gap: clamp(20px, 3vw, 44px);
      align-items: start;
      min-width: 0;
    }

    .projects-list {
      display: grid;
      align-content: start;
      gap: 10px;
      position: sticky;
      top: 12px;
      min-width: 0;
      max-height: calc(100vh - 32px);
    }
    .projects-search input {
      width: 100%;
      min-height: 34px;
      padding: 7px 10px;
      font: inherit;
      font-size: 13px;
      color: var(--text);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 0;
    }
    .projects-search input::placeholder { color: var(--dim); }
    .projects-search input:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; }

    #projectsIndex {
      display: grid;
      align-content: start;
      gap: 2px;
      overflow-y: auto;
      min-height: 0;
      scrollbar-width: thin;
    }

    /* Recency buckets: which work is live and which has gone quiet is the first
       thing you want from a list of projects, so it is the list's structure. */
    .project-group-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin: 14px 0 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--line);
      color: var(--dim);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .project-group:first-child .project-group-label { margin-top: 0; }
    .project-group-count { font-variant-numeric: tabular-nums; }

    .project-row {
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 9px 10px 10px 12px;
      font: inherit;
      text-align: left;
      color: var(--text);
      background: none;
      border: 0;
      /* The active marker is a solid edge rather than a filled box: a filled row
         competes with the dossier beside it. */
      border-left: 2px solid transparent;
      cursor: pointer;
    }
    .project-row:hover { background: var(--wash); }
    .project-row.active { border-left-color: var(--ink); background: var(--wash); }
    .project-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
    .project-row-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .project-row-name {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    .project-row.active .project-row-name { font-weight: 700; }
    .project-row-when {
      flex: 0 0 auto;
      color: var(--dim);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    /* Two lines of the status: enough to choose between projects, not enough to
       turn the directory into a wall of prose. */
    .project-row-status {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.45;
    }
    .project-row-flag {
      color: var(--danger);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .project-detail { min-width: 0; display: grid; align-content: start; }
    .project-detail:focus { outline: none; }

    /* The header stays put: these documents run long, and losing track of which
       project you are reading halfway down is the obvious failure. */
    .project-head {
      position: sticky;
      top: 0;
      z-index: 5;
      display: grid;
      gap: 10px;
      padding: 2px 0 14px;
      margin-bottom: -1px;
      /* Solid, not a fade: a gradient to transparent let the body text scroll
         through the bottom of the header and collide with the meta row. */
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }
    .project-head h3 {
      font-size: clamp(21px, 2.4vw, 27px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }
    /* The one sentence that answers "where is this?" — the reason to open the
       tab at all, so it is set as a lede rather than buried in a card. */
    .project-lede {
      max-width: 68ch;
      color: var(--text);
      font-size: 15px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .project-meta {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      color: var(--dim);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .project-meta > * { display: inline-flex; align-items: center; gap: 9px; }
    .project-meta-sep { color: var(--line-strong); }
    .project-meta a { color: var(--muted); text-underline-offset: 3px; }
    .project-meta a:hover { color: var(--ink); }
    .project-meta .project-row-flag { letter-spacing: .1em; }

    /* label in the margin | content — the structure that replaced the boxes */
    .project-section {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 0 24px;
      padding: 20px 0;
      border-top: 1px solid var(--line);
    }
    .project-section > h4 {
      color: var(--dim);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      line-height: 1.6;
      padding-top: 2px;
    }
    .project-section--lead > h4 { color: var(--ink); }
    .project-section--quiet .project-prose { color: var(--muted); font-size: 12.5px; }

    .project-prose { color: var(--text); font-size: 13.5px; line-height: 1.65; min-width: 0; overflow-wrap: anywhere; }
    .project-section--lead .project-prose { font-size: 14px; }
    .project-prose > :first-child { margin-top: 0; }
    .project-prose p { margin-top: 9px; }
    .project-prose ul, .project-prose ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
    .project-prose ol { counter-reset: step; }
    .project-prose li { position: relative; padding-left: 26px; line-height: 1.6; }
    /* Numbers carry meaning here — a handoff's next steps are written in the
       order the author wants them done — so they are kept and set as the marker
       rather than replaced with anonymous bullets. */
    .project-prose ol > li::before {
      content: counter(step);
      counter-increment: step;
      position: absolute;
      left: 0;
      top: .1em;
      min-width: 17px;
      color: var(--dim);
      font-size: 10px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: .04em;
    }
    .project-prose ul > li::before {
      content: "";
      position: absolute;
      left: 4px;
      top: .62em;
      width: 5px;
      height: 1px;
      background: var(--line-strong);
    }
    .project-prose li > ul, .project-prose li > ol { margin-top: 8px; }
    .project-prose strong { font-weight: 650; }
    .project-prose code {
      padding: 1px 4px;
      background: var(--wash);
      border: 1px solid var(--line);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: .86em;
      overflow-wrap: anywhere;
    }
    /* Handoffs are full of wide tables and command blocks; they scroll inside
       their own box so the page never scrolls sideways. */
    .project-prose pre {
      margin-top: 10px;
      padding: 11px 13px;
      overflow-x: auto;
      background: var(--wash);
      border: 1px solid var(--line);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11.5px;
      line-height: 1.55;
    }
    .project-prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }
    .project-table-wrap { margin-top: 10px; overflow-x: auto; }
    .project-prose table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
    .project-prose th, .project-prose td {
      padding: 6px 11px;
      border: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }
    .project-prose th {
      background: var(--wash);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .project-prose a { color: var(--text); text-underline-offset: 2px; }
    .project-prose a:hover { color: var(--ink); }

    .project-sections { display: grid; }
    .project-sections details { border-top: 1px solid var(--line); }
    .project-sections details:first-child { border-top: 0; }
    .project-sections summary {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 9px 0;
      cursor: pointer;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      list-style: none;
    }
    .project-sections summary::-webkit-details-marker { display: none; }
    .project-sections summary::before {
      content: "+";
      width: 10px;
      flex: 0 0 auto;
      color: var(--dim);
      font-weight: 700;
    }
    .project-sections details[open] > summary { color: var(--ink); }
    .project-sections details[open] > summary::before { content: "−"; }
    .project-sections summary:hover { color: var(--ink); }
    .project-sections summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .project-sections .project-prose { padding: 2px 0 14px 18px; }

    /* The spine: a handoff folder is an accumulation of dated pickups, so the
       sessions are drawn as one — filled node for the document being read,
       hollow for the earlier ones. */
    .project-spine { display: grid; gap: 0; }
    .project-session {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 4px 12px;
      padding: 9px 0 9px 20px;
    }
    .project-session::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--line);
    }
    .project-session:first-child::before { top: 14px; }
    .project-session:last-child::before { bottom: calc(100% - 14px); }
    .project-session::after {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      width: 7px;
      height: 7px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      background: var(--paper);
    }
    .project-session.is-current::after { border-color: var(--ink); background: var(--ink); }
    .project-session-when {
      color: var(--muted);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }
    .project-session.is-current .project-session-when { color: var(--ink); font-weight: 650; }
    .project-session-docs { display: grid; gap: 3px; justify-items: end; text-align: right; }
    .project-session-doc { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .project-session-kind {
      color: var(--dim);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .project-session-files { color: var(--dim); font-size: 11px; white-space: nowrap; }
    .project-session-files a { color: var(--muted); text-underline-offset: 2px; }
    .project-session-files a:hover { color: var(--ink); }

    .project-empty {
      display: grid;
      gap: 6px;
      padding: 26px 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .project-empty strong { color: var(--text); font-size: 14px; font-weight: 650; }

    @media (max-width: 900px) {
      .projects-layout { grid-template-columns: minmax(0, 1fr); }
      .projects-list { position: static; max-height: none; }
      #projectsIndex { max-height: 260px; }
      /* Stack the margin labels above their content rather than squeezing a
         118px column into a phone. */
      .project-section { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 17px 0; }
      .project-head { position: static; padding-bottom: 12px; background: none; }
      .project-head h3 { font-size: 22px; }
      .project-lede { font-size: 14px; }
    }

    /* --- Lane options popover -------------------------------------------- */
    .lane-menu-pop {
      position: fixed;
      z-index: 90;
      display: grid;
      gap: 2px;
      min-width: 210px;
      padding: 6px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .72);
    }
    .lane-menu-pop[hidden] { display: none; }
    .lane-menu-pop button {
      appearance: none;
      border: 0;
      padding: 10px 12px;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }
    .lane-menu-pop button:hover:not(:disabled) { background: var(--tint); color: var(--ink); }
    .lane-menu-pop button.danger { color: var(--danger); }
    .lane-menu-pop button.danger:hover:not(:disabled) { background: var(--danger-wash); color: var(--danger); }
    .lane-menu-pop button:disabled { opacity: .38; cursor: default; }
    .lane-menu-pop .lane-menu-glyph { display: inline-block; width: 20px; color: var(--muted); }

    /* Filter tabs — flat bordered squares. */
    .tabs {
      position: relative;
      display: flex;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .tab-indicator { display: none; }

    .tabs button, .sync-btn, .reset-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
    }

    .tabs button {
      position: relative;
      z-index: 1;
      min-width: 52px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      background: var(--paper);
      transition: color 160ms ease, border-color 160ms ease;
    }

    .tabs button:hover { border-color: var(--line-strong); color: var(--text); }
    .tabs button.active { border-color: var(--ink); color: var(--text); }

    .sync-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .sync-btn:hover { border-color: var(--ink); color: var(--text); }
    .lane-size-select {
      appearance: none;
      padding: 0 30px 0 14px;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    .lane-size-select option { background: var(--paper); color: var(--text); }

    /* Names alone do not say what a colour looks like, so tint the options themselves.
       Safari ignores option colours and simply shows the names — no loss either way. */
    .color-select option { background: var(--paper); font-weight: 700; }
    .color-select option[value="cyan"] { color: #ffffff; }
    .color-select option[value="sky"] { color: #7fd4ff; }
    .color-select option[value="blue"] { color: #7ea2ff; }
    .color-select option[value="violet"] { color: #b096ff; }
    .color-select option[value="plum"] { color: #d08ae0; }
    .color-select option[value="magenta"] { color: #f27bd0; }
    .color-select option[value="pink"] { color: #ff85a8; }
    .color-select option[value="red"] { color: #ff7a70; }
    .color-select option[value="coral"] { color: #ff9466; }
    .color-select option[value="tangerine"] { color: #ffb15c; }
    .color-select option[value="amber"] { color: #e0b34a; }
    .color-select option[value="gold"] { color: #f7d764; }
    .color-select option[value="lime"] { color: #aacf5c; }
    .color-select option[value="green"] { color: #6fd97f; }
    .color-select option[value="mint"] { color: #55d3a8; }
    .color-select option[value="teal"] { color: #4fc9cf; }
    .color-select option[value="slate"] { color: #a3b4cc; }
    .color-select option[value="sand"] { color: #d9c49c; }
    .sync-btn:disabled { cursor: wait; opacity: .6; }
    .sync-btn.busy { border-color: var(--ink); color: var(--text); }
    .sync-icon { display: inline-block; font-size: 18px; font-weight: 400; line-height: 1; }
    .sync-btn.busy .sync-icon { animation: spin 900ms linear infinite; }

    .sync-btn.primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
    .sync-btn.primary:hover { background: var(--text); color: var(--on-ink); }

    /* --- search across every tab ------------------------------------------ */
    .search-field {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .search-icon {
      position: absolute;
      left: 9px;
      color: var(--dim);
      font-size: 14px;
      pointer-events: none;
    }

    .search-input {
      width: 190px;
      min-width: 0;
      height: 34px;
      padding: 0 26px 0 26px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      color: var(--text);
      font: inherit;
      font-size: 12px;
    }

    .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .search-input:focus { outline: none; border-color: var(--ink); }
    .search-input::placeholder { color: var(--dim); }

    .search-clear {
      position: absolute;
      right: 4px;
      width: 20px;
      height: 20px;
      border: 0;
      background: none;
      color: var(--muted);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
    }
    .search-clear:hover { color: var(--ink); }

    .search-results { margin: 6px 0 18px; }

    .search-summary {
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .search-group { margin-bottom: 14px; }

    .search-group-name {
      margin-bottom: 6px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--line);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
    }

    .search-hit {
      display: flex;
      align-items: baseline;
      gap: 10px;
      width: 100%;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-top: 0;
      background: var(--paper);
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .search-group .search-hit:first-of-type { border-top: 1px solid var(--line); }
    .search-hit:hover, .search-hit:focus-visible { background: var(--wash); outline: none; }
    .search-hit .hit-title { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
    .search-hit.is-done .hit-title { color: var(--dim); text-decoration: line-through; }
    .search-hit .hit-lane {
      flex: 0 0 auto;
      color: var(--dim);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .search-hit mark { background: #6b4f00; color: #fff3c4; }

    .sync-line {
      display: flex;
      align-items: center;
      min-height: 24px;
      margin-bottom: 18px;
      color: var(--dim);
      font-size: 12px;
    }

    .sync-line::before { width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background: currentColor; content: ""; opacity: .9; }
    .sync-line.ok { color: var(--muted); }
    .sync-line.err { color: var(--danger); }

    .list {
      display: grid;
      gap: 9px;
      min-height: 40px;
    }

    /* Tab strip — one tab per board. Each is a whole task manager of its own. */
    .board-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin: 18px 0 0;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }

    .board-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 6px 0 13px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      cursor: pointer;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .board-tab:hover { border-color: var(--line-strong); color: var(--text); }
    .board-tab[aria-selected="true"] {
      border-color: var(--ink);
      color: var(--text);
    }
    .board-tab-count {
      display: grid;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      place-items: center;
      color: var(--dim);
      font-size: 11px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .board-tab[aria-selected="true"] .board-tab-count { color: var(--text); }

    /* Rename/delete live on the selected tab only — the others stay quiet. */
    .board-tab-action {
      display: none;
      width: 22px;
      height: 22px;
      place-items: center;
      border: 0;
      background: transparent;
      color: var(--dim);
      font: inherit;
      font-size: 12px;
      line-height: 1;
      cursor: pointer;
    }
    .board-tab[aria-selected="true"] .board-tab-action { display: grid; }
    .board-tab-action:hover { background: var(--tint); color: var(--ink); }
    .board-tab-action.danger:hover { background: var(--danger-wash); color: var(--danger); }

    /* While a lane is dragged by its grip, the other tabs are drop targets. */
    .board-tabs.accepts-lane .board-tab:not([aria-selected="true"]) { border-style: dashed; border-color: var(--line-strong); color: var(--text); }
    .board-tabs.accepts-lane .board-tab.is-lane-drop { border-style: solid; border-color: var(--ink); background: var(--tint); box-shadow: 0 0 0 1px var(--ink); }

    .board-tab-add {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 1px dashed var(--line-strong);
      background: transparent;
      color: var(--dim);
      font: inherit;
      font-size: 15px;
      cursor: pointer;
      transition: border-color 160ms ease, color 160ms ease;
    }
    .board-tab-add:hover { border-color: var(--ink); color: var(--ink); }

    .board-toolbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin: 8px 0 14px;
    }

    .board-toolbar h2 {
      margin-top: 7px;
      color: var(--text);
      font-size: clamp(24px, 4vw, 32px);
      font-weight: 600;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .board-summary {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      color: var(--dim);
      font-size: 11px;
      letter-spacing: .03em;
    }

    .board-summary strong { color: var(--text); font-size: 13px; }
    .board-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* --- quick add -------------------------------------------------------- */
    .quick-add {
      position: relative;
      display: flex;
      align-items: center;
      margin: 0 0 14px;
    }
    /* display:flex would otherwise beat the hidden attribute. */
    .quick-add[hidden] { display: none; }
    .quick-add-icon {
      position: absolute;
      left: 13px;
      color: var(--dim);
      font-size: 13px;
      pointer-events: none;
    }
    .quick-add-input {
      width: 100%;
      min-width: 0;
      height: 40px;
      padding: 0 44px 0 34px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--text);
      font: inherit;
      font-size: 13px;
      transition: border-color 160ms ease;
    }
    .quick-add-input:hover { border-color: var(--line-strong); }
    .quick-add-input:focus { outline: none; border-color: var(--ink); }
    .quick-add-input::placeholder { color: var(--dim); }
    .quick-add:focus-within .quick-add-icon { color: var(--text); }
    .quick-add-kbd {
      position: absolute;
      right: 10px;
      padding: 2px 6px;
      border: 1px solid var(--line);
      color: var(--dim);
      font: inherit;
      font-size: 10px;
      letter-spacing: .04em;
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    /* Once Ben is typing, the hint has done its job. */
    .quick-add:focus-within .quick-add-kbd { opacity: 0; }
    @media (hover: none) { .quick-add-kbd { display: none; } }

    .task-board {
      --lane-share: max(
        var(--lane-min),
        calc((100% - (max(var(--lane-count), 1) - 1) * var(--board-gap)) / max(var(--lane-count), 1))
      );
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(var(--lane-min), min(var(--lane-max), var(--lane-share)));
      align-items: start;
      justify-content: start;
      gap: var(--board-gap);
      min-height: 300px;
      width: auto;
      max-width: none;
      margin-left: calc(-1 * var(--page-pad-left));
      margin-right: calc(-1 * var(--page-pad-right));
      padding: 8px var(--page-pad-right) 20px var(--page-pad-left);
      overflow-x: auto;
      overflow-y: visible;
      overscroll-behavior-x: contain;
      scroll-padding-left: var(--page-pad-left);
      scroll-padding-right: var(--page-pad-right);
      scrollbar-gutter: stable;
      scrollbar-color: var(--line-strong) transparent;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
    }

    /* Category box size steps. --lane-min/--lane-max set the column width, --lane-cap the
       stacked width, and --lane-pad/--lane-body/--lane-body-rows/--lane-tall the box itself,
       so a size step reads the same in both layouts. "md" reproduces the original board. */
    .task-board[data-size="xs"] {
      --lane-min: 180px; --lane-max: 200px; --lane-cap: 420px;
      --lane-pad: 8px; --lane-body: 120px; --lane-body-rows: 56px; --lane-tall: 180px; --lane-body-max: 200px;
    }
    .task-board[data-size="sm"] {
      --lane-min: 230px; --lane-max: 280px; --lane-cap: 640px;
      --lane-pad: 10px; --lane-body: 168px; --lane-body-rows: 76px; --lane-tall: 232px; --lane-body-max: 280px;
    }
    .task-board[data-size="md"] {
      --lane-min: 260px; --lane-max: 380px; --lane-cap: 900px;
      --lane-pad: 12px; --lane-body: 214px; --lane-body-rows: 96px; --lane-tall: 286px; --lane-body-max: 380px;
    }
    .task-board[data-size="lg"] {
      --lane-min: 320px; --lane-max: 470px; --lane-cap: 1200px;
      --lane-pad: 15px; --lane-body: 280px; --lane-body-rows: 124px; --lane-tall: 360px; --lane-body-max: 480px;
    }
    .task-board[data-size="xl"] {
      --lane-min: 400px; --lane-max: 580px; --lane-cap: none;
      --lane-pad: 18px; --lane-body: 360px; --lane-body-rows: 156px; --lane-tall: 450px; --lane-body-max: 600px;
    }

    /* "Wrap" — categories flow onto as many rows as they need, so a growing board stays
       on screen instead of running off the right edge. Flex (not grid) so a hand-resized
       lane can simply set its own flex-basis. */
    .task-board[data-layout="wrap"] {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: var(--board-gap);
      min-height: 0;
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding: 8px 0 20px;
      overflow-x: visible;
      scrollbar-gutter: auto;
      touch-action: auto;
    }

    .task-board[data-layout="wrap"] .lane {
      flex: 1 1 var(--lane-min);
      max-width: var(--lane-max);
      min-height: 0;
    }

    /* A row is as tall as its tallest lane, so one 15-card lane would strand the next row
       thousands of pixels down and leave a void beside the short lanes. Cap the card area
       and let a busy lane scroll inside itself — that is what keeps the rows compact. */
    .task-board[data-layout="wrap"] .lane-cards {
      max-height: var(--lane-body-max, 380px);
      min-height: var(--lane-body-rows, 96px);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    /* Explicit "stacked" choice — one full-width category per row at any viewport */
    .task-board[data-layout="rows"] {
      grid-auto-flow: row;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-columns: unset;
      min-height: 0;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding: 8px 0 20px;
      overflow-x: visible;
      scrollbar-gutter: auto;
      touch-action: pan-y;
    }

    .task-board[data-layout="rows"] .lane {
      min-height: 0;
      max-width: var(--lane-cap, none);
    }

    .task-board[data-layout="rows"] .lane-cards {
      min-height: var(--lane-body-rows, 96px);
    }

    .lane {
      position: relative;
      min-width: 0;
      width: 100%;
      min-height: var(--lane-tall, 286px);
      padding: var(--lane-pad, 12px);
      border: 1px solid var(--lane-color, var(--ink));
      /* Plain --wash first, so a browser without color-mix keeps the old
         background rather than falling out of the cascade entirely. */
      background: var(--wash);
      background: color-mix(in srgb, var(--lane-color, var(--ink)) 7%, var(--wash));
      transition: box-shadow 160ms ease;
    }

    /* Lane palette — keep in step with CATEGORY_COLORS in lib/board-store.js.
       The colour a category is given paints its whole box: the border, a wash of
       the background, the rule under its header and its count square. These are
       the lifted-for-black variants — the paper-theme mid-tones (#2456d6 and
       friends) sank into the background once the surface went dark. */
    .lane { --lane-color: #ffffff; }
    .lane[data-color="sky"] { --lane-color: #7fd4ff; }
    .lane[data-color="blue"] { --lane-color: #7ea2ff; }
    .lane[data-color="violet"] { --lane-color: #b096ff; }
    .lane[data-color="plum"] { --lane-color: #d08ae0; }
    .lane[data-color="magenta"] { --lane-color: #f27bd0; }
    .lane[data-color="pink"] { --lane-color: #ff85a8; }
    .lane[data-color="red"] { --lane-color: #ff7a70; }
    .lane[data-color="coral"] { --lane-color: #ff9466; }
    .lane[data-color="tangerine"] { --lane-color: #ffb15c; }
    .lane[data-color="amber"] { --lane-color: #e0b34a; }
    .lane[data-color="gold"] { --lane-color: #f7d764; }
    .lane[data-color="lime"] { --lane-color: #aacf5c; }
    .lane[data-color="green"] { --lane-color: #6fd97f; }
    .lane[data-color="mint"] { --lane-color: #55d3a8; }
    .lane[data-color="teal"] { --lane-color: #4fc9cf; }
    .lane[data-color="slate"] { --lane-color: #a3b4cc; }
    .lane[data-color="sand"] { --lane-color: #d9c49c; }
    .lane.is-drag-over {
      box-shadow: 0 0 0 2px var(--ink);
    }

    /* The rule under the header carries the lane colour too, but muted — at full
       strength it competes with the border for the same edge of the same box. */
    .lane-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; min-height: 43px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); border-bottom-color: color-mix(in srgb, var(--lane-color, var(--ink)) 55%, transparent); }
    .lane-title { display: flex; align-items: center; gap: 8px; min-width: 0; }

    .lane-grip {
      flex: none;
      color: var(--dim);
      font-size: 13px;
      line-height: 1;
      letter-spacing: -.12em;
      cursor: grab;
      user-select: none;
      transition: color 160ms ease;
    }
    .lane-grip:hover { color: var(--ink); }
    .lane-grip:active { cursor: grabbing; }
    .lane.is-lane-dragging { opacity: .4; }

    /* Where the dragged lane will land — a bar on the leading edge of the neighbour. */
    .lane[data-drop-edge] { position: relative; }
    .lane[data-drop-edge]::after {
      position: absolute;
      z-index: 2;
      background: var(--ink);
      content: "";
    }
    .lane[data-drop-edge="before"]::after { top: 0; bottom: 0; left: -8px; width: 3px; }
    .lane[data-drop-edge="after"]::after { top: 0; right: -8px; bottom: 0; width: 3px; }
    .task-board[data-layout="rows"] .lane[data-drop-edge="before"]::after,
    .task-board[data-layout="rows"] .lane[data-drop-edge="after"]::after {
      right: 0; bottom: auto; left: 0; width: auto; height: 3px;
    }
    .task-board[data-layout="rows"] .lane[data-drop-edge="before"]::after { top: -8px; }
    .task-board[data-layout="rows"] .lane[data-drop-edge="after"]::after { top: calc(100% + 5px); }

    .lane-resize {
      position: absolute;
      top: 10px;
      right: -7px;
      bottom: 10px;
      z-index: 3;
      width: 13px;
      cursor: col-resize;
      touch-action: none;
    }
    /* The hit area runs the whole edge, but a tall lane pushes its midpoint off screen —
       so the visible grip line sits up beside the header where it can actually be seen. */
    .lane-resize::after {
      position: absolute;
      top: 14px;
      left: 50%;
      width: 3px;
      height: 34px;
      transform: translateX(-50%);
      background: var(--line);
      content: "";
      opacity: 0;
      transition: opacity 160ms ease, background 160ms ease;
    }
    .lane-resize:hover::after, .lane-resize.is-resizing::after {
      background: var(--ink);
      opacity: 1;
    }
    .lane.is-resizing { user-select: none; }
    .lane-title h3 { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .lane-count { display: grid; min-width: 23px; height: 23px; place-items: center; border: 1px solid var(--lane-color, var(--ink)); background: var(--paper); color: var(--lane-color, var(--ink)); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .lane-menu, .card-action {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--dim);
      font: inherit;
      cursor: pointer;
    }
    .lane-menu { width: 28px; height: 26px; font-size: 16px; line-height: 1; }
    .lane-menu.lane-clear {
      width: auto;
      min-width: 28px;
      padding: 0 8px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .lane-menu:hover, .card-action:hover { background: var(--tint); color: var(--ink); }
    .lane-menu.lane-clear:hover, .lane-menu.danger:hover { color: var(--danger); }
    .lane-cards { display: grid; gap: 9px; min-height: var(--lane-body, 214px); }
    .lane-cards:empty::after { display: grid; min-height: 120px; place-items: center; border: 1px dashed var(--line-strong); color: var(--dim); content: "Drop a task here"; font-size: 11px; letter-spacing: .05em; }

    /* Sub-categories (2026-09-29): titled groups inside a lane. They wear the
       lane's colour, so they read as part of it, not as lanes of their own.
       The selectors carry .task-board .lane so they outrank the layout rules
       (wrap / stacked / phone), which all set .lane-cards heights. */
    .task-board .lane.has-subs > .lane-cards { min-height: 0; }
    .task-board .lane.has-subs > .lane-cards:empty::after { display: none; }
    /* While a card is in the air, the lane's own (empty) top area opens up as a drop spot. */
    .task-board.is-task-dragging .lane.has-subs > .lane-cards:empty { min-height: 40px; border: 1px dashed var(--line-strong); }
    .sublane {
      margin-top: 12px;
      padding-top: 9px;
      border-top: 1px solid var(--line-strong);
      border-top-color: color-mix(in srgb, var(--lane-color, var(--ink)) 32%, transparent);
    }
    .lane.has-subs > .lane-cards:empty + .sublane { margin-top: 0; border-top: 0; padding-top: 0; }
    .sublane-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; margin-bottom: 7px; }
    .sublane-toggle {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      padding: 3px 4px 3px 0;
      border: 0;
      background: none;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .sublane-chevron { flex: none; display: grid; width: 14px; height: 14px; place-items: center; color: var(--lane-color, var(--ink)); transition: transform 160ms ease; }
    .sublane-chevron::before { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); }
    .sublane.is-collapsed .sublane-chevron { transform: rotate(-90deg); }
    .sublane-toggle h4 { overflow: hidden; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
    .sublane-toggle:hover h4 { color: var(--ink); }
    .sublane-count { flex: none; min-width: 19px; padding: 0 5px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
    .sublane-header .lane-menu { width: 24px; height: 22px; font-size: 14px; }
    .task-board .lane .lane-cards.sublane-cards { min-height: 0; max-height: none; overflow: visible; }
    .task-board .lane .lane-cards.sublane-cards:empty::after { min-height: 40px; content: "Drop a task here, or ＋"; }
    .sublane.is-collapsed .sublane-cards { display: none; }
    .sublane.is-drag-over { outline: 2px solid var(--ink); outline-offset: 3px; }

    /* Two classes, because the plain `.task` rule is declared later in this file
       and at equal specificity was silently winning grid-template-columns, gap,
       padding and cursor — the board card has never had its intended box. */
    .task.task-card {
      grid-template-columns: 20px 1fr;
      gap: 9px;
      min-width: 0;
      padding: 9px 10px;
      cursor: grab;
    }
    .task-card:active { cursor: grabbing; }
    .task-card.is-dragging { opacity: .38; }
    /* Landing spot after jumping from a search result. */
    .task-card.is-found { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
    .task-card .task-copy { grid-column: 2; }
    .task-card .task-trailing { grid-column: 2; justify-content: flex-end; margin-top: 6px; padding-top: 0; border-top: 0; }
    .task-card .task-description { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .card-actions { display: flex; align-items: center; gap: 2px; }
    .card-action { min-width: 24px; height: 24px; font-size: 13px; }
    .card-action-wide { min-width: 0; padding: 0 8px; font-size: 11px; letter-spacing: .04em; }

    /* The archive is a holding pen, not the board — make that visible at a glance. */
    .task-card.is-archived { background: var(--wash); border-style: dashed; }
    .task-card.is-archived .title { color: var(--muted); }

    /* On a pointer device the row is noise on every card until you reach for it —
       drag already does the moving. Touch keeps them always on, because the
       arrows are the only way to move a task with a thumb. */
    @media (hover: hover) and (pointer: fine) {
      .task-card .task-trailing {
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height .12s ease, opacity .12s ease, margin-top .12s ease;
      }
      .task-card:hover .task-trailing,
      .task-card:focus-within .task-trailing {
        margin-top: 6px;
        max-height: 32px;
        opacity: 1;
      }
    }
    .card-action.danger:hover { color: var(--danger); }
    .card-action:disabled { cursor: not-allowed; opacity: .3; }
    .keyboard-hint { margin-top: 12px; color: var(--dim); font-size: 10px; letter-spacing: .02em; }
    .keyboard-hint-board-mobile { display: none; }


    dialog {
      width: min(480px, calc(100% - 28px));
      margin: auto;
      padding: 0;
      border: 1px solid var(--ink);
      background: var(--paper);
      color: var(--text);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .8);
    }
    dialog::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(2px); }
    .dialog-shell { padding: 22px; }
    .dialog-shell h2 { color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
    .dialog-subtitle { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
    .field-grid { display: grid; gap: 13px; margin-top: 20px; }
    .field-grid.two { grid-template-columns: 1fr 1fr; }
    .field-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .field-grid input, .field-grid textarea, .field-grid select {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--line-strong);
      outline: none;
      background: var(--paper);
      color: var(--text);
      font: inherit;
      font-size: 13px;
      letter-spacing: normal;
      text-transform: none;
    }
    .field-grid textarea { min-height: 90px; resize: vertical; }
    /* Plain-language helper beside a field — normal case, unlike the labels. */
    .field-note { align-self: end; padding-bottom: 6px; color: var(--dim); font-size: 11px; line-height: 1.5; }
    .field-grid input:focus, .field-grid textarea:focus, .field-grid select:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
    .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
    .dialog-error { min-height: 18px; margin-top: 10px; color: var(--danger); font-size: 11px; }

    .task {
      position: relative;
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 13px;
      align-items: start;
      overflow: hidden;
      padding: 16px;
      border: 1px solid var(--line);
      background: var(--paper);
      cursor: pointer;
      transition: border-color 160ms ease;
      animation: task-enter 360ms cubic-bezier(.2,.8,.2,1) both;
      animation-delay: calc(var(--task-index, 0) * 35ms);
    }

    .task:hover, .task:focus-within { border-color: var(--ink); }

    .check {
      appearance: none;
      position: relative;
      width: 19px;
      height: 19px;
      margin-top: 1px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      cursor: pointer;
      transition: border-color 160ms ease;
    }

    .check:hover { border-color: var(--ink); }
    .check:checked { border-color: var(--ink); background: var(--paper); }
    .check:checked::after { position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; content: ""; transform: rotate(45deg); }

    .task-copy { min-width: 0; }

    .title {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      line-height: 1.4;
      transition: color 160ms ease;
    }

    .task-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
    .priority-chip { color: var(--text); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .priority-chip[data-priority="high"] { color: var(--ink); }
    .priority-chip[data-priority="low"] { color: var(--dim); }
    /* The due chip is the one dated thing on a card, so it gets the pill shape
       the priority label deliberately does not — states only ever change its
       colour, never its geometry. Overdue is the single loudest thing on the
       board; "later" is quiet enough to ignore until it matters. */
    .due-chip {
      padding: 2px 8px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    /* Same pill as the due chip, but a button: it opens the task's folder. */
    .folder-chip {
      padding: 2px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: none;
      color: var(--muted);
      font: inherit;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
    }
    .folder-chip:hover, .folder-chip:focus-visible { border-color: var(--line-strong); color: var(--ink); background: var(--tint); }
    .due-chip[data-due-state="today"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
    .due-chip[data-due-state="overdue"] { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
    .due-chip[data-due-state="later"], .due-chip[data-due-state="done"] { border-color: var(--line); color: var(--dim); }
    .task-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
    .task-link {
      display: inline-flex; align-items: center; max-width: 100%;
      padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
      color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em;
      text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: color 160ms ease, border-color 160ms ease;
    }
    .task-link:hover, .task-link:focus-visible { color: var(--ink); border-color: var(--line-strong); }
    .meta-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
    .signal-copy { color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

    .task-trailing { display: flex; align-items: center; gap: 9px; padding-top: 1px; }
    .tag { color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
    .arrow { color: var(--dim); font-size: 17px; line-height: 1; transition: color 160ms ease, transform 160ms ease; }
    .task:hover .arrow, .task:focus-within .arrow { color: var(--ink); transform: translateX(2px); }

    .task.done { border-color: var(--line); background: #141414; }
    .task.done .title { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line-strong); }
    .task.done .task-meta, .task.done .arrow { opacity: .55; }

    .empty {
      display: grid;
      place-items: center;
      gap: 9px;
      min-height: 170px;
      padding: 32px;
      border: 1px dashed var(--line-strong);
      color: var(--muted);
      text-align: center;
    }

    .empty-orbit { width: 20px; height: 20px; border: 1px solid var(--ink); }
    .empty strong { color: var(--text); font-size: 15px; }
    .empty span:last-child { color: var(--dim); font-size: 12px; }

    .handoff-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 16px;
    }

    .section-kicker {
      color: var(--dim);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .handoff-toolbar h2 {
      margin-top: 8px;
      color: var(--text);
      font-size: clamp(25px, 5vw, 36px);
      font-weight: 600;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .handoff-intro { max-width: 31rem; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .handoff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .handoff-summary { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; color: var(--dim); font-size: 11px; letter-spacing: .04em; }
    .handoff-summary strong { color: var(--text); font-size: 15px; }
    .handoff-status { min-height: 24px; margin-bottom: 12px; color: var(--dim); font-size: 12px; }
    .handoff-status.ok { color: var(--muted); }
    .handoff-status.err { color: var(--danger); }


    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 24px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    footer span { color: var(--dim); font-size: 11px; letter-spacing: .02em; }
    .reset-btn { padding: 6px 0; color: var(--dim); font-size: 10px; }
    .reset-btn:hover { color: var(--danger); }
    .reset-btn.reset-flash { color: var(--danger); animation: reset-flash 500ms ease-out; }

    @keyframes signal-blink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes task-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes task-complete { 0% { transform: scale(1); } 45% { transform: scale(1.01); } 100% { transform: scale(1); } }
    @keyframes pulse-away { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }
    @keyframes reset-flash { 0% { opacity: .4; } 45% { opacity: 1; } 100% { opacity: .8; } }

    .task-complete { animation: task-complete 420ms cubic-bezier(.2,.9,.2,1); }
    .completion-pulse { position: absolute; top: 17px; left: 17px; z-index: 2; width: 19px; height: 19px; border: 2px solid var(--ink); border-radius: 50%; animation: pulse-away 520ms ease-out both; pointer-events: none; }

    @media (max-width: 680px) {
      :root {
        --page-pad: 14px;
        --page-pad-left: max(14px, env(safe-area-inset-left, 0px));
        --page-pad-right: max(14px, env(safe-area-inset-right, 0px));
      }
      body { overflow-x: clip; }
      .rail { display: none; }
      main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px var(--page-pad-right) calc(96px + env(safe-area-inset-bottom, 0px)) var(--page-pad-left);
      }
      .hero-shell {
        margin-bottom: 10px;
        padding-top: calc(2px + env(safe-area-inset-top, 0px));
        padding-bottom: 10px;
      }
      .eyebrow { margin-bottom: 8px; font-size: 10px; }
      .hero-row { align-items: center; gap: 14px; }
      h1 { font-size: clamp(22px, 6vw, 28px); }
      .progress-orb { width: 54px; height: 54px; }
      .progress-orb strong { font-size: 13px; }
      /* Pure decoration — the phone needs those pixels for tasks. */
      .hero-subtitle { display: none; }
      .progress-orb span:last-child { display: none; }
      /* Count and search share row one; the four filters take row two at full
         bar width. `display: contents` dissolves the control-group wrapper so
         its children wrap against the bar itself — otherwise the filter row is
         capped at the wrapper's width and the last button runs off screen. */
      .bar { align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
      .meta { flex: 0 0 auto; white-space: nowrap; }
      .control-group { display: contents; }
      .search-field { flex: 1 1 140px; min-width: 0; }
      .search-input { width: 100%; }
      .tabs { flex: 1 0 100%; gap: 4px; }
      .tabs button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px; }
      .sync-btn { min-height: 44px; }
      /* 16px or iOS zooms the page the moment the box is tapped. */
      .quick-add { margin-bottom: 10px; }
      .quick-add-input { height: 44px; font-size: 16px; padding-right: 14px; }
      .quick-add-kbd { display: none; }

      /* The eyebrow's signal dot already shows connection state; keep this for
         screen readers (it is aria-live) but stop it taking a row. */
      .sync-line {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      /* Board tabs scroll sideways in one row instead of wrapping to three. */
      .board-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-top: 10px;
        padding-bottom: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .board-tabs::-webkit-scrollbar { display: none; }
      .board-tab { flex: 0 0 auto; }

      .board-toolbar { flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
      .board-actions { width: 100%; }
      .board-actions .sync-btn { flex: 1 1 auto; }

      /* Mode tabs become a thumb-reach bottom bar */
      .mode-tabs {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: grid;
        /* One track per tab — fewer and the fixed bar wraps to two rows. */
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        margin: 0;
        padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--line);
        border-bottom: 0;
        background: rgba(0, 0, 0, .94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .mode-tabs button { min-height: 44px; margin-bottom: 0; padding: 10px 4px; border: 1px solid transparent; font-size: 10px; letter-spacing: .05em; line-height: 1.25; text-align: center; }
      .mode-tabs button[aria-selected="true"] {
        border: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
        background: var(--ink);
        color: var(--on-ink);
      }

      /* Stack every category full-width by default — no horizontal swipe needed.
         An explicit columns choice from the lane layout toggle opts back into the swipe. */
      .task-board:not([data-layout="columns"]) {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-columns: unset;
        gap: 14px;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 2px 0 12px;
        overflow-x: visible;
        overflow-y: visible;
        scroll-snap-type: none;
        scroll-padding-left: 0;
        scroll-padding-right: 0;
        scrollbar-gutter: auto;
        touch-action: pan-y;
      }
      .lane {
        width: 100%;
        min-width: 0;
        scroll-snap-align: none;
      }
      .task-board:not([data-layout="columns"]) .lane {
        min-height: 0;
        max-width: var(--lane-cap, none);
      }
      .task-board:not([data-layout="columns"]) .lane-cards {
        min-height: var(--lane-body-rows, 96px);
      }
      /* A full-width lane has no width to drag, and the handle's touch-action would
         swallow thumb scrolls at the screen edge. Size comes from the XS–XL picker here. */
      .task-board:not([data-layout="columns"]) .lane-resize { display: none; }
      .lane-cards:empty::after {
        min-height: 72px;
      }

      .board-toolbar { align-items: flex-start; flex-direction: column; }
      .board-actions { width: 100%; }
      .board-actions .sync-btn { flex: 1; justify-content: center; }
      .keyboard-hint-board { display: none; }
      .keyboard-hint-board-mobile { display: block; }
      .handoff-toolbar { flex-direction: column; }
      .handoff-actions { width: 100%; }
      .handoff-actions .sync-btn { flex: 1; }

      /* Finger-sized targets */
      .board-tab { min-height: 44px; padding-left: 15px; font-size: 13px; }
      .board-tab-add { width: 44px; height: 44px; font-size: 18px; }
      .board-tab-action { width: 30px; height: 30px; font-size: 14px; }
      .check { width: 26px; height: 26px; }
      .check:checked::after { top: 3px; left: 9px; width: 6px; height: 13px; }
      .completion-pulse { width: 26px; height: 26px; }
      .task, .task-card { grid-template-columns: 28px 1fr; }
      .task-trailing { grid-column: 2; padding-top: 0; }
      .arrow { display: none; }
      .card-action { min-width: 38px; height: 38px; font-size: 15px; }
      .lane-menu { width: 38px; height: 36px; }
      .sublane-header .lane-menu { width: 34px; height: 32px; }
      .sublane-toggle { min-height: 36px; }

      /* Dialogs become bottom sheets; 16px inputs stop iOS focus zoom */
      dialog {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        max-height: calc(100dvh - 40px);
        overflow: auto;
      }
      dialog[open] { animation: sheet-up 260ms cubic-bezier(.2, .8, .2, 1); }
      .dialog-shell { padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); }
      .dialog-shell::before {
        display: block;
        width: 44px;
        height: 4px;
        margin: 0 auto 16px;
        border-radius: 999px;
        background: var(--line-strong);
        content: "";
      }
      .field-grid.two { grid-template-columns: 1fr; }
      .field-grid input, .field-grid textarea, .field-grid select { font-size: 16px; }
      .dialog-actions .sync-btn { flex: 1; justify-content: center; }
    }

    @keyframes sheet-up { from { opacity: .5; transform: translateY(28px); } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

    /* Offline: the board is readable, but every control that writes is dead
       weight, so dim them rather than let a tap fail silently. */
    body.is-offline .sync-btn.primary,
    body.is-offline .card-action,
    body.is-offline .quick-add,
    body.is-offline #newDayBtn,
    body.is-offline .lane-add { opacity: .45; }

    /* ==== Projects dashboard theme =======================================
       Scoped to #projectsModeView on purpose: this tab follows Ben's amber
       dashboard mock — warm accent, rounded cards — while the rest of the app
       stays strict monochrome. Nothing here may leak past that id. */
    #projectsModeView {
      --acc: #f09e46;
      --acc-strong: #f7b566;
      --acc-soft: rgba(240, 158, 70, .12);
      --acc-line: rgba(240, 158, 70, .38);
      --card: #0f0d0a;
      --card-line: #29231a;
      --r-lg: 14px;
      --r-md: 10px;
      --r-sm: 8px;
    }

    /* --- top strip: count line left, sync right --------------------------- */
    #projectsModeView .projects-bar { margin-bottom: 18px; }
    #projectsModeView .handoff-status { color: var(--muted); font-size: 12.5px; }
    #projectsModeView .sync-btn {
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
      background: transparent;
      color: var(--text);
      letter-spacing: .09em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 600;
      padding: 9px 16px;
    }
    #projectsModeView .sync-btn:hover { border-color: var(--acc-line); color: var(--acc-strong); }

    /* --- left list --------------------------------------------------------- */
    /* Guarded: the id outranks the base sheet's ≤900px stacking rule, so an
       unguarded two-column track here would pin the phone to side-by-side. */
    @media (min-width: 901px) {
      #projectsModeView .projects-layout { grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); }
    }
    #projectsModeView .projects-search { position: relative; }
    #projectsModeView .projects-search input {
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
      background: var(--card);
      padding: 9px 44px 9px 12px;
    }
    #projectsModeView .projects-search input:focus-visible { outline: 1px solid var(--acc-line); outline-offset: 0; border-color: var(--acc-line); }
    .projects-search-kbd {
      position: absolute;
      top: 50%;
      right: 9px;
      transform: translateY(-50%);
      padding: 2px 6px;
      border: 1px solid var(--card-line);
      border-radius: 5px;
      color: var(--dim);
      font-size: 10px;
      letter-spacing: .04em;
    }
    #projectsModeView .project-group-label { border-bottom: 0; color: var(--dim); }
    #projectsModeView .project-row {
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 10px;
      border: 1px solid transparent;
      border-radius: var(--r-md);
    }
    #projectsModeView .project-row:hover { background: var(--card); }
    #projectsModeView .project-row.active {
      border-color: var(--acc-line);
      background: var(--acc-soft);
    }
    .project-row-ic {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      margin-top: 1px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-sm);
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
      background: var(--card);
    }
    #projectsModeView .project-row.active .project-row-ic { color: var(--acc-strong); border-color: var(--acc-line); background: transparent; }
    .project-row-copy { display: grid; gap: 3px; min-width: 0; }

    /* --- hero -------------------------------------------------------------- */
    .project-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .project-hero-copy { display: grid; gap: 7px; min-width: 0; }
    .project-hero h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.015em; }
    .project-hero .project-lede { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 62ch; }
    .project-chips {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--dim);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .project-chips a { color: var(--acc); text-decoration: none; }
    .project-chips a:hover { color: var(--acc-strong); text-decoration: underline; text-underline-offset: 3px; }
    .project-chip-sep { color: var(--card-line); }

    /* --- buttons ------------------------------------------------------------ */
    .pj-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border: 1px solid var(--acc-line);
      border-radius: var(--r-md);
      background: transparent;
      color: var(--acc);
      font: inherit;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    }
    .pj-btn:hover { background: var(--acc-soft); color: var(--acc-strong); }
    .pj-btn-primary { flex: 0 0 auto; }
    .pj-btn-accent { justify-self: start; }
    .pj-btn-ghost { border-style: dashed; color: var(--muted); }
    .pj-btn-ghost:hover { color: var(--acc-strong); border-color: var(--acc-line); }

    /* --- card grid ---------------------------------------------------------- */
    /* Three columns like the mock, two on narrower panes, one on phones.
       auto-fit was crowding four narrow columns onto a wide screen. */
    .project-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 1460px) {
      .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .project-card {
      display: grid;
      gap: 13px;
      align-content: start;
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-lg);
      background: var(--card);
    }
    .project-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .project-card-head h4 {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .project-card-icon {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: var(--acc-soft);
      color: var(--acc);
    }
    .project-card-icon svg { width: 14px; height: 14px; }
    .project-card-body { display: grid; gap: 12px; min-width: 0; }
    .project-card-error { color: var(--danger); font-size: 13px; line-height: 1.5; }
    .project-card-quiet { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
    .project-card-link {
      appearance: none;
      justify-self: start;
      padding: 0;
      border: 0;
      background: none;
      color: var(--acc);
      font: inherit;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .project-card-link:hover { color: var(--acc-strong); text-decoration: underline; text-underline-offset: 3px; }
    .project-notes-back { margin-bottom: 14px; }

    /* Overview clamps rather than scrolls — the full text lives one click away
       behind "View full notes". */
    .project-overview-clamp {
      max-height: 330px;
      overflow: hidden;
      mask-image: linear-gradient(#000 78%, transparent);
      -webkit-mask-image: linear-gradient(#000 78%, transparent);
    }

    /* --- key/value rows (Where it stands, Meta) ----------------------------- */
    .project-state { display: grid; margin: 0; }
    .project-state-row {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 10px;
      padding: 8px 0;
      border-top: 1px solid var(--card-line);
    }
    .project-state-row:first-child { border-top: 0; padding-top: 0; }
    .project-state-row dt { color: var(--dim); font-size: 12px; }
    .project-state-row dd { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
    .project-state-row dd a { color: var(--acc); text-underline-offset: 2px; }
    .project-status-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 7px;
      border-radius: 50%;
      vertical-align: 1px;
    }
    .project-status-dot--live { background: #58c26e; }
    .project-status-dot--mid { background: var(--acc); }
    .project-status-dot--dim { background: var(--dim); }

    /* --- next steps --------------------------------------------------------- */
    .project-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .project-step { position: relative; display: grid; }
    .project-step label {
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      cursor: pointer;
    }
    .project-step input[type="checkbox"] {
      width: 15px;
      height: 15px;
      margin-top: 2px;
      accent-color: var(--acc);
      cursor: pointer;
    }
    .project-step-text { color: var(--text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
    .project-step-text a { color: var(--acc); }
    .project-step.is-done .project-step-text { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--card-line); }
    .project-step--own { grid-template-columns: minmax(0, 1fr) 20px; grid-auto-flow: column; }
    .project-step-remove {
      appearance: none;
      align-self: start;
      width: 20px;
      height: 20px;
      padding: 0;
      border: 0;
      border-radius: 5px;
      background: none;
      color: var(--dim);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
    }
    .project-step-remove:hover { color: var(--danger); background: var(--card-line); }
    .project-step-form { display: flex; gap: 8px; }
    .project-step-form input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 11px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-sm);
      background: var(--paper);
      color: var(--text);
      font: inherit;
      font-size: 13px;
    }
    .project-step-form input:focus-visible { outline: 1px solid var(--acc-line); border-color: var(--acc-line); }

    /* --- recent activity ---------------------------------------------------- */
    .project-activity { display: grid; margin: 0; padding: 0; list-style: none; }
    .project-activity-item {
      position: relative;
      display: grid;
      gap: 2px;
      padding: 0 0 14px 20px;
    }
    .project-activity-item:last-child { padding-bottom: 0; }
    .project-activity-item::before {
      content: "";
      position: absolute;
      top: 5px;
      bottom: -5px;
      left: 4px;
      width: 1px;
      background: var(--card-line);
    }
    .project-activity-item:last-child::before { content: none; }
    .project-activity-item::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 0;
      width: 9px;
      height: 9px;
      border: 1px solid var(--acc-line);
      border-radius: 50%;
      background: var(--card);
    }
    .project-activity-item.is-current::after { background: var(--acc); border-color: var(--acc); }
    .project-activity-when { color: var(--text); font-size: 12px; font-weight: 650; }
    .project-activity-docs { color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .project-activity-note {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    /* --- files & links ------------------------------------------------------ */
    .project-links { display: grid; gap: 8px; }
    .project-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 13px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
      color: var(--text);
      font-size: 12.5px;
      text-decoration: none;
      min-width: 0;
    }
    .project-link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .project-link:hover { border-color: var(--acc-line); color: var(--acc-strong); }
    .project-link-arrow { color: var(--acc); }

    /* Full-notes view inherits the dossier styling; only the links go amber. */
    #projectsModeView .project-prose a { color: var(--acc); }
    #projectsModeView .project-prose a:hover { color: var(--acc-strong); }

    @media (max-width: 900px) {
      .project-hero { flex-direction: column; }
      .project-cards { grid-template-columns: minmax(0, 1fr); }
    }

    /* ==== Task folders tab (2026-09-28) =====================================
       A sibling of the Projects dashboard, so it borrows its warm accent and
       rounded cards — scoped to #foldersModeView (and the viewer dialog) so
       nothing leaks into the monochrome board. */
    body[data-mode="folders"] .progress-orb { display: none; }
    #foldersModeView, #fileViewer {
      --acc: #f09e46;
      --acc-strong: #f7b566;
      --acc-soft: rgba(240, 158, 70, .12);
      --acc-line: rgba(240, 158, 70, .38);
      --card: #0f0d0a;
      --card-line: #29231a;
      --r-lg: 14px;
      --r-md: 10px;
      --r-sm: 8px;
    }
    .folders-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .folders-bar .handoff-status { margin: 0; color: var(--muted); font-size: 12.5px; }
    .folders-bar .handoff-status.err { color: var(--danger); }
    .folders-bar .handoff-status a { color: var(--acc); text-underline-offset: 3px; }
    #foldersModeView .sync-btn {
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
      background: transparent;
      color: var(--text);
      letter-spacing: .09em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 600;
      padding: 9px 16px;
    }
    #foldersModeView .sync-btn:hover { border-color: var(--acc-line); color: var(--acc-strong); }
    #foldersModeView .sync-btn:disabled { opacity: .5; cursor: progress; }

    .folders-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(20px, 3vw, 40px);
      align-items: start;
      min-width: 0;
    }
    @media (min-width: 901px) {
      .folders-layout { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
      .folders-list { position: sticky; top: 12px; max-height: calc(100vh - 32px); }
    }
    .folders-list { display: grid; align-content: start; gap: 10px; min-width: 0; }
    .folders-search { position: relative; }
    .folders-search input {
      width: 100%;
      min-height: 36px;
      padding: 9px 44px 9px 12px;
      font: inherit;
      font-size: 13px;
      color: var(--text);
      background: var(--card);
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
    }
    .folders-search input::placeholder { color: var(--dim); }
    .folders-search input:focus-visible { outline: 1px solid var(--acc-line); outline-offset: 0; border-color: var(--acc-line); }
    .folders-search-kbd {
      position: absolute;
      top: 50%;
      right: 9px;
      transform: translateY(-50%);
      padding: 2px 6px;
      border: 1px solid var(--card-line);
      border-radius: 5px;
      color: var(--dim);
      font-size: 10px;
    }
    .folder-filters { display: flex; gap: 6px; flex-wrap: wrap; }
    .folder-filters button {
      padding: 6px 11px;
      border: 1px solid var(--card-line);
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      cursor: pointer;
    }
    .folder-filters button:hover { color: var(--text); border-color: var(--acc-line); }
    .folder-filters button.active { color: var(--acc-strong); border-color: var(--acc-line); background: var(--acc-soft); }
    #foldersIndex { display: grid; align-content: start; gap: 2px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
    .folder-group-label {
      display: flex;
      justify-content: space-between;
      margin: 14px 2px 5px;
      color: var(--dim);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      font-variant-numeric: tabular-nums;
    }
    .folder-group-label:first-child { margin-top: 2px; }
    .folders-empty { padding: 16px 4px; color: var(--dim); font-size: 13px; }
    .folder-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      width: 100%;
      padding: 10px;
      font: inherit;
      text-align: left;
      color: var(--text);
      background: none;
      border: 1px solid transparent;
      border-radius: var(--r-md);
      cursor: pointer;
    }
    .folder-row:hover { background: var(--card); }
    .folder-row.active { border-color: var(--acc-line); background: var(--acc-soft); }
    .folder-row:focus-visible { outline: 2px solid var(--acc-line); outline-offset: -2px; }
    .folder-row.is-done .folder-row-name { color: var(--muted); }
    .folder-row-ic {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-sm);
      background: var(--card);
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }
    .folder-row.active .folder-row-ic { color: var(--acc-strong); border-color: var(--acc-line); background: transparent; }
    .folder-row-copy { display: grid; gap: 3px; min-width: 0; }
    .folder-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .folder-row-name { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
    .folder-row-when { flex: 0 0 auto; color: var(--dim); font-size: 10.5px; white-space: nowrap; }
    .folder-row-meta { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
    .folder-row-flag { color: var(--acc); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

    /* --- detail ------------------------------------------------------------- */
    .folder-detail { min-width: 0; display: grid; align-content: start; gap: 18px; transition: opacity 120ms ease; }
    .folder-detail:focus { outline: none; }
    .folder-detail.is-loading { opacity: .55; }
    .folder-empty-detail { padding: 40px 0; color: var(--dim); }
    .fd-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
    .fd-hero-copy { display: grid; gap: 8px; min-width: 0; flex: 1 1 420px; }
    .fd-hero h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.12; overflow-wrap: anywhere; }
    .fd-lede { max-width: 72ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
    .fd-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .fd-chip-state { padding: 2px 8px; border: 1px solid var(--acc-line); border-radius: 999px; color: var(--acc-strong); }
    .fd-chip-state.is-done { border-color: var(--card-line); color: var(--muted); }
    .fd-chip-sep { color: var(--card-line); }
    .fd-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

    .fd-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      border: 1px solid var(--acc-line);
      border-radius: var(--r-md);
      background: transparent;
      color: var(--acc);
      font: inherit;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .1em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
      transition: background 140ms ease, color 140ms ease;
    }
    .fd-btn:hover { background: var(--acc-soft); color: var(--acc-strong); }
    .fd-btn-primary { background: var(--acc); color: #1a1108; border-color: var(--acc); }
    .fd-btn-primary:hover { background: var(--acc-strong); color: #1a1108; }
    .fd-btn-ghost { border-color: var(--card-line); color: var(--muted); }
    .fd-link { padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-size: 12px; cursor: pointer; text-underline-offset: 3px; }
    .fd-link:hover { color: var(--acc-strong); text-decoration: underline; }

    /* Figures: one hero number (time worked), three plain stat tiles. */
    .fd-figures { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
    .fd-figure-stack { display: grid; gap: 14px; }
    .fd-figure {
      display: grid;
      align-content: start;
      gap: 4px;
      min-width: 0;
      padding: 16px 18px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-lg);
      background: var(--card);
    }
    .fd-figure-label, .fd-figure-sub { color: var(--muted); font-size: 12px; font-weight: 600; }
    .fd-figure-sub { margin-top: 12px; }
    .fd-figure-value { font-size: 52px; font-weight: 650; letter-spacing: -.02em; line-height: 1.05; color: var(--text); }
    .fd-figure-num { font-size: 28px; font-weight: 650; line-height: 1.1; color: var(--text); }
    .fd-figure-note { color: var(--dim); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
    .fd-figure-foot { margin-top: 10px; color: var(--dim); font-size: 11px; }
    .fd-bars { display: grid; gap: 7px; margin-top: 12px; }
    .fd-bar-row { display: grid; grid-template-columns: minmax(64px, 110px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    .fd-bar-label { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fd-bar-track { height: 8px; }
    .fd-bar-fill { display: block; height: 100%; background: var(--acc); border-radius: 0 4px 4px 0; }
    .fd-bar-value { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }

    .fd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .fd-card {
      display: grid;
      gap: 12px;
      align-content: start;
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--card-line);
      border-radius: var(--r-lg);
      background: var(--card);
    }
    .fd-card-wide { grid-column: 1 / -1; }
    .fd-card-head { display: flex; align-items: baseline; gap: 10px; }
    .fd-card-head h4 { color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .fd-count { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
    .fd-empty { color: var(--dim); font-size: 13px; }
    .fd-note { color: var(--dim); font-size: 12px; line-height: 1.45; }
    .fd-brief { max-height: 560px; overflow-y: auto; scrollbar-width: thin; font-size: 13.5px; }

    .fd-gallery-group { display: grid; gap: 10px; }
    .fd-gallery-group + .fd-gallery-group { margin-top: 8px; }
    .fd-subfolder { color: var(--muted); font-size: 12px; font-weight: 600; }
    .fd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .fd-tile { display: grid; gap: 6px; min-width: 0; margin: 0; }
    .fd-thumb {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 4 / 3;
      width: 100%;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--card-line);
      border-radius: var(--r-md);
      background: #050403;
      cursor: pointer;
    }
    .fd-thumb:hover, .fd-thumb:focus-visible { border-color: var(--acc-line); outline: none; }
    .fd-thumb img, .fd-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
    .fd-glyph { color: var(--muted); font-size: 26px; }
    .fd-play {
      position: absolute;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      font-size: 12px;
    }
    .fd-tile figcaption { display: grid; gap: 1px; min-width: 0; }
    .fd-tile-name { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fd-tile-meta { color: var(--dim); font-size: 10.5px; }
    .fd-tile.is-missing .fd-thumb { opacity: .45; }
    .fd-more { justify-self: start; }

    .fd-file-list { display: grid; gap: 2px; list-style: none; }
    .fd-file-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--card-line); }
    .fd-file-row:first-child { border-top: 0; }
    .fd-file-glyph { color: var(--muted); text-align: center; }
    .fd-file-copy { display: grid; min-width: 0; }
    .fd-file-name { font-size: 13px; overflow-wrap: anywhere; }
    .fd-file-where { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fd-file-size { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
    .fd-file-actions { display: flex; gap: 12px; }

    .fd-session { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--card-line); }
    .fd-session:first-of-type { border-top: 0; padding-top: 0; }
    .fd-session-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
    .fd-agent {
      flex: 0 0 auto;
      padding: 2px 7px;
      border: 1px solid var(--card-line);
      border-radius: 6px;
      color: var(--text);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .fd-session-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
    .fd-session-time { flex: 0 0 auto; color: var(--acc); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .fd-session-when { color: var(--dim); font-size: 11.5px; overflow-wrap: anywhere; }
    .fd-session-done { display: grid; grid-template-columns: auto 1fr; gap: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
    .fd-session-done span { color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
    .fd-prompts summary { color: var(--acc); font-size: 12px; cursor: pointer; }
    .fd-prompts ol { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
    .fd-prompts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
    .fd-prompts time { color: var(--dim); font-variant-numeric: tabular-nums; }
    .fd-prompts li span { overflow-wrap: anywhere; }

    /* --- the viewer ----------------------------------------------------------- */
    .file-viewer {
      width: min(1200px, calc(100vw - 32px));
      max-width: none;
      height: min(860px, calc(100vh - 32px));
      max-height: none;
      padding: 0;
      border: 1px solid var(--card-line);
      border-radius: var(--r-lg);
      background: var(--card);
      color: var(--text);
    }
    .file-viewer::backdrop { background: rgba(0, 0, 0, .75); }
    .file-viewer-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
    .file-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--card-line); }
    .file-viewer-copy { min-width: 0; }
    .file-viewer-copy h2 { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
    .file-viewer-copy p { color: var(--dim); font-size: 11.5px; overflow-wrap: anywhere; }
    .file-viewer-actions { display: flex; gap: 8px; flex: 0 0 auto; }
    .file-viewer-body { display: grid; place-items: center; min-height: 0; overflow: auto; background: #050403; }
    .file-viewer-body img, .file-viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
    .file-viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
    .file-viewer-body audio { width: min(520px, 90%); }
    .fd-text { place-self: stretch; margin: 0; padding: 16px; color: var(--text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
    .fd-viewer-none { display: grid; justify-items: center; gap: 10px; color: var(--muted); }
    .fd-viewer-none span { font-size: 42px; }

    @media (max-width: 1100px) {
      .fd-figures { grid-template-columns: minmax(0, 1fr); }
      .fd-figure-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fd-cards { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 640px) {
      .fd-figure-stack { grid-template-columns: minmax(0, 1fr); }
      .fd-figure-value { font-size: 44px; }
      .fd-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
      .fd-file-row { grid-template-columns: 22px minmax(0, 1fr); }
      .fd-file-size, .fd-file-actions { grid-column: 2; }
      .file-viewer-head { flex-wrap: wrap; }
    }
    .fd-kind-pdf .fd-thumb img { object-fit: contain; background: #fff; }
    /* The synced copy on the VPS can't reach the Mac: no Finder buttons there. */
    .file-viewer.is-read-only [data-viewer-action="open"],
    .file-viewer.is-read-only [data-viewer-action="reveal"] { display: none; }