/* NEXUS TRACE · style.css · the one stylesheet: plain CSS, phone first, dark by default (Phase 3B-shell A3: the
   chat-first shell of docs/gui/prototype-2026-10-13.html, mapped onto the names every older page already uses).
   The frame (app/templates/base.html): a 52 px header [Back][menu | collapse][N NEXUS TRACE][search][theme][avatar],
   the sidebar (_sidebar.html: New chat, the space switch, Projects, Tools, Apps, Sources, Settings, the seat), the
   history rail (_history.html: Chats, search, the sessions by day) and the main pane (#main: the page's own head
   strip, the page, the prompt docked at the bottom).
     < 900 px      the sidebar and the history are ONE drawer (#rail-toggle; the radios #drawer-menu and #drawer-chats
                   pick its Menu or Chats tab) over a scrim; the window scrolls; the prompt is the sticky dock
     900-1199 px   a grid: the header over sidebar | history | main; the sidebar is 56 px of icons unless #sb-collapse
                   is checked (then 248 px); #main scrolls on its own
     >= 1200 px    the same grid; the sidebar is 248 px unless #sb-collapse is checked (then 56 px)
   CSS only: the drawer, its tabs and the collapse are hidden inputs toggled by their <label for> (no page needs script
   to open the menu); app.js adds Escape, a swipe and the cookies (theme, sb). The theme: dark through :root; light
   through the OS (prefers-color-scheme, when no choice was made) or html[data-theme="light"] (the theme cookie).
   No @import and nothing from another origin: IBM Plex Sans and Mono where installed, else the system's faces.
   Phone rules (A1R R5): every input, select and textarea is 16px or larger under 900 px (iOS never zooms), every
   button and tap target is at least 44 px tall under 900 px (36 px from 900). Every older page keeps its class names
   (.card, .row, .chip, .tier-*, .flag-*, .actions ...) and takes the new tokens without an edit; the shell's own
   classes are the prototype's (.panel, .view-head, .card-title, .li, .kv, .badge, .switch, .segs ...; its .row is
   .prow, its .chip .tag). The old frame's rules that no element draws any more (the tab bar, the Picture tab and
   overlay, the old rail's head) sit at the end as dormant rules so their names stay. */
:root {
  color-scheme: dark;
  --bg: #09090b; --rail: #0e0e11; --panel: #131316; --raise: #1a1a1f; --raise-2: #242429;
  --line: #27272d; --line-2: #242429; --line-3: #36363d;
  --text: #f4f4f5; --text-2: #c6c6cc; --muted: #a1a1aa; --faint: #86868f;
  --accent: #fafafa; --accent-2: #e4e4e7; --ink: #09090b; --ring: #8b8b94;
  --link: #60a5fa; --link-2: #93c5fd;
  --overdue: #ef4444; --today: #f59e0b; --committed: #22c55e; --danger: #ef4444; --info: #60a5fa; --ai: #a78bfa;
  --quar-bg: color-mix(in srgb, var(--today) 12%, transparent); --bubble: #1a1a1f;
  --desk: var(--ai); --team: var(--link); --company: var(--committed); --compartmented: var(--today);
  --scrim: rgba(0, 0, 0, 0.5); --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --tap: 44px; --nav-h: 56px; --hdr-h: calc(52px + env(safe-area-inset-top, 0px)); --sb-w: 248px; --rail-w: 280px;
}
/* light: the OS asks for it and no choice was made (data-theme absent), or the choice is light (the theme cookie) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff; --rail: #fafafa; --panel: #ffffff; --raise: #f4f4f5; --raise-2: #e9e9ec;
    --line: #e4e4e7; --line-2: #e9e9ec; --line-3: #d4d4d8;
    --text: #09090b; --text-2: #313137; --muted: #52525b; --faint: #6b6b74;
    --accent: #18181b; --accent-2: #3f3f46; --ink: #fafafa; --ring: #71717a;
    --link: #2563eb; --link-2: #1d4ed8;
    --overdue: #dc2626; --today: #b45309; --committed: #15803d; --danger: #dc2626; --info: #2563eb; --ai: #7c3aed;
    --company: #15803d; --compartmented: #b45309; --bubble: #f4f4f5;
    --scrim: rgba(0, 0, 0, 0.35); --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }
  :root:not([data-theme="dark"]) .theme-btn .when-dark { display: none; }
  :root:not([data-theme="dark"]) .theme-btn .when-light { display: inline-flex; }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --rail: #fafafa; --panel: #ffffff; --raise: #f4f4f5; --raise-2: #e9e9ec;
  --line: #e4e4e7; --line-2: #e9e9ec; --line-3: #d4d4d8;
  --text: #09090b; --text-2: #313137; --muted: #52525b; --faint: #6b6b74;
  --accent: #18181b; --accent-2: #3f3f46; --ink: #fafafa; --ring: #71717a;
  --link: #2563eb; --link-2: #1d4ed8;
  --overdue: #dc2626; --today: #b45309; --committed: #15803d; --danger: #dc2626; --info: #2563eb; --ai: #7c3aed;
  --company: #15803d; --compartmented: #b45309; --bubble: #f4f4f5;
  --scrim: rgba(0, 0, 0, 0.35); --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .theme-btn .when-dark { display: none; }
:root[data-theme="light"] .theme-btn .when-light { display: inline-flex; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.5 var(--sans); min-height: 100vh; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-2); }
.toggle, [hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden;
       clip: rect(0 0 0 0); white-space: nowrap; }
svg.ico { flex: none; width: 20px; height: 20px; }
svg.ico.sm { width: 16px; height: 16px; }

/* --- the frame: the header, on every page (the brand alone when there is no seat) --------------------------------- */
.main-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; height: var(--hdr-h);
       padding: env(safe-area-inset-top, 0px) 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.main-head > .back-btn { margin-left: -4px; color: var(--text); }
.main-head > .brand { flex: 0 0 auto; white-space: nowrap; }
/* the wordmark: the prototype's 11.5 px uppercase beside a 22 px rounded N mark (::before: no DOM) */
.brand, .wordmark { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-right: 0; font-family: var(--sans);
       font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--text); }
.brand::before, .wordmark::before { content: "N"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
       background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.brand:hover, .wordmark:hover { color: var(--text); }
.icobtn.collapse-btn, .collapse-btn, .top-search { display: none; }  /* the collapse and the search field: from 900 only */
.top-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.theme-btn > span { display: inline-flex; }
.theme-btn .when-light { display: none; }
/* the search field: the icon inside the input (the header's search from 900, the rail's, the pages' toolbars) */
.sfield { position: relative; min-width: 0; }
.sfield svg.ico { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint);
       pointer-events: none; }
.sfield input { padding-left: 34px; appearance: none; -webkit-appearance: none; }
/* the avatar menu: a 44 px summary holding the 30 px circle; the pop under the header's edge; a second tap closes it */
.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 999px; color: var(--text);
       background: var(--line-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.avatar-menu { position: static; display: inline-block; }
.avatar-menu > summary.avatar-btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); min-height: 0; margin: 0;
       padding: 0; color: var(--text); background: none; border: 0; border-radius: 8px; list-style: none; cursor: pointer; }
.avatar-menu > summary.avatar-btn::-webkit-details-marker { display: none; }
.avatar-menu[open] > summary.avatar-btn { color: var(--text); border: 0; }
.avatar-menu[open] > summary.avatar-btn .avatar { border-color: var(--line-3); }
.pop { position: absolute; right: 8px; top: calc(var(--hdr-h) - 4px); z-index: 60; min-width: 220px; padding: 6px; background: var(--panel);
       border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pop .who { margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.pop .who b { display: block; font-weight: 600; }
.pop .who span { font-size: 12px; color: var(--muted); }
.pop .note { margin-top: 4px; padding: 6px 10px 4px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--line); }
.scrim { display: none; position: fixed; inset: 0; z-index: 30; margin: 0; background: var(--scrim); touch-action: none; }

/* --- the sidebar (_sidebar.html) and the history rail (_history.html): their rows, at every width ------------------ */
.rail { min-width: 0; background: var(--rail); }
.rail-in { display: flex; flex-direction: column; gap: 2px; }
.sidebar .rail-in { padding: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px)); }
.history { background: var(--bg); }
.history .rail-in { gap: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* the old rail's row rules (3B-shell): kept; the rows below restate what differs */
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 0 6px; }
.rail .new-chat { width: 100%; margin: 0; font-weight: 600; }
.rail-sec { display: flex; flex-direction: column; gap: 2px; }
.rail .k { margin: 4px 12px 4px; }
.navbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--tap);
       padding: 8px 12px; color: var(--text); font-size: 15px; border: 1px solid transparent; border-radius: 8px; }
