/* ==========================================================================
   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 light look (UI batch 7, dispatch 1774; the partner and Tre, 2026-11-06, "light by default", replacing D3's navy): README section 5's
       "Direction A light" values (design/ui-mockups-2026-11-05/README.md) on batch 1's --ui- names. The primary is navy with white text;
       gold is fills, rules, focus and selection, never text on cream. Only the left sidebar stays navy, on its own frame tokens below.
       Type for older readers: body 17 px, nothing under 14 px. --gold is still --ui-accent's alias. */
    --ui-bg: #F7F3EA; --ui-surface: #FFFFFF; --ui-frame-bg: #070D1A; --ui-text: #353B49; --ui-text-muted: #5B6170; --ui-field-border: #8A8170;
    --ui-accent: #C5A059; --ui-accent-text: #7A5A1E; --ui-primary-bg: #0F1B30; --ui-primary-text: #FFFFFF; --ui-focus: #8C6A2C;
    --ui-danger: #A3271B; --ui-danger-bg: #FBECEA; --ui-success: #276749; --ui-success-bg: #E8F3EC; --alert-ink: var(--ui-danger);
    --ui-t-xs: 14px; --ui-t-sm: 15px; --ui-t-base: 17px; --ui-t-md: 17px; --ui-t-lg: 19px; --ui-t-xl: 24px; --ui-t-2xl: 30px; --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: #FBF8F2; --ui-surface-3: #EFE8DA; --ui-border: #E4DCCB; --ui-border-strong: #D3C8B3; --ui-text-strong: #0F1B30;
    --ui-accent-wash: #F6EEDC; --ui-accent-line: #8C6A2C; --ui-primary-hover: #22324F;
    /* 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-frame-accent: #D4B273; --ui-frame-focus: #D9B66E; --ui-frame-field: #5D6A84; }
  .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-frame-field); --field-line: var(--ui-frame-field);
    --accent: var(--ui-accent); --accent-ink: var(--ui-frame-accent); --accent-fg: #0F1B30; --accent-soft: rgb(197 160 89 / .12); --focus: var(--ui-frame-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-frame-accent); 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-frame-accent); }
.topbar.tf-frame nav a.hc-cta[aria-current="page"] { background: transparent; color: var(--ui-frame-accent); }
.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-frame-accent); 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: 16px 0 20px; background: var(--ui-bg); border-top: 1px solid var(--ui-accent); }
  body:has(> .tf-frame) .foot p { margin: 4px 0; max-width: none; font-size: 14px; color: var(--ui-text-strong); }
  /* the matter's header band on the page's cream (UI batch 7): the title in navy serif, the facts and tabs in the page's own words (4d's roles),
     a thin gold rule under the tabs */
  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-tabs { background: var(--ui-bg); border-bottom-color: var(--ui-accent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@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, 720px) 330px; gap: 32px; justify-content: center; margin-top: 20px; }   /* UI batch 6 (dispatch 1773): the panel 32 px beside the 720 px form; UI batch 7b (dispatch 1776): the pair centred as one unit in the spare width */
.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; }
/* UI batch 4j (Tre, 2026-11-06): a ready file's name the editor opens is a link (drop.js); held to its own cell, so the pick and the "⋯" keep their clicks */
@media screen {
  .hc-vault-list a.hc-file-name { color: inherit; text-decoration: none; }
  .hc-vault-list a.hc-file-name:hover > b { text-decoration: underline; }
  .hc-vault-list a.hc-file-name:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r-sm); }
}
/* dispatch 1778 (4j redone for PDFs): a ready PDF's name is a button that opens its Preview in place (drop.js, Pages::libraryFile); it reads as the name */
@media screen {
  button.hc-file-name { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .hc-vault-list button.hc-file-name:hover > b { text-decoration: underline; }
  .hc-vault-list button.hc-file-name:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: var(--ui-r-sm); }
  body:has(> .tf-frame) .hc-vault-list button.hc-file-name { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  body:has(> .tf-frame) .hc-lib-table button.hc-file-name { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 44px; }
  .hc-vault-list .hc-group li > .tf-drop-preview { grid-column: 3 / -1; margin: 4px 0 8px; }
  .hc-vault-list .tf-drop-preview :is(p, pre) { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
}
.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; }

.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; }
  .tf-task-grid { justify-content: start; }   /* UI batch 7b: the pair is centred on screen only; print keeps it where it was */
}

