/* =====================================================================================
   Elixir Thread: design system v2 (thread-v2.css), 15 October 2026
   -------------------------------------------------------------------------------------
   Thesis. Thread reads like a fine annual report that has come alive: ivory paper, the
   firm's deep grey, hairline rules and EB Garamond figures given room. One rich surface per
   page (the deep grey Next step band) tells you what to do next. Green, amber and red keep
   strict traffic-light meaning. Colour beyond status comes from one governed accent family
   of four Ghanaian hues (Volta lagoon, indigo dye, evening plum, harmattan slate) that only
   ever names who and where, and switches off with data-accents="off".

   Rules this file enforces
   - Everything is scoped under the .t2 root. No rule touches html or body.
   - Tokens re-use the names in tokens.css where the role is the same (--ground, --text,
     --text-secondary, --border, --action, --good ...), so legacy components placed inside a
     .t2 root pick up the v2 palette. Component classes are prefixed t2- so they never meet
     the legacy .card, .chip, .btn or .panel rules.
   - Light tokens on .t2. Dark tokens on .t2[data-theme="dark"], on any .t2 under
     html[data-theme="dark"], and under prefers-color-scheme: dark unless something says light.
   - Accents: components read only --acc-* roles (through data-acc and data-fam). Accents are
     never used on status chips, the journey line, buttons, links, progress fills or body text.
   - One solid button per screen. Status is always colour + icon + word. Options to tick are
     real checkboxes and radios. No black anywhere. No italic (only roman is loaded).
   - The @font-face for "EB Garamond Thread" lives in tokens.css (the app) or the standalone
     page's own <style>; this file only names the family.

   Sections
    1-4  tokens (light, dark, accents off, the deep grey dark ground option)
    5    base type            16  materiality ruler          24  form controls
    6    icons                17  risk grid, strands, mix    25  section tabs
    7    page and layout      18  area map                   26  paper document
    8    top bar, name menu   19  rows: mini journey, files, 27  tablet
    9    file header row          queue, brief lines         28  phone
   10    journey line         20  tables                     29  motion and print
   11    page head            21  side panel
   12    next step band       22  gate summary, checks
   13    buttons, actions     23  fold
   14    status, tags, shapes, avatars, sign-off, empty state
   15    KPI figures

   Token table (generated from final/_build/tokens.py; ratios computed, WCAG 2.x)
   token               light      dark       use
   --ground            #F6F4EE    #1E2120    Page ground: ivory in light; the #1E201F family in dark, never black
   --surface           #FFFEFB    #282B2A    Raised paper: side panel, menus, paper documents only
   --surface-sunk      #EEEBE4    #2B2F2D    Tags, search field, ruler track, row hover
   --border            #DEDAD1    #383C3A    Hairlines between rows and under section heads (decorative)
   --border-strong     #85837D    #7D817D    Control borders, open gate rings, ruler ticks, locked journey rings (3:1 UI)
   --track             #ECE9E2    #3A3E3C    Meter and journey track (the part not yet travelled)
   --text              #4A4A4A    #F2F2EE    Headings and body: the brand's deep grey
   --text-secondary    #66665F    #B7B9B3    Meta, labels, why lines, captions
   --action            #0B7A34    #6FD58C    Deep green: links, the one solid button, focus
   --action-hover      #096A2D    #8BDEA2    Hover for links and the solid button
   --on-action         #FFFFFF    #1B3A24    Text on the solid button
   --focus             #0B7A34    #6FD58C    Focus ring
   --fill              #0F9A45    #4FC476    The one fill green: journey segments and dots, meters, the ruler's good fill
   --on-fill           #FFFFFF    #1B3A24    Tick inside a met journey dot or gate ring
   --good              #0B7A34    #6FD58C    Status good text and icon
   --good-bg           #E4F1E7    #1F3A28    Status good chip ground
   --caution           #975700    #F0BE62    Status caution text and icon; ruler caution fill
   --caution-bg        #FAEEDB    #3A3121    Status caution chip ground; risk grid moderate zone
   --problem           #B3261E    #FF9F97    Status problem text and icon; ruler problem fill
   --problem-bg        #FAE6E3    #43292A    Status problem chip ground; risk grid upper zone
   --neutral           #66665F    #B7B9B3    Status neutral text and icon
   --neutral-bg        #ECE9E2    #2E3230    Status neutral chip ground
   --band              #464A48    #363B39    Next step band, top of its gradient (the brief's deep grey panel)
   --band-2            #3F4341    #2E3331    Next step band, bottom of its gradient
   --band-rim          none       #6A706D    Band edge: none in light, a 3:1 rim in dark
   --on-band           #F2F2EE    #F2F2EE    Band sentence and figures
   --on-band-2         #CACAC4    #CACAC4    Band why line and labels
   --band-green        #5FD07F    #5FD07F    Band eyebrow, met gate ticks, the band's solid button
   --on-band-green     #1B3A24    #1B3A24    Text on the band's solid button
   --band-line         rgba       rgba       Dividers inside the band
   --band-tick-off     #9A9F9C    #9A9F9C    Outline of an unmet gate tick (3:1 against the band)
   --band-problem      #FFB8AE    #FFB8AE    Problem chip text inside the band
   --band-problem-bg   #5A4744    #4E3735    Problem chip ground inside the band
   --band-good         #8FE3A8    #8FE3A8    Good chip text inside the band
   --band-good-bg      #3B5143    #30473A    Good chip ground inside the band
   --band-neutral      #DCDCD6    #DCDCD6    Neutral chip text inside the band
   --band-neutral-bg   #555957    #4A4F4D    Neutral chip ground inside the band
   --hue-lagoon        #246C8C    #8CC8DC    Volta lagoon ink (blue-teal, hue 198): assets family
   --hue-lagoon-wash   #DAEAF0    #1C3138    Volta lagoon wash
   --hue-lagoon-mid    #4A8CA7    #4F98B0    Volta lagoon mid: rules, shapes, threads, data viz
   --hue-indigo        #434F98    #AEB5EE    Indigo dye ink (hue 232): liabilities family
   --hue-indigo-wash   #E1E3F3    #242A42    Indigo dye wash
   --hue-indigo-mid    #6F7BC0    #6E79C4    Indigo dye mid
   --hue-plum          #6E4880    #D0AEDD    Evening plum ink (violet, hue 281): income and expenses family
   --hue-plum-wash     #ECE0EF    #2D2640    Evening plum wash
   --hue-plum-mid      #9A77AC    #9877AA    Evening plum mid
   --hue-slate         #55626F    #B4BFCA    Harmattan slate ink (hue 210, low chroma): equity family
   --hue-slate-wash    #DFE4E8    #262E36    Harmattan slate wash
   --hue-slate-mid     #7A8794    #7D8B98    Harmattan slate mid
   --on-accent         #FFFFFF    #1E2120    Initials on a filled accent avatar
   --selvedge-opacity  0.95       0.8        Strength of the band's woven selvedge

   Key contrast ratios (WCAG 2.x; text needs 4.5, large text and UI marks 3.0)
   pair                            light   dark
   text                            8.06    14.46
   text on panel                   8.79    12.74
   secondary                       5.26    8.20
   secondary on panel              5.73    7.22
   secondary on sunk               4.86    6.85
   link                            4.96    8.95
   solid button text               5.46    6.90
   fill (UI)                       3.33    7.34
   fill vs track (UI)              3.02    4.91
   tick on fill (UI)               3.67    5.66
   control border (UI)             3.45    4.10
   good chip                       4.69    6.83
   caution chip                    4.98    7.46
   problem chip                    5.44    6.71
   neutral chip                    4.77    6.57
   caution fill (UI)               5.19    9.47
   problem fill (UI)               5.94    8.24
   band sentence                   8.02    10.16
   band sentence, low end          8.95    11.45
   band why                        6.10    7.81
   band eyebrow                    4.63    5.87
   band button text                6.45    6.45
   band button vs band (UI)        5.17    6.62
   unmet gate tick (UI)            3.74    4.78
   band problem chip               5.26    6.62
   band good chip                  5.61    6.57
   band neutral chip               5.17    6.06
   band rim vs ground (UI)         n/a     3.21
   lagoon ink                      5.31    8.82
   lagoon initials                 5.84    8.82
   lagoon ink on wash              4.73    7.38
   lagoon mid (UI)                 3.41    4.99
   indigo ink                      6.79    8.23
   indigo initials                 7.47    8.23
   indigo ink on wash              5.87    7.17
   indigo mid (UI)                 3.62    4.02
   plum ink                        6.58    8.33
   plum initials                   7.24    8.33
   plum ink on wash                5.68    7.37
   plum mid (UI)                   3.40    4.29
   slate ink                       5.68    8.69
   slate initials                  6.24    8.69
   slate ink on wash               4.88    7.37
   slate mid (UI)                  3.34    4.65
   ===================================================================================== */

