/* The design kit (1.118.0; 3Sry's D-228, the owner's words of 2026-10-24:
   "build this design language into 3sry and all the plugins. the plugins use
   the design language though their functionality is more limited").

   One file for every console and page that takes the design language, served
   by the host at /ds.css beside /pa.css, and copied into a site by
   scripts/sync-ui.mjs. It is 3Sry's, ported and not re-invented: the tokens
   are web/style.css's, and the templates' rules are its "D-228: the shell,
   the three lenses and the nine templates" section, word for word. 3Sry keeps
   this file as web/ds.css, the same bytes, as it keeps the confirm card
   (test/design-kit.test.mjs checks it where 3Sry is checked out beside the
   chassis). Change it here, never in a copy.

   The rules it is held to (docs/design-kit.md; lib/ui/ds-check.mjs checks
   each, in the chassis and in every product that loads it):
   - One primary, solid. The gradient is a logo's alone.
   - Every text token reads at 4.5:1 or more on every surface, light and dark.
     The person's own choice (data-theme, which pa.js sets) repeats both sets.
   - Logical properties only, so a right-to-left page mirrors. Figures and
     amounts stay left to right inside it.
   - On a phone every target is at least 44px tall, and a button's words
     never wrap (Veritas L103).
   The templates' API is lib/ui/ds.mjs; the screens' contract is a product's
   own screens.json, read by the same checks. */