.navbtn:hover { color: var(--text); background: var(--raise); }
.pname { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname .dot { margin-right: 10px; vertical-align: 1px; }
.pname svg.ico { margin-right: 10px; vertical-align: -5px; color: var(--muted); }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.count { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.navbtn .count, .sub .count { flex: none; margin-left: auto; }
.sub { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 8px 12px 8px 30px;
       color: var(--text-2); font-size: 14px; line-height: 1.3; border-radius: 8px; }
.sub:hover { color: var(--text); background: var(--raise); }
.sub.more { color: var(--muted); font-size: 13px; }
.nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-sessions { display: none; }
.rail-sessions .sub, .rail-recent .sub { padding-left: 12px; }
.rail .empty { margin: 0 12px; }
.rail-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.rail-foot .navbtn { color: var(--text-2); font-size: 14px; }
/* A3: New chat, the space switch, the groups, the rows (the prototype's .nav-item), the foot and the seat */
.sidebar .newchat { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: var(--tap);
       margin: 0 0 6px; padding: 8px 10px; color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap;
       background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.sidebar .newchat:hover { color: var(--text); background: var(--raise); }
.sidebar .newchat .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.segs { display: inline-flex; gap: 2px; width: auto; margin: 0; padding: 3px; background: var(--raise); border-radius: 8px; }
.segs .seg { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-height: var(--tap);
       margin: 0; padding: 0 12px; color: var(--text-2); font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
       background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.segs .seg:hover { color: var(--text); }
.segs .seg.sel { color: var(--text); background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); font-weight: 600; }
.segs a.seg { text-decoration: none; }
.sb-space { display: flex; margin: 0 0 2px; }
.sb-space .seg { flex: 1 1 0; }
.sb-scroll { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.sb-sec { display: flex; flex-direction: column; gap: 2px; }
.group-lbl { display: flex; align-items: center; gap: 6px; margin: 0; padding: 14px 10px 4px; font-family: var(--sans); font-size: 11px;
       font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: var(--faint); }
.rail .group-lbl, .rail .grp { margin: 0; font-family: var(--sans); }  /* over .k's mono */
a.group-lbl:hover, a.group-lbl[aria-current] { color: var(--text); }
.group-lbl svg.ico, .nav-item svg.ico { width: 16px; height: 16px; }
.nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: var(--tap); margin: 0;
       padding: 7px 10px; color: var(--muted); font-size: 15px; line-height: 1.3; text-align: left; white-space: nowrap;
       background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.nav-item:hover { color: var(--text); background: var(--raise); }
.nav-item.sel, .navbtn.sel, .sub.sel { color: var(--text); background: var(--line-2); border-color: transparent; }
.nav-item .lbl { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the count pills (the sidebar's, the rail's All chats, the Owe columns, the project head); bare .count stays text */
.nav-item .count, .navbtn .count, .thread .count, .owe-col h3 .count, .proj-head .count { flex: none; margin-left: auto; padding: 1px 7px;
       font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--faint); background: var(--raise);
       border-radius: 999px; }
.nav-item.sel .count { background: var(--bg); }
.owe-col h3 .count, .proj-head .count { margin-left: 0; }  /* beside the words, not at the far edge */
.sidebar .empty.small { margin: 2px 10px 6px; font-size: 13px; }
.sb-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.sb-foot .nav-item { color: var(--muted); font-size: 15px; }
.sb-foot .nav-item:hover, .sb-foot .nav-item.sel { color: var(--text); }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.me .avatar { width: 28px; height: 28px; font-size: 12px; }
.me-words { flex: 1 1 auto; min-width: 0; }
.me .n { font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .r { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .collapse-btn { margin-left: auto; }
/* the history rail: Chats, the search, the Only bar, the groups, the rows */
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; }
.rail-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.rail-search { margin: 0; padding: 2px 12px 6px; }
.scope-bar { display: flex; align-items: center; gap: 6px; margin: 4px 12px 2px; padding: 2px 2px 2px 8px; font-size: 12px;
       color: var(--muted); background: var(--raise); border-radius: 8px; }
.scope-bar .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-bar .icobtn { margin-left: auto; }
.rail-list { padding: 2px 8px 16px; }
.grp { margin: 0; padding: 12px 10px 4px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
       text-transform: uppercase; color: var(--faint); }
.thread { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 8px 10px; color: var(--muted);
       font-size: 15px; line-height: 1.3; border-radius: 8px; }
.thread:hover { color: var(--text); background: var(--raise); }
.thread.sel { color: var(--text); background: var(--line-2); }
.thread .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .tm { flex: none; margin-left: auto; padding: 0; font-size: 11px; color: var(--faint); background: none;
       font-variant-numeric: tabular-nums; }
.thread.more { color: var(--faint); font-size: 13px; }
.thread.more .tm { padding: 1px 7px; background: var(--raise); }
.rail-list .empty { margin: 0; padding: 16px 10px; font-size: 13px; color: var(--faint); }

/* icon buttons (the menu, Back, close, the theme, attach, mic, Record): a 44 px square (36 from 900), no fill */
.icobtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: auto;
       min-width: var(--tap); min-height: var(--tap); margin: 0; padding: 0; font-size: 15px; color: var(--text-2);
       background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.icobtn:hover { color: var(--text); background: var(--raise); }
.icobtn svg.ico { width: 20px; height: 20px; }

/* --- the main pane: the page's head strip, the page, the dock ------------------------------------------------------ */
.main { display: flex; flex-direction: column; min-width: 0; }
.main-body { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 12px; }
.main-body:has(> .panel) { max-width: none; padding: 0; }  /* a panel brings its own 900 px and gutters */
.main-body:has(> .home) { display: flex; flex-direction: column; }
.has-picture .main-body { display: flex; flex-direction: column; max-width: 880px; }  /* dormant (A2): no body.has-picture */
.page-head { position: sticky; top: var(--hdr-h); z-index: 18; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
/* the dock: sticky at the bottom of its scroller (the window under 900, #main from 900), after the page (margin-top auto);
   no border: the card floats on the page background; the dock carries its own gutters, Home's copy sits in the page's */
.composer-wrap { position: sticky; bottom: 0; z-index: 15; margin-top: auto; padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
       background: var(--bg); border-top: 0; }
#main > .composer-wrap { padding-left: 12px; padding-right: 12px; }
#main > .composer-wrap > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.home .composer-wrap { padding-left: 0; padding-right: 0; }
/* A2 N2: one status line (#nt-status, role status) when a background post was refused or never got through, and A3's
   "Saved": fixed under the header at every width (the dock grows at the bottom), a tap closes it (app.js) */
#nt-status { position: fixed; top: calc(var(--hdr-h) + 8px); left: 50%; width: min(560px, calc(100vw - 32px)); z-index: 28; margin: 0;
       padding: 12px 14px; transform: translateX(-50%); font-size: 15px; line-height: 1.4; color: var(--text); background: var(--panel);
       border: 1px solid var(--danger); border-radius: 10px; box-shadow: var(--shadow); overflow-wrap: anywhere; cursor: pointer; }
#nt-status.ok { border-color: var(--committed); }
/* A4 fix 1: a bulk run's line with Undo all (base.html): the words, a dot and the button on one row */
#nt-status[data-until] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#nt-status .nt-words { flex: 0 1 auto; min-width: 0; }
#nt-status .nt-sep { color: var(--muted); }
#nt-status .nt-undo { margin: 0 0 0 auto; flex: 0 0 auto; }
/* while a recording is live nothing in the frame leaves the screen (record.js holds the rest behind #rec-leave) */
body.rec-live .bottom-nav, body.rec-live .menu-btn, body.rec-live .back-btn, body.rec-live .collapse-btn,
body.rec-live .composer-wrap { display: none; }
body.rec-live .brand { pointer-events: none; }

/* --- type, cards, notices ------------------------------------------------------------------------------------------ */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
h1 { font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 8px; }
h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; margin: 0 0 10px; color: var(--muted); text-transform: uppercase;
     letter-spacing: 0.08em; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; } h3 a { color: var(--text); }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.mono { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.k { margin: 12px 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* the Telegram pair line on /sources (3A A1): big enough to read off a phone, one tap selects all of it */
.pair-line { display: block; margin: 6px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--text);
       -webkit-user-select: all; user-select: all; }
.error { color: var(--overdue); background: color-mix(in srgb, var(--danger) 10%, transparent);
       border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 8px; padding: 8px 10px; }
.notice { color: var(--committed); background: color-mix(in srgb, var(--committed) 10%, transparent);
       border: 1px solid color-mix(in srgb, var(--committed) 35%, transparent); border-radius: 8px; padding: 8px 10px; }
.empty { color: var(--muted); }
p.empty { font-style: italic; }
div.empty { padding: 10px 0 12px; font-size: 13px; }

/* --- forms: one column, 16px, 44px (the phone rule); 14px and 36px from 900 ------------------------------------------- */
label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 14px; }
input, select, textarea { display: block; width: 100%; min-height: var(--tap); padding: 10px 12px; font: inherit; font-size: 16px;
       color: var(--text); background: var(--bg); border: 1px solid var(--line-3); border-radius: 8px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
input[type="file"] { padding: 10px 0; border: 0; background: transparent; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: 22px; min-height: 22px; height: 22px; margin: 0 8px 0 0;
       accent-color: var(--accent); }
label.check { display: flex; align-items: center; min-height: var(--tap); color: var(--text); }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0 0; padding: 4px 12px 12px; }
legend { color: var(--muted); font-size: 14px; padding: 0 6px; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); margin-top: 12px;
       width: 100%; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink);
       background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; text-align: center; }
.btn { width: auto; color: var(--text); background: var(--panel); border-color: var(--line); font-weight: 500; }
.btn:hover { color: var(--text); background: var(--raise); }
.btn.primary, button.primary, .btn-primary, .btn.btn-primary { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover, button.primary:hover, .btn-primary:hover, .btn.btn-primary:hover { color: var(--ink); background: var(--accent); opacity: 0.9; }
button.ghost-btn, button.ghost, .btn.ghost, .btn-ghost, .btn.btn-ghost { color: var(--muted); background: transparent; border-color: transparent; }
button.ghost-btn:hover, button.ghost:hover, .btn.ghost:hover, .btn-ghost:hover, .btn.btn-ghost:hover { color: var(--text); background: var(--raise); }
.btn-outline, .btn.btn-outline { color: var(--text); background: var(--panel); border-color: var(--line); }
.btn-outline:hover, .btn.btn-outline:hover { background: var(--raise); }
.btn-danger, .btn.btn-danger, .btn.ghost.btn-danger { color: var(--danger); }
.btn-danger:hover, .btn.btn-danger:hover, .btn.ghost.btn-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn-sm, .btn.btn-sm { font-size: 14px; }
.btn-icon, .btn.btn-icon { width: var(--tap); min-width: var(--tap); padding: 0; justify-content: center; color: var(--muted); border-radius: 8px; }
.btn-icon:hover { color: var(--text); background: var(--raise); }
button.warn { color: var(--ink); background: var(--compartmented); border-color: var(--compartmented); }
button:disabled { opacity: 0.45; cursor: default; }
button.big { min-height: 56px; font-size: 18px; }
button.small { font-size: 15px; }
.navbtn:focus-visible, .sub:focus-visible, .tab:focus-visible, .btn:focus-visible, button:focus-visible,
summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.two-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.three-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.two-buttons button, .three-buttons button { margin: 0; }
.inline { margin: 0; }
.stack label { margin-top: 10px; }
.row { display: flex; flex-direction: column; gap: 8px; }
.filters { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.searchbox { margin: 8px 0 0; }
.pager { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.pager .btn { margin: 0; }
/* the per-page view switch (_space.html): one line of three small buttons */
.view-switch { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }
.view-switch button { width: auto; margin: 0; padding: 8px 14px; font-size: 15px; }

/* two-tap actions: a <summary> is the first tap, the button inside the second */
details.second-tap { display: inline-block; }
details > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
       padding: 8px 14px; border: 1px solid var(--line-3); border-radius: 8px; color: var(--text); cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { border-color: var(--accent); color: var(--accent); }
details.second-tap[open] { display: block; width: 100%; padding: 8px 0 0; }
details.more-fields { margin-top: 12px; }
details.fold { margin-top: 8px; }
details.fold > summary { color: var(--text-2); font-size: 15px; }
details.fold[open] > summary { margin-bottom: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.actions form { margin: 0; }
.actions > form > button { width: auto; margin: 0; }
.actions > .btn, .actions > button { margin: 0; }

/* quick-date chips on /owe */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; min-height: var(--tap); margin: 0; padding: 0 12px; border: 1px solid var(--line-3);
       border-radius: 999px; color: var(--text); font-size: 15px; }
.chip input { width: 18px; min-height: 18px; height: 18px; margin-right: 6px; }
.chip small { color: var(--muted); }
.chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* /more and the foot of Settings */
.more-list li { border-bottom: 1px solid var(--line); }
.more-link { display: flex; align-items: center; min-height: 52px; color: var(--text); font-size: 17px; }
.signout button { margin-top: 16px; }

/* --- badges and tags ------------------------------------------------------------------------------------------------- */
.tier { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.tier-desk { color: var(--desk); } .tier-team { color: var(--team); } .tier-company { color: var(--company); } .tier-compartmented { color: var(--compartmented); }
.topic { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 6px;
       background: color-mix(in srgb, var(--link) 12%, transparent); color: var(--link); }
.topic.empty { background: transparent; color: var(--muted); border: 1px dashed var(--line-3); font-style: normal; }
.status { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-3); color: var(--muted); }
.status-committed, .status-done { color: var(--company); border-color: var(--company); }
.status-quarantined, .status-escalated { color: var(--compartmented); border-color: var(--compartmented); }
.status-failed { color: var(--danger); border-color: var(--danger); }
.status-waiting_key, .status-waiting_transcript, .status-queued, .status-running, .status-pending, .status-key_missing,
.status-sorting { color: var(--link); border-color: var(--link); }
.status-skipped, .status-stored { color: var(--desk); border-color: var(--desk); }
.status-stored { letter-spacing: 0.02em; }
.flag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.flag-overdue { color: var(--overdue); border: 1px solid var(--overdue); }
.flag-slipped { color: var(--compartmented); border: 1px solid var(--compartmented); }
.flag-ai { color: var(--ink); background: var(--compartmented); }
.flag-here { color: var(--company); border: 1px solid var(--company); }
.labels { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* the shell's tags (the mockup's .chip); their borders follow their text in both themes */
.tag { display: inline-block; padding: 2px 7px; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.04em;
       text-transform: uppercase; white-space: nowrap; color: var(--text-2); border: 1px solid var(--line-3); border-radius: 4px; }
.tag-committed { color: var(--committed); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tag-topic { color: var(--link); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tag-overdue { color: var(--overdue); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tag-ai { color: var(--today); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tag-quar { color: var(--today); border-color: color-mix(in srgb, currentColor 45%, transparent); background: var(--quar-bg); }
.tag-none { color: var(--muted); border-style: dashed; }  /* A1: a meeting under no project */

/* --- the Picture (_picture_pane.html, the project view): its sections are cards, its rows the owe cards -------------- */
.pic { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.pic-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.pic-title { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.pic-scope { color: var(--muted); font-size: 12px; }
.pchips { display: flex; gap: 6px; margin: 0 -14px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.pchips::-webkit-scrollbar { display: none; }
.pchip { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0 14px; color: var(--text-2);
       font-size: 14px; white-space: nowrap; border: 1px solid var(--line-3); border-radius: 22px; }
.pchip:hover { color: var(--text); }
.pchip.sel { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.sec { padding: 12px 16px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.sech { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.sect { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.prow { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.what { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.what a { color: var(--text); }
.what a:hover { color: var(--link); }
.when { margin-right: 8px; }
.prow.done .what, .prow.done .what a { color: var(--muted); text-decoration: line-through; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.meta.ovd { color: var(--overdue); }
.meta.tdy { color: var(--today); }
.act { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.act form { margin: 0; }
.act button, .act .btn, .composer button, .composer .btn { width: auto; margin: 0; }
.act button, .act .btn, .act details > summary { min-height: var(--tap); padding: 8px 14px; font-size: 14px; }
.act details.second-tap[open] { flex-basis: 100%; }
.and-more { display: flex; align-items: center; min-height: var(--tap); font-size: 14px; border-top: 1px solid var(--line); }

/* --- the thread (_thread.html): the head strip, the messages as turns, the dock ---------------------------------------- */
.thread-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.thread-head .act { flex: none; }
.proj-name { display: block; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-title { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-names { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.thread-head .rec-head { flex: none; width: auto; margin: 0; padding: 8px 12px; gap: 6px; font-size: 14px; }
.rec-head svg.ico { width: 18px; height: 18px; color: var(--overdue); }
.msgs { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 16px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; scroll-margin-top: 120px; }
.msg > .bubble-user, .msg > .filepill { align-self: flex-end; }
.bubble-user { max-width: min(560px, 88%); padding: 10px 14px; font-size: 15px; background: var(--bubble);
       border-radius: 18px 18px 4px 18px; overflow-wrap: anywhere; }
.bubble-staff { width: 100%; max-width: 720px; font-size: 15px; line-height: 1.5; }
.bubble-staff > .meta { margin-bottom: 6px; }
.reply { overflow-wrap: anywhere; }
.filepill { display: inline-flex; align-items: center; gap: 10px; max-width: min(560px, 88%); padding: 10px 14px; font-size: 14px;
       background: var(--bubble); border: 1px solid var(--line-3); border-radius: 10px; overflow-wrap: anywhere; }
.filepill svg.ico { width: 18px; height: 18px; color: var(--accent-2); }
.fcard { width: 100%; max-width: 720px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
.fcard.pending { border-style: dashed; }
.fcard .dcard { margin: 12px 0 0; }
.empty-thread { padding: 40px 12px; color: var(--muted); text-align: center; }
/* A3: a message is a turn: mine on the right in a bubble, the staff's on the left behind the N mark, a time under each */
.turn.user, .turn.ai { display: flex; gap: 12px; width: 100%; }
.turn.user { justify-content: flex-end; }
.turn.ai .av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 8px;
       color: var(--ink); background: var(--accent); font-size: 12px; font-weight: 700; }
.turn .body { flex: 1 1 auto; min-width: 0; }
.turn.user .body { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; max-width: 80%; }
.turn .bubble-user, .turn .filepill { max-width: 100%; align-self: flex-end; }
.turn.user .ts, .turn.ai .ts { margin-top: 6px; font-size: 11px; color: var(--faint); }
.turn.user .ts { text-align: right; }
.cards { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
/* three dots after the messages while POST /chat is under way (app.js sets body.nt-chat) */
body.nt-chat #msgs::after { content: ""; display: block; width: 6px; height: 6px; margin: 4px 0 0 40px; border-radius: 50%;
       background: var(--faint); box-shadow: 10px 0 0 var(--faint), 20px 0 0 var(--faint); animation: nt-dots 1s ease-in-out infinite; }
@keyframes nt-dots { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* 3D-ask: a question being answered (the typing dots), the answer's cost and kept lines, Answer it / Save as a note,
   the spend line under the prompt */
.turn .bubble-staff.typing { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 12px 2px 6px; }
.bubble-staff.typing .tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
       animation: nt-dots 1s ease-in-out infinite; }
.bubble-staff.typing .tdot:nth-child(2) { animation-delay: 0.15s; }
.bubble-staff.typing .tdot:nth-child(3) { animation-delay: 0.3s; }
.bubble-staff .cost-line, .bubble-staff .kept-line { margin-top: 8px; font-family: var(--mono); font-size: 11.5px;
       color: var(--faint); overflow-wrap: anywhere; }
.bubble-staff .cost-line + .kept-line { margin-top: 2px; }
.bubble-staff .ask-or-note { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bubble-staff .cites { margin: 10px 0 4px; padding-left: 22px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.bubble-staff .cites li { margin: 3px 0; overflow-wrap: anywhere; }
.bubble-staff .cites a { color: var(--text-2); }
.bubble-staff .cites .count { margin-left: 4px; font-size: 11px; }
.composer-wrap .usage-line { margin: 2px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.35; color: var(--faint);
       text-align: center; }
.composer-wrap .usage-line a { color: inherit; text-decoration: none; }
.composer-wrap .usage-line a:hover { color: var(--muted); text-decoration: underline; }
/* 3D-ask P4: Usage (the windows side by side when they fit, the days as plain bars, the live part darker) */
.usage-windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.usage-windows > .card { margin-bottom: 0; min-width: 0; }
.usage-total { margin: 0 0 8px; font-size: 15px; }
.usage-h { margin: 12px 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
       text-transform: uppercase; color: var(--muted); }
.usage-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.usage-table th { padding: 4px 8px 4px 0; font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.usage-table th .count { margin-left: 4px; font-size: 11px; }
.usage-table td { padding: 4px 0 4px 8px; font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap;
       color: var(--text-2); }
.usage-table tr + tr th, .usage-table tr + tr td { border-top: 1px solid var(--line); }
.ubar { display: block; flex: 1 1 auto; min-width: 40px; height: 10px; overflow: hidden; background: var(--line-2); border-radius: 5px; }
.ubar > span { display: block; height: 100%; background: var(--faint); border-radius: 5px; }
.ubar > span > .live { display: block; height: 100%; background: var(--accent); }
.cap-bar { height: 8px; margin: 8px 0; }
.cap-bar > span { background: var(--accent); }
.day-bars { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.day-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.day-row .day-label { flex: none; width: 84px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.day-row .day-cost { flex: none; width: 56px; font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--text-2); }
.day-row.today .day-label, .day-row.today .day-cost { color: var(--text); }
.usage-projection { margin: 12px 0 0; font-size: 14px; }
/* the prompt card (_composer.html): the growing textarea, then the row: plus, model, scope, Record, mic, Send */
.composer { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 10px 12px; background: var(--panel);
       border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--ring); }
.composer textarea, .composer input { display: block; flex: none; width: 100%; min-width: 0; min-height: 30px; max-height: 200px; margin: 0;
       padding: 6px 4px 10px; font-size: 16px; line-height: 1.45; color: var(--text); background: transparent; border: 0; border-radius: 0;
       resize: none; overflow-y: auto; }
.composer textarea:focus, .composer input:focus { outline: none; }
.composer textarea::placeholder, .composer input::placeholder { color: var(--faint); }
.prompt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.prompt-row .icobtn { color: var(--muted); }
.prompt-row .icobtn:hover { color: var(--text); }
.model { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--tap); max-width: 40vw; margin: 0;
       padding: 0 8px 0 10px; font-size: 16px; color: var(--muted); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; }
.model select { width: auto; min-height: 0; margin: 0; padding: 0 16px 0 0; font-size: inherit; color: var(--text); background: none; border: 0;
       border-radius: 0; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
.model select:disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); cursor: default; }
.model svg.ico { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--faint); pointer-events: none; }
.scope-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--tap); min-width: 0; padding: 0 2px 0 10px; font-size: 13px;
       color: var(--text); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; }
.scope-chip .lbl { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip .icobtn { position: relative; min-width: 32px; min-height: 32px; border-radius: 999px; }
.scope-chip .icobtn::before { content: ""; position: absolute; inset: -10px; }
.scope-chip .icobtn svg.ico { width: 14px; height: 14px; }
.send, .composer .send { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; min-height: 0;
       margin: 0 0 0 auto; padding: 0; color: var(--ink); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; }
.send::before { content: ""; position: absolute; inset: -2px; }  /* the 44 px rule on a 40 px button */
.send:hover { opacity: 0.9; }
.send:disabled { opacity: 0.4; }
.send svg.ico { width: 18px; height: 18px; }
.composer-note { margin-top: 8px; font-family: var(--sans); font-size: 12px; color: var(--faint); white-space: normal; text-align: center; }
.composer-hint { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--faint); text-align: center; }  /* A1: where audio goes */

/* --- the digest card (_digest.html, D29) --------------------------------------------------------------------------- */
.dcard { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
.dcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dcard-title { margin-top: 10px; font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.dcard p, .dcard ul { font-size: 14px; }
.dcard form button { width: auto; }
.ask { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 1.4; border-top: 1px solid var(--line); }
.ask > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ask .n { min-width: 16px; font-family: var(--mono); color: var(--muted); }
.ask .st { margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; white-space: nowrap; }
.st-open { color: var(--overdue); }
.st-done { color: var(--committed); }
.st-unknown { color: var(--faint); }
.st-overdue { color: var(--overdue); font-weight: 600; }
.dates { margin: 0; padding: 0; list-style: none; }
.dates li { padding: 2px 0; }
.past { color: var(--faint); }
.dcard-note { margin: 10px 0 0; font-size: 13px; color: var(--faint); }

/* --- lists and the older pages --------------------------------------------------------------------------------------- */
ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.lines li, .sessions li, .contacts li { line-height: 1.5; }
.commit.is-overdue > a { color: var(--overdue); }
.picture .group { padding: 6px 0; border-bottom: 1px solid var(--line); }
.picture .group:last-child { border-bottom: 0; }
.stuck li a { display: inline-flex; align-items: center; min-height: var(--tap); }
li.budget a { color: var(--overdue); }
.home-head .as-of { font-size: 15px; margin-bottom: 2px; }
.ai-line { color: var(--muted); }
.item .excerpt, .excerpt { color: var(--muted); font-size: 14px; white-space: pre-wrap; margin: 6px 0; }
.item.inactive { opacity: 0.55; }
.hits .hit p { margin: 2px 0; }
mark { background: color-mix(in srgb, var(--today) 30%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }
.banner-quarantined, .banner-escalated { border-color: var(--compartmented); }
.banner-committed { border-color: var(--company); }
.banner-sorting { border-color: var(--link); }
.banner-stored { border-color: var(--desk); }
.proposal { border-color: var(--link); }
.bounce { border-color: var(--compartmented); }
.bounce .path { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
pre.text { white-space: pre-wrap; word-break: break-word; font: 15px/1.5 var(--sans); margin: 0; }
.facts-list li p { margin: 2px 0; }
.quote { color: var(--muted); font-style: italic; border-left: 2px solid var(--line-3); padding-left: 8px; }
.ai-toggle .yes, .ai-sort .yes { color: var(--company); } .ai-toggle .no, .ai-sort .no { color: var(--desk); }
.brief { border-color: var(--link); }
.brief-lines { margin: 0 0 8px; padding-left: 20px; } .brief-lines li { margin: 4px 0; }
.sources, .withheld { margin: 4px 0 8px; }
.withheld .flag { color: var(--desk); border: 1px solid var(--desk); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
thead th { color: var(--muted); font-weight: 500; font-size: 13px; }
.login { max-width: 420px; margin: 8vh auto 0; }
.legal h2 { margin-top: 16px; }
.legal-foot { text-align: center; margin: 4px auto 12px; } .login-foot { max-width: 420px; margin-top: 12px; }

/* --- A2 (Phase 3B-shell Amendment A2): Home, Back, Record, the recording on the item page and in the chat ----- */
/* A2 · home */
.main-head > .thread-head { flex: 1 1 auto; min-width: 0; }  /* dormant: the thread head is the page's strip now */
.main-head > .btn.pic-btn { margin-left: auto; }  /* dormant */
/* --- A3: Home (_home.html): the hero, the prompt, the four chips (the home builder's CSS refines them) ---------------- */
.home { display: flex; flex-direction: column; flex: 1 1 auto; gap: 14px; width: 100%; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1, .hello { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
       text-align: center; text-wrap: balance; }
.hero .hero-sub { margin: 6px 0 0; font-size: 16px; color: var(--muted); text-align: center; }
.composer-wrap.home-compose { z-index: 15; }
.hchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.hchip { display: inline-flex; align-items: center; gap: 7px; flex: none; width: auto; min-height: var(--tap); margin: 0; padding: 0 13px;
       color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; background: var(--bg);
       border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.hchip:hover { color: var(--text); background: var(--raise); }
.hchip svg.ico { width: 16px; height: 16px; }
.hchip .count { font-size: 11px; }
.hchip.sel { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.hchip.sel .count { color: var(--ink); }
/* A2's Home rules no element draws now (the Picture line, Recent sessions, Apps): kept dormant */
.pic-line { display: flex; align-items: center; min-height: var(--tap); margin: 0; padding: 10px 14px; color: var(--text);
       font-size: 14px; line-height: 1.35; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
       cursor: pointer; }
.pic-line:hover { color: var(--text); border-color: var(--line-3); }
.pic-line-toggle { display: none; }
.home-sec { padding: 12px 16px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.home-sec > h2 { margin: 0 0 6px; }
.home-sec > p.empty { margin: 4px 0 10px; font-size: 14px; }
.hrow { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--tap); padding: 8px 0;
       color: var(--text); font-size: 15px; line-height: 1.3; border-top: 1px solid var(--line); }
.hrow:hover { color: var(--link); }
.hrow .nm { max-width: 100%; }
.hrow .count { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hrow.more { flex-direction: row; align-items: center; justify-content: space-between; color: var(--muted);
       font-size: 14px; }
.app-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 0 10px; }
.app-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px;
       padding: 10px 6px; color: var(--text); font-size: 14px; line-height: 1.2; text-align: center; background: var(--raise);
       border: 1px solid var(--line-2); border-radius: 12px; overflow-wrap: anywhere; }
.app-tile:hover { color: var(--text); background: var(--line); }
.app-tile svg.ico { width: 24px; height: 24px; color: var(--accent-2); }
/* --- A2 H3: the composer's plus menu (opens above the row; below it on the desktop Home) and Record ------------------ */
.plus-menu { position: relative; display: inline-block; flex: none; }
.plus-menu > summary.icobtn { min-width: var(--tap); min-height: var(--tap); padding: 0; color: var(--muted); border: 0;
       border-radius: 8px; }
.plus-menu > summary.icobtn:hover { color: var(--text); }
.plus-menu[open] > summary.icobtn { color: var(--text); background: var(--raise); }
.plus-list { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column;
       gap: 2px; min-width: 210px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
       box-shadow: var(--shadow); }
.plus-item { display: flex; align-items: center; gap: 10px; min-height: var(--tap); margin: 0; padding: 0 12px; color: var(--text);
       font-size: 15px; white-space: nowrap; border-radius: 8px; cursor: pointer; }
.plus-item:hover { color: var(--text); background: var(--raise); }
.plus-item svg.ico { color: var(--muted); }
.icobtn.rec-link { color: var(--overdue); }
.icobtn.rec-link:hover { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 12%, transparent); }
/* --- A2 H4: error.html's Back beside the old link -------------------------------------------------------------------- */
.error-links { display: flex; flex-wrap: wrap; gap: 8px; }
.error-links .btn { margin: 0; }
/* A2 · navjs */
/* while a marked form's post is under way: the page waits, the tapped button says so */
body.nt-busy { cursor: progress; }
body.nt-busy form[data-nav] button:not([aria-busy="true"]) { opacity: 0.7; }
button[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; opacity: 0.6; }
button[aria-busy="true"]::after, .btn[aria-busy="true"]::after { content: "\2026"; }
/* A2 N3: a recording's card waited ten minutes: "Still working: refresh later. Look again" */
.pending-note #pending-again { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 6px;
       font-weight: 600; color: var(--link); }
/* A2 · recpage */
/* --- A2: the Record screen (record.html, record.js) ------------------------------------------------------------------ */
.rec-screen { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; }
.rec-clock { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; }
#rec-timer { font-family: var(--cond); font-size: clamp(72px, 24vw, 128px); font-weight: 600; line-height: 1;
       letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
#rec[data-state="recording"] #rec-timer { color: var(--danger); }
#rec[data-state="paused"] #rec-timer, #rec[data-state="interrupted"] #rec-timer { color: var(--today); }
#rec-level { position: relative; width: min(320px, 100%); height: 8px; overflow: hidden; background: var(--raise);
       border: 1px solid var(--line-2); border-radius: 999px; }
#rec-level .rec-level-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--committed);
       transform: scaleX(0); transform-origin: left center; transition: transform 0.12s linear; }
.rec-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rec-buttons .rec-btn { flex-direction: column; gap: 4px; min-height: 76px; margin: 0; padding: 10px 6px; font-size: 16px; }
.rec-buttons .rec-btn.ghost { border-color: var(--line-3); }
.rec-buttons .rec-btn svg.ico { width: 28px; height: 28px; }
button.rec-stop { color: var(--ink); background: var(--danger); border-color: var(--danger); }
button.rec-stop:hover { color: var(--ink); background: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.rec-status { min-height: 1.45em; margin: 0; font-size: 15px; text-align: center; color: var(--text-2); }
.rec-panel { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; }
.rec-panel p { margin: 0; }
.rec-panel .two-buttons { margin-top: 10px; }
.rec-int { border-color: var(--today); }
.rec-unsent { border-color: var(--link); }
/* NX-04: the call row under the three buttons (record.js shows it in Chrome or Edge on a computer); the two buttons are
   equals, side by side while each column keeps 240 px and stacked under that; each carries its line under it */
.rec-call-head { font-weight: 600; color: var(--text); }
.rec-call .rec-call-ways { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
.rec-call .rec-call-btn { gap: 8px; font-size: 14px; color: var(--text); background: var(--raise); border-color: var(--line-3); }
.rec-call .rec-call-btn:hover:not(:disabled) { color: var(--text); background: var(--raise-2); }
.rec-call .rec-call-btn svg.ico { width: 18px; height: 18px; color: var(--muted); }
.rec-call .rec-call-how { margin-top: 6px; }
.rec-call .rec-call-what { margin-top: 12px; }
/* the call's consent line, read before the tap: a shade brighter than the notes around it */
.rec-call .rec-call-consent { margin-top: 6px; color: var(--text-2); }
.rec-pickers label:first-child { margin-top: 0; }
.rec-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rec-wake:empty { display: none; }
#rec-ai-note { margin-top: 8px; font-size: 14px; color: var(--today); }
.rec-unfinished h2 { margin-bottom: 4px; }
.rec-rows .rec-row { display: flex; flex-direction: column; gap: 4px; }
.rec-file { margin: 0; }
.rec-file button { width: auto; margin-top: 6px; }
#rec-leave { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
       padding: 14px max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
       background: var(--raise); border-top: 1px solid var(--line-3); box-shadow: var(--shadow); }
#rec-leave p { margin: 0; font-weight: 600; text-align: center; }
#rec-leave .two-buttons { margin-top: 10px; }
button.rec-leave-go { color: var(--ink); background: var(--danger); border-color: var(--danger); }
/* A2 · item */
/* --- A2: a recording on the item page (I1): its card after the digest; the head line reads as a title, not a label - */
.rec-card { border-color: var(--line-3); }
.rec-card h2.rec-title { margin: 0 0 6px; font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0;
       text-transform: none; color: var(--text); }
.rec-meeting { margin: 0 0 6px; font-size: 15px; }
.rec-cut { margin: 4px 0 8px; color: var(--faint); }
/* the Speakers block: one chip per speaker (a <details>), its form opening below the chips' row */
.spk-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 4px 0 6px; }
.spk-list > .k { flex-basis: 100%; margin: 8px 0 0; }
details.spk-name { display: inline-block; max-width: 100%; }
details.spk-name > summary { min-height: var(--tap); padding: 6px 14px; border-radius: 22px; font-size: 15px;
       color: var(--text); background: var(--raise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
       max-width: 100%; }
details.spk-name[open] { display: block; flex-basis: 100%; padding: 2px 0 6px; }
details.spk-name[open] > summary { color: var(--accent); background: transparent; }
.spk-sample { margin: 8px 0 0; font-style: italic; }
.spk-form { margin: 8px 0 0; }
.spk-form input[name="name"] { margin: 0; }
.spk-btns { display: flex; gap: 8px; margin-top: 8px; }
.spk-btns button { flex: 1 1 0; margin: 0; }
.spk-form p.small { margin: 6px 0 0; }
/* the transcript by speaker (folded): a turn per paragraph, its time small and steady, the speaker a link to its chip */
details.fold.transcript { margin-top: 10px; }
.transcript .turn { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.transcript .turn:last-child { border-bottom: 0; }
.transcript .ts { display: inline-block; min-width: 3.2em; margin-right: 4px; color: var(--muted); font-family: var(--mono);
       font-size: 12px; font-variant-numeric: tabular-nums; }
.transcript a.spk { font-weight: 600; color: var(--link); }
.transcript .spk-none { font-weight: 600; color: var(--muted); }
/* --- A2: the cost line on every item that has one (I2) ------------------------------------------------------------ */
.cost-line { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
/* --- A2: the meeting page (I4): Record, Recorded, Present ------------------------------------------------------------ */
.btn.rec-btn { gap: 6px; }
.btn.rec-btn svg.ico { width: 18px; height: 18px; color: var(--overdue); }
.rec-list li, .present-list li { line-height: 1.5; }
/* A2 · recchat */
.bubble-user.rec-in { display: flex; flex-direction: column; gap: 6px; color: var(--muted);
       border: 1px solid var(--line-2); }
.rec-in .rec-what { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.rec-in .rec-what svg.ico { width: 18px; height: 18px; color: var(--overdue); }
.rec-in > .reply { color: var(--text-2); font-size: 15px; }
.rec-in > .act { justify-content: flex-end; margin-top: 2px; }
.rec-in > .act .btn { min-height: var(--tap); }
.rec-card-chat.pending { border-style: dashed; }
.rec-card-chat.pending > .reply:not(.rec-note)::after { content: " …"; color: var(--muted); }
.tag-rec { display: inline-flex; align-items: center; gap: 4px; color: var(--overdue); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tag-rec svg.ico { width: 12px; height: 12px; }
.rec-out > .reply { color: var(--text); }
.rec-out > .reply.rec-note { margin-top: 4px; color: var(--today); font-size: 14px; }
.msgs > .pending-note:not([hidden]) { padding: 6px 0 2px; }

/* --- wave 2b (E3): the thread's own rules, and the Picture's Changed and Stuck rows ------------------------------- */
.bubble-user.muted { color: var(--muted); font-style: italic; }
.bubble-user .tag { margin-left: 8px; vertical-align: 1px; }
.bubble-staff > .reply + .prow { margin-top: 8px; }
.bubble-staff .and-more { border-top: 1px solid var(--line); }
.reply.full { white-space: pre-wrap; }
.fcard > .meta { margin-bottom: 8px; }
.fcard > .what { margin-bottom: 4px; }
.fcard > .act { margin-top: 10px; }
.fcard.gone { padding: 10px 16px; }
.pending-note { margin: 0; text-align: center; white-space: normal; }
.icobtn.rec { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 12%, transparent); }
.composer-wrap.drop .composer { border-color: var(--ring); border-style: dashed; }
.prow.chg { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.prow.chg .meta { flex: none; }
.meta.stuck-group { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.meta.stuck-group + .prow { border-top: 0; }
.stuck-line strong { color: var(--text); font-weight: 600; }
.meta.stuck-lists { padding: 6px 0 8px; border-top: 1px solid var(--line); }
.meta.stuck-lists a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- A1: Owe in the Picture's style (owe.html: its sections and folds are the Picture's .sec) ----------------------- */
.owe-secs { display: flex; flex-direction: column; gap: 12px; }
.owe-fold > details.fold { margin: 0 0 8px; }
.fcard > .reply.transcript { margin-top: 4px; color: var(--text-2); }  /* an audio item's first line, or why not */

/* --- A3: the panels and their parts: the CSS contract every page builder relies on (phone first; the 900 block sizes
   them down). A page's content opens with one .panel: a .view-head (h1 + one line + .actions), then cards. ------------ */
.panel { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 0 auto; padding: 20px 16px 24px; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.view-head > div { min-width: 0; }
.view-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.view-head p, .view-head .sub, .view-head .hero-sub { margin: 4px 0 0; max-width: 64ch; color: var(--muted); }
.view-head .actions { margin: 0; }
.panel .card { margin-bottom: 0; }
.card-title, .card h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
       color: var(--text); }
.card-title .count { margin-left: 8px; }
.hint, .card .hint { margin: 0 0 12px; max-width: 64ch; font-size: 13px; color: var(--muted); }
.stack, .card.stack { display: flex; flex-direction: column; gap: 14px; }
.kvs { display: flex; flex-direction: column; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 0; font-size: 14px;
       border-top: 1px solid var(--line); }
.kvs .kv:first-child { border-top: 0; }
.kv > span:first-child { color: var(--muted); }
.kv .v { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv form { margin: 0; }
.kv .mono { white-space: normal; overflow-wrap: anywhere; }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.li > .ico:not(svg), .li-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--muted);
       background: var(--raise); }
.li > .ico:not(svg) svg.ico, .li-ico svg.ico { width: 16px; height: 16px; }
.li .b { flex: 1 1 auto; min-width: 0; }
.li .b b { display: block; font-weight: 500; }
.li .b b a { color: var(--text); }
.li .b p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.li .meta { margin-top: 6px; font-size: 12px; }
.li > .btn, .li > form { flex: none; align-self: center; margin: 0; }
.li .due.over, .li p.over { color: var(--overdue); }
.li .due.soon, .li p.soon { color: var(--today); }
.nextup .li { align-items: center; }
/* a switch: a role=switch button drawn as a 36 by 20 pill (an invisible 44 px hit area around it), green when on */
.switch { position: relative; flex: none; width: 36px; height: 20px; min-height: 0; margin: 0; padding: 0; border-radius: 999px;
       background: var(--raise-2); border: 1px solid var(--line); cursor: pointer; }
.switch::before { content: ""; position: absolute; inset: -12px -8px; }
.switch[aria-checked="true"] { background: var(--committed); border-color: var(--committed); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch[aria-checked="true"] .knob { transform: translateX(16px); }
.switch[aria-busy="true"]::after { content: none; }
.switch-form { margin: 0; }
/* badges: the owe card's state, "Suggested"; every state carries the .badge prefix (the digest's bare .st-* stay theirs) */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
       line-height: 1.5; white-space: nowrap; color: var(--muted); background: var(--raise); border: 1px solid var(--line); }
.badge svg.ico { width: 12px; height: 12px; }
.badge.ai { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 35%, transparent); background: color-mix(in srgb, var(--ai) 12%, transparent); }
.badge.st-open { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 10%, transparent); }
.badge.st-confirmed, .badge.st-done { color: var(--committed); border-color: color-mix(in srgb, var(--committed) 35%, transparent);
       background: color-mix(in srgb, var(--committed) 10%, transparent); }
.badge.st-slipped { color: var(--today); border-color: color-mix(in srgb, var(--today) 40%, transparent); background: color-mix(in srgb, var(--today) 10%, transparent); }
.badge.st-cancelled, .badge.st-historical, .badge.st-tasking, .badge.st-merged { color: var(--faint); }
/* the upload and voice-memo zones on File (a label around a visually hidden file input: the whole block is the target) */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: var(--tap); margin: 0;
       padding: 18px; text-align: center; color: var(--muted); font-size: inherit; border: 1px dashed var(--line-3); border-radius: 10px; cursor: pointer; }
.dropzone:hover, .dropzone:focus-within { background: var(--raise); }
.dropzone b { color: var(--text); font-weight: 500; }
.dropzone small { color: var(--faint); }
.dropzone svg.ico { color: var(--muted); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden;
       clip: rect(0 0 0 0); white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.field > input, .field > select, .field > textarea { margin: 0; }
textarea.input { min-height: 140px; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.toolbar .sfield, .toolbar .searchbox { flex: 1 1 100%; min-width: 0; margin: 0; }
.toolbar form { margin: 0; }
.toolbar .segs { flex: none; }
/* the timeline rail (timeline.html: a month per card, a day label and its items on one rule) */
.tl { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 6px 0 0 8px; padding-left: 24px; border-left: 2px solid var(--line); }
.tl-day { position: relative; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.tl-day::before { content: ""; position: absolute; left: -31px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint);
       border: 2px solid var(--panel); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -29px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--tlc, var(--faint)); }
.tl-item b { font-weight: 500; }
.tl-item p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* Owe: the two columns and the owe card (one markup in _rows.html: the Picture, Owe, the project view, the thread) */
.owe-cols { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.owe-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.owe-col h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.owe-col .and-more { border-top: 0; }
.prow.owe { gap: 8px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.owe-col > .owe + .owe, .sec > .owe + .owe, .bubble-staff > .owe + .owe, .cards > .owe + .owe, .list > .owe + .owe { margin-top: 10px; }
.sec > .prow.owe { border-top: 1px solid var(--line); }
.owe-top { display: flex; align-items: flex-start; gap: 10px; }
.owe-top .what { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.owe-top .what small { font-size: inherit; font-weight: 400; color: var(--muted); }
.owe-top .badge { flex: none; }
.owe-meta { gap: 6px 12px; font-size: 12px; }
.owe-meta .pj, .pj { display: inline-flex; align-items: center; gap: 6px; }
.due { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.due svg.ico { width: 14px; height: 14px; }
.due.over { color: var(--overdue); }
.due.soon { color: var(--today); }
.owe-actions { gap: 6px; padding-top: 2px; }
.owe.is-done .what a, .owe.is-cancelled .what a { color: var(--faint); text-decoration: line-through; }
/* Sources: the three status cards */
.src-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card.src { display: flex; flex-direction: column; gap: 10px; }
.src-head { display: flex; align-items: center; gap: 10px; }
.src-head > div { min-width: 0; }
.src-head b { display: block; font-weight: 600; }
.src-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--raise); }
.src-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.src-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--committed); }
.src-status.off i { background: var(--faint); }
.src-status.warn i { background: var(--today); }
.src .actions { margin-top: auto; }
.src-foot { margin: 0; font-size: 12px; color: var(--faint); }
/* Advanced and the other folds dressed as it (details.adv, details.fold.adv): a bordered box whose summary is a plain row
   with a chevron that turns, never the two-tap pill */
details.adv { margin: 0; padding: 0; background: var(--rail); border: 1px solid var(--line); border-radius: 12px; }
details.adv > summary { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); margin: 0; padding: 12px 16px;
       color: var(--text); font-size: 15px; font-weight: 500; text-align: left; background: transparent; border: 0; border-radius: 12px;
       cursor: pointer; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary svg.ico { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
details.adv[open] > summary svg.ico { transform: rotate(90deg); }
details.adv[open] > summary { margin-bottom: 0; color: var(--text); border: 0; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
details.adv > summary small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--faint); text-align: right; }
details.adv > .inner { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 12px 16px 16px; }
details.adv .card { margin: 0; }
details.fold.adv > :not(summary):not(.inner) { margin-left: 16px; margin-right: 16px; }
details.fold.adv[open] { padding-bottom: 14px; }
details.fold.adv[open] > summary { margin-bottom: 10px; }
.proj-head { flex-wrap: wrap; }
.dot.big { width: 14px; height: 14px; }

/* --- under 900 px: the drawer; the phone's own rules ------------------------------------------------------------------- */

/* --- A3 · home --- */
.main-body:has(> .home) { display: flex; flex-direction: column; flex: 1 0 auto; }
.home { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 22px; width: 100%;
       max-width: 760px; margin: 0 auto; padding: 12vh 0 0; }
.home > .hero { order: 0; display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
       text-align: center; }
.hero .hello { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
       color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.hero .hero-sub { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--muted); }
.home > .hchips { order: 1; }
.home > .composer-wrap { order: 2; }

.hchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 0; padding: 0;
       overflow: visible; }
.hchips .hchip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; width: auto;
       min-height: var(--tap); margin: 0; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 500;
       line-height: 1.2; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
       white-space: nowrap; text-align: center; cursor: pointer; }
.hchips .hchip:hover { color: var(--text); background: var(--raise); }
.hchips .hchip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hchips .hchip svg.ico { width: 14px; height: 14px; }

.home .composer-wrap.home-compose { position: sticky; bottom: 0; z-index: 15; width: 100%; margin: auto 0 0;
       padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 0; }


.composer.prompt { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 10px 12px;
       background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.composer.prompt:focus-within { border-color: var(--ring); }
.composer-wrap.drop .composer.prompt { border-color: var(--ring); border-style: dashed; }

.composer.prompt textarea { display: block; flex: none; width: 100%; min-width: 0; min-height: 30px; max-height: 200px;
       margin: 0; padding: 6px 4px 10px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--text);
       background: transparent; border: 0; border-radius: 0; resize: none; overflow-y: auto; field-sizing: content; }
.composer.prompt textarea:focus { outline: none; }
.composer.prompt textarea::placeholder { color: var(--faint); }

.prompt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.prompt-row > * { margin: 0; }
.prompt-row .icobtn { flex: none; width: auto; min-width: 36px; min-height: var(--tap); margin: 0; padding: 0;
       color: var(--text-2); background: transparent; border: 0; border-radius: 10px; }
.prompt-row .icobtn:hover { color: var(--text); background: var(--raise); }
.prompt-row .icobtn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.prompt-row .icobtn svg.ico { width: 18px; height: 18px; }
.prompt-row .plus-menu { flex: none; }
.prompt-row .plus-menu > summary.icobtn { display: inline-flex; width: auto; min-width: 36px; min-height: var(--tap);
       padding: 0; color: var(--text-2); background: transparent; border: 0; border-radius: 10px; }
.prompt-row .plus-menu[open] > summary.icobtn { color: var(--text); background: var(--raise); }
.composer-wrap .prompt-row .plus-list { top: auto; bottom: calc(100% + 8px); background: var(--panel);
       border-color: var(--line); box-shadow: var(--shadow); }
.plus-list .plus-item svg.ico { width: 18px; height: 18px; color: var(--muted); }

.prompt-row .model { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0;
       max-width: 40vw; height: var(--tap); margin: 0; padding: 0 8px 0 10px; font-size: 16px; line-height: 1.2;
       color: var(--text-2); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; cursor: default; }
.model select { display: block; width: auto; max-width: 100%; min-width: 0; min-height: 0; height: auto; margin: 0;
       padding: 0 18px 0 0; font: inherit; font-size: 16px; line-height: 1.2; color: var(--text); background: none;
       border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; cursor: default; white-space: nowrap;
       overflow: hidden; text-overflow: ellipsis; }
.model select:disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); cursor: default; }
.model select:focus { outline: none; }
.model svg.ico { position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
       color: var(--faint); pointer-events: none; }

.scope-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; max-width: 100%;
       height: var(--tap); margin: 0; padding: 0 4px 0 10px; font-size: 13px; line-height: 1.2; color: var(--text);
       background: var(--raise); border: 1px solid var(--line); border-radius: 999px; }
.scope-chip .dot { width: 8px; height: 8px; }
.scope-chip .lbl { min-width: 0; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip .icobtn.scope-clear { position: relative; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
       border-radius: 999px; color: var(--muted); }
.scope-chip .icobtn.scope-clear::before { content: ""; position: absolute; inset: -6px -8px; }
.scope-chip .icobtn.scope-clear:hover { color: var(--text); background: var(--line); }
.scope-chip .icobtn.scope-clear svg.ico { width: 14px; height: 14px; }

.prompt-row #rec-link { margin-left: auto; }
.prompt-row .icobtn.rec-link { color: var(--overdue); }
.prompt-row .icobtn.rec-link:hover { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 12%, transparent); }
.prompt-row .icobtn.rec { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 12%, transparent); }

.prompt-row .send { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
       width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0 0 0 auto; padding: 0; font-size: 0;
       line-height: 0; color: var(--ink); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; }
.prompt-row .send::before { content: ""; position: absolute; inset: -2px; border-radius: 999px; }
.prompt-row .send svg.ico { width: 18px; height: 18px; }
.prompt-row .send:hover { opacity: 0.9; color: var(--ink); background: var(--accent); }
.prompt-row .send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.prompt-row .send:disabled { opacity: 0.45; cursor: default; }
.prompt-row .send[aria-busy="true"]::after { content: none; }

.composer-wrap .composer-note { margin: 6px 0 0; font-family: var(--sans); font-size: 11px; line-height: 1.35;
       color: var(--faint); text-align: center; white-space: normal; }
.composer-wrap .composer-hint { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--faint); text-align: center; }

/* --- A3 · thread --- */
.msgs .msg { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; scroll-margin-top: 120px; }
.msgs .turn { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.msgs .turn.user { justify-content: flex-end; }
.msgs .turn .body { min-width: 0; }
.msgs .turn.ai .body { flex: 1 1 auto; }
.msgs .turn.user .body { display: flex; flex-direction: column; align-items: flex-end; max-width: 80%; }
.msgs .turn.user .body > .bubble-user, .msgs .turn.user .body > .filepill { max-width: 100%; }
.msgs .turn .av { width: 28px; height: 28px; flex: none; margin-top: 2px; border-radius: 8px; background: var(--accent); color: var(--ink);
  display: grid; place-items: center; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1; user-select: none; }
.turn .bubble-user { max-width: 100%; padding: 10px 14px; font-size: 15px; line-height: 1.45; background: var(--bubble);
  border-radius: 18px 18px 4px 18px; overflow-wrap: anywhere; }
.turn .bubble-user.muted { color: var(--muted); font-style: italic; }
.turn .bubble-staff { width: 100%; max-width: none; padding: 2px 0 0; font-size: 15px; line-height: 1.5; }
.turn .bubble-staff > .reply { overflow-wrap: anywhere; }
.msgs .msg .ts { margin: 6px 0 0; font-size: 11px; line-height: 1.3; color: var(--faint); font-family: var(--sans); white-space: nowrap; }
.msgs .turn.user .ts { text-align: right; }
.msgs .turn.user .body > .ts { align-self: flex-end; }
.turn .cards { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.turn .bubble-staff > .cards + .and-more { margin-top: 4px; }
.turn.ai .fcard { width: 100%; max-width: none; }
.turn.ai .fcard + .ts { margin-top: 6px; }

body.nt-chat #msgs::after { content: ""; display: block; width: 34px; height: 8px; margin: 10px 0 0 40px;
  background: radial-gradient(circle at 4px 4px, var(--faint) 3px, transparent 3.6px) 0 0 / 13px 8px repeat-x;
  animation: nt-dots 1s ease-in-out infinite; }
@keyframes nt-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }


.prow.owe { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; }
.owe-col > .prow.owe + .prow.owe, .cards > .prow.owe + .prow.owe, .inner > .prow.owe + .prow.owe { margin-top: 10px; }
.sec > .prow.owe { margin: 0 0 10px; }
.owe .owe-top { display: flex; gap: 10px; align-items: flex-start; }
.owe .owe-top .what { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.owe .owe-top .what a { color: var(--text); }
.owe .owe-top .what a:hover { color: var(--link); }
.owe .owe-top .what small { font-size: inherit; font-weight: 400; color: var(--muted); }
.owe .owe-top .badge { flex: none; margin-top: 1px; }
.prow.owe.done .what a, .prow.owe.is-done .what a, .prow.owe.is-cancelled .what a { color: var(--faint); text-decoration: line-through; }
.owe .owe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.owe .owe-meta .pj { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.owe .owe-meta .pj .dot { display: inline-block; flex: none; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--faint);
  vertical-align: 0; }
.owe .owe-meta .due { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.owe .owe-meta .due svg.ico { width: 14px; height: 14px; }
.owe .owe-meta .due.over { color: var(--overdue); }
.owe .owe-meta .due.soon { color: var(--today); }
.owe .owe-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding-top: 2px; }
.owe .owe-actions form { margin: 0; }
.owe .owe-actions .btn, .owe .owe-actions button, .owe .owe-actions details > summary { width: auto; min-height: var(--tap); margin: 0;
  padding: 8px 14px; font-size: 14px; font-weight: 500; line-height: 1.2; border-radius: 8px; gap: 6px; }
.owe .owe-actions .btn { color: var(--text); background: var(--panel); border: 1px solid var(--line); }
.owe .owe-actions .btn:hover { background: var(--raise); }
.owe .owe-actions .btn.ghost, .owe .owe-actions details > summary.btn.ghost { color: var(--muted); background: transparent; border-color: transparent; }
.owe .owe-actions .btn.ghost:hover, .owe .owe-actions details > summary.btn.ghost:hover { color: var(--text); background: var(--raise); }
.owe .owe-actions .btn svg.ico, .owe .owe-actions button svg.ico { width: 14px; height: 14px; }
.owe .owe-actions .btn:disabled, .owe .owe-actions button:disabled { opacity: 0.4; cursor: default; background: transparent; }
.btn.btn-danger, .btn-danger, .owe .owe-actions details > summary.btn-danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.btn-danger:hover, .btn-danger:hover, .owe .owe-actions details > summary.btn-danger:hover { color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent); }
.owe .owe-actions details.second-tap { display: inline-block; }
.owe .owe-actions details.second-tap[open] { display: block; flex-basis: 100%; width: 100%; padding: 6px 0 0; }
.owe .owe-actions details.second-tap[open] > summary { color: var(--text); border-color: var(--line-3); }
.owe .owe-actions details.second-tap[open] > summary.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.owe .owe-actions details.second-tap[open] form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.owe .owe-actions details.second-tap[open] input[type="date"] { width: 100%; margin: 0; }
.owe .owe-actions details.second-tap[open] .btn { align-self: flex-start; }


.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-family: var(--sans); font-size: 11px;
  font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--muted); background: var(--raise);
  border: 1px solid var(--line); }
.badge svg.ico { width: 12px; height: 12px; }
.badge.ai { color: var(--ai); border-color: color-mix(in srgb, var(--ai) 35%, transparent); background: color-mix(in srgb, var(--ai) 12%, transparent); }
.badge.st-open { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 10%, transparent); }
.badge.st-confirmed, .badge.st-done { color: var(--committed); border-color: color-mix(in srgb, var(--committed) 35%, transparent);
  background: color-mix(in srgb, var(--committed) 10%, transparent); }
.badge.st-slipped { color: var(--today); border-color: color-mix(in srgb, var(--today) 40%, transparent); background: color-mix(in srgb, var(--today) 10%, transparent); }
.badge.st-cancelled, .badge.st-historical, .badge.st-tasking, .badge.st-merged { color: var(--faint); }


.prow.card-row { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.prow.card-row .what { font-size: 15px; font-weight: 500; }
.prow.card-row .meta { font-size: 12px; }
.prow.card-row .act .btn, .prow.card-row .act button { min-height: var(--tap); padding: 8px 14px; font-size: 14px; border-radius: 8px; }


.owe-page .owe-crumb { margin: 0 0 2px; }
.owe-page .view-head .actions { margin: 0; }
.owe-page .view-head .view-switch { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.owe-page .view-head .view-switch button { width: auto; margin: 0; }
.owe-page .error { margin: 0; }
.owe-cols { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.owe-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.owe-col h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.owe-col h3 .sect { font-family: var(--sans); font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: var(--text); }
.owe-col h3 .count, .owe-page .sech .count { font-family: var(--sans); font-size: 11px; color: var(--faint); background: var(--raise); padding: 1px 7px;
  border-radius: 999px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.owe-col > .prow.owe { margin: 0; }
.owe-col > .empty { padding: 6px 0 10px; font-size: 14px; }
.owe-col > .and-more { border-top: 0; margin: -2px 0 0; }
.owe-page .owe-secs { display: flex; flex-direction: column; gap: 12px; }
.owe-page .sec { padding: 12px 14px 4px; }
.owe-page .sec .sech { margin-bottom: 10px; }
.owe-page .sec .sect { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.owe-page .sec > .empty { padding: 2px 0 10px; }

.owe-page details.fold.adv, .owe-page .owe-fold { margin: 0; padding: 0; background: var(--rail); border: 1px solid var(--line); border-radius: 12px; }
.owe-page .owe-fold > details.fold { margin: 0; }
.owe-page details.fold.adv > summary, .owe-page .owe-fold > details.fold > summary { display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--tap); margin: 0; padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 15px;
  font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; text-align: left; justify-content: flex-start; }
.owe-page details.fold.adv > summary svg.ico, .owe-page .owe-fold > details.fold > summary svg.ico { width: 16px; height: 16px; flex: none;
  color: var(--muted); transition: transform 0.15s; }
.owe-page details.fold.adv[open] > summary svg.ico, .owe-page .owe-fold > details.fold[open] > summary svg.ico { transform: rotate(90deg); }
.owe-page details.fold.adv[open] > summary, .owe-page .owe-fold > details.fold[open] > summary { margin: 0; color: var(--text); border: 0;
  border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.owe-page details.fold.adv > .inner, .owe-page .owe-fold > details.fold > .inner { display: block; padding: 12px 16px 16px; }
.owe-page .owe-fold .inner > .small { margin: 0 0 10px; }
.owe-page .owe-fold .inner > .prow.owe + .prow.owe { margin-top: 10px; }
.owe-page .owe-fold .inner > .empty { padding: 2px 0 4px; }
.owe-page .owe-fold .inner > .and-more { border-top: 0; }
.owe-page .owe-add .owe-form > label:first-child { margin-top: 0; }
.owe-page .owe-add .two-buttons { margin-top: 14px; }
.owe-page .owe-add .two-buttons button { min-height: var(--tap); font-size: 16px; }

/* --- A3 · picture --- */
.project-view .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.project-view .view-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.project-view .view-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.proj-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.proj-head .dot.big { width: 14px; height: 14px; }
.proj-head .proj-words { min-width: 0; overflow-wrap: anywhere; }
.proj-head .count { font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--faint);
       background: var(--raise); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-head .hero-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 64ch; }
.project-view .view-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.project-view .view-head .actions > .btn { margin: 0; }
.project-view .btn.btn-outline { color: var(--text); background: var(--panel); border: 1px solid var(--line); font-weight: 500; }
.project-view .btn.btn-outline:hover { color: var(--text); background: var(--raise); }
.project-view .btn.btn-outline svg.ico { width: 16px; height: 16px; }
.project-view .view-head .btn.ghost { color: var(--muted); border-color: transparent; background: transparent; }
.project-view .view-head .btn.ghost:hover { color: var(--text); background: var(--raise); }


.project-view .pic-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 0;
       font-size: 13px; line-height: 1.4; color: var(--faint); }


.project-view .picture, .project-view #picture { display: block; position: static; transform: none; visibility: visible;
       width: auto; height: auto; min-height: 0; max-width: none; overflow: visible; padding: 0; margin: 0;
       background: transparent; border: 0; box-shadow: none; z-index: auto; }
.project-view .pic { display: flex; flex-direction: column; gap: 14px; padding: 0; }


.pic > .card, .pic .card.sec { margin: 0; }
.card.sec { padding: 14px 16px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pic .sech { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.pic .sect, .card-title { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0;
       text-transform: none; color: var(--text); margin: 0; }
.pic .sech > .count { font-family: var(--sans); font-size: 12px; color: var(--faint); white-space: nowrap; }
.pic .card .hint { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.card.sec > .sech + .prow, .card.sec > .sech + .meta.stuck-group, .card.sec > .hint + .prow { border-top: 0; }
.card.sec > .empty { padding: 6px 0 10px; font-size: 14px; }
.card.sec > .and-more { margin: 0; }
.pic .prow .what { font-size: 15px; }
.pic .prow .meta { font-size: 13px; }


.pic .owe-cols { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; margin: 0; }
.sec.owe-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0; background: transparent;
       border: 0; border-radius: 0; margin: 0; }
.owe-col > .sech { justify-content: flex-start; align-items: center; gap: 8px; margin: 0; }
.owe-col > .sech > .count { font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--faint); background: var(--raise);
       padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.owe-col > .empty { padding: 2px 0 6px; font-size: 14px; }
.owe-col > .and-more { border-top: 0; margin: -4px 0 0; min-height: var(--tap); }


.pic .list { display: flex; flex-direction: column; }
.pic .li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.pic .li:first-child { border-top: 0; }
.pic .li-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--raise); display: grid; place-items: center;
       flex: none; color: var(--muted); }
.pic .li svg.ico { width: 16px; height: 16px; background: transparent; border-radius: 0; }
.pic .li .b { flex: 1; min-width: 0; }
.pic .li .b b { display: block; font-weight: 500; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.pic .li .b b a { color: var(--text); }
.pic .li .b b a:hover { color: var(--link); }
.pic .li .b b small { font-weight: 400; font-size: 14px; color: var(--muted); }
.pic .li .b p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.pic .li .b p.due.over { color: var(--overdue); }
.pic .li .b p.due.soon { color: var(--today); }
.pic .li .meta { margin-top: 6px; font-size: 12px; }
.pic .li > .btn { flex: none; align-self: center; margin: 0; }
.pic .li > .btn.ghost { color: var(--muted); background: transparent; border-color: transparent; }
.pic .li > .btn.ghost:hover { color: var(--text); background: var(--raise); }
.nextup .li { align-items: center; }
.pic .list > .empty { padding: 8px 0 10px; font-size: 14px; }


.btn.btn-sm { min-height: var(--tap); padding: 8px 12px; font-size: 14px; font-weight: 500; }
.btn.btn-sm svg.ico { width: 14px; height: 14px; }


.meta.stuck-group { padding: 12px 0 2px; border-top: 1px solid var(--line); font-size: 14px; }
.meta.stuck-group a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); }
.meta.stuck-group a:hover { color: var(--link); }
.stuck-line strong { color: var(--text); font-weight: 600; }
.prow.health { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prow.health::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--today); }
.prow.health .what { font-size: 14px; }
.prow.health .meta { flex: 1 1 100%; padding-left: 18px; }
.meta.stuck-lists { padding: 8px 0 6px; border-top: 1px solid var(--line); gap: 4px 6px; }
.meta.stuck-lists > span:first-child { margin-right: 2px; }
.meta.stuck-lists a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font-size: 13px;
       color: var(--text-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.meta.stuck-lists a:hover { color: var(--text); background: var(--raise); }

/* --- A3 · pages --- */
.faint { color: var(--faint); }
.view-head .sub { display: block; width: auto; min-height: 0; padding: 0; background: none; border-radius: 0;
                  font-size: 15px; line-height: 1.5; }        
.view-head .sub:hover { background: none; }
.view-head .sub a { color: var(--link); }
.panel > .hint { margin: -4px 0 0; }
.panel > .error, .panel > .notice { margin: 0; }
.field > .lbl { font-size: 13px; font-weight: 500; color: var(--muted); }   
.panel .actions { margin: 0; align-items: center; }
.panel .actions > button, .panel .actions > .btn, .panel .actions > form > button { width: auto; margin: 0; }
.card > h4 + .list, .card > h4 + ul { margin-top: 2px; }
.card-foot { margin: 10px 0 0; }
.noise-links { margin: 0; }
.noise-links a, .pager-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
.pager-line { margin: 12px 0 0; color: var(--muted); }


.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
            min-height: var(--tap); margin: 0; padding: 18px; text-align: center; color: var(--muted); font-size: 14px;
            font-weight: 400; line-height: 1.4; background: transparent; border: 1px dashed var(--line-3); border-radius: 10px;
            cursor: pointer; }
.stack label.dropzone { margin: 0; }                                    
.dropzone:hover, .dropzone:focus-within { background: var(--raise); }
.dropzone:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; }
.dropzone.drop { background: var(--raise); border-color: var(--ring); }
.dropzone b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.dropzone small { color: var(--faint); font-size: 12px; }
.dropzone svg.ico { width: 20px; height: 20px; color: var(--muted); }
.dropzone-memo svg.ico { color: var(--overdue); }

.dropzone > input.vh { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0;
                       opacity: 0; clip: auto; clip-path: none; overflow: hidden; cursor: pointer; }
.file-actions { gap: 8px 12px; }
.file-actions button.big { min-height: var(--tap); padding: 0 16px; font-size: 15px; font-weight: 600; }
.file-actions button.big.ghost-btn { color: var(--text); background: var(--panel); border: 1px solid var(--line); font-weight: 500; }
.file-actions button.big.ghost-btn:hover { background: var(--raise); }
.file-actions > .small { color: var(--faint); }
.capture-form .audio-note { margin: -4px 0 0; }
.file-panel details.fold.adv .files-form { margin: 0; }


.know-bar { align-items: center; }
.know-bar .searchbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; margin: 0; }
.know-bar .sfield { flex: 1 1 200px; min-width: 0; }
.know-bar .sfield input { margin: 0; }
.know-bar .segs { margin: 0; flex: none; }
.know-bar .filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; order: 9; margin: 0; }
.know-bar .filters > .input { flex: 1 1 160px; width: auto; min-width: 0; margin: 0; }
.segs.view-switch { margin: 0; flex-wrap: nowrap; }                     
.segs .seg[aria-current="page"] { cursor: default; }


ul.hits, ul.list { list-style: none; margin: 0; padding: 0; }
ul.hits > li.hit { padding: 0; border-bottom: 0; }                     
ul.hits > li.hit + li.hit > .li { border-top: 1px solid var(--line); }
ul.plain.list > li.li { padding: 12px 0; border-bottom: 0; }
.li .ico svg.ico { width: 16px; height: 16px; }
.li .b > b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.li .b > b a { color: var(--text); }
.li .b > b a:hover { color: var(--link); }
.li .b > b .badge { margin-left: 8px; vertical-align: middle; }
.li .b > p { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.li .b > p.excerpt { white-space: pre-wrap; }
.li .b > p a { color: var(--link); }
.li .b > .actions { margin-top: 6px; }
.li .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--faint); }
.li .meta .tag { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 0; border: 0; color: var(--muted); }
.pj { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.pj .dot { width: 8px; height: 8px; }
.li > .btn, .li > form { flex: none; align-self: center; margin: 0; }
.li > form > button { width: auto; margin: 0; }
.li > .btn svg.ico { width: 14px; height: 14px; }
.hit-fact .b > b { font-weight: 400; }
.hit-fact .b > b a { font-weight: 500; }
.badge.tier-word { text-transform: lowercase; }
.list .empty, .card > .empty { margin: 0; padding: 6px 0; }


ul.tl { list-style: none; }
.tl > li { padding: 0; border: 0; }
.tl > li.hit { position: relative; }
.tl > li.hit::before { content: ""; position: absolute; left: -29px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
                       background: var(--tlc, var(--faint)); }
.tl > li.hit .b > b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.tl > li.hit .b > b a { color: var(--text); }
.tl > li.hit .b > b a:hover { color: var(--link); }
.tl > li.hit .b > p { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.tl > li.hit .b > p.excerpt { white-space: pre-wrap; }
.tl > li.hit .b > .actions { margin-top: 6px; }
.tl > li.hit .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--faint); }
.tl > li.hit .meta .tag { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 0; border: 0; color: var(--muted); }


.contacts-search { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; margin: 0; }
.contacts-search .sfield { flex: 1 1 auto; min-width: 0; }
.contacts-search .sfield input { margin: 0; }
.contacts-search .btn { flex: none; margin: 0; }
.contact-panel .labels { margin: 0; }
.desk-item .b > p.excerpt { margin: 4px 0 0; }
.batch-results .b > p a, .recent-batches a { color: var(--link); }
.meeting-panel .labels { margin: 0 0 6px; }
.meeting-panel .labels .badge { vertical-align: middle; }
.meeting-panel pre.text { margin: 10px 0 0; }

/* --- A3 · ops --- */
.view-head .hero-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 64ch; }
.panel .card > h2.card-title, .panel .view-head h2.card-title, .src-head h2 { font-family: var(--sans); font-size: 15px;
       font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 4px; line-height: 1.3; }
.src-head h2 { margin: 0; }
.panel .card > .hint, .panel .view-head .hint, .panel .field .hint { margin: 0 0 12px; font-size: 13px; color: var(--muted);
       max-width: 64ch; }
.panel .view-head .hint { margin: 2px 0 0; }
.panel .field .hint { margin: 0; font-size: 12px; color: var(--faint); }
.panel > .card { margin-bottom: 0; }
.panel .card .error, .panel .card .notice { margin: 0; font-size: 13px; }
.panel .card > p:last-child { margin-bottom: 0; }


.src-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.src-grid > .card, .card.src { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; }
.src-grid > .card > * { margin: 0; }
.src-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.src-head > div { min-width: 0; }
.src-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--raise); color: var(--text); display: grid;
       place-items: center; flex: none; }
.src-ico svg.ico { width: 18px; height: 18px; }
.src-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.src-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--committed); display: inline-block;
       flex: none; }
.src-status.off i { background: var(--faint); }
.src-status.warn i { background: var(--today); }
.src-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.src-line strong { color: var(--text); font-weight: 500; }
.src-line.warn, .src-line.warn strong { color: var(--today); }
.src-foot { font-size: 12px; color: var(--faint); line-height: 1.4; }
.src-grid .pair-ask { font-size: 15px; }
.src-grid .pair-ask .pair-line { white-space: normal; overflow-wrap: anywhere; }

.src-grid > .card > .card.proton-calendar { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0;
       margin: 0; background: transparent; display: flex; flex-direction: column; gap: 10px; }
.src-grid > .card > .card.proton-calendar > * { margin: 0; }


.kvs { display: flex; flex-direction: column; margin: 0; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; min-height: 44px;
       border-top: 1px solid var(--line); font-size: 13px; }
.kvs > .kv:first-child { border-top: 0; }
.kv > span:first-child { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
       min-width: 0; }
.kv > span:first-child svg.ico { width: 16px; height: 16px; flex: none; }
.kv > span:first-child small { font-size: 12px; }
.kv > span:first-child .cal-name { color: var(--text); }
.kv .v { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.kv .v strong { font-weight: 500; }
.kv .v.links a { white-space: nowrap; }
.kv form, .kv .inline { margin: 0; flex: none; }
.kv .btn, .kv > a.btn { margin: 0; }
.kv .empty { margin: 0; }


.switch { position: relative; width: 36px; height: 20px; min-height: 20px; margin: 0; padding: 0; flex: none;
       border-radius: 999px; background: var(--raise-2); border: 1px solid var(--line); color: transparent; font-size: 0;
       line-height: 0; cursor: pointer; }
.switch::before { content: ""; position: absolute; inset: -12px -8px; }
.switch[aria-checked="true"] { background: var(--committed); border-color: var(--committed); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
       transition: transform 0.15s; }
.switch[aria-checked="true"] .knob { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.switch-form { margin: 0; }


.panel .btn.btn-outline { color: var(--text); background: var(--panel); border-color: var(--line); font-weight: 500; }
.panel .btn.btn-outline:hover { background: var(--raise); }
.panel .btn.btn-primary { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.panel .btn.btn-primary:hover { opacity: 0.9; color: var(--ink); background: var(--accent); }
.panel .btn.btn-sm { font-size: 14px; padding: 8px 12px; }
.panel .btn svg.ico { width: 16px; height: 16px; }
.panel .actions { margin-top: 0; align-items: center; }
.panel .actions > .btn, .panel .actions > button, .panel .actions > form > .btn { margin: 0; }
.panel .times-form { margin: 0; }
.panel .times-form .actions { margin-top: 12px; }


details.fold.src-fold { margin: 0; }
details.fold.src-fold > summary { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: auto;
       min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted);
       font-size: 13px; font-weight: 500; text-align: left; }
details.fold.src-fold > summary svg.ico { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
details.fold.src-fold[open] > summary { color: var(--text); border: 0; margin-bottom: 4px; }
details.fold.src-fold[open] > summary svg.ico { transform: rotate(90deg); }
details.fold.src-fold > p, details.fold.src-fold .post-times { margin: 0 0 8px; }
details.fold.src-fold .mono, details.adv .mono { white-space: normal; overflow-wrap: anywhere; }


details.adv { border: 1px solid var(--line); border-radius: 12px; background: var(--rail); margin: 0; }
details.adv > summary { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px;
       width: 100%; min-height: 44px; padding: 12px 16px; margin: 0; border: 0; border-radius: 12px; background: transparent;
       color: var(--text); font-weight: 500; font-size: 15px; text-align: left; cursor: pointer; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary svg.ico { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
details.adv[open] > summary svg.ico { transform: rotate(90deg); }
details.adv[open] > summary { color: var(--text); border: 0; border-bottom: 1px solid var(--line);
       border-radius: 12px 12px 0 0; margin-bottom: 0; }
details.adv > summary small { color: var(--faint); font-weight: 400; margin-left: auto; font-size: 12px; text-align: right; }
details.adv > .inner { padding: 12px 16px 16px; display: grid; grid-template-columns: 1fr; gap: 14px; }
details.adv .card { margin: 0; }
#advanced > .inner { grid-template-columns: 1fr; }
#advanced .card h2 { margin-top: 0; }
#advanced .card.adv-more .kv > span:first-child { color: var(--text); }
details.fold.adv.src-details > summary { padding: 10px 12px; font-size: 13px; }
details.fold.adv.src-details > .inner { padding: 10px 12px 12px; gap: 6px; }
details.fold.adv.src-details .small { margin: 0; }


.panel .segs { display: inline-flex; gap: 2px; padding: 3px; background: var(--raise); border-radius: 8px; margin: 0;
       width: auto; grid-template-columns: none; }
.panel .segs .seg { margin: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent;
       color: var(--text-2); font-size: 15px; font-weight: 500; width: auto; flex: 0 0 auto; display: inline-flex;
       align-items: center; justify-content: center; }
.panel .segs .seg.sel { color: var(--text); background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
       font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.panel .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.panel .field label { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.panel .input { margin: 0; }
.panel .card > .row2, .panel .card > .kvs, .panel .card > .actions, .panel .card > .seats-note { margin-top: 12px; }
.panel .card > .hint + .segs, .panel .card > .hint + .row2, .panel .card > .hint + .times-form, .panel .card > .hint + .kvs,
.panel .card > .hint + .table-wrap { margin-top: 0; }
.panel .card > .kvs + .seats-note { margin-top: 10px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.projects table { min-width: 560px; }
.projects .inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.projects .inline input, .projects .inline select { margin: 0; min-width: 0; }
.projects .inline > button, .projects .actions > form > button { margin: 0; width: auto; flex: none; }
.projects td > .small { display: block; margin-bottom: 4px; }
.more-list li { border-bottom: 1px solid var(--line); }
.more-list li:last-child { border-bottom: 0; }
.panel .card .more-list { margin: 0; }

/* --- Phase 3B-shell A4 ------------------------------------------------------------------------------------------------
   P1 Home: the header's Home button and the sidebar's first row (Home); Home's picture (.home-bg, its background-image
   inline on the element: this stylesheet takes no url()) fills the main pane behind the greeting, the prompt and the
   chips, under a dark scrim in BOTH themes, so the words on it are light whatever the theme; the prompt keeps its card.
   P2 the project menu: each sidebar project is a .prj (its link, then details.pmenu whose "..." summary sits over the
   link's right end and whose .pmenu-pop opens under the row, in the sidebar's own flow: nothing to clip).
   P3 select mode: #bulk-mode checked (a hidden box per page, toggled by the Select label) shows every .pick, Select all,
   "and the N more" and the bar (form#bulk-form, sticky at the bottom), and hides the docked prompt. */
.home-btn { flex: none; }
.sb-home { margin-bottom: 2px; }
.main:has(> .main-body > .home > .home-bg) { position: relative; isolation: isolate; }  /* the whole main pane */
.home-bg { position: absolute; inset: 0; z-index: -1; background-color: #09090b; background-position: center;
           background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.home-bg::after { content: ""; position: absolute; inset: 0;
                  background: linear-gradient(180deg, rgba(9, 9, 11, 0.62) 0%, rgba(9, 9, 11, 0.48) 45%, rgba(9, 9, 11, 0.74) 100%); }
.home:has(> .home-bg) .hello { color: #fafafa; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.home:has(> .home-bg) .hero-sub { color: rgba(250, 250, 250, 0.84); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.home:has(> .home-bg) .hchips .hchip { color: #fafafa; background: rgba(9, 9, 11, 0.5); border-color: rgba(250, 250, 250, 0.22);
                                       backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home:has(> .home-bg) .hchips .hchip:hover { background: rgba(9, 9, 11, 0.7); }
.home:has(> .home-bg) .composer-note, .home:has(> .home-bg) .composer-hint { color: rgba(250, 250, 250, 0.78); }
.home:has(> .home-bg) .composer-wrap.home-compose { background: transparent; }  /* the phone's dock: the picture shows through */
.bg-set { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bg-title { margin: 0; font-size: 15px; font-weight: 600; }
.bg-set .hint { margin: 0; }
.bg-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bg-thumb { display: block; width: 160px; height: 100px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.bg-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-pick { position: relative; overflow: hidden; gap: 8px; cursor: pointer; }
.bg-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0;
                              cursor: pointer; }
.bg-pick svg.ico { width: 18px; height: 18px; }
.prj { position: relative; }
.prj > .navbtn { padding-right: 40px; }
.pmenu { display: block; margin: 0; }
.pmenu > summary { list-style: none; }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu-btn { position: absolute; top: 0; right: 2px; height: var(--tap); width: 36px; color: var(--muted); border-radius: 8px; }
.pmenu[open] > .pmenu-btn { color: var(--text); background: var(--raise); }
.pmenu-pop { display: flex; flex-direction: column; gap: 10px; margin: 4px 2px 8px; padding: 10px; background: var(--raise);
             border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pm-row { margin: 0; }
.pm-rename { display: flex; gap: 8px; align-items: center; }
.pm-rename .input { flex: 1 1 auto; min-width: 0; }
.pm-rename .btn { flex: none; }
.pm-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-colors .swatch { flex: none; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%;
                     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; }
.pm-colors .swatch.sel { border-color: var(--text); }
.pm-colors .swatch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.pm-space { align-self: flex-start; }
.pm-inuse { color: var(--faint); }
.pm-delete[open] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0; }
.prj .navbtn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }  /* a long-press opens the menu, not a callout */
input.pick { display: none; flex: none; width: 20px; height: 20px; min-height: 20px; margin: 2px 10px 0 0; padding: 0;
             accent-color: var(--accent); cursor: pointer; }
.pick-all, .pick-rest-line, .bulk-bar, .bulk-select .when-on { display: none; }
.pick-head { display: none; justify-content: flex-end; margin: 0 0 6px; }
.pick-all { margin-left: auto; }
h1 .pick-all, h2 .pick-all, h3 .pick-all, h4 .pick-all { margin-left: 10px; vertical-align: middle; font-size: 13px; font-weight: 500; }
.owe-col h3 .pick-all { margin-left: 8px; }
.pick-rest-line { align-items: center; gap: 2px; margin: 8px 0 0; color: var(--muted); }
.pick-rest-line input.pick { margin-top: 0; }
.bulk-select { gap: 6px; }
.bulk-select svg.ico { width: 16px; height: 16px; }
body:has(#bulk-mode:checked) input.pick { display: inline-block; }
body:has(#bulk-mode:checked) .pick-all { display: inline-flex; }
body:has(#bulk-mode:checked) .pick-head { display: flex; }
body:has(#bulk-mode:checked) .pick-rest-line { display: flex; }
body:has(#bulk-mode:checked) .bulk-bar { display: flex; }
body:has(#bulk-mode:checked) .bulk-select .when-on { display: inline; }
body:has(#bulk-mode:checked) .bulk-select .when-off { display: none; }
body:has(#bulk-mode:checked) .bulk-select { color: var(--text); background: var(--raise); }
body:has(#bulk-mode:checked) .main > .composer-wrap { display: none; }
.bulk-bar { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 22; align-items: center; gap: 8px;
            flex-wrap: nowrap; margin: 16px auto 8px; padding: 10px 12px; width: min(100%, 760px); background: var(--panel);
            border: 1px solid var(--line-3); border-radius: 14px; box-shadow: var(--shadow); }
.bulk-count { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px;
              color: var(--muted); }
.bulk-bar .btn { padding-left: 12px; padding-right: 12px; }
.bulk-bar:has(details[open]) { flex-wrap: wrap; }  /* Cancel's second tap may take a second row */
.bulk-count.has { color: var(--text); font-weight: 600; }
.bulk-acts { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; }
.bulk-done { flex: none; }
.bulk-bar details.second-tap { display: inline-flex; }
.bulk-bar details.second-tap[open] { display: inline-flex; gap: 8px; width: auto; padding: 0; }
.bulk-bar [data-bulk-act][disabled], .bulk-bar summary[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* A4 fix 1: Owe's bar (the one with Archive, Cancel and Restore) shows what fits the picks: Restore only while a row of
   the Archived fold is picked, and Restore alone, as the main button, while nothing else is (the count keeps its words
   at 390 px); the Archived list's own bar (Restore only) is left as it is */
.bulk-bar:has(button[value="ARCHIVE"]) button[value="RESTORE"] { display: none; }
body:has(#archived input.pick:checked) .bulk-bar:has(button[value="ARCHIVE"]) button[value="RESTORE"] { display: inline-flex; }
body:has(#archived input.pick:checked):not(:has(.owe-col input.pick:checked, #old input.pick:checked, #taskings input.pick:checked))
  .bulk-bar:has(button[value="ARCHIVE"]) :is(button[value="ARCHIVE"], details.bulk-cancel) { display: none; }
body:has(#archived input.pick:checked):not(:has(.owe-col input.pick:checked, #old input.pick:checked, #taskings input.pick:checked))
  .bulk-bar:has(button[value="ARCHIVE"]) button[value="RESTORE"] { color: var(--ink); background: var(--accent);
  border-color: var(--accent); font-weight: 600; }
.prow .what input.pick, .item h3 input.pick, .commit input.pick, .sorting li input.pick, #q-held li input.pick { vertical-align: -3px; }
.li > input.pick { align-self: center; margin: 0 4px 0 0; }
.owe-top input.pick { margin-top: 2px; }
.badge.st-archived { color: var(--faint); border-color: var(--line-3); }
.dismissed-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; color: var(--muted); }
.dismissed-line form { display: inline-flex; align-items: center; gap: 6px; }
.card-lite { margin: 0 0 8px; }
/* --- Link analysis (Phase 3C-link P4: templates/link.html, static/link.js): the bar (find, the layouts, Filters, Save,
   Possible same), the filters, the stage (the canvas, the status line, the inspector), the lists under it, the toast.
   Phone first: the canvas fills the screen under the header, the filters behind a button, the inspector a bottom sheet;
   from 900 px the filters show and the inspector is a right pane (the two media blocks below). --------------------- */
.link-page { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.link-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.link-bar button, .link-bar .btn { margin-top: 0; }
.link-find { position: relative; flex: 1 1 220px; min-width: 0; }
.link-find input { width: 100%; margin: 0; }
.link-hits { position: absolute; z-index: 15; top: calc(100% + 4px); left: 0; right: 0; max-height: 50vh; overflow-y: auto;
       margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
       box-shadow: var(--shadow); }
.link-hits li { margin: 0; }
.link-hits li.empty { padding: 10px; font-size: 13px; }
.link-hits button { display: flex; width: 100%; justify-content: flex-start; gap: 8px; margin: 0; border: 0; background: transparent;
       color: var(--text); text-align: left; font-weight: 500; }
.link-hits button:hover, .link-hits button:focus { background: var(--raise); }
.link-hits .hint { color: var(--muted); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; background: var(--panel);
       border: 1px solid var(--line); border-radius: 12px; }
.link-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.link-filters select { width: auto; margin: 0; }
.link-filters input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }
.link-types { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; border: 0; }
.link-stage { position: relative; flex: 1 1 auto; min-height: 420px; overflow: hidden; background: var(--panel);
       border: 1px solid var(--line); border-radius: 12px; }
.link-canvas { position: absolute; inset: 0; touch-action: none; }
.link-status { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 5; font-size: 12px; color: var(--muted);
       pointer-events: none; }
.link-insp { position: absolute; z-index: 10; overflow-y: auto; overscroll-behavior: contain; background: var(--panel);
       border: 1px solid var(--line); box-shadow: var(--shadow); }
.link-insp .insp-close { position: absolute; top: 6px; right: 6px; margin: 0; }
.insp-body { padding: 14px 14px 18px; }
.insp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
       letter-spacing: 0.04em; text-transform: uppercase; }
.insp-name { margin: 6px 40px 6px 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.insp-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0; font-size: 14px; }
.insp-kv dt { color: var(--muted); }
.insp-kv dd { margin: 0; overflow-wrap: anywhere; }
.insp-what { font-size: 14px; }
.insp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.insp-acts button, .insp-acts .btn { margin-top: 0; }
.insp-picker { position: relative; margin-top: 10px; }
.insp-picker input { width: 100%; margin: 4px 0 0; }
.insp-picker .insp-hits { position: static; margin-top: 4px; box-shadow: none; }
.insp-merges { margin-top: 12px; font-size: 14px; }
.insp-merges .k { color: var(--muted); font-size: 12px; }
.insp-merges button { margin: 0 0 0 6px; }
.link-same .same-list { margin: 8px 0 0; }
.same-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.same-row .same-names { flex: 1 1 220px; overflow-wrap: anywhere; }
.same-acts { display: inline-flex; gap: 6px; }
.same-acts button { margin-top: 0; }
.link-hidden summary { cursor: pointer; }
.link-hidden li { display: flex; align-items: center; gap: 8px; }
.link-hidden button { margin-top: 0; }
.link-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
       display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 14px; color: var(--text);
       background: var(--raise-2); border: 1px solid var(--line-3); border-radius: 10px; box-shadow: var(--shadow); }
.link-toast button { margin-top: 0; min-height: 36px; }
.spoken-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--muted); }
.spoken-tag svg.ico { width: 12px; height: 12px; }
/* --- NX-04 · the Board (board.html, board.js): the write box, Write with a finger, New, Kept, Filed or owed today --- */
.board-write-form { margin: 0; }
.board-write-form textarea { min-height: 96px; }
.board-write-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.board-write-row .btn { min-width: 96px; margin: 0; }
.board-hint { margin: 8px 0 0; max-width: 64ch; }
.board-hint + .board-hint { margin-top: 4px; }
/* a section's lines: rule between them; each line its words (line breaks kept, a long word wrapped), then its meta and
   its buttons; a long line folds after six lines by its CSS-only checkbox, and "Show all" stays to fold it back */
.board-sec > .card-title { margin-bottom: 0; }
.board-line { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 0;
       border-top: 1px solid var(--line); }  /* relative: its hidden fold toggle stays inside #main's scroll box */
.board-sec > .card-title + .board-line { margin-top: 6px; padding-top: 6px; border-top: 0; }
.board-line:last-child { padding-bottom: 0; }
.line-text { color: var(--text); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.line-more-toggle:not(:checked) + .line-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
       line-clamp: 6; overflow: hidden; }
.line-more { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--tap); margin: 0; color: var(--link);
       font-size: 13px; cursor: pointer; }
.line-more:hover { color: var(--link-2); }
.line-more-toggle:focus-visible + .line-text + .line-more { outline: 2px solid var(--ring); outline-offset: 2px; }
.line-meta { margin: 0; }
/* the line's buttons in one wrapping row; an open fold (Owe it, Edit, Erase) takes a row of its own under them */
.line-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.line-acts > form { margin: 0; }
.line-acts > form > button, .line-acts > details > summary, .line-acts > .btn { width: auto; min-height: var(--tap); margin: 0;
       padding: 8px 14px; font-size: 14px; }
.line-acts > details { display: block; }
.line-acts > details[open] { flex: 1 1 100%; width: 100%; padding: 0; }
.line-owe-long { display: inline-flex; align-items: center; min-height: var(--tap); }
/* Owe it: Who, the due chips with their dates, a date, Project, then I owe or They owe me */
.line-owe .owe-fold { margin-top: 8px; padding: 2px 12px 12px; background: var(--raise); border: 1px solid var(--line);
       border-radius: 10px; }
.line-owe .owe-fold > label, .line-owe .owe-due > label { margin: 10px 0 4px; }
.line-owe .owe-due { margin: 12px 0 0; padding: 2px 10px 10px; }
.line-owe .owe-due > .chips { margin-top: 2px; }
.line-owe .owe-due .chip { font-size: 14px; }
.line-owe .owe-due .chip small { margin-left: 4px; }
.line-owe .owe-buttons { margin-top: 12px; }
/* Edit: the words and Save; Erase: its second tap */
.line-edit .edit-fold { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.line-edit .edit-fold textarea { min-height: 120px; }
.line-edit .edit-fold > button, .line-erase > form > button { width: auto; margin: 0; }
.line-erase[open] > form { margin-top: 8px; }
/* Filed or owed today: the plain words of where each line went */
.board-moved .board-line { gap: 4px; }
.moved-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.moved-what { color: var(--text); overflow-wrap: anywhere; }
.moved-what a { color: var(--text); font-weight: 500; }
.moved-what a:hover { color: var(--link); }
.moved-said { margin: 0; color: var(--text-2); }
.moved-said.muted { color: var(--muted); }
/* Write with a finger: a fold whose summary is the card's title row with a chevron that turns, never the two-tap pill */
details.ink-fold > summary.card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
       min-height: var(--tap); margin: 0; padding: 0; color: var(--text); border: 0; border-radius: 0; }
details.ink-fold > summary.card-title::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0;
       border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
details.ink-fold[open] > summary.card-title { margin-bottom: 8px; color: var(--text); border: 0; }
details.ink-fold[open] > summary.card-title::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.ink-form { margin: 0; }
/* the canvas: the column's width (board.js sets its height, about 40% of the viewport, at most 360 px); a finger on it
   draws and never scrolls or zooms the page, and a long press opens no callout and selects nothing; the strokes take
   its colour (the theme's text) */
.ink-canvas { display: block; width: 100%; height: 240px; margin: 4px 0 0; color: var(--text); background: var(--bg);
       border: 1px solid var(--line-3); border-radius: 10px; cursor: crosshair; touch-action: none; -webkit-touch-callout: none;
       -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.nt-busy .ink-canvas { cursor: progress; }
.ink-warn { margin: 8px 0 0; color: var(--text-2); }
.ink-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ink-acts form { margin: 0; }
.ink-acts button, .ink-acts .btn { width: auto; margin: 0; }
.ink-acts > .btn-primary { min-width: 96px; margin-left: auto; }
.ink-status { min-height: 20px; margin: 8px 0 0; color: var(--text-2); }
.ink-disclosure { margin: 6px 0 0; max-width: 64ch; }
.ink-off, .ink-wait { margin: 4px 0 0; color: var(--text-2); }
/* NX-15 a drop's page (files.html: Where each file went, then Send more files folded, then Past drops) and its one card
   in a chat (_thread.html: the .drop-pill, the .fcard.dropcard). Each file is its name, its line and, for one taken in,
   Open and Fix: under the line on a phone, beside it from 900 px (the 900 block). A file not taken in reads in the
   overdue colour, the pause line in the today colour; long names wrap instead of widening the page at 390 px. */
.drop-where .drop-counts { margin-bottom: 6px; }
.drop-files > .drop-file { flex-wrap: wrap; }
.drop-file .b b, .drop-file .b p { overflow-wrap: anywhere; }
.drop-file > .act { flex: 1 1 100%; margin: 6px 0 0; }
.drop-file.is-not_taken .b p { color: var(--overdue); }
.drop-file.is-deleted .b p { font-style: italic; }
.drop-estimate, .drop-pause { margin: 10px 0 0; }
.drop-pause { color: var(--today); }
.recent-batches li.sel > a { color: var(--text); font-weight: 600; }
.dropcard > .what { overflow-wrap: anywhere; }
.dropcard > .meta.drop-pause { margin: 8px 0 0; }
@media (max-width: 899.98px) {
  /* the drawer: fixed off the left edge, shown by #rail-toggle; the tabs strip at its top; the radios pick the aside; each
     aside scrolls on its own (its content one pixel taller than it, so iOS always scrolls it and never the page behind);
     the scrim closes it; the page behind holds still. The id selectors live only in this block (finding C3-18). */
  .drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; width: min(320px, 88vw);
         background: var(--rail); border-right: 1px solid var(--line); transform: translateX(-100%); visibility: hidden;
         transition: transform 0.2s ease, visibility 0.2s; }
  #rail-toggle:checked ~ .drawer { transform: none; visibility: visible; }
  #rail-toggle:checked ~ .scrim { display: block; }
  body:has(#rail-toggle:checked) { overflow: hidden; }
  .dtabs { display: flex; align-items: center; flex: none; gap: 6px; min-height: var(--hdr-h); padding: env(safe-area-inset-top, 0px) 10px 0;
         border-bottom: 1px solid var(--line); touch-action: none; }
  .dtabs .rail-close { margin-left: auto; }
  #drawer-menu:checked ~ .drawer label[for="drawer-menu"], #drawer-chats:checked ~ .drawer label[for="drawer-chats"] { color: var(--text);
         background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); font-weight: 600; }
  .drawer > .rail { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #drawer-menu:checked ~ .drawer > .sidebar, #drawer-chats:checked ~ .drawer > .history { display: block; }
  .drawer > .rail > .rail-in { min-height: calc(100% + 1px); }
  .drawer > .history { background: var(--rail); }
  .sidebar .sb-scroll { flex: none; overflow: visible; }
  /* the header at 390 with a Back: no room for the search icon below 400 px (Know is one tap away in the drawer) */
  @media (max-width: 399.98px) {
    .main-head:has(.back-btn) .top-search-btn { display: none; }
  }
  /* the main pane fills the viewport under the header, so the dock sits at the bottom of a short page */
  .main { min-height: calc(100vh - var(--hdr-h)); min-height: calc(100dvh - var(--hdr-h)); }
  /* Home: the hero at the top, the chips under the line, the prompt last and sticky at the bottom (the dock) */
  .home { padding-top: 12vh; }
  .home .hero { order: 0; }
  .home .hchips { order: 1; }
  .home .composer-wrap { order: 2; margin-top: auto; }
  .composer-note, .composer-hint { font-size: 11px; line-height: 1.35; }
  .composer-note { margin-top: 6px; }
  .composer-hint { margin-top: 2px; }
  .prompt-row { row-gap: 6px; }
  .prompt-row .icobtn { min-width: 36px; }
  /* the thread head on a phone: one line; Record shows its icon only (its word kept for screen readers); the names
     truncate; Mute and Status wait for the chat (A2) */
  .thread-head .act { display: none; }
  .thread-head { flex-wrap: nowrap; }
  .thread-head .rec-head { min-width: var(--tap); padding: 0 10px; }
  .thread-head .rec-head span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
         overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .thread-head .thread-title { font-size: 15px; }
  /* A2 · item: the transcript's turns take the whole width on a phone */
  .transcript .turn { font-size: 15px; }
  /* Link analysis at 390: the canvas fills the screen under the header and the bar; the filters open from their
     button; the inspector is a bottom sheet over the canvas */
  .link-page { height: calc(100vh - var(--hdr-h) - 24px); height: calc(100dvh - var(--hdr-h) - 24px); }
  .link-filters { display: none; }
  .link-filters.open { display: flex; }
  .link-stage { min-height: 260px; border-radius: 10px; }
  .link-layouts .seg { padding: 0 10px; }
  .link-insp { left: 0; right: 0; bottom: 0; max-height: 62%; border-width: 1px 0 0; border-radius: 14px 14px 0 0;
         padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* --- 900 px and up: the grid (the header over sidebar | history | main), each column scrolling on its own ---------- */
@media (min-width: 900px) {
  /* NX-08 Suggestions: the page's small buttons at laptop size */
  .suggest-acts > form > button, .src-move button, .src-acts > form > button, .src-acts > details > summary {
         min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  :root { --tap: 36px; }
  /* Link analysis from 900 px: the filters always show; the inspector is a right pane over the canvas */
  .link-page { height: calc(100vh - var(--hdr-h) - 40px); height: calc(100dvh - var(--hdr-h) - 40px); }
  .link-filters-btn { display: none; }
  .link-insp { top: 0; right: 0; bottom: 0; width: 340px; max-width: 45%; border-width: 0 0 0 1px; border-radius: 0; }
  body { font-size: 14px; }
  body.shell.has-rail { display: grid; grid-template-rows: var(--hdr-h) minmax(0, 1fr); grid-template-columns: var(--sb-w) var(--rail-w) minmax(0, 1fr);
         height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; transition: grid-template-columns 0.18s ease; --sb-w: 56px; }
  body.shell.has-rail:has(#sb-collapse:checked) { --sb-w: 248px; }  /* 900-1199: icons unless the box says otherwise */
  .has-rail .main-head { grid-column: 1 / -1; grid-row: 1; position: relative; }
  .main-head { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .main-head > .brand { margin-right: 8px; }
  .icobtn.collapse-btn, .collapse-btn { display: inline-flex; }
  .top-search { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; margin: 0; }
  .top-search .sfield { width: 100%; max-width: 440px; }
  .top-right { margin-left: 0; }
  .top-search-btn, .dtabs, .menu-btn, .rail-close, .scrim, #rail-toggle:checked ~ .scrim { display: none; }
  .pop { right: 12px; }
  /* the drawer is no box: its two asides are grid cells */
  .has-rail > .drawer { display: contents; }
  .sidebar, .history { display: flex; flex-direction: column; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
  .sidebar { grid-column: 1; container-type: inline-size; }
  .sidebar, .history { position: relative; }  /* the clipped words of the 56 px sidebar stay inside its clip */
  .history { grid-column: 2; }
  .sidebar .rail-in, .history .rail-in { flex: 1 1 auto; min-height: 0; }
  .sidebar .rail-in { padding: 10px 8px 10px; }
  .history .rail-in { padding-bottom: 0; }
  .sb-scroll { flex: 1 1 auto; overflow-y: auto; }
  .rail-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .sidebar .newchat { font-size: 14px; }
  .nav-item, .sb-foot .nav-item, .thread { font-size: 13.5px; }
  .segs .seg { font-size: 13px; padding: 0 11px; }
  .sidebar .empty.small { font-size: 12.5px; }
  /* the collapsed sidebar (56 px): the words clipped (still read by a screen reader), the icons centred, the space switch
     folded away until the sidebar is expanded; keyed on the column's own width, so it holds in both ranges */
  @container (max-width: 100px) {
    .sidebar .lbl, .sidebar .count, .sidebar .group-lbl span, .sidebar .me-words, .sidebar .empty { position: absolute; width: 1px; height: 1px;
           min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sidebar .sb-space { display: none; }
    .sidebar .pmenu { display: none; }  /* A4: the project menu waits for the full sidebar */
    .sidebar .nav-item, .sidebar .newchat { justify-content: center; padding: 8px; }
    .sidebar .group-lbl { justify-content: center; padding: 12px 0 4px; }
    .sidebar .me { flex-direction: column; gap: 6px; padding: 6px 0; }
    .sidebar .me .collapse-btn { margin: 0; }
  }
  /* NX-04 F3: from 900 px Tools and Apps come first in the sidebar's scroll, then Projects (the markup keeps Projects
     first: the phone's Menu and keyboard Tab follow it); under 820 px tall the sidebar's rows are 32 px, not 36 (--tap
     alone leaves them 33.55 px: 7 px of padding and a 17.55 px line), so every Tool and App shows without a scroll in a
     maximized laptop window (1440x765 Chrome, 1432x768 Edge, 1440x735 with a bookmarks bar) */
  .sb-scroll > .sb-sec { order: 1; }
  .sb-scroll > .sb-projects { order: 2; }
  @media (max-height: 820px) {
    .sidebar { --tap: 32px; }
    .sidebar .group-lbl { padding-top: 8px; }
    .sidebar .nav-item { padding-top: 6px; padding-bottom: 6px; }
  }
  body.rec-live .rail { opacity: 0.55; }
  /* the main pane is the scroller: the page's head strip sticks at its top, the dock at its bottom */
  .has-rail .main { grid-column: 3; grid-row: 2; min-height: 0; overflow-y: auto; }
  .main-body { padding: 20px 24px; }
  .main-body:has(> .panel) { padding: 0; }
  .page-head { top: 0; padding: 10px 24px; }
  #main > .composer-wrap { padding: 6px 16px 14px; }
  .composer-wrap.home-compose { position: static; z-index: auto; margin-top: 0; padding: 0; background: transparent; }
  .home-compose .plus-list { top: calc(100% + 8px); bottom: auto; }
  .main-body:has(> .home) { justify-content: center; }
  .home { max-width: 760px; margin: 0 auto; padding: 40px 0 56px; gap: 26px; justify-content: center; }
  .hero { gap: 22px; }
  .hchip { padding: 0 14px; }
  .hchips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .pic-line-link { display: none; }
  .pic-line-toggle { display: flex; }
  .hrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .hrow .nm { flex: 1 1 auto; min-width: 0; }
  .hrow .count { flex: none; }
  .app-tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  #tabs, .pchips, .composer .camera, .phone-only { display: none; }
  /* type and targets from 900: the prototype's sizes */
  .shell input, .shell select, .shell textarea { padding: 8px 10px; font-size: 14px; }
  .shell input[type="checkbox"], .shell input[type="radio"] { padding: 0; }
  .shell .sfield input { min-height: 36px; padding: 7px 10px 7px 32px; font-size: 14px; }
  label { font-size: 13px; }
  .btn, button { padding: 7px 12px; font-size: 13px; }
  button.big { min-height: 44px; font-size: 15px; }
  .btn-sm, .btn.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .btn-icon, .btn.btn-icon { width: 32px; min-width: 32px; min-height: 32px; }
  .act button, .act .btn, .act details > summary { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .act details.second-tap[open] form { display: flex; align-items: center; gap: 8px; }
  .act details.second-tap[open] form input[type="date"] { flex: 1 1 160px; width: auto; }
  .act details.second-tap[open] form button { width: auto; margin: 0; }
  .view-switch button { padding: 6px 12px; font-size: 13px; }
  details.fold > summary { font-size: 14px; }
  .chip { font-size: 13px; }
  .card-title, .card h4, .owe-col h3, .sect { font-size: 14px; }
  .hint, .card .hint { font-size: 12.5px; }
  .kv { font-size: 13px; padding: 7px 0; }
  .li .b p { font-size: 13px; }
  .field label { font-size: 12.5px; }
  .panel { padding: 28px 20px 28px; gap: 18px; }
  .row2 { grid-template-columns: 1fr 1fr; }
  .owe-cols { grid-template-columns: 1fr 1fr; }
  .src-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .toolbar .sfield, .toolbar .searchbox { flex: 1 1 240px; }
  details.adv > summary { font-size: 14px; }
  details.adv > .inner { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .pic { padding: 0; }
  /* the thread and the prompt from 900 */
  .msgs { gap: 22px; }
  .bubble-user { font-size: 14px; }
  .bubble-staff, .what { font-size: 14px; }
  .composer textarea, .composer input { font-size: 15px; }
  .model { height: 30px; font-size: 12.5px; }
  .scope-chip { height: 30px; font-size: 12.5px; }
  .scope-chip .icobtn { min-width: 24px; min-height: 24px; }
  .send, .composer .send { width: 34px; height: 34px; }
  .send::before { content: none; }
  .plus-item { font-size: 14px; }
  .thread-head .rec-head { padding: 6px 10px; font-size: 13px; }
  /* A2 · recpage */
  #rec-timer { font-size: 120px; }
  .rec-buttons { width: 100%; max-width: 560px; margin: 0 auto; }
  .rec-buttons .rec-btn { font-size: 15px; }
  #rec-leave { left: 50%; right: auto; bottom: 16px; width: min(520px, 92vw); padding: 14px 16px; transform: translateX(-50%);
         border: 1px solid var(--line-3); border-radius: 14px; }
  /* A2 · item: the speaker's form keeps to a readable width; the two buttons sit beside each other at their size */
  .spk-form { max-width: 520px; }
  .spk-btns button { flex: 0 0 auto; width: auto; padding: 10px 18px; }

  /* --- A3 · home --- */

  .main-body:has(> .home) { justify-content: center; min-height: 100%; }
  .home { flex: 0 0 auto; gap: 24px; padding: 40px 0 56px; }
  .home > .composer-wrap { order: 1; }
  .home > .hchips { order: 2; }
  .home .composer-wrap.home-compose { position: static; z-index: auto; margin: 0; padding: 0; background: transparent; }
  .home .composer-wrap.home-compose .plus-list { top: calc(100% + 8px); bottom: auto; }  
  .hchips .hchip { min-height: 36px; }
  #chat-text { font-size: 15px; }
  .prompt-row { gap: 4px; }
  .prompt-row .icobtn, .prompt-row .plus-menu > summary.icobtn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .prompt-row .model, .scope-chip { height: 36px; font-size: 12.5px; }
  #model-pick { font-size: 12.5px; }
  .prompt-row .send { width: 34px; height: 34px; }
  .prompt-row .send::before { inset: 0; }
  .prompt-row .plus-item.phone-only, .prompt-row .plus-item.camera { display: none; }
  .composer-wrap .composer-note { margin-top: 8px; font-size: 12px; line-height: 1.4; }
  .composer-wrap .composer-hint { margin-top: 4px; font-size: 12px; line-height: 1.4; }

  /* --- A3 · thread --- */

  .msgs { gap: 22px; }
  .turn .bubble-user { font-size: 14px; }
  .turn .bubble-staff { font-size: 14px; }
  .owe .owe-top .what { font-size: 14px; }
  .owe .owe-actions .btn, .owe .owe-actions button, .owe .owe-actions details > summary { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .owe .owe-actions details.second-tap[open] form { flex-direction: row; align-items: center; gap: 8px; }
  .owe .owe-actions details.second-tap[open] input[type="date"] { flex: 1 1 160px; width: auto; min-height: 32px; padding: 4px 8px; font-size: 14px; }
  .owe .owe-actions details.second-tap[open] .btn { flex: none; align-self: auto; }
  .prow.card-row .what { font-size: 14px; }
  .prow.card-row .act .btn, .prow.card-row .act button { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .owe-cols { grid-template-columns: 1fr 1fr; }
  .owe-col h3 { font-size: 14px; }
  .owe-col > .and-more, .owe-page .owe-fold .inner > .and-more { min-height: 36px; }
  .owe-page .sec .sect { font-size: 14px; }
  .owe-page details.fold.adv > summary, .owe-page .owe-fold > details.fold > summary { font-size: 14px; min-height: 36px; }
  .owe-page .owe-add .two-buttons button { min-height: 40px; font-size: 15px; }

  /* --- A3 · picture --- */

  .project-view .pic { gap: 18px; }
  .pic .owe-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  .view-head .hero-sub { font-size: 14px; }
  .project-view .pic-scope { font-size: 12.5px; }
  .pic .sect, .card-title { font-size: 14px; }
  .pic .card .hint { font-size: 12.5px; }
  .pic .prow .what { font-size: 14px; }
  .pic .prow .meta { font-size: 12.5px; }
  .pic .li .b b { font-size: 14px; }
  .pic .li .b b small { font-size: 13px; }
  .pic .li .b p { font-size: 13px; }
  .card.sec > .empty, .owe-col > .empty, .pic .list > .empty { font-size: 13px; }
  .btn.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .meta.stuck-group { font-size: 13px; }
  .meta.stuck-group a, .meta.stuck-lists a { min-height: 30px; }
  .meta.stuck-lists a { font-size: 12.5px; padding: 0 10px; }
  .owe-col > .and-more { min-height: 32px; font-size: 13px; }

  /* --- A3 · pages --- */

  .view-head .sub { font-size: 14px; }
  .field > .lbl { font-size: 12.5px; }
  .file-actions button.big { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .file-panel details.fold.adv > .inner { grid-template-columns: 1fr; }   
  .know-bar .searchbox { flex: 1 1 auto; }
  .know-bar .sfield { flex: 1 1 240px; }
  .know-bar .filters > .input { flex: 1 1 200px; }
  .li .b > p, .tl > li.hit .b > p { font-size: 13px; }
  .li > form > button { min-height: 36px; padding: 7px 12px; font-size: 13px; }
  .noise-links a, .pager-line a { min-height: 36px; }

  /* --- A3 · ops --- */

  .view-head .hero-sub { font-size: 14px; }
  .panel .card > h2.card-title, .panel .view-head h2.card-title, .src-head h2 { font-size: 14px; }
  .panel .card > .hint, .panel .view-head .hint { font-size: 12.5px; }
  .src-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .src-line, .src-foot { font-size: 12.5px; }
  .kv { min-height: 0; }
  .switch::before { inset: -8px -6px; }
  .panel .btn.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .panel .btn.btn-sm svg.ico { width: 14px; height: 14px; }
  details.fold.src-fold > summary { min-height: 32px; font-size: 12.5px; }
  details.adv > summary { font-size: 14px; }
  .panel .segs .seg { min-height: 36px; font-size: 13px; padding: 0 12px; }
  .row2 { grid-template-columns: 1fr 1fr; }
  .panel .field label { font-size: 12.5px; }
  .panel .input, .panel input.input[type="time"], .panel select.input { min-height: 36px; padding: 8px 10px; font-size: 14px; }
  /* NX-04 · the Board from 900 px: a centred column of about 760 px; each line's buttons at the 32 px of every row's
     actions (.act); the folds and the canvas keep the 36 px of the page's other buttons */
  .board-panel { max-width: 760px; }
  .line-text { font-size: 14px; }
  .line-acts > form > button, .line-acts > details > summary, .line-acts > .btn { min-height: 32px; padding: 5px 10px;
         font-size: 12.5px; }
  .line-more, .line-owe-long { min-height: 32px; }
  .line-owe .owe-due .chip { font-size: 13px; }
  .board-write-form textarea { min-height: 84px; }
  /* NX-15 · a drop's files from 900 px: Open and Fix beside each line */
  .drop-files > .drop-file { flex-wrap: nowrap; }
  .drop-file > .act { flex: none; align-self: center; margin: 0; }
}

/* --- 1200 px and up: the sidebar opens by default; the box folds it to 56 px --------------------------------------- */
@media (min-width: 1200px) {
  body.shell.has-rail { --sb-w: 248px; }
  body.shell.has-rail:has(#sb-collapse:checked) { --sb-w: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- dormant: the old frame's rules no element draws any more (the phone's tab bar, the Picture tab and its overlay
   controls); kept so every class name the earlier contracts named stays in this file ---------------------------------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; padding: 4px 4px env(safe-area-inset-bottom);
       background: var(--rail); border-top: 1px solid var(--line); }
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
       min-height: var(--nav-h); color: var(--muted); font-size: 12px; font-weight: 500; }
.tab:hover { color: var(--text); }
.tab.sel { color: var(--accent); }
.tab svg.ico { width: 22px; height: 22px; }
.tab-picture .main-body { display: none; }
.tab-picture #picture { display: block; }
.pic-scrim, .main-head .pic-btn, .icobtn.pic-close, .pic-line-link { display: none; }
/* A4 P2: on a screen with a pointer the project menu's "..." shows on the row's hover or focus (always on a touch screen) */
@media (hover: hover) {
  .prj .pmenu-btn { opacity: 0; transition: opacity 0.12s ease; }
  .prj:hover .pmenu-btn, .prj:focus-within .pmenu-btn, .pmenu[open] > .pmenu-btn { opacity: 1; }
}

/* NX-08 About you (knows.html): what NEXUS has learned, each with Confirm, Correct and Forget; the decision ladder; the
   never-decide list; the outbox's counts. A centred column of about 760 px, as the Board's */
.knows-panel { max-width: 760px; }
.knows-sec > .card-title { margin-bottom: 0; }
.knows-sec > .card-title + p, .knows-sec > p + .table-wrap, .knows-sec > p + ul { margin-top: 8px; }
.knows-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.knows-sec > .card-title + .knows-item { margin-top: 6px; padding-top: 6px; border-top: 0; }
.knows-item:last-child { padding-bottom: 0; }
.knows-text { color: var(--text); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.knows-when { margin: 0; }
.knows-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.knows-acts > form { margin: 0; }
.knows-acts > form > button, .knows-acts > details > summary { width: auto; min-height: var(--tap); margin: 0;
       padding: 8px 14px; font-size: 14px; }
.knows-acts > details { display: block; }
.knows-acts > details[open] { flex: 1 1 100%; width: 100%; padding: 0; }
.knows-correct .knows-fold { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.knows-correct .knows-fold textarea { min-height: 96px; }
.knows-correct .knows-fold > button, .knows-forget > form > button { width: auto; margin: 0; }
.knows-forget[open] > form { margin-top: 8px; }
.knows-offline { margin: 8px 0 0; }
.knows-ladder td { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.knows-ladder tr.never th { color: var(--text-2); }
.tag-never { color: var(--danger); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.knows-never { margin: 8px 0 0; padding-left: 20px; }
.knows-never li { margin: 4px 0; line-height: 1.5; }
.knows-box { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 0; }
.knows-box b { font-family: var(--mono); }

/* NX-08 Suggestions */
/* --- the Suggestions page (suggestions.html): the weekly read, this week, the earlier weeks, the Sources ------- */
.suggest-panel { max-width: 760px; }
.suggest-run-line { margin: 8px 0 12px; color: var(--text); }
.suggest-hint { margin: 8px 0 0; max-width: 64ch; }
.suggest-earlier-head { margin: 20px 0 8px; color: var(--muted); font-size: 13px; font-weight: 600;
       letter-spacing: 0.04em; text-transform: uppercase; }
/* a suggestion: its title, what changes, what breaks, its links, then Keep and Dismiss (or Kept or Dismissed) */
.suggest-week > .card-title { margin-bottom: 0; }
.suggest-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.suggest-week > .card-title + .suggest-item { margin-top: 6px; padding-top: 6px; border-top: 0; }
.suggest-item:last-child { padding-bottom: 0; }
.suggest-title { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35;
       overflow-wrap: anywhere; }
.suggest-part { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.suggest-label { color: var(--text); font-weight: 600; }
.suggest-links { margin: 0; overflow-wrap: anywhere; }
.suggest-links a { color: var(--link); }
.suggest-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.suggest-acts > form { margin: 0; }
.suggest-acts > form > button { width: auto; min-height: var(--tap); margin: 0; padding: 8px 14px;
       font-size: 14px; }
.suggest-item[data-status="dismissed"] .suggest-title,
.suggest-item[data-status="dismissed"] .suggest-part { color: var(--muted); }
/* the Sources: each publisher once (its name, Up and Down), its sources under it */
.src-group { padding: 12px 0; border-top: 1px solid var(--line); }
.suggest-sources > .card-title + .small + .src-group { border-top: 0; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.src-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.src-move { display: inline-flex; gap: 6px; }
.src-move form { margin: 0; }
.src-move button { width: auto; min-height: var(--tap); margin: 0; padding: 6px 12px; font-size: 13px; }
.src-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-left: 12px;
       border-left: 2px solid var(--line-3); }
.src-row[data-on="off"] .src-what { opacity: 0.6; }
.src-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.src-what a { color: var(--link); }
.src-state { margin: 0; }
.src-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.src-acts > form { margin: 0; }
.src-acts > form > button, .src-acts > details > summary { width: auto; min-height: var(--tap); margin: 0;
       padding: 6px 12px; font-size: 13px; }
.src-acts > details[open] { flex: 1 1 100%; width: 100%; padding: 0; }
.src-remove[open] > form { margin-top: 8px; }
.suggest-add { margin-top: 14px; }
.suggest-add-form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.suggest-add-form > label { margin-top: 8px; }
.suggest-add-form > button { align-self: flex-start; width: auto; margin-top: 12px; }
/* (its laptop-size rule sits in the one laptop-width block above) */

/* NX-09 Import a profile (knows.html section#import): the paste form, then the preview: the counts, each line with
   its keep box (a heading a small plain label), why a line is held or left out under it, Import and Cancel */
.knows-panel .knows-sec > .knows-done { margin: 8px 0 0; }  /* after .panel .card .notice's margin 0 */
.imp-form { margin: 8px 0 0; }
.imp-form > label:first-child { margin-top: 0; }
.imp-form textarea { min-height: 160px; }
.imp-limit { margin: 6px 0 0; }
.imp-form > button { width: auto; }
.imp-counts { margin-top: 8px; }
.imp-list { margin: 8px 0 0; padding: 0; list-style: none; }
.imp-head { margin: 14px 0 2px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
       text-transform: uppercase; overflow-wrap: anywhere; }
.imp-list > .imp-head:first-child { margin-top: 4px; }
.imp-item { padding: 6px 0; border-top: 1px solid var(--line); }
.imp-head + .imp-item { border-top: 0; }
.imp-list label.imp-line { align-items: flex-start; gap: 0; margin: 0; padding: 4px 0; color: var(--text);
       font-size: 15px; line-height: 1.5; }
.imp-line > input[type="checkbox"] { flex: 0 0 auto; margin-top: 1px; }
.imp-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.imp-item:not([data-state="ok"]) .imp-text { color: var(--muted); }
.imp-why { margin: 0 0 2px 30px; color: var(--text-2); }
.imp-item[data-state="held"] .imp-why { color: var(--danger); }
.imp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.imp-acts > .btn, .imp-acts > button { width: auto; margin: 0; }

/* NX-09 Looks like: the sorter's guesses in the bounce (_bounce.html), one pill-shaped button each that files the item
   through Accept in one tap; they wrap on a phone and sit in one line on a laptop */
.bounce .looks-like { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.looks-like h3 { margin: 0 0 6px; }
.looks-like-row { display: flex; flex-wrap: wrap; gap: 8px; }
.looks-like-row form { margin: 0; }
.looks-like-btn { width: auto; margin: 0; padding: 0 14px; border-radius: 999px; color: var(--text); background: var(--panel);
       border-color: var(--line-3); font-weight: 600; }
.looks-like-btn:hover { background: var(--raise); }
.looks-like-btn .pct { color: var(--muted); font-weight: 500; }
.looks-like .small { margin: 6px 0 0; }

/* NX-09 Watches */
/* --- the Suggestions page's Watches (suggestions.html #watches): each watch, its newest finding, Stop, the add box -- */
.suggest-watches > .card-title { margin-bottom: 0; }
.watch-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.suggest-watches > .card-title + .small + .watch-item { border-top: 0; padding-top: 8px; }
.watch-title { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35;
       overflow-wrap: anywhere; }
.watch-when, .watch-none { margin: 0; }
.watch-found { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; white-space: pre-line;
       overflow-wrap: anywhere; }
.watch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.watch-acts > form { margin: 0; }
.watch-acts > form > button { width: auto; min-height: var(--tap); margin: 0; padding: 6px 12px; font-size: 13px; }
.watch-add-form { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; padding-top: 12px;
       border-top: 1px solid var(--line); }
.watch-add-form > button { align-self: flex-start; width: auto; margin-top: 8px; }
.watch-add-form > p { margin: 4px 0 0; }
.watch-stopped { margin-top: 14px; }
.watch-old { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 8px; padding-left: 12px;
       border-left: 2px solid var(--line-3); overflow-wrap: anywhere; }
.watch-old-text { color: var(--muted); }

/* NX-11 Needs review's two tabs and its Older tab (quarantine.html, _older_row.html); the filters are .pchips,
   which the 900 px block hides, so .pchips.older-why shows them at every width; they wrap, so the chosen
   one is always in view on a phone */
.review-tabs { display: flex; margin: 0 0 12px; }
.review-tabs .seg { flex: 1 1 0; gap: 8px; }
.review-tabs .count { padding: 1px 7px; color: var(--text-2); font-size: 13px; background: var(--line-2); border-radius: 999px; }
.pchips.older-why { display: flex; flex-wrap: wrap; margin: 10px 0 0; padding: 0; overflow: visible; }
.older-row h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.older-row .older-reason { margin: 4px 0 0; color: var(--text-2); }
.older-row .older-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
       white-space: normal; overflow-wrap: anywhere; }
.older-acts { align-items: center; margin-top: 8px; }
.older-acts .older-open { min-height: var(--tap); margin: 0; }

/* NX-12 the Older tab's File under picker (_older_row.html), its pager above the rows and its Select button */
.older-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding-top: 10px;
       border-top: 1px solid var(--line); }
.older-pick .older-pick-lbl { margin: 0; color: var(--text-2); font-size: 14px; }
.older-pick select { flex: 1 1 160px; width: auto; min-width: 0; min-height: var(--tap); margin: 0; }
.older-pick button { width: auto; min-height: var(--tap); margin: 0; }
.older-pager { margin-top: 12px; }
.older-select { color: var(--text); background: var(--raise); border: 1px solid var(--line-3); font-weight: 600; }
/* NX-16 Open as (base.html): the banner at the top of the main pane while the company is inside a hire's seat, its
   words and Leave on one line when they fit; the Staff page's hire cards (staff.html) and the one-time link */
.open-as { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 10px 16px;
       color: var(--text); background: color-mix(in srgb, var(--compartmented) 18%, var(--panel));
       border-bottom: 1px solid var(--compartmented); }
.open-as-words { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.open-as form { flex: 0 0 auto; }
.staff-hire .staff-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.staff-hire .staff-acts form, .staff-hire .staff-acts details { margin: 0; }
.staff-hire .staff-acts select, .staff-hire .staff-acts input { width: auto; min-width: 0; margin: 0; }
.staff-link { display: block; margin: 6px 0 2px; font-family: var(--mono); font-size: 13px; word-break: break-all;
       -webkit-user-select: all; user-select: all; }