/* 1. Light tokens. Declared on every .t2 root, so a nested .t2 starts clean. */
.t2 {
  color-scheme: light;
  --ground: #F6F4EE;
  --surface: #FFFEFB;
  --surface-sunk: #EEEBE4;
  --border: #DEDAD1;
  --border-strong: #85837D;
  --track: #ECE9E2;
  --text: #4A4A4A;
  --text-secondary: #66665F;
  --action: #0B7A34;
  --action-hover: #096A2D;
  --on-action: #FFFFFF;
  --focus: #0B7A34;
  --fill: #0F9A45;
  --on-fill: #FFFFFF;
  --good: #0B7A34;
  --good-bg: #E4F1E7;
  --caution: #975700;
  --caution-bg: #FAEEDB;
  --problem: #B3261E;
  --problem-bg: #FAE6E3;
  --neutral: #66665F;
  --neutral-bg: #ECE9E2;
  --band: #464A48;
  --band-2: #3F4341;
  --band-rim: transparent;
  --on-band: #F2F2EE;
  --on-band-2: #CACAC4;
  --band-green: #5FD07F;
  --on-band-green: #1B3A24;
  --band-line: rgba(242, 242, 238, 0.16);
  --band-tick-off: #9A9F9C;
  --band-problem: #FFB8AE;
  --band-problem-bg: #5A4744;
  --band-good: #8FE3A8;
  --band-good-bg: #3B5143;
  --band-neutral: #DCDCD6;
  --band-neutral-bg: #555957;
  --hue-lagoon: #246C8C;
  --hue-lagoon-wash: #DAEAF0;
  --hue-lagoon-mid: #4A8CA7;
  --hue-indigo: #434F98;
  --hue-indigo-wash: #E1E3F3;
  --hue-indigo-mid: #6F7BC0;
  --hue-plum: #6E4880;
  --hue-plum-wash: #ECE0EF;
  --hue-plum-mid: #9A77AC;
  --hue-slate: #55626F;
  --hue-slate-wash: #DFE4E8;
  --hue-slate-mid: #7A8794;
  --on-accent: #FFFFFF;
  --selvedge-opacity: 0.95;
  --shadow-panel: 0 1px 2px rgba(74, 74, 74, 0.05), 0 14px 34px -14px rgba(74, 74, 74, 0.2);
  --shadow-band: 0 2px 4px rgba(46, 50, 48, 0.1), 0 26px 50px -26px rgba(46, 50, 48, 0.55);
  --shadow-paper: 0 2px 4px rgba(74, 74, 74, 0.06), 0 24px 48px -24px rgba(74, 74, 74, 0.28);

  /* Accent roles: the only accent names components read */
  --acc-lagoon: var(--hue-lagoon);
  --acc-lagoon-wash: var(--hue-lagoon-wash);
  --acc-lagoon-mid: var(--hue-lagoon-mid);
  --acc-indigo: var(--hue-indigo);
  --acc-indigo-wash: var(--hue-indigo-wash);
  --acc-indigo-mid: var(--hue-indigo-mid);
  --acc-plum: var(--hue-plum);
  --acc-plum-wash: var(--hue-plum-wash);
  --acc-plum-mid: var(--hue-plum-mid);
  --acc-slate: var(--hue-slate);
  --acc-slate-wash: var(--hue-slate-wash);
  --acc-slate-mid: var(--hue-slate-mid);
  --thread-1: var(--acc-lagoon-mid);
  --thread-2: var(--acc-indigo-mid);
  --thread-3: var(--acc-plum-mid);
  --thread-4: var(--acc-slate-mid);

  /* Type, space, shape, width, motion (theme independent) */
  --font: "EB Garamond Thread", "EB Garamond", Garamond, Georgia, serif;
  --fs-display: 3rem;
  --fs-band: 1.875rem;
  --fs-h2: 1.625rem;
  --fs-h3: 1.25rem;
  --fs-figure: 2.5rem;
  --fs-body: 1.125rem;
  --fs-ui: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-chip: 0.875rem;
  --fs-meta: 0.8125rem;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --r-tag: 4px;
  --r-ctl: 8px;
  --r-panel: 12px;
  --r-band: 14px;
  --r-pill: 999px;
  --page: 74rem;
  --page-wide: 90rem;
  --page-narrow: 46rem;
  --panel-w: 20rem;
  --measure: 68ch;
  --gutter: 2.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

/* 2. Dark tokens: an explicit data-theme="dark" on the root or on <html>, or the device setting
   when nothing says light. Only values that differ from light are repeated. */
.t2[data-theme="dark"],
html[data-theme="dark"] .t2:not([data-theme="light"]) {
  color-scheme: dark;
  --ground: #1E2120;
  --surface: #282B2A;
  --surface-sunk: #2B2F2D;
  --border: #383C3A;
  --border-strong: #7D817D;
  --track: #3A3E3C;
  --text: #F2F2EE;
  --text-secondary: #B7B9B3;
  --action: #6FD58C;
  --action-hover: #8BDEA2;
  --on-action: #1B3A24;
  --focus: #6FD58C;
  --fill: #4FC476;
  --on-fill: #1B3A24;
  --good: #6FD58C;
  --good-bg: #1F3A28;
  --caution: #F0BE62;
  --caution-bg: #3A3121;
  --problem: #FF9F97;
  --problem-bg: #43292A;
  --neutral: #B7B9B3;
  --neutral-bg: #2E3230;
  --band: #363B39;
  --band-2: #2E3331;
  --band-rim: #6A706D;
  --band-line: rgba(242, 242, 238, 0.13);
  --band-problem-bg: #4E3735;
  --band-good-bg: #30473A;
  --band-neutral-bg: #4A4F4D;
  --hue-lagoon: #8CC8DC;
  --hue-lagoon-wash: #1C3138;
  --hue-lagoon-mid: #4F98B0;
  --hue-indigo: #AEB5EE;
  --hue-indigo-wash: #242A42;
  --hue-indigo-mid: #6E79C4;
  --hue-plum: #D0AEDD;
  --hue-plum-wash: #2D2640;
  --hue-plum-mid: #9877AA;
  --hue-slate: #B4BFCA;
  --hue-slate-wash: #262E36;
  --hue-slate-mid: #7D8B98;
  --on-accent: #1E2120;
  --selvedge-opacity: 0.8;
  --shadow-panel: 0 1px 2px rgba(8, 10, 9, 0.4), 0 18px 40px -16px rgba(8, 10, 9, 0.7);
  --shadow-band: inset 0 1px 0 rgba(242, 242, 238, 0.07), 0 26px 50px -26px rgba(8, 10, 9, 0.85);
  --shadow-paper: 0 2px 4px rgba(8, 10, 9, 0.35), 0 24px 48px -24px rgba(8, 10, 9, 0.8);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .t2:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #1E2120;
    --surface: #282B2A;
    --surface-sunk: #2B2F2D;
    --border: #383C3A;
    --border-strong: #7D817D;
    --track: #3A3E3C;
    --text: #F2F2EE;
    --text-secondary: #B7B9B3;
    --action: #6FD58C;
    --action-hover: #8BDEA2;
    --on-action: #1B3A24;
    --focus: #6FD58C;
    --fill: #4FC476;
    --on-fill: #1B3A24;
    --good: #6FD58C;
    --good-bg: #1F3A28;
    --caution: #F0BE62;
    --caution-bg: #3A3121;
    --problem: #FF9F97;
    --problem-bg: #43292A;
    --neutral: #B7B9B3;
    --neutral-bg: #2E3230;
    --band: #363B39;
    --band-2: #2E3331;
    --band-rim: #6A706D;
    --band-line: rgba(242, 242, 238, 0.13);
    --band-problem-bg: #4E3735;
    --band-good-bg: #30473A;
    --band-neutral-bg: #4A4F4D;
    --hue-lagoon: #8CC8DC;
    --hue-lagoon-wash: #1C3138;
    --hue-lagoon-mid: #4F98B0;
    --hue-indigo: #AEB5EE;
    --hue-indigo-wash: #242A42;
    --hue-indigo-mid: #6E79C4;
    --hue-plum: #D0AEDD;
    --hue-plum-wash: #2D2640;
    --hue-plum-mid: #9877AA;
    --hue-slate: #B4BFCA;
    --hue-slate-wash: #262E36;
    --hue-slate-mid: #7D8B98;
    --on-accent: #1E2120;
    --selvedge-opacity: 0.8;
    --shadow-panel: 0 1px 2px rgba(8, 10, 9, 0.4), 0 18px 40px -16px rgba(8, 10, 9, 0.7);
    --shadow-band: inset 0 1px 0 rgba(242, 242, 238, 0.07), 0 26px 50px -26px rgba(8, 10, 9, 0.85);
    --shadow-paper: 0 2px 4px rgba(8, 10, 9, 0.35), 0 24px 48px -24px rgba(8, 10, 9, 0.8);
  }
}

/* 3. Accents off (Route A, no change to s16): every accent role maps to a neutral.
   Components read only --acc-* roles, so the same markup renders the no-rule-change version. */
.t2[data-accents="off"] {
  --acc-lagoon: var(--text-secondary);
  --acc-lagoon-wash: var(--surface-sunk);
  --acc-lagoon-mid: var(--border-strong);
  --acc-indigo: var(--text-secondary);
  --acc-indigo-wash: var(--surface-sunk);
  --acc-indigo-mid: var(--border-strong);
  --acc-plum: var(--text-secondary);
  --acc-plum-wash: var(--surface-sunk);
  --acc-plum-mid: var(--border-strong);
  --acc-slate: var(--text-secondary);
  --acc-slate-wash: var(--surface-sunk);
  --acc-slate-mid: var(--border-strong);
  --thread-1: var(--on-band-2);
  --thread-2: var(--on-band-2);
  --thread-3: var(--on-band-2);
  --thread-4: var(--on-band-2);
  --selvedge-opacity: 0.32;
}

/* 4. Decision for Senyo: the brief-aligned deep grey dark ground (conflict 4 in the review).
   Set data-ground="deep-grey" on the root to preview it; it only acts in the dark theme. */
.t2[data-theme="dark"][data-ground="deep-grey"],
html[data-theme="dark"] .t2[data-ground="deep-grey"]:not([data-theme="light"]) {
  --ground: #3E3E3D;
  --surface: #4A4A4A;
  --surface-sunk: #444443;
  --border: #5A5A59;
  --border-strong: #8C8C89;
  --track: #555554;
  --text-secondary: #C4C4C4;
  --neutral: #C4C4C4;
  --band: #4A4A4A;
  --band-2: #454545;
  --band-rim: #8C8C89;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .t2[data-ground="deep-grey"]:not([data-theme="light"]) {
    --ground: #3E3E3D;
    --surface: #4A4A4A;
    --surface-sunk: #444443;
    --border: #5A5A59;
    --border-strong: #8C8C89;
    --track: #555554;
    --text-secondary: #C4C4C4;
    --neutral: #C4C4C4;
    --band: #4A4A4A;
    --band-2: #454545;
    --band-rim: #8C8C89;
  }
}