:root {
  /* The colour tokens (light). Their dark set is below; the person's own choice repeats both. */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f0f3f9;
  --ink: #0e1726;
  --ink-2: #4a5568;
  --ink-3: #5f6b7d;
  --line: #e3e8f1;
  --line-strong: #c9d1df;
  --primary: #0629a0;
  --primary-hover: #05208a;
  --on-primary: #ffffff;
  --primary-tint: #f3f6fe;
  --primary-line: #c9d6f5;
  --link: #0629a0;
  --good: #147a3b;
  --good-tint: #f0faf3;
  --attention: #a14a07;
  --attention-tint: #fff5e6;
  --risk: #c81e3a;
  --risk-tint: #fdecef;
  --hub-bar: #1f2937;
  --hub-ink: #e5e7eb;
  --hub-bg: #eef0f3;
  --hub-rail: #f8f9fa;
  --hub-primary: #1f2937;
  --on-hub-primary: #ffffff;
  --shadow: 0 1px 2px rgba(14, 23, 38, 0.04), 0 8px 24px rgba(14, 23, 38, 0.06);

  /* Shape, space and type. */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --touch: 44px; /* the screen contract's check 6: every target at least this tall on a phone */
  --gutter: 16px;
  --rail: 220px;
  --header: 56px;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

/* Veritas L98: the device's dark mode never overrides a light theme the person chose (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020;
    --surface: #131a2e;
    --surface-2: #1a2238;
    --ink: #eef2fb;
    --ink-2: #b3bdd3;
    --ink-3: #97a3bd;
    --line: #243050;
    --line-strong: #34406a;
    --primary: #3356d6;
    --primary-hover: #2a4bc4;
    --on-primary: #ffffff;
    --primary-tint: #1c2a55;
    --primary-line: #34479a;
    --link: #9db4ff;
    --good: #4ade80;
    --good-tint: #12301f;
    --attention: #fbbf24;
    --attention-tint: #33280c;
    --risk: #fb7185;
    --risk-tint: #3a1820;
    --hub-bar: #0f1522;
    --hub-ink: #e5e7eb;
    --hub-bg: #0d1320;
    --hub-rail: #111827;
    --hub-primary: #e5e7eb;
    --on-hub-primary: #111827;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

/* The person's own theme: pa.js sets data-theme on <html>. "light" or "dark"
   overrides the system's; with none the system decides, as above. The tokens
   are the same two sets. */
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f0f3f9;
  --ink: #0e1726;
  --ink-2: #4a5568;
  --ink-3: #5f6b7d;
  --line: #e3e8f1;
  --line-strong: #c9d1df;
  --primary: #0629a0;
  --primary-hover: #05208a;
  --on-primary: #ffffff;
  --primary-tint: #f3f6fe;
  --primary-line: #c9d6f5;
  --link: #0629a0;
  --good: #147a3b;
  --good-tint: #f0faf3;
  --attention: #a14a07;
  --attention-tint: #fff5e6;
  --risk: #c81e3a;
  --risk-tint: #fdecef;
  --hub-bar: #1f2937;
  --hub-ink: #e5e7eb;
  --hub-bg: #eef0f3;
  --hub-rail: #f8f9fa;
  --hub-primary: #1f2937;
  --on-hub-primary: #ffffff;
  --shadow: 0 1px 2px rgba(14, 23, 38, 0.04), 0 8px 24px rgba(14, 23, 38, 0.06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #131a2e;
  --surface-2: #1a2238;
  --ink: #eef2fb;
  --ink-2: #b3bdd3;
  --ink-3: #97a3bd;
  --line: #243050;
  --line-strong: #34406a;
  --primary: #3356d6;
  --primary-hover: #2a4bc4;
  --on-primary: #ffffff;
  --primary-tint: #1c2a55;
  --primary-line: #34479a;
  --link: #9db4ff;
  --good: #4ade80;
  --good-tint: #12301f;
  --attention: #fbbf24;
  --attention-tint: #33280c;
  --risk: #fb7185;
  --risk-tint: #3a1820;
  --hub-bar: #0f1522;
  --hub-ink: #e5e7eb;
  --hub-bg: #0d1320;
  --hub-rail: #111827;
  --hub-primary: #e5e7eb;
  --on-hub-primary: #111827;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

/* =====================================================================================
   The elements every page shares: the body, links, buttons, fields and the
   action row. 3Sry's own base rules, in logical properties.
   ===================================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
/* 3Sry's D-245, second addendum (chassis 1.120.0): Japanese, Traditional Chinese and Greek read in a face that has
   their script, the computer's own (nothing is fetched): the platforms' Japanese and Traditional Chinese faces,
   then Noto's, ahead of the kit's face, so Latin words and figures beside them stay as they are. */
:root:lang(ja) { --font: ui-sans-serif, system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', 'Segoe UI', Roboto, Arial, sans-serif; }
:root:lang(zh) { --font: ui-sans-serif, system-ui, -apple-system, 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', 'Noto Sans HK', 'Segoe UI', Roboto, Arial, sans-serif; }
:root:lang(el) { --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
/* An open dropdown's list is drawn by the browser: its options take the page's own colours (Veritas L54). */
option, optgroup { background-color: var(--surface); color: var(--ink); }
option:disabled { color: var(--ink-3); }
option:checked { background-color: var(--surface-2); color: var(--ink); }
[hidden] { display: none !important; }
.small { font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 2px; }
.actions.small button { padding-block: 5px; padding-inline: 12px; font-size: 13px; }
button, a.button {
  border-radius: 999px; padding-block: 8px; padding-inline: 16px; font-weight: 600; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
a.button { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
/* Veritas L103: an action's words stay on one line; a row of them wraps as whole buttons. */
.actions button, .actions a.button, .ds-table td.row-actions button, .ds-table td.row-actions a.button { white-space: nowrap; }
.ds-table td.row-actions { inline-size: 1%; white-space: nowrap; }
button:focus-visible, a.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
button.primary, a.button.primary { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
button.primary:hover, a.button.primary:hover { background: var(--primary-hover); }
button:disabled, button[aria-disabled='true'], a.button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
button.secondary, a.button.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
button.secondary:hover, a.button.secondary:hover { background: var(--surface-2); }
button.quiet, a.button.quiet { background: transparent; border-color: transparent; color: var(--ink-2); padding-block: 6px; padding-inline: 10px; }
button.quiet:hover, a.button.quiet:hover { color: var(--ink); }
input:not([type='checkbox']):not([type='radio']), select, textarea { padding-block: 8px; padding-inline: 10px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); min-inline-size: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
label { color: var(--ink-2); }
/* A table of records (Veritas L103): a row's buttons stay on one line. */
.ds-table { inline-size: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ds-table th, .ds-table td { text-align: start; padding-block: 9px; padding-inline: 10px; border-block-end: 1px solid var(--line); vertical-align: top; font-size: var(--text-md); }
.ds-table th { color: var(--ink-2); font-weight: 650; font-size: var(--text-sm); }
.ds-table td.num, .ds-table th.num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.ds-table-wrap { max-inline-size: 100%; overflow-x: auto; }

/* =====================================================================================
   The shell (frame 1a): a header of one row, a rail of the console's places,
   and on a phone a bar at the foot. A plugin has fewer places than 3Sry, so
   its rail holds its own sections; 3Sry's own lenses and departments stay in
   3Sry's style.css.
   ===================================================================================== */
.ds-top { position: sticky; top: 0; z-index: 10; background: var(--surface); border-block-end: 1px solid var(--line); }
.ds-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: var(--header); padding-block: 8px; padding-inline: var(--gutter); }
.ds-brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: var(--text-lg); color: var(--ink); text-decoration: none; min-inline-size: 0; }
.ds-brand img { block-size: 28px; inline-size: auto; }
.ds-business { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding-block: 4px; padding-inline: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 24ch; }
.ds-business:empty { display: none; }
.ds-search { flex: 1 1 auto; max-inline-size: 560px; margin-inline: 4px auto; }
.ds-search input { inline-size: 100%; min-block-size: 36px; padding-block: 6px; padding-inline: 14px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--surface-2); }
.ds-search input:focus-visible { border-color: var(--primary-line); }
.ds-top-spacer { flex: 1 1 auto; }
.ds-top-end { display: flex; align-items: center; gap: 8px; }
.ds-help { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--text-md); padding-block: 6px; padding-inline: 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.ds-help:hover { background: var(--surface-2); color: var(--ink); }
/* The product's promise: what it never does on its own. Small, and never hidden. */
.ds-promise { margin: 0; padding-block: 6px; padding-inline: var(--gutter); font-size: var(--text-xs); color: var(--ink-2); border-block-end: 1px solid var(--line); background: var(--surface); }
.ds-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }
.ds-shell > main { padding-block: 16px 48px; padding-inline: 24px; min-inline-size: 0; }
.ds-rail { position: sticky; top: var(--header); block-size: calc(100vh - var(--header)); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-block: 12px; padding-inline: 10px; border-inline-end: 1px solid var(--line); background: var(--surface); }
.ds-rail a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 36px; padding-block: 6px; padding-inline: 10px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; text-decoration: none; }
.ds-rail a:hover { background: var(--surface-2); }
.ds-rail a.current, .ds-rail a[aria-current='page'] { background: var(--primary-tint); color: var(--link); font-weight: 700; }
.ds-rail-count { color: var(--ink-2); font-weight: 600; }
.ds-rail a.current .ds-rail-count, .ds-rail a[aria-current='page'] .ds-rail-count { color: var(--link); }
.ds-rail-label { margin-block: 14px 4px; margin-inline: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ds-rail-foot { margin-block-start: auto; padding-block-start: 10px; border-block-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.ds-rail a:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -3px; }
.ds-bottom-bar { display: none; }

/* =====================================================================================
   The shared parts the Veritas lessons asked for (L101, L106, L108, L110, L111).
   ===================================================================================== */
/* L101: where a fact came from, at the point of use. The words on hover, the passage on a click. */
.ds-source { display: inline-flex; align-items: center; gap: 4px; padding-block: 1px; padding-inline: 8px; border: 1px solid var(--primary-line); border-radius: var(--radius-pill); background: var(--primary-tint); color: var(--link); font-size: var(--text-xs); font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ds-source:hover { border-color: var(--link); }
.ds-source-none { border-style: dashed; background: transparent; color: var(--ink-2); cursor: default; }
/* L105: a status in words, with its own reason beside it. */
.ds-status { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.ds-status.tone-good { color: var(--good); }
.ds-status.tone-attention { color: var(--attention); }
.ds-status.tone-risk { color: var(--risk); }
.ds-status.tone-neutral { color: var(--ink-2); }
.ds-status-why { font-weight: 400; color: var(--ink-2); white-space: normal; }
/* L111: a rating says what it was measured against. */
.ds-band { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-block: 2px; padding-inline: 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--text-xs); font-weight: 700; }
.ds-band.tone-good { color: var(--good); background: var(--good-tint); }
.ds-band.tone-attention { color: var(--attention); background: var(--attention-tint); }
.ds-band.tone-risk { color: var(--risk); background: var(--risk-tint); }
.ds-band-basis { font-weight: 500; color: var(--ink); }
/* L106: the records behind a figure, with the arithmetic. */
.ds-records { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds-records li { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ds-records .ds-amount, .ds-sum .ds-amount { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 700; white-space: nowrap; }
.ds-sum { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 6px; padding-block: 8px; padding-inline: 10px; border-block-start: 2px solid var(--line-strong); font-weight: 700; }
.ds-sum.not { color: var(--risk); }
/* L108: what is missing is a row with the action that fills it. */
.ds-missing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 10px; padding-inline: 14px; border: 1px dashed color-mix(in srgb, var(--attention) 45%, var(--line)); border-radius: var(--radius-md); background: var(--attention-tint); color: var(--ink); }
.ds-missing p { margin: 0; }
/* L110: a returned item lands with what to read, fix and compare. */
.t3-returned { padding-block: 12px; padding-inline: 14px; border: 1px solid color-mix(in srgb, var(--attention) 35%, transparent); border-radius: var(--radius); background: var(--attention-tint); }
.t3-returned p { margin: 0 0 8px; }

/* L98: up to four messages stack, newest last; an error stays until it is dismissed, with its way on. */
.ds-toasts { position: fixed; inset-inline: 0; margin-inline: auto; inline-size: fit-content; bottom: 24px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; max-inline-size: calc(100vw - 32px); }
.ds-toasts:empty { display: none; }
.ds-toast { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: var(--shadow); max-inline-size: calc(100vw - 32px); }
.ds-toast[data-tone='risk'] { background: var(--risk-tint); color: var(--ink); border: 1px solid var(--risk); }
.ds-toast[data-lasting='true'] { border-radius: 16px; padding-inline: 18px 10px; }
.ds-toast-text { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.ds-toast-next { color: inherit; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.ds-toast-close { background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; padding-block: 4px; padding-inline: 8px; border-radius: 8px; }

/* =====================================================================================
   The nine templates (3Sry's web/style.css, "D-228: the shell, the three lenses and
   the nine templates", ported as it is). Tokens only, so light and dark both work;
   logical properties only, so a right-to-left page mirrors; at 360 px nothing is
   wider than the screen, and on a phone every target is at least 44 px tall.
   ===================================================================================== */

/* --- the templates' common parts -------------------------------------------------------- */
.tpl { min-inline-size: 0; }
.tpl-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-block: 0 12px; }
.tpl-head-main { flex: 1 1 320px; min-inline-size: 0; }
.tpl-head-aside { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-eyebrow { margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--ink-2); }
.tpl-title { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; }
.tpl-purpose { margin-block: 4px 0; color: var(--ink-2); font-size: var(--text-md); max-inline-size: 75ch; }
.polyaly-line { margin-block: 6px 0; color: var(--ink-2); }
.tpl-tabs { display: flex; gap: 4px 16px; overflow-x: auto; border-block-end: 1px solid var(--line); scrollbar-width: thin; }
.tpl-tab { flex: none; padding-block: 8px; padding-inline: 2px; border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-2); font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tpl-tab.current, .tpl-tab[aria-selected='true'], .tpl-tab[aria-current='page'] { color: var(--ink); border-block-end-color: var(--primary); }
.tpl-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -3px; }
.pill { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--radius-pill); padding-block: 4px; padding-inline: 12px; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.pill[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tone-good .t1-state, .t1-state.tone-good, .t3-tick.ok { color: var(--good); }
.t1-state.tone-attention, .t3-tick.not { color: var(--attention); }
.t1-state.tone-risk { color: var(--risk); }
.t1-state.tone-neutral { color: var(--ink-2); }

/* Every state (the screen contract, check 4). */
.tpl-state { margin-block: 12px; padding-block: 16px; padding-inline: 18px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--surface); color: var(--ink-2); }
.tpl-state p { margin: 0 0 8px; }
.tpl-state p:last-child { margin-block-end: 0; }
.tpl-state .actions { margin-block-start: 8px; }
.tpl-state-failed, .tpl-state-unreachable { border-style: solid; border-color: color-mix(in srgb, var(--risk) 35%, transparent); background: var(--risk-tint); color: var(--ink); }
.tpl-state-held { border-style: solid; border-color: color-mix(in srgb, var(--attention) 35%, transparent); background: var(--attention-tint); color: var(--ink); }
.tpl-state-held .tpl-held-title { font-weight: 650; color: var(--attention); }
.tpl-state-read-only, .tpl-state-practice { border-style: solid; background: var(--surface-2); }
.tpl-reasons { margin: 0; padding-inline-start: 18px; }
.tpl-checked { color: var(--good); font-weight: 600; }
.tpl-skeleton { display: grid; gap: 8px; }
.tpl-skeleton span { display: block; block-size: 12px; border-radius: 6px; background: var(--surface-2); }
.tpl-skeleton span:nth-child(2) { inline-size: 80%; }
.tpl-skeleton span:nth-child(3) { inline-size: 60%; }

/* --- T1 List and detail ------------------------------------------------------------------ */
.t1-body { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; min-block-size: 480px; }
.t1-side { border-inline-end: 1px solid var(--line); min-inline-size: 0; display: flex; flex-direction: column; align-self: stretch; }
.t1-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 12px; padding-inline: 14px; border-block-end: 1px solid var(--line); }
.t1-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.t1-search { flex: 1 1 140px; min-inline-size: 0; padding-block: 6px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.t1-group-toggle { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.t1-sorts { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-block: 6px; padding-inline: 14px; border-block-end: 1px solid var(--line); }
.t1-sort { background: none; border: 0; padding-block: 2px; padding-inline: 0; font-size: var(--text-xs); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.t1-sort[aria-sort='ascending']::after { content: ' ↑'; }
.t1-sort[aria-sort='descending']::after { content: ' ↓'; }
.t1-list { list-style: none; margin: 0; padding: 0; }
.t1-group { padding-block: 10px 4px; padding-inline: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.t1-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; inline-size: 100%; text-align: start; padding-block: 12px; padding-inline: 14px; border: 0; border-block-end: 1px solid var(--line); border-inline-start: 3px solid transparent; border-radius: 0; background: var(--surface); color: var(--ink); font-weight: 400; cursor: pointer; }
.t1-row:hover { background: var(--surface-2); }
.t1-row[aria-current='true'] { background: var(--primary-tint); border-inline-start-color: var(--primary); }
.t1-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: -3px; }
.t1-row-main { display: flex; flex-direction: column; min-inline-size: 0; }
.t1-row-title { font-weight: 700; font-size: var(--text-md); overflow-wrap: anywhere; }
.t1-row-detail { font-size: var(--text-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.t1-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.t1-row-figure { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.t1-state { font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.t1-deferred { border-block-start: 1px solid var(--line); }
.t1-deferred summary { padding-block: 10px; padding-inline: 14px; color: var(--ink-2); font-weight: 650; cursor: pointer; }
.t1-pane { min-inline-size: 0; padding-block: 20px; padding-inline: 28px; background: var(--surface); }
.t1-pane:focus { outline: none; }
.t1-back { display: none; }
.t1-pick { color: var(--ink-2); }
.t1-foot { margin-block-start: auto; padding-block: 10px; padding-inline: 14px; border-block-start: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-sm); display: grid; gap: 4px; }
.t1-foot p { margin: 0; color: var(--ink-2); }
.t1-foot strong { color: var(--ink); }
/* Veritas L103: a row's buttons stay on one line; at narrow widths they wrap as whole buttons, never a word. */
.row-actions, .t1 .actions button, .t1 .actions a.button, .t3-bar button, .t3-bar a.button { white-space: nowrap; }
td.row-actions { width: 1%; }

/* --- T2 Board and Explain ----------------------------------------------------------------- */
.t2-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.t2[data-explaining] .t2-body { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.t2-areas { margin-block-end: 14px; }
.t2-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
.t2-tile { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-inline-size: 0; }
.t2-tile[aria-expanded='true'] { border: 2px solid var(--primary); }
.t2-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.t2-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.t2-tile h3 { margin: 0; font-size: var(--text-md); color: var(--ink); }
.t2-explain { flex: none; font-size: var(--text-xs); padding-block: 2px; padding-inline: 10px; }
.t2-value { margin: 4px 0 0; font-size: var(--text-2xl); font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.t2-caption, .t2-line { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.t2-note { margin: 4px 0 0; color: var(--ink-2); }
.t2-tile.tone-attention { border-color: color-mix(in srgb, var(--attention) 35%, var(--line)); }
.t2-tile.tone-risk { border-color: color-mix(in srgb, var(--risk) 35%, var(--line)); }
.t2-panel { position: sticky; top: calc(var(--header) + 12px); display: flex; flex-direction: column; gap: 10px; max-block-size: calc(100vh - var(--header) - 24px); overflow-y: auto; padding-block: 16px; padding-inline: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-inline-size: 0; }
.t2-panel[hidden] { display: none; }
.t2-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t2-panel-head h2 { margin: 0; font-size: var(--text-lg); }
.t2-close { font-size: 20px; line-height: 1; padding-block: 4px; padding-inline: 10px; }
.t2-tabpanel { min-inline-size: 0; font-size: var(--text-md); }
.t2-tabpanel .card { box-shadow: none; }
.t2-none { color: var(--ink-2); }
.t2-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t2-trail li { padding-block: 10px; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.t2-panel-actions { border-block-start: 1px solid var(--line); padding-block-start: 10px; }

/* --- T3 Decision ---------------------------------------------------------------------------- */
.t3 { display: flex; flex-direction: column; gap: 12px; min-block-size: 100%; }
.t3-meta { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.t3-title { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; }
.t3-title:focus { outline: none; }
.t3-headline { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.t3-figure { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.t3-caption { color: var(--ink-2); font-size: var(--text-md); }
.t3-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.t3-box { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; padding-inline: 12px; border-inline-end: 1px solid var(--line); min-inline-size: 0; }
.t3-box:last-child { border-inline-end: 0; }
.t3-box-label { font-size: var(--text-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.t3-box-value { font-weight: 750; font-variant-numeric: tabular-nums; }
.t3-box-detail { font-size: var(--text-xs); color: var(--ink-2); }
.t3-more summary, .t3-why summary, .t3-evidence summary, .t3-sources summary { cursor: pointer; color: var(--link); font-weight: 650; font-size: var(--text-sm); }
.t3-more .lines { margin-block-start: 8px; }
.t3-provisional { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.t3-provisional a { color: var(--link); }
.t3-provisional .t3-sources { display: inline; }
.t3-provisional .t3-sources[open] { display: block; margin-block-start: 6px; }
.t3-rec { padding-block: 14px; padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.t3-rec-line { margin: 0 0 10px; }
.t3-rec-line.none strong { color: var(--attention); }
.t3-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.t3-option { padding-block: 10px; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.t3-option.recommended { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: var(--good-tint); }
.t3-option-if { margin: 0 0 4px; font-weight: 700; }
.t3-option-then { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.t3-why { margin-block-start: 10px; }
.t3-why ul { margin-block: 6px 0; padding-inline-start: 18px; color: var(--ink-2); font-size: var(--text-sm); }
.t3-next { margin-block-start: 10px; align-items: center; }
.t3-next-says { margin: 0; color: var(--ink-2); font-weight: 650; }
.t3-checks { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.t3-checks > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-block: 10px; padding-inline: 14px; cursor: pointer; list-style: none; }
.t3-checks > summary::-webkit-details-marker { display: none; }
.t3-ticks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.t3-tick { font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.t3-show { color: var(--link); font-weight: 700; font-size: var(--text-sm); }
.t3-checks[open] > summary { border-block-end: 1px solid var(--line); }
.t3-checks > .confirmations { padding-block: 10px; padding-inline: 14px; }
.t3-evidence-body { display: grid; gap: 6px; padding-block-start: 6px; font-size: var(--text-sm); }
.t3-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: auto; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.t3-bar .actions { margin: 0; flex: 1 1 auto; }
.t3-next-item { margin-inline-start: auto; white-space: nowrap; }
.t3-bar .inline-form, .t3-bar .notice-confirm { flex-basis: 100%; }

/* --- T4 Workflow ------------------------------------------------------------------------------ */
.t4-progress { display: flex; gap: 4px; margin-block: 8px; }
.t4-seg { flex: 1 1 0; block-size: 6px; border-radius: 3px; background: var(--line); }
.t4-seg.state-done, .t4-seg.state-skipped { background: var(--good); }
.t4-seg.state-now { background: var(--primary); }
.t4-where { margin: 0 0 8px; color: var(--ink-2); }
.t4-body { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.t4-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.t4-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; padding-block: 6px; padding-inline: 8px; border-radius: var(--radius-sm); color: var(--ink-2); }
.t4-step-n { grid-row: 1 / span 2; inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; background: var(--surface-2); }
.t4-step.state-now { background: var(--primary-tint); color: var(--ink); font-weight: 650; }
.t4-step.state-now .t4-step-n { background: var(--primary); color: var(--on-primary); }
.t4-step.state-done .t4-step-n { background: var(--good-tint); color: var(--good); }
.t4-step-detail { grid-column: 2; color: var(--ink-2); }
.t4-now { min-inline-size: 0; padding-block: 16px; padding-inline: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.t4-bar { margin-block-start: 12px; }
/* A step's name may open it; a step that waits on someone, or was skipped, says so; "All the steps" on a phone. */
.t4-steps-all { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.t4-step a.t4-step-title { color: inherit; text-decoration: none; }
.t4-step a.t4-step-title:hover, .t4-step a.t4-step-title:focus-visible { color: var(--link); text-decoration: underline; }
.t4-step.state-waits .t4-step-n { background: var(--attention-tint); color: var(--attention); }
.t4-step.state-skipped .t4-step-title { text-decoration: line-through; }
.t4-step .actions { grid-column: 2; margin-block-start: 4px; }
.t4-seg.state-waits { background: var(--attention); }
.t4-all { display: none; margin-block-end: 12px; }

/* --- T5 Record page ----------------------------------------------------------------------------- */
.t5-crumbs { margin-block: 0 6px; color: var(--ink-2); }
.t5-crumbs a { color: var(--link); font-weight: 650; text-decoration: none; }
.t5-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.t5-initials { flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-tint); color: var(--link); font-weight: 800; }
.t5-head-main { flex: 1 1 280px; min-inline-size: 0; }
.t5-head-main h1 { margin: 0; font-size: var(--text-xl); overflow-wrap: anywhere; }
.t5-head-actions { flex-wrap: nowrap; }
.t5-more { position: relative; }
.t5-more summary { list-style: none; cursor: pointer; }
.t5-more-list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-inline-size: 200px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
.t5-tabs { margin-block: 14px 16px; }
.t5-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.t5-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; margin: 0; padding-block: 14px; padding-inline: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.t5-facts dt { font-size: var(--text-xs); color: var(--ink-2); }
.t5-facts dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.t5-adds { grid-column: 1 / -1; }

/* --- T6 Settings page, and Hub administration's grey chrome (frame 3b) ------------------------- */
.t6-body { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 24px; align-items: start; }
.t6-nav { display: grid; gap: 14px; }
.t6-group-title { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.t6-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.t6-nav a { display: flex; justify-content: space-between; gap: 8px; padding-block: 6px; padding-inline: 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.t6-nav a.current { background: var(--surface-2); font-weight: 700; }
.t6-badge { font-size: var(--text-xs); color: var(--ink-2); }
.t6-sections { display: grid; gap: 14px; }
.t6-save { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-block-start: 16px; padding-block: 10px; padding-inline: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.t6-save-says { margin-inline-end: auto; color: var(--ink-2); }
.t6-sub a { padding-inline-start: 22px; font-size: var(--text-sm); }
.chrome-hub, body.chrome-hub main { background: var(--hub-bg); }
.chrome-hub button.primary, .chrome-hub a.button.primary { background: var(--hub-primary); border-color: var(--hub-primary); color: var(--on-hub-primary); }

/* --- T7 Focused page -------------------------------------------------------------------------------- */
.t7 { display: grid; place-items: start center; padding-block: 8vh 32px; padding-inline: var(--gutter); }
.t7-card { inline-size: min(100%, 440px); display: grid; gap: 12px; padding-block: 32px; padding-inline: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.t7-card h1 { margin: 0; font-size: var(--text-xl); }
.t7-body { text-align: start; }
.t7-actions .primary, .t7-actions a.button { inline-size: 100%; justify-content: center; }
.t7-help { text-align: start; }

/* --- T8 Conversation ------------------------------------------------------------------------------- */
.t8-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; min-block-size: 480px; }
.t8-list { border-inline-end: 1px solid var(--line); overflow-y: auto; min-inline-size: 0; }
.t8-thread { display: flex; flex-direction: column; min-inline-size: 0; }
.t8-log { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; overflow-y: auto; }
.t8-msg { align-self: flex-start; max-inline-size: min(70ch, 85%); padding-block: 8px; padding-inline: 12px; border-radius: var(--radius-md); background: var(--surface-2); }
.t8-msg.mine { align-self: flex-end; background: var(--primary-tint); }
.t8-who, .t8-text { margin: 0; }
.t8-who { color: var(--ink-2); }
.t8-composer { position: sticky; bottom: 0; padding-block: 10px; padding-inline: 12px; border-block-start: 1px solid var(--line); background: var(--surface); }

/* --- T9 Map ---------------------------------------------------------------------------------------- */
.t9-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; padding: 0; color: var(--ink-2); }
.t9-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.t9-body:has(.t9-detail) { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
.t9-canvas { overflow: auto; max-inline-size: 100%; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px; }
.t9-detail { min-inline-size: 0; }


/* --- widths: 1280 is the frames' laptop; under 1100 a T1 takes the phone pattern; 768 and 360 are the phone's -------- */
@media (max-width: 1099px) {
  .t1-body { grid-template-columns: minmax(0, 1fr); }
  .t1-side { border-inline-end: 0; }
  .t1-pane { display: none; }
  .t1[data-open] .t1-side { display: none; }
  .t1[data-open] .t1-pane { display: block; padding-block: 12px 16px; padding-inline: 16px; }
  .t1[data-open] .t1-back { display: inline-flex; margin-block-end: 8px; padding-inline: 0; color: var(--link); font-weight: 700; }
  .t2[data-explaining] .t2-body { grid-template-columns: minmax(0, 1fr); }
  .t9-body:has(.t9-detail) { grid-template-columns: minmax(0, 1fr); }
  .t6-body { grid-template-columns: minmax(0, 1fr); }
  .t8-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  :root { --header: 52px; }
  /* The kit's shell on a phone: no rail, the header's search folded away, and the bar at the foot. */
  .ds-shell { display: block; }
  .ds-shell > main { padding-block: 12px 88px; padding-inline: var(--gutter); }
  .ds-rail { display: none; }
  .ds-search { display: none; }
  .ds-business { border: 0; padding-inline: 4px; max-inline-size: 16ch; }
  .ds-bottom-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; inset-inline: 0; bottom: 0; z-index: 30; min-block-size: 60px; border-block-start: 1px solid var(--line); background: var(--surface); padding-block-end: env(safe-area-inset-bottom, 0); }
  .ds-bottom-bar[hidden] { display: none; }
  .ds-bottom-bar a, .ds-bottom-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: var(--touch); border: 0; background: none; border-radius: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
  .ds-bottom-bar [aria-current='page'] { color: var(--link); font-weight: 800; }
  /* Every target 44 px tall on a phone (check 6). */
  main button, main a.button, main select, main input:not([type='checkbox']):not([type='radio']), main summary, .pill, .tpl-tab, .t1-row, .account, .help-link, .ds-help, .ds-rail a { min-block-size: var(--touch); }
  .t1-body { border-radius: 0; border-inline: 0; margin-inline: calc(var(--gutter) * -1); }
  .t1-row { padding-block: 14px; padding-inline: var(--gutter); }
  /* T2: the Explain panel is a bottom sheet. */
  .t2-panel { position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: 60; max-block-size: 82vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25); }
  .t2-grid { grid-template-columns: minmax(0, 1fr); }
  /* T3: the primary fills the bar, the others two to a row, each on one line (Q-1118-3, Veritas L103).
     One whose words don't fit half the bar takes a row of its own; a word never wraps. */
  .t3-bar { position: sticky; bottom: 60px; background: var(--surface); padding-block: 10px; z-index: 5; }
  .t3-bar .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .t3-bar .actions > * { flex: 1 1 calc(50% - 4px); }
  .t3-bar .actions > :first-child { flex-basis: 100%; }
  .t3-bar .actions button, .t3-bar .actions a.button { white-space: nowrap; justify-content: center; }
  .t3-figure { font-size: var(--text-2xl); }
  .t3-boxes { grid-template-columns: minmax(0, 1fr); }
  .t3-box { border-inline-end: 0; border-block-end: 1px solid var(--line); flex-direction: row; justify-content: space-between; align-items: baseline; }
  /* T4: one step per screen. */
  .t4-body { grid-template-columns: minmax(0, 1fr); }
  .t4-steps { display: none; }
  .t4-bar { position: sticky; bottom: 60px; background: var(--bg); padding-block: 8px; }
  .t4-all { display: block; }
  .t5-head-actions { flex-wrap: wrap; inline-size: 100%; }
  .t5-head-actions > .primary, .t5-head-actions > a.button.primary { flex: 1 1 auto; justify-content: center; }
  .t6-save { bottom: 60px; }
  .t7 { padding-block: 24px; }
  .t7-card { padding-block: 24px; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .t2-panel, .t1-pane { transition: none !important; } }