/* XENTHK analyst — design tokens and base styles (docs/design/DESIGN.md, approved 15 Oct 2026), carried over unchanged
   from the approved prototype stylesheet (apps/xenthk-analyst/design/tools/xenthk.src.css lines 1-171).
   Light and dark follow the system (color-scheme + light-dark()); data-theme="light|dark" on <html> forces one. */

/* ---------- Brand face: the wordmark only, self-hosted from this origin (apps/xenthk-local-workspace/public/fonts
   through the /lib/ alias; Vite emits it as an asset of the build). No other face is downloaded. ---------- */
@font-face {
  font-family: "Gaoel";
  src: url("/ui/gaoel.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Type: the platform's own UI face (SF Pro on Apple, Segoe UI on Windows, Roboto on Android/ChromeOS) */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --font-figure: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-brand: "Gaoel", var(--font-ui);

  /* Text styles, compact size class: Apple's iOS/iPadOS text styles at the default (Large) size.
     Tracking follows the SF Pro tracking table in the HIG (Typography). */
  --t-large: 2.125rem;   --lh-large: 2.5625rem;  --tr-large: 0.012em;
  --t-title1: 1.75rem;   --lh-title1: 2.125rem;  --tr-title1: 0.014em;
  --t-title2: 1.375rem;  --lh-title2: 1.75rem;   --tr-title2: -0.012em;
  --t-title3: 1.25rem;   --lh-title3: 1.5625rem; --tr-title3: -0.023em;
  --t-headline: 1.0625rem; --lh-headline: 1.375rem;
  --t-body: 1.0625rem;   --lh-body: 1.375rem;    --tr-body: -0.026em;
  --t-callout: 1rem;     --lh-callout: 1.3125rem; --tr-callout: -0.02em;
  --t-subhead: 0.9375rem; --lh-subhead: 1.25rem;  --tr-subhead: -0.016em;
  --t-footnote: 0.8125rem; --lh-footnote: 1.125rem; --tr-footnote: -0.006em;
  --t-caption1: 0.75rem; --lh-caption1: 1rem;
  --t-caption2: 0.6875rem; --lh-caption2: 0.8125rem; --tr-caption2: 0.006em;
  --t-figure: 2.375rem;

  /* Space (4-point grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --margin: 16px;

  /* Shape: concentric radii (inner = outer - padding) and capsules for controls */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Control heights. Touch: every hit area is at least 44 x 44 (HIG). A small control keeps a small
     visual but its box stays 44 (transparent border or radial fill). Fine pointer: 36 / 30. */
  --ctl: 44px; --ctl-sm: 44px; --row: 44px;

  /* Columns (regular width) */
  --w-sidebar: 280px; --w-content: 380px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 100ms; --d-fast: 160ms; --d-base: 240ms; --d-sheet: 380ms;

  /* Colour roles (light, dark). Contrast table in DESIGN.md. */
  --bg:          light-dark(#F4F5F7, #111214);
  --bg-sidebar:  light-dark(#ECEEF1, #17181B);
  --surface:     light-dark(#FFFFFF, #1C1D20);
  --surface-2:   light-dark(#F6F7F9, #232428);
  --elevated:    light-dark(#FFFFFF, #2A2B2F);
  --fill:        light-dark(rgb(118 122 132 / 0.14), rgb(140 144 156 / 0.24));
  --fill-2:      light-dark(rgb(118 122 132 / 0.08), rgb(140 144 156 / 0.14));
  --hover:       light-dark(rgb(20 24 32 / 0.05), rgb(255 255 255 / 0.06));
  --separator:   light-dark(rgb(40 44 52 / 0.14), rgb(255 255 255 / 0.10));
  --line-strong: light-dark(#858B95, #6F747E);
  --text:        light-dark(#15171C, #F2F3F5);
  --text-2:      light-dark(#4F5662, #B4B9C2);
  --text-3:      light-dark(#5C636E, #969CA6);
  /* Data strand, cyan: links, selection, focus, progress, data. Never the primary action. */
  --tint:        light-dark(#0074A6, #35D0FF);
  --tint-strong: light-dark(#005F88, #7FE0FF);
  --tint-soft:   light-dark(#E3F0F7, rgb(53 208 255 / 0.16));
  --on-tint:     light-dark(#FFFFFF, #00222E);
  /* Mathematics strand, yellow: the one primary action per toolbar or sheet, and Send (the site's One Press Rule). */
  --action:      #FFD23A;
  --action-hover: #FFDD66;
  --action-press: #F0C21C;
  --on-action:   #231C00;
  /* Gold: the checked-number underline only. Kept apart from the yellow action (DESIGN.md section 6). */
  --gold:        light-dark(#A87A00, #B8860B);
  --success:     light-dark(#177A34, #3DD47A);
  --success-soft: light-dark(#E6F4EA, rgb(61 212 122 / 0.14));
  --warning:     light-dark(#9A5B00, #FFB547);
  --warning-soft: light-dark(#FDF1DE, rgb(255 181 71 / 0.14));
  --danger:      light-dark(#C42B2B, #FF6B6B);
  --danger-soft: light-dark(#FBE7E7, rgb(255 107 107 / 0.14));
  --scrim:       light-dark(rgb(16 18 22 / 0.28), rgb(0 0 0 / 0.56));
  --seg-thumb:   light-dark(#FFFFFF, #55575D);
  --glass:       light-dark(rgb(255 255 255 / 0.72), rgb(36 37 41 / 0.72));
  --glass-edge:  light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.12));
  --focus: var(--tint);

  /* Brand mark strands (the logo; the yellow strand is deepened in light mode so the mark holds on light grounds) */
  --strand-data: light-dark(#0A9BD1, #35D0FF);
  --strand-math: light-dark(#E8B400, #FFD23A);

  /* Charts: the owner's 5 Oct Metabase accents. Dark = the chosen values; light = the same hue one step deeper (3:1 on white). */
  --viz-1: light-dark(#2F86D9, #509EE3);
  --viz-2: light-dark(#4F8F17, #88BF4D);
  --viz-3: light-dark(#8E63C4, #A989C5);
  --viz-4: light-dark(#E0525E, #EF8C8C);
  --viz-5: light-dark(#B07F00, #F9D45C);
  --viz-6: light-dark(#D9651A, #F2A86F);
  --viz-7: light-dark(#178F90, #98D9D9);
  --viz-8: light-dark(#5B5CC4, #7172AD);
  --viz-grid: light-dark(rgb(40 44 52 / 0.10), rgb(255 255 255 / 0.08));
  --viz-axis: var(--text-3);

  /* Elevation */
  --shadow-float: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4)), 0 10px 30px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
  --shadow-sheet: 0 2px 6px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4)), 0 24px 64px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6));
  --shadow-thumb: 0 1px 3px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.06);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Regular size class: Apple's text styles at the Medium size (one step below the default), for pointer-dense split views */
@media (min-width: 700px) {
  :root {
    --t-large: 2.0625rem; --lh-large: 2.5rem;
    --t-title1: 1.6875rem; --lh-title1: 2.0625rem;
    --t-title2: 1.3125rem; --lh-title2: 1.625rem;
    --t-title3: 1.1875rem; --lh-title3: 1.5rem;
    --t-headline: 1rem; --lh-headline: 1.3125rem;
    --t-body: 1rem; --lh-body: 1.3125rem; --tr-body: -0.02em;
    --t-callout: 0.9375rem; --lh-callout: 1.25rem; --tr-callout: -0.016em;
    --t-subhead: 0.875rem; --lh-subhead: 1.1875rem; --tr-subhead: -0.011em;
    --t-footnote: 0.75rem; --lh-footnote: 1rem; --tr-footnote: 0em;
    --t-caption1: 0.6875rem; --lh-caption1: 0.8125rem;
    --margin: 24px;
    --w-content: 360px;
  }
}
@media (min-width: 1200px) { :root { --margin: 28px; --w-content: 380px; } }
@media (pointer: fine) { :root { --ctl: 36px; --ctl-sm: 30px; --row: 36px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--t-body) / var(--lh-body) var(--font-ui); letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  /* Owner rule: tabular figures for every number. Set once here, so every figure in a sentence, row, table, chart
     label, count, time or percentage inherits it; the number classes below repeat it for elements outside body text. */
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--tint); text-decoration: none; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.i.s { width: 16px; height: 16px; }
svg.i.l { width: 24px; height: 24px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A field shows its focus ring on its box (the input inside draws none) */
.input:has(input:focus-visible, textarea:focus-visible), .composer:has(textarea:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Inside clipped groups the ring is drawn inside the row, so the group's rounded edge cannot cut it */
.group :focus-visible, .row-hit:focus-visible { outline-offset: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 699px) { .sr-compact { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.num, td.n, th, td, .figure, .tabular, .kbd, .cell-value, .meta, .t, svg text { font-variant-numeric: tabular-nums lining-nums; }
.code { font-family: var(--font-mono); font-size: max(11px, 0.92em); letter-spacing: 0; }

/* ---------- Chart library colours ----------
   The chart adapter (analyst-visual.js, vizTheme) reads these properties with getComputedStyle().getPropertyValue().
   Registered as <color> (CSS Properties and Values API, https://www.w3.org/TR/css-properties-values-api-1/) so they
   compute to rgb() values instead of the unresolved light-dark() text. A registered colour inherits as its resolved
   value, so report paper ([data-paper], light in both themes) declares them again and gets the light values.
   Series: the Metabase accents in order; ramp 2 to 5: one measure by value class, blue (lowest), violet, red, orange
   (highest) (DESIGN.md section 6); ramp 1 and low: the quiet ground. */
@property --viz-series-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-6 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-7 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-series-8 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-ramp-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-ramp-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-ramp-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-ramp-4 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-ramp-5 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-low { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-other { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-grid { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-text-primary { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --viz-text-secondary { syntax: "<color>"; inherits: true; initial-value: transparent; }
:root, [data-paper] {
  --viz-series-1: var(--viz-1); --viz-series-2: var(--viz-2); --viz-series-3: var(--viz-3); --viz-series-4: var(--viz-4);
  --viz-series-5: var(--viz-5); --viz-series-6: var(--viz-6); --viz-series-7: var(--viz-7); --viz-series-8: var(--viz-8);
  --viz-ramp-1: var(--surface-2); --viz-ramp-2: var(--viz-1); --viz-ramp-3: var(--viz-3); --viz-ramp-4: var(--viz-4); --viz-ramp-5: var(--viz-6);
  --viz-low: var(--surface-2); --viz-other: var(--text-3);
  --viz-grid: light-dark(rgb(40 44 52 / 0.10), rgb(255 255 255 / 0.08));
  --viz-text-primary: var(--text); --viz-text-secondary: var(--text-3);
}

/* XENTHK analyst — component styles: the approved prototype stylesheet (design/tools/xenthk.src.css lines 172-776)
   unchanged, then, at the end, the interactive layer the static prototypes could not show (added task by task). */
/* Text styles as classes */
.t-large { font-size: var(--t-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: var(--tr-large); }
.t-title1 { font-size: var(--t-title1); line-height: var(--lh-title1); font-weight: 700; letter-spacing: var(--tr-title1); }
.t-title2 { font-size: var(--t-title2); line-height: var(--lh-title2); font-weight: 700; letter-spacing: var(--tr-title2); }
.t-title3 { font-size: var(--t-title3); line-height: var(--lh-title3); font-weight: 600; letter-spacing: var(--tr-title3); }
.t-headline { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 600; letter-spacing: var(--tr-body); }
.t-callout { font-size: var(--t-callout); line-height: var(--lh-callout); letter-spacing: var(--tr-callout); }
.t-subhead { font-size: var(--t-subhead); line-height: var(--lh-subhead); letter-spacing: var(--tr-subhead); }
.t-footnote { font-size: var(--t-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); }
.t-caption { font-size: var(--t-caption1); line-height: var(--lh-caption1); letter-spacing: 0; }
.t-caption2 { font-size: var(--t-caption2); line-height: var(--lh-caption2); letter-spacing: var(--tr-caption2); }
.c2 { color: var(--text-2); } .c3 { color: var(--text-3); } .ct { color: var(--tint-strong); }
.cs { color: var(--success); } .cw { color: var(--warning); } .cd { color: var(--danger); }
.w6 { font-weight: 600; } .w5 { font-weight: 500; }
.stack > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.row-flex { display: flex; align-items: center; gap: var(--sp-2); }
.row-flex.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.measure { max-width: 64ch; }

/* ---------- App frame: split view (regular) / one stack (compact) ---------- */
.app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.col { display: none; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.col > .scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.col-content { background: var(--surface); }
.col-detail { background: var(--bg); }
.col-sidebar { background: var(--bg-sidebar); }

/* Compact: one column shows, chosen by the page (data-compact) */
[data-compact="sidebar"] .col-sidebar,
[data-compact="content"] .col-content,
[data-compact="detail"] .col-detail { display: flex; }

@media (max-width: 699px) {
  .regular-only, .sidebar-toggle-1024 { display: none !important; }
  .has-tabbar > .scroll { padding-bottom: 96px; }
}
@media (min-width: 700px) {
  .app { grid-template-columns: var(--w-content) minmax(0, 1fr); }
  .col-content, .col-detail { display: flex; }
  .col-sidebar { display: none; }
  .col-content { border-right: 1px solid var(--separator); }
  .compact-only { display: none !important; }
}
@media (min-width: 1200px) {
  .app { grid-template-columns: var(--w-sidebar) var(--w-content) minmax(0, 1fr); }
  .col-sidebar { display: flex; }
  .sidebar-toggle-1024 { display: none !important; }
}

/* ---------- Bars (column toolbars / compact navigation bar) ---------- */
.bar {
  position: sticky; top: 0; z-index: 5; flex: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: color-mix(in srgb, var(--bar-bg, var(--surface)) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}
.col-detail .bar { --bar-bg: var(--bg); }
.col-sidebar .bar { --bar-bg: var(--bg-sidebar); border-bottom: 0; }
.bar-lead, .bar-actions { display: flex; align-items: center; gap: var(--sp-1); }
.bar-title { min-width: 0; }
.bar-title h1, .bar-title h2 { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title p { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) {
  .bar { padding-top: calc(var(--sp-2) + env(safe-area-inset-top)); }
  .bar:not(.large) .bar-title { text-align: center; }
  /* Compact root screens: large title under the bar row */
  .bar.large { grid-template-areas: "lead . actions" "title title title"; grid-template-columns: auto 1fr auto; row-gap: var(--sp-1); }
  .bar.large .bar-lead { grid-area: lead; } .bar.large .bar-actions { grid-area: actions; }
  .bar.large .bar-title { grid-area: title; padding: 0 var(--sp-1) var(--sp-1); }
  .bar.large .bar-title h1 { font-size: var(--t-large); line-height: var(--lh-large); font-weight: 700; letter-spacing: var(--tr-large); white-space: normal; }
  .bar.large .bar-title p { white-space: normal; }
}

/* Toolbar buttons: plain icons, grouped in a glass capsule (iPadOS 26 toolbar) */
.tb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--ctl); height: var(--ctl); padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--tint); font-weight: 500; font-size: var(--t-body); transition: background-color var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out); }
.tb.icon { padding: 0; width: var(--ctl); }
.tb:active { transform: scale(0.96); background: var(--fill); }
.tb-group { display: inline-flex; align-items: center; padding: 2px; border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--separator), 0 1px 2px rgb(0 0 0 / 0.04); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.kbd { display: inline-flex; gap: 1px; color: var(--text-3); font-size: var(--t-footnote); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .tb:hover, .tb.is-hover { background: var(--hover); }
}

/* ---------- Sidebar ---------- */
.sidebar-inner { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0 var(--sp-3) var(--sp-4); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; padding: 0 var(--sp-1); }
.brand .wordmark { font-family: var(--font-brand); font-size: 19px; line-height: 1; letter-spacing: 0.06em; font-weight: 400; }
.mark path { fill: none; stroke-linecap: round; }
.mark .m-math { stroke: var(--strand-math); stroke-width: 2.6; }
.mark .m-data { stroke: var(--strand-data); stroke-width: 2.8; stroke-linecap: butt; stroke-dasharray: 3.4 1.7 1.2 1.7; }
.mark .m-rung { stroke: var(--line-strong); stroke-width: 1.4; }
.side-group h2 { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1) var(--sp-2); font-size: var(--t-footnote); line-height: var(--lh-footnote); font-weight: 600; color: var(--text-3); }
.side-item { display: flex; align-items: center; gap: 10px; min-height: var(--row); padding: 0 var(--sp-2) 0 10px; border-radius: var(--r-sm); color: var(--text); font-size: var(--t-body); text-decoration: none; transition: background-color var(--d-fast) var(--ease-out); }
.side-item .i { color: var(--tint); }
.side-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item .meta { font-size: var(--t-footnote); color: var(--text-3); font-variant-numeric: tabular-nums; }
.side-item[aria-current="page"] { background: var(--tint); color: var(--on-tint); }
.side-item[aria-current="page"] .i, .side-item[aria-current="page"] .meta { color: var(--on-tint); }
.side-item.sub { padding-left: 38px; font-size: var(--t-subhead); min-height: calc(var(--row) - 4px); }
.side-item.drop-target { box-shadow: inset 0 0 0 2px var(--tint); background: var(--tint-soft); }
@media (hover: hover) and (pointer: fine) {
  .side-item:not([aria-current]):hover, .side-item.is-hover { background: var(--hover); }
}
.side-foot { margin-top: auto; padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.sidebar-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sidebar-pane > .scroll { flex: 1; min-height: 0; overflow: auto; }
@media (min-width: 1200px) {
  /* The sidebar floats as a pane inset from the window edge (iPadOS 26) */
  .col-sidebar { background: var(--bg); padding: 8px 0 8px 8px; }
  .col-sidebar .sidebar-pane { border-radius: var(--r-lg); background: var(--bg-sidebar); box-shadow: inset 0 0 0 1px var(--separator); overflow: hidden; }
}

/* Status pill (model readiness) */
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: max(32px, var(--ctl-sm)); padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--fill-2); font-size: var(--t-footnote); color: var(--text-2); font-weight: 500; border: 0; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.ok { background: var(--success); } .dot.busy { background: var(--tint); } .dot.warn { background: var(--warning); } .dot.err { background: var(--danger); }

/* ---------- Compact tab bar (floating glass capsule) ---------- */
.tabbar { position: absolute; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--glass-edge), var(--shadow-float); } /* 3:1 edge, SC 1.4.11 */
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: var(--r-pill); color: var(--text-2); font-size: var(--t-caption2); line-height: var(--lh-caption2); font-weight: 600; letter-spacing: 0; text-decoration: none; }
.tab .i { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--tint); background: var(--fill-2); }

/* ---------- Buttons (capsules) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl); padding: 0 18px; border: 0; border-radius: var(--r-pill); font-size: var(--t-body); font-weight: 600; letter-spacing: var(--tr-body); white-space: nowrap; text-decoration: none; transition: background-color var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out), opacity var(--d-fast); }
.btn:active { transform: scale(0.97); }
/* The one primary action: yellow fill, near-black label (11.74:1 in both themes). A hairline gives its edge on white. */
.btn.filled { background: var(--action); color: var(--on-action); box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16); }
.btn.filled:active { background: var(--action-press); }
.btn.tinted { background: var(--tint-soft); color: var(--tint-strong); }
.btn.gray { background: var(--fill); color: var(--text); }
.btn.plain { background: transparent; color: var(--tint); padding: 0 8px; }
.btn.destructive { background: var(--danger-soft); color: light-dark(var(--danger), #FF8F8F); }
.btn.large { min-height: 50px; padding: 0 24px; }
.btn.small { min-height: var(--ctl-sm); padding: 0 14px; font-size: var(--t-subhead); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.filled:hover, .btn.filled.is-hover { background: var(--action-hover); }
  .btn.tinted:hover, .btn.gray:hover, .btn.plain:hover { background: color-mix(in srgb, var(--fill) 100%, var(--hover)); }
}
.icon-btn { display: inline-grid; place-items: center; width: var(--ctl); height: var(--ctl); border: 0; border-radius: 50%; background: var(--fill); color: var(--text-2); flex: none; }
/* Small round button: 30 px visual circle, full 44 px hit area on touch (36 with a fine pointer) */
.icon-btn.sm { width: var(--ctl); height: var(--ctl); margin: calc((30px - var(--ctl)) / 2); background: radial-gradient(circle 15px at center, var(--fill) 96%, transparent 100%); }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-size: var(--t-subhead); font-weight: 600; color: var(--text); }
/* A field label is a target too (it focuses its field): its box reaches 44 px with padding that negative margins
   take back, so the layout does not move. Its lower edge overlaps only its own field. */
.field > label { padding-block: 12px; margin-block: -12px; }
.input { display: flex; align-items: center; gap: 8px; min-height: var(--ctl); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: max(16px, var(--t-body)); }
.input input { flex: 1; min-width: 0; align-self: stretch; min-height: var(--ctl); margin-block: -1px; border: 0; background: transparent; outline: none; padding: 0; font-size: inherit; }
.input input::placeholder { color: var(--text-3); }
.input.quiet { background: var(--fill-2); } /* keeps the 1px --line-strong border of .input: the field edge is 3:1 (WCAG 2.2 SC 1.4.11) */
.col-detail .input.quiet { background: var(--surface); }
.input.error { border-color: var(--danger); }
.input.mono input, .input.mono textarea { font-family: var(--font-mono); font-size: max(16px, 0.875rem); letter-spacing: 0; }
.input.area { align-items: stretch; padding: 0 12px; }
.input.area textarea { flex: 1; min-width: 0; min-height: 96px; border: 0; background: transparent; resize: vertical; padding: 11px 0; outline: none; line-height: 1.45; }
.input textarea::placeholder { color: var(--text-3); }
.input .inline-btn { align-self: stretch; min-width: 44px; min-height: var(--ctl); margin: -1px -8px -1px 0; border: 0; background: none; color: var(--tint); font-weight: 600; font-size: var(--t-subhead); padding: 0 8px; }
.help { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); }
.help.error { color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.help.ok { color: var(--success); display: flex; gap: 6px; align-items: flex-start; }

/* Segmented control */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; border-radius: var(--r-pill); background: var(--fill); }
.seg.block { display: grid; width: 100%; }
.seg button { position: relative; isolation: isolate; min-height: var(--ctl-sm); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); font-size: var(--t-subhead); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* The thumb is drawn 2 px inside the segment, so each segment keeps the full hit height */
.seg [aria-pressed="true"] { font-weight: 600; }
.seg [aria-pressed="true"]::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: var(--seg-thumb); box-shadow: var(--shadow-thumb); }
@media (max-width: 699px) { .seg.block button { white-space: normal; padding: 6px 8px; line-height: 1.2; } }

/* Switch and selection */
.switch { position: relative; box-sizing: content-box; width: 51px; height: 31px; padding: 0; border: 7px solid transparent; border-inline-width: 0; margin-block: -7px; background-clip: padding-box; flex: none; border-radius: var(--r-pill); background: var(--fill); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--d-base) var(--ease-out); }
.switch[aria-checked="true"] { box-shadow: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-thumb); transition: transform var(--d-base) var(--ease-out); }
.switch.on { background: var(--success); }
.switch.on::after { transform: translateX(20px); }
.check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; }
.check.on { background: var(--tint); border-color: var(--tint); color: var(--on-tint); }
.check .i { width: 14px; height: 14px; stroke-width: 2.6; }
.check.off-disabled { border-style: dashed; }

/* ---------- Inset grouped lists ---------- */
.group { border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.col-content .group { background: var(--surface-2); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-4) 6px; font-size: var(--t-footnote); line-height: var(--lh-footnote); font-weight: 600; color: var(--text-3); }
.group-foot { padding: 6px var(--sp-4) 0; font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); }
.cell { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row); padding: 10px var(--sp-4); color: var(--text); text-decoration: none; }
.cell + .cell::before, .swipe + .cell::before, .swipe + .swipe > .cell::before, .cell + .swipe > .cell::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, var(--sp-4)); border-top: 1px solid var(--separator); }
.cell.with-tile { --inset: 60px; }
.cell .cell-main { flex: 1; min-width: 0; }
.cell .cell-title { font-size: var(--t-body); line-height: var(--lh-body); }
.cell .cell-sub { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); margin-top: 1px; }
.cell .cell-value { color: var(--text-3); font-size: var(--t-body); white-space: nowrap; }
.cell .chev { color: var(--text-3); opacity: 0.7; }
/* Selectable rows: the whole row is the hit area; the round mark or the trailing tick is decoration */
.cell[role="radio"] { cursor: pointer; }
/* A tickable row: one invisible button covers the row (the target); controls inside the row sit above it */
.row-hit { position: absolute; inset: 0; z-index: 0; border: 0; padding: 0; background: transparent; border-radius: inherit; cursor: pointer; }
.row-hit[disabled] { cursor: default; }
.cell:has(> .row-hit) :is(button:not(.row-hit), a, input, [role="radio"], [tabindex]) { position: relative; z-index: 1; }
.cell[role="radio"] > .i { color: var(--tint); width: 20px; height: 20px; stroke-width: 2.4; }
.cell.selected { background: var(--tint-soft); }
.cell.selected .cell-title { color: var(--tint-strong); font-weight: 600; }
.cell.selected .cell-sub { color: var(--text-2); }
/* Not-available rows keep readable text (4.5:1); the dashed mark and the reason say they are not available */
.cell.disabled .cell-title { color: var(--text-2); }
.cell.top { align-items: flex-start; }
.cell.top.wrap { flex-wrap: wrap; }
.cell.stacked { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.cell-main.minw { min-width: 180px; }
@media (hover: hover) and (pointer: fine) {
  a.cell:hover, .cell.is-hover { background: var(--hover); }
}
.tile { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #FFFFFF; }
.tile .i { width: 19px; height: 19px; stroke-width: 1.9; }
.tile.blue { background: #1F6FEB; } .tile.green { background: #2B9A3E; } .tile.orange { background: #DB5F00; }
.tile.violet { background: #7C4DEB; } .tile.indigo { background: #4F46E5; } .tile.gray { background: #6B7280; }
.tile.teal { background: #0A8487; } .tile.red { background: #D93A3F; } .tile.ink { background: var(--text); color: var(--surface); }
.tile.lg { width: 44px; height: 44px; border-radius: 11px; }
.tile.lg .i { width: 24px; height: 24px; }
/* initials in place of a photo (accounts have no picture) and an address that may break anywhere (design/tools/account.src.css) */
.tile.initials { font-size: var(--t-subhead); font-weight: 600; letter-spacing: 0; }
.break { overflow-wrap: anywhere; }

/* ---------- Cards ---------- */
.card { border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-5); }
.card.tight { padding: var(--sp-4); }
.card.inset { background: var(--surface-2); }
.card-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head h2 { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 600; }
.card-head p { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); margin-top: 2px; }
.card-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--separator); font-size: var(--t-footnote); color: var(--text-3); }

/* KPI card: the figure is the link to its evidence; the gold strand marks a number MATH computed and checked */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.kpi { container-type: inline-size; border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.kpi .kpi-name { font-size: var(--t-subhead); line-height: var(--lh-subhead); color: var(--text-2); font-weight: 500; }
.figure { font-family: var(--font-figure); font-size: var(--t-figure); line-height: 1.12; font-weight: 700; letter-spacing: 0; color: var(--text); }
.kpi .figure { font-size: min(var(--t-figure), 19cqi); }
a.checked, .checked { color: inherit; text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.28em; text-decoration-skip-ink: none; }
/* a short figure ("92") still gives a 44 px target (Apple HIG hit targets; the audit's touch rule) */
.figure .checked { text-decoration-thickness: 3px; text-underline-offset: 0.16em; display: inline-block; padding: 8px 4px; margin: -8px -4px; min-width: 44px; }
/* A checked number in running text stays inline (WCAG 2.5.8 inline exception); its evidence row is the larger target. */
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-footnote); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.delta .i { width: 14px; height: 14px; stroke-width: 2.2; }
.kpi .kpi-note { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-3); }
@media (max-width: 699px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .kpis .kpi:not(:first-child) .figure { font-size: min(1.75rem, 19cqi); }
}

/* Chart card */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font-ui); fill: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart .lab { fill: var(--text); font-size: 13px; font-weight: 500; }
.chart .val { fill: var(--text-2); font-size: 13px; font-weight: 600; }
.chart .grid line { stroke: var(--viz-grid); }
/* Chart colours: one class per palette slot. Bars fill, lines and points stroke, gradient stops colour. */
.v1 { --v: var(--viz-1); } .v2 { --v: var(--viz-2); } .v3 { --v: var(--viz-3); } .v4 { --v: var(--viz-4); }
.v5 { --v: var(--viz-5); } .v6 { --v: var(--viz-6); } .v7 { --v: var(--viz-7); } .v8 { --v: var(--viz-8); }
rect.vz { fill: var(--v); } stop.vz { stop-color: var(--v); } circle.vz, polyline.vz { stroke: var(--v); fill: none; }
circle.vz.pt { fill: var(--surface); stroke-width: 3; } stop.fade-0 { stop-opacity: 0; } stop.fade-32 { stop-opacity: 0.32; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: var(--v); flex: none; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); }
.swatches > span { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-footnote); color: var(--text-2); }
.chart-alt { display: none; }
/* Owner decision (30 Sep): no chart at compact width; the same values show as a table */
@media (max-width: 699px) {
  .chart-wrap .chart { display: none; }
  .chart-wrap .chart-alt { display: table; }
}

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
/* A table wider than its card scrolls inside it; the edge where more columns wait fades out (scroll-driven, no script).
   Where the timeline is not supported the table still scrolls, without the fade. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes edge-fade { 0% { --fade-l: 0px; --fade-r: 36px; } 8% { --fade-l: 36px; } 92% { --fade-r: 36px; } 100% { --fade-l: 36px; --fade-r: 0px; } }
@supports (animation-timeline: scroll()) {
  .table-wrap { animation: edge-fade linear both; animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
}
.card.inset .table-wrap, .card.tight .table-wrap { margin: 0; padding: 0; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-subhead); line-height: var(--lh-subhead); }
table.t th { text-align: left; font-weight: 600; color: var(--text-2); font-size: var(--t-footnote); padding: 8px 12px; background: var(--surface-2); white-space: nowrap; }
.card.inset table.t th { background: var(--fill-2); }
table.t th:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); } table.t th:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
table.t td { padding: 9px 12px; border-bottom: 1px solid var(--separator); white-space: nowrap; }
table.t th.n, table.t td.n { text-align: right; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.id { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-2); letter-spacing: 0; }
.fold { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--separator); }

/* Field token: a name that comes from the data (not prose) */
.token { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-xs); background: var(--fill); color: var(--text); font-size: max(11px, 0.875em); font-weight: 500; white-space: nowrap; letter-spacing: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--fill-2); color: var(--text-2); font-size: var(--t-footnote); font-weight: 500; white-space: nowrap; }
.tag.ok { background: var(--success-soft); color: var(--success); }
.tag.warn { background: var(--warning-soft); color: var(--warning); }
.tag.err { background: var(--danger-soft); color: var(--danger); }
.tag.tint { background: var(--tint-soft); color: var(--tint-strong); }
.values { display: flex; flex-wrap: wrap; gap: 6px; }
.method-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 6px; border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: var(--success-soft); color: var(--success); flex: none; }
.method-badge.no { background: var(--fill); color: var(--text-2); }
.confirm-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: 10px 12px; border-radius: var(--r-sm); background: var(--warning-soft); }

/* Method note (a real sequence, so numbered) */
.method-steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--sp-3); }
.method-steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); font-size: var(--t-subhead); line-height: var(--lh-subhead); color: var(--text-2); }
.method-steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; background: var(--fill); color: var(--text-2); font-size: var(--t-caption1); font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
details.disclose > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); margin-block: calc((20px - var(--ctl)) / 2); cursor: pointer; font-weight: 600; font-size: var(--t-subhead); color: var(--text); }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary .i { color: var(--text-3); transition: transform var(--d-base) var(--ease-out); }
details.disclose[open] > summary .i { transform: rotate(90deg); }
details.disclose > :not(summary) { margin-top: var(--sp-4); }

/* ---------- Chat ---------- */
.chat-scroll { padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }
.msg-user { align-self: flex-end; max-width: 85%; padding: 9px 14px; border-radius: 20px; background: var(--fill); font-size: var(--t-body); line-height: var(--lh-body); }
.msg-ai { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-body); line-height: 1.5; }
.msg-ai p { max-width: 60ch; }
/* 28 px capsule; the transparent 8 px border makes the hit area 44 high without moving the layout */
.steps-fold { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 0 10px 0 8px; border: 8px solid transparent; margin: -8px; background-clip: padding-box; border-radius: var(--r-pill); background: var(--fill-2); color: var(--text-2); font-size: var(--t-footnote); font-weight: 500; }
.steps { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-subhead); line-height: var(--lh-subhead); }
.col-detail .steps { background: var(--surface); }
.steps li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: start; color: var(--text-2); }
.steps li .i { width: 18px; height: 18px; margin-top: 1px; }
.steps li.done .i { color: var(--success); }
.steps li.fail { color: var(--text); } .steps li.fail .i { color: var(--danger); } .steps li.fail .t { color: var(--danger); font-weight: 600; }
.steps li.run { color: var(--text); font-weight: 500; }
.steps li .t { color: var(--text-3); font-size: var(--t-footnote); font-variant-numeric: tabular-nums; }
.spinner { width: 18px; height: 18px; margin-top: 1px; }
.spinner line { stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
.answer-ref { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none; }
.answer-ref.on { box-shadow: inset 0 0 0 2px var(--tint); }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; min-height: max(34px, var(--ctl-sm)); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--separator); background: var(--surface); color: var(--tint-strong); font-size: var(--t-subhead); font-weight: 500; }
.chip-btn.chosen { background: var(--tint); border-color: var(--tint); color: var(--on-tint); }
.ask-card { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--separator); display: flex; flex-direction: column; gap: var(--sp-3); }
.col-detail .ask-card { background: var(--surface); box-shadow: none; }
.ask-card .q { font-weight: 600; font-size: var(--t-callout); }
.composer-wrap { flex: none; padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--surface) 30%); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--glass-edge), var(--shadow-float); } /* 3:1 edge, SC 1.4.11 */
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; border: 0; background: transparent; resize: none; padding: 11px 4px; outline: none; font-size: max(16px, var(--t-body)); line-height: 1.35; }
.composer textarea::placeholder { color: var(--text-3); }
.composer textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--action); color: var(--on-action); display: grid; place-items: center; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16); }
.send .i { stroke-width: 2.2; }
.send[disabled] { background: var(--fill); color: var(--text-3); }
.send.stop { background: var(--text); color: var(--surface); }
.composer .add { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--fill); color: var(--text-2); display: grid; place-items: center; }
.composer-hint { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 10px 0; font-size: var(--t-caption1); color: var(--text-3); }
.composer-hint > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-hint .kbd { font-size: var(--t-caption1); }