/* ==================================================================== 5. BASE */
.t2 {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.t2 *, .t2 *::before, .t2 *::after { box-sizing: border-box; }
.t2 :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
.t2 :where(ul, ol) { padding: 0; list-style: none; }
.t2 :where(img, svg) { display: block; }
.t2 :where(button, input, select, textarea) { font: inherit; color: inherit; }
.t2 a { color: var(--action); text-decoration: none; }
.t2 a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.t2 :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.t2 h1, .t2 .t2-h1 { font-size: var(--fs-display); font-weight: 480; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.t2 h2, .t2 .t2-h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; }
.t2 h3, .t2 .t2-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.t2 p { text-wrap: pretty; }
.t2 .t2-prose a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.t2 .t2-prose p { max-width: var(--measure); }
.t2 .t2-num, .t2 .num { font-variant-numeric: lining-nums tabular-nums; }
.t2 .t2-muted { color: var(--text-secondary); }
.t2 .t2-label { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ==================================================================== 6. ICONS
   One sprite (icons.html). The symbol carries fill none, currentColor and round caps;
   the stroke width lives here so chips and ticks can draw heavier. */
.t2 .t2-ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; stroke-width: 1.5; overflow: visible; }
.t2 .t2-ico--16 { width: 16px; height: 16px; }
.t2 .t2-ico--14 { width: 14px; height: 14px; }

/* ==================================================================== 7. PAGE AND LAYOUT */
.t2.t2--wide { --page: var(--page-wide); }       /* workpapers: put t2--wide on the root */
.t2.t2--narrow { --page: var(--page-narrow); }   /* client portal, login */
.t2 .t2-page { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--s8); }
.t2 .t2-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); gap: 3.5rem; align-items: start; margin-top: var(--s7); }
.t2 .t2-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); min-width: 0; align-content: start; }
.t2 .t2-full { margin-top: var(--s7); }          /* a full-width section after the two columns */

/* Section on the ground: heading, hairline, no box */
.t2 .t2-sec__head { display: flex; align-items: center; gap: 0.875rem; padding-bottom: 0.875rem; margin-bottom: var(--s5); border-bottom: 1px solid var(--border); }
.t2 .t2-sec__meta { margin-left: auto; color: var(--text-secondary); font-size: var(--fs-small); text-align: right; }
.t2 .t2-sec__foot { margin-top: var(--s4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; color: var(--text-secondary); font-size: var(--fs-small); }

/* Accent selection. data-acc names a hue; data-fam names an FS family (hue plus shape).
   Everything below reads --id-ink, --id-wash and --id-mid, never a raw hue. */
.t2 :is([data-acc="lagoon"], [data-fam="assets"])      { --id-ink: var(--acc-lagoon); --id-wash: var(--acc-lagoon-wash); --id-mid: var(--acc-lagoon-mid); }
.t2 :is([data-acc="indigo"], [data-fam="liabilities"]) { --id-ink: var(--acc-indigo); --id-wash: var(--acc-indigo-wash); --id-mid: var(--acc-indigo-mid); }
.t2 :is([data-acc="plum"], [data-fam="income"])        { --id-ink: var(--acc-plum);   --id-wash: var(--acc-plum-wash);   --id-mid: var(--acc-plum-mid); }
.t2 :is([data-acc="slate"], [data-fam="equity"])       { --id-ink: var(--acc-slate);  --id-wash: var(--acc-slate-wash);  --id-mid: var(--acc-slate-mid); }
.t2 [data-fam="file"]                                  { --id-ink: var(--text-secondary); --id-wash: var(--surface-sunk); --id-mid: var(--border-strong); }

/* Section medallion: the section's identity icon on its accent wash */
.t2 .t2-medal { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--id-wash, var(--surface-sunk)); color: var(--id-ink, var(--text-secondary)); }

/* ==================================================================== 8. APP SHELL: TOP BAR */
.t2 .t2-bar { border-bottom: 1px solid var(--border); }
/* The bar spans the wide measure on every page, so the nav and tools always fit at 1440. */
.t2 .t2-bar__in { max-width: calc(var(--page-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: 4rem; display: flex; align-items: center; gap: 2rem; }
.t2 .t2-brand { display: flex; align-items: center; gap: 0.875rem; flex: none; color: var(--text); }
.t2 .t2-brand:hover { text-decoration: none; }
.t2 .t2-brand img { height: 2.25rem; width: auto; }        /* the master lockup file, scaled only */
.t2 .t2-brand__rule { width: 1px; height: 1.625rem; background: var(--border); }
.t2 .t2-brand__app { font-size: 1.3125rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.01em; }

.t2 .t2-nav { display: flex; align-items: stretch; align-self: stretch; gap: 1.375rem; white-space: nowrap; }
.t2 .t2-nav > a, .t2 .t2-nav > details > summary { display: inline-flex; align-items: center; gap: 0.45rem; height: 100%; color: var(--text-secondary); font-size: var(--fs-ui); position: relative; cursor: pointer; }
.t2 .t2-nav > details { position: relative; display: flex; }
.t2 .t2-nav > details > summary { list-style: none; }
.t2 .t2-nav > details > summary::-webkit-details-marker { display: none; }
.t2 .t2-nav > a:hover, .t2 .t2-nav > details > summary:hover { color: var(--text); text-decoration: none; }
.t2 .t2-nav > a[aria-current="page"] { color: var(--text); font-weight: 600; }
.t2 .t2-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }  /* ink, never green */
.t2 .t2-nav__count { font-size: var(--fs-meta); font-weight: 600; color: var(--text-secondary); background: var(--surface-sunk); border-radius: var(--r-tag); padding: 0 0.375rem; font-variant-numeric: tabular-nums; }
.t2 .t2-bar__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.t2 .t2-search { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; width: 14.5rem; padding: 0 0.75rem; border-radius: var(--r-ctl); background: var(--surface-sunk); color: var(--text-secondary); }
.t2 .t2-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.t2 .t2-search input { border: 0; background: transparent; font-size: 1rem; color: var(--text); width: 100%; min-width: 0; outline: none; }
.t2 .t2-search input::placeholder { color: var(--text-secondary); opacity: 1; }
.t2 .t2-search kbd { font-family: var(--font); font-size: var(--fs-meta); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: 4px; padding: 0 0.375rem; white-space: nowrap; }
.t2 .t2-menu-btn { display: none; }

/* Pop-over surface for the name menu and the Firm menu (a details element, no script) */
.t2 .t2-pop { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30; min-width: 16rem; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-panel); padding: 1.125rem 1.25rem; display: grid; gap: var(--s4); text-align: left; white-space: normal; }
.t2 .t2-pop--left { right: auto; left: 0; }
.t2 .t2-pop__link { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-size: var(--fs-ui); }
.t2 .t2-pop__link .t2-ico { color: var(--text-secondary); }
.t2 .t2-pop hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* Name menu: Display and Colour accents as real radios, then Sign out */
.t2 .t2-me { position: relative; }
.t2 .t2-me > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--fs-ui); color: var(--text); white-space: nowrap; padding: 0.25rem 0.375rem 0.25rem 0.25rem; border-radius: var(--r-pill); }
.t2 .t2-me > summary::-webkit-details-marker { display: none; }
.t2 .t2-me > summary:hover { background: var(--surface-sunk); }
.t2 .t2-me > summary .t2-ico { color: var(--text-secondary); }

/* ==================================================================== 9. FILE HEADER ROW
   Row 1 inside a file. Hubs: client name (links to the overview). Overview: "All engagements",
   because the H1 already names the client. Right: three quiet links. */
.t2 .t2-file { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); padding-top: 0.625rem; }
.t2 .t2-file__id { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; flex-wrap: wrap; }
.t2 .t2-file__client { font-weight: 600; font-size: var(--fs-ui); color: var(--text); }
.t2 .t2-file__sub { color: var(--text-secondary); font-size: var(--fs-small); }
.t2 .t2-file__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); font-size: 1rem; }
.t2 .t2-file__back .t2-ico { width: 16px; height: 16px; }
.t2 .t2-file__links { display: flex; gap: var(--s5); }
.t2 .t2-file__links a, .t2 .t2-file__more > summary { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); font-size: 1rem; }
.t2 .t2-file__links a .t2-ico { width: 18px; height: 18px; }
.t2 :is(.t2-file__client, .t2-file__back, .t2-file__links a):hover { color: var(--text); text-decoration: none; }
.t2 .t2-file__more { display: none; position: relative; }
.t2 .t2-file__more > summary { list-style: none; cursor: pointer; }
.t2 .t2-file__more > summary::-webkit-details-marker { display: none; }

/* ==================================================================== 10. JOURNEY LINE
   Row 2 and the main navigation inside a file. Green means met or progress, nothing else.
   Met: filled dot with a tick. Current: neutral ink ring with a halo and a third line of
   counts. Locked: dashed ring, "Opens after N". The stop after the current one may carry
   --seg (0 to 100%) so the outgoing segment shows progress through the current stage. */
