/* ==========================================================================
   HiCourt — THE COURT LOOK (2026-10-22). The app's signed-in pages in the
   partner's design ("hi-court-ui-design", Tre: "make our UI ... look just
   like this"): parchment pages, the obsidian frame, gold for the one call to
   action and a few marks, Instrument Serif for headings and documents, Inter
   for the interface, JetBrains Mono for references and figures only.

   The design pass (2026-10-23, Tre: "look like a million dollar tool"): the
   same palette and faces with the generator's habits taken out — no numbered
   or capitalised mono labels, no box around every fact, one primary action
   per view, white cards on parchment with one soft shadow, the matter's facts
   as a line of text, the tasks as one list under the Draft card.

   Loaded LAST by Shell::head (site.css, app.css, this), on the app only — the
   pitch site never loads it. It works by re-pointing the tokens both sheets
   already read, then restyling the frame, the matter page and the shared
   pieces. Every tone stop shows this one look (the slider is gone from the
   frame; the head script still sets data-tone, and print keeps site.css's
   ink-on-paper block because the tokens below are screen-only).

   Colours are the design's own, except where its text would fall under
   4.5:1 on parchment: its gold and amber TEXT are darker here (--gold-ink
   #80612A 5.0:1, --caution-ink #8A5C10 5.1:1 on the card surface), its
   field borders are #857F74 (3.75:1) and its stone is decoration only.
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-400italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens: one palette on every tone stop (screen only) ───────────────── */
@media screen {
  :root, html[data-tone] {
    color-scheme: light;
    /* the design's raws */
    --obsidian: #121210; --obsidian-2: #161614; --obsidian-line: #262622; --ivory: #F5F3EE; --stone: #8E8B82;
    --parchment: #FAF8F5; --card: #F3EFEA; --wash: #EFE8DC; --hairline: #E2DDD5; --ink: #161614; --ink-muted: #5E5B53;
    --gold: var(--ui-accent); --gold-deep: #9C7A3A; --gold-ink: #80612A; --gold-wash: #F5EFE5;
    --verdict: #2F6A4A; --verdict-wash: #E6EAE4; --caution-ink: #8A5C10; --breach: #8E3B2F; --breach-wash: #EFE5E1;
    /* the navy look (UI batch 1, dispatch 1753; Tre's D3, 2026-11-05: the customer app's one theme): README section 5's "Direction A
       dark" values (design/ui-mockups-2026-11-05/README.md), each mockup token --x as --ui-x. Nothing reads them yet, so no screen
       changes; later batches re-point the roles below to them. --gold is the one existing token with the same value: its alias. */
    --ui-bg: #0B1220; --ui-surface: #111A2C; --ui-frame-bg: #070D1A; --ui-text: #D5D9E2; --ui-text-muted: #9AA3B5; --ui-field-border: #5D6A84;
    --ui-accent: #C5A059; --ui-accent-text: #D4B273; --ui-primary-bg: var(--ui-accent); --ui-primary-text: #0F1B30; --ui-focus: #D9B66E;
    --ui-danger: #F0A097; --ui-danger-bg: #3A1714; --ui-success: #8FD1AE; --ui-success-bg: #11291E;
    --ui-t-xs: 12px; --ui-t-sm: 13px; --ui-t-base: 14px; --ui-t-md: 15px; --ui-t-lg: 18px; --ui-t-xl: 22px; --ui-t-2xl: 28px; --ui-t-3xl: 36px; --ui-t-4xl: 44px;
    --ui-s-1: 4px; --ui-s-2: 8px; --ui-s-3: 12px; --ui-s-4: 16px; --ui-s-5: 20px; --ui-s-6: 24px; --ui-s-8: 32px; --ui-s-10: 40px; --ui-s-12: 48px; --ui-s-16: 64px;
    --ui-r-sm: 6px; --ui-r-md: 8px; --ui-r-lg: 12px; --ui-r-full: 999px; --ui-dur: 160ms; --ui-ease: cubic-bezier(.2, .8, .2, 1);
    /* the components' own (UI batch 3, dispatch 1758): the same column's surfaces, borders and strong text, the gold wash and line of a
       pressed control, and the primary's hover */
    --ui-surface-2: #0F1728; --ui-surface-3: #16213A; --ui-border: #24324D; --ui-border-strong: #2F3F5E; --ui-text-strong: #F3F1EA;
    --ui-accent-wash: #2A2616; --ui-accent-line: #B08A45; --ui-primary-hover: #D9B66E;
    /* the product's roles, re-pointed */
    --bg: var(--parchment);
    --bg-alt: var(--card);
    --surface: #FDFCFA;
    --surface-2: var(--wash);
    --fg: #2A2925;
    --fg-strong: var(--ink);
    --muted: var(--ink-muted);
    --rule: var(--hairline);
    --rule-strong: #CFC8BD;
    --field-line: #857F74;
    --accent: var(--gold);
    --accent-ink: var(--gold-ink);
    --accent-fg: var(--obsidian);
    --accent-soft: var(--gold-wash);
    --accent-hover: #D4B273;
    --focus: var(--gold-deep);
    --mark-ink: var(--ink);
    --mark-frame: var(--gold-deep);
    /* type: Inter carries the interface (the product's rules read --font-serif for it), Instrument Serif the headings and
       documents, JetBrains Mono the labels */
    --hc-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hc-display: "Instrument Serif", "Charis SIL", Georgia, serif;
    --hc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-serif: var(--hc-sans);
    --font: var(--hc-sans);
    --mono: var(--hc-mono);
    --radius: 6px; --radius-card: 10px;
    --shadow-1: 0 1px 2px rgb(22 22 20 / .04), 0 1px 1px rgb(22 22 20 / .02);
    --shadow-2: 0 1px 2px rgb(22 22 20 / .05), 0 10px 28px -14px rgb(22 22 20 / .22);
    --frame-w: 260px;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body:has(> .tf-frame), body:has(> .tf-frame) .tf-page { font: 400 14px/1.55 var(--hc-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body:has(> .tf-frame) { padding-left: var(--frame-w); background: var(--bg); }
body:has(> .tf-frame) h1, body:has(> .tf-frame) h2 { font-family: var(--hc-display); font-weight: 400; color: var(--fg-strong); letter-spacing: -0.01em; }
body:has(> .tf-frame) h3, body:has(> .tf-frame) h4 { font-family: var(--hc-sans); font-weight: 600; letter-spacing: 0; }
body:has(> .tf-frame) code { font-family: var(--hc-mono); background: var(--bg-alt); }
.hc-eyebrow, body:has(> .tf-frame) .eyebrow { margin: 0; font: 500 12px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
body:has(> .tf-frame) .tf-page .eyebrow { display: none; }   /* beside the frame, "Firm · page" over a page's heading repeats both */
body:has(> .tf-frame) .tf-meta { font-family: var(--hc-sans); letter-spacing: 0; }
body:has(> .tf-frame) .tf-filter label { font: 500 12.5px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.hc-mono { font-family: var(--hc-mono); }
::selection { background: rgb(197 160 89 / .3); }
@keyframes hc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(197 160 89 / .55); } 50% { box-shadow: 0 0 0 5px rgb(197 160 89 / 0); } }

/* ── The frame: the mark and the firm, the call to action, the nav, the matters, the person; the matter's header band; the footer bar ──
   In Direction A's navy (UI batch 2, dispatch 1755; Tre's D1-D4, 2026-11-05): the values are README section 5's "Direction A dark"
   column and its frame and band (design/ui-mockups-2026-11-05), the shared ones batch 1's --ui-* names, the frame's own named here. */
@media screen {
  :root { --ui-frame-bg-2: #0E1628; --ui-frame-line: #1C2A44; --ui-frame-text: #C9CEDA; --ui-frame-strong: #F4F1E8; --ui-frame-muted: #8F98AB; --ui-band-bg: #0E1628; --ui-band-muted: #AEB6C6; }
  .topbar.tf-frame {
    color-scheme: dark;
    --bg: var(--ui-frame-bg); --bg-alt: var(--ui-frame-bg); --surface: var(--ui-frame-bg-2); --surface-2: var(--ui-frame-bg-2);
    --fg: var(--ui-frame-text); --fg-strong: var(--ui-frame-strong); --muted: var(--ui-frame-muted); --rule: var(--ui-frame-line); --rule-strong: var(--ui-field-border); --field-line: var(--ui-field-border);
    --accent: var(--ui-accent); --accent-ink: var(--ui-accent-text); --accent-fg: var(--ui-primary-text); --accent-soft: rgb(197 160 89 / .12); --focus: var(--ui-focus);
    --mark-ink: #ECEADE; --mark-frame: var(--ui-accent);
  }
  html[data-tone] .tf-frame .brand-mark .mk-frame { fill: url(#hc-gold); }
}
.topbar.tf-frame { width: var(--frame-w); background: var(--ui-frame-bg); border-right: 1px solid var(--ui-frame-line); font: 400 13px/1.45 var(--hc-sans); }
.tf-frame-in { gap: 0; padding: 0; }
.tf-frame-top { gap: 0; padding: 0; border-bottom: 0; }
.tf-frame-brand { gap: 12px; padding: 24px 20px 20px; border-bottom: 1px solid var(--ui-frame-line); }
.tf-frame .brand { padding: 0; min-height: 0; font-size: 28px; gap: 2px; color: var(--ui-frame-strong); text-decoration: none; }
.tf-frame .brand .brand-mark { height: 30px; width: auto; }
.tf-frame .brand .wm-court { font: 400 29px/1 var(--hc-display); letter-spacing: -0.01em; color: var(--ui-frame-strong); }
.hc-firm { align-self: flex-start; margin: 0; padding: 0 0 0 2px; font: 500 13px/1.4 var(--hc-sans); color: var(--ui-frame-strong); max-width: 100%; overflow-wrap: anywhere; }
.topbar.tf-frame nav { gap: 2px; padding: 16px 12px 0; font: 400 12.5px/1.2 var(--hc-sans); }
.topbar.tf-frame nav a { gap: 10px; min-height: 36px; padding: 0 10px; color: var(--ui-frame-text); border-radius: 6px; font-weight: 400; }
.topbar.tf-frame nav a .tf-i { width: 16px; height: 16px; color: inherit; }
.topbar.tf-frame nav a:hover { background: var(--ui-frame-bg-2); color: var(--ui-frame-strong); }
.topbar.tf-frame nav a[aria-current="page"] { background: var(--ui-frame-bg-2); color: var(--ui-frame-strong); font-weight: 400; }
.topbar.tf-frame nav a[aria-current="page"] .tf-i { color: var(--gold); }
.topbar.tf-frame nav a > span:not(.hc-running) { flex: 1 1 auto; min-width: 0; }
/* the call to action: the start page's item, a gold outline, washed on hover */
.topbar.tf-frame nav a.hc-cta { justify-content: center; gap: 8px; min-height: 42px; margin: 0 4px 14px; border: 1px solid var(--ui-accent); background: transparent; color: var(--ui-accent-text); font-size: 13px; font-weight: 500; }
.topbar.tf-frame nav a.hc-cta > span { flex: 0 0 auto; }
.topbar.tf-frame nav a.hc-cta .tf-i { color: var(--gold); }
.topbar.tf-frame nav a.hc-cta:hover, .topbar.tf-frame nav a.hc-cta[aria-current="page"]:hover { background: rgb(197 160 89 / .12); color: var(--ui-accent-text); }
.topbar.tf-frame nav a.hc-cta[aria-current="page"] { background: transparent; color: var(--ui-accent-text); }
.hc-running { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 8px 2px 6px; border-radius: 999px; background: rgb(197 160 89 / .12); font: 500 11px/1.3 var(--hc-sans); font-variant-numeric: tabular-nums; color: var(--ui-accent-text); white-space: nowrap; }
.hc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: hc-pulse 1.8s ease-in-out infinite; }
.tf-nav-k { margin: 14px 0 4px; padding: 0 10px; font: 500 11.5px/1.4 var(--hc-sans); color: var(--ui-frame-muted); }
/* "Your matters" */
.tf-frame-matters { gap: 0; padding: 22px 12px 12px; border-top: 1px solid var(--ui-frame-line); margin-top: 16px; }
.tf-frame-matters-body { gap: 8px; }
.topbar.tf-frame h2.tf-rail-h { margin: 0 0 2px; padding: 0 10px; font: 500 11.5px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--ui-frame-muted); }
.tf-frame .tf-new-matter-link { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; color: var(--ui-frame-text); font: 400 13px/1.2 var(--hc-sans); text-decoration: none; }
.tf-frame .tf-new-matter-link:hover { color: var(--ui-frame-strong); }
.tf-frame .tf-new-matter-link:hover { background: var(--ui-frame-bg-2); }
.tf-frame .tf-new-matter-link .tf-i { width: 14px; height: 14px; color: var(--gold); }
.tf-frame .tf-side-search .tf-i { left: 10px; width: 14px; height: 14px; }
.tf-frame .tf-side-search input { min-height: 36px; padding: 6px 10px 6px 32px; font: 400 12.5px/1.4 var(--hc-sans); color: var(--ui-frame-strong); background: var(--ui-frame-bg-2); border: 1px solid var(--field-line); border-radius: 6px; }
.tf-frame .tf-side-search input::placeholder { color: var(--ui-frame-muted); }
/* the search's hint stays the search's description for a screen reader; on screen the list under it is its own explanation */
.tf-frame .tf-rail-k { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tf-frame .tf-matters { gap: 2px; }
.tf-frame .tf-matter a { position: relative; flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; min-height: 40px; padding: 7px 12px; border-radius: 6px; color: var(--ui-frame-text); font: 400 12.5px/1.35 var(--hc-sans); }
.tf-frame .tf-matter a:hover { background: var(--ui-frame-bg-2); color: var(--ui-frame-strong); }
.tf-frame .tf-matter a[aria-current="page"] { background: var(--ui-frame-bg-2); color: var(--ui-frame-strong); box-shadow: none; font-weight: 400; }
.tf-frame .tf-matter a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--gold); }
.hc-mname { display: block; overflow-wrap: anywhere; }
.hc-mref { display: block; font: 400 10.5px/1.4 var(--hc-mono); color: var(--ui-frame-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-frame .tf-side-all { margin: 0; padding: 0 10px; }
.tf-frame .tf-pager-a { display: inline-flex; align-items: center; min-height: 32px; font: 500 12.5px/1.3 var(--hc-sans); color: var(--ui-frame-muted); text-decoration: none; }
.tf-frame .tf-pager-a:hover { color: var(--ui-frame-strong); }
.tf-frame .tf-side-none, .tf-frame .tf-side-pages { font: 400 12px/1.4 var(--hc-sans); }
/* the person */
.tf-frame-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--ui-frame-line); }
.tf-frame-who { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px; border-radius: 6px; color: var(--ui-frame-strong); text-decoration: none; }
.tf-frame-who:hover { background: var(--ui-frame-bg-2); }
.tf-frame-who[aria-current="page"] { background: var(--ui-frame-bg-2); }
.tf-frame .tf-avatar { width: 36px; height: 36px; flex: none; border: 1px solid rgb(197 160 89 / .4); background: var(--ui-frame-bg-2); color: var(--gold); }
.tf-frame .tf-avatar-ini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font: 400 15px/1 var(--hc-display); }
.tf-frame .tf-who-t { display: flex; flex-direction: column; min-width: 0; }
.tf-frame .tf-who-name { font: 400 13px/1.3 var(--hc-sans); color: var(--ui-frame-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-frame .tf-who-label { font: 400 12px/1.4 var(--hc-sans); color: var(--ui-frame-muted); letter-spacing: 0; text-transform: none; }
.tf-frame .btn { font: 500 12.5px/1.2 var(--hc-sans); }

/* the work strip and the foot beside the frame */
body:has(> .tf-frame) .tf-work-strip { font: 400 12.5px/1.5 var(--hc-sans); background: var(--bg-alt); border-bottom: 1px solid var(--rule); }
/* beside the frame, a strip that only counts the viewer's running tasks says what the frame's Tasks count already says */
@media (min-width: 861px) { body:has(> .tf-frame) .tf-work-strip.tf-work-routine { display: none; } }
body:has(> .tf-frame) .foot { background: transparent; border-top: 1px solid var(--rule); font: 400 11.5px/1.5 var(--hc-sans); color: var(--muted); }
body:has(> .tf-frame) .foot p { font-size: 11.5px; color: var(--muted); }
@media screen {
  body:has(> .tf-frame) .foot { padding: 12px 0 16px; background: var(--ui-frame-bg); border-top-color: var(--ui-frame-line); }
  body:has(> .tf-frame) .foot p { margin: 4px 0; max-width: none; font-size: 12px; color: var(--ui-frame-muted); }
  /* the matter's header band: the title, the facts line, the invented chip, About this matter, the tabs (About's own card stays white) */
  body:has(> .tf-frame) .tf-page:has(.hc-mhead) { padding-top: 0; }   /* the band meets the top of the window */
  body:has(> .tf-frame) .hc-mhead, body:has(> .tf-frame) .hc-tabs { background: var(--ui-band-bg); }
  body:has(> .tf-frame) .hc-mhead-main, body:has(> .tf-frame) .hc-mhead-act, body:has(> .tf-frame) .hc-tabs { --focus: var(--ui-focus); }
  body:has(> .tf-frame) .hc-mhead h1, body:has(> .tf-frame) .hc-mhead .hc-pills li.hc-fact, body:has(> .tf-frame) .hc-mhead .hc-pills li.hc-case { color: var(--ui-frame-strong); }
  body:has(> .tf-frame) .hc-mhead .hc-pills li, body:has(> .tf-frame) .hc-mhead-main > .tf-quiet { color: var(--ui-band-muted); }
  body:has(> .tf-frame) .hc-mhead .hc-pills li + li::before { background: var(--ui-field-border); }
  body:has(> .tf-frame) .hc-mhead h1 .tf-chip.tf-invented { background: transparent; border-color: var(--ui-field-border); color: var(--ui-band-muted); }
  body:has(> .tf-frame) .hc-mhead .tf-about-btn { border-color: var(--ui-field-border); background: transparent; box-shadow: none; color: var(--ui-frame-strong); }
  body:has(> .tf-frame) .hc-mhead .tf-about-btn:hover, body:has(> .tf-frame) .hc-mhead .tf-about-btn[aria-expanded="true"] { border-color: var(--ui-accent); background: rgb(197 160 89 / .12); }
  body:has(> .tf-frame) .hc-mhead .tf-about-btn .tf-i { color: var(--ui-accent); }
  body:has(> .tf-frame) .hc-tabs { border-bottom-color: var(--ui-frame-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:has(> .tf-frame) .hc-tabs a:not([aria-current]), body:has(> .tf-frame) .hc-tabs a[aria-current="page"] { color: var(--ui-frame-strong); }
  body:has(> .tf-frame) .hc-tabs a:not([aria-current])::after, body:has(> .tf-frame) .hc-tabs a[aria-current="page"]::after { background: var(--ui-accent); }
  body:has(> .tf-frame) .hc-tabs a:not([aria-current]):hover, body:has(> .tf-frame) .hc-tabs a:not([aria-current]):focus-visible { background: rgb(197 160 89 / .12); }
}
@media print { .foot .hc-trust { display: none; } }

/* ── Shared pieces ──────────────────────────────────────────────────────── */
body:has(> .tf-frame) .btn, .tf-mpage .btn:not(.btn-primary) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px;
  font: 500 12.5px/1.2 var(--hc-sans); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg-strong); text-decoration: none; }
body:has(> .tf-frame) .btn:hover, .tf-mpage .btn:not(.btn-primary):hover { border-color: rgb(22 22 20 / .35); background: #FFFFFF; color: var(--fg-strong); }
body:has(> .tf-frame) .btn .tf-i { width: 14px; height: 14px; }
body:has(> .tf-frame) .btn-primary, .tf-go .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
body:has(> .tf-frame) .btn-primary:hover, .tf-go .btn-primary:hover { background: #2B2A26; border-color: #2B2A26; color: var(--ivory); }
body:has(> .tf-frame) .btn-primary:disabled { background: var(--ink-muted); border-color: var(--ink-muted); }
.hc-btn-ink { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--ivory) !important; }
.hc-btn-ink:hover { background: #2B2A26 !important; }
.hc-btn-sm, .tf-ask-shelf .tf-drop-choose.hc-btn-sm { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg-strong); font: 500 12.5px/1.2 var(--hc-sans); cursor: pointer; }
.hc-btn-sm:hover { border-color: rgb(22 22 20 / .35); background: #FFFFFF; }
.hc-btn-sm .tf-i { width: 14px; height: 14px; }
.hc-linkbtn, .tf-ask-shelf .tf-drop-choose.hc-linkbtn { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--fg-strong); text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 3px; cursor: pointer; }
body:has(> .tf-frame) .tf-chip, body:has(> .tf-frame) .chip { font: 500 11px/1.3 var(--hc-sans); letter-spacing: 0; text-transform: none; border-radius: 999px; }
body:has(> .tf-frame) table.tf-table { font: 400 13px/1.5 var(--hc-sans); border-collapse: collapse; }
body:has(> .tf-frame) table.tf-table thead th { padding: 10px 16px; font: 500 12px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); background: var(--bg); border-bottom: 1px solid var(--rule); }
body:has(> .tf-frame) table.tf-table td { padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
body:has(> .tf-frame) .tf-tablewrap { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); overflow-x: auto; }
body:has(> .tf-frame) .tf-tablewrap table.tf-table tbody tr:last-child td { border-bottom: 0; }
body:has(> .tf-frame) .tf-table .tf-q b { font-weight: 600; color: var(--fg-strong); }
body:has(> .tf-frame) .tf-by { color: var(--muted); font-size: 11.5px; }
body:has(> .tf-frame) .tf-quiet, body:has(> .tf-frame) .tf-empty { color: var(--muted); font-size: 12.5px; }
body:has(> .tf-frame) .tf-status { color: var(--fg-strong); font: 500 13px/1.5 var(--hc-sans); }
body:has(> .tf-frame) input[type="text"], body:has(> .tf-frame) input[type="search"], body:has(> .tf-frame) input[type="email"], body:has(> .tf-frame) input[type="password"],
body:has(> .tf-frame) textarea, body:has(> .tf-frame) select { font-family: var(--hc-sans); }
body:has(> .tf-frame) .tf-head { margin: 0 0 20px; }
body:has(> .tf-frame) .tf-head h1, body:has(> .tf-frame) .tf-page > .wrap > h1 { font: 400 clamp(30px, 3.4vw, 38px)/1.1 var(--hc-display); letter-spacing: -0.01em; margin: 6px 0 8px; }
body:has(> .tf-frame) .tf-lede { font-size: 13px; color: var(--muted); max-width: 46rem; }
body:has(> .tf-frame) .tf-section > h2, body:has(> .tf-frame) .tf-section > h2:first-child { font: 400 22px/1.15 var(--hc-display); margin: 0 0 10px; }
body:has(> .tf-frame) .tf-page { padding-top: 28px; }
body:has(> .tf-frame) .wrap { max-width: 1240px; padding: 0 32px; }

/* ── The matter page: the head ──────────────────────────────────────────── */
.tf-mpage { padding: 0 0 48px; font: 400 14px/1.55 var(--hc-sans); }
body:has(> .tf-frame) .wrap.tf-mpane { max-width: none; padding: 0; }
.tf-mpage .tf-status, .tf-mpage .tf-note { margin: 16px 32px 0; }
.hc-mhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: start; padding: 32px 32px 22px; }
.hc-mhead-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hc-mhead h1 { margin: 0; font: 400 clamp(32px, 3.4vw, 44px)/1.06 var(--hc-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.hc-mhead h1 .tf-chip { vertical-align: middle; }
/* the matter's facts: one line of text, not a box each */
.hc-mhead .hc-pills { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.hc-mhead .hc-pills li { display: inline-flex; align-items: baseline; font: 400 13.5px/1.5 var(--hc-sans); color: var(--ink-muted); }
.hc-mhead .hc-pills li + li::before { content: ""; align-self: center; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: var(--rule-strong); }
.hc-mhead .hc-pills li.hc-mono { font: 400 12.5px/1.5 var(--hc-mono); letter-spacing: -0.01em; }
.hc-mhead .hc-pills .tf-i { display: none; }
/* dispatch 1472: the matter's details lead the pills; the firm's reference and the "Invented" marker stay, smaller; the details form in About */
.hc-mhead .hc-pills li.hc-fact { color: var(--ink); }
.hc-mhead .hc-pills li.hc-case { font: 400 12.5px/1.5 var(--hc-mono); letter-spacing: -0.01em; color: var(--ink); }
.hc-mhead .hc-pills li.hc-mono { font-size: 11.5px; }
.hc-mhead h1 .tf-chip.tf-invented { font-size: 10px; padding: 1px 6px; }
.tf-matter-details { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 1rem; }
.tf-matter-details h2 { font-size: 1rem; margin: 0 0 .75rem; }
.tf-details-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 16px; align-items: end; }
.tf-details-form .field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.tf-details-form input, .tf-details-form select { box-sizing: border-box; width: 100%; min-height: 36px; padding: 6px 10px; font: 400 13.5px/1.4 var(--hc-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-details-form .tf-quiet, .tf-details-form button { grid-column: 1 / -1; justify-self: start; margin: 0; }
.hc-mhead-act { display: flex; gap: 8px; padding-top: 8px; }
/* "About this matter" drawn as a button (Tre, 2026-10-23: it read as plain text): an edge at the fields' line, a white face, gold on hover
   and while open — the head's one control, at its right */
.hc-mhead .tf-about-btn { gap: 8px; min-height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-1); font: 500 13px/1.2 var(--hc-sans); color: var(--ink); white-space: nowrap; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hc-mhead .tf-about-btn:hover, .hc-mhead .tf-about-btn[aria-expanded="true"] { border-color: var(--gold-deep); background: var(--gold-wash); }
.hc-mhead .tf-about-btn .tf-i { width: 14px; height: 14px; color: var(--gold-deep); transition: transform var(--dur) var(--ease); }
.hc-mhead .tf-about-btn[aria-expanded="true"] .tf-i { transform: rotate(180deg); }
.hc-mhead .tf-about { grid-column: 1 / -1; margin: 4px 0 0; padding: 20px 24px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); font-size: 13.5px; }
.hc-mhead .tf-about h2, .hc-mhead .tf-about h3 { font: 600 12.5px/1.4 var(--hc-sans); margin: 14px 0 4px; }
.hc-mhead .tf-facts { font-size: 13.5px; }
.hc-meter { height: 4px; overflow: hidden; border-radius: 999px; background: var(--rule); }
.hc-meter > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold); transition: width .4s ease; }
/* the tabs */
.hc-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 0 22px; border-bottom: 1px solid var(--rule); background: rgb(250 248 245 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hc-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 13px 10px 14px; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-muted); font: 500 13.5px/1.3 var(--hc-sans); text-decoration: none;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* the tabs that open another page read as links (Tre, 2026-10-23): full ink, an arrow, a gold-washed face and a gold underline on hover */
.hc-tabs a:not([aria-current]) { color: var(--ink); }
.hc-tabs a:not([aria-current])::after { content: ""; width: 14px; height: 14px; flex: none; background: var(--gold-deep); transition: transform var(--dur) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-tabs a:not([aria-current]):hover, .hc-tabs a:not([aria-current]):focus-visible { background: var(--gold-wash); box-shadow: inset 0 -2px 0 var(--gold); }
.hc-tabs a:not([aria-current]):hover::after { transform: translateX(2px); }
.hc-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.hc-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--ink); }
.hc-tab-k { display: none; }   /* the tabs' numbers: decoration that read as labels */

/* the matter page's other states (no matter yet, a new matter) keep the page's gutter */
.tf-mpane > :not(.hc-mhead):not(.hc-tabs):not(.tf-ask-shelf):not(.tf-fold):not(.tf-status):not(.tf-note):not(script):not(#drop) { margin-left: 32px; margin-right: 32px; }
.tf-mpane > .tf-mhead:not(.hc-mhead) { padding-top: 28px; }
.tf-mpane > .tf-matter-intro { padding-top: 28px; }
.tf-matter-intro h1 { font: 400 clamp(30px, 3.2vw, 38px)/1.12 var(--hc-display); margin: 6px 0 8px; }
.tf-matter-intro p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.tf-mpane > .tf-matter-create { width: auto; max-width: 760px; box-sizing: border-box; }

/* ── The bench: the vault beside the shelf; a picked task takes the width ── */
.tf-ask-shelf { margin: 0; }
.hc-bench { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; padding: 28px 32px 0; }
.hc-bench:has(#task-screen:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.hc-bench:has(#task-screen:not([hidden])) .hc-vault { display: none; }
.hc-launch { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

/* the vault: one white card; its groups are sections of it, its files rows with their kind as a tile */
.hc-vault { container-type: inline-size; min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); }
.hc-vault[data-over="1"] { outline: 2px dashed var(--gold-deep); outline-offset: 4px; }
.hc-vault-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 20px 20px 16px; }
.hc-vault-head h2 { grid-column: 1; margin: 0; font: 400 26px/1.05 var(--hc-display); letter-spacing: -0.01em; color: var(--ink); }
.hc-vault-sub { line-height: 1.4; min-height: 2.8em; grid-column: 1; margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hc-vault-row { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; }
.hc-vault .hc-ok, .hc-vault > .hc-meter { display: none; }   /* the groups below give the same counts */
.hc-vault-body { display: flex; flex-direction: column; gap: 0; padding: 0 0 16px; }
.hc-vault-list { display: flex; flex-direction: column; gap: 0; }
.hc-vault-list:empty { display: block; }
.hc-group { border-top: 1px solid var(--rule); }
.hc-group > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 20px; cursor: pointer; list-style: none; }
.hc-group > summary:hover .hc-group-t { color: var(--ink); }
.hc-group > summary::-webkit-details-marker { display: none; }
.hc-group > summary::after { content: ""; width: 6px; height: 6px; margin: 0 2px 3px auto; border: solid var(--ink-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s ease; }
.hc-group:not([open]) > summary::after { transform: rotate(-45deg); margin-bottom: 0; }
.hc-group-n { display: none; }   /* the groups' numbers: decoration */
.hc-group-t { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--hc-sans); letter-spacing: .01em; color: var(--ink-muted); }
.hc-group-c { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--bg-alt); font: 600 11px/1 var(--hc-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hc-group-problem .hc-group-t { color: var(--breach); }
.hc-group-problem .hc-group-c { background: var(--breach-wash); color: var(--breach); }
.hc-group ul { margin: 0; padding: 0 0 8px; list-style: none; }
.hc-group li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center; min-height: 34px; padding: 6px 20px; }
.hc-group li:hover { background: var(--bg); }
.hc-group li > .hc-kind, .hc-group li > .tf-i { grid-row: 1 / span 3; align-self: start; }
.hc-kind { display: grid; place-items: center; width: 28px; height: 32px; box-sizing: border-box; border-radius: 4px; font: 650 8px/1 var(--hc-sans); letter-spacing: .03em;
  background: #ECE9E3; color: var(--ink-muted); }
.hc-kind-pdf { background: #F3E6E2; color: var(--breach); }
.hc-kind-doc { background: #E4EAF2; color: #2D5486; }
.hc-kind-sheet { background: #E2ECE5; color: var(--verdict); }
.hc-kind-mail { background: #ECE6F0; color: #634882; }
.hc-kind-img { background: #F3ECDD; color: var(--caution-ink); }
.hc-group li > .tf-i { box-sizing: border-box; width: 28px; height: 32px; padding: 7px 6px; border-radius: 4px; background: var(--breach-wash); color: var(--breach); }
.hc-file-n { grid-column: 2; font: 500 13px/1.4 var(--hc-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-file-f { grid-column: 2; font: 400 12px/1.4 var(--hc-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hc-file-f::first-letter { text-transform: uppercase; }
.hc-group li[data-state="reading"] .hc-file-f, .hc-group li[data-state="uploading"] .hc-file-f { color: var(--caution-ink); }
.hc-file-w { grid-column: 2; font: 400 12px/1.45 var(--hc-sans); color: var(--caution-ink); text-wrap: pretty; }
.hc-file-p { grid-column: 2; font: 400 12px/1.45 var(--hc-sans); color: var(--breach); text-wrap: pretty; }
/* dispatch 1454: the Vault's category chips (a filter) and each ready file's category pill (one click changes it) */
.hc-sort-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.hc-sort { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.hc-sort-chip, .hc-sort-pill { min-height: 26px; padding: 2px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font: 500 12px/1.3 var(--hc-sans); cursor: pointer; }
.hc-sort-pill { min-height: 22px; padding: 1px 8px; font-size: 11.5px; }
a.hc-sort-pill { display: inline-flex; align-items: center; text-decoration: none; }   /* dispatch 1470: the Vault's editor links, drawn as its pills */
.hc-sort-chip:hover, .hc-sort-pill:hover, .hc-sort-chip[aria-pressed="true"], .hc-sort-pill[aria-expanded="true"] { border-color: var(--gold-deep); background: var(--gold-wash); color: var(--ink); }
.hc-sort-menu { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
/* dispatch 1472: the Vault's removal picks (never the task's ticks), the bar over the list, and its one confirmation */
.hc-group li.hc-pickable { grid-template-columns: 20px 28px minmax(0, 1fr); }
.hc-group li.hc-pickable > * { grid-column: 3; }
.hc-group li.hc-pickable > .hc-pick { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.hc-group li.hc-pickable > .hc-kind, .hc-group li.hc-pickable > .tf-i { grid-column: 2; }
.hc-pick, .hc-pick-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; font: 500 12.5px/1.3 var(--hc-sans); color: var(--ink-muted); cursor: pointer; }
.hc-pick input, .hc-pick-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--gold-deep); }
.hc-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 20px 12px; }
.hc-pick-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--breach); border-radius: var(--radius); background: var(--breach-wash); }
.hc-pick-confirm p, .hc-pick-note { flex-basis: 100%; margin: 0; font: 400 12.5px/1.45 var(--hc-sans); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }
.hc-pick-yes { border-color: var(--breach); color: var(--breach); }
.hc-vault-empty { margin: 0; padding: 0 20px 4px; font-size: 13px; color: var(--ink-muted); }
.hc-vault-empty[hidden], .hc-vault-body > .hc-vault-empty { display: none; }
.hc-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 20px 0; padding: 20px 16px; border: 1px dashed rgb(22 22 20 / .22); border-radius: var(--radius); background: var(--bg); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.hc-vault[data-over="1"] .hc-dropzone, .hc-dropzone:hover { border-color: var(--gold-deep); background: var(--gold-wash); }
.hc-dropzone .tf-i { width: 18px; height: 18px; color: var(--ink-muted); }
.hc-dropzone p { margin: 0; max-width: 22rem; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.hc-dropzone .hc-drop-note { font-size: 11.5px; }

/* the shelf: the heading, Draft as the one dark card across the column, the other tasks as one list under it */
.hc-launch .tf-shelf { margin: 0; }
.hc-launch .tf-shelf-top { align-items: center; gap: 12px 20px; }
.hc-shelf-h { display: flex; flex-direction: column; gap: 4px; }
.hc-shelf-h .hc-eyebrow { display: none; }   /* the heading says it */
.hc-launch .tf-shelf-top h2 { margin: 0; font: 400 28px/1.05 var(--hc-display); letter-spacing: -0.01em; color: var(--ink); }
.hc-launch .tf-find { flex: 0 1 240px; }
.hc-launch .tf-find .tf-i { left: 11px; width: 14px; height: 14px; color: var(--ink-muted); }
.hc-launch .tf-find input { min-height: 36px; padding: 6px 12px 6px 32px; font: 400 13px/1.4 var(--hc-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.hc-launch .tf-find input:focus { border-color: var(--gold-deep); }
.hc-shelf { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
.hc-engines { display: flex; flex-direction: column; gap: 0; }
.hc-engines > li { display: flex; }
.hc-engines > li.hc-hero-li { margin-bottom: 16px; }
.tf-card.hc-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; width: 100%; padding: 16px 20px; border: 1px solid var(--rule); border-top-width: 0; border-radius: 0;
  background: var(--surface); color: var(--ink); text-align: left; transition: background-color .15s ease; }
.hc-hero-li + li > .tf-card.hc-card { border-top-width: 1px; border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
.hc-engines > li:last-child > .tf-card.hc-card:not(.hc-hero) { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.tf-card.hc-card:not(.hc-hero):hover { background: #FFFFFF; }
.hc-card-top { display: flex; align-items: center; gap: 8px; }
.hc-card .tf-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--bg-alt); color: var(--gold-deep); }
.hc-card .tf-ico .tf-i, .hc-card .tf-ico svg { width: 18px; height: 18px; }
.hc-card:not(.hc-hero) .hc-tag, .hc-num { display: none; }   /* a card's group and numeral: the list says it without them */
.hc-card .tf-card-x { min-width: 0; gap: 0; }
.hc-card .tf-card-t { font: 400 20px/1.2 var(--hc-display); color: var(--ink); text-wrap: balance; }
.hc-card .tf-card-l { margin-top: 2px; font: 400 13px/1.5 var(--hc-sans); color: var(--ink-muted); }
.hc-card .tf-card-l + .tf-card-l { margin-top: 6px; }
.hc-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 13px/1.2 var(--hc-sans); color: var(--ink); transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.hc-go .tf-i { width: 16px; height: 16px; }
/* a listed task's "Open" is its arrow: the whole row is the button */
.hc-card:not(.hc-hero) .hc-go { width: 32px; height: 32px; border-radius: 50%; font-size: 0; color: var(--ink-muted); }
.tf-card.hc-card:not(.hc-hero):hover .hc-go { background: var(--gold-wash); color: var(--gold-deep); transform: translateX(2px); }
/* Draft: the dark card */
.tf-card.hc-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 28px 24px; border: 1px solid #2E2A22; border-radius: var(--radius-card);
  background: radial-gradient(120% 140% at 100% 0%, rgb(197 160 89 / .16), rgb(197 160 89 / 0) 55%), var(--obsidian-2); color: var(--ivory); box-shadow: var(--shadow-2); }
.tf-card.hc-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgb(197 160 89 / 0), var(--gold) 30%, var(--gold) 70%, rgb(197 160 89 / 0)); }
.tf-card.hc-hero:hover { background: radial-gradient(120% 140% at 100% 0%, rgb(197 160 89 / .2), rgb(197 160 89 / 0) 55%), var(--obsidian); }
.hc-hero .hc-card-top { gap: 10px; }
.hc-hero .tf-ico { width: 32px; height: 32px; border: 1px solid rgb(197 160 89 / .35); border-radius: 50%; background: #1F1C15; color: var(--gold); }
.hc-hero .tf-ico .tf-i, .hc-hero .tf-ico svg { width: 15px; height: 15px; }
.hc-hero .hc-tag { font: 500 12.5px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--gold); }
.hc-hero .tf-card-x { margin-top: 18px; max-width: 34rem; }
.hc-hero .tf-card-t { font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ivory); }
.hc-hero .tf-card-l { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #C9C6BE; }
.hc-hero .tf-card-l.hc-hero-l { margin-top: 8px; font-size: 13px; color: var(--stone); }
.hc-hero .hc-go { margin-top: 22px; min-height: 42px; padding: 0 18px 0 20px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--gold); color: var(--obsidian); box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset; }
.tf-card.hc-hero:hover .hc-go { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--obsidian); }
.tf-card.hc-hero:hover .hc-go .tf-i { transform: translateX(2px); }
/* More tasks: the same list, two to a row */
.hc-tier-more .tf-shelf-gh { margin: 0 0 10px; font: 600 12px/1.4 var(--hc-sans); letter-spacing: .01em; color: var(--ink-muted); }
.hc-tier-more .hc-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); }
.hc-tier-more .hc-pills > li { display: flex; border-top: 1px solid var(--rule); }
.hc-tier-more .hc-pills > li:nth-child(-n+2) { border-top: 0; }
.hc-tier-more .hc-pills > li:nth-child(odd) { border-right: 1px solid var(--rule); }
.tf-card.hc-pill { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; border-radius: 0; background: none; color: var(--ink); text-align: left; transition: background-color .15s ease; }
.tf-card.hc-pill::after { content: ""; flex: none; width: 14px; height: 14px; margin-left: auto; background: var(--rule-strong); transition: transform .15s ease, background-color .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.tf-card.hc-pill:hover { background: #FFFFFF; }
.tf-card.hc-pill:hover::after { background: var(--gold-deep); transform: translateX(2px); }
.hc-pill .tf-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--bg-alt); color: var(--gold-deep); }
.hc-pill .tf-ico svg { width: 14px; height: 14px; }
.hc-pill .tf-card-x { min-width: 0; gap: 0; }
.hc-pill .tf-card-t { font: 500 13px/1.35 var(--hc-sans); color: var(--ink); }
.hc-pill .tf-card-l { font-size: 11.5px; color: var(--ink-muted); }
.hc-launch .tf-task-none { margin: 0; font-size: 13px; }

/* the rails fold under the bench */
.tf-mpage > .wrap > .tf-fold, .tf-mpage .tf-mpane > .tf-fold, .tf-mpage .tf-mpane > details { margin: 24px 32px 0; }

/* ── The task's screen, in the same type ───────────────────────────────── */
.hc-launch .tf-taskscreen { margin: 0; }
.tf-task-title h2 { font: 400 28px/1.1 var(--hc-display); color: var(--ink); }
.tf-task-title .tf-ico { width: 36px; height: 36px; border: 1px solid var(--gold); background: var(--obsidian-2); color: var(--gold); border-radius: 50%; }
.tf-back { min-height: 34px; font: 400 12.5px/1.2 var(--hc-sans); color: var(--ink-muted); }
.tf-back:hover { color: var(--ink); }
.tf-task-line { font-size: 13px; }
.tf-task-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; margin-top: 20px; }
.tf-task-main { max-width: 720px; }
.tf-ask-shelf .field { margin: 0 0 20px; }
.tf-ask-shelf .field > label, .tf-ask-shelf .tf-field label { font: 500 12.5px/1.4 var(--hc-sans); color: var(--ink); }
.tf-ask-shelf .opt { font-weight: 400; color: var(--ink-muted); }
.tf-ask-shelf .field input[type="text"], .tf-ask-shelf .field textarea, .tf-ask-shelf .field select { min-height: 40px; padding: 8px 12px; font: 400 13.5px/1.5 var(--hc-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-ask-shelf .field textarea { min-height: 10em; }
.tf-ask-shelf .tf-count { font-size: 11px; font-family: var(--hc-mono); }
.tf-files-h h3 { font: 500 12.5px/1.4 var(--hc-sans); color: var(--ink); }
.tf-ask-shelf .tf-drop-choose { min-height: 34px; padding: 0 12px; font: 500 12.5px/1.2 var(--hc-sans); border-color: var(--rule); background: var(--bg-alt); color: var(--ink); }
.tf-ask-shelf .tf-drop-choose:hover { border-color: rgb(22 22 20 / .3); background: var(--wash); }
.tf-ask-shelf .tf-drop-files { border-color: var(--rule); background: var(--bg); }
.tf-ask-shelf .tf-drop-files li { min-height: 44px; padding: 4px 12px; border-top-color: rgb(226 221 213 / .7); }
.tf-ask-shelf .tf-drop-files li b { font: 400 11.5px/1.4 var(--hc-mono); color: var(--ink); }
.tf-ask-shelf .tf-drop-files li .tf-drop-state { font: 400 11px/1.4 var(--hc-mono); color: var(--ink-muted); }
.tf-ask-shelf .tf-drop-files li[data-state="reading"] .tf-drop-state, .tf-ask-shelf .tf-drop-files li[data-state="uploading"] .tf-drop-state { color: var(--caution-ink); }
.tf-ask-shelf .tf-drop-files li .tf-drop-btn { min-height: 30px; padding: 0 10px; font: 500 11.5px/1.2 var(--hc-sans); border-color: var(--rule); background: var(--bg-alt); color: var(--ink); }
.tf-ask-shelf .tf-drop-files li .tf-drop-problem { border-left-color: var(--breach); background: var(--breach-wash); color: var(--breach); font: 400 12px/1.5 var(--hc-sans); }
.tf-drop-row input, .tf-ask-shelf .tf-drop-files li .tf-drop-tick { width: 16px; height: 16px; accent-color: var(--ink); }
.tf-ask-shelf .tf-drop-hint, .tf-files-rule { font-size: 12px; }
.tf-file-choice { border-color: var(--rule); background: var(--bg); }
.tf-file-choice b { font: 500 12.5px/1.35 var(--hc-sans); color: var(--ink); }
.tf-file-choice small { font-size: 11.5px; }
.tf-file-choice input { accent-color: var(--ink); }
.tf-file-choice:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.tf-more { border-color: var(--rule); }
.tf-more > summary { min-height: 44px; font: 500 12.5px/1.3 var(--hc-sans); color: var(--ink); }
.tf-go-panel { top: 64px; padding: 20px; border: 1px solid var(--rule); background: var(--bg-alt); font-size: 13px; }
.tf-restate p { font-size: 13px; color: var(--fg); }
.tf-restate .tf-task-out, .tf-task-expectation { font-size: 11.5px; color: var(--muted); }
.tf-go .btn-primary { min-height: 42px; font: 500 13px/1.2 var(--hc-sans); }
.tf-go-note { font-size: 11.5px; }
.tf-launch-outcome { border-left-color: var(--gold); background: var(--gold-wash); font: 400 12.5px/1.5 var(--hc-sans); }
.tf-launching-card { background: var(--bg); border-color: var(--rule); }
.tf-launching-card h2 { font: 400 26px/1.15 var(--hc-display); }

/* ── Sign in and the other pages without the frame: the obsidian bar, the serif heading ── */
body:not(:has(> .tf-frame)) { font-family: var(--hc-sans); }
body:not(:has(> .tf-frame)) > .topbar { background: var(--obsidian); border-bottom: 1px solid var(--obsidian-line); box-shadow: none;
  --mark-ink: #ECEADE; --mark-frame: var(--gold); color-scheme: dark; }
body:not(:has(> .tf-frame)) > .topbar .brand { color: var(--ivory); }
body:not(:has(> .tf-frame)) > .topbar .brand .wm-court { font: 400 26px/1 var(--hc-display); color: var(--ivory); }
html[data-tone] body:not(:has(> .tf-frame)) > .topbar .brand-mark .mk-frame { fill: url(#hc-gold); }
.tf-login h1 { font: 400 clamp(34px, 4vw, 44px)/1.1 var(--hc-display); letter-spacing: -0.01em; }
.tf-login .eyebrow { font: 400 10.5px/1.4 var(--hc-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.tf-login .field input { font-family: var(--hc-sans); border-color: var(--field-line); background: var(--surface); }
.tf-login .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.tf-login .btn-primary:hover { background: #2B2A26; border-color: #2B2A26; color: var(--ivory); }
body:not(:has(> .tf-frame)) .foot { background: transparent; border-top: 1px solid var(--rule); font-size: 12px; }

/* ── The run page: one band for the head and the status — obsidian while the task waits or works, its steps inside it with the
   gold bar along its foot; a finished Draft's document set as a page of paper ── */
.hc-runband { position: relative; margin: 0 0 20px; }
.hc-runband .tf-head { margin: 0 0 8px; }
.hc-runband[data-state="working"], .hc-runband[data-state="waiting"] { padding: 22px 24px 0; border: 1px solid var(--obsidian-line); border-radius: var(--radius); background: var(--obsidian); color: var(--ivory); overflow: hidden;
  --fg: #B3B1AB; --fg-strong: var(--ivory); --muted: var(--stone); --rule: var(--obsidian-line); --focus: var(--gold); }
.hc-runband[data-state="working"] .eyebrow, .hc-runband[data-state="waiting"] .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.hc-runband[data-state="working"] .eyebrow::before, .hc-runband[data-state="waiting"] .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: hc-pulse 1.8s ease-in-out infinite; }
.hc-runband[data-state="waiting"] .eyebrow::before { animation: none; background: transparent; border: 1.5px solid var(--gold); }
.hc-runband[data-state="working"] h1, .hc-runband[data-state="waiting"] h1 { color: var(--ivory); font-size: clamp(26px, 2.8vw, 32px); }
.hc-runband[data-state="working"] .tf-meta, .hc-runband[data-state="waiting"] .tf-meta { color: var(--stone); font-size: 12.5px; }
.hc-runband[data-state="working"] #run-status, .hc-runband[data-state="waiting"] #run-status { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--ivory); font: 400 13.5px/1.5 var(--hc-sans); }
.hc-runband[data-state="working"] #run-status::before, .hc-runband[data-state="waiting"] #run-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: hc-pulse 1.8s ease-in-out infinite; }
.hc-runband[data-state="waiting"] #run-status::before { animation: none; background: transparent; border: 1.5px solid var(--gold); }
.hc-runband .tf-tl-block { max-width: none; margin: 0; }
.hc-runband[data-state="working"] .tf-tl-block, .hc-runband[data-state="waiting"] .tf-tl-block { margin: 0 -24px; padding: 0 24px; }
.hc-runband .tf-tl-line { margin: 0 0 10px; font: 500 13px/1.5 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--gold); }
.hc-runband .tf-tl-body { display: flex; flex-direction: column; }
.hc-runband .tf-tl-h { font: 500 12.5px/1.4 var(--hc-sans); color: var(--fg-strong); }
.hc-runband .tf-tl-list { order: 1; margin: 0 0 20px; padding: 8px; list-style: none; border: 1px solid var(--obsidian-line); border-radius: var(--radius); background: #191917; counter-reset: hc-step; }
.hc-runband .tf-tl { order: 2; height: 4px; gap: 0; margin: 0 -24px; background: var(--obsidian-line); }
.hc-runband .tf-tl-seg { flex: 1 1 0; height: 100%; border: 0; border-radius: 0; background: transparent; }
.hc-runband .tf-tl-done { background: var(--gold); }
.hc-runband .tf-tl-now { background: linear-gradient(90deg, var(--gold), rgb(197 160 89 / .35)); }
.hc-runband .tf-tl-stopped { background: var(--breach); }
.hc-runband .tf-tl-li { position: relative; display: block; margin: 0; padding: 9px 12px 9px 44px; border-radius: var(--radius); font: 400 12.5px/1.45 var(--hc-sans); color: #B3B1AB; counter-increment: hc-step; }
.hc-runband .tf-tl-li::before { content: ""; position: absolute; left: 12px; top: 8px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; }
.hc-runband .tf-tl-li::after { content: "Step " counter(hc-step); display: block; font: 400 11.5px/1.4 var(--hc-sans); letter-spacing: 0; color: var(--stone); }
.hc-runband .tf-tl-li-done::before { background: var(--ivory) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121210' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.hc-runband .tf-tl-li-now { border: 1px solid rgb(197 160 89 / .6); background: #1F1C15; color: var(--ivory); }
.hc-runband .tf-tl-li-now::before { border: 2px solid var(--gold); border-top-color: transparent; animation: hc-spin 1s linear infinite; }
.hc-runband .tf-tl-li-later { color: var(--stone); }
.hc-runband .tf-tl-li-later::before { border: 1.5px dashed var(--stone); }
.hc-runband .tf-tl-li-stopped::before { background: var(--breach); }
@keyframes hc-spin { to { transform: rotate(360deg); } }
/* a finished or stopped task: the head on the page, the status as a mark, the steps folded */
.hc-runband[data-state="finished"] #run-status { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 14px; padding: 3px 10px 3px 8px; border: 0; border-radius: 999px; background: var(--verdict-wash);
  font: 500 12px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--verdict); }
.hc-runband[data-state="finished"] #run-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verdict); }
.hc-runband[data-state="finished"] #run-status::first-letter { text-transform: uppercase; }
.hc-runband[data-state="finished"] #run-status:empty { display: none; }
.hc-runband[data-state="finished"] h1, .hc-runband[data-state="stopped"] h1 { font-size: clamp(28px, 3vw, 36px); }
.hc-runband .tf-meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.hc-runband .tf-tl-fold { max-width: 780px; margin: 4px 0 0; }
.hc-runband .tf-tl-fold .tf-tl { margin: 8px 0; height: 4px; gap: 2px; }
.hc-runband .tf-tl-fold .tf-tl-list { margin: 0 0 8px; background: var(--bg-alt); border-color: var(--rule); }
.hc-runband .tf-tl-fold .tf-tl-li { color: var(--fg); }
.hc-runband .tf-tl-fold .tf-tl-li::after { color: var(--ink-muted); }
.hc-runband .tf-tl-fold .tf-tl-li-done::before { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F3EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
body:has(> .tf-frame) .tf-fold { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
body:has(> .tf-frame) .tf-fold > summary { font: 500 12.5px/1.4 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* the lines, the short line, the about fold */
body:has(> .tf-frame) .tf-end { border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-alt); font-size: 13px; }
body:has(> .tf-frame) .tf-end .tf-end-h { font: 400 20px/1.2 var(--hc-display); color: var(--ink); }
/* U01: a loud line in the body's own 14 px Inter, ink on the card, the court look's alert token (--breach, as row 117's problem lines) as its rule */
body:has(> .tf-frame) .tf-end ul.tf-end-loud > li, body:has(> .tf-frame) .tf-end li.tf-end-loud { border-left-color: var(--breach); font: 400 14px/1.5 var(--hc-sans); color: var(--ink); }
body:has(> .tf-frame) .tf-know { border: 1px solid rgb(197 160 89 / .5); border-left: 3px solid var(--gold); background: var(--gold-wash); font-size: 13px; color: var(--ink); }
body:has(> .tf-frame) .tf-prose { font-size: 14px; }
/* the document: a page of paper */
body:has(> .tf-frame) .tf-run-doc { max-width: 780px; margin: 8px 0 20px; padding: 56px 64px; border: 1px solid var(--rule); border-radius: 4px; background: #FFFFFF;
  box-shadow: 0 1px 0 var(--rule), 0 12px 32px -18px rgb(22 22 20 / .25); }
body:has(> .tf-frame) .tf-run-doc .tf-doc-body p { margin: 0 0 14px; font: 400 16.5px/1.85 var(--hc-display); color: var(--ink); }   /* no first-line indent: a Draft's caption and signature lines are paragraphs too */
body:has(> .tf-frame) .tf-run-doc .tf-doc-h { margin: 28px 0 10px; font: 400 19px/1.3 var(--hc-display); letter-spacing: 0; color: var(--ink); }
body:has(> .tf-frame) .tf-run-doc .tf-doc-body > .tf-doc-h:first-child { margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid rgb(22 22 20 / .8); text-align: center; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
body:has(> .tf-frame) #run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* ── Narrower windows ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hc-bench { grid-template-columns: minmax(0, 1fr); }
  .hc-bench > .hc-launch { order: -1; }   /* one column: what to do first, the files after it */
  .tf-task-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body:has(> .tf-frame) { padding-left: 0; }
  .topbar.tf-frame, .topbar.tf-frame[data-rail] { width: auto; border-right: 0; border-bottom: 1px solid var(--ui-frame-line); }
  .tf-frame-brand { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .tf-frame .brand { font-size: 22px; }
  .tf-frame .brand .brand-mark { height: 24px; }
  .tf-frame .brand .wm-court { font-size: 23px; }
  .topbar.tf-frame nav { padding: 10px 12px 0; gap: 4px; }
  .topbar.tf-frame nav a.hc-cta { margin: 0 6px 0 0; min-height: 36px; padding: 0 12px; }
  .tf-frame-matters { padding: 10px 12px; }
  .tf-switch { min-height: 48px; padding: 6px 12px; border-color: var(--field-line); background: var(--ui-frame-bg-2); color: var(--ui-frame-strong); font: 400 13px/1.3 var(--hc-sans); }
  .tf-switch-t span { font-size: 11.5px; color: var(--ui-frame-muted); }
  .tf-frame-foot { padding: 10px 12px 12px; }
  .hc-mhead { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 16px; }
  .hc-mhead-act { padding-top: 0; }
  .hc-tabs { padding: 0 10px; }
  .hc-bench { padding: 16px 16px 0; }
  .tf-mpage .tf-mpane > .tf-fold, .tf-mpage .tf-mpane > details { margin: 24px 16px 0; }
  .tf-mpage .tf-status, .tf-mpage .tf-note { margin: 12px 16px 0; }
  .tf-mpane > :not(.hc-mhead):not(.hc-tabs):not(.tf-ask-shelf):not(.tf-fold):not(.tf-status):not(.tf-note):not(script):not(#drop) { margin-left: 16px; margin-right: 16px; }
  body:has(> .tf-frame) .wrap { padding: 0 16px; }
}
@media (max-width: 600px) {
  .hc-launch .tf-find { flex: 1 1 100%; }
  body:has(> .tf-frame) table.tf-table td[data-label]::before { margin-bottom: 2px; font: 500 11.5px/1.5 var(--hc-sans); letter-spacing: 0; text-transform: none; }
  .hc-mhead h1 { font-size: 32px; }
  .tf-card.hc-hero { padding: 22px 20px 20px; }
  .hc-hero .tf-card-t { font-size: 28px; }
  .tf-card.hc-card:not(.hc-hero) { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 16px; }
  .hc-card:not(.hc-hero) .tf-ico { width: 36px; height: 36px; }
  .hc-tier-more .hc-pills { grid-template-columns: minmax(0, 1fr); }
  .hc-tier-more .hc-pills > li:nth-child(2) { border-top: 1px solid var(--rule); }
  .hc-tier-more .hc-pills > li:nth-child(odd) { border-right: 0; }
  .hc-group li, .hc-group > summary { padding-left: 16px; padding-right: 16px; }
  .hc-vault-head { padding: 18px 16px 14px; }
  .tf-task-title h2 { font-size: 24px; }
  body:has(> .tf-frame) .tf-run-doc { padding: 28px 20px; }
  body:has(> .tf-frame) .tf-run-doc .tf-doc-body p { font-size: 15.5px; }
  .hc-runband[data-state="working"], .hc-runband[data-state="waiting"] { padding: 18px 16px 0; }
  .hc-runband[data-state="working"] .tf-tl-block, .hc-runband[data-state="waiting"] .tf-tl-block { margin: 0 -16px; padding: 0 16px; }
  .hc-runband .tf-tl { margin: 0 -16px; }
}
/* Compact file rows: reserved Vault viewport, page-only folds, native disclosure actions. */
.hc-vault-list { height: clamp(320px, 65vh, 680px); overflow: auto; scrollbar-gutter: stable; }
.hc-group-c { padding: 0; min-width: 0; background: none; font: inherit; }
.hc-vault-list .hc-group li, .hc-library .tf-lib-list li { display: grid; grid-template-columns: 20px 24px minmax(80px, 1fr) 100px 65px 65px 28px; gap: 0 10px; min-height: 48px; padding: 3px 16px; box-sizing: border-box; border-bottom: 1px solid var(--rule); align-items: center; }
.hc-vault-list .hc-group li > *, .hc-library .tf-lib-list li > * { grid-row: auto; grid-column: 3; min-width: 0; }
.hc-vault-list .hc-group li > .hc-pick { grid-column: 1; grid-row: 1; align-self: center; opacity: 0; }
.hc-vault-list .hc-group li > .hc-kind, .hc-vault-list .hc-group li > .tf-i { grid-column: 2; grid-row: 1; align-self: center; width: 24px; height: 28px; }
.hc-vault-list .hc-group li > .hc-file-name { grid-column: 3; grid-row: 1; }
.hc-file-name > b, .hc-file-name > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-file-name { line-height: 1.3; }
.hc-file-name > b, .hc-library .tf-lib-list li b { font: 500 13px/1.4 var(--hc-sans); color: var(--ink); }
.hc-file-name > small, .hc-library .tf-lib-list .hc-file-name .tf-by { margin: 0; font-size: 11px; color: var(--ink-muted); }
.hc-sort-chips .hc-sort-chip { font-variant-numeric: tabular-nums; }
.hc-file-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-file-cat, .hc-file-size, .hc-file-date { font: 400 11px/1.35 var(--hc-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hc-vault-list .hc-group li > .hc-file-cat, .hc-library .tf-lib-list li > .hc-file-cat { grid-column: 4; grid-row: 1; }
.hc-vault-list .hc-group li > .hc-file-size, .hc-library .tf-lib-list li > .hc-file-size { grid-column: 5; grid-row: 1; }
.hc-vault-list .hc-group li > .hc-file-date, .hc-library .tf-lib-list li > .hc-file-date { grid-column: 6; grid-row: 1; }
.hc-vault-list .hc-group li > .hc-file-menu { grid-column: 7; grid-row: 1; position: relative; }
.hc-file-menu > summary { color: var(--ink); display: grid; place-items: center; min-height: 36px; font: 700 20px/1 var(--hc-sans); cursor: pointer; list-style: none; opacity: 0; }
.hc-file-menu > summary::-webkit-details-marker { display: none; }
.hc-vault-list .hc-group li:hover > .hc-pick, .hc-vault-list .hc-group li:focus-within > .hc-pick, .hc-vault-list.hc-has-picks .hc-group li > .hc-pick, .hc-group li:hover .hc-file-menu > summary, .hc-group li:focus-within .hc-file-menu > summary, .hc-file-menu[open] > summary { opacity: 1; }
.hc-file-actions { position: absolute; z-index: 5; right: 0; top: 100%; width: min(280px, 65vw); max-height: 280px; overflow: auto; padding: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.hc-file-actions .hc-sort { display: flex; padding: 0; }
.hc-file-actions .hc-sort-pill { border: 0; border-radius: 3px; min-height: 36px; padding: 6px; font-size: 12px; text-align: left; }
.hc-file-actions .hc-file-f { font-size: 11px; overflow-wrap: anywhere; }
.hc-file-actions .hc-sort-menu { gap: 2px; }
.hc-file-actions .hc-sort-menu button { border: 0; width: 100%; text-align: left; border-radius: 3px; }
.hc-vault-list .hc-group li > .hc-file-w, .hc-vault-list .hc-group li > .hc-file-p { grid-column: 3 / -1; }
.hc-file-menu summary:focus-visible, .hc-group summary:focus-visible, .hc-pick:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.hc-library { min-width: 0; }
.hc-lib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.hc-lib-head h2 { flex: 1; margin: 0; font: 400 24px/1.15 var(--hc-display); overflow-wrap: anywhere; }
.hc-library .tf-lib-find { margin-bottom: 8px; }
.hc-library > .tf-section { margin-top: 16px; padding-top: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.hc-library .tf-lib-list li { grid-template-columns: 0 24px minmax(80px, 1fr) 100px 65px 85px; padding-left: 6px; }
.hc-library .tf-lib-list li > .hc-kind { grid-column: 2; grid-row: 1; width: 24px; height: 28px; }
.hc-library .tf-lib-list li > .hc-file-name { grid-column: 3; grid-row: 1; }
.hc-library .tf-lib-list li > .tf-by, .hc-library .tf-lib-list li > .tf-lib-x, .hc-library .tf-lib-list li > form { grid-column: 3 / -1; margin: 2px 0; }
.hc-library .tf-lib-list li:last-child { border-bottom: 0; }
.hc-library .tf-lib-list li { position: relative; }
.hc-library .hc-file-open { color: inherit; text-decoration: none; }
.hc-library .hc-file-open::after { content: ""; position: absolute; inset: 0; }
.hc-library .hc-file-open:hover > b { text-decoration: underline; }
.hc-library .hc-file-open:focus-visible { outline: none; }
.hc-library .hc-file-open:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.hc-library .tf-lib-list li > form { position: relative; z-index: 1; }

@media (prefers-color-scheme: dark) {
  .hc-vault, .hc-library { --surface: #20201E; --bg: #161614; --bg-alt: #292824; --ink: #F5F3EE; --ink-muted: #B3B1AB; --fg-strong: var(--ink); --fg: #E0DDD5; --muted: var(--ink-muted); --rule: #49473F; --gold-wash: #302A1F; color: var(--ink); color-scheme: dark; }
  .hc-library { background: var(--bg); padding: 16px; border-radius: var(--radius-card); }
  .hc-vault .hc-kind, .hc-library .hc-kind { background: #34332F; color: #E0D8C9; }
}
.hc-library .hc-kind { white-space: nowrap; font: 650 8px/1 var(--hc-sans); letter-spacing: 0; }
@container (max-width: 700px) {
  .hc-vault-list .hc-group li { grid-template-columns: 24px 24px minmax(0, 1fr) 36px; gap: 0 8px; }
  .hc-vault-list .hc-group li > .hc-pick, .hc-vault-list .hc-group li > .hc-kind, .hc-vault-list .hc-group li > .tf-i, .hc-vault-list .hc-group li > .hc-file-menu { grid-row: 1 / span 2; }
  .hc-vault-list .hc-group li > .hc-file-menu { grid-column: 4; }
  .hc-vault-list .hc-group li > .hc-file-cat { grid-column: 3; grid-row: 2; padding-right: 65px; }
  .hc-vault-list .hc-group li > .hc-file-date { grid-column: 3; grid-row: 2; justify-self: end; }
  .hc-vault-list .hc-group li > .hc-file-size { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .hc-vault-list .hc-group li > .hc-pick, .hc-file-menu > summary { opacity: 1; min-height: 44px; }
  .hc-file-actions .hc-sort-pill, .hc-file-actions .hc-sort-menu button { min-height: 44px; }
}
@media (max-width: 700px) {
  .hc-vault-list .hc-group li, .hc-library .tf-lib-list li { grid-template-columns: 44px 24px minmax(0, 1fr) 36px; gap: 0 8px; padding: 4px 10px; }
  .hc-vault-list .hc-group li > .hc-pick, .hc-vault-list .hc-group li > .hc-kind, .hc-vault-list .hc-group li > .tf-i, .hc-library .tf-lib-list li > .hc-kind, .hc-vault-list .hc-group li > .hc-file-menu { grid-row: 1 / span 2; }
  .hc-vault-list .hc-group li > .hc-file-menu { grid-column: 4; }
  .hc-vault-list .hc-group li > .hc-file-cat, .hc-library .tf-lib-list li > .hc-file-cat { grid-column: 3; grid-row: 2; padding-right: 70px; }
  .hc-vault-list .hc-group li > .hc-file-date, .hc-library .tf-lib-list li > .hc-file-date { grid-column: 3; grid-row: 2; justify-self: end; font-size: 10px; }
  .hc-vault-list .hc-group li > .hc-file-size, .hc-library .tf-lib-list li > .hc-file-size { display: none; }
  .hc-library .tf-lib-list li { grid-template-columns: 0 24px minmax(0, 1fr) 0; }
  .hc-lib-head h2 { font-size: 20px; }
}

/* a touch screen keeps the product's 44 px targets; the design's tighter sizes are for a mouse */
@media (pointer: coarse), (max-width: 600px) {
  .topbar.tf-frame nav a, .topbar.tf-frame nav a.hc-cta, .tf-frame .tf-new-matter-link, .tf-frame .tf-matter a, .tf-frame .tf-side-search input, .tf-frame .tf-pager-a,
  .hc-tabs a, .hc-btn-sm, .tf-ask-shelf .tf-drop-choose.hc-btn-sm, .tf-card.hc-pill, .hc-hero .hc-go, .hc-launch .tf-find input, .hc-mhead .tf-about-btn, .tf-back, .hc-group > summary,
  body:has(> .tf-frame) .btn, .tf-ask-shelf .tf-drop-files li .tf-drop-btn, .tf-ask-shelf .tf-drop-choose, .hc-sort-chip, .hc-sort-pill, .hc-pick, .hc-pick-all { min-height: 44px; }
  .hc-group li.hc-pickable { grid-template-columns: 44px 28px minmax(0, 1fr); }
  .hc-linkbtn, .tf-ask-shelf .tf-drop-choose.hc-linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-dot, .hc-runband .eyebrow::before, .hc-runband #run-status::before, .hc-runband .tf-tl-li-now::before { animation: none !important; }
  .hc-meter > span, .tf-card.hc-card, .hc-go, .tf-card.hc-pill, .tf-card.hc-pill::after, .hc-dropzone, .hc-group > summary::after, .hc-mhead .tf-about-btn, .hc-mhead .tf-about-btn .tf-i, .hc-tabs a, .hc-tabs a::after { transition: none; }
  .hc-tabs a:not([aria-current]):hover::after, .tf-card.hc-card:not(.hc-hero):hover .hc-go, .tf-card.hc-pill:hover::after, .tf-card.hc-hero:hover .hc-go .tf-i { transform: none; }
}
@media print {
  .hc-tabs, .hc-mhead-act, .hc-dropzone, .hc-vault, .hc-launch .tf-shelf { display: none !important; }
}

/* ── Components: one navy look (UI batch 3, dispatch 1758; Tre's D2 and D3, 2026-11-05) ─────────────────────────────────────────────
   Buttons, fields, chips, badges and the tables' heads on the signed-in pages, in README section 5's "Direction A dark" values
   (design/ui-mockups-2026-11-05). Every state is its own opaque pair (label on its own fill, 4.5:1 or more on any surface a page is still
   drawn in), never an opacity: the mockup's dark "Search" turned invisible when a pressed rule changed its fill but not its label. Screen
   only; the Draft's paper (.tf-run-doc) and the frame's own search (batch 2) are left out. The .ui-* classes are for the screen batches. */
@media screen {
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm):not(.tf-run-doc *) { border-color: var(--ui-border-strong); border-radius: var(--ui-r-md); background: var(--ui-surface); box-shadow: none;
    color: var(--ui-text-strong); transition: background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease); }
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm):not(.tf-run-doc *):hover { border-color: var(--ui-field-border); background: var(--ui-surface-3); color: var(--ui-text-strong); }
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm):not(.tf-run-doc *):active { border-color: var(--ui-field-border); background: var(--ui-bg); color: var(--ui-text-strong); }
  body:has(> .tf-frame) :is(.tf-btn-small, .hc-btn-sm):not(.tf-run-doc *) { border-radius: var(--ui-r-sm); }
  /* the ghost (.tf-btn-quiet) is filled with the navy page itself: no edge on a navy page, still a readable pair on today's parchment */
  body:has(> .tf-frame) :is(.tf-btn-quiet, .btn-ghost):not(.tf-run-doc *) { border-color: var(--ui-bg); background: var(--ui-bg); }
  body:has(> .tf-frame) .btn-primary:not(.tf-run-doc *) { border-color: var(--ui-primary-bg); background: var(--ui-primary-bg); color: var(--ui-primary-text); }
  body:has(> .tf-frame) .btn-primary:not(.tf-run-doc *):hover { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: var(--ui-primary-text); }
  body:has(> .tf-frame) .btn-primary:not(.tf-run-doc *):active { border-color: var(--ui-accent-line); background: var(--ui-accent-line); color: var(--ui-primary-text); }
  body:has(> .tf-frame) .btn:not(.btn-primary)[aria-pressed="true"]:not(.tf-run-doc *) { border-color: var(--ui-accent-line); background: var(--ui-accent-wash); color: var(--ui-text-strong); }
  body:has(> .tf-frame) .hc-pick-yes:not(.tf-run-doc *), body:has(> .tf-frame) .hc-pick-yes:not(.tf-run-doc *):is(:hover, :active) { border-color: var(--ui-danger); background: var(--ui-danger-bg); color: var(--ui-danger); }
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm):is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]):not(.tf-run-doc *) { border-color: var(--ui-field-border); border-style: dashed;
    background: var(--ui-surface-2); color: var(--ui-text-muted); opacity: 1 !important; }   /* !important: four sheets fade a disabled button */
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm)[aria-busy="true"]:not(.tf-run-doc *) { cursor: progress; opacity: 1 !important; animation: ui-busy 1.2s linear infinite;
    background-image: linear-gradient(90deg, currentColor 0 40%, transparent 40%); background-repeat: no-repeat; background-size: 250% 2px; background-position: 100% 100%; }
  /* fields and selects (dark, so a select's list and a date's picker are too) */
  body:has(> .tf-frame) :is(input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], :not([type])), textarea, select):not(.tf-frame *, .tf-run-doc *) {
    border: 1px solid var(--ui-field-border); border-radius: var(--ui-r-md); background-color: var(--ui-surface); box-shadow: none; color: var(--ui-text); color-scheme: dark;
    transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease); }
  body:has(> .tf-frame) :is(input, textarea):not(.tf-frame *, .tf-run-doc *)::placeholder { color: var(--ui-text-muted); opacity: 1; }
  body:has(> .tf-frame) :is(input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], :not([type])), textarea, select):not(.tf-frame *, .tf-run-doc *)[aria-invalid="true"] { border-color: var(--ui-danger); }
  body:has(> .tf-frame) :is(input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], :not([type])), textarea, select):not(.tf-frame *, .tf-run-doc *):disabled { border-style: dashed; background-color: var(--ui-bg);
    color: var(--ui-text-muted); opacity: 1; }   /* the browser fades a disabled select */
  /* chips (the Case Vault's filter): rest, hover, pressed; badges (.tf-chip, the finished task's mark, and .ui-badge's tones) */
  body:has(> .tf-frame) .hc-sort-chip { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-text); transition: background-color var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease), color var(--ui-dur) var(--ui-ease); }
  body:has(> .tf-frame) .hc-sort-chip:hover { border-color: var(--ui-field-border); background: var(--ui-surface-3); color: var(--ui-text-strong); }
  body:has(> .tf-frame) .hc-sort-chip[aria-pressed="true"] { border-color: var(--ui-accent-line); background: var(--ui-accent-wash); color: var(--ui-text-strong); }
  body:has(> .tf-frame) .tf-chip { border-color: var(--ui-border-strong); background: var(--ui-surface-3); color: var(--ui-text); }
  body:has(> .tf-frame) .tf-chip-soft { color: var(--ui-text-muted); }
  body:has(> .tf-frame) .hc-runband[data-state="finished"] #run-status { background: var(--ui-success-bg); color: var(--ui-success); }
  body:has(> .tf-frame) .hc-runband[data-state="finished"] #run-status::before { background: var(--ui-success); }
  .ui-badge { display: inline-flex; align-items: center; gap: var(--ui-s-1); min-height: 22px; padding: 0 var(--ui-s-2); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-sm);
    background: var(--ui-surface-3); color: var(--ui-text); font-size: var(--ui-t-xs); font-weight: 600; line-height: 1.2; }
  .ui-badge-ok { border-color: transparent; background: var(--ui-success-bg); color: var(--ui-success); }
  .ui-badge-problem { border-color: transparent; background: var(--ui-danger-bg); color: var(--ui-danger); }
  .ui-badge-gold { border-color: transparent; background: var(--ui-accent-wash); color: var(--ui-accent-text); }
  /* the tables' heads (the rows stay the page's until its screen batch) */
  body:has(> .tf-frame) table.tf-table thead th { background: var(--ui-surface); border-bottom-color: var(--ui-border); color: var(--ui-text-muted); }
  /* one focus ring: gold over a navy edge, so it shows on navy, on parchment and on a white card */
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm, .hc-sort-chip, .hc-tabs a):not(.tf-run-doc *):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ui-frame-bg); }
  body:has(> .tf-frame) :is(input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], :not([type])), textarea, select):not(.tf-frame *, .tf-run-doc *):focus-visible {
    border-color: var(--ui-focus); outline: 2px solid var(--ui-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ui-frame-bg); }
  /* states for the screens: loading (a skeleton), empty, a calm error (never a raw one); a native <dialog> and popover */
  .ui-skel { display: block; min-height: 12px; border-radius: var(--ui-r-sm); background: linear-gradient(90deg, var(--ui-surface-3), var(--ui-surface-2), var(--ui-surface-3)) 0 0 / 200% 100%; animation: ui-shimmer 1.4s linear infinite; }
  .ui-empty { display: grid; justify-items: center; gap: var(--ui-s-2); padding: var(--ui-s-10) var(--ui-s-6); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface); color: var(--ui-text-muted); text-align: center; }
  .ui-empty :is(h2, h3, strong) { color: var(--ui-text-strong); }
  .ui-calm { display: flex; gap: var(--ui-s-3); align-items: flex-start; padding: var(--ui-s-4); border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-accent); border-radius: var(--ui-r-md); background: var(--ui-surface-2); color: var(--ui-text); }
  .ui-dialog, .ui-popover { padding: var(--ui-s-6); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .7); color-scheme: dark; }
  .ui-dialog { max-width: min(32rem, calc(100vw - 32px)); }
  .ui-dialog::backdrop { background: rgb(7 13 26 / .66); }   /* a literal: ::backdrop does not inherit custom properties in every engine */
  .ui-popover { padding: var(--ui-s-3); border-radius: var(--ui-r-md); }
}
@keyframes ui-busy { to { background-position: -150% 100%; } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@media screen and (prefers-reduced-motion: reduce) {
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm, .hc-sort-chip):not(.tf-run-doc *),
  body:has(> .tf-frame) :is(input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="url"], [type="tel"], [type="number"], [type="date"], :not([type])), textarea, select):not(.tf-frame *, .tf-run-doc *) { transition: none; }
  body:has(> .tf-frame) :is(.btn, .hc-btn-sm)[aria-busy="true"]:not(.tf-run-doc *), .ui-skel { animation: none; }
}

