/* ==========================================================================
   HiCourt — Test Firm app pages (question.php, run.php). Task 12,
   DECISIONS.md [2026-08-21n].
   --------------------------------------------------------------------------
   Loaded AFTER css/site.css and uses ONLY its tokens: the carbon ground, the
   off-white slate ink, titanium for secondary text, the amber accent held
   back for the one primary action and the markers that carry meaning
   ([2026-09-11n]), --rule / --rule-strong, the 8px radius, the serif for
   prose and headings, the mono micro-labels. One always-dark band (the stage
   rail) sits on --umber, which is carbon lifted one step, and the two flow
   diagrams in frontend/assets mirror the same tokens by hand.

   site.css is a byte mirror of the pitch stylesheet that nothing enforces, so
   NOTHING here edits it: every new rule lives in this sheet under a tf-
   prefix. The deck's chip words (VERIFIED, NOT FOUND, …) appear nowhere —
   outcomes are words from the pipeline's own vocabulary, and the glyph, not
   the colour, carries what little a glyph carries.

   390px: table.lw-auth keeps its 42rem minimum in site.css, so the flag table
   and the timeline here are .tf-table, which becomes stacked, labelled cards
   at ≤ 46rem rather than a horizontal scroller.
   ========================================================================== */

/* ── Topbar: a real navigation on these pages only ─────────────────────── */
.tf-nav { margin-left: auto; }
.tf-nav a[aria-current="page"] { color: var(--fg-strong); border-bottom-color: var(--accent); }
.tf-nav details { position: relative; }
.tf-nav summary {
  cursor: pointer; list-style: none; color: var(--muted);
  padding: .2em 0; border-bottom: 1px solid transparent;
}
.tf-nav summary::-webkit-details-marker { display: none; }
.tf-nav summary:hover { color: var(--fg-strong); border-bottom-color: var(--accent); }
.tf-nav details[open] summary { color: var(--fg-strong); }
/* Chrome keeps a closed details' content laid out (content-visibility), which widens the scroll area at 390 — say display:none outright. */
.tf-nav details:not([open]) > .tf-nav-menu { display: none; }
.tf-nav-menu {
  position: absolute; right: 0; top: 2.2rem; z-index: 50;
  min-width: 14rem; padding: .6rem .9rem;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--carbon) 45%, transparent);
  display: grid; gap: .35rem;
}
.tf-nav-menu a { display: block; padding: .15em 0; border-bottom: 0; }
.tf-nav-menu .tf-nav-k {
  font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .2em;
}
.topbar .signout { margin-left: 0; }

/* ── Page frame ────────────────────────────────────────────────────────── */
.tf-page { padding: 3rem 0 4rem; }
.tf-head { max-width: var(--measure); }
.tf-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.tf-lede { font-size: 1.06rem; max-width: 46rem; }
.tf-meta {
  font: 400 .875rem/1.6 var(--mono); color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: .6rem 0 0;
}
.tf-meta b { color: var(--fg-strong); font-weight: 700; }
.tf-section { margin: 2.6rem 0 0; scroll-margin-top: 4.4rem; }
.tf-section > h2 { font-size: 1.38rem; margin-bottom: .35em; }
.tf-section > .tf-sub { color: var(--muted); font-size: .96rem; max-width: var(--measure); margin: 0 0 1.1em; }
.tf-label { font: 700 .68rem/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5em; }
.tf-quiet { color: var(--muted); font-size: .92rem; }
.tf-find { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }   /* row 23: "Look up cases for this: Yes / No" */
.tf-find .tf-find-l { font-weight: 600; }
.tf-find label { display: inline-flex; align-items: center; gap: .35em; font-weight: 400; margin: 0; }
.tf-find .tf-quiet { flex-basis: 100%; margin: 0; }
.tf-empty { color: var(--muted); font-style: italic; margin: 0; }

/* ── The question form ─────────────────────────────────────────────────── */
.tf-form { max-width: 46rem; margin: 1.8rem 0 0; }
.tf-form textarea { min-height: 8.5rem; resize: vertical; }
.tf-count { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font: 400 .78rem/1.6 var(--mono); color: var(--muted); margin: .4em 0 0; }
.tf-count > span:first-child { flex: none; }   /* the count never wraps into a column beside the hint; at 390 the hint drops below it ([2026-09-02b], read off the screenshots) */
.tf-count > span:last-child { flex: 1 1 18rem; min-width: 0; }
.tf-cost {
  margin: 1.1rem 0 0; padding: 1rem 1.2rem; font-size: .94rem; color: var(--fg);
  background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.tf-cost p { margin: 0 0 .5em; } .tf-cost p:last-child { margin-bottom: 0; }
.tf-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.2rem 0 0; }
/* A failed list has one manual recovery action, separated from the data that did load. */
.tf-list-unavailable { margin: 16px 0 24px; }
.tf-list-unavailable > .tf-actions { margin-top: 12px; }
.tf-list-unavailable > :first-child { margin-top: 0; }
.tf-status { min-height: 1.5em; font-size: .95rem; font-weight: 700; color: var(--accent-ink); margin: .8rem 0 0; }
/* task 13 ([2026-08-21s]/[2026-08-21r]): the controls host — Cancel while alive, "ask it again" after a lost / crashed / cancelled / refused end */
.tf-controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .6rem 0 0; min-height: 0; }
.tf-controls:empty { display: none; }
.tf-controls .tf-quiet { flex: 1 1 16rem; min-width: 0; }
.tf-controls .btn[disabled] { opacity: .55; cursor: default; }
.tf-active {
  margin: 1.4rem 0 0; padding: 1rem 1.2rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); font-size: .96rem;
}
.tf-active p { margin: 0; }

/* ── The seven stages, explained (question page) ───────────────────────── */
.tf-stages { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: st; }
.tf-stages li { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: .93rem; }
.tf-stages li b { display: block; font-family: var(--font-serif); font-size: 1.02rem; color: var(--fg-strong); margin-bottom: .3em; }
.tf-stages li .tf-n { font: 700 .66rem/1 var(--mono); letter-spacing: .14em; color: var(--accent-ink); display: block; margin-bottom: .6em; }
.tf-stages li.tf-code { border-style: dashed; }