.t2 .t2-journey { margin-top: 0.625rem; }
.t2 .t2-journey ol { display: flex; }
.t2 .t2-stop { flex: 1 1 0; position: relative; min-width: 0; text-align: center; }
.t2 .t2-stop > a, .t2 .t2-stop > span { display: flex; flex-direction: column; align-items: center; color: var(--text-secondary); padding: 0 0.25rem; }
.t2 .t2-stop > a:hover { text-decoration: none; }
.t2 .t2-stop > a:hover .t2-stop__name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.t2 .t2-stop::before { content: ""; position: absolute; top: 10.5px; left: calc(-50% + 17px); right: calc(50% + 17px); height: 3px; border-radius: 2px; background: var(--track); }
.t2 .t2-stop:first-child::before { display: none; }
.t2 .t2-stop.is-met::before, .t2 .t2-stop.is-current::before { background: var(--fill); }
.t2 .t2-stop.is-locked::before { background: linear-gradient(90deg, var(--fill) var(--seg, 0%), var(--track) var(--seg, 0%)); }
.t2 .t2-stop__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; font-size: var(--fs-meta); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; background: var(--ground); color: var(--text-secondary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.t2 .is-locked .t2-stop__dot { box-shadow: none; border: 1.5px dashed var(--border-strong); }
.t2 .is-met .t2-stop__dot { background: var(--fill); color: var(--on-fill); box-shadow: none; }
.t2 .is-met .t2-stop__dot .t2-ico { width: 14px; height: 14px; stroke-width: 2.4; }
.t2 .is-current .t2-stop__dot { width: 30px; height: 30px; margin-top: -3px; background: var(--surface); color: var(--text); font-size: var(--fs-small); box-shadow: inset 0 0 0 2px var(--text), 0 0 0 6px var(--surface-sunk); }
.t2 .t2-stop__name { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.2; color: var(--text); white-space: nowrap; }
.t2 .t2-stop__state { font-size: var(--fs-meta); line-height: 1.3; color: var(--text-secondary); white-space: nowrap; }
.t2 .is-current .t2-stop__name { font-weight: 700; margin-top: 0.3125rem; }
.t2 .is-current .t2-stop__state { color: var(--text); }
.t2 .t2-stop__count { font-size: var(--fs-meta); line-height: 1.3; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t2 .t2-journey__now { display: none; }

/* ==================================================================== 11. PAGE HEAD
   Fixed order: optional grey eyebrow, H1, one meta line, one-sentence lede. Actions that
   belong to the page (not the next step) sit on the H1 row in .t2-head__aside. */
.t2 .t2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); padding: 1.25rem 0 var(--s5); }
.t2 .t2-head__main { display: grid; gap: 0.5rem; min-width: 0; }
.t2 .t2-head__aside { flex: none; display: flex; gap: var(--s4); align-items: center; padding-bottom: 0.375rem; }
.t2 .t2-eyebrow { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-meta { display: flex; flex-wrap: wrap; color: var(--text-secondary); font-size: var(--fs-ui); }
.t2 .t2-meta > span + span::before { content: "\00B7"; margin: 0 0.6rem; color: var(--border-strong); }
.t2 .t2-lede { font-size: 1.1875rem; line-height: 1.45; max-width: 42rem; color: var(--text); }

/* ==================================================================== 12. NEXT STEP BAND
   One per file page, in the same slot under the page head. The only dark, rich surface.
   Anatomy: eyebrow (+ a status chip when the step is caution or problem), one verb-plus-object
   sentence, one why line, the one solid button, at most two links, an "After this" preview,
   and the stage gate on the right. The woven selvedge along the top edge is the only
   decoration: straight warp threads in the four family hues, aria-hidden, never under text,
   and grey when data-accents="off". */
.t2 .t2-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; padding: 2.375rem 2.5rem 2rem; border-radius: var(--r-band); color: var(--on-band); background: linear-gradient(165deg, var(--band) 0%, var(--band-2) 100%); box-shadow: var(--shadow-band), inset 0 0 0 1px var(--band-rim); }
/* Selvedge: four straight warp threads (one per FS family) down the band's left edge. The weft
   crosses each thread one step later than the last, a 2/1 twill, so it reads as cloth, not stripes. */
.t2 .t2-band__selvedge { position: absolute; top: 0; bottom: 0; left: 0; width: 0.875rem; display: grid; grid-template-columns: repeat(4, 2px); column-gap: 1px; justify-content: center; opacity: var(--selvedge-opacity); pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, transparent 2px, color-mix(in srgb, var(--on-band-2) 16%, transparent) 2px calc(100% - 2px), transparent calc(100% - 2px)); }
.t2 .t2-band__selvedge > i { display: block; background-image: repeating-linear-gradient(180deg, var(--th) 0 10px, transparent 10px 12px); }
.t2 .t2-band__selvedge > i:nth-child(1) { --th: var(--thread-1); }
.t2 .t2-band__selvedge > i:nth-child(2) { --th: var(--thread-2); background-position: 0 3px; }
.t2 .t2-band__selvedge > i:nth-child(3) { --th: var(--thread-3); background-position: 0 6px; }
.t2 .t2-band__selvedge > i:nth-child(4) { --th: var(--thread-4); background-position: 0 9px; }
.t2 .t2-band__main { min-width: 0; }
.t2 .t2-band__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-green); }
.t2 .t2-band__eyebrow > .t2-ico { width: 18px; height: 18px; }
.t2 .t2-band__eyebrow .t2-chip { letter-spacing: normal; text-transform: none; margin-left: 0.25rem; }
.t2 .t2-band__title { margin-top: 0.75rem; font-size: var(--fs-band); font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; color: var(--on-band); max-width: 30em; text-wrap: balance; }
.t2 .t2-band__why { margin-top: 0.625rem; color: var(--on-band-2); font-size: var(--fs-body); max-width: 60ch; }
.t2 .t2-band__actions { margin-top: var(--s5); display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; }
.t2 .t2-band__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--on-band); font-size: var(--fs-ui); font-weight: 500; padding-bottom: 1px; border-bottom: 1px solid color-mix(in srgb, var(--on-band) 38%, transparent); }
.t2 .t2-band__link:hover { text-decoration: none; border-bottom-color: var(--on-band); }
.t2 .t2-band__then { margin-top: var(--s5); padding-top: 1rem; border-top: 1px solid var(--band-line); display: flex; align-items: baseline; gap: 0.75rem; color: var(--on-band-2); font-size: var(--fs-ui); }
.t2 .t2-band__then b { flex: none; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.t2 .t2-band__gate { align-self: start; display: grid; gap: 0.5rem; padding: 0.125rem 0 0 var(--s6); border-left: 1px solid var(--band-line); }
.t2 .t2-band__label { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-band-2); }
.t2 .t2-band__figure { font-size: 2.75rem; font-weight: 450; line-height: 1; letter-spacing: -0.01em; color: var(--on-band); }
.t2 .t2-band__figure small { font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; color: var(--on-band-2); margin-left: 0.375rem; }
.t2 .t2-band__note { color: var(--on-band-2); font-size: var(--fs-small); }
.t2 .t2-band__gate > a, .t2 .t2-gate--summary > a { justify-self: start; }
.t2 .t2-ticks { display: flex; gap: 3px; height: 10px; margin: 0.375rem 0 0.25rem; }
.t2 .t2-ticks > i { flex: 1; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--band-tick-off); }
.t2 .t2-ticks > i.on { background: var(--band-green); box-shadow: none; }
/* Variants: --met (a finished stage, points to the current one) and --locked (a stage not yet
   open, says what opens it). Same slot, same anatomy; only the words and the chip change. */
.t2 .t2-band--met .t2-band__figure, .t2 .t2-band--locked .t2-band__eyebrow { color: var(--on-band); }
.t2 .t2-band--locked .t2-band__eyebrow > .t2-ico { color: var(--on-band-2); }

/* ==================================================================== 13. BUTTONS AND TEXT ACTIONS
   One solid (primary) button per screen: the next step. Everything else is secondary or a text
   action with an arrow. Accents never touch a button. */
.t2 .t2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.875rem 1.375rem; border: 0; border-radius: var(--r-ctl); font-family: var(--font); font-size: var(--fs-ui); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }
.t2 .t2-btn:hover { text-decoration: none; }
.t2 .t2-btn .t2-ico { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.t2 .t2-btn--primary { background: var(--action); color: var(--on-action); }
.t2 .t2-btn--primary:hover { background: var(--action-hover); }
.t2 .t2-btn--primary:hover .t2-ico { transform: translateX(3px); }
.t2 .t2-band .t2-btn--primary { background: var(--band-green); color: var(--on-band-green); }
.t2 .t2-band .t2-btn--primary:hover { background: color-mix(in srgb, var(--band-green) 80%, var(--on-band)); }
.t2 .t2-btn--secondary { background: transparent; color: var(--text); font-weight: 560; box-shadow: inset 0 0 0 1px var(--border-strong); }
.t2 .t2-btn--secondary:hover { background: var(--surface-sunk); }
.t2 .t2-btn--secondary .t2-ico { color: var(--text-secondary); }
.t2 .t2-band .t2-btn--secondary { color: var(--on-band); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-band) 45%, transparent); }
.t2 .t2-band .t2-btn--secondary:hover { background: var(--band-line); }
.t2 .t2-btn--small { padding: 0.5625rem 0.875rem; font-size: var(--fs-small); }
.t2 .t2-btn[disabled], .t2 .t2-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.t2 .t2-go { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-ui); font-weight: 600; color: var(--action); white-space: nowrap; }
.t2 .t2-go .t2-ico { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.t2 .t2-go:hover { text-decoration: none; }
.t2 .t2-go:hover .t2-ico { transform: translateX(2px); }
.t2 .t2-go--ink { color: var(--text); font-weight: 560; }
.t2 .t2-go--ink .t2-ico { color: var(--text-secondary); }
.t2 .t2-go--ink:hover, .t2 .t2-go--ink:hover .t2-ico { color: var(--action); }

/* ==================================================================== 14. STATUS, TAGS, SHAPES, AVATARS
   Status chip: state only, traffic-light tone, always icon plus word, borderless pill.
   Inline status: the same tone, icon and word with no fill, for dense rows and tables.
   Tag: a category (no icon, 4px radius). Neutral by default; an identity tag (an area,
   an FS family) takes its accent through data-acc or data-fam. */
.t2 .t2-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.125rem 0.625rem 0.1875rem 0.4375rem; border-radius: var(--r-pill); font-size: var(--fs-chip); font-weight: 560; line-height: 1.3; white-space: nowrap; }
.t2 .t2-chip .t2-ico { width: 14px; height: 14px; stroke-width: 2.25; }
.t2 .t2-chip--good    { color: var(--good);    background: var(--good-bg); }
.t2 .t2-chip--caution { color: var(--caution); background: var(--caution-bg); }
.t2 .t2-chip--problem { color: var(--problem); background: var(--problem-bg); }
.t2 .t2-chip--neutral { color: var(--neutral); background: var(--neutral-bg); }
.t2 .t2-band .t2-chip--problem { color: var(--band-problem); background: var(--band-problem-bg); }
.t2 .t2-band .t2-chip--good    { color: var(--band-good);    background: var(--band-good-bg); }
.t2 .t2-band .t2-chip--neutral { color: var(--band-neutral); background: var(--band-neutral-bg); }
.t2 .t2-status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-small); font-weight: 560; white-space: nowrap; }
.t2 .t2-status .t2-ico { width: 16px; height: 16px; stroke-width: 2; }
.t2 .t2-status--good { color: var(--good); }
.t2 .t2-status--caution { color: var(--caution); }
.t2 .t2-status--problem { color: var(--problem); }
.t2 .t2-status--neutral { color: var(--neutral); }