/* ── 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-field-border); 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-text-muted); 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-text-muted); 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-frame-bg); background: var(--ui-frame-bg); 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);
    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-field-border); 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-text-muted); 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(15 27 48 / .3); }
  .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; }
  .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); 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); }
  .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-frame-bg); background: var(--ui-frame-bg); 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); }
  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); }
  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); }
  body:has(> .tf-frame) .hc-tasks .tf-task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ── A finished task on the navy page (UI batch 4f, 2026-11-06; Tre's D2 and D3) ─────────────────────────────────────────────────
   4c's, 4d's and 4e's way: the run page (only run.php draws #run-band) re-points the product's roles and the court look's own names to batch
   1's --ui- values on everything it draws but the Draft's paper (.tf-run-doc keeps today's court look: white paper, its own ink), so the band,
   the lines, the downloads, the change box and About draw navy in today's layout. The paper's text takes the editor's face (U11: editor.css's,
   the run page's old editor's). From 1180 px a Draft's rail (Before you file, Checks that ran, About this work, What was not checked) sits
   beside the paper. Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(#run-band) { background: var(--ui-bg); }
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap > :not(#run-summary), body:has(> .tf-frame) .tf-page:has(#run-band) #run-summary > :not(.tf-run-doc) {
    --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: var(--ui-surface); --obsidian-line: var(--ui-border-strong); --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);
    --ivory: var(--ui-text-strong); --stone: var(--ui-text-muted); }
  /* a working or waiting task's band on the light page (UI batch 7): a white card, the steps on the soft surface, gold only in the bar and dots */
  body:has(> .tf-frame) .tf-page:has(#run-band) .hc-runband .tf-tl-list { background: var(--ui-surface-2); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .hc-runband .tf-tl-li { color: var(--ui-text); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .hc-runband .tf-tl-li-now { border-color: var(--ui-accent-line); background: var(--ui-accent-wash); color: var(--ui-text-strong); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .hc-runband .tf-tl-li-done::before { background-color: var(--ui-text-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' 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-page:has(#run-band) .hc-runband :is(.eyebrow, .tf-tl-line) { color: var(--ui-accent-text); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-doc .tf-doc-body p { font: 400 1.02rem/1.72 var(--hc-sans); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-doc .tf-doc-h { font: 700 1.12rem/1.35 var(--hc-sans); letter-spacing: 0; }
  body:has(> .tf-frame) .tf-page:has(#run-band) #run-about > :is(.tf-run-rail, .tf-fold) { margin: 0 0 12px; }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-rail { padding: 16px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-surface); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-rail-h { margin: 0 0 8px; padding: 0; font: 400 var(--ui-t-xl)/1.2 var(--hc-display); letter-spacing: 0; color: var(--ui-text-strong); }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-rail-list { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; list-style: disc; font-size: var(--ui-t-sm); line-height: 1.5; color: var(--ui-text); overflow-wrap: anywhere; }
  body:has(> .tf-frame) .tf-page:has(#run-band) .tf-run-rail-list > li::marker { color: var(--ui-text-muted); }
}
@media screen and (min-width: 1180px) {
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap:has(> #run-about > .tf-run-rail) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: repeat(10, auto) 1fr; column-gap: 32px; align-items: start; }
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap:has(> #run-about > .tf-run-rail) > * { grid-column: 1; min-width: 0; }
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap:has(> #run-about > .tf-run-rail) > :is(#run-recovery, #run-lines):empty { display: none; }
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap:has(> #run-about > .tf-run-rail) > #run-band { grid-column: 1 / -1; }
  body:has(> .tf-frame) .tf-page:has(#run-band) > .wrap:has(> #run-about > .tf-run-rail) > #run-about { grid-column: 2; grid-row: 2 / -1; }
}

/* ── The editor on the navy page (UI batch 4g, 2026-11-06; Tre's D2 and D3) ─────────────────────────────────────────────────────
   4f's way: the editor (only editor.php draws .se-wrap) re-points the product's roles and the court look's own names to batch 1's --ui-
   values on every child of its .wrap but #se-panes (the head, the bar, the status, the panel beside highlighted words, the foot, and the
   buttons the script puts after the status), so editor.css's own rules draw them navy in today's layout. The two papers in #se-panes keep
   today's white, ink and marks, in the run page's face (U11: editor.css already sets it). Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.se-wrap) { background: var(--ui-bg); }
  body:has(> .tf-frame) .se-wrap > :not(#se-panes) {
    --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: var(--ui-surface); --obsidian-line: var(--ui-border-strong); --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); }
}

/* ── The Library on the navy page: a grid of document types (UI batch 4h-1, 2026-11-06; Tre's D2 and D3) ──────────────────────────
   4c's to 4g's way: the Library (only Pages::library draws .hc-library) re-points the product's roles and the court look's own names to
   batch 1's --ui- values on its page and on .hc-library itself (so the OS-dark block above never applies here), so today's file list, search
   and notes draw navy in today's layout. The grid: cards at least 240 px wide (3 at 1280 px, 4 from about 1400, 2 at 768, 1 on a phone), each
   one link with the gold ring 3 px out (nothing above it clips: no overflow on the card or its ancestors); a hovered card's edge lightens, and it
   lifts 2 px only where the device hovers and motion is wanted; on a phone a card names only its newest file. Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.hc-library) { background: var(--ui-bg); }
  body:has(> .tf-frame) .tf-page:has(.hc-library), body:has(> .tf-frame) .tf-page .hc-library {
    --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); }
  body:has(> .tf-frame) .tf-page .hc-library { padding: 0; border-radius: 0; background: none; }
  body:has(> .tf-frame) .tf-page .hc-library .hc-kind { background: var(--ui-surface-3); color: var(--ui-text); }
  .hc-lib-back { display: inline-flex; align-items: center; gap: var(--ui-s-1); font-size: var(--ui-t-sm); color: var(--ui-text-strong); text-decoration: none; }
  .hc-lib-back:hover { text-decoration: underline; text-decoration-color: var(--ui-field-border); }
  .hc-lib-back .tf-i { width: 16px; height: 16px; }
  .hc-lib-scope { margin: 0 0 var(--ui-s-3); color: var(--ui-text); }
  .hc-lib-scope b { color: var(--ui-text-strong); font-weight: 600; }
  .hc-lib-scope a, .hc-library .tf-empty a { color: var(--ui-text-strong); text-decoration: underline; text-decoration-color: var(--ui-field-border); }
  .hc-lib-scope a:hover, .hc-library .tf-empty a:hover { text-decoration-color: currentColor; }
  .hc-lib-count { flex: 1; margin: 0; color: var(--ui-text); }
  .hc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--ui-s-4); margin: 0; padding: 0; list-style: none; }
  .hc-lib-grid > li { display: flex; min-width: 0; }
  .hc-lib-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ui-s-3); padding: var(--ui-s-5) var(--ui-s-5) var(--ui-s-4); border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-r-lg); background: var(--ui-surface); color: var(--ui-text); text-decoration: none; transition: border-color var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease); }
  .hc-lib-card:hover { border-color: var(--ui-field-border); background: var(--ui-surface-3); }
  .hc-lib-card:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
  .hc-lib-card-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--ui-s-3); align-items: center; }
  .hc-lib-ico { display: grid; place-items: center; grid-row: span 2; width: 36px; height: 36px; border-radius: var(--ui-r-md); background: var(--ui-surface-3); color: var(--ui-text); }
  .hc-lib-card-t { font-size: var(--ui-t-md); font-weight: 600; line-height: 1.3; color: var(--ui-text-strong); overflow-wrap: anywhere; }
  .hc-lib-card-c { font-size: var(--ui-t-sm); color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
  .hc-lib-hint { font-size: var(--ui-t-xs); color: var(--ui-text-muted); }
  .hc-lib-files { display: grid; gap: var(--ui-s-1); margin: 0; padding: var(--ui-s-3) 0 0; border-top: 1px solid var(--ui-border); list-style: none; font-size: var(--ui-t-sm); }
  .hc-lib-files li { display: flex; align-items: baseline; gap: var(--ui-s-2); min-width: 0; line-height: 1.5; }
  .hc-lib-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); }
  .hc-lib-d { flex: none; font-size: var(--ui-t-xs); color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
  .hc-lib-all { display: inline-flex; align-items: center; gap: var(--ui-s-1); margin-top: auto; font-size: var(--ui-t-sm); font-weight: 500; color: var(--ui-text-muted); }
  .hc-lib-card:is(:hover, :focus-visible) .hc-lib-all { color: var(--ui-text-strong); }
  .hc-lib-all .tf-i { width: 14px; height: 14px; }
}
@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hc-lib-card { transition: border-color var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease); }
  .hc-lib-card:hover { transform: translateY(-2px); }
}
@media screen and (max-width: 560px) {
  .hc-lib-grid { gap: var(--ui-s-3); }
  .hc-lib-card { padding: var(--ui-s-4); }
  .hc-lib-files li:nth-child(n+2) { display: none; }
}

/* ── The Library's type pages as a table, and Drafts by hiCourt (UI batch 4h-2, 2026-11-06) ─────────────────────────────────────────
   New rules only, on the classes only Pages::library draws (.hc-lib-table, .hc-lib-tablewrap, .hc-lib-pv); batch 1's --ui- values; screen only,
   so print and the court papers keep today's look. A file's name still opens the editor over its whole cell (4h-1's ::after, held to the cell), the
   tick's form and the row's buttons above it. At 860 px and under each row stacks: the name, then Added and Size with their words, then the buttons. */
@media screen {
  .hc-lib-tablewrap { border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface); }
  .hc-lib-table { width: 100%; border-collapse: collapse; font-size: var(--ui-t-sm); color: var(--ui-text); }
  .hc-lib-table th { padding: var(--ui-s-2) var(--ui-s-4); border-bottom: 1px solid var(--ui-border-strong); text-align: left; font-size: var(--ui-t-xs); font-weight: 600; letter-spacing: .02em; color: var(--ui-text-muted); }
  .hc-lib-table td { padding: var(--ui-s-2) var(--ui-s-4); border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
  .hc-lib-table tbody tr:last-child td { border-bottom: 0; }
  .hc-lib-table tbody tr:not(.hc-lib-pvrow):hover td { background: var(--ui-surface-3); }
  .hc-lib-table td.hc-lib-fcell { position: relative; min-width: 0; overflow-wrap: anywhere; }
  .hc-lib-f { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 var(--ui-s-3); align-items: center; }
  .hc-lib-f > * { grid-column: 2; min-width: 0; }
  .hc-lib-f > .hc-kind { grid-column: 1; grid-row: 1 / span 6; width: 24px; height: 28px; }
  .hc-lib-table .hc-file-name b { font-weight: 500; color: var(--ui-text-strong); }
  .hc-lib-f .hc-file-name > small { display: block; }
  .hc-lib-f > .tf-by, .hc-lib-drafts .hc-lib-fcell > .tf-by { display: block; margin: 2px 0 0; color: var(--ui-text-muted); }
  .hc-lib-table .hc-lib-fcell form { position: relative; z-index: 1; margin: var(--ui-s-1) 0 0; }
  .hc-lib-table a.hc-file-name:not(.hc-file-open) { color: inherit; text-decoration: none; }
  .hc-lib-drafts a.hc-file-name { display: grid; grid-template-columns: minmax(0, 1fr); }   /* a Draft's one-line name gives way (its "…"), never the frame */
  .hc-lib-table a.hc-file-name:not(.hc-file-open):hover b { text-decoration: underline; text-decoration-color: var(--ui-field-border); }
  .hc-lib-table .hc-file-date, .hc-lib-table .hc-file-size { white-space: nowrap; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
  .hc-lib-table td.hc-lib-acts { padding-top: var(--ui-s-1); padding-bottom: var(--ui-s-1); text-align: right; white-space: nowrap; }
  .hc-lib-table td.hc-lib-acts .btn { position: relative; z-index: 1; margin-left: var(--ui-s-2); }
  .hc-lib-table td.hc-lib-acts .btn:first-child { margin-left: 0; }
  .hc-lib-table tr.hc-lib-pvrow td { padding: 0 var(--ui-s-4) var(--ui-s-3); background: var(--ui-surface-2); }
  .hc-lib-pv { padding: var(--ui-s-3) 0 0; }
  .hc-lib-pv p { margin: 0; color: var(--ui-text-muted); }
  .hc-lib-pv-x { max-height: 16em; margin: 0 0 var(--ui-s-2); padding: var(--ui-s-3); overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-r-md);
    background: var(--ui-surface); color: var(--ui-text); font-family: inherit; font-size: var(--ui-t-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .hc-library .tf-lib-find:has(input[name="type"]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s-2) var(--ui-s-3); margin: 0 0 var(--ui-s-4); }
  .hc-library .tf-lib-find:has(input[name="type"]) input[type="search"] { flex: 1 1 220px; min-width: 0; }
}
@media screen and (max-width: 860px) {
  .hc-lib-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hc-lib-table, .hc-lib-table tbody { display: block; }
  .hc-lib-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-s-1) var(--ui-s-3); padding: var(--ui-s-3) var(--ui-s-4); border-bottom: 1px solid var(--ui-border); }
  .hc-lib-table tbody tr:last-child { border-bottom: 0; }
  .hc-lib-table tbody td { display: block; padding: 0; border: 0; }
  .hc-lib-table td.hc-lib-fcell { grid-column: 1 / -1; }
  .hc-lib-table td.hc-file-date::before, .hc-lib-table td.hc-file-size::before { content: attr(data-label) " "; color: var(--ui-text-muted); }
  .hc-lib-table td.hc-lib-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ui-s-2); text-align: left; white-space: normal; }
  .hc-lib-table td.hc-lib-acts:empty { display: none; }
  .hc-lib-table td.hc-lib-acts .btn { margin-left: 0; min-height: 40px; }
  .hc-lib-table tr.hc-lib-pvrow { display: block; padding: 0 var(--ui-s-4) var(--ui-s-3); }
  .hc-lib-table tr.hc-lib-pvrow td { padding: 0; background: none; }
}

/* ── Profile on the navy page (UI batch 4i, 2026-11-06; Tre's D2 and D3) ────────────────────────────────────────────────────────────
   4c's to 4h's way: the Profile (only Pages::profile draws .tf-profile) re-points the product's roles and the court look's own names to batch 1's
   --ui- values, so today's card, sections, picture and lines draw navy in today's layout. U23: each form is one grid, a label column of one
   width on all three forms and the fields beside it, each field on its label's first line (a hint that wraps stays in the label's column and
   never pushes a field down), the button under the fields; at 600 px and under each label sits over its field. Screen only: print keeps today's look. */
@media screen {
  body:has(> .tf-frame):has(.tf-profile) { background: var(--ui-bg); }
  body:has(> .tf-frame) .tf-profile {
    --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); }
  body:has(> .tf-frame) .tf-profile .tf-profile-form { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .field { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0 var(--ui-s-4); align-items: baseline; }
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .field > label { margin: 0; }
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .btn { margin-left: calc(12.5rem + var(--ui-s-4)); }
}
@media screen and (max-width: 600px) {
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .field { grid-template-columns: minmax(0, 1fr); }
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .field > label { margin: 0 0 .45em; }
  body:has(> .tf-frame) .tf-profile .tf-profile-form > .btn { margin-left: 0; }
}

/* ── Type and targets for older readers (UI batch 7, dispatch 1774; the partner, 2026-11-06: "the text needs to be bigger on everything") ──
   Body, buttons, nav, tabs and fields at 17 px, card titles 18 px, nothing under 14 px; every control at least 44 px tall and a list row 48.
   Each rule is the court look's own selector with the frame's prefix, so it outranks the rule it resizes and print keeps today's sizes. Screen
   only. The Draft's paper and court papers keep their own sizes (the read view's body is already 16.3 px). */
@media screen {
  body:has(> .tf-frame), body:has(> .tf-frame) .tf-page, body:has(> .tf-frame) .tf-mpage { font-size: 17px; }
  /* 17 px: the nav, every button, the tabs, the fields, the running text */
  body:has(> .tf-frame) .topbar.tf-frame nav, body:has(> .tf-frame) .topbar.tf-frame nav a.hc-cta, body:has(> .tf-frame) .tf-frame .tf-new-matter-link,
  body:has(> .tf-frame) .btn, body:has(> .tf-frame) .hc-btn-sm, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-choose, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-choose.hc-btn-sm,
  body:has(> .tf-frame) .hc-go, body:has(> .tf-frame) .tf-go .btn-primary, body:has(> .tf-frame) .hc-mhead .tf-about-btn, body:has(> .tf-frame) .tf-back,
  body:has(> .tf-frame) .tf-more > summary, body:has(> .tf-frame) .tf-fold > summary, body:has(> .tf-frame) .hc-tabs a,
  body:has(> .tf-frame) .tf-details-form :is(input, select), body:has(> .tf-frame) .hc-launch .tf-find input:not([type="radio"], [type="checkbox"]), body:has(> .tf-frame) .tf-ask-shelf .field :is(input[type="text"], textarea, select),
  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 *),
  body:has(> .tf-frame) .tf-ask-shelf .field > label, body:has(> .tf-frame) .tf-ask-shelf .tf-field label, body:has(> .tf-frame) .tf-files-h h3, body:has(> .tf-frame) .tf-file-choice b,
  body:has(> .tf-frame) .tf-lede, body:has(> .tf-frame) .tf-prose, body:has(> .tf-frame) .tf-restate p, body:has(> .tf-frame) .tf-task-line, body:has(> .tf-frame) .tf-matter-intro p:not(.eyebrow),
  body:has(> .tf-frame) .hc-mhead .tf-about, body:has(> .tf-frame) .hc-mhead .tf-facts, body:has(> .tf-frame) .hc-hero .tf-card-l, body:has(> .tf-frame) .tf-status,
  body:has(> .tf-frame) .tf-end ul.tf-end-loud > li, body:has(> .tf-frame) .tf-end li.tf-end-loud, body:has(> .tf-frame) table.tf-table,
  body:has(> .tf-frame) .hc-runband[data-state="working"] #run-status, body:has(> .tf-frame) .hc-runband[data-state="waiting"] #run-status { font-size: 17px; }
  /* 18 px: a listed task's title */
  body:has(> .tf-frame) .hc-pill .tf-card-t { font-size: 18px; }
  /* 16 px: the matters, file names, card and panel lines, the band's facts, the chips and the file menu */
  body:has(> .tf-frame) .tf-frame .tf-matter a, body:has(> .tf-frame) .tf-frame .tf-side-search input, body:has(> .tf-frame) .hc-firm, body:has(> .tf-frame) .tf-frame .tf-who-name, body:has(> .tf-frame) .tf-switch,
  body:has(> .tf-frame) .hc-card .tf-card-l, body:has(> .tf-frame) .hc-hero .tf-card-l.hc-hero-l, body:has(> .tf-frame) .hc-file-n, body:has(> .tf-frame) .hc-file-name > b,
  body:has(> .tf-frame) .hc-vault-sub, body:has(> .tf-frame) .hc-vault-empty, body:has(> .tf-frame) .tf-go-panel, body:has(> .tf-frame) .tf-end, body:has(> .tf-frame) .tf-know,
  body:has(> .tf-frame) .hc-launch .tf-task-none, body:has(> .tf-frame) .hc-mhead .hc-pills li, body:has(> .tf-frame) .tf-filter label, body:has(> .tf-frame) .tf-work-strip,
  body:has(> .tf-frame) .hc-pick-confirm p, body:has(> .tf-frame) .hc-pick-note, body:has(> .tf-frame) .tf-launch-outcome, body:has(> .tf-frame) .hc-mhead .tf-about :is(h2, h3),
  body:has(> .tf-frame) .hc-runband .tf-tl-line, body:has(> .tf-frame) .hc-runband .tf-tl-h, body:has(> .tf-frame) .hc-runband .tf-tl-li,
  body:has(> .tf-frame) .hc-sort-chip, body:has(> .tf-frame) .hc-sort-pill, body:has(> .tf-frame) .hc-file-actions .hc-sort-pill { font-size: 16px; }
  /* 15 px: second lines */
  body:has(> .tf-frame) .tf-frame .tf-pager-a, body:has(> .tf-frame) .hc-dropzone p, body:has(> .tf-frame) .tf-quiet, body:has(> .tf-frame) .tf-empty,
  body:has(> .tf-frame) .hc-mhead .hc-pills li.hc-case, body:has(> .tf-frame) .hc-hero .hc-tag, body:has(> .tf-frame) .hc-runband .tf-meta, body:has(> .tf-frame) .hc-group-t,
  body:has(> .tf-frame) .hc-tier-more .tf-shelf-gh, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-files li .tf-drop-btn, body:has(> .tf-frame) .hc-pick, body:has(> .tf-frame) .hc-pick-all,
  body:has(> .tf-frame) .hc-file-w, body:has(> .tf-frame) .hc-file-p, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-files li b, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-files li .tf-drop-problem,
  body:has(> .tf-frame) .hc-pill .tf-card-l { font-size: 15px; }
  /* 14 px, the floor: dates, counts, references, badges, hints */
  body:has(> .tf-frame) .hc-eyebrow, body:has(> .tf-frame) .eyebrow, body:has(> .tf-frame) .hc-running, body:has(> .tf-frame) .tf-nav-k, body:has(> .tf-frame) .topbar.tf-frame h2.tf-rail-h,
  body:has(> .tf-frame) .hc-mref, body:has(> .tf-frame) .tf-frame :is(.tf-side-none, .tf-side-pages), body:has(> .tf-frame) .tf-frame .tf-who-label, body:has(> .tf-frame) .tf-switch-t span,
  body:has(> .tf-frame) .tf-chip, body:has(> .tf-frame) .chip, body:has(> .tf-frame) .hc-mhead h1 .tf-chip.tf-invented, body:has(> .tf-frame) table.tf-table thead th, body:has(> .tf-frame) .tf-by,
  body:has(> .tf-frame) .hc-mhead .hc-pills li.hc-mono, body:has(> .tf-frame) .hc-group-c, body:has(> .tf-frame) .hc-dropzone .hc-drop-note, body:has(> .tf-frame) .tf-ask-shelf .tf-count,
  body:has(> .tf-frame) .tf-ask-shelf .tf-drop-files li .tf-drop-state, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-hint, body:has(> .tf-frame) .tf-files-rule, body:has(> .tf-frame) .tf-file-choice small,
  body:has(> .tf-frame) .tf-restate .tf-task-out, body:has(> .tf-frame) .tf-task-expectation, body:has(> .tf-frame) .tf-go-note, body:has(> .tf-frame) .hc-runband .tf-tl-li::after,
  body:has(> .tf-frame) .hc-runband[data-state="finished"] #run-status, body:has(> .tf-frame) table.tf-table td[data-label]::before, body:has(> .tf-frame) .hc-file-f,
  body:has(> .tf-frame) .hc-file-name > small, body:has(> .tf-frame) .hc-library .tf-lib-list .hc-file-name .tf-by, body:has(> .tf-frame) :is(.hc-file-cat, .hc-file-size, .hc-file-date),
  body:has(> .tf-frame) .hc-vault-list .hc-group li > .hc-file-date, body:has(> .tf-frame) .hc-library .tf-lib-list li > .hc-file-date, body:has(> .tf-frame) .hc-file-actions .hc-file-f,
  body:has(> .tf-frame) .hc-library .hc-kind, body:has(> .tf-frame) .hc-kind { font-size: 14px; letter-spacing: 0; }
  /* the file-type tile holds its 14 px word ("DOCX"); the rows' first track widens to it */
  body:has(> .tf-frame) .hc-kind { width: auto; min-width: 44px; height: 32px; padding: 0 4px; }
  body:has(> .tf-frame) .hc-lib-f { grid-template-columns: 52px minmax(0, 1fr); }
  body:has(> .tf-frame) .hc-lib-f > .hc-kind { width: 48px; }
  /* 44 px targets: the sidebar's links and search, every button, chip, menu item, fold, field and tab; a list row 48 */
  body:has(> .tf-frame) .topbar.tf-frame nav a, body:has(> .tf-frame) .topbar.tf-frame nav a.hc-cta, body:has(> .tf-frame) .tf-frame .tf-new-matter-link, body:has(> .tf-frame) .tf-frame .tf-side-search input,
  body:has(> .tf-frame) .tf-frame .tf-pager-a, body:has(> .tf-frame) .btn, body:has(> .tf-frame) .hc-btn-sm, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-choose, body:has(> .tf-frame) .tf-ask-shelf .tf-drop-choose.hc-btn-sm,
  body:has(> .tf-frame) .tf-ask-shelf .tf-drop-files li .tf-drop-btn, body:has(> .tf-frame) .hc-sort-chip, body:has(> .tf-frame) .hc-sort-pill, body:has(> .tf-frame) .hc-file-actions .hc-sort-pill,
  body:has(> .tf-frame) .hc-file-actions .hc-sort-menu button, body:has(> .tf-frame) .hc-group > summary, body:has(> .tf-frame) .tf-fold > summary, body:has(> .tf-frame) .tf-more > summary,
  body:has(> .tf-frame) .hc-mhead .tf-about-btn, body:has(> .tf-frame) .tf-back, body:has(> .tf-frame) .hc-launch .tf-find input:not([type="radio"], [type="checkbox"]), body:has(> .tf-frame) .tf-details-form :is(input, select),
  body:has(> .tf-frame) .tf-ask-shelf .field :is(input[type="text"], select), body:has(> .tf-frame) .hc-pick, body:has(> .tf-frame) .hc-pick-all, body:has(> .tf-frame) .hc-file-menu > summary,
  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])), select):not(.tf-frame *, .tf-run-doc *),
  body:has(> .tf-frame) .tf-frame .brand, body:has(> .tf-frame) .hc-lib-back, body:has(> .tf-frame) #se-back, body:has(> .tf-frame) table.tf-table td a,
  body:has(> .tf-frame) label:has(> input:is([type="radio"], [type="checkbox"])) { min-height: 44px; }
  body:has(> .tf-frame) .hc-lib-back, body:has(> .tf-frame) #se-back, body:has(> .tf-frame) table.tf-table td a,
  body:has(> .tf-frame) label:has(> input:is([type="radio"], [type="checkbox"])) { display: inline-flex; align-items: center; }
  body:has(> .tf-frame) .tf-frame .brand { display: inline-flex; align-items: center; }
  body:has(> .tf-frame) .tf-frame .tf-matter a { min-height: 48px; }
  body:has(> .tf-frame) .hc-vault-list a.hc-file-name { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
  /* the plain pages' buttons (new matter, profile): their own rule outranks the frame's, so it is named here too */
  body:has(> .tf-frame) .tf-mpage .btn:not(.btn-primary) { min-height: 44px; font-size: 17px; }
  /* the Library's tables: a file's name is a 44 px target and its buttons keep 44 px on a phone */
  body:has(> .tf-frame) .hc-lib-table a.hc-file-name { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 44px; }
  body:has(> .tf-frame) .hc-lib-table td.hc-lib-acts .btn { min-height: 44px; }
  /* a long file name wraps onto a second line instead of ending in "…" */
  body:has(> .tf-frame) :is(.hc-file-n, .hc-file-name > b, .hc-file-name > small, .hc-file-cat, .hc-lib-n) { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
  /* the Draft's "Look up cases" Yes/No: the two answers sit centred on the question's line */
  body:has(> .tf-frame) .tf-find:is([data-find-authority], [data-authority]) { align-items: center; }
  /* the current page in the sidebar: weight and a gold bar (the partner: "clearly marked") */
  body:has(> .tf-frame) .topbar.tf-frame nav a[aria-current="page"]:not(.hc-cta) { font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
  /* signed out: the set-password page's "Sign in" link is a 44 px target in its sentence */
  .tf-signin p > a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Room and width (UI batch 7b, dispatch 1776; the partner, 2026-11-06: "a lot of space not being used, and all the tasks, etc seem condensed") ──
   The matter page takes the other pages' column (court's .wrap: 1,240 px with 32 px gutters, 1,176 px of content), centred right of the sidebar;
   the band's and the tabs' boxes, their cream and their gold rule stay full width, and only their contents line up with the column. The tasks
   are a grid of cards like the Library's (2 or 3 across from 1,181 px, 1 on a phone; Draft first and across the grid), and the Case Vault takes
   the column's width under them, so its category chips wrap in fewer rows. Screen only: print keeps today's look. */
@media screen and (min-width: 861px) {
  body:has(> .tf-frame) .tf-mpane { --hc-gutter: max(32px, calc((100% - 1176px) / 2)); }
  body:has(> .tf-frame) .tf-mpane > .hc-mhead, body:has(> .tf-frame) .tf-mpane .hc-bench { padding-left: var(--hc-gutter); padding-right: var(--hc-gutter); }
  body:has(> .tf-frame) .tf-mpane > .hc-tabs { padding-left: calc(var(--hc-gutter) - 10px); padding-right: calc(var(--hc-gutter) - 10px); }
  body:has(> .tf-frame) .tf-mpane > :not(.hc-mhead):not(.hc-tabs):not(.tf-ask-shelf):not(script):not(#drop) { margin-left: var(--hc-gutter); margin-right: var(--hc-gutter); }
}
@media screen {
  /* the bench in one column at every width: what to do first, then the files (the order under 1,180 px since the court look) */
  body:has(> .tf-frame) .hc-bench { grid-template-columns: minmax(0, 1fr); }
  body:has(> .tf-frame) .hc-bench > .hc-launch { order: -1; }
  /* the tasks: a grid of cards, each one button; Draft across the grid; the joined list's shared edges, corners and box are gone */
  body:has(> .tf-frame) .hc-shelf :is(.hc-engines, .hc-pills) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0;
    overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body:has(> .tf-frame) .hc-shelf :is(.hc-engines, .hc-pills) > li { display: flex; min-width: 0; margin: 0; border: 0; }
  body:has(> .tf-frame) .hc-shelf .hc-engines > li.hc-hero-li { grid-column: 1 / -1; }
  body:has(> .tf-frame) .hc-shelf .tf-card:is(.hc-card:not(.hc-hero), .hc-pill) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 12px;
    width: 100%; padding: 20px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface); box-shadow: none; }
  body:has(> .tf-frame) .hc-shelf .tf-card:is(.hc-card:not(.hc-hero), .hc-pill):hover { border-color: var(--ui-field-border); }
  body:has(> .tf-frame) .hc-shelf .hc-card:not(.hc-hero) > .hc-card-top, body:has(> .tf-frame) .hc-shelf .hc-pill > .tf-ico { grid-column: 1; grid-row: 1; }
  body:has(> .tf-frame) .hc-shelf .hc-card:not(.hc-hero) > .hc-go, body:has(> .tf-frame) .hc-shelf .tf-card.hc-pill::after { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  body:has(> .tf-frame) .hc-shelf :is(.hc-card:not(.hc-hero), .hc-pill) > .tf-card-x { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 6px; }
  body:has(> .tf-frame) .hc-shelf .hc-pill .tf-ico { width: 40px; height: 40px; border-radius: 8px; }
  body:has(> .tf-frame) .hc-shelf .hc-pill .tf-ico svg { width: 18px; height: 18px; }
  /* each card's title at 18 px, and its one-line description under it in full: it wraps, never "…" */
  body:has(> .tf-frame) .hc-shelf :is(.hc-card:not(.hc-hero), .hc-pill) .tf-card-t { font: 600 18px/1.3 var(--hc-sans); color: var(--ui-text-strong); }
  body:has(> .tf-frame) .hc-shelf :is(.hc-card:not(.hc-hero), .hc-pill) .tf-card-l { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ui-text-muted); white-space: normal; overflow-wrap: anywhere; }
  body:has(> .tf-frame) .hc-shelf .hc-tier-more .tf-shelf-gh { margin: 0 0 12px; }
  /* a narrow Case Vault (a phone): its category chips in one row that scrolls sideways, so the files show under them; each chip still filters */
  @container (max-width: 700px) {
    body:has(> .tf-frame) .hc-vault .hc-sort-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-top: 4px; }   /* flex: none, or the list box squeezes the strip to a sliver */
    body:has(> .tf-frame) .hc-vault .hc-sort-chips > .hc-sort-chip { flex: none; }
    /* each file's date on its own line under its category: at 7a's 14 px the date no longer fits in the 116 px kept for it beside the category */
    body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault-list .hc-group li > :is(.hc-pick, .hc-kind, .tf-i, .hc-file-menu) { grid-row: 1 / span 3; }
    body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault-list .hc-group li > .hc-file-cat { padding-right: 0; }
    body:has(> .tf-frame) .tf-mpane:has(> .hc-mhead) .hc-vault-list .hc-group li > .hc-file-date { grid-column: 3; grid-row: 3; justify-self: start; }
  }
}