/* ── Sign in: the navy split (UI batch 4a, 2026-11-06; Tre's D1-D4 and the one navy theme) ──────────────────────────────────────────
   The mark, the firm and the trust lines on the frame's navy, the form on the page's navy; one column under 860 px, the form second. Only
   the sign-in and set-password draw .tf-signin, so the signed-in pages are untouched. Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-signin) { background: var(--ui-bg); }
  .tf-signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "brand form" "trust form";
    min-height: 100vh; background: var(--ui-bg); color: var(--ui-text); font: 400 var(--ui-t-base)/1.55 var(--hc-sans); overflow-wrap: anywhere; color-scheme: dark; }
  .tf-signin-brand, .tf-signin-trust { background: var(--ui-frame-bg); color: var(--ui-frame-text); }
  .tf-signin-brand { grid-area: brand; display: grid; align-content: start; justify-items: start; gap: var(--ui-s-3); padding: var(--ui-s-12) var(--ui-s-12) var(--ui-s-8);
    --mark-ink: var(--ui-frame-strong); --mark-frame: var(--ui-accent); }
  .tf-signin .brand { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 var(--ui-s-8); font-size: 28px; color: var(--ui-frame-strong); }
  .tf-signin .brand .brand-mark { height: 30px; width: auto; }
  .tf-signin .brand .wm-court { font: 400 29px/1 var(--hc-display); letter-spacing: -0.01em; color: var(--ui-frame-strong); }
  html[data-tone] .tf-signin .brand-mark .mk-frame { fill: url(#hc-gold); }
  .tf-signin-firm { max-width: 100%; margin: 0; font: 400 56px/1.05 var(--hc-display); letter-spacing: -0.01em; color: var(--ui-frame-strong); }
  .tf-signin-own { max-width: 28rem; margin: 0; font-size: var(--ui-t-lg); line-height: 1.45; color: var(--ui-frame-text); }
  .tf-signin-trust { grid-area: trust; display: grid; align-content: start; gap: var(--ui-s-5); padding: 0 var(--ui-s-12) var(--ui-s-12); font-size: var(--ui-t-sm); }
  .tf-signin-guard { max-width: 28rem; margin: 0; padding: var(--ui-s-4); border: 1px solid var(--ui-accent-line); border-radius: var(--ui-r-md); background: var(--ui-frame-bg-2); color: var(--ui-frame-text); }
  .tf-signin-trust ul { display: grid; gap: var(--ui-s-3); max-width: 28rem; margin: 0; padding: 0; list-style: none; }
  .tf-signin-trust li { padding: 0 0 0 var(--ui-s-3); border-left: 2px solid var(--ui-accent); }
  .tf-signin-trust b { font-weight: 500; color: var(--ui-frame-strong); }
  .tf-signin-main { grid-area: form; display: grid; align-content: center; justify-items: center; padding: var(--ui-s-12) var(--ui-s-8); }
  .tf-signin-box { width: min(400px, 100%); }
  .tf-signin h1 { margin: 0; font: 400 var(--ui-t-4xl)/1.1 var(--hc-display); letter-spacing: -0.01em; color: var(--ui-text-strong); }
  .tf-signin .lede { margin: var(--ui-s-2) 0 0; font-size: var(--ui-t-md); line-height: 1.55; color: var(--ui-text); }
  .tf-signin .signup { max-width: none; margin: var(--ui-s-6) 0 0; }
  .tf-signin .field { margin: 0 0 var(--ui-s-4); }
  .tf-signin .field > label { margin: 0 0 var(--ui-s-2); font: 500 var(--ui-t-sm)/1.4 var(--hc-sans); color: var(--ui-text-strong); }
  .tf-signin .field input:is([type="email"], [type="password"]) { min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-field-border); border-radius: var(--ui-r-md);
    background: var(--ui-surface); color: var(--ui-text); font: 400 var(--ui-t-md)/1.4 var(--hc-sans); color-scheme: dark; }
  .tf-signin .field input:is([type="email"], [type="password"]):focus { border-color: var(--ui-focus); outline: 2px solid var(--ui-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ui-frame-bg); }
  /* a saved password fills the field on our navy, never the browser's own light fill */
  .tf-signin .field input:-webkit-autofill { -webkit-text-fill-color: var(--ui-text); caret-color: var(--ui-text); box-shadow: inset 0 0 0 40px var(--ui-surface); }
  .tf-signin .field input:-webkit-autofill:focus { box-shadow: inset 0 0 0 40px var(--ui-surface), 0 0 0 2px var(--ui-frame-bg); }
  .tf-signin .btn-primary { width: 100%; min-height: 44px; margin: var(--ui-s-2) 0 0; border-color: var(--ui-primary-bg); border-radius: var(--ui-r-md); background: var(--ui-primary-bg);
    box-shadow: none; color: var(--ui-primary-text); font: 600 var(--ui-t-md)/1.25 var(--hc-sans); }
  .tf-signin .btn-primary:hover { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: var(--ui-primary-text); }
  .tf-signin .btn-primary:active { border-color: var(--ui-accent-line); background: var(--ui-accent-line); box-shadow: none; color: var(--ui-primary-text); }
  .tf-signin .btn-primary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r-md); box-shadow: 0 0 0 2px var(--ui-frame-bg); }
  .tf-signin .btn-primary:disabled { border-style: dashed; border-color: var(--ui-field-border); background: var(--ui-surface-2); color: var(--ui-text-muted); opacity: 1; }
  .tf-signin .form-status { min-height: 0; margin: var(--ui-s-3) 0 0; font: 500 var(--ui-t-sm)/1.5 var(--hc-sans); color: var(--ui-danger); }
  .tf-signin .form-status:not(:empty) { padding: var(--ui-s-3) var(--ui-s-4); border-left: 3px solid var(--ui-danger); border-radius: var(--ui-r-sm); background: var(--ui-danger-bg); }
  .tf-signin-note { margin: var(--ui-s-6) 0 0; padding: var(--ui-s-4) 0 0; border-top: 1px solid var(--ui-border); font-size: var(--ui-t-sm); color: var(--ui-text-muted); }
  .tf-signin .lede + p:not(.tf-signin-note) { margin: var(--ui-s-4) 0 0; }
  .tf-signin .tf-quiet { font-size: var(--ui-t-sm); color: var(--ui-text-muted); }
  .tf-signin-box a { color: var(--ui-accent-text); }
}
@media screen and (max-width: 860px) {
  .tf-signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "brand" "form" "trust"; }
  .tf-signin-brand { gap: var(--ui-s-2); padding: var(--ui-s-6) var(--ui-s-4); }
  .tf-signin .brand { margin: 0 0 var(--ui-s-4); font-size: 22px; }
  .tf-signin .brand .brand-mark { height: 24px; }
  .tf-signin .brand .wm-court { font-size: 23px; }
  .tf-signin-firm { font-size: 40px; }
  .tf-signin-own { font-size: var(--ui-t-md); }
  .tf-signin-main { align-content: start; padding: var(--ui-s-8) var(--ui-s-4); }
  .tf-signin-trust { padding: var(--ui-s-8) var(--ui-s-4); }
}