.t2 .t2-tag { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.0625rem 0.5rem 0.125rem; border-radius: var(--r-tag); background: var(--surface-sunk); color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 500; line-height: 1.45; white-space: nowrap; }
.t2 .t2-tag:is([data-acc], [data-fam]) { background: var(--id-wash); color: var(--id-ink); font-weight: 560; }

/* Family shapes: identity never rests on hue alone. Income and expenses circle, assets square,
   liabilities diamond, equity triangle, whole file an open ring. Shapes stay when accents are off. */
.t2 .t2-shape { display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; background: var(--id-mid, var(--border-strong)); }
.t2 :is([data-fam="income"] .t2-shape, .t2-shape[data-fam="income"]) { border-radius: 50%; }
.t2 :is([data-fam="assets"] .t2-shape, .t2-shape[data-fam="assets"]) { border-radius: 1.5px; }
.t2 :is([data-fam="liabilities"] .t2-shape, .t2-shape[data-fam="liabilities"]) { width: 0.5625rem; height: 0.5625rem; margin: 0 0.0625rem; border-radius: 1px; transform: rotate(45deg); }
.t2 :is([data-fam="equity"] .t2-shape, .t2-shape[data-fam="equity"]) { width: 0.75rem; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.t2 :is([data-fam="file"] .t2-shape, .t2-shape[data-fam="file"]) { background: transparent; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--id-mid); }

/* Initials avatar: filled in the person's accent ink, a wash halo, name always beside it.
   The hue comes from a stable hash of the user id, so Ama Owusu and Abena Ofori (both AO) differ. */
.t2 .t2-av { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; background: var(--id-ink, var(--text-secondary)); color: var(--on-accent); box-shadow: 0 0 0 3px var(--id-wash, var(--surface-sunk)); }
.t2 .t2-av--s { width: 2rem; height: 2rem; font-size: var(--fs-meta); box-shadow: 0 0 0 2px var(--id-wash, var(--surface-sunk)); }
.t2 .t2-person { display: inline-flex; align-items: center; gap: 0.75rem; }
.t2 .t2-person__who { display: grid; line-height: 1.25; }
.t2 .t2-person__who b { font-weight: 600; font-size: var(--fs-ui); }
.t2 .t2-person__who small { font-size: var(--fs-small); color: var(--text-secondary); }

/* Sign-off line: one tick, initials and dates in text colour. Awaiting uses the caution tone. */
.t2 .t2-sign { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--fs-small); color: var(--text); font-variant-numeric: tabular-nums; }
.t2 .t2-sign > .t2-ico { width: 16px; height: 16px; stroke-width: 2.25; color: var(--good); }
.t2 .t2-sign > span + span::before { content: "\00B7"; margin-right: 0.5rem; color: var(--border-strong); }
.t2 .t2-sign--awaiting > .t2-ico { color: var(--caution); }
.t2 .t2-sign__wait { color: var(--caution); font-weight: 560; }

/* Empty state: one line that says what to do next, with a text link. Never a box. */
.t2 .t2-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.625rem; color: var(--text-secondary); font-size: var(--fs-ui); padding: 0.875rem 0; }
.t2 .t2-empty > .t2-ico { color: var(--text-secondary); }
.t2 .t2-empty a { font-weight: 600; }

/* ==================================================================== 15. KPI FIGURES
   At most three per screen, split by hairlines, never in tiles. */
.t2 .t2-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.t2 .t2-kpi { padding: 0.25rem var(--s5) 0.375rem; border-left: 1px solid var(--border); display: grid; gap: 0.5rem; align-content: start; }
.t2 .t2-kpi:first-child { padding-left: 0; border-left: 0; }
.t2 .t2-kpi dt { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-kpi dt .t2-ico { width: 16px; height: 16px; }
.t2 .t2-kpi dd { margin: 0; font-size: var(--fs-figure); font-weight: 450; line-height: 1; letter-spacing: -0.01em; }
.t2 .t2-kpi dd small { font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; color: var(--text-secondary); margin-left: 0.375rem; }
.t2 .t2-kpi__note { font-size: var(--fs-small); color: var(--text-secondary); }

/* ==================================================================== 16. MATERIALITY RULER
   Server sets, as percentages of the scale (0 to about 1.125 x overall, rounded up to 5,000):
   --ct clearly trivial, --pm performance, --om overall, --u uncorrected misstatements.
   Tone by class: default good (fill green), --caution from half of performance materiality,
   --problem at or past overall. Past performance stays neutral while nothing is wrong. */
.t2 .t2-mat { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s7); align-items: end; }
.t2 .t2-mat__result { display: grid; gap: 0.5rem; justify-items: start; padding-bottom: 1.75rem; }
.t2 .t2-mat__figure { font-size: 3.25rem; font-weight: 450; line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.t2 .t2-mat__foot { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem var(--s5); color: var(--text-secondary); font-size: var(--fs-ui); }
.t2 .t2-ruler { --r-tone: var(--fill); position: relative; margin: 0; padding-top: 4.25rem; }
.t2 .t2-ruler--caution { --r-tone: var(--caution); }
.t2 .t2-ruler--problem { --r-tone: var(--problem); }
.t2 .t2-ruler__post { position: absolute; top: 0; left: var(--x); height: 5.5rem; padding-left: 0.625rem; border-left: 1px solid var(--text); }
.t2 .t2-ruler__post--end { padding-left: 0; padding-right: 0.625rem; border-left: 0; border-right: 1px solid var(--text); transform: translateX(-100%); text-align: right; }
.t2 .t2-ruler__label { display: block; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; color: var(--text-secondary); white-space: nowrap; }
.t2 .t2-ruler__fig { display: block; margin-top: 0.3125rem; font-size: 2rem; font-weight: 450; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.t2 .t2-ruler__track { position: relative; height: 1.25rem; border-right: 1px solid var(--border-strong);
  background:
    repeating-linear-gradient(90deg, var(--border-strong) 0 1px, transparent 1px calc(100% / 7)) left bottom / 100% 70% no-repeat,
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100% / 35)) left bottom / 100% 38% no-repeat,
    linear-gradient(90deg, var(--surface-sunk) 0 var(--pm), color-mix(in srgb, var(--surface-sunk) 84%, var(--border-strong)) var(--pm) var(--om), var(--surface-sunk) var(--om)); }
.t2 .t2-ruler__trivial { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ct); background: repeating-linear-gradient(135deg, var(--border-strong) 0 1px, transparent 1px 4px); }
.t2 .t2-ruler__over { position: absolute; left: var(--om); right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--border-strong) 55%, transparent) 0 1px, transparent 1px 5px); }
.t2 .t2-ruler__fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; width: var(--u, 0%); border-radius: 3px; background: var(--r-tone); }
.t2 .t2-ruler__knob { position: absolute; top: 50%; left: var(--u, 0%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--r-tone); box-shadow: 0 0 0 3px var(--ground); z-index: 1; }
.t2 .t2-ruler__scale { position: relative; height: 1.5rem; margin-top: 0.375rem; font-size: var(--fs-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.t2 .t2-ruler__scale > span { position: absolute; left: var(--x); transform: translateX(-50%); }
.t2 .t2-ruler__scale > span:first-child { transform: none; }

/* ==================================================================== 17. RISK: GRID, STRANDS, REGISTER MIX
   Risk grid: likelihood by magnitude (risk/models.py LIKELIHOOD and MAGNITUDE). Zones are
   faint caution and problem tints with the word in the legend; counts stay in ink. */
.t2 .t2-riskgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1rem; align-items: stretch; }
.t2 .t2-riskgrid table { border-collapse: separate; border-spacing: 4px; width: 100%; margin: -4px; table-layout: fixed; }
.t2 .t2-riskgrid th { font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary); text-align: left; padding: 0.25rem 0.5rem; }
.t2 .t2-riskgrid thead th { text-align: center; padding-top: 0.5rem; }
.t2 .t2-riskgrid tbody th { width: 9.5rem; vertical-align: middle; text-align: right; padding-right: 0.75rem; line-height: 1.25; }
.t2 .t2-riskgrid thead td { box-shadow: none; height: auto; padding: 0; }
.t2 .t2-riskgrid tbody td { height: 5.25rem; border-radius: 6px; padding: 0.625rem 0.75rem; vertical-align: top; box-shadow: inset 0 0 0 1px var(--border); }
.t2 .t2-riskgrid tbody td.z-mid { background: var(--caution-bg); box-shadow: none; }
.t2 .t2-riskgrid tbody td.z-high { background: var(--problem-bg); box-shadow: none; }
.t2 .t2-riskgrid tbody td.is-zero.z-mid { background: color-mix(in srgb, var(--caution-bg) 50%, transparent); }
.t2 .t2-riskgrid tbody td.is-zero.z-high { background: color-mix(in srgb, var(--problem-bg) 50%, transparent); }
.t2 .t2-riskgrid__n { display: block; font-size: 1.75rem; font-weight: 450; line-height: 1; font-variant-numeric: tabular-nums; }
.t2 .t2-riskgrid__n.is-zero { color: var(--text-secondary); font-size: 1.25rem; }
.t2 .t2-riskgrid__codes { display: block; margin-top: 0.375rem; font-size: var(--fs-meta); color: var(--text-secondary); line-height: 1.35; }
.t2 .t2-riskgrid__axis { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-riskgrid__xaxis { grid-column: 2; text-align: center; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); padding-left: 9.5rem; }
.t2 .t2-zones { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-zones li { display: inline-flex; align-items: center; gap: 0.5rem; }
.t2 .t2-zones i { width: 1rem; height: 0.75rem; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border); }
.t2 .t2-zones i.z-mid { background: var(--caution-bg); box-shadow: none; }
.t2 .t2-zones i.z-high { background: var(--problem-bg); box-shadow: none; }