/* ── Recent runs ───────────────────────────────────────────────────────── */
.tf-runs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.tf-runs li {
  display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .4rem 1.2rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: .8rem 1.1rem; font-size: .93rem;
}
.tf-runs .tf-when { font: 400 .76rem/1.6 var(--mono); color: var(--muted); }
.tf-runs .tf-q { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-runs .tf-q i { color: var(--muted); }
.tf-runs .tf-st { font: 700 .68rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tf-runs .tf-st a { color: var(--accent-ink); }

/* ── The stage rail (one umber band) ───────────────────────────────────── */
.tf-rail { margin: 1.6rem 0 0; padding: 1.2rem 1.3rem 1.1rem; background: var(--umber); border-radius: var(--radius); }
.tf-rail ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tf-rail li {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .7rem; min-width: 0;
  display: grid; gap: .2rem; align-content: start;
}
.tf-rail li .tf-rs { font: 700 .62rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tf-rail li .tf-rn { font-family: var(--font-serif); font-weight: 700; font-size: .98rem; color: var(--fg-strong); }
.tf-rail li .tf-rd { font-size: .8rem; color: var(--fg); line-height: 1.45; overflow-wrap: anywhere; }
.tf-rail li .tf-rt { font: 400 .72rem/1.5 var(--mono); color: var(--muted); }
.tf-rail li[data-state="running"] { border-color: var(--accent); border-width: 2px; }
.tf-rail li[data-state="running"] .tf-rs { color: var(--accent-ink); }
.tf-rail li[data-state="done"] .tf-rs { color: var(--fg-strong); }
.tf-rail li[data-state="ended"] { border-color: var(--fg-strong); border-width: 2px; }
.tf-rail li[data-state="never"], .tf-rail li[data-state="waiting"] { background: var(--surface-2); }
.tf-rail li[data-state="never"] .tf-rn, .tf-rail li[data-state="waiting"] .tf-rn { color: var(--muted); }
.tf-rail .tf-rail-foot { margin: .9rem 0 0; font: 400 .78rem/1.6 var(--mono); color: #ECEADE; }   /* a literal the token swap does not reach: titanium, 5.97:1 on the band ([2026-09-11n]) */
.tf-rail .tf-rail-foot b { color: #E7E2D8; font-weight: 700; }

/* ── Live progress list ────────────────────────────────────────────────── */
.tf-live { margin: 1.2rem 0 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tf-live-head { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.tf-live-head .tf-now { font-family: var(--font-serif); font-weight: 700; color: var(--fg-strong); }
.tf-live ol { list-style: none; margin: 0; padding: .4rem 0; max-height: 24rem; overflow-y: auto; }
.tf-live li { display: grid; grid-template-columns: 3rem 6.2rem 1fr auto; gap: .3rem .9rem; padding: .32rem 1.1rem; font-size: .86rem; border-top: 1px solid var(--rule); align-items: baseline; }
.tf-live li:first-child { border-top: 0; }
.tf-live li .tf-seq, .tf-live li .tf-lat { font: 400 .74rem/1.6 var(--mono); color: var(--muted); }
.tf-live li .tf-stg { font: 700 .64rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-live li[data-kind="stage"] .tf-stg { color: var(--accent-ink); }
.tf-live li[data-kind="call_start"] { color: var(--fg-strong); }
.tf-live li[data-kind="retry"] .tf-what, .tf-live li[data-kind="pace"] .tf-what, .tf-live li[data-kind="batch"] .tf-what, .tf-live li[data-kind="text"] .tf-what { color: var(--accent-ink); font-style: italic; }
.tf-live li[data-inflight="1"] { background: var(--accent-soft); }
.tf-live li .tf-what { overflow-wrap: anywhere; }
.tf-live li .tf-what i { color: var(--muted); }

/* ── Section index ─────────────────────────────────────────────────────── */
.tf-index { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0 0; }
.tf-index a {
  font: 700 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .58em 1em; white-space: nowrap;
}
.tf-index a:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

/* ── The request contract ([2026-08-26c]): a labelled definition list, stacked at a true 390 ── */
.tf-req { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.1rem; margin: 1rem 0 0; }
.tf-req dt { font: 700 .68rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .15em; }
.tf-req dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tf-req dd q { quotes: '“' '”'; }
@media (max-width: 600px) { .tf-req { grid-template-columns: minmax(0, 1fr); gap: .2rem 0; } .tf-req dd { margin-bottom: .6rem; } }

/* ── The end ───────────────────────────────────────────────────────────── */
.tf-end { margin: 1.4rem 0 1.2rem; padding: 1.2rem 1.4rem; background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--fg-strong); border-radius: 0 var(--radius) var(--radius) 0; }
.tf-end p { margin: 0 0 .5em; } .tf-end p:last-child { margin-bottom: 0; }
.tf-end .tf-end-h { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 700; color: var(--fg-strong); }
.tf-end .tf-end-fold { margin: 0 0 .5em; }   /* Context step 1: the folded "left out before drafting" line */
.tf-end .tf-end-fold > p { padding: 0 1rem .8rem; margin: 0; }

/* ── Cards: drafts, verdict cards, brief ───────────────────────────────── */
.tf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin: 1rem 0 0; }
.tf-grid-drafts { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.tf-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.15rem 1.25rem; font-size: .95rem; min-width: 0; }
.tf-card > :last-child { margin-bottom: 0; }
.tf-card-h { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: baseline; margin: 0 0 .7em; }
.tf-card-h b { font-family: var(--font-serif); font-size: 1.04rem; color: var(--fg-strong); }
.tf-card.tf-gap { border-style: dashed; background: var(--surface-2); }
.tf-draft-h { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 700; color: var(--fg-strong); margin: 0 0 .6em; }
.tf-prose { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .9em; }
.tf-points { margin: 0 0 .9em; padding-left: 1.1rem; }
.tf-points li { margin-bottom: .45em; }
.tf-points li span { color: var(--muted); }
.tf-auths { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.tf-auths li { border-top: 1px solid var(--rule); padding-top: .45em; font-size: .9rem; }
.tf-auths li b { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--fg-strong); }
.tf-auths li i { color: var(--muted); }

/* ── Chips: words, neutral ─────────────────────────────────────────────── */
.tf-chip {
  display: inline-block; font: 700 .66rem/1.6 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--rule-strong); border-radius: 4px; padding: .1em .55em; color: var(--fg-strong); white-space: nowrap; vertical-align: 1px;
}
.tf-chip-soft { color: var(--muted); border-style: dashed; }
.tf-chip-stop { border-color: var(--fg-strong); border-width: 2px; }
.tf-chip-model { background: transparent; text-transform: none; letter-spacing: .02em; font-weight: 400; color: var(--muted); }

/* ── Tables that become cards at 390 ───────────────────────────────────── */
.tf-tablewrap { margin: 1rem 0 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
table.tf-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.tf-table th, table.tf-table td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-top: 1px solid var(--rule); }
table.tf-table thead th { border-top: 0; background: var(--umber); color: #E7E2D8; font: 700 .66rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
table.tf-table tbody tr:nth-child(even) { background: var(--bg-alt); }
table.tf-table td.tf-cite { font-family: var(--mono); font-size: .84rem; font-weight: 700; color: var(--fg-strong); }
table.tf-table td.tf-cite .tf-cite-s { white-space: nowrap; }
table.tf-table.tf-cols { table-layout: fixed; }
table.tf-table td.tf-num { font-family: var(--mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
table.tf-table .tf-reason { color: var(--fg); }
table.tf-table .tf-name { display: block; font-size: .84rem; font-family: var(--font-serif); font-weight: 400; color: var(--muted); margin-top: .25em; white-space: normal; overflow-wrap: anywhere; }
table.tf-table .tf-name b { color: var(--fg); font-weight: 400; }
.tf-verdicts { list-style: none; padding: 0; margin: .4em 0 0; display: grid; gap: .3rem; font-size: .84rem; }
.tf-verdicts li { border-top: 1px dashed var(--rule); padding-top: .3em; }
.tf-verdicts li b { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-strong); }
.tf-verdicts li q { color: var(--muted); quotes: "“" "”"; }
.tf-basis { font: 400 .74rem/1.6 var(--mono); color: var(--muted); margin: .3em 0 0; }

/* ── The document ──────────────────────────────────────────────────────── */
.tf-doc { margin: 1rem 0 0; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 1.8rem 2rem; }
.tf-doc-label { margin: 0 0 1.2em; padding: .8rem 1rem; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); font-size: .92rem; }
.tf-doc h3 { font-size: 1.45rem; margin-bottom: .9em; }
.tf-doc .tf-doc-body p { font-size: 1.02rem; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-doc-aside { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.tf-doc-aside h4 { margin-bottom: .5em; }
.tf-doc-aside ul { margin: 0 0 1.1em; padding-left: 1.1rem; font-size: .93rem; }
.tf-doc-aside li { margin-bottom: .4em; }
/* Row 18d ([2026-10-09f]): a finished Draft's page — the document whole and first, the downloads under it, one short line of what the
   lawyer must do or know, and everything else folded under "About this work". Site tokens only, every tone. */
.tf-run-doc { margin: 1.2rem 0 1.1rem; }
.tf-run-doc, .tf-know, .tf-run-about, .tf-run-lead { max-width: calc(var(--measure) + 4.25rem); }   /* one column the width of a page: the text's measure and the card's padding */
.tf-doc .tf-doc-body p:last-child { margin-bottom: 0; }
.tf-doc .tf-doc-h { font-size: 1.12rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; margin: 1.6em 0 .55em; }
.tf-doc .tf-doc-body > .tf-doc-h:first-child { margin-top: 0; }
.tf-know { margin: 1.1rem 0 0; padding: .75rem 1rem; background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; color: var(--fg-strong); font-size: .95rem; line-height: 1.6; }
.tf-run-about { margin: 1rem 0 0; }
.tf-run-about-body p { font-size: .95rem; margin: 0 0 .6em; max-width: var(--measure); }
.tf-run-about-body > :last-child { margin-bottom: 0; }
.tf-run-about-body .tf-end-fold { margin: .2rem 0 .6em; }
.tf-run-about-body .tf-end-fold > p { padding: 0 1rem .8rem; margin: 0; }
.tf-run-about-body .tf-run-send-h { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 700; color: var(--fg-strong); margin: 0 0 .4em; }
.tf-run-about-body .tf-run-send-sub { font-weight: 700; color: var(--fg-strong); margin: .7em 0 .3em; }
.tf-run-send { margin: 0 0 .9em; padding-left: 1.1rem; font-size: .95rem; max-width: var(--measure); }
.tf-run-send li { margin-bottom: .35em; overflow-wrap: anywhere; }
.tf-run-about-body .tf-end-fold > summary { font: 400 .95rem/1.55 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--fg); padding: .55rem .9rem; }   /* a folded line reads as its sentence, not as a label */
.tf-fc-row { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule); }
.tf-fc-row h4 { margin-bottom: .45em; font-weight: 600; }
.tf-fc-row .tf-points { font-size: .95rem; }

/* ── Spend ─────────────────────────────────────────────────────────────── */
.tf-spend { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); margin: 1rem 0 0; }
.tf-spend div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; }
.tf-spend .tf-k { font: 700 .64rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tf-spend .tf-v { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; color: var(--fg-strong); letter-spacing: -.01em; }
.tf-spend .tf-d { font-size: .82rem; color: var(--muted); }
.tf-spend .tf-k, .tf-spend .tf-v, .tf-spend .tf-d { display: block; }   /* the label, the number and the description on their own lines — a description that starts with a digit must never abut the number ([2026-08-24b]: "8" + "0 answered" read as 80 on the screenshot) */

/* ── Honesty strip ─────────────────────────────────────────────────────── */
.tf-honest { margin: 1.6rem 0 0; font-size: .93rem; }
.tf-honest p { margin: 0 0 .6em; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .tf-rail ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .tf-page { padding: 1.8rem 0 3rem; }
  .tf-rail { padding: .9rem .9rem .8rem; }
  .tf-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-runs li { grid-template-columns: 1fr; }
  .tf-runs .tf-q { white-space: normal; }
  .tf-runs .tf-st { white-space: normal; }   /* task 13: a long phase word (cancelled, lost) must wrap at 390, never widen the grid (MISTAKES 2026-08-21's nowrap family) */
  .tf-live li { grid-template-columns: 2.6rem 1fr; }
  .tf-live li .tf-what, .tf-live li .tf-lat { grid-column: 1 / -1; }
  .tf-doc { padding: 1.15rem 1.1rem; }
  .tf-card { padding: 1rem; }
  /* tables become labelled cards: no horizontal scroll, the page body never scrolls sideways */
  table.tf-table, table.tf-table tbody, table.tf-table tr, table.tf-table td { display: block; width: 100%; }
  table.tf-table thead { display: none; }
  table.tf-table tr { border-top: 1px solid var(--rule-strong); padding: .5rem 0; }
  table.tf-table tr:first-child { border-top: 0; }
  table.tf-table td { border-top: 0; padding: .35rem .9rem; }
  table.tf-table td.tf-cite .tf-cite-s, table.tf-table td.tf-num { white-space: normal; }
  table.tf-table.tf-cols col { width: auto; }
  table.tf-table td[data-label]::before {
    content: attr(data-label); display: block; font: 700 .62rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .tf-nav-menu { right: auto; left: 0; max-width: calc(100vw - 2.2rem); min-width: 0; }
}
@media print {
  .tf-rail { background: #fff; border: 1px solid #979593; }
  /* every always-dark tf- surface is named here or it prints pale-on-white ([2026-09-11n]) */
  table.tf-table thead th { background: #fff !important; color: #1B1710 !important; border-bottom: 1px solid #979593; }
  .tf-live, .tf-index, .topbar, .tf-drop-input, .tf-drop-hint { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase A of the UI plan ([2026-09-02b]): the shell, Matters, Ask's sentence
   and context drop, Runs, Lineups, People, the Workbench, the rails
   component. Tokens only; no hex literal below (the sweep above holds the
   four this sheet is allowed). One accent primary action per page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The shell ─────────────────────────────────────────────────────────── */
a.brand { text-decoration: none; }
.tf-nav .tf-nav-next { color: var(--muted); padding: .2em 0; cursor: default; }
.tf-nav .tf-nav-next small { font: 700 .58rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .2em .5em; margin-left: .3em; vertical-align: 2px; }
.signout .tf-role { font: 700 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .25em .55em; margin-left: .35em; }
.tf-note { margin: 1rem 0 0; }

/* ── The rails component: one bordered block, same words everywhere ─────── */
.tf-rails { margin: 2rem 0 0; padding: 1.1rem 1.3rem; background: var(--bg-alt); border: 1px solid var(--rule); border-left: 3px solid var(--field-line); border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }   /* the bar is --field-line (≥ 3:1 on every light ground), never the decorative rule-strong */
.tf-rails p { margin: 0 0 .55em; } .tf-rails p:last-child { margin-bottom: 0; }
.tf-rails-list { margin: 0 0 .7em; padding-left: 1.1rem; }
.tf-rails-list li { margin-bottom: .35em; }

/* ── Ask: the one sentence, the picker, the lines, the drop ─────────────── */
.tf-line { margin: .55rem 0 0; font-size: .95rem; color: var(--fg); }
.tf-line .tf-k { font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .5em; }
.tf-lines { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
/* the drop zone of task 12 went with its markup ([2026-09-03k]): the box you type in is the drop box now — see the [2026-09-03k] block */
.tf-drop-files { list-style: none; margin: .5em 0; padding: 0; display: grid; gap: .3rem; }
.tf-drop-files li { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; padding: .4rem .7rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-alt); }
.tf-drop-files li b { font-family: var(--font-serif); font-weight: 700; color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-drop-files li span { font: 400 .74rem/1.6 var(--mono); color: var(--muted); }
.tf-drop-files:empty { display: none; }
/* task 3 (2026-09-22): the drop list's rows — the tick, the name, the status word, the problem sentence, the preview */
.tf-drop-files li .tf-drop-tick { margin: 0 .1rem 0 0; accent-color: var(--accent-ink); }
.tf-drop-files li .tf-drop-state { color: var(--fg); }
.tf-drop-files li[data-state="ready"] .tf-drop-state { color: var(--fg-strong); }
.tf-drop-files li .tf-drop-problem { flex-basis: 100%; font: inherit; font-size: .84rem; color: var(--fg); }
.tf-drop-files li .tf-drop-btn { font: inherit; font-size: .8rem; color: var(--accent-ink); background: none; border: 1px solid var(--rule); border-radius: 4px; padding: .1rem .5rem; cursor: pointer; }
.tf-drop-files li .tf-drop-preview { flex-basis: 100%; margin: .2rem 0 0; }
.tf-drop-files li .tf-drop-facts { margin: 0 0 .3rem; font-size: .84rem; color: var(--muted); }
.tf-drop-files li .tf-drop-excerpt { margin: 0; padding: .5rem .7rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .78rem/1.5 var(--mono); color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; }
/* Row 6b: library search before Run — the files it would add, each removable, under the drop list (the same tokens) */
.tf-library { margin: .6rem 0 0; display: grid; gap: .3rem; }
.tf-library:empty { display: none; }
.tf-library-choice { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; color: var(--fg); cursor: pointer; }
.tf-library-choice input { accent-color: var(--accent-ink); margin: 0; }
.tf-library-head { margin: .3rem 0 0; font-family: var(--font-serif); font-weight: 700; color: var(--fg-strong); }
.tf-library-note, .tf-library-apart { margin: 0; font-size: .84rem; color: var(--muted); }
.tf-library-apart { color: var(--fg); font-weight: 600; }
.tf-library-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tf-library-list li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; padding: .4rem .7rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-alt); }
.tf-library-list li b { font-family: var(--font-serif); font-weight: 700; color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-library-list li .tf-library-where { font: 400 .74rem/1.6 var(--mono); color: var(--muted); }
.tf-library-list li .tf-library-reason { flex-basis: 100%; font-size: .86rem; color: var(--fg); overflow-wrap: anywhere; }
.tf-library-list li .tf-drop-btn { font: inherit; font-size: .8rem; color: var(--accent-ink); background: none; border: 1px solid var(--rule); border-radius: 4px; padding: .1rem .5rem; cursor: pointer; }
.tf-library-list li[data-removed="1"] b, .tf-library-list li[data-removed="1"] .tf-library-reason { text-decoration: line-through; color: var(--muted); }

/* ── Matters: cards for matters (the only cards besides seats) ──────────── */
/* the matters grid of [2026-09-02b] went with its markup ([2026-09-03b]): the list is the rail now, styled below */
.tf-invented { vertical-align: 3px; }
.tf-form-inline { max-width: 34rem; }
.tf-form-inline .field { margin-bottom: .9rem; }
.tf-form-inline .field input, .tf-form-inline .field select { width: 100%; font: 400 1rem/1.5 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: .6em .8em; }
.tf-form-inline .field input:focus, .tf-form-inline .field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }

/* ── Runs: the record as a table; the filter ───────────────────────────── */
.tf-filter { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 1.4rem 0 0; font-size: .93rem; }
.tf-filter label { font: 700 .75rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tf-filter select { font: 400 1rem/1.4 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: 6px; padding: .5em .75em; max-width: 100%; min-height: 44px; }
.tf-filter select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.tf-runs-table td.tf-q { font-family: var(--font-serif); overflow-wrap: anywhere; }
.tf-runs-table td.tf-num { white-space: nowrap; }

/* ── Lineups: seats as cards ([2026-09-02c]: one section per lineup; the seven-column stage grid is gone) ── */
.tf-seat { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: .45rem .55rem; font-size: .78rem; line-height: 1.4; display: grid; gap: .1rem; min-width: 0; }
.tf-seat b { font-family: var(--mono); font-size: .74rem; color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-seat span { color: var(--fg); } .tf-seat i { color: var(--muted); font-style: italic; }
.tf-seat-code { border-style: dashed; background: var(--surface-2); }
.tf-lenses dt { padding-top: .4em; } .tf-lenses dd { margin-bottom: .6em; }

/* ── People: two lists, small recorded forms ────────────────────────────── */
.tf-two { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.tf-inline { display: inline; margin-left: .4em; }
.tf-btn-small { padding: .35em .7em; font-size: .78rem; }
.tf-grid-forms { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.tf-grid-forms .tf-card { display: grid; gap: .3rem; align-content: start; }

/* ── The Workbench list ─────────────────────────────────────────────────── */
.tf-workbench { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .5rem; }
.tf-workbench li { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1.2rem; align-items: baseline; padding: .7rem 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); font-size: .93rem; }
.tf-workbench li a { font-weight: 700; }
.tf-workbench li span { color: var(--muted); }

/* ── Sign in ────────────────────────────────────────────────────────────── */
.tf-login { max-width: 34rem; }

/* ── Responsive additions ───────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .tf-workbench li { grid-template-columns: 1fr; }
}
@media print {
  .tf-filter, .signout { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [2026-09-02c]: the decisions on Ask (lineup and outcome as radio cards),
   the closed folds a bare face keeps its detail in, the Lineups sections.
   ══════════════════════════════════════════════════════════════════════════ */
.tf-ask .eyebrow { margin-bottom: .6em; }
.tf-choice { border: 0; padding: 0; margin: 1.3rem 0 0; }
.tf-choice legend { font: 700 .68rem/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 0; margin: 0 0 .5em; }
.tf-choice-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.tf-choice-cards-4 { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.tf-choice-card { position: relative; display: grid; gap: .25rem; align-content: start; padding: .8rem .95rem .8rem 2.3rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; font-size: .9rem; min-width: 0; }
.tf-choice-card input { position: absolute; left: .9rem; top: .95rem; margin: 0; accent-color: var(--accent-ink); }
.tf-choice-card b { font-family: var(--font-serif); font-size: 1.02rem; color: var(--fg-strong); }
.tf-choice-card span { color: var(--fg); }
.tf-choice-card i { font: 400 .74rem/1.5 var(--mono); color: var(--muted); font-style: normal; overflow-wrap: anywhere; }
.tf-choice-card:has(input:checked) { border-color: var(--accent); border-width: 2px; padding: calc(.8rem - 1px) calc(.95rem - 1px) calc(.8rem - 1px) calc(2.3rem - 1px); background: var(--accent-soft); }
.tf-choice-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-fold { margin: 1rem 0 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tf-fold > summary { cursor: pointer; list-style: none; padding: .7rem 1rem; font: 700 .68rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tf-fold > summary::-webkit-details-marker { display: none; }
.tf-fold > summary::before { content: "▸ "; color: var(--accent-ink); }
.tf-fold[open] > summary::before { content: "▾ "; }
.tf-fold > summary:hover { color: var(--fg-strong); }
.tf-fold > summary h2 { display: inline; font-size: .68rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: inherit; margin: 0; font-weight: 700; }
.tf-fold > *:not(summary) { padding: 0 1rem 1rem; }
.tf-fold > .tf-cost { margin: 0 1rem 1rem; padding: 1rem 1.2rem; }
.tf-fold .tf-rails { margin: 0 1rem 1rem; }
.tf-section > .tf-fold { margin-top: .4rem; }
.tf-section > .tf-fold > p.tf-sub { padding-top: .6rem; }
.tf-honest.tf-fold > p { padding: .6rem 1rem 1rem; }
.tf-lineups { display: grid; gap: 1rem; margin: 1.4rem 0 0; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.tf-lineup { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: 0; }
.tf-lineup h2 { font-size: 1.35rem; margin-bottom: .2em; }
.tf-lineup .tf-line { margin: 0 0 .8em; }
.tf-lineup .tf-label { margin: .9em 0 .4em; }
.tf-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tf-seats .tf-seat { grid-template-columns: 1fr; }
.tf-seats .tf-seat i { font-size: .72rem; }
@media print { .tf-fold > summary::before { content: ""; } .tf-fold { border-color: var(--rule-strong); } details.tf-fold:not([open]) > *:not(summary) { display: block; } }

/* ── [2026-09-02d] the task menu on Ask: one block per task, its fields, its state ── */
.tf-task { margin: 0 0 .6rem; }
.tf-task-coming { margin: .4em 0 0; font: 700 .78rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.tf-field { margin: 0 0 .9rem; }
.tf-field label { display: block; font: 700 .68rem/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fg); margin: 0 0 .3em; }
.tf-field label .opt { font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--muted); }
.tf-field textarea { width: 100%; min-height: 8.5rem; }
.tf-field-large textarea { min-height: 18rem; }
.tf-fields-line { display: grid; gap: .6rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); margin: 0 0 .9rem; }
.tf-fields-line .tf-field { margin: 0; }
.tf-field-line input, .tf-field-line select { width: 100%; font: 400 1rem/1.5 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: .5rem .7rem; }
.tf-field-line input:focus, .tf-field-line select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.tf-field-docs { margin: 0; padding: .6rem .8rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--fg); }
.tf-field-docs b { font-family: var(--font-serif); color: var(--fg-strong); }
.tf-field-docs span { color: var(--muted); }
.tf-ask-note { margin: .2rem 0 0; }
/* the run page: a pasted draft, verbatim, and the scan beneath it */
.tf-draft { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .95rem/1.6 var(--font-serif); color: var(--fg-strong); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 .8em; max-height: 32rem; overflow: auto; }
.tf-choice-card[hidden] { display: none; }        /* the card's own display rule must not beat the hidden attribute */

/* ══════════════════════════════════════════════════════════════════════════
   [2026-09-02e] the restyle, at the partner's request: the calm comes through
   the shared sheet's type-scale and rhythm tokens (site.css, Metrics); the
   chrome is here — 120–150 ms colour transitions on every interactive tf-
   surface and on none that is not a control, one ring token, large surfaces
   nearly square, a hairline opening each section, rule rows where two lists
   were boxes. §6's density holds: tables for authorities and runs, cards
   only for seats and matters, one primary action, 390 stacks. Tokens only;
   no hex below (the sweep above still holds this sheet's eight).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type: the page title, the section heads and the document title take the
      display weight; card titles keep the bold — in a grid the bold is the
      anchor. The sentence is regular, its selects bold: the control reads. ── */
.tf-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 400; letter-spacing: var(--track-display); line-height: 1.15; }
.tf-lede { font-size: var(--fs-lede); }
.tf-section { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.tf-section > h2 { font-size: 1.5rem; font-weight: 400; letter-spacing: var(--track-display); margin-bottom: .4em; }
.tf-matter h2, .tf-lineup h2 { font-weight: 700; letter-spacing: -0.008em; line-height: 1.2; }
.tf-doc h3 { font-size: 1.55rem; font-weight: 400; letter-spacing: var(--track-display); line-height: var(--lh-display); }
.tf-label, .tf-choice legend, .tf-filter label, .tf-field label, .tf-fold > summary, .tf-fold > summary h2 { letter-spacing: var(--track-eyebrow); font-weight: 500; }

/* ── Rules, not boxes: the two record lists sit between hairlines ──────── */
.tf-runs, .tf-workbench { gap: 0; border-bottom: 1px solid var(--rule); }
.tf-runs li, .tf-workbench li { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: .75rem .1rem; }

/* ── Surfaces: large blocks nearly square; controls keep the control radius ── */
.tf-card, .tf-matter, .tf-lineup, .tf-stages li, .tf-live, .tf-tablewrap, .tf-doc, .tf-fold, .tf-spend div,
.tf-draft, .tf-rail, .tf-active, .tf-cost, .tf-end, .tf-rails { border-radius: var(--radius-card); }
.tf-cost, .tf-end, .tf-rails { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.tf-tablewrap table.tf-table thead th { letter-spacing: .12em; font-size: .6875rem; }

/* ── Chrome: the nav, the menu, the folds, the index, the choice cards ──── */
.tf-nav summary, .tf-nav .tf-nav-next { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tf-nav summary:hover { border-bottom-color: var(--rule-strong); }
.tf-nav-menu {
  top: 2.3rem; padding: .7rem 1rem; border-radius: var(--radius); border-color: var(--rule-strong);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--umber) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--umber) 8%, transparent);
}
.tf-nav-menu a { padding: .25em 0; transition: color var(--dur) var(--ease); }
.tf-nav-menu a:hover { color: var(--fg-strong); }
.tf-fold > summary { transition: color var(--dur) var(--ease); }
.tf-fold > summary:active { color: var(--accent-ink); }
.tf-index a { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.tf-index a:active { color: var(--fg-strong); border-color: var(--fg-strong); background: var(--surface-2); }
/* never `transition: all` here: the checked state moves border-width and padding, and animating those jitters on every pick */
.tf-choice-card { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.tf-choice-card:hover { border-color: var(--field-line); }
.tf-choice-card:has(input:checked):hover { border-color: var(--accent); }
.tf-matter h2 a, .tf-runs .tf-st a, .tf-workbench li a { transition: color var(--dur-fast) var(--ease); }

/* ── One ring: the shared token pair on every field this sheet draws a ring for ── */
.tf-filter select:focus, .tf-field-line input:focus, .tf-field-line select:focus,
.tf-form-inline .field input:focus, .tf-form-inline .field select:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 1px; }
.tf-choice-card:has(input:focus-visible) { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }

@media (max-width: 46rem) {
  .tf-section { margin-top: 2.2rem; padding-top: 1.2rem; }
}
@media print {
  .tf-section { border-top-color: var(--rule-strong); }
}

/* ══════════════════════════════════════════════════════════════════════════
   [2026-09-03b] THE WORKSPACE — Tre: "think of it like Slack … your matters
   on the side like you would have your chats … as you click on a matter or
   search for it the details show up." A rail of matters with a search box
   beside the selected matter's pane; the composer's task is a search box over
   the library's list; the lineup and the outcome are pills. Tokens only; no
   hex below. Density is §6's still: tables for runs, rules over boxes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the two panes ──────────────────────────────────────────────────────── */
.tf-workspace { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.tf-pane { min-width: 0; }
.tf-pane-head { margin-bottom: .2rem; }
.tf-pane-head .tf-meta { margin-top: .4rem; }
.tf-pane > .tf-status { margin: 0 0 .8rem; }

/* ── the rail: a search box, then the rows between hairlines ───────────── */
/* [2026-09-03e]: the rail is a darker band the full height of the workspace; what sticks is its inside */
.tf-side { min-width: 0; align-self: stretch; background: var(--bg-alt); border-right: 1px solid var(--rule); border-radius: var(--radius-card) 0 0 var(--radius-card); }
.tf-side-in { position: sticky; top: 4.4rem; max-height: calc(100vh - 5.2rem); display: flex; flex-direction: column; padding: 1rem .9rem 1rem 1rem; }
.tf-side-search input, .tf-task-search {
  width: 100%; font: 400 .95rem/1.4 var(--font-serif); color: var(--fg-strong); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: var(--radius); padding: .55em .8em; transition: border-color var(--dur) var(--ease);
}
.tf-side-search input:focus, .tf-task-search:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.tf-side-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tf-side .tf-matters { list-style: none; padding: 0; margin: .8rem 0 0; display: block; overflow-y: auto; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.tf-side .tf-matter { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 0; font-size: .92rem; min-width: 0; }
.tf-side .tf-matter:first-child { border-top: 0; }
.tf-side .tf-matter a { display: block; padding: .6rem .7rem .6rem .8rem; text-decoration: none; color: var(--fg); border-left: 3px solid transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tf-side .tf-matter a:hover { background: var(--surface); color: var(--fg-strong); }
.tf-side .tf-matter a:active { border-left-color: var(--rule-strong); }
.tf-side .tf-matter a[aria-current="page"] { background: var(--surface); border-left-color: var(--accent); color: var(--fg-strong); }
.tf-side .tf-matter b { display: block; font-family: var(--font-serif); font-weight: 700; color: inherit; line-height: 1.3; }
.tf-side .tf-matter a > span { display: block; margin-top: .15em; font: 400 .72rem/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }   /* the line, not the chip inside the name */
.tf-side .tf-matter .tf-chip { font-size: .58rem; padding: .05em .45em; }
.tf-side .tf-matter .tf-chip { margin-left: .35em; vertical-align: 1px; }
.tf-side-pin a { border-bottom: 1px solid var(--rule); }
.tf-side-none, .tf-side > .tf-note { margin: .6rem 0 0; font-size: .88rem; }
.tf-side-new { margin: .8rem 0 0; flex: none; }
.tf-side-new > summary { cursor: pointer; list-style: none; padding: .35rem 0; font: 700 .68rem/1.6 var(--mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); transition: color var(--dur) var(--ease); }
.tf-side-new > summary::-webkit-details-marker { display: none; }
.tf-side-new > summary::before { content: "▸ "; color: var(--accent-ink); }
.tf-side-new[open] > summary::before { content: "▾ "; }
.tf-side-new > summary:hover { color: var(--fg-strong); }
.tf-side-new .tf-form { margin: .3rem 0 0; }
.tf-side-new .field { margin-bottom: .7rem; }

/* ── the composer: a search box over the task list, the fields, the pills ── */
/* [2026-09-03e]: the composer is a panel — a lighter surface on the page's ground, the way a card lifts off a band */
.tf-form.tf-ask { max-width: none; margin: 1.5rem 0 0; padding: 1.3rem 1.5rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.tf-composer { max-width: 46rem; }
.tf-task-pick { position: relative; }
.tf-task-pick .tf-label { margin: 0 0 .4em; }
.tf-task-box { position: relative; display: block; }
.tf-task-box::after { content: "\25BE"; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: .9rem; }   /* the box is a picker, and says so */
.tf-task-box .tf-task-search { padding-right: 2.2rem; }
.tf-task-list { margin: .35rem 0 0; padding: 0 0 .3rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); max-height: 22rem; overflow-y: auto; box-shadow: 0 8px 24px color-mix(in srgb, var(--umber) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--umber) 6%, transparent); }
.tf-task-list[hidden] { display: none; }
.tf-task-group { margin: 0; }
.tf-task-grouphead { margin: .3rem 0 0; padding: .5rem .85rem .4rem; font: 700 .76rem/1.4 var(--mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-strong); background: var(--bg-alt); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }   /* [2026-09-03c]: a band, not a whisper — the sections read apart */
.tf-task-group:first-child .tf-task-grouphead { margin-top: 0; border-top: 0; }
.tf-task-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: start; padding: .45rem .85rem; margin: 0; cursor: pointer; font-size: .9rem; border-left: 3px solid transparent; transition: background-color var(--dur) var(--ease); }
.tf-task-row:hover, .tf-task-row.tf-task-row-active { background: var(--bg-alt); }
.tf-task-row:has(input:checked) { background: var(--accent-soft); border-left-color: var(--accent); }
.tf-task-row input { margin: .3em 0 0; accent-color: var(--accent-ink); grid-row: span 3; }
.tf-task-row b { font-family: var(--font-serif); font-weight: 700; color: var(--fg-strong); }
.tf-task-row span { grid-column: 2; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.tf-task-row i { grid-column: 2; font: 400 .7rem/1.6 var(--mono); color: var(--muted); font-style: normal; }
.tf-task-row-coming b { color: var(--fg); font-weight: 400; }
.tf-task-none { margin: 0; padding: .5rem .85rem; }
.tf-ask .tf-task { margin: 1.2rem 0 0; }
.tf-task-out { margin: .2rem 0 0; font-size: .88rem; color: var(--muted); }
/* the lineup pills of [2026-09-03b] went with their markup ([2026-09-04k]): every run is Maximum, nothing is picked */

@media (max-width: 60rem) {
  .tf-workspace { grid-template-columns: 1fr; gap: 1.4rem; }
  .tf-side { border-right: 0; border-bottom: 1px solid var(--rule); border-radius: var(--radius-card); }
  .tf-side-in { position: static; max-height: none; padding: .9rem; }
  .tf-side .tf-matters { max-height: 14rem; }
  .tf-form.tf-ask { padding: 1rem 1rem 1.2rem; }
}
@media print {
  .tf-side, .tf-task-list, .tf-form.tf-ask { display: none !important; }
}

/* ── [2026-09-03e], [2026-09-03f] the tone slider in the topbar: five stops, each a measured palette ── */
.tf-tone { display: inline-flex; align-items: center; gap: .45rem; margin-left: 1.1rem; font: 400 .6rem/1 var(--mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.tf-tone input { width: 6rem; margin: 0; accent-color: var(--accent-ink); cursor: pointer; }
.tf-tone input:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); border-radius: 3px; }
@media (max-width: 46rem) { .tf-tone { margin-left: 0; } .tf-tone-k { display: none; } .tf-tone input { width: 4.2rem; } }
@media print { .tf-tone { display: none !important; } }

/* ── [2026-09-03j] the review section on the run page: words from a closed list, no colour for a verdict ── */
.tf-choice-cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.tf-review-form { margin: .6rem 0 0; max-width: 60rem; }
.tf-review-form .tf-choice { margin: 0 0 1.2rem; border: 0; padding: 0; }
.tf-review-form .tf-choice legend { font: 700 .68rem/1.6 var(--mono); letter-spacing: var(--track-eyebrow, .13em); text-transform: uppercase; color: var(--fg); margin: 0 0 .5em; }
.tf-review-form .tf-tablewrap { margin: 0 0 1.2rem; }
.tf-review-radios { display: inline-flex; flex-wrap: wrap; gap: .25rem .9rem; }
.tf-review-radios label { white-space: nowrap; cursor: pointer; }
.tf-review-radios input { margin: 0 .25em 0 0; accent-color: var(--accent-ink); }
.tf-review-form textarea { width: 100%; min-height: 6rem; font: 400 1rem/1.55 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: .6em .8em; resize: vertical; }
.tf-review-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.tf-review-form input[type="file"] { display: block; margin: .5rem 0 0; font: 400 .9rem/1.5 var(--font-serif); color: var(--fg); }
.tf-review-check { display: block; margin: .5rem 0 0; font-size: .92rem; color: var(--fg); }
.tf-review-check input { margin: 0 .35em 0 0; accent-color: var(--accent-ink); }
.tf-review-signed { margin: .4rem 0 1rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.tf-review-signed .tf-review-line { margin: 0 0 .6em; font-size: 1.02rem; }
.tf-review-signed .tf-tablewrap { margin: .6rem 0; }
.tf-review-form[hidden] { display: none; }

/* ── [2026-09-03k] the box you type in is the drop box: the hint with it, the list beneath, the picker unseen ── */
.tf-drop-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tf-drop-hint { margin: .5rem 0 0; font-size: .86rem; color: var(--muted); }
.tf-drop-choose { font: inherit; color: var(--accent-ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.tf-drop-choose:hover { color: var(--fg-strong); }
.tf-drop-choose:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; border-radius: 3px; }
[data-drop-target][data-over="1"] { border-color: var(--accent) !important; background: var(--accent-soft) !important; }   /* the box lights while a file is over it */
.tf-field-docs[data-drop-target] { padding: 1.1rem 1rem; }
.tf-field .tf-drop-files { margin: .5rem 0 0; }

/* ── [2026-09-04k] the runs tables: fixed columns, so the task column keeps its room and no cell collapses to a letter a line ── */
.tf-runs-table { table-layout: fixed; }
.tf-runs-table th, .tf-runs-table td { padding: .7rem .6rem; overflow-wrap: break-word; }
table.tf-runs-table td.tf-num { white-space: normal; }   /* the timestamp wraps after the date in a fixed column rather than running into its neighbour; the selector outweighs table.tf-table's nowrap */
table.tf-runs-table thead th { white-space: normal; }   /* a fixed column's head wraps too, never clipped */
/* [2026-09-04l]: the task carries the most words and takes the width; who asked folds under the date */
.tf-runs-5 th:nth-child(1) { width: 15%; } .tf-runs-5 th:nth-child(2) { width: 45%; } .tf-runs-5 th:nth-child(3) { width: 12%; } .tf-runs-5 th:nth-child(4) { width: 14%; } .tf-runs-5 th:nth-child(5) { width: 14%; }
.tf-runs-6 th:nth-child(1) { width: 12%; } .tf-runs-6 th:nth-child(2) { width: 14%; } .tf-runs-6 th:nth-child(3) { width: 40%; } .tf-runs-6 th:nth-child(4) { width: 11%; } .tf-runs-6 th:nth-child(5) { width: 11.5%; } .tf-runs-6 th:nth-child(6) { width: 11.5%; }
.tf-by { display: block; margin-top: .3em; font: 400 .8rem/1.4 var(--font-serif); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 46rem) { .tf-runs-table { table-layout: auto; } }

/* ── The reading measure ([2026-09-12]) ──────────────────────────────────────
   The same audit as the pitch sheet's: a paragraph on a product page ran to
   152 characters a line, a quiet line to 154, a list row to 142. The intent
   was already here — `.tf-section > .tf-sub` caps at 52rem — but a direct-child
   selector missed 57 of the subheads, which sit inside panes and folds. These
   cap the reading column wherever it runs, and leave every box its own width. */
.tf-sub, .tf-quiet, .tf-empty, .tf-note, .tf-line, .tf-ask-note, .tf-drop-hint,
.tf-task-out, .tf-honest p, .tf-rails p, .tf-rails-list li, .tf-points li,
.tf-doc .tf-doc-body p, .tf-doc-aside ul, .tf-prose, .tf-end p, .tf-cost p,
.tf-stages li, .tf-active p, .tf-card > p, .tf-seat span {
  max-width: var(--measure);
}
.tf-quiet, .tf-drop-hint, .tf-basis, .tf-meta, .tf-task-out, .tf-label { max-width: var(--measure-small); }
.tf-doc-label > *, .tf-review-signed .tf-review-line { max-width: var(--measure); }
p.tf-doc-label { max-width: none; padding-right: max(1rem, calc(100% - var(--measure))); }
/* inside a card or a rail the box is already the measure, so those keep theirs */
.tf-side .tf-matter a > span, .tf-runs .tf-q, .tf-workbench li span { max-width: none; }
/* Work queue v1: state stays in words; the existing table stacks on phones. */
.tf-work-strip { border-bottom: 1px solid var(--line); padding: .65rem 0; font-size: .875rem; }
.tf-work-strip a { margin-left: .6rem; }
.tf-work-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.tf-work-actions .btn { padding: .35rem .6rem; font-size: .8rem; }
#work-board .tf-section { margin-top: 2.5rem; }
#work-board .tf-by { display: block; margin-top: .35rem; }
.tf-work-table { table-layout: fixed; width: 100%; }
.tf-work-table th:first-child { width: 46%; }
.tf-work-table th:nth-child(2) { width: 29%; }
.tf-work-table .tf-by { display: block; margin-top: .35rem; }
.tf-work-table td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .tf-work-strip .wrap { line-height: 1.7; }
  .tf-work-actions { margin-top: .4rem; }
}

/* ── Models & Pipeline (DE-1 §11 task 2) ─────────────────────────────────── */
.tf-models, .tf-models section { min-width: 0; max-width: 100%; }
.tf-models .tf-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tf-models h3.tf-mc-provider { font: 700 .7rem/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .4rem; }
.tf-mc-list { display: grid; gap: .45rem; }
.tf-mc { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tf-mc[open] { border-color: var(--field-line); }
.tf-mc-summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(8rem, 11rem) auto 1fr; grid-template-areas: "name id badge meta" "use use use use"; gap: .15rem 1rem; align-items: baseline; padding: .6rem .9rem; }
.tf-mc-summary::-webkit-details-marker { display: none; }
.tf-mc-summary::before { content: "▸"; position: absolute; margin-left: -.75rem; color: var(--muted); }
.tf-mc { position: relative; padding-left: .4rem; }
.tf-mc[open] > .tf-mc-summary::before { content: "▾"; }
.tf-mc-name { grid-area: name; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.tf-mc-id { grid-area: id; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.tf-mc-badge { grid-area: badge; font: 700 .64rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0 .45em; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.tf-mc-on { color: var(--ok, #15803d); } .tf-mc-ready { color: var(--fg); } .tf-mc-warn { color: var(--warn, #b45309); } .tf-mc-off { color: var(--muted); }
.tf-mc-summary .tf-mc-meta { font-size: .85rem; color: var(--muted); }
.tf-mc-price { grid-area: meta; } .tf-mc-use { grid-area: use; }
.tf-mc-default { font: 700 .6rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tf-mc-row-off .tf-mc-name b { color: var(--muted); }
.tf-mc-body { padding: .2rem .9rem .9rem; border-top: 1px solid var(--rule); }
.tf-mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem .9rem; margin: .7rem 0; }
.tf-mc-field { display: grid; gap: .2rem; min-width: 0; }
.tf-mc-field > span, .tf-mc-label { font: 700 .62rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-mc-field input, .tf-mc-field select { width: 100%; min-width: 0; font: 400 .88rem/1.4 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: 6px; padding: .3em .5em; }
.tf-mc-rolesrow { display: grid; gap: .3rem; margin: .2rem 0 .5rem; }
.tf-mc-roles { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; }
.tf-mc-roles label { white-space: nowrap; }
.tf-stages-list select option:disabled { color: var(--muted); }
.tf-stages-list li { grid-template-columns: 12rem minmax(0, 1fr); }
.tf-stages-list li > *, .tf-seat-editor, .tf-seat-row { min-width: 0; }
.tf-stages-list select { min-width: 0; max-width: 100%; }
.tf-seat-row select { flex: 1 1 11rem; width: auto; }
@media (max-width: 720px) { .tf-stages-list li { grid-template-columns: minmax(0, 1fr); } .tf-stages-list li > select { width: 100%; } }
@media (max-width: 720px) { .tf-mc-summary { grid-template-columns: 1fr auto; grid-template-areas: "name badge" "id id" "meta meta" "use use"; } }

.tf-models h2 { font-size: 1.2rem; margin: 1.6rem 0 .3rem; }
.tf-models .muted { color: var(--muted); }
.tf-models-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tf-models-table th, .tf-models-table td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-top: 1px solid var(--rule); }
.tf-models-table th { font: 700 .66rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-models-table input[type=text], .tf-models-table input[type=number], .tf-models-table input[type=date], .tf-models-table select,
.tf-seat-row select, .tf-stages-list select, .tf-models-savebar input { font: 400 .88rem/1.4 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: 6px; padding: .3em .5em; max-width: 100%; }
.tf-models-table input[type=number] { width: 6.5rem; }
.tf-models-caps input, .tf-models-price input { display: block; margin-bottom: .25rem; }
.tf-models-price input[type=text] { width: 5rem; }
.tf-models-roles label { display: block; white-space: nowrap; }
.tf-models-retired td, .tf-models-disabled td { color: var(--muted); }
.tf-models-current td { font-weight: 700; }
.tf-stages-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.tf-stages-list li { display: grid; grid-template-columns: 12rem 1fr; gap: .3rem 1.2rem; align-items: start; padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tf-stages-list li > span { color: var(--muted); font-size: .9rem; }
.tf-stages-list li > select { grid-column: 2; justify-self: start; }
.tf-stage-inherits { opacity: .85; }
.tf-seat-editor { grid-column: 2; display: grid; gap: .35rem; }
.tf-seat-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tf-seat-n { font: 700 .72rem/1 var(--mono); color: var(--muted); min-width: 2rem; }
.tf-models-savebar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.2rem 0 .6rem; }
.tf-models-savebar input { flex: 1 1 18rem; }
.tf-models-warn { color: var(--accent-ink); }
.tf-models-ok { color: var(--ok, #15803d); }
.tf-models-problems { margin: .4rem 0 0 1.2rem; font-size: .9rem; }
/* Task 2026-09-28-009: a POST's answer, beside the button pressed, in each tone's own ink (no tone defines --warn: the old amber
   headline read 1.25:1 on dusk); each seat's Backup box, and what is wrong with a saved backup, beside it. */
.tf-models-status { margin: .5rem 0 .8rem; padding: .6rem .8rem .7rem; border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); max-width: 100%; }
.tf-models-status:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-models-status-warn { border-left-color: var(--accent); }
.tf-models-status-head { margin: 0; font-weight: 700; color: var(--fg-strong); }
.tf-models-status .tf-models-problems { margin: .45rem 0 0 1.2rem; padding: 0; font-size: .95rem; }
.tf-models-status .tf-models-problems li { margin: .3rem 0; overflow-wrap: anywhere; }
.tf-models-status-foot { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.tf-seat-backup-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex: 1 1 14rem; min-width: 0; }
.tf-seat-backup-label { font: 700 .62rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-seat-backup-cell select { flex: 1 1 10rem; min-width: 0; }
.tf-backup-conflict { flex: 1 0 100%; font-size: .85rem; color: var(--fg-strong); border-left: 3px solid var(--accent); padding-left: .45rem; }
.tf-models-figures { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .4rem; }
.tf-models-figures li { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: .2rem 1rem; }
@media (max-width: 720px) { .tf-stages-list li, .tf-models-figures li { grid-template-columns: 1fr; } .tf-stages-list li > select, .tf-seat-editor { grid-column: 1; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE MATTERS PAGE AS F — cards in columns (2026-09-28, [2026-09-28c]; the
   design: design/matters-page-options-2.html#o2f). The frame is one sidebar
   card beside every page that has the top bar (Shell::topbar): the brand, the
   role's nav, "Your matters" on the matter pages, the email, the tone and Sign
   out; on a phone it is a card on top. The matter page's pane is the matter's
   head, "About this matter" and the shelf: the task menu as columns of button
   cards, then each task's form with "What will run" and Start in a panel beside
   it. F is the layout; the brand is the product's (Tre, 2026-09-28): the mark
   and wordmark as Shell draws them, the tokens of each tone, Charis for names,
   prose AND controls (the product sets --font nowhere else), the product's own
   h1 and section-h2 sizes and weights (400, the display register; a card's
   title 700, as the product's h3), its control radius (--radius) everywhere,
   hierarchy by fill and hairline rather than shadow. Charis ships 400 and 700, so those are the only weights. Four type sizes: the page
   h1 (clamp 1.7-2.4rem), 1.38rem, 1rem, .875rem. ONE accent: the
   Start button and the open matter's bar. Nav, cards, icons, checkboxes, hover,
   drag and the focus ring read the neutral inks, so the ring is re-pointed to
   --fg-strong inside the frame and the matter pages.
   ══════════════════════════════════════════════════════════════════════════ */
.tf-frame, .tf-mpage { --focus: var(--fg-strong); --ring-w: 3px; }
.tf-frame [hidden], .tf-ask-shelf [hidden], .tf-mpage [hidden] { display: none !important; }   /* a shown-as-flex row keeps the hidden attribute's meaning */
.tf-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── the frame: fixed beside the page, never taller than the window ─────── */
body:has(> .tf-frame) { padding-left: 264px; }
.topbar.tf-frame { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 264px; max-height: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-alt); border: 0; border-radius: 0; box-shadow: none;
  font: 400 1rem/1.5 var(--font-serif); color: var(--fg); height: 100dvh; }
/* Keep the signed-in frame on the existing dark palette at every page tone.
   These are the dark roles from site.css; page colours and print stay independent. */
@media screen {
  .topbar.tf-frame {
    color-scheme: dark;
    --bg: var(--carbon);
    --bg-alt: #1C1B1A;
    --surface: #2A2826;
    --surface-2: #1A1918;
    --fg: #E7E2D8;
    --fg-strong: #F3EFE6;
    --muted: #A5A097;
    --rule: #2E2C2A;
    --rule-strong: #454341;
    --accent: var(--amber);
    --accent-ink: #D59A40;
    --accent-fg: var(--carbon);
    --accent-soft: #242320;
    --accent-hover: #F2B65E;
    --field-line: #827B6E;
    --mark-ink: var(--cream);
    --mark-frame: var(--amber);
    --mark-rim: #A87A38;
    --mark-edge: #8C6425;
  }
  html[data-tone] .tf-frame .brand-mark .mk-frame { fill: url(#hc-gold); }
}
.tf-frame-in { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; min-height: 100%; }
.tf-frame-top { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.tf-frame-brand { display: flex; flex-direction: column; gap: 0; }
.tf-frame .brand { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0 12px; font-size: 1.38rem; line-height: 1; }
.tf-frame .tf-nav, .topbar.tf-frame nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; font: 400 1rem/1.2 var(--font-serif); letter-spacing: 0; }
.topbar.tf-frame nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; justify-content: flex-start; padding: 0 12px; border: 0; border-radius: var(--radius); color: var(--fg); text-decoration: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.topbar.tf-frame nav a .tf-i { color: var(--muted); }
.topbar.tf-frame nav a:hover { background: var(--surface); color: var(--fg-strong); border: 0; }
.topbar.tf-frame nav a:active { color: var(--fg-strong); }
.topbar.tf-frame nav a[aria-current="page"] { background: var(--surface); color: var(--fg-strong); font-weight: 700; border: 0; }
.topbar.tf-frame nav a[aria-current="page"] .tf-i { color: var(--fg-strong); }

/* "Your matters" (matters.php and matter.php only) */
.tf-frame-matters { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tf-frame-matters-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* the matter list takes its natural height (a row is never cut by an inner scroll box); a card taller than the window
   scrolls as a whole, as the page does */
.tf-switch { display: none; }
.tf-rail-h { margin: 0; padding: 0 12px; font: 700 .875rem/1.4 var(--font-serif); color: var(--muted); letter-spacing: 0; }
.tf-frame .tf-side-search form { position: relative; margin: 0; }
.tf-frame .tf-side-search .tf-i, .tf-find .tf-i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tf-frame .tf-side-search input, .tf-find input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px 8px 44px; font: 400 1rem/1.45 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-frame .tf-side-search input::placeholder, .tf-find input::placeholder, .tf-mpage input::placeholder, .tf-mpage textarea::placeholder { color: var(--muted); opacity: 1; }
.tf-frame .tf-side-search input:focus, .tf-find input:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; border-color: var(--field-line); }
/* row 39 (item 8): the composer's "Look up cases for this" Yes / No shares .tf-find with the task search box — its radios sit beside their labels, never full-width boxes */
.tf-find[data-find-authority] label { display: inline-flex; align-items: center; gap: .35em; margin: 0; }
.tf-find[data-find-authority] input[type="radio"] { display: inline-block; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.tf-frame .tf-matters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: none; overflow: visible; border: 0; }
.tf-frame .tf-matters > li { flex: none; }
.tf-frame .tf-matter { margin: 0; padding: 0; border: 0; background: none; font-size: 1rem; }
.tf-frame .tf-matter a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius); color: var(--fg); font: 400 1rem/1.3 var(--font-serif); text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--dur) var(--ease); }
.tf-frame .tf-matter a:hover { background: var(--surface); color: var(--fg-strong); }
.tf-frame .tf-matter a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); color: var(--fg-strong); font-weight: 700; }
.tf-frame .tf-side-none { margin: 0; padding: 8px 12px; color: var(--fg-strong); font-size: 1rem; }
.tf-frame .tf-side-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; padding: 0 12px; font: 400 .875rem/1.4 var(--font-serif); color: var(--muted); max-width: none; }
.tf-frame .tf-pager-a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--fg-strong); font-weight: 400; text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }
.tf-frame .tf-note { margin: 0; padding: 0 12px; font-size: .875rem; }
.tf-frame .tf-side-new { margin: 0; }
.tf-frame .tf-side-new > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font: 400 1rem/1.2 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--fg-strong); cursor: pointer; list-style: none; }
.tf-frame .tf-side-new > summary::before { content: none; }
.tf-frame .tf-side-new > summary span { text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }
.tf-frame .tf-side-new .tf-form { margin: 8px 0 0; padding: 0 12px; max-width: none; }
.tf-frame .tf-side-new .field { margin: 0 0 12px; }
.tf-frame .tf-side-new .field > label { font: 700 .875rem/1.4 var(--font-serif); color: var(--fg-strong); margin: 0 0 4px; }
.tf-frame .tf-side-new .field .opt { font-style: normal; }
.tf-frame .tf-side-new .field input { min-height: 44px; font: 400 1rem/1.45 var(--font-serif); }

/* Theme by the logo; Profile anchors the foot. All rows share the nav's inset. */
.tf-frame-foot { margin-top: auto; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.tf-frame-who { min-width: 0; }
.tf-frame .tf-tone { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; font: 400 .875rem/1 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--muted); }
.tf-frame .tf-tone input { width: 4.5rem; height: 44px; accent-color: var(--fg-strong); }
.tf-frame .tf-tone-k { display: inline; }
.tf-frame .btn, .tf-mpage .btn:not(.btn-primary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font: 700 1rem/1.2 var(--font-serif); border-radius: var(--radius); border: 1px solid var(--field-line); background: var(--surface); color: var(--fg-strong); }
.tf-frame .btn:hover, .tf-mpage .btn:not(.btn-primary):hover { border-color: var(--fg-strong); color: var(--fg-strong); background: var(--surface-2); }

/* the pages beside the frame: the work strip and the footer in the frame's type */
body:has(> .tf-frame) .tf-work-strip { font: 400 .875rem/1.5 var(--font-serif); }
body:has(> .tf-frame) .foot { padding: 24px 0 32px; font: 400 .875rem/1.5 var(--font-serif); }
body:has(> .tf-frame) .foot p { font-size: .875rem; }

/* ── the matter's page: the head, About, the shelf, the task ─────────────── */
.tf-mpage { padding: 32px 0 48px; font: 400 1rem/1.5 var(--font-serif); }
.tf-mpane { max-width: calc(1160px + 3rem); }
.tf-mpage .tf-status { margin: 0 0 16px; color: var(--fg-strong); font: 700 1rem/1.5 var(--font-serif); min-height: 0; }
.tf-mpage .tf-status:empty { display: none; }
.tf-mpage .tf-quiet, .tf-mpage .tf-empty { font-size: 1rem; }
.tf-mhead { display: flex; flex-direction: column; gap: 8px; }
.tf-mhead h1 { margin: 0; font: 400 clamp(1.7rem, 3.6vw, 2.4rem)/1.15 var(--font-serif); letter-spacing: var(--track-display); color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-mhead h1 .tf-chip { font-size: .875rem; vertical-align: middle; font-family: var(--font-serif); letter-spacing: 0; }
.tf-meta-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.tf-mpage .tf-meta { display: block; margin: 0; font: 400 1rem/1.5 var(--font-serif); color: var(--muted); max-width: none; }
.tf-about-btn, .tf-back, .tf-more-tasks { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: var(--fg-strong); font: 400 1rem/1.2 var(--font-serif); cursor: pointer; }
.tf-about-btn .tf-i { transition: transform var(--dur) var(--ease); }
.tf-about-btn[aria-expanded="true"] .tf-i { transform: rotate(180deg); }
.tf-runs-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-strong); font: 400 1rem/1.2 var(--font-serif); text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }
.tf-about { margin: 8px 0; padding: 16px; border-radius: var(--radius); background: var(--bg-alt); max-width: 48rem; }
.tf-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.tf-facts dt { color: var(--muted); } .tf-facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.tf-about .tf-seal { margin: 16px 0 0; }
.tf-about .tf-seal p, .tf-about .tf-seal .tf-quiet { font-size: 1rem; max-width: none; }
.tf-about .tf-seal input[type="text"] { min-height: 44px; font: 400 1rem/1.45 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 8px 12px; }
.tf-about .tf-section { margin: 16px 0 0; }
.tf-about .tf-section > h2 { font: 700 1rem/1.4 var(--font-serif); color: var(--fg-strong); margin: 0 0 4px; }
.tf-about table.tf-table, .tf-about table.tf-table thead th { font: 400 .875rem/1.5 var(--font-serif); letter-spacing: 0; text-transform: none; }
.tf-about table.tf-table .tf-quiet { font-size: .875rem; }
.tf-mpage a { color: var(--fg-strong); }
.tf-about table.tf-table a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }

/* the shelf: "What do you want to do?" and "Find a task", then the groups as columns of button cards */
.tf-shelf { margin-top: 28px; }
.tf-shelf-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.tf-shelf-top h2, .tf-task-title h2 { margin: 0; font: 400 1.38rem/1.2 var(--font-serif); letter-spacing: var(--track-display); color: var(--fg-strong); }
.tf-find { position: relative; flex: 0 1 380px; min-width: 0; }
.tf-shelf-body { margin-top: 20px; }
.tf-shelf-body:focus { outline: none; }   /* "Skip to tasks" lands on the list (tabindex -1); the next Tab rings the first card */
body:has(#task-shelf[hidden]) .skip[href="#task-list"] { display: none; }   /* a task's screen hides the shelf: nothing to skip to, so the link leaves the Tab order */
.tf-shelf-grouped { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; align-items: start; }
.tf-shelf-body:not(.tf-shelf-grouped) .tf-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tf-shelf-group { min-width: 0; }
.tf-shelf-gh { margin: 0 0 12px; padding: 0; font: 700 .875rem/1.4 var(--font-serif); color: var(--muted); }
.tf-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tf-cards > li { display: flex; min-width: 0; margin: 0; }
.tf-card { flex: 1 1 auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; min-height: 44px; margin: 0; padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); color: var(--fg); font: 400 1rem/1.45 var(--font-serif); text-align: left; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tf-card:hover { background: var(--surface); border-color: var(--field-line); }
.tf-card:active { background: var(--surface-2); border-color: var(--fg-strong); }
.tf-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--surface); color: var(--fg-strong); border: 1px solid var(--rule); }
.tf-card-x { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.tf-card-t { font-weight: 700; color: var(--fg-strong); text-wrap: pretty; }
.tf-card-l { font-size: .875rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.tf-more-tasks { margin: 8px 0 0; text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }
.tf-shelf .tf-task-none { margin: 16px 0 0; color: var(--fg-strong); }

/* the task: the title row with "Back to all tasks", the card line, the form and the panel beside it */
.tf-taskscreen { margin-top: 24px; }
.tf-task-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tf-task-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tf-back { gap: 8px; }
.tf-back span { text-decoration: underline; text-decoration-color: var(--field-line); text-underline-offset: 5px; }
.tf-task-line { margin: 8px 0 0; color: var(--muted); max-width: var(--measure); }
.tf-task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; margin-top: 28px; }
.tf-task-main { min-width: 0; max-width: 680px; }
.tf-ask-shelf .tf-task { margin: 0; }
.tf-ask-shelf .field { margin: 0 0 24px; }
.tf-ask-shelf .field > label, .tf-ask-shelf .tf-field label { display: block; margin: 0 0 8px; font: 700 1rem/1.4 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--fg-strong); }
.tf-ask-shelf .tf-field label .opt { letter-spacing: 0; }
.tf-ask-shelf .opt { font-style: normal; font-weight: 400; color: var(--muted); }
.tf-ask-shelf .field input[type="text"], .tf-ask-shelf .field textarea, .tf-ask-shelf .field select { display: block; width: 100%; min-height: 44px; margin: 0; padding: 8px 16px; font: 400 1rem/1.45 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-ask-shelf .field textarea { min-height: 8.2em; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
.tf-ask-shelf .field-large textarea, .tf-ask-shelf .tf-field-large textarea { min-height: 11em; }
.tf-ask-shelf .field input:focus, .tf-ask-shelf .field textarea:focus, .tf-ask-shelf .field select:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; border-color: var(--field-line); }
.tf-ask-shelf .tf-count:has(span:empty) { display: none; }
.tf-ask-shelf .tf-count { margin: 4px 0 0; font: 400 .875rem/1.5 var(--font-serif); color: var(--muted); }
.tf-files { margin: 0 0 24px; border-radius: var(--radius); }
.tf-ask-shelf .tf-files[data-drop-target][data-over="1"] { border-color: transparent !important; background: transparent !important; outline: 2px dashed var(--fg-strong); outline-offset: 6px; }
.tf-files-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.tf-files-h h3 { margin: 0; font: 700 1rem/1.4 var(--font-serif); color: var(--fg-strong); }
.tf-ask-shelf .tf-drop-choose { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--fg-strong); font: 700 1rem/1.2 var(--font-serif); text-decoration: none; }
.tf-ask-shelf .tf-drop-choose:hover { color: var(--fg-strong); border-color: var(--fg-strong); background: var(--surface-2); }
.tf-ask-shelf .tf-drop-files { display: block; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); overflow: hidden; }
.tf-ask-shelf .tf-drop-files:empty { display: none; }
.tf-ask-shelf .tf-drop-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 52px; margin: 0; padding: 4px 16px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; }
.tf-ask-shelf .tf-drop-files li:first-child { border-top: 0; }
.tf-drop-row { display: flex; align-items: center; gap: 12px; flex: 1 1 12rem; min-width: 0; min-height: 44px; cursor: pointer; }
.tf-drop-row input, .tf-ask-shelf .tf-drop-files li .tf-drop-tick { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--fg-strong); }
.tf-ask-shelf .tf-drop-files li b { font: 400 1rem/1.35 var(--font-serif); color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-ask-shelf .tf-drop-files li .tf-drop-state { margin-left: auto; font: 400 .875rem/1.4 var(--font-serif); color: var(--muted); }
.tf-ask-shelf .tf-drop-files li .tf-drop-problem { flex: 1 1 100%; margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--fg-strong); background: var(--surface); color: var(--fg-strong); font: 400 .875rem/1.5 var(--font-serif); }
.tf-ask-shelf .tf-drop-files li .tf-drop-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--fg-strong); font: 700 .875rem/1.2 var(--font-serif); cursor: pointer; }
.tf-ask-shelf .tf-drop-files li .tf-drop-preview { flex: 1 1 100%; margin: 0 0 8px; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.tf-ask-shelf .tf-drop-preview p, .tf-ask-shelf .tf-drop-preview pre { margin: 0; font: 400 .875rem/1.5 var(--font-serif); color: var(--fg); white-space: pre-wrap; }
.tf-files-rule { margin: 12px 0 0; color: var(--fg); max-width: var(--measure); }
.tf-ask-shelf .tf-drop-hint { margin: 8px 0 0; font: 400 .875rem/1.5 var(--font-serif); color: var(--muted); max-width: var(--measure-small); }
.tf-more { margin: 0 0 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tf-more > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; list-style: none; cursor: pointer; color: var(--fg-strong); font: 700 1rem/1.3 var(--font-serif); }
.tf-more > summary::-webkit-details-marker { display: none; }
.tf-more > summary .tf-i { color: var(--muted); transition: transform var(--dur) var(--ease); }
.tf-more[open] > summary .tf-i { transform: rotate(90deg); }
.tf-more-body { padding: 8px 0 4px; }
.tf-go-panel { position: sticky; top: 24px; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); }
.tf-restate p { margin: 0; color: var(--fg); max-width: none; }
.tf-restate p + p { margin-top: 8px; }
.tf-restate b { font-weight: 700; color: var(--fg-strong); }
.tf-restate .tf-task-out { font-size: .875rem; color: var(--muted); }
.tf-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.tf-go .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 24px; font: 700 1rem/1.2 var(--font-serif); border-radius: var(--radius); }
.tf-go-note { margin: 0; font: 400 .875rem/1.5 var(--font-serif); color: var(--muted); }
.tf-go-panel .tf-status { margin: 12px 0 0; }
/* row 18: a launch's outcome under Start, kept until the next Start (js/question.js HiCourtLaunch); Tasks' "Not started" rows and Dismiss; the operator's trace */
.tf-launch-outcome { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--fg-strong); font: 400 .9rem/1.45 var(--font-serif); overflow-wrap: anywhere; }
.tf-launch-outcome p { margin: 0 0 .35rem; }
.tf-launch-outcome p:last-child { margin-bottom: 0; }
.tf-launch-outcome .tf-launch-head { font-weight: 700; }
.tf-launch-outcome a { color: var(--accent-ink); }
.tf-not-started { font-weight: 700; color: var(--fg-strong); }
.tf-linkbtn { font: inherit; color: var(--accent-ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.tf-linkbtn:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
.tf-trace { margin: 16px 0; padding-left: 1.4em; }
.tf-trace li { margin: 0 0 .3rem; }
.tf-trace code { font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* row 18b: the composer's two file choices */
.tf-file-choices { display: grid; gap: 10px; margin: 0 0 12px; }
.tf-file-choices[hidden] { display: none; }
.tf-file-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s ease; }
.tf-file-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.tf-file-choice b { display: block; font: 700 .95rem/1.35 var(--font-serif); color: var(--fg-strong); }
.tf-file-choice small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
.tf-file-choice:has(input:checked) { border-color: var(--accent); }
.tf-file-choice:has(input:focus-visible) { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
/* row 18b: the start panel — each real step lit as it happens, then a completed ring and a check, then Tasks */
html.tf-launching-open { overflow: hidden; }
.tf-launching { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.tf-launching[data-open] { opacity: 1; }
.tf-launching-card { width: min(440px, 100%); padding: 28px 28px 24px; border: 1px solid var(--rule); border-radius: calc(var(--radius) * 2); background: var(--surface); color: var(--fg-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transform: translateY(10px) scale(.98); transition: transform .26s cubic-bezier(.2, .8, .2, 1); outline: none; }
.tf-launching[data-open] .tf-launching-card { transform: none; }
.tf-launching-mark { width: 48px; height: 48px; margin: 0 0 16px; }
.tf-launching-mark svg { display: block; overflow: visible; }
.tf-launching-track { fill: none; stroke: var(--rule); stroke-width: 3; }
.tf-launching-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 34 92; transform-origin: 24px 24px; animation: tf-spin .9s linear infinite; transition: stroke-dasharray .3s ease; }
.tf-launching-check { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .35s ease .12s; }
.tf-launching[data-done] .tf-launching-arc { animation: none; stroke-dasharray: 126 0; }
.tf-launching[data-done] .tf-launching-check { stroke-dashoffset: 0; }
.tf-launching-card h2 { margin: 0; font: 700 1.35rem/1.25 var(--font-serif); color: var(--fg-strong); }
.tf-launching-task { margin: 4px 0 18px; font-size: .95rem; color: var(--muted); }
.tf-launching-task:empty { display: none; }
.tf-launching-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tf-launching-steps li { display: flex; align-items: center; gap: 12px; font-size: .95rem; line-height: 1.35; color: var(--muted); transition: color .2s ease; }
.tf-launching-steps li[hidden] { display: none; }
.tf-launching-steps li[data-state="active"], .tf-launching-steps li[data-state="done"] { color: var(--fg-strong); }
.tf-launching-dot { position: relative; width: 18px; height: 18px; flex: none; border: 2px solid var(--rule); border-radius: 50%; transition: background .2s ease, border-color .2s ease; }
.tf-launching-steps li[data-state="active"] .tf-launching-dot { border-color: var(--accent); }
.tf-launching-steps li[data-state="active"] .tf-launching-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); animation: tf-pulse 1s ease-in-out infinite; }
.tf-launching-steps li[data-state="done"] .tf-launching-dot { border-color: var(--accent); background: var(--accent); }
.tf-launching-steps li[data-state="done"] .tf-launching-dot::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tf-launching-note { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .85rem; line-height: 1.45; color: var(--muted); }
@keyframes tf-spin { to { transform: rotate(360deg); } }
@keyframes tf-pulse { 0%, 100% { transform: scale(.6); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
/* row 18b: Tasks after Start — the word that it started, the new row marked, and each running task's live line */
.tf-started { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 20px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); animation: tf-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.tf-started p { margin: 0; flex: 1 1 240px; color: var(--fg-strong); }
.tf-started-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent); }
.tf-started-mark path { fill: none; stroke: var(--accent-fg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tf-task-new td { animation: tf-rise .4s cubic-bezier(.2, .8, .2, 1) both, tf-glow 3s ease-out both; }
.tf-task-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tf-activity { display: block; margin-top: .3em; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.tf-activity:empty { display: none; }
.tf-activity::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: tf-pulse 1.4s ease-in-out infinite; }
@keyframes tf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tf-glow { 0%, 40% { background-color: var(--accent-soft); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .tf-launching, .tf-launching-card, .tf-launching-arc, .tf-launching-check { transition: none; }
  .tf-launching-arc { animation: none; stroke-dasharray: 126 0; opacity: .45; }
  .tf-launching-steps li[data-state="active"] .tf-launching-dot::after, .tf-activity::before { animation: none; }
  .tf-started, .tf-task-new td { animation: none; }
  .tf-task-new td { background-color: var(--accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .tf-card, .tf-frame nav a, .tf-frame .tf-matter a, .tf-about-btn .tf-i, .tf-more > summary .tf-i { transition: none; }
  .tf-card:hover { transform: none; }
}
@media (max-width: 1180px) {
  .tf-shelf-grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-task-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tf-go-panel { position: static; margin-top: 8px; }
}
@media (max-width: 860px) {
  body:has(> .tf-frame) { padding-left: 0; }
  .topbar.tf-frame, .topbar.tf-frame[data-rail] { position: static; width: auto; height: auto; max-height: none; overflow: visible; margin: 0; }
  .tf-frame-in { padding: 20px 16px; gap: 12px; }
  .tf-frame-top { gap: 8px; padding-bottom: 12px; }
  .tf-frame-brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .tf-frame .brand { padding: 0 8px; }
  .tf-frame .tf-tone { padding: 0 4px; gap: 6px; font-size: .75rem; }
  /* the nav is ONE row (no line holding a single item): it fits, or it scrolls sideways inside the card, never the page */
  .topbar.tf-frame nav { flex-direction: row; flex-wrap: nowrap; gap: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .topbar.tf-frame nav a { flex: none; }
  /* the edge cue (the Matters F follow-ups, 2026-10-07): an edge with more nav beyond it fades into the card (the card's own
     --bg-alt) under an arrow — only where the nav's own script measured overflow (Shell::NAV_MORE sets data-more, and is drawn
     only with the operator's items), so a nav that fits shows none. Sticky inside the scrolling row, over the items, taking no
     width (its negative margin), and never a target: a tap reaches the link beneath. The arrow is silent to a screen reader (the
     empty alternative after "/"; a browser without that syntax keeps the first content). */
  .topbar.tf-frame nav[data-more~="start"]::before, .topbar.tf-frame nav[data-more~="end"]::after { position: sticky; z-index: 1; flex: none; align-self: stretch; display: flex; align-items: center; width: 44px; padding: 0; font: 700 1.38rem/1 var(--font-serif); color: var(--fg-strong); pointer-events: none; }
  .topbar.tf-frame nav[data-more~="start"]::before { content: "\2039"; content: "\2039" / ""; left: 0; margin-right: -44px; justify-content: flex-start; background: linear-gradient(to left, transparent, var(--bg-alt) 55%); }
  .topbar.tf-frame nav[data-more~="end"]::after { content: "\203A"; content: "\203A" / ""; right: 0; margin-left: -44px; justify-content: flex-end; background: linear-gradient(to right, transparent, var(--bg-alt) 55%); }
  .tf-switch { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 8px 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--fg-strong); font: 400 1rem/1.3 var(--font-serif); text-align: left; cursor: pointer; }
  .tf-switch-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .tf-switch-t b { font-weight: 700; overflow-wrap: anywhere; }
  .tf-switch-t span { font-size: .875rem; color: var(--muted); }
  .tf-frame[data-open="true"] .tf-switch-chev { transform: rotate(90deg); }
  .tf-frame[data-rail][data-open="false"] .tf-frame-matters-body { display: none; }
  .tf-frame-foot { padding-top: 12px; }
  .tf-frame:not([data-rail]) .tf-frame-top { padding-bottom: 0; border-bottom: 0; }
  .tf-mpage { padding: 16px 0 48px; }
}
@media (max-width: 600px) {
  .topbar.tf-frame nav a { padding: 0 7px; gap: 8px; justify-content: center; }
  .topbar.tf-frame nav a .tf-i { display: none; }
  .tf-shelf-grouped { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tf-find { flex: 1 1 100%; }
  .tf-go-panel { padding: 16px; }
}
/* ── row 7u: the HiCourt operator's own nav items, under their heading (never drawn for a firm's account) ── */
.topbar.tf-frame nav .tf-nav-k { display: block; margin: 12px 0 0; padding: 0 12px; font: 700 .66rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* ── row 7u: the Library — the matters beside one matter's files, by kind, and its search ── */
.tf-libpage { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
.tf-lib-chooser { min-width: 0; }
.tf-lib-chooser > summary { display: none; }
.tf-lib-start { margin: 16px 0 20px; }
.tf-lib-start p { margin: 8px 0 0; max-width: 60ch; }
.tf-lib-chooser summary:focus-visible, .tf-lib-matters a:focus-visible, .tf-lib-start a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-lib-matters h2, .tf-lib-main > h2 { font-size: 1.38rem; margin: 0 0 12px; overflow-wrap: anywhere; }
.tf-lib-matters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tf-lib-matters a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius); color: var(--fg); text-decoration: none; overflow-wrap: anywhere; line-height: 1.45; gap: 8px; }
.tf-lib-matters a:hover { background: var(--surface); color: var(--fg-strong); }
.tf-lib-matters a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); color: var(--fg-strong); font-weight: 700; }
.tf-lib-find { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; }
.tf-lib-find label { flex: 1 1 100%; font: 700 .875rem/1.4 var(--font-serif); color: var(--fg-strong); }
.tf-lib-find input[type="search"] { flex: 1 1 16rem; min-width: 0; min-height: 44px; padding: 8px 12px; font: 400 1rem/1.45 var(--font-serif); color: var(--fg-strong); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-lib-find input[type="search"]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-lib-main .tf-section { margin-top: 24px; padding-top: 16px; }
.tf-lib-main .tf-section > h3 { font-size: 1.1rem; margin: 0 0 4px; }
.tf-lib-list { list-style: none; margin: 0; padding: 0; }
.tf-lib-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.tf-lib-list li b { color: var(--fg-strong); }
.tf-lib-list .tf-by { display: block; color: var(--muted); font-size: .875rem; margin-top: 4px; }
.tf-lib-x { display: block; margin-top: 4px; color: var(--fg); font-style: italic; }
.tf-operator-act { margin-top: 24px; }
@media (max-width: 860px) {
  .tf-libpage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tf-lib-chooser > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--fg-strong); cursor: pointer; list-style: none; }
  .tf-lib-chooser > summary::-webkit-details-marker { display: none; }
  .tf-lib-chooser > summary > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .tf-lib-chooser > summary b, .tf-lib-chooser > summary span span { display: block; }
  .tf-lib-chooser > summary span span { font-size: .875rem; color: var(--muted); }
  .tf-lib-chooser[open] > summary > .tf-i { transform: rotate(90deg); }
  .tf-lib-chooser .tf-lib-matters { max-height: 12rem; overflow-y: auto; margin-top: 8px; padding: 4px; }
  .tf-lib-chooser .tf-lib-matters h2 { display: none; }
  /* The selected name is already visible in the phone chooser; retain the pane heading for assistive navigation. */
  .tf-lib-main > h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .topbar.tf-frame nav .tf-nav-k { display: flex; align-items: center; flex: none; min-height: 44px; margin: 0 0 0 8px; padding: 0 4px; }
}
@media print {
  body:has(> .tf-frame) { padding-left: 0; }
  .tf-frame, .tf-shelf, .tf-go-panel { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
   ROW 13b ([2026-10-07d]): THE TASK SETUP PAGE (task-setup.php, js/task-setup.js) — design/task-setup-mockup.html's layout and
   behavior in the product's look: site.css tokens only (every tone), the product's faces, hairlines rather than shadows, neutral inks
   for switches, ticks and tabs; the accent marks only what is changed and not saved yet, and the one primary action. Labs carry a mono
   letter, never a colour. The editor covers the whole page, frame included (Tre, 2026-10-07: never a side panel).
   ══════════════════════════════════════════════════════════════════════════ */
.tf-tabs { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.tf-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--fg); text-decoration: none; font: 700 .875rem/1.2 var(--font-serif); }
.tf-tab:hover { border-color: var(--fg-strong); color: var(--fg-strong); background: var(--surface-2); }
.tf-tab[aria-current="page"] { background: var(--surface); border-color: var(--fg-strong); color: var(--fg-strong); }
.tf-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-ts-page { padding-top: 2rem; }
.tf-ts-wrap { max-width: min(100%, 110rem); padding: 0 1rem; }
.tf-ts-head { max-width: 52rem; }
.tf-ts-muted { color: var(--muted); }
.tf-ts-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 20px 0 10px; font-size: .86rem; }
.tf-ts-spacer { flex: 1 1 auto; }
.tf-ts-toolbar .btn:disabled, .tf-ts-full .btn:disabled, .tf-ts-dialog .btn:disabled { opacity: .5; cursor: default; }
.tf-ts-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tf-ts-grid { border-collapse: collapse; width: 100%; min-width: 1000px; font-size: .86rem; }
.tf-ts-grid th { text-align: left; font: 700 .64rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 6px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; vertical-align: bottom; }
.tf-ts-grid td { padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tf-ts-grid tbody tr { cursor: pointer; }
.tf-ts-grid tbody tr:hover td { background: var(--surface-2); }
.tf-ts-grid tbody tr:last-child td { border-bottom: 0; }
.tf-ts-grid td.tf-ts-c-drafting { min-width: 14rem; }
.tf-ts-grid td.tf-ts-c-check { min-width: 8.5rem; }
.tf-ts-grid td.tf-ts-c-request { min-width: 7rem; }
td.tf-ts-changed, .tf-ts-chip.tf-ts-changed { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); }
.tf-ts-taskcell { min-width: 10rem; }
.tf-ts-open { all: unset; cursor: pointer; display: grid; gap: 2px; max-width: 13rem; }
.tf-ts-next-line { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.tf-ts-next-line.tf-ts-refused { color: var(--fg-strong); }
.tf-ts-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.tf-ts-tname { font: 700 .95rem/1.3 var(--font-serif); color: var(--fg-strong); }
.tf-ts-tneed { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.tf-ts-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-ts-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); color: var(--fg-strong); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; font-size: .74rem; white-space: nowrap; }
.tf-ts-lab { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1em; height: 1.1em; padding: 0 2px; border: 1px solid var(--rule-strong); border-radius: 3px; font: 700 .58rem/1 var(--mono); color: var(--muted); }
.tf-ts-cellnote { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.tf-ts-off { color: var(--muted); font-size: .82rem; }
.tf-ts-tag { font-size: .74rem; color: var(--fg); margin-top: 3px; }
.tf-ts-refused { color: var(--fg-strong); border-left: 3px solid var(--accent); padding-left: 8px; font-size: .86rem; }
.tf-ts-refused b { display: block; }
.tf-ts-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); margin: 10px 2px 0; align-items: center; }
/* the switch: a checkbox drawn as a track in the neutral inks */
.tf-ts-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; vertical-align: middle; }
.tf-ts-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tf-ts-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--field-line); transition: background-color var(--dur) var(--ease); }
.tf-ts-switch span::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: var(--muted); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.tf-ts-switch input:checked + span { background: var(--fg-strong); border-color: var(--fg-strong); }
.tf-ts-switch input:checked + span::after { transform: translateX(16px); background: var(--bg); }
.tf-ts-switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.tf-ts-switch input:disabled + span { opacity: .5; }
.tf-ts-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--fg); margin-top: 10px; cursor: pointer; }
/* the editor: the whole page, the frame included */
body.tf-ts-locked { overflow: hidden; }
.tf-ts-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--fg); overflow: auto; overscroll-behavior: contain; }
.tf-ts-fhead { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--rule-strong); padding: 12px 24px; display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.tf-ts-fnav { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-ts-ftitle h2 { margin: 0; font-size: 1.38rem; }
.tf-ts-ftitle p { margin: 2px 0 0; font-size: .86rem; }
.tf-ts-fact { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tf-ts-fbody { padding: 18px 24px 48px; max-width: 110rem; margin: 0 auto; }
.tf-ts-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tf-ts-pip { border: 1px solid var(--rule-strong); background: var(--surface); color: var(--muted); border-radius: var(--radius); padding: 6px 10px; font: 400 .78rem/1.35 var(--font-serif); cursor: pointer; text-align: left; min-width: 8.5rem; }
.tf-ts-pip b { display: block; color: var(--fg-strong); font-size: .84rem; }
.tf-ts-pip:hover { border-color: var(--fg-strong); }
.tf-ts-pip.tf-ts-isoff { opacity: .6; }
.tf-ts-menuline { margin: 0 0 14px; }
.tf-ts-menuline .tf-ts-toggle { margin-top: 0; font-weight: 700; color: var(--fg-strong); }
.tf-ts-menuline p { margin: 4px 0 0 46px; font-size: .82rem; }
.tf-ts-next, .tf-ts-suggest { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; margin: 0 0 14px; }
.tf-ts-suggest { border-style: dashed; border-color: var(--rule-strong); }
.tf-ts-next h3 { margin: 0 0 6px; font-size: 1rem; }
.tf-ts-look { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 4px 14px; margin: 0; font-size: .86rem; }
.tf-ts-look dt { color: var(--muted); }
.tf-ts-look dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.tf-ts-next > p, .tf-ts-suggest > p { margin: 6px 0 0; font-size: .86rem; }
.tf-ts-suggest ul { margin: 6px 0 8px; padding-left: 18px; font-size: .88rem; columns: 2 28rem; column-gap: 32px; }
.tf-ts-suggest li { break-inside: avoid; margin-bottom: 4px; }
.tf-ts-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tf-ts-notes { margin: 8px 0 0; padding-left: 18px; font-size: .84rem; color: var(--fg-strong); columns: 1; }
.tf-ts-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: 14px; align-items: start; }
.tf-ts-step { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; scroll-margin-top: 96px; min-width: 0; }
.tf-ts-step.tf-ts-wide { grid-column: 1 / -1; }
.tf-ts-step.tf-ts-isoff { opacity: .7; }
.tf-ts-shead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tf-ts-shead h3 { margin: 0; font-size: 1rem; }
.tf-ts-snum { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule-strong); font: 700 .7rem/1 var(--mono); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.tf-ts-always { margin-left: auto; font: 700 .6rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-ts-help { font-size: .84rem; color: var(--muted); margin: 0 0 10px; }
.tf-ts-seats { display: grid; gap: 8px; }
.tf-ts-seats > .btn { justify-self: start; }
.tf-ts-seat { display: grid; gap: 2px; min-width: 0; }
.tf-ts-seatctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-ts-seatctl select { font: 400 .86rem/1.4 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 4px 6px; min-width: 0; max-width: 100%; }
.tf-ts-seatctl select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tf-ts-model { flex: 2 1 15rem; }
.tf-ts-level { flex: 0 1 10rem; }
.tf-ts-lens { flex: 1 1 11rem; }
.tf-ts-backupcell { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 14rem; min-width: 0; }
.tf-ts-backupcell span { font: 700 .6rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-ts-backupcell select { flex: 1 1 10rem; }
.tf-ts-x { border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 6px; line-height: 1; }
.tf-ts-x:hover { color: var(--fg-strong); }
.tf-ts-stats { margin: 0; font-size: .74rem; color: var(--muted); }
.tf-ts-wide .tf-ts-seat { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.tf-ts-wide .tf-ts-seatctl { flex: 3 1 34rem; min-width: 0; }
.tf-ts-wide .tf-ts-stats { flex: 2 1 20rem; }
.tf-ts-numbersnote { font-size: .8rem; margin: 0 0 10px; }
.tf-ts-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--field-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.tf-ts-seg button { border: 0; border-right: 1px solid var(--field-line); background: var(--surface); color: var(--fg); padding: 5px 12px; font: 400 .82rem/1.3 var(--font-serif); cursor: pointer; }
.tf-ts-seg button:last-child { border-right: 0; }
.tf-ts-seg button[aria-pressed="true"] { background: var(--fg-strong); color: var(--bg); font-weight: 700; }
.tf-ts-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* the review, History and the bulk dialogs */
.tf-ts-dialog { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.tf-ts-dialog::backdrop { background: color-mix(in srgb, var(--carbon) 60%, transparent); }
.tf-ts-dhead { padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 700 1rem/1.3 var(--font-serif); color: var(--fg-strong); }
.tf-ts-dbody { padding: 12px 16px; max-height: calc(100vh - 220px); overflow: auto; }
.tf-ts-dfoot { padding: 12px 16px; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tf-ts-change { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .88rem; overflow-wrap: anywhere; }
.tf-ts-change b { color: var(--fg-strong); }
.tf-ts-restore { float: right; margin-left: 8px; }
.tf-ts-field { display: grid; gap: 4px; margin: 10px 0; }
.tf-ts-field > span { font: 700 .62rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-ts-field select, .tf-ts-field textarea { font: 400 .9rem/1.4 var(--font-serif); color: var(--fg); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 6px 8px; width: 100%; }
.tf-ts-field textarea { min-height: 60px; }
.tf-ts-toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--fg-strong); color: var(--bg); padding: 8px 14px; border-radius: var(--radius); font-size: .86rem; z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.tf-ts-toast.tf-ts-show { opacity: 1; }
@media (max-width: 900px) {
  .tf-ts-fhead, .tf-ts-fbody { padding-left: 16px; padding-right: 16px; }
  .tf-ts-fact { margin-left: 0; }
  .tf-ts-look { grid-template-columns: minmax(0, 1fr); }
  .tf-ts-look dt { margin-top: 6px; }
  .tf-ts-menuline p { margin-left: 0; }
}
/* ══════════════════════════════════════════════════════════════════════════
   ROW 7v (2026-10-07): THE FIVE MATTERS, PROFILE, AND ADDING A PERSON — site.css tokens only (every tone), the product's faces,
   hairlines and neutral fills; the accent stays on the open matter's bar and the one primary action of a form.
   ══════════════════════════════════════════════════════════════════════════ */
/* The visible Profile label keeps the account destination clear on every screen size. */
.tf-frame-foot .tf-frame-who { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 8px 12px; border-radius: var(--radius);
  font: 400 .875rem/1.3 var(--font-serif); color: var(--fg); text-decoration: none; white-space: normal; overflow: hidden; }
.tf-frame-foot .tf-frame-who:hover { background: var(--surface); color: var(--fg-strong); }
.tf-frame-foot .tf-frame-who[aria-current="page"] { background: var(--surface); color: var(--fg-strong); font-weight: 700; }
.tf-frame-foot .tf-frame-who:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
.tf-who-t { min-width: 0; }
.tf-who-label { display: block; font-weight: 700; color: var(--fg-strong); }
.tf-who-name { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.tf-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--rule-strong); color: var(--fg-strong); font: 700 .78rem/1 var(--font-serif); letter-spacing: .02em; }
.tf-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-avatar-md { width: 64px; height: 64px; font-size: 1.38rem; }
.tf-avatar-lg { width: 96px; height: 96px; font-size: 2rem; }

/* "Your matters": Open a new matter first, then Find, then the five (or All matters) */
.tf-frame .tf-rail-k { margin: -4px 0 0; padding: 0 12px; font: 400 .875rem/1.4 var(--font-serif); color: var(--muted); }
.tf-frame .tf-side-all { margin: 0; padding: 0 12px; font: 400 .875rem/1.4 var(--font-serif); }

/* Profile: account exit stays available even when profile details cannot be read. */
.tf-profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 48rem; }
.tf-profile-head .signout { flex: none; margin: 0; }
.tf-profile-head .signout .btn { min-height: 44px; }

/* Profile: who you are signed in as, then four forms, each full width */
.tf-profile .tf-whoami { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin: 8px 0 24px; padding: 16px; border-radius: var(--radius); background: var(--bg-alt); max-width: 48rem; }
.tf-profile .tf-whoami h2 { margin: 0 0 8px; font: 400 1.38rem/1.3 var(--font-serif); color: var(--fg-strong); overflow-wrap: anywhere; }
.tf-profile .tf-whoami > div { flex: 1 1 18rem; min-width: 0; }
.tf-profile .tf-facts dd { overflow-wrap: anywhere; }
.tf-profile .tf-section { max-width: 48rem; }
.tf-profile-form { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; max-width: none; }
.tf-profile-form .field { margin: 0 0 12px; }
.tf-profile-form .btn { justify-self: start; min-height: 44px; margin: 0 0 12px; }
.tf-form-error { margin: 0 0 12px; color: var(--fg-strong); font: 700 1rem/1.5 var(--font-serif); }
.tf-picture-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.tf-picture-row > div { flex: 1 1 18rem; min-width: 0; }
.tf-picture-row .tf-quiet { margin: 0 0 12px; }
.tf-picture-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tf-picture-acts label.btn { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; }
.tf-picture-acts input[type="file"]:focus-visible + label.btn { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
.tf-profile .tf-status:empty { display: none; }

/* People: Add a person, and the one-time link shown once */
.tf-add-person { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; max-width: none; }
.tf-add-person .field { margin: 0 0 12px; }
.tf-add-person .btn { grid-column: 1 / -1; justify-self: start; min-height: 44px; margin: 0 0 12px; }
.tf-link-once { padding: 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--bg-alt); max-width: 56rem; }
.tf-link-once h2 { margin-top: 0; overflow-wrap: anywhere; }
.tf-link-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0; }
.tf-link-url { flex: 1 1 24rem; min-width: 0; min-height: 44px; padding: 8px 12px; font: 400 .875rem/1.4 var(--mono); color: var(--fg-strong); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: var(--radius); }
.tf-link-url:focus { outline: var(--ring-w) solid var(--focus); outline-offset: 2px; }
#people-list .tf-by { display: block; color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }

@media print { .tf-link-once .btn { display: none !important; } }

/* People: a single full-width users table, with deliberate per-account forms. */
.tf-people .tf-table th { white-space: nowrap; }
.tf-people .tf-table td { vertical-align: top; }
.tf-people .tf-table td[data-label="Sign-in email"] { overflow-wrap: anywhere; }
.tf-account-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; min-width: 10rem; }
.tf-account-controls { display: grid; gap: .7rem; min-width: 14rem; padding: .5rem 0; }
.tf-account-actions summary, .tf-people #add-person summary { cursor: pointer; font-weight: 600; padding: .35rem 0; }
.tf-account-actions details[open] { padding-bottom: .7rem; }
.tf-account-form { display: grid; gap: .65rem; margin: 0; }
.tf-account-form .field { min-width: 0; }
.tf-account-form input { width: 100%; box-sizing: border-box; }
.tf-account-form .tf-quiet { max-width: 29rem; margin: .2rem 0; }
.tf-account-form .btn { justify-self: start; }
.tf-account-delete { border-top: 1px solid var(--line, #ddd); padding-top: .35rem; }
.tf-people #add-person details[open] > summary { margin-bottom: 1rem; }
@media (max-width: 720px) { .tf-account-actions { min-width: 0; } }

/* Matter workspace 775 — scoped additions; undo this block without replacing shared/People styles. */
.tf-new-matter-link { display: flex; align-items: center; gap: .6rem; padding: .75rem .6rem; margin: 0 0 1rem; color: var(--fg-strong); font-weight: 600; text-decoration: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.tf-new-matter-link:hover { background: var(--accent-soft); color: var(--accent-ink); }
.tf-matter-intro { max-width: 46rem; margin-bottom: 2rem; }
.tf-matter-intro h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.15; margin: .4rem 0 .8rem; }
.tf-matter-intro > p:last-child { max-width: 40rem; font-size: 1.06rem; color: var(--muted); line-height: 1.65; }
.tf-matter-create { width: 100%; max-width: 52rem; padding: clamp(1.2rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.tf-matter-fields { display: grid; gap: 1.35rem; }
.tf-matter-create .field { margin: 0; min-width: 0; }
.tf-matter-create label { display: block; margin-bottom: .45rem; font-weight: 600; }
.tf-matter-create input:not([type=hidden]), .tf-matter-create textarea { width: 100%; box-sizing: border-box; font-size: 1rem; line-height: 1.55; padding: .8rem .9rem; }
.tf-matter-create textarea { min-height: 7rem; resize: vertical; }
.tf-matter-create #nm-notes { min-height: 8.5rem; }
.tf-matter-create .opt, .tf-matter-section-head .opt { font-size: .875rem; font-weight: 400; color: var(--muted); }
.tf-matter-help { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: .65rem 0; max-width: 65ch; }
.tf-matter-secondary summary { cursor: pointer; padding: .5rem 0; min-height: 44px; }
.tf-matter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: .8rem 0; }
.tf-matter-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.tf-matter-section-head h2 { font-size: 1.4rem; line-height: 1.35; margin: 0; }
.tf-matter-section-head > a:not(.btn) { font-size: .93rem; }
.tf-matter-files { margin: 2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.65rem; min-width: 0; }
.tf-matter-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.35rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--surface-2); }
.tf-matter-drop > div { flex: 1 1 12rem; min-width: 0; }
.tf-matter-drop p { color: var(--muted); font-size: .93rem; margin: .25rem 0 0; line-height: 1.5; }
.tf-matter-drop-icon { color: var(--accent-ink); }
.tf-matter-files[data-over] .tf-matter-drop { outline: var(--ring-w) solid var(--focus); background: var(--accent-soft); }
.tf-matter-files .tf-drop-files { max-height: 28rem; overflow-y: auto; overflow-wrap: anywhere; }
.tf-matter-files .tf-drop-files > li { padding: .85rem 1rem; }
.tf-matter-file-status { color: var(--muted); font-size: .9rem; }
.tf-matter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.tf-matter-actions[hidden] { display: none; }
.tf-matter-create :is(input,textarea,button,summary,a):focus-visible, .tf-new-matter-link:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: 3px; }
@media (max-width: 600px) {
  .tf-matter-pair { grid-template-columns: 1fr; }
  .tf-matter-intro { margin-top: .5rem; }
  .tf-matter-drop { padding: 1rem; gap: .75rem; }
  .tf-matter-drop .btn { width: 100%; justify-content: center; }
  .tf-matter-section-head { align-items: flex-start; }
  .tf-matter-create { padding: 1rem; }
}
.tf-matter-files .tf-drop-btn { min-height: 44px; padding: .45rem .75rem; }
.tf-mpage #matter-saved .btn-primary { color: var(--accent-fg); }
/* End matter workspace 775. */

/* Row 24: click-to-fill lives in the document column, never a narrow side editor. */
.tf-fill-area, .tf-fill-notes { max-width: calc(var(--measure) + 4.25rem); }
.tf-fill-help, .tf-fill-status { font: .94rem/1.6 var(--font-serif); color: var(--muted); margin: .65rem 0; }
.tf-fill-status:empty { display: none; }
.tf-fill-status { color: var(--fg-strong); }
.tf-fill-field { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; border: 0; border-bottom: 2px solid #8d6512; border-radius: .2rem; padding: .13em .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
button.tf-fill-field { cursor: pointer; }
.tf-fill-open { background: #fff0aa; color: #4e3700; }
.tf-fill-guessed { background: #ddecff; color: #153c68; }
.tf-fill-guessed { border-bottom: 2px dotted #275d92; }
.tf-fill-picker { width: 100%; box-sizing: border-box; margin: 1.25rem 0; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid var(--accent); border-radius: var(--radius-card); background: var(--surface-2); color: var(--fg); font-family: var(--font-serif); scroll-margin: 1rem; }
.tf-fill-picker h3 { font: 600 1.15rem/1.4 var(--font-serif); color: var(--fg-strong); margin: 0 0 .5rem; }
.tf-doc .tf-fill-picker p { font: .94rem/1.6 var(--font-serif); margin: .6rem 0; }
.tf-fill-picker label { display: block; font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem; }
.tf-fill-picker textarea, .tf-fill-picker input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .75rem; font: 1rem/1.5 var(--font-serif); background: var(--surface); color: var(--fg-strong); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.tf-fill-picker textarea { resize: vertical; }
.tf-fill-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem; margin-top: 1rem; }
.tf-fill-choice { display: block; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; height: auto; padding: .8rem; }
.tf-fill-choice small { display: block; font-weight: 400; color: var(--muted); margin-top: .25rem; }
.tf-fill-picker .tf-controls { margin: 1rem 0 0; gap: .65rem; }
.tf-fill-area .btn, .tf-fill-picker .btn, .tf-fill-notes .btn { min-height: 44px; white-space: normal; }
.tf-fill-notes { margin: 1.25rem 0; }
.tf-fill-notes:empty { display: none; }
.tf-fill-notes h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.tf-fill-note { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem 0; line-height: 1.6; overflow-wrap: anywhere; }
.tf-fill-note input { width: 1.3rem; height: 1.3rem; flex-shrink: 0; margin-top: .2rem; accent-color: var(--accent); }
.tf-fill-edit summary { cursor: pointer; padding: .75rem 0; }
.tf-fill-field:focus-visible, .tf-fill-picker :focus-visible, .tf-fill-area :focus-visible, .tf-fill-notes :focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: 3px; }
#run-actions a[aria-disabled=true] { opacity: .65; }
@media (max-width: 600px) {
  .tf-fill-picker { padding: 1rem; }
  .tf-fill-picker .tf-controls .btn { flex: 1 1 9rem; }
  .tf-fill-help { line-height: 1.9; }
}

.tf-fill-area [hidden] { display: none; }

/* Row 27 ([2026-10-09n]): a filled blank stays a box (solid blue: a full outline and a solid underline, where a guess is dotted). */
.tf-fill-done { background: #e3eefc; color: #153c68; border: 1px solid #9dbbe2; border-bottom: 2px solid #275d92; }
/* The editor closed on a save: the box just answered is ringed for two seconds (fill-ins.js landOn). */
.tf-fill-field.tf-fill-saved { box-shadow: 0 0 0 3px #7aa6d6; }

/* The blanks panel (Tre, 2026-10-09: "more professional"): one calm card — the count with Previous and Next, a colour key whose entries never
   break, then a ruled row of actions (Fill all on the left; Undo, Redo and a quieter Reset on the right). Site tokens throughout, so it sits
   in light and dark alike. */
.tf-fill-panel { margin: 0 0 .5rem; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface-2); }
.tf-fill-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 1.25rem .6rem; }
.tf-fill-count { font: 700 1.05rem/1.4 var(--font-serif); color: var(--fg-strong); }
.tf-fill-nav { display: flex; gap: .5rem; }
.tf-fill-key { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; padding: 0 1.25rem 1rem; list-style: none; font: .9rem/1.5 var(--font-serif); color: var(--muted); }
.tf-fill-key li { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; margin: 0; }
.tf-fill-swatch { flex: none; box-sizing: border-box; width: 1.5em; height: 1em; border-radius: 3px; }
.tf-fill-swatch-open { background: #fff0aa; border-bottom: 2px solid #8d6512; }
.tf-fill-swatch-guessed { background: #ddecff; border-bottom: 2px dotted #275d92; }
.tf-fill-swatch-done { background: #e3eefc; border: 1px solid #9dbbe2; border-bottom: 2px solid #275d92; }
.tf-fill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid var(--rule); }
.tf-fill-history { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.tf-fill-panel .btn { min-height: 40px; padding: .55em 1.1em; }
.tf-fill-history .btn[aria-disabled="true"], .tf-fill-history .btn[aria-disabled="true"]:hover { opacity: .5; cursor: default; background: var(--surface); border-color: var(--field-line); color: var(--fg-strong); }
.tf-fill-history .tf-fill-quiet { padding-inline: .6em; background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.tf-fill-history .tf-fill-quiet:hover { background: transparent; border-color: transparent; color: var(--accent-ink); }
.tf-fill-history .tf-fill-quiet[aria-disabled="true"], .tf-fill-history .tf-fill-quiet[aria-disabled="true"]:hover { background: transparent; border-color: transparent; color: var(--muted); }
.tf-fill-why { flex-basis: 100%; margin: 0; font: .9rem/1.5 var(--font-serif); color: var(--muted); text-align: right; }
.tf-fill-aside { margin: 0; padding: .85rem 1.25rem; border-top: 1px solid var(--rule); font: .92rem/1.55 var(--font-serif); color: var(--muted); }
.tf-fill-confirm { margin: 0 1.25rem 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--surface); }
.tf-fill-confirm p { font: 1rem/1.6 var(--font-serif); color: var(--fg-strong); margin: 0 0 .8rem; }
.tf-fill-confirm .tf-controls { margin: 0; gap: .6rem; }
.tf-fill-area > .tf-fill-status { margin: .25rem 0 .75rem; font-size: .92rem; }
@media (max-width: 600px) {
  .tf-fill-strip, .tf-fill-actions, .tf-fill-aside { padding-inline: 1rem; }
  .tf-fill-key { padding-inline: 1rem; }
  .tf-fill-panel .btn { min-height: 44px; }
  .tf-fill-nav { flex-basis: 100%; }
  .tf-fill-nav .btn, .tf-fill-history .btn { flex: 1 1 0; }
  .tf-fill-all { flex: 1 1 100%; }
  .tf-fill-history { flex-basis: 100%; margin-left: 0; }
  .tf-fill-history .tf-fill-quiet { flex-basis: 100%; }
  .tf-fill-why { text-align: left; }
  .tf-fill-confirm { margin-inline: 1rem; }
  .tf-fill-confirm .tf-controls .btn { flex: 1 1 9rem; }
}

/* Row 42: the task editor remains full screen as a native modal; only focus behavior changes. */
dialog.tf-ts-full { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; }
.tf-matter-background { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 1rem; }
.tf-matter-background h2 { font-size: 1rem; margin: 0 0 .75rem; }
.tf-matter-background h3 { font-size: .94rem; margin: .75rem 0 .25rem; }
.tf-matter-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-task-expectation { margin: .75rem 0; font-size: .875rem; color: var(--muted); }
@media (max-width: 46rem) {
  .tf-rails-fold > summary { min-height: 44px; display: flex; align-items: center; }
  .tf-models .tf-mc-field input, .tf-models .tf-mc-field select,
  .tf-models .tf-seat-editor select, .tf-models .tf-seat-editor input:not([type="checkbox"]) { min-height: 44px; min-width: 44px; }
  .tf-models .tf-mc-roles label { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .tf-tabs .tf-tab { min-height: 44px; min-width: 44px; }
  #ts-editor .tf-ts-x { min-width: 44px; min-height: 44px; }
  #ts-editor .tf-ts-seatctl select { min-height: 44px; }
  #ts-editor .tf-ts-seatctl { min-width: 0; }
}

/* Row 117 ([2026-10-12ai]; Tre: "notify them with red text … that this pdf is password protected"): a file we could not read is shown in
   red on every page that lists files. No site.css tone defines a red, and its tone blocks are the shared copy (the public site's), so the
   red lives here, one value per tone, computed like TU8: --alert is the badge fill (white on it 6.57:1, the same in every tone); --alert-ink
   is red text on the tone's bg, bg-alt, surface and surface-2 — dark 5.54:1, light 5.52, paper 4.64, dim 4.65, dusk 4.61 (dusk's mid-grey
   cannot carry a saturated red at 4.5:1, so there the badge carries the red). */
:root { --alert: #B42318; --alert-fg: #FFFFFF; --alert-ink: #F47B71; }
html[data-tone="light"] { --alert-ink: #B42318; }
html[data-tone="paper"] { --alert-ink: #9F170D; }
html[data-tone="dusk"] { --alert-ink: #FBEBEA; }
html[data-tone="dim"] { --alert-ink: #F8A9A3; }
.tf-drop-files li[data-state="problem"] .tf-drop-state,
.tf-ask-shelf .tf-drop-files li[data-state="problem"] .tf-drop-state { padding: 1px 8px; border-radius: 4px; background: var(--alert); color: var(--alert-fg); font-weight: 700; }
.tf-drop-files li .tf-drop-problem,
.tf-ask-shelf .tf-drop-files li .tf-drop-problem { padding-left: 10px; border-left: 3px solid var(--alert-ink); color: var(--alert-ink); font-weight: 600; }
.tf-lib-list .tf-by.tf-file-problem, .tf-by.tf-file-problem { padding-left: 10px; border-left: 3px solid var(--alert-ink); color: var(--alert-ink); font-weight: 600; }

/* LT-1 ([2026-10-15-long-task-1-1084]): the progress timeline (ui/Timeline.php; js/run.js, Pages and js/runs.js draw it) — one equal segment per step,
   never a percentage, never red: a done step is solid, the step it is in is outlined with a mark inside, a step to come is empty, a stopped step
   is hatched; the words beside it say each state too. Tokens only, so every tone (light, paper, dusk, dim, dark) carries it. */
.tf-tl-block { margin: .5rem 0 .7rem; max-width: var(--measure); }
.tf-tl-line { margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: var(--fg-strong); }
.tf-tl-h { margin: .2rem 0 .35rem; font-size: .92rem; font-weight: 700; color: var(--fg); }
.tf-tl { display: flex; gap: 3px; height: .7rem; margin: .2rem 0; }
.tf-tl-seg { flex: 1 1 0; min-width: 3px; box-sizing: border-box; border: 1px solid var(--field-line); border-radius: 3px; background: transparent; }
.tf-tl-done { background: var(--accent); border-color: var(--accent); }
.tf-tl-now { border: 2px solid var(--accent-ink); background: linear-gradient(var(--accent-ink), var(--accent-ink)) center / 40% 2px no-repeat; }
.tf-tl-stopped { background: repeating-linear-gradient(135deg, var(--field-line) 0 2px, transparent 2px 5px); }
.tf-tl-compact { max-width: 14rem; height: .45rem; margin: .35rem 0 0; }
.tf-tl-list { list-style: none; margin: .45rem 0 0; padding: 0; font-size: .9rem; color: var(--muted); }
.tf-tl-li { margin: .12rem 0; overflow-wrap: anywhere; }
.tf-tl-li-done { color: var(--fg); }
.tf-tl-li-now { color: var(--fg-strong); font-weight: 700; }
.tf-tl-fold > .tf-tl { padding: 0; margin: .3rem 1rem .2rem; }
.tf-tl-fold > .tf-tl-list { padding: 0 1rem 1rem; }
@media (forced-colors: active) { .tf-tl-seg { border-color: CanvasText; } .tf-tl-done { background: CanvasText; } .tf-tl-now { border-color: Highlight; background: none; } }
/* LT-2 ([2026-10-18-long-task-2-1160]): a long task's hourly question (jobs/LongTask.php's words; js/run.js, Pages and js/runs.js draw it) — calm, on the theme's
   tokens in every tone, never the alert colours: the question, its two answers, and one line after an answer. */
.tf-lt { margin: .6rem 0 .7rem; padding: .7rem .9rem; max-width: var(--measure); background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; color: var(--fg); font-size: .92rem; line-height: 1.5; }
.tf-lt p { margin: 0 0 .4rem; }
.tf-lt-title { color: var(--fg-strong); }
.tf-lt-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tf-lt-acts .btn { min-height: 44px; }
.tf-lt .tf-btn-quiet { background: transparent; color: var(--fg-strong); border: 1px solid var(--field-line); }
.tf-lt .btn[disabled] { opacity: .55; cursor: default; }
.tf-lt-note { margin: .3rem 0 0; font-weight: 700; color: var(--accent-ink); }
.tf-lt-note:empty { display: none; }
.tf-tasks-table .tf-lt { margin: .5rem 0 0; font-size: .86rem; }