/* ==========================================================================
   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 labels, references and file names.

   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: 6px;
    --frame-w: 260px;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body:has(> .tf-frame), body:has(> .tf-frame) .tf-page { font: 400 14px/1.55 var(--hc-sans); }
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: 400 10.5px/1.4 var(--hc-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.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: 4px 8px; border: 1px solid var(--obsidian-line); border-radius: 3px; background: #191917;
  font: 400 9.5px/1.4 var(--hc-mono); letter-spacing: .12em; text-transform: uppercase; 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: 4px; flex: none; padding: 2px 5px; border-radius: 3px; background: #242017; font: 400 9.5px/1.2 var(--hc-mono); 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: 12px 0 2px; padding: 0 10px; font: 400 10px/1.4 var(--hc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
/* "Your matters" */
.tf-frame-matters { gap: 0; padding: 22px 12px 12px; }
.tf-frame-matters-body { gap: 10px; }
.topbar.tf-frame h2.tf-rail-h { margin: 0; padding: 0 10px; font: 400 10px/1.4 var(--hc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.tf-frame .tf-new-matter-link { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: 6px; color: var(--ivory); font: 400 12.5px/1.2 var(--hc-sans); text-decoration: none; }
.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); }
.tf-frame .tf-rail-k { margin: 0; padding: 0 10px; font: 400 10.5px/1.4 var(--hc-sans); color: var(--stone); }
.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 { min-height: 32px; font: 400 12px/1.3 var(--hc-sans); color: var(--ivory); text-decoration-color: var(--field-line); }
.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 10.5px/1.4 var(--hc-mono); 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); }
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); border-radius: var(--radius); background: var(--bg-alt); 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 / .3); background: var(--wash); 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: 4px; min-height: 32px; padding: 0 9px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); color: var(--fg-strong); font: 400 12px/1.2 var(--hc-sans); cursor: pointer; }
.hc-btn-sm:hover { border-color: rgb(22 22 20 / .3); }
.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: 400 10px/1.3 var(--hc-mono); letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; }
body:has(> .tf-frame) table.tf-table { font: 400 12.5px/1.5 var(--hc-sans); border-collapse: collapse; }
body:has(> .tf-frame) table.tf-table thead th { padding: 8px 14px; font: 400 10px/1.4 var(--hc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border-bottom: 1px solid var(--rule); }
body:has(> .tf-frame) table.tf-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
body:has(> .tf-frame) .tf-tablewrap { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); 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) 330px; gap: 20px 28px; align-items: start; padding: 20px 32px 18px; border-bottom: 1px solid var(--rule); }
.hc-mhead-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hc-mhead h1 { margin: 0; font: 400 clamp(30px, 3.2vw, 38px)/1.12 var(--hc-display); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.hc-mhead h1 .tf-chip { vertical-align: middle; }
.hc-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgb(47 106 74 / .3); border-radius: 3px; background: var(--verdict-wash);
  font: 500 10px/1.2 var(--hc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--verdict); white-space: nowrap; }
.hc-status .hc-dot { background: var(--verdict); animation: none; }
.hc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.hc-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-alt); font: 400 11.5px/1.4 var(--hc-sans); color: var(--ink-muted); }
.hc-pills li.hc-mono { font: 400 11px/1.4 var(--hc-mono); color: var(--ink); }
.hc-pills .tf-i { width: 14px; height: 14px; color: var(--gold-deep); flex: none; }
.hc-mhead .tf-meta-row { column-gap: 16px; margin-top: 2px; }
/* "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 — unlike the fact pills beside it, which are not controls */
.hc-mhead .tf-about-btn { gap: 6px; min-height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 1px 0 rgb(22 22 20 / .05); font: 500 12.5px/1.2 var(--hc-sans); color: var(--ink); 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); }
.hc-mhead .tf-about { grid-column: 1 / -1; margin: 0; padding: 16px; border: 1px solid var(--rule); background: var(--bg-alt); font-size: 13px; }
.hc-mhead .tf-about h2, .hc-mhead .tf-about h3 { font: 600 12.5px/1.4 var(--hc-sans); margin: 12px 0 4px; }
.hc-mhead .tf-facts { font-size: 13px; }
.hc-recordcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); }
.hc-rc-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 400 13px/1.4 var(--hc-sans); color: var(--ink); }
.hc-rc-line .tf-i { width: 16px; height: 16px; margin-top: 1px; color: var(--gold-deep); flex: none; }
.hc-rc-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink-muted); }
.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; }
.hc-recordcard .btn { width: 100%; min-height: 38px; }
/* the tabs */
.hc-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 12px 32px 0; border-bottom: 1px solid var(--rule); background: rgb(250 248 245 / .95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hc-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px 12px; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-muted); font: 400 13px/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: 500; }
.hc-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--ink); }
.hc-tab-k { font: 400 10px/1 var(--hc-mono); letter-spacing: .12em; color: var(--ink-muted); }
.hc-tabs a[aria-current="page"] .hc-tab-k { color: var(--gold-ink); }

