/* ==========================================================================
   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: #C5A059; --gold-deep: #9C7A3A; --gold-ink: #80612A; --gold-wash: #F5EFE5;
    --verdict: #2F6A4A; --verdict-wash: #E6EAE4; --caution-ink: #8A5C10; --breach: #8E3B2F; --breach-wash: #EFE5E1;
    /* 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: obsidian, the mark and the firm, the call to action, the nav, the matters, the person ── */
@media screen {
  .topbar.tf-frame {
    color-scheme: dark;
    --bg: var(--obsidian); --bg-alt: var(--obsidian); --surface: #20201E; --surface-2: #191917;
    --fg: #B3B1AB; --fg-strong: var(--ivory); --muted: var(--stone); --rule: var(--obsidian-line); --rule-strong: #3A3935; --field-line: #6E6B64;
    --accent: var(--gold); --accent-ink: var(--gold); --accent-fg: var(--obsidian); --accent-soft: #242017; --focus: var(--gold);
    --mark-ink: #ECEADE; --mark-frame: var(--gold);
  }
  html[data-tone] .tf-frame .brand-mark .mk-frame { fill: url(#hc-gold); }
}
.topbar.tf-frame { width: var(--frame-w); background: var(--obsidian); border-right: 1px solid var(--obsidian-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(--obsidian-line); }
.tf-frame .brand { padding: 0; min-height: 0; font-size: 28px; gap: 2px; color: var(--ivory); 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(--ivory); }
.hc-firm { align-self: flex-start; margin: 0; padding: 0 0 0 2px; font: 500 12px/1.4 var(--hc-sans); color: var(--stone); 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(--stone); 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: #191917; color: var(--ivory); }
.topbar.tf-frame nav a[aria-current="page"] { background: #20201E; color: var(--ivory); 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, gold outline, filled on hover */
.topbar.tf-frame nav a.hc-cta { justify-content: center; gap: 8px; min-height: 42px; margin: 0 4px 14px; border: 1px solid rgb(197 160 89 / .6); background: #242017; color: var(--gold); 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: var(--gold); color: var(--obsidian); }
.topbar.tf-frame nav a.hc-cta:hover .tf-i { color: var(--obsidian); }
.topbar.tf-frame nav a.hc-cta[aria-current="page"] { background: #242017; color: var(--gold); }
.hc-running { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 8px 2px 6px; border-radius: 999px; background: #242017; font: 500 11px/1.3 var(--hc-sans); font-variant-numeric: tabular-nums; color: var(--gold); 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(--stone); }
/* "Your matters" */
.tf-frame-matters { gap: 0; padding: 22px 12px 12px; border-top: 1px solid var(--obsidian-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(--stone); }
.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: #B3B1AB; font: 400 13px/1.2 var(--hc-sans); text-decoration: none; }
.tf-frame .tf-new-matter-link:hover { color: var(--ivory); }
.tf-frame .tf-new-matter-link:hover { background: #191917; }
.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(--ivory); background: #191917; border: 1px solid var(--field-line); border-radius: 6px; }
.tf-frame .tf-side-search input::placeholder { color: var(--stone); }
/* 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: #B3B1AB; font: 400 12.5px/1.35 var(--hc-sans); }
.tf-frame .tf-matter a:hover { background: #191917; color: var(--ivory); }
.tf-frame .tf-matter a[aria-current="page"] { background: #20201E; color: var(--ivory); 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(--stone); 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(--stone); text-decoration: none; }
.tf-frame .tf-pager-a:hover { color: var(--ivory); }
.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(--obsidian-line); }
.tf-frame-who { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px; border-radius: 6px; color: var(--ivory); text-decoration: none; }
.tf-frame-who:hover { background: #191917; }
.tf-frame-who[aria-current="page"] { background: #20201E; }
.tf-frame .tf-avatar { width: 36px; height: 36px; flex: none; border: 1px solid rgb(197 160 89 / .4); background: #1A1A18; 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(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-frame .tf-who-label { font: 400 12px/1.4 var(--hc-sans); color: var(--stone); 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); }

/* ── 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; }
.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, .hc-launch:has(#task-screen:not([hidden])) > .hc-docs, .hc-launch:has(#task-screen:not([hidden])) > #slot-matter-documents { 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 { 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 { 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: none; }
.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; }
.hc-vault-empty { margin: 0; padding: 0 20px 4px; font-size: 13px; color: var(--ink-muted); }
.hc-vault-empty[hidden] { 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 reviewed documents */
.hc-docs { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); }
.hc-docs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 20px 4px; }
body:has(> .tf-frame) .hc-docs-head h2 { margin: 0; font: 400 24px/1.1 var(--hc-display); letter-spacing: -0.01em; }
.hc-count { font: 500 12px/1 var(--hc-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.hc-docs > .tf-empty, .hc-docs > .tf-quiet { margin: 0; padding: 0 20px 16px; font-size: 13px; color: var(--ink-muted); max-width: 40rem; }
.hc-docs .tf-tablewrap { border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.hc-docs table.tf-table thead th { padding: 8px 20px; }
.hc-docs table.tf-table td { padding: 14px 20px; }
.hc-docs table.tf-table td:first-child { width: 58%; }
.hc-file { display: flex; align-items: center; gap: 10px; }
.hc-file .tf-i { width: 16px; height: 16px; color: var(--gold-deep); }
.hc-file .hc-mono { min-width: 0; font: 500 13px/1.4 var(--hc-sans); color: var(--ink); overflow-wrap: break-word; }
.hc-docs .tf-by { display: block; margin-top: 2px; font-size: 12px; }
.hc-docs td .tf-by { padding-left: 26px; }
.hc-docs td + td .tf-by { padding-left: 0; }
.hc-launch > #slot-matter-documents { margin: 0; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); }
.hc-launch > #slot-matter-documents h2 { margin: 0 0 4px; font: 400 24px/1.1 var(--hc-display); }

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

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

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

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

/* ── 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(--obsidian-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: #191917; color: var(--ivory); font: 400 13px/1.3 var(--hc-sans); }
  .tf-switch-t span { font-size: 11.5px; color: var(--stone); }
  .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-docs td:first-child { width: auto; }
  .hc-docs td .tf-by { padding-left: 0; }
  .hc-file .hc-mono { overflow-wrap: anywhere; }
  .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; }
}
/* 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 { min-height: 44px; }
  .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; }
}