/* ---------- Progress ---------- */
/* Native <progress>: its value is an attribute, so no inline width */
progress.progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--fill); color: var(--tint); overflow: hidden; }
progress.progress::-webkit-progress-bar { background: var(--fill); border-radius: 3px; }
progress.progress::-webkit-progress-value { background: var(--tint); border-radius: 3px; }
progress.progress::-moz-progress-bar { background: var(--tint); border-radius: 3px; }
.prog-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--fill); }
.ring .val { stroke: var(--tint); stroke-linecap: round; }

/* ---------- Column content ---------- */
.detail-body { padding: var(--sp-5) var(--margin) var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 1040px; width: 100%; margin: 0 auto; }
.content-body { padding: var(--sp-4) var(--sp-4) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.answer-head h2 { font-size: var(--t-title2); line-height: var(--lh-title2); font-weight: 700; letter-spacing: var(--tr-title2); }
.answer-head .lede { font-size: var(--t-callout); line-height: 1.5; color: var(--text-2); margin-top: var(--sp-2); max-width: 64ch; }

/* Empty states */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-9) var(--sp-6); margin: auto; max-width: 440px; }
.empty .halo { width: 64px; height: 64px; border-radius: 50%; background: var(--tint-soft); color: var(--tint); display: grid; place-items: center; margin-bottom: var(--sp-2); }
.empty .halo .i { width: 30px; height: 30px; stroke-width: 1.6; }
.empty h2, .empty h3 { font-size: var(--t-title3); line-height: var(--lh-title3); font-weight: 600; }
.empty p { color: var(--text-2); font-size: var(--t-callout); line-height: 1.45; }
.empty .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2); }

/* Start: two ways in */
.ways { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); width: 100%; }
@media (min-width: 700px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none; }
.way h3 { font-size: var(--t-headline); font-weight: 600; margin-top: var(--sp-2); }
.way p { color: var(--text-2); font-size: var(--t-subhead); line-height: var(--lh-subhead); }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); border-radius: var(--r-lg); border: 2px dashed var(--line-strong); background: var(--surface-2); text-align: center; }
.dropzone .halo { width: 56px; height: 56px; border-radius: 50%; background: var(--tint-soft); color: var(--tint); display: grid; place-items: center; }

/* ---------- Overlays: sheets, popovers, menus, toasts ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); }
.sheet { position: relative; width: 100%; max-height: calc(100dvh - 12px); display: flex; flex-direction: column; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--elevated); box-shadow: var(--shadow-sheet); overflow: hidden; }
.sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); min-height: 56px; padding: 14px var(--sp-4) 6px; }
.sheet-head .title { text-align: center; }
.sheet-head .title h2 { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 600; }
.sheet-head .title p { font-size: var(--t-footnote); color: var(--text-3); }
.sheet-head .lead { justify-self: start; } .sheet-head .trail { justify-self: end; }
.sheet-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-2) var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.sheet-foot { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--separator); background: var(--elevated); }
.sheet-foot .btn { flex: 1; }
.sheet-foot .spacer { display: none; }
.steps-dots { display: flex; justify-content: center; gap: 6px; }
.steps-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fill); } .steps-dots i.on { background: var(--tint); width: 18px; border-radius: 3px; }
.sheet .group { background: var(--surface-2); }
@media (max-width: 699px) {
  /* compact page sheet: the window behind is pushed back and dimmed */
  .overlay { padding-top: 10px; background: light-dark(rgb(16 18 22 / 0.45), rgb(0 0 0 / 0.7)); }
}
@media (min-width: 700px) {
  .overlay { align-items: center; padding: var(--sp-7); }
  .sheet { width: min(640px, 100%); max-height: calc(100dvh - 64px); border-radius: var(--r-xl); }
  .sheet.wide { width: min(780px, 100%); }
  .sheet-head { min-height: 60px; padding: var(--sp-4) var(--sp-5) var(--sp-2); }
  .sheet-body { padding: var(--sp-2) var(--sp-6) var(--sp-6); }
  .sheet-foot { padding: var(--sp-4) var(--sp-6); justify-content: flex-end; }
  .sheet-foot .btn { flex: none; }
  .sheet-foot .spacer { display: block; flex: 1; }
}

.popover { position: absolute; z-index: 30; width: 300px; padding: var(--sp-2); border-radius: var(--r-lg); background: var(--elevated); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--separator); }
.popover::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--elevated); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--separator); top: -7px; left: var(--arrow, 24px); }
.popover .pop-title { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--t-footnote); font-weight: 600; color: var(--text-3); }
.menu { position: absolute; z-index: 30; min-width: 248px; padding: 6px; border-radius: var(--r-md); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--separator); }
.menu-item { display: flex; align-items: center; gap: 10px; min-height: max(32px, var(--ctl-sm)); padding: 0 10px; border-radius: 8px; font-size: var(--t-subhead); color: var(--text); }
.menu-item .i { width: 17px; height: 17px; color: var(--text-2); }
.menu-item .kbd, .menu-item .meta { margin-left: auto; padding-left: var(--sp-4); }
.menu-item .meta { color: var(--text-3); font-size: var(--t-footnote); }
.menu-item.on { background: var(--tint); color: var(--on-tint); }
.menu-item.on .i, .menu-item.on .kbd { color: var(--on-tint); }
/* The chart's More button sits at the trailing end of the card footer; its menu opens below the footer, so it never
   covers the bars and labels it acts on. With no room below it flips above the card head (HIG Menus, Pull-down buttons). */
.card-foot { position: relative; }
.menu.below-foot { top: calc(100% + 6px); right: 0; }
.menu-sep { height: 1px; margin: 5px 10px; background: var(--separator); }
.option { display: flex; align-items: center; gap: 10px; min-height: max(40px, var(--ctl)); padding: 4px var(--sp-3); border-radius: var(--r-sm); font-size: var(--t-subhead); }
.option .mark-ok { color: var(--tint); margin-left: auto; }
.option.on { background: var(--fill-2); font-weight: 600; }
.option small { color: var(--text-2); font-size: var(--t-footnote); font-weight: 400; }

.toast { position: absolute; z-index: 25; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 8px 0 16px; border-radius: var(--r-pill); background: var(--elevated); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--separator); font-size: var(--t-subhead); font-weight: 500; white-space: nowrap; }
.toast .i { color: var(--success); }
.specimen .toast { position: static; transform: none; align-self: flex-start; white-space: normal; padding: 8px 8px 8px 16px; border-radius: var(--r-md); }

/* Window drop target (drag files onto the app) */
.drop-veil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--sp-5); background: color-mix(in srgb, var(--tint) 14%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drop-veil .drop-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-9); border-radius: var(--r-xl); border: 2px dashed var(--tint); background: var(--elevated); box-shadow: var(--shadow-sheet); text-align: center; max-width: 520px; }
.drag-ghost { position: absolute; z-index: 41; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--elevated); box-shadow: var(--shadow-sheet); transform: rotate(-2deg); font-size: var(--t-subhead); font-weight: 600; white-space: nowrap; }

/* Command bar (Command-K) */
.command { position: absolute; z-index: 30; left: 50%; top: 12%; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); border-radius: var(--r-xl); background: var(--elevated); box-shadow: var(--shadow-sheet), inset 0 0 0 1px var(--separator); overflow: hidden; }
.command .search { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--separator); font-size: var(--t-title3); }
.command .search .i { width: 22px; height: 22px; color: var(--text-3); }
.command .results { padding: var(--sp-2); }
.command .results h2 { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: var(--t-footnote); font-weight: 600; color: var(--text-3); }

/* Report pages. Each page is laid out at a real size (480 px wide, A4 ratio, 12 px text: the export's
   sizes) and shown as a half-size thumbnail with transform. The thumbnail is aria-hidden; the caption
   beside it is the readable summary. */
.pages { display: grid; grid-template-columns: repeat(auto-fill, 240px); justify-content: start; gap: var(--sp-5); }
.thumb { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.thumb figcaption { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--text-2); }
.thumb figcaption b { color: var(--text); font-weight: 600; }
.page-frame { width: 240px; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow-float); }
/* The paper is white in both themes, so the page uses the light values of every token (chart colours, gold) */
.page { color-scheme: light; width: 480px; height: 679px; transform: scale(0.5); transform-origin: 0 0; background: #FFFFFF; color: #15171C; padding: 9%; display: flex; flex-direction: column; gap: 5%; font-size: 12px; line-height: 1.45; overflow: hidden; }
.page .ph { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.page .pmeta { color: #616873; }
.page .pchart { width: 100%; height: auto; display: block; }
.page .pchart text { font-size: 12px; fill: #15171C; }
.page .pchart text.pn { fill: #4F5662; }
.page table { width: 100%; border-collapse: collapse; }
.page td, .page th { padding: 5px 3px; border-bottom: 1px solid #E5E7EB; text-align: left; font-variant-numeric: tabular-nums; }
.page .pn { text-align: right; }
.page .gold { text-decoration: underline 2px var(--gold); text-underline-offset: 3px; }
.page .push { margin-top: auto; }
.page-frame.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; background: var(--tint-soft); box-shadow: none; border: 2px dashed var(--tint); color: var(--tint-strong); font-size: var(--t-subhead); font-weight: 600; }

/* States board */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); padding: var(--sp-5) var(--margin) var(--sp-9); }
.board h2 { grid-column: 1 / -1; font-size: var(--t-title2); line-height: var(--lh-title2); font-weight: 700; letter-spacing: var(--tr-title2); margin-top: var(--sp-4); }
.board .specimen { border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.board .specimen > .caption { font-size: var(--t-footnote); font-weight: 600; color: var(--text-3); }
.banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--t-subhead); line-height: var(--lh-subhead); }
.banner > .i { margin-top: 1px; }
.banner.warn { background: var(--warning-soft); } .banner.warn > .i { color: var(--warning); }
.banner.err { background: var(--danger-soft); } .banner.err > .i { color: var(--danger); }
.banner.info { background: var(--tint-soft); } .banner.info > .i { color: var(--tint); }
.banner.ok { background: var(--success-soft); } .banner.ok > .i { color: var(--success); }
.banner b { font-weight: 600; }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--fill-2), var(--fill), var(--fill-2)); height: 14px; }
.skeleton.w80 { width: 80%; } .skeleton.w55 { width: 55%; }
.banner .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.banner .title { display: block; font-weight: 600; font-size: var(--t-callout); margin-bottom: 2px; color: var(--text); }
.banner .disclose { margin-top: var(--sp-2); }

/* ---------- Swipe actions (touch): a row slides left to show Rename and Remove (HIG Lists and tables) ---------- */
/* Every swipe has a visible button alternative: the toolbar's Edit button (WCAG 2.5.7). Pointer users right-click. */
.swipe { position: relative; overflow: hidden; }
.swipe-actions { position: absolute; inset: 0 0 0 auto; display: none; }
.swipe-actions button { width: 76px; border: 0; color: #FFFFFF; font-size: var(--t-footnote); font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.swipe-actions .rename { background: light-dark(#0074A6, #0A6F99); }
.swipe-actions .remove { background: light-dark(#C42B2B, #C42B2B); }
@media (pointer: coarse) {
  .swipe.is-swiped .swipe-actions { display: flex; }
  .swipe.is-swiped > .cell { transform: translateX(-152px); background: var(--surface-2); transition: transform var(--d-sheet) var(--ease-sheet); }
}
.col-detail .swipe.is-swiped > .cell { background: var(--surface); }
/* Pull to refresh (touch, on the connections list only): the footnote says it, the toolbar's refresh button does it too */
.pull-note { text-align: center; padding: 0 var(--sp-4); font-size: var(--t-footnote); color: var(--text-3); }

/* ---------- Pointer and keyboard layer: shortcuts only where a keyboard and a fine pointer are likely ---------- */
@media (pointer: coarse), (hover: none) {
  .kbd, .pointer-only { display: none !important; }
}
@media (pointer: fine) { .touch-only { display: none !important; } }
/* KPI field chips: shown in the list at regular width; at compact they sit behind the KPI's info button */
@media (max-width: 699px) { .kpi-uses { display: none; } }

/* ---------- Layout helpers (used instead of inline styles) ---------- */
.rel { position: relative; }
.flush { padding: 0; }
.blk { display: block; }
.self-start { align-self: flex-start; }
.full-left { width: 100%; text-align: left; }
.mt2 { margin-top: 2px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: var(--sp-2); } .mt16 { margin-top: var(--sp-4); }
.gap-s { display: inline-block; width: 8px; }
.row-flex.center { justify-content: center; }
.help.center { text-align: center; margin-top: 8px; }
.detail-body.w720 { max-width: 720px; } .detail-body.w760 { max-width: 760px; }
.detail-body.roomy { gap: var(--sp-6); }
.detail-body.center { max-width: 640px; align-items: center; text-align: center; gap: var(--sp-5); }
.empty.fill { height: 100%; justify-content: center; }
.empty.compact { padding: var(--sp-4) 0; }
.empty.bare { padding: 0; gap: var(--sp-3); }
.dots-wrap { padding: 0 0 var(--sp-2); }
.tb.back { padding-left: 2px; }
.code.wrap-any { overflow-wrap: anywhere; }
.input.picker { justify-content: space-between; cursor: pointer; width: 100%; text-align: left; }
.input.search-btn { width: 100%; cursor: pointer; }
.input.search-btn .grow { text-align: left; }
.json-outline { margin: 0; line-height: 1.7; overflow: auto; }
.json-hit { background: var(--tint-soft); color: var(--tint-strong); border-radius: 4px; padding: 1px 4px; }
.alert-card { background: var(--elevated); box-shadow: var(--shadow-float); text-align: center; }
.alert-text { margin: 6px 0 16px; }
.ring-wrap { position: relative; width: 168px; height: 168px; margin-top: var(--sp-5); }
.ring-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.overlay.top { align-items: flex-start; }
.drag-ghost.at-report { left: 6%; top: 58%; }
.drag-ghost.at-drop { left: 56%; top: 62%; }
.page .pline, .page .pchart { width: 100%; height: auto; display: block; flex: none; overflow: visible; }
.page .pline polyline { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.index-main { max-width: 720px; }
.stale { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--text-2); }
.consent { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-callout); line-height: 1.45; }
.consent-list { display: flex; flex-direction: column; gap: 6px; }
.consent-list li { position: relative; padding-left: 18px; }
.consent-list li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:active, .tb:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .tb-group, .tabbar, .composer, .menu { background: var(--elevated); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --separator: var(--line-strong); --text-3: var(--text-2); }
  .group, .card, .kpi { box-shadow: inset 0 0 0 1px var(--line-strong); }
}
@media (forced-colors: active) {
  .btn, .seg, .check, .switch, .input { border: 1px solid CanvasText; }
  .side-item[aria-current="page"] { outline: 2px solid Highlight; }
}
@media (max-width: 699px) {
  /* compact sheets: stacked full-width buttons, the primary on top */
  .sheet-foot { flex-direction: column-reverse; align-items: stretch; }
  .sheet-foot .btn { width: 100%; }
}
@media (max-width: 699px) {
  /* compact lists do not keep a selection (it belongs to the split view); long values wrap */
  .cell.selected { background: transparent; }
  .cell.selected .cell-title { color: inherit; font-weight: inherit; }
  .cell .cell-value { white-space: normal; text-align: right; max-width: 55%; overflow-wrap: anywhere; }
}

/* ======================= Interactive layer (not drawn in the static prototypes) ======================= */
/* Long names and values from the user's data never widen their container (WCAG 1.4.10 Reflow): a long field token
   ends in an ellipsis with its full name as the tooltip; tags clip; lines of text wrap anywhere. */
.token.long { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.tag { max-width: 100%; overflow: hidden; }
.banner > div, .help, .cell-main, .msg-ai p, .msg-user, .chip-btn { overflow-wrap: anywhere; min-width: 0; }
.chip-btn { max-width: 100%; }
/* A progress row holds its bar and percentage, never data text: the percentage keeps one line, as in the prototypes
   (CSS Text 3, overflow-wrap: anywhere counts its break chances in the min-content size a flex item shrinks to) */
.prog-row { overflow-wrap: normal; }
/* A change downwards: the same arrow turned (one icon family, DESIGN.md section 10) */
.delta.down .i { transform: rotate(90deg); }
/* Swipe rows: a sideways touch reaches the page (Pointer Events: touch-action); Edit shows the actions on every row, for
   every pointer (the visible alternative, WCAG 2.5.7) */
.swipe > .cell { touch-action: pan-y; }
.editing .swipe-actions { display: flex; }
.editing .swipe > .cell { transform: translateX(-152px); background: var(--surface-2); }
.col-detail .editing .swipe > .cell { background: var(--surface); }

/* Sheets, the alert and the command bar are modal <dialog> elements (HTML Standard): the scrim is their ::backdrop; the
   sheet's grabber is a real 44 px button drawing the 36 x 5 bar of the prototypes. */
dialog.sheet, dialog.command, dialog.alert { padding: 0; border: 0; color: var(--text); max-width: none; }
dialog.sheet:not([open]), dialog.command:not([open]), dialog.alert:not([open]) { display: none; }
dialog.sheet { position: fixed; }
dialog.sheet::backdrop, dialog.command::backdrop, dialog.alert::backdrop { background: var(--scrim); }
dialog.alert { background: transparent; width: min(360px, calc(100% - 32px)); }
.grabber { position: absolute; top: 0; left: 50%; z-index: 3; width: 44px; height: 44px; margin-left: -22px; padding: 0; border: 0; background: none; }
.grabber::before { content: ""; position: absolute; top: 6px; left: 4px; width: 36px; height: 5px; border-radius: 3px; background: var(--fill); }
.grabber:focus-visible { outline-offset: -3px; } /* drawn inside: the sheet clips at its top edge (WCAG 2.4.11) */
@media (max-width: 699px) {
  dialog.sheet { margin: auto 0 0; width: 100%; }
  /* at compact every modal dims the window behind it more (design/xenthk.css: .overlay at max-width 699px) */
  dialog.sheet::backdrop, dialog.command::backdrop, dialog.alert::backdrop { background: light-dark(rgb(16 18 22 / 0.45), rgb(0 0 0 / 0.7)); }
  dialog.sheet[data-detent="medium"] { max-height: 50dvh; }
}
@media (min-width: 700px) { dialog.sheet { margin: auto; } }
dialog.command { position: fixed; inset: 12dvh 0 auto; margin: 0 auto; transform: none; }
.command .search .input { flex: 1; min-width: 0; font-size: inherit; background: transparent; }

/* Popovers and menus are popover elements in the top layer, hanging from their control (CSS Anchor Positioning): right
   edges aligned, below it, flipped above when there is no room. The arrow points at the control from the side the
   browser chose, which choicePopover writes as data-side (the attribute Radix Primitives and Floating UI expose for
   this; the anchored container query of CSS Anchor Positioning 2 does not pass the production CSS minifier). Without
   anchor positioning they open centred, the browser's default place.
   position-anchor: auto names the implicit anchor (the invoker or showPopover's source); the initial value, normal,
   acts as none without position-area (CSS Anchor Positioning 1, position-anchor). */
.popover[popover], .menu[popover] { position: fixed; inset: auto; margin: 0; border: 0; color: var(--text); overflow: visible; position-anchor: auto; top: anchor(bottom); right: anchor(right); position-try-fallbacks: flip-block; }
.popover[popover] { margin-top: 12px; }
.menu[popover] { margin-top: 6px; }
.popover[popover]::before { content: none; }
.pop-arrow { position: absolute; top: -7px; right: 24px; width: 14px; height: 14px; background: var(--elevated); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--separator); }
.popover[data-side="top"] .pop-arrow { top: auto; bottom: -7px; box-shadow: 1px 1px 0 var(--separator); }
@supports not (anchor-name: --a) { .popover[popover], .menu[popover] { inset: 0; margin: auto; } .pop-arrow { display: none; } }
.popover.w250 { width: 250px; } .popover.w270 { width: 270px; }
.option, .menu-item { cursor: pointer; }
/* A row's handle (Report): a 44 px button around its 20 px icon; the negative margin keeps the row's layout as drawn */
.row-handle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; flex: none; }
.cell[draggable="true"] { cursor: grab; }
.option:focus-visible, .menu-item:focus-visible { outline-offset: -3px; }
/* Chart card: the drawing surface of the chart library; Table view; a chart that cannot be drawn shows its table. The
   More menu hangs below the card footer (one anchor name per card: anchor-scope) and flips above the card head, never
   over the plot (DESIGN.md section 3; CSS Anchor Positioning: @position-try). */
.chart-surface { min-height: 1px; }
.chart-wrap[data-view="table"] .chart, .chart-wrap[data-chart="failed"] .chart { display: none; }
.chart-wrap[data-view="table"] .chart-alt, .chart-wrap[data-chart="failed"] .chart-alt { display: table; }
.chart-wrap { anchor-scope: --chart-foot, --chart-card; anchor-name: --chart-card; }
.chart-wrap .card-foot { anchor-name: --chart-foot; }
.chart-wrap .menu[popover] { position-anchor: --chart-foot; top: anchor(bottom); right: anchor(right); margin-top: 6px; position-try-fallbacks: --above-card; }
@position-try --above-card { position-anchor: --chart-card; top: auto; bottom: anchor(top); margin: 0 0 6px; }
.table-wrap:focus-visible { outline-offset: -3px; }
/* A report chart that cannot be drawn leaves no blank box on the paper; the page keeps its table */
.page[data-chart="failed"] .pchart { display: none; }
/* The sidebar behind its toolbar button: from 700 to 1199 px it floats over the columns when shown; from 1200 px the
   columns make room when it is hidden, and the content column's toolbar shows the button that brings it back. */
.app { position: relative; }
@media (min-width: 700px) and (max-width: 1199px) {
  .app[data-sidebar="shown"] .col-sidebar { display: flex; position: absolute; inset: 0 auto 0 0; z-index: 12; width: var(--w-sidebar); box-shadow: var(--shadow-sheet); }
}
@media (min-width: 1200px) {
  .app[data-sidebar="hidden"] { grid-template-columns: var(--w-content) minmax(0, 1fr); }
  .app[data-sidebar="hidden"] .col-sidebar { display: none; }
  .app[data-sidebar="hidden"] .sidebar-toggle-1024 { display: inline-flex !important; }
}
/* Print: the report's PDF is the browser's print to PDF on A4 landscape paper (CSS Paged Media,
   https://www.w3.org/TR/css-page-3/). Only the report pages print, one per sheet at their full size: every element that
   neither is a page nor holds the pages is left out, and the ones that hold them drop their columns and scrolling, so
   no page is cut at a column's edge. Without .pages on screen nothing is printed. */
@page { size: A4 landscape; margin: 11mm 12mm; }
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #FFFFFF !important; }
  body *:not(:has(.pages), .pages, .pages *), .pages .thumb:has(.slot), .pages figcaption { display: none !important; }
  body *:has(.pages) { display: block !important; position: static !important; overflow: visible !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; transform: none !important; }
  .pages { display: block; }
  .thumb + .thumb { break-before: page; }
  .page-frame { width: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; }
  .page { transform: none; width: auto; height: auto; min-height: 186mm; padding: 0; gap: 6mm; overflow: visible; }
}

/* XENTHK: sign-in, account and owner-console pages (DESIGN-ALL-PAGES-01, 15 Oct 2026).
   Loaded after xenthk.css by the new pages only, so the approved stylesheet and its 204 screenshots stay byte-identical.
   Every value is a token of xenthk.css; nothing here restyles an existing class. */

/* ---------- Sign-in pages: no app frame, one form card and what is sent where (HIG Managing accounts) ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--margin) var(--sp-2); }
.auth-top .brand { min-height: 44px; }
.auth-main { flex: 1; display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; align-content: start; gap: var(--sp-6); padding: var(--sp-2) var(--margin) var(--sp-8); }
@media (min-width: 1024px) { .auth-main { grid-template-columns: 480px 360px; align-content: center; align-items: start; gap: var(--sp-8); } }
.auth-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-xl); background: var(--surface); min-width: 0; }
@media (min-width: 700px) { .auth-card { padding: var(--sp-7); } }
.auth-card h1 { font-size: var(--t-title1); line-height: var(--lh-title1); font-weight: 700; letter-spacing: var(--tr-title1); }
.auth-card .lede { margin-top: var(--sp-2); font-size: var(--t-callout); line-height: var(--lh-callout); letter-spacing: var(--tr-callout); color: var(--text-2); }
.auth-card .card.inset { padding: var(--sp-4); }
.auth-alt { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--separator); }
.auth-aside { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--sp-3); padding: var(--sp-2) var(--margin) calc(var(--sp-4) + env(safe-area-inset-bottom)); font-size: var(--t-footnote); color: var(--text-3); }

/* The one-time code: one field (autocomplete="one-time-code"), large tabular digits, spaced for reading back */
.input.code-entry { min-height: 64px; }
.input.code-entry input { text-align: center; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.4em; text-indent: 0.4em; }

/* ---------- Two-column split view (sidebar + detail), for pages with no list column (owner console overview) ---------- */
@media (min-width: 700px) { .app.two { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) { .app.two { grid-template-columns: var(--w-sidebar) minmax(0, 1fr); } }

/* ---------- Alert: a centred dialog at every width for a destructive or irreversible step (HIG Alerts) ---------- */
.overlay.center { align-items: center; padding: var(--sp-5); }
.alert { width: min(340px, 100%); padding: var(--sp-5); border-radius: var(--r-lg); }
.alert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.alert-actions .btn { width: 100%; }

/* Initials in place of a photo (accounts have no picture) */
.tile.initials { font-size: var(--t-subhead); font-weight: 600; letter-spacing: 0; }

/* Helpers used instead of inline styles */
.break { overflow-wrap: anywhere; }                 /* an email address may break anywhere, so it never widens the page */
.content-body.flush-top { padding-bottom: 0; }      /* a banner above the chat */

[hidden] { display: none !important; }