/* Risk strands: each significant risk from Assessed to Concluded. Green up to where it
   stands (--done 0 to 4), dashed after. Who acts is said once, under the list. */
.t2 .t2-strands__head, .t2 .t2-strand { display: grid; grid-template-columns: minmax(0, 1fr) 16rem 8.5rem; column-gap: 1.5rem; align-items: center; }
.t2 .t2-strands__head { padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); }
.t2 .t2-strands__head > span { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-strands__stations { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.t2 .t2-strands__stations > span { font-size: var(--fs-meta); color: var(--text-secondary); letter-spacing: 0; text-transform: none; font-weight: 500; }
.t2 .t2-strand { padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.t2 .t2-strand__title { font-size: var(--fs-ui); line-height: 1.35; }
.t2 .t2-strand__title b { font-weight: 600; margin-right: 0.35em; font-variant-numeric: tabular-nums; }
.t2 .t2-strand__sub { margin-top: 0.3125rem; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.t2 .t2-line { --done: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; height: 1.25rem; }
.t2 .t2-line::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 1.5px; margin-top: -0.75px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px); }
.t2 .t2-line::after { content: ""; position: absolute; left: 12.5%; top: 50%; height: 2px; margin-top: -1px; width: calc(max(var(--done) - 1, 0) * 25%); border-radius: 1px; background: var(--fill); }
.t2 .t2-line > i { position: relative; z-index: 1; justify-self: center; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.t2 .t2-line > i.on { background: var(--fill); box-shadow: none; }

/* Register mix: the accent family as data-viz categories, always with words beside it */
.t2 .t2-mix { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem var(--s5); }
.t2 .t2-mix__bar { display: flex; gap: 2px; width: 11rem; height: 0.5rem; flex: none; }
.t2 .t2-mix__bar > i { flex: var(--n) 1 0; border-radius: 2px; background: var(--id-mid); }
.t2 .t2-mix__key { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-mix__key > li { display: inline-flex; align-items: center; gap: 0.45rem; }
.t2 .t2-mix__key b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==================================================================== 18. AREA MAP
   The twelve FS areas on one hairline grid (a loom, not twelve cards). Each tile: family
   top rule, shape and code in its accent, a wash that fades inside the tile, the full area
   name, a green step meter, and the gate marker (open ring with checks left, or a ticked ring
   when the gate is met). A status chip only where one is earned; categories are tags.
   Phones: rows, the key areas first (.is-key: problems, then closest to the gate), the rest
   folded under "All 12 areas". */
.t2 .t2-areas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.t2 .t2-area { position: relative; display: flex; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.t2 .t2-area > a { flex: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: 0.5rem; min-height: 10.5rem; padding: 0.875rem 1rem 0.8125rem; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--id-wash) 92%, transparent) 0%, transparent 74%); }
.t2 .t2-area > a::before { content: ""; position: absolute; left: -1px; right: 0; top: -1px; height: 3px; background: var(--id-mid); }
.t2 .t2-area > a:hover { text-decoration: none; background-color: var(--surface); }
.t2 .t2-area__top { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; min-height: 1.5rem; }
.t2 .t2-area__code { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; color: var(--id-ink); font-variant-numeric: tabular-nums; }
.t2 .t2-area__name { font-size: 1rem; line-height: 1.25; }
.t2 .t2-area .t2-chip { font-size: var(--fs-meta); padding: 0.0625rem 0.5rem 0.125rem 0.375rem; }
.t2 .t2-area .t2-chip .t2-ico { width: 13px; height: 13px; }
.t2 .t2-area .t2-tag { font-size: var(--fs-meta); }
.t2 .t2-meter { display: block; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.t2 .t2-meter > i { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--fill); }
.t2 .t2-meter.is-changed > i { animation: t2-grow 600ms var(--ease) both; }
@keyframes t2-grow { from { width: 0; } }
.t2 .t2-area__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.t2 .t2-area__foot > span { white-space: nowrap; }
.t2 .t2-gatemark { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--text); font-weight: 560; }
.t2 .t2-gatemark__ring { width: 0.875rem; height: 0.875rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--border-strong); flex: none; }
.t2 .t2-gatemark.is-close { font-weight: 700; }
.t2 .t2-gatemark.is-met .t2-gatemark__ring { background: var(--fill); color: var(--on-fill); box-shadow: none; }
.t2 .t2-gatemark.is-met .t2-gatemark__ring .t2-ico { width: 10px; height: 10px; stroke-width: 3; }
.t2 .t2-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.375rem; margin-top: var(--s4); font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-legend > li { display: inline-flex; align-items: center; gap: 0.5rem; }
.t2 .t2-legend__note { margin-left: auto; }
.t2 .t2-areamap__all { display: none; }

/* ==================================================================== 19. ROWS: MINI JOURNEY, FILE ROWS, QUEUE ROWS, BRIEF LINES */
.t2 .t2-mini { display: inline-flex; align-items: center; flex: none; }
.t2 .t2-mini > i { position: relative; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--border-strong); background: var(--ground); }
.t2 .t2-mini > i + i { margin-left: 9px; }
.t2 .t2-mini > i + i::before { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 7px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--track); }
.t2 .t2-mini > i.m { background: var(--fill); box-shadow: none; }
.t2 .t2-mini > i.m::before, .t2 .t2-mini > i.c::before { background: var(--fill); }
.t2 .t2-mini > i.c { width: 11px; height: 11px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--text); }