/* ── Open a new matter on the navy page (UI batch 4c, 2026-11-06; Tre's D2 and D3) ─────────────────────────────────────────────────
   The create view's pane re-points the product's roles to batch 1's --ui- values, so app.css's own form, files and drop-zone rules draw
   navy with today's layout; batch 3's buttons and fields are unchanged. Only the create view draws .tf-matter-create (a form a firm
   cannot save to draws none, and keeps today's page). Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.tf-matter-create) { background: var(--ui-bg); }
  body:has(> .tf-frame) .tf-mpane:has(> .tf-matter-create) { --fg: var(--ui-text); --fg-strong: var(--ui-text-strong); --muted: var(--ui-text-muted); --rule: var(--ui-border);
    --rule-strong: var(--ui-border-strong); --bg: var(--ui-bg); --bg-alt: var(--ui-surface-2); --surface: var(--ui-surface); --surface-2: var(--ui-surface-2);
    --accent-ink: var(--ui-accent-text); --accent-soft: var(--ui-accent-wash); --focus: var(--ui-focus); --alert-ink: var(--ui-danger); color: var(--ui-text); color-scheme: dark; }
  body:has(> .tf-frame) .tf-matter-create label { color: var(--ui-text-strong); }
}

/* ── The matter workspace on the navy page (UI batch 4d, 2026-11-06; Tre's D2 and D3) ──────────────────────────────────────────────
   4c's way: the matter's pane (only Pages::workspace draws .hc-mhead, and only for a matter) and its vault re-point the product's roles and
   the court look's own names to batch 1's --ui- values, so today's vault, shelf, task screen and About draw navy in today's layout (the vault
   too, so the OS-dark block above never applies here). Draft is the same card as the rest, with its one gold action; a file's line icon is
   in the muted text, a problem's keeps its red tile; "Added <date>" has room. Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.tf-mpane > .hc-mhead) { background: var(--ui-bg); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead), body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault {
    --fg: var(--ui-text); --fg-strong: var(--ui-text-strong); --muted: var(--ui-text-muted); --rule: var(--ui-border); --rule-strong: var(--ui-border-strong);
    --bg: var(--ui-bg); --bg-alt: var(--ui-surface-2); --surface: var(--ui-surface); --surface-2: var(--ui-surface-2); --field-line: var(--ui-field-border);
    --accent-ink: var(--ui-accent-text); --accent-soft: var(--ui-accent-wash); --focus: var(--ui-focus); --alert-ink: var(--ui-danger);
    --ink: var(--ui-text-strong); --ink-muted: var(--ui-text-muted); --wash: var(--ui-surface-3); --gold-deep: var(--ui-accent); --gold-ink: var(--ui-accent-text);
    --gold-wash: var(--ui-accent-wash); --obsidian-2: var(--ui-surface-3); --breach: var(--ui-danger); --breach-wash: var(--ui-danger-bg);
    --caution-ink: var(--ui-accent-text); --verdict: var(--ui-success); --verdict-wash: var(--ui-success-bg); color: var(--ui-text); color-scheme: dark; }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) :is(.tf-card.hc-card, .tf-card.hc-pill):hover { background: var(--ui-surface-3); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .tf-card.hc-hero { border-color: var(--ui-border); box-shadow: none; color: var(--ui-text); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .tf-card.hc-hero:not(:hover) { background: var(--ui-surface); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .tf-card.hc-hero::before { content: none; }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .tf-ico { border-color: var(--ui-accent-line); background: var(--ui-surface-2); color: var(--ui-accent); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .hc-tag { color: var(--ui-accent-text); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .tf-card-t { color: var(--ui-text-strong); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .tf-card-l { color: var(--ui-text); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .tf-card-l.hc-hero-l { color: var(--ui-text-muted); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-hero .hc-go { border-color: var(--ui-primary-bg); background: var(--ui-primary-bg); box-shadow: none; color: var(--ui-primary-text); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .tf-card.hc-hero:hover .hc-go { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: var(--ui-primary-text); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-dropzone { border-color: var(--ui-border-strong); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-group li:not([data-state="problem"]) > .tf-i { padding: 4px 3px; background: none; color: var(--ui-text-muted); }
  body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-file-date { white-space: nowrap; }
  @container (max-width: 700px) { body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault-list .hc-group li > .hc-file-cat { padding-right: 116px; } }
  @container (min-width: 701px) { body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault-list .hc-group li { grid-template-columns: 20px 24px minmax(80px, 1fr) 100px 65px 112px 28px; } }
}

/* ── Tasks on the navy page (UI batch 4e, 2026-11-06; Tre's D2 and D3) ────────────────────────────────────────────────────────────
   4c's and 4d's way: the Tasks page's section (only Pages::tasks draws .hc-tasks, around its head, filters, lists and fills) re-points the
   product's roles and the court look's own names to batch 1's --ui- values, so today's table, lines and buttons draw navy in today's layout.
   The status chips are the vault's (batch 3's .hc-sort-chip states). Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.hc-tasks) { background: var(--ui-bg); }
  body:has(> .tf-frame) .hc-tasks {
    --fg: var(--ui-text); --fg-strong: var(--ui-text-strong); --muted: var(--ui-text-muted); --rule: var(--ui-border); --rule-strong: var(--ui-border-strong);
    --bg: var(--ui-bg); --bg-alt: var(--ui-surface-2); --surface: var(--ui-surface); --surface-2: var(--ui-surface-2); --field-line: var(--ui-field-border);
    --accent-ink: var(--ui-accent-text); --accent-soft: var(--ui-accent-wash); --focus: var(--ui-focus); --alert-ink: var(--ui-danger);
    --ink: var(--ui-text-strong); --ink-muted: var(--ui-text-muted); --wash: var(--ui-surface-3); --gold-deep: var(--ui-accent); --gold-ink: var(--ui-accent-text);
    --gold-wash: var(--ui-accent-wash); --obsidian-2: var(--ui-surface-3); --breach: var(--ui-danger); --breach-wash: var(--ui-danger-bg);
    --caution-ink: var(--ui-accent-text); --verdict: var(--ui-success); --verdict-wash: var(--ui-success-bg); color: var(--ui-text); color-scheme: dark; }
  body:has(> .tf-frame) .hc-tasks .tf-task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
}