/* 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: 24px; align-items: start; padding: 24px 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: 24px; }

/* the vault */
.hc-vault { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.hc-vault[data-over="1"] { outline: 2px dashed var(--gold-deep); outline-offset: 4px; }
.hc-vault-head { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.hc-vault-head h2 { margin: 0; font: 400 24px/1 var(--hc-display); color: var(--ink); }
.hc-vault-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-muted); }
.hc-vault-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.hc-vault-row .hc-btn-sm { margin-left: auto; }
.hc-ok { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid rgb(47 106 74 / .3); border-radius: 3px; background: var(--verdict-wash); font: 400 10px/1.2 var(--hc-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verdict); white-space: nowrap; }
.hc-ok[hidden] { display: none; }
.hc-ok .tf-i { width: 12px; height: 12px; }
.hc-vault > .hc-meter { height: 4px; border-radius: 0; }
.hc-vault > .hc-meter > span { border-radius: 0; background: var(--ink); }
.hc-vault-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.hc-vault-list { display: flex; flex-direction: column; gap: 12px; }
.hc-vault-list:empty { display: none; }
.hc-group { border: 1px solid var(--rule); border-radius: var(--radius); background: rgb(243 239 234 / .6); }
.hc-group-problem { border-color: rgb(142 59 47 / .35); background: var(--breach-wash); }
.hc-group > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer; list-style: none; }
.hc-group > summary::-webkit-details-marker { display: none; }
.hc-group > summary::after { content: ""; width: 7px; height: 7px; 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 { font: 400 10.5px/1 var(--hc-mono); color: var(--ink-muted); }
.hc-group-t { font: 500 12.5px/1.3 var(--hc-sans); color: var(--ink); }
.hc-group-c { font: 400 12px/1 var(--hc-mono); color: var(--ink-muted); }
.hc-group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(226 221 213 / .8); }
.hc-group li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 8px 12px; border-bottom: 1px solid rgb(226 221 213 / .6); }
.hc-group li:last-child { border-bottom: 0; }
.hc-group li > .tf-i { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 2px; color: var(--ink-muted); }
.hc-group li[data-state="problem"] > .tf-i { color: var(--breach); }
.hc-file-n { grid-column: 2; font: 400 11.5px/1.45 var(--hc-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-file-f { grid-column: 2; font: 400 11px/1.4 var(--hc-mono); color: var(--ink-muted); }
.hc-group li[data-state="reading"] .hc-file-f, .hc-group li[data-state="uploading"] .hc-file-f { color: var(--caution-ink); }
.hc-file-p { grid-column: 2; font: 400 11.5px/1.45 var(--hc-sans); color: var(--breach); }
.hc-vault-empty { margin: 0; padding: 4px 4px 0; font-size: 12.5px; color: var(--ink-muted); }
.hc-vault-empty[hidden] { display: none; }
.hc-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1px dashed rgb(22 22 20 / .25); border-radius: var(--radius); background: rgb(243 239 234 / .4); 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: 20px; height: 20px; color: var(--ink-muted); }
.hc-dropzone p { margin: 0; max-width: 22rem; font-size: 12px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.hc-dropzone .hc-drop-note { font-size: 11px; }

/* the shelf: the heading, the four cards (Draft dark), the pills */
.hc-launch .tf-shelf { margin: 0; }
.hc-launch .tf-shelf-top { align-items: flex-end; gap: 12px 20px; }
.hc-shelf-h { display: flex; flex-direction: column; gap: 4px; }
.hc-launch .tf-shelf-top h2 { margin: 0; font: 400 26px/1.05 var(--hc-display); letter-spacing: -0.01em; color: var(--ink); }
.hc-launch .tf-find { flex: 0 1 260px; }
.hc-launch .tf-find .tf-i { left: 10px; width: 14px; height: 14px; color: var(--ink-muted); }
.hc-launch .tf-find input { min-height: 34px; padding: 6px 10px 6px 30px; font: 400 12.5px/1.4 var(--hc-sans); color: var(--ink); background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--radius); }
.hc-shelf { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.hc-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-engines > li { display: flex; }
.tf-card.hc-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); color: var(--ink); text-align: left; transition: border-color .15s ease, background-color .15s ease; }
.tf-card.hc-card:hover { border-color: rgb(22 22 20 / .25); background: var(--bg-alt); }
.hc-card-top { display: flex; align-items: center; gap: 8px; }
.hc-card .tf-ico { width: 22px; height: 22px; border: 0; background: none; color: var(--ink-muted); }
.hc-card .tf-ico .tf-i, .hc-card .tf-ico svg { width: 16px; height: 16px; }
.hc-tag { font: 400 9.5px/1.4 var(--hc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.hc-num { margin-left: auto; font: italic 400 18px/1 var(--hc-display); color: var(--ink-muted); }
.hc-card .tf-card-x { flex: 1 1 auto; gap: 0; margin-top: 14px; }
.hc-card .tf-card-t { font: 400 22px/1.15 var(--hc-display); color: var(--ink); text-wrap: balance; }
.hc-card .tf-card-l { margin-top: 10px; font: 400 12.5px/1.6 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: space-between; gap: 8px; margin-top: 18px; min-height: 38px; padding: 0 12px; border: 1px solid rgb(22 22 20 / .8); border-radius: var(--radius); font: 500 12.5px/1.2 var(--hc-sans); color: var(--ink); transition: background-color .15s ease, color .15s ease; }
.hc-go .tf-i { width: 16px; height: 16px; }
.tf-card.hc-card:hover .hc-go { background: var(--ink); color: var(--ivory); }
/* Draft: the dark card */
.tf-card.hc-hero { position: relative; overflow: hidden; border-color: var(--gold); background: var(--obsidian-2); color: var(--ivory); }
.tf-card.hc-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold); }
.tf-card.hc-hero:hover { background: var(--obsidian); border-color: var(--gold); }
.hc-hero .hc-tag { padding: 2px 6px; border: 1px solid rgb(197 160 89 / .5); border-radius: 3px; background: #242017; color: var(--gold); }
.hc-hero .tf-ico { color: var(--gold); }
.hc-hero .hc-num { color: rgb(197 160 89 / .7); }
.hc-hero .tf-card-t { font-size: 26px; line-height: 1.1; color: var(--ivory); }
.hc-hero .tf-card-l { color: #B3B1AB; }
.hc-hero .hc-go { justify-content: center; border-color: var(--gold); background: var(--gold); color: var(--obsidian); min-height: 40px; }
.tf-card.hc-hero:hover .hc-go { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--obsidian); }
/* the pills */
.hc-tier-more { padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.hc-tier-more .tf-shelf-gh { margin: 0 0 10px; font: 500 11.5px/1.4 var(--hc-sans); color: var(--ink); }
.hc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-pills > li { display: flex; }
.tf-card.hc-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-alt); color: var(--ink); text-align: left; transition: border-color .15s ease, background-color .15s ease; }
.tf-card.hc-pill:hover { border-color: var(--gold); background: var(--gold-wash); }
.hc-pill .tf-ico { width: 16px; height: 16px; border: 0; background: none; color: var(--gold-deep); }
.hc-pill .tf-ico svg { width: 14px; height: 14px; }
.hc-pill .tf-card-x { gap: 0; }
.hc-pill .tf-card-t { font: 400 12px/1.3 var(--hc-sans); color: var(--ink); }
.hc-pill .tf-card-l { font-size: 10.5px; }
.hc-launch .tf-task-none { margin: 0; font-size: 12.5px; }

/* the reviewed documents */
.hc-docs { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.hc-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
body:has(> .tf-frame) .hc-docs-head h2 { margin: 0; font: 400 20px/1.1 var(--hc-display); }
.hc-count { font: 400 10.5px/1 var(--hc-mono); color: var(--ink-muted); white-space: nowrap; }
.hc-docs > .tf-empty, .hc-docs > .tf-quiet { margin: 0; padding: 12px 16px; font-size: 12.5px; }
.hc-docs .tf-tablewrap { border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
.hc-file { display: inline-flex; align-items: center; gap: 8px; }
.hc-file .tf-i { width: 16px; height: 16px; color: var(--gold-deep); }
.hc-file .hc-mono { font-size: 11.5px; color: var(--ink); }
.hc-launch > #slot-matter-documents { margin: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius); }
.hc-launch > #slot-matter-documents h2 { margin: 0 0 4px; font: 400 20px/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 { margin: 0 0 18px; color: var(--ivory); font: 400 13px/1.5 var(--hc-sans); }
.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: 400 10.5px/1.5 var(--hc-mono); letter-spacing: .14em; text-transform: uppercase; 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 10px/1.4 var(--hc-mono); letter-spacing: .08em; 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: 4px 0 12px; padding: 4px 8px; border: 1px solid rgb(47 106 74 / .3); border-radius: 3px; background: var(--verdict-wash);
  font: 500 10.5px/1.3 var(--hc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--verdict); }
.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 { 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); }
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-mhead { grid-template-columns: minmax(0, 1fr); }
  .hc-recordcard { max-width: 420px; }
  .hc-bench { grid-template-columns: minmax(0, 1fr); }
  .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 { padding: 16px 16px 14px; }
  .hc-tabs { padding: 8px 16px 0; }
  .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-engines { grid-template-columns: minmax(0, 1fr); }
  .hc-launch .tf-find { flex: 1 1 100%; }
  .hc-mhead h1 { font-size: 30px; }
  .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-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-recordcard .btn { 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 .tf-tl-li-now::before { animation: none !important; }
  .hc-meter > span, .tf-card.hc-card, .hc-go, .tf-card.hc-pill, .hc-dropzone, .hc-group > summary::after, .hc-mhead .tf-about-btn, .hc-tabs a, .hc-tabs a::after { transition: none; }
  .hc-tabs a:not([aria-current]):hover::after { transform: none; }
}
@media print {
  .hc-tabs, .hc-recordcard, .hc-dropzone, .hc-vault, .hc-launch .tf-shelf { display: none !important; }
}