.t2 .t2-files > li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) 8.5rem 8rem auto; gap: 0.5rem 1.5rem; align-items: center; padding: 1.125rem 0; border-bottom: 1px solid var(--border); }
.t2 .t2-files > li:first-child { border-top: 1px solid var(--border); }
.t2 .t2-file-row__client { font-size: var(--fs-body); font-weight: 600; color: var(--text); line-height: 1.3; }
.t2 .t2-file-row__eng { display: block; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-file-row__stage { display: grid; gap: 0.375rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-file-row__stage b { color: var(--text); font-weight: 600; }
.t2 .t2-file-row__due { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.3; }
.t2 .t2-file-row__due b { display: block; color: var(--text); font-weight: 560; font-variant-numeric: tabular-nums; }

.t2 .t2-queue > li { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 0.25rem var(--s5); align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.t2 .t2-queue > li:first-child { border-top: 1px solid var(--border); }
.t2 .t2-queue__state { padding-top: 0.125rem; }
.t2 .t2-queue__title { font-size: var(--fs-body); font-weight: 560; line-height: 1.35; }
.t2 .t2-queue__why { margin-top: 0.25rem; font-size: var(--fs-ui); color: var(--text-secondary); max-width: 62ch; }
.t2 .t2-queue__file { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-queue__act { align-self: center; }

.t2 .t2-brief > li { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; gap: 0.25rem var(--s4); align-items: baseline; padding: 0.9375rem 0; border-bottom: 1px solid var(--border); }
.t2 .t2-brief > li:first-child { padding-top: 0.25rem; }
.t2 .t2-brief p { font-size: var(--fs-body); max-width: 60ch; }
.t2 .t2-brief .t2-chip { justify-self: start; }
.t2 .t2-cite { display: block; margin-top: 0.25rem; font-size: var(--fs-small); color: var(--text-secondary); }

/* ==================================================================== 20. TABLES
   No fill in the header, one hairline under it, hairline rows, no outer border.
   Number columns take .num. Wide tables scroll inside .t2-table-wrap, never the page. */
.t2 .t2-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t2 .t2-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.t2 .t2-table caption { caption-side: top; text-align: left; padding-bottom: 0.875rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-table th { text-align: left; vertical-align: bottom; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 0 1.25rem 0.625rem 0; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.t2 .t2-table td { padding: 0.75rem 1.25rem 0.75rem 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.t2 .t2-table :is(th, td):last-child { padding-right: 0; }
.t2 .t2-table :is(th, td).num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.t2 .t2-table td a { color: var(--text); font-weight: 560; }
.t2 .t2-table td a:hover { color: var(--action); }
.t2 .t2-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-sunk) 55%, transparent); }
.t2 .t2-table .t2-muted { color: var(--text-secondary); }
.t2 .t2-table .t2-sign { flex-wrap: nowrap; white-space: nowrap; }

/* ==================================================================== 21. SIDE PANEL
   The only raised surface besides the band and paper. Never taller than the main column,
   never a gate list or a form. Sections split by a hairline, never cards inside it. */
.t2 .t2-panel { align-self: start; display: grid; gap: var(--s5); padding: 1.625rem 1.625rem 1.5rem; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-panel); }
.t2 .t2-panel > section + section { border-top: 1px solid var(--border); padding-top: var(--s5); }
.t2 .t2-panel__head { display: flex; align-items: center; gap: 0.55rem; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.t2 .t2-panel__head .t2-ico { color: var(--text-secondary); }
.t2 .t2-panel__cap { margin-top: 0.25rem; font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-people { margin-top: var(--s4); display: grid; gap: 0.875rem; }
.t2 .t2-people > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.t2 .t2-people .t2-chip { justify-self: start; margin-top: 0.375rem; font-size: var(--fs-meta); }
.t2 .t2-dates { position: relative; margin-top: var(--s4); display: grid; gap: 0.875rem; }
.t2 .t2-dates::before { content: ""; position: absolute; left: 5px; top: 0.625rem; bottom: 0.625rem; width: 1px; background: var(--border); }
.t2 .t2-dates > li { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.t2 .t2-dates__pip { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 0.4375rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.t2 .t2-dates .is-today .t2-dates__pip { background: var(--text); box-shadow: none; }
.t2 .t2-dates b { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
.t2 .t2-dates span { font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-links { display: grid; gap: 0.25rem; }
.t2 .t2-links a { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0; color: var(--text); font-size: var(--fs-ui); }
.t2 .t2-links a > .t2-ico { color: var(--text-secondary); }
.t2 .t2-links a > .t2-ico:last-child { margin-left: auto; width: 16px; height: 16px; }
.t2 .t2-links a:hover { text-decoration: none; color: var(--action); }
.t2 .t2-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1.25rem; margin-top: var(--s4); font-size: var(--fs-small); }
.t2 .t2-facts dt { color: var(--text-secondary); }

/* ==================================================================== 22. GATE SUMMARY AND CHECKS
   Outstanding checks first and open, each with a link and who can act. Met and not
   applicable checks folded with counts. Citations only inside a check's fold.
   .t2-gate--summary is the three-line version a panel may carry. */
.t2 .t2-gate__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border); }
.t2 .t2-gate__head h3 { font-size: var(--fs-h3); }
.t2 .t2-gate__count { margin-left: auto; font-size: var(--fs-ui); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.t2 .t2-gate__count b { font-size: 1.5rem; font-weight: 500; color: var(--text); margin-right: 0.25rem; }
.t2 .t2-checks > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.25rem var(--s4); align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--border); }
/* A gate list with no status column (t2_gate.html without status_col): the check's text takes the first column's room. */
.t2 .t2-checks--nostatus > li { grid-template-columns: minmax(0, 1fr) auto; }
.t2 .t2-check__title { font-size: var(--fs-ui); font-weight: 560; line-height: 1.35; }
.t2 .t2-check__detail { margin-top: 0.25rem; font-size: var(--fs-ui); color: var(--text-secondary); }
.t2 .t2-check__detail b { color: var(--text); font-weight: 600; }
.t2 .t2-checks--quiet > li { padding: 0.625rem 0; grid-template-columns: 8.5rem minmax(0, 1fr); }
.t2 .t2-checks--quiet .t2-check__title { font-weight: 400; }
.t2 .t2-gate__rest { margin-top: var(--s4); }
.t2 .t2-gate--summary { display: grid; gap: 0.625rem; }
.t2 .t2-gate--summary .t2-gate__head { padding-bottom: 0; border-bottom: 0; }
.t2 .t2-gate--summary .t2-gate__count { margin-left: 0; }
.t2 .t2-gate--summary p { font-size: var(--fs-small); }

/* ==================================================================== 23. FOLD
   Detail on demand. A details element with a chevron that turns, never a browser triangle. */
.t2 .t2-fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: var(--fs-ui); font-weight: 500; color: var(--text); }
.t2 .t2-fold > summary::-webkit-details-marker { display: none; }
.t2 .t2-fold > summary::marker { content: ""; }
.t2 .t2-fold > summary > .t2-ico:first-child { width: 18px; height: 18px; color: var(--text-secondary); transition: transform var(--dur) var(--ease); }
.t2 .t2-fold[open] > summary > .t2-ico:first-child { transform: rotate(90deg); }
.t2 .t2-fold > summary:hover { color: var(--action); }
.t2 .t2-fold__count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.t2 .t2-fold__body { margin-top: var(--s3); }
.t2 .t2-fold--small > summary { font-size: var(--fs-small); color: var(--text-secondary); font-weight: 500; }
.t2 .t2-fold--small > summary > .t2-ico:first-child { width: 16px; height: 16px; }

/* ==================================================================== 24. FORM CONTROLS
   Options to tick are real checkboxes and radios with their words beside them, never pills.
   Filters of 2 to 5 choices are a row of radios applied on change (htmx), with a noscript
   submit; longer lists use a select. */
.t2 input[type="checkbox"], .t2 input[type="radio"] { accent-color: var(--action); width: 1.25rem; height: 1.25rem; margin: 0; flex: none; cursor: pointer; }
.t2 .t2-choice { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--fs-ui); line-height: 1.4; cursor: pointer; }
.t2 .t2-choice > input { margin-top: 0.0625rem; }
.t2 .t2-choices { border: 0; padding: 0; min-width: 0; display: grid; gap: 0.625rem; }
.t2 .t2-choices > legend { padding: 0; margin-bottom: 0.625rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-choices--row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.t2 .t2-choices--row > legend { float: left; margin: 0 0.5rem 0 0; }
.t2 .t2-field { display: grid; gap: 0.375rem; }
.t2 .t2-field__label { font-size: var(--fs-small); font-weight: 600; }
.t2 .t2-field__hint { font-size: var(--fs-small); color: var(--text-secondary); }
.t2 .t2-input, .t2 .t2-select > select { width: 100%; font-size: var(--fs-ui); color: var(--text); background: var(--surface); border: 0; border-radius: var(--r-ctl); padding: 0.625rem 0.75rem; box-shadow: inset 0 0 0 1px var(--border-strong); }
.t2 .t2-input::placeholder { color: var(--text-secondary); opacity: 1; }
.t2 .t2-input:focus-visible, .t2 .t2-select > select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.t2 .t2-select { position: relative; display: block; }
.t2 .t2-select > select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.t2 .t2-select > .t2-ico { position: absolute; right: 0.75rem; top: 50%; margin-top: -10px; color: var(--text-secondary); pointer-events: none; }

/* ==================================================================== 25. SECTION TABS
   In-stage navigation on sub-pages: underline tabs on one row that scrolls sideways under a
   fade. Active is ink. Hubs show their sections as content and no tab row. */
.t2 .t2-tabs { position: relative; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); -webkit-mask-image: linear-gradient(90deg, white calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, white calc(100% - 3rem), transparent); }
.t2 .t2-tabs::-webkit-scrollbar { display: none; }
.t2 .t2-tabs > ol { display: flex; gap: 1.75rem; white-space: nowrap; padding-right: 3rem; }
.t2 .t2-tabs a { position: relative; display: block; padding: 0.5rem 0 0.75rem; color: var(--text-secondary); font-size: var(--fs-ui); }
.t2 .t2-tabs a:hover { color: var(--text); text-decoration: none; }
.t2 .t2-tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
.t2 .t2-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }

/* ==================================================================== 26. PAPER DOCUMENT
   Reports, statements and letters look like the documents the firm signs. */
.t2 .t2-paper { max-width: calc(var(--measure) + 7rem); margin: 0 auto; padding: 3rem 3.5rem 3.25rem; background: var(--surface); border-radius: 3px; box-shadow: var(--shadow-paper); font-size: 1.0625rem; line-height: 1.6; }
.t2 .t2-paper__strip { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: 2.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.t2 .t2-paper__title { text-align: center; font-size: 1.375rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
.t2 .t2-paper__to { margin-top: 0.5rem; text-align: center; color: var(--text-secondary); }
.t2 .t2-paper h3 { margin: 2rem 0 0.5rem; font-size: 1.0625rem; font-weight: 700; }
.t2 .t2-paper p:not([class]) { max-width: var(--measure); }
.t2 .t2-paper p + p { margin-top: 0.875rem; }
.t2 .t2-paper__more { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* ==================================================================== 27. TABLET */
@media (max-width: 72rem) {
  .t2 .t2-search { display: none; }
  .t2 .t2-me__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* avatar only; the name stays for screen readers */
  .t2 .t2-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--s6); }
  .t2 .t2-band { grid-template-columns: minmax(0, 1fr) 15rem; }
}
@media (max-width: 64rem) {
  .t2 .t2-nav > a > span:not(.t2-nav__count), .t2 .t2-nav > details > summary > span { display: none; }   /* icons only, labels move to aria-label */
  .t2 .t2-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t2 .t2-files > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .t2 .t2-file-row__due { display: none; }
}

/* ==================================================================== 28. PHONE: ONE COLUMN, 16PX GUTTER
   Mobile-first screens (queue, overview, client, reviewer) are designed here first; this block
   is how every component reflows. Nothing scrolls sideways except a table inside its wrap. */
@media (max-width: 44rem) {
  .t2 { --gutter: 1rem; --fs-display: 2.125rem; --fs-band: 1.5rem; --fs-h2: 1.375rem; --fs-figure: 2rem; font-size: 1.0625rem; }

  /* Top bar: lockup, Thread, Menu. Nav and tools move into the Menu drawer. */
  .t2 .t2-bar__in { height: 3.5rem; gap: var(--s4); }
  .t2 .t2-brand img { height: 1.75rem; }
  .t2 .t2-brand { gap: 0.625rem; }
  .t2 .t2-brand__rule { height: 1.25rem; }
  .t2 .t2-brand__app { font-size: 1.125rem; }
  .t2 .t2-nav, .t2 .t2-bar__tools { display: none; }
  .t2 .t2-menu-btn { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; padding: 0.4375rem 0.75rem; border: 0; border-radius: var(--r-ctl); background: transparent; box-shadow: inset 0 0 0 1px var(--border); font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; }

  /* File row: the links fold into "In this file" */
  .t2 .t2-file { padding-top: 0.75rem; }
  .t2 .t2-file__links { display: none; }
  .t2 .t2-file__more { display: block; }
  .t2 .t2-file__sub { display: none; }

  /* Journey: all ten dots, no cut labels, one sentence above */
  .t2 .t2-journey__now { display: block; margin-bottom: 0.75rem; font-size: var(--fs-small); color: var(--text-secondary); }
  .t2 .t2-journey__now b { color: var(--text); font-weight: 700; }
  .t2 .t2-stop__name, .t2 .t2-stop__state, .t2 .t2-stop__count { display: none; }
  .t2 .t2-stop::before { top: 8.5px; left: calc(-50% + 12px); right: calc(50% + 12px); }
  .t2 .t2-stop__dot { width: 20px; height: 20px; font-size: 0.75rem; }
  .t2 .is-met .t2-stop__dot .t2-ico { width: 12px; height: 12px; }
  .t2 .is-current .t2-stop__dot { width: 26px; height: 26px; font-size: var(--fs-meta); box-shadow: inset 0 0 0 2px var(--text), 0 0 0 4px var(--surface-sunk); }

  /* Page head */
  .t2 .t2-head { flex-direction: column; align-items: stretch; gap: var(--s4); padding: var(--s5) 0 var(--s4); }
  .t2 .t2-head__aside { padding-bottom: 0; }
  .t2 .t2-meta { flex-direction: column; line-height: 1.4; }
  .t2 .t2-meta > span + span::before { content: none; }
  .t2 .t2-lede { font-size: var(--fs-ui); }

  /* Band: one column, full-width button, compact gate line, selvedge along the top */
  .t2 .t2-band { grid-template-columns: 1fr; gap: var(--s5); padding: 2.125rem 1.25rem 1.375rem; border-radius: 12px; }
  .t2 .t2-band__actions { gap: var(--s4); }
  .t2 .t2-band .t2-btn--primary { width: 100%; }
  .t2 .t2-band__selvedge { bottom: auto; right: 0; width: auto; height: 0.75rem; grid-template-columns: none; grid-template-rows: repeat(4, 2px); row-gap: 1px; align-content: center; }
  .t2 .t2-band__selvedge > i { background-image: repeating-linear-gradient(90deg, var(--th) 0 10px, transparent 10px 12px); }
  .t2 .t2-band__selvedge > i:nth-child(2) { background-position: 3px 0; }
  .t2 .t2-band__selvedge > i:nth-child(3) { background-position: 6px 0; }
  .t2 .t2-band__selvedge > i:nth-child(4) { background-position: 9px 0; }
  .t2 .t2-band__then { flex-direction: column; gap: 0.125rem; }
  .t2 .t2-band__gate { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--s4); row-gap: 0.25rem; padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--band-line); }
  .t2 .t2-band__label { grid-column: 1 / -1; }
  .t2 .t2-band__figure { font-size: 1.75rem; }
  .t2 .t2-band__gate .t2-ticks { grid-column: 1 / -1; height: 6px; margin: 0.25rem 0; }
  .t2 .t2-band__gate .t2-band__link { grid-column: 1 / -1; justify-self: start; }

  /* Columns stack; the panel follows the main column */
  .t2 .t2-layout { grid-template-columns: 1fr; gap: var(--s7); margin-top: var(--s6); }
  .t2 .t2-main { gap: var(--s6); }
  .t2 .t2-sec__head { flex-wrap: wrap; }
  .t2 .t2-sec__meta { margin-left: 0; text-align: left; flex-basis: 100%; }
  .t2 .t2-medal { width: 2rem; height: 2rem; }
  .t2 .t2-panel { padding: 1.375rem 1.25rem; }

  /* KPIs: figures on rows, label left, figure right */
  .t2 .t2-kpis { grid-auto-flow: row; }
  .t2 .t2-kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 0.75rem 0; border-left: 0; border-top: 1px solid var(--border); }
  .t2 .t2-kpi:first-child { border-top: 0; }
  .t2 .t2-kpi__note { grid-column: 1 / -1; }

  /* Ruler: result above, posts on two tiers so labels never touch */
  .t2 .t2-mat { grid-template-columns: 1fr; gap: var(--s4); }
  .t2 .t2-mat__result { grid-template-columns: auto auto; align-items: center; justify-content: start; column-gap: var(--s4); padding-bottom: 0; }
  .t2 .t2-mat__result .t2-label { grid-column: 1 / -1; }
  .t2 .t2-mat__figure { font-size: 2.5rem; }
  .t2 .t2-ruler { padding-top: 6rem; }
  .t2 .t2-ruler__post { height: 7.25rem; }
  .t2 .t2-ruler__post:first-child { top: 3.25rem; height: 4rem; }
  .t2 .t2-ruler__fig { font-size: 1.5rem; }
  .t2 .t2-ruler__label { letter-spacing: 0.06em; }

  /* Risk grid and strands */
  .t2 .t2-riskgrid { grid-template-columns: 1fr; }
  .t2 .t2-riskgrid__axis { display: none; }
  .t2 .t2-riskgrid__xaxis { grid-column: 1; padding-left: 0; }
  .t2 .t2-riskgrid tbody th { width: 5.5rem; padding-right: 0.25rem; font-size: var(--fs-meta); }
  .t2 .t2-riskgrid thead th { font-size: var(--fs-meta); }
  .t2 .t2-riskgrid tbody td { height: 4rem; padding: 0.5rem; }
  .t2 .t2-riskgrid__n { font-size: 1.375rem; }
  .t2 .t2-strands__head { display: none; }
  .t2 .t2-strand { grid-template-columns: 1fr; row-gap: 0.75rem; }

  /* Area map: rows, key areas first, the rest folded */
  .t2 .t2-areas { grid-template-columns: 1fr; }
  .t2 .t2-area > a { grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.5rem; min-height: 0; padding: 0.75rem 0.875rem 0.75rem 1rem; align-items: center; background: linear-gradient(90deg, color-mix(in srgb, var(--id-wash) 92%, transparent), transparent 70%); }
  .t2 .t2-area > a::before { top: -1px; bottom: -1px; right: auto; width: 3px; height: auto; }
  .t2 .t2-area__top, .t2 .t2-area__foot { display: contents; }
  .t2 .t2-area__code { grid-column: 1; grid-row: 1 / span 2; }
  .t2 .t2-area__name { grid-column: 2; grid-row: 1; }
  .t2 .t2-area .t2-chip, .t2 .t2-area .t2-tag { grid-column: 3; grid-row: 1; justify-self: end; }
  .t2 .t2-meter { grid-column: 2; grid-row: 2; height: 4px; }
  .t2 .t2-area__foot > span:first-child { display: none; }
  .t2 .t2-area__foot > .t2-gatemark { grid-column: 3; grid-row: 2; justify-self: end; font-size: 0.875rem; }
  .t2 .t2-areamap:not(:has(.t2-areamap__all[open])) .t2-area:not(.is-key) { display: none; }
  .t2 .t2-areamap:not(:has(.t2-areamap__all[open])) .t2-area.is-key { order: calc(var(--k, 1) - 10); }   /* --k: 1 for the first key area */
  .t2 .t2-areamap__all { display: block; margin-top: var(--s4); }
  .t2 .t2-legend__note { margin-left: 0; flex-basis: 100%; }

  /* Rows */
  .t2 .t2-files > li { grid-template-columns: minmax(0, 1fr) auto; }
  .t2 .t2-file-row__stage { grid-column: 1 / -1; grid-row: 2; }
  .t2 .t2-files .t2-go { display: none; }
  .t2 .t2-queue > li { grid-template-columns: 1fr; gap: 0.5rem; }
  .t2 .t2-queue__act { align-self: start; margin-top: 0.25rem; }
  .t2 .t2-queue__act .t2-btn { width: 100%; }
  .t2 .t2-brief > li { grid-template-columns: 1fr; gap: 0.375rem; }
  .t2 .t2-checks > li, .t2 .t2-checks--quiet > li, .t2 .t2-checks--nostatus > li { grid-template-columns: 1fr; gap: 0.25rem; }
  .t2 .t2-gate__count { margin-left: 0; flex-basis: 100%; }

  .t2 .t2-table-wrap > .t2-table { min-width: 34rem; }   /* scrolls inside its wrap, never the page */

  /* Paper and tabs */
  .t2 .t2-paper { padding: 1.75rem 1.25rem 2rem; font-size: 1rem; }
  .t2 .t2-paper__title { font-size: 1.125rem; letter-spacing: 0.1em; }
}

/* ==================================================================== 29. MOTION AND PRINT */
@media (prefers-reduced-motion: reduce) {
  .t2 *, .t2 *::before, .t2 *::after { transition: none !important; animation: none !important; }
}
@media print {
  .t2 .t2-bar, .t2 .t2-band__selvedge, .t2 .t2-file__links { display: none; }
  .t2 .t2-band, .t2 .t2-panel, .t2 .t2-paper { box-shadow: none; }
  .t2 .t2-band { background: none; color: var(--text); border: 1px solid var(--border-strong); }
  .t2 .t2-band :is(.t2-band__title, .t2-band__why, .t2-band__figure, .t2-band__label, .t2-band__eyebrow) { color: var(--text); }
}