/* ─── ARX Offers — standalone app ────────────────────────────────
   Design system. Whitespace is the structure, typography does the work.
   One family (Inter / SF), a fixed role scale, a neutral ramp, one accent
   in two steps (brand blue for marks and fills, a darker ink for text,
   links, buttons and selection so it clears 4.5:1), semantic status as a
   single coloured word, hairlines only where rows meet, elevation declared
   once per surface (ring on cards, offset+blur on overlays).
   Layout: one column flow — Categories · Rounds · Round · Letter — where a
   deeper pane slides in on the right while its parent shrinks to a selector;
   a second section, Dashboard, is a scrolling page on the same tokens.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Neutral ramp (cool grey) */
  --n-0: var(--arx-white);
  --n-50: var(--arx-gray-light);
  --n-100: #ececf0;
  --n-200: var(--arx-border);
  --n-300: var(--arx-border-strong);
  --n-400: #98989e;
  --n-500: var(--arx-text-muted);   /* 4.9:1 on the page — the floor for any text */
  --n-600: var(--arx-text-secondary);   /* 6.8:1 */
  --n-900: var(--arx-charcoal);

  /* Surfaces */
  --bg: var(--arx-gray-light);
  --surface:   var(--n-0);
  --surface-2: var(--n-50);
  --hairline:  rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.16);
  --hover:     rgba(0, 0, 0, 0.03);
  --pressed:   rgba(0, 0, 0, 0.06);
  --scrim:     rgba(0, 0, 0, 0.32);

  /* Text roles */
  --text:   var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);

  /* Accent — one hue, two steps */
  --accent: var(--arx-blue);                 /* brand blue: marks, progress, fills behind nothing textual */
  --accent-ink: var(--arx-blue-ink);                 /* links, buttons, selection, status word (5.3:1 on white) */
  --accent-ink-strong: var(--arx-blue-hover);
  --accent-soft: var(--arx-blue-tint);
  --accent-wash: var(--arx-blue-wash);
  --on-accent: var(--arx-white);
  --on-accent-2:   rgba(255, 255, 255, 0.9);
  --focus:         var(--accent-ink);
  --selection: var(--arx-blue-selection);
  --accent-strong: var(--accent-ink);       /* legacy alias */

  /* Semantic status (all ≥ 4.5:1 on white) */
  --green: var(--arx-success);
  --amber: var(--arx-warning);
  --red: var(--arx-danger);
  --amber-bg: var(--arx-warning-soft);
  --amber-ink: var(--arx-warning-ink);
  --red-bg: var(--arx-danger-soft);

  /* Data-viz: the accent as an ordinal ramp (funnel), plus chart chrome */
  --viz-1: var(--arx-chart-1); --viz-2: var(--arx-chart-2); --viz-3: var(--arx-chart-3); --viz-4: var(--arx-chart-4); --viz-5: var(--arx-chart-5); --viz-6: var(--arx-chart-6);
  --viz-offered: var(--arx-blue-border);
  --viz-accepted: var(--accent);
  --viz-muted:    var(--n-300);
  --viz-grid:     var(--n-100);
  --viz-axis:     var(--n-300);

  /* Type — one family, a fixed role scale (≈1.2) */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-display: 40px;
  --fs-title:   30px;
  --fs-h:       19px;
  --fs-body:    16px;
  --fs-ui:      14px;
  --fs-detail:  13px;
  --fs-micro:   12px;
  --fs-nano:    11px;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5;
  --track-display: -0.022em; --track-title: -0.016em; --track-h: -0.01em; --track-ui: -0.004em;
  --display: var(--fs-display); --display-sm: var(--fs-title); --body: var(--fs-body); --detail: var(--fs-detail);   /* legacy aliases */

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --max: 1080px;
  --max-wide: 1400px;                  /* the stack may grow past --max when deeper */

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 980px;
  --radius: var(--r-lg); --radius-sm: var(--r-md);

  /* Elevation — cards wear a ring, overlays wear an offset shadow */
  --ring:     0 0 0 1px var(--hairline);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 24px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);

  /* Motion */
  --t-fast: 120ms;
  --t: 180ms;
  --t-pane: 220ms;                     /* pane enter / leave and column widths */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* exponential out: enters land softly */
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);      /* exits leave faster than enters */
}
/* Column widths of the stack; narrow breakpoints override them per depth. */
.app { --col-cats: 240px; --col-rounds: 280px; --col-custs: 300px; }

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  caret-color: var(--accent-ink);
  accent-color: var(--accent-ink);
}
::selection { background: var(--selection); }
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Focus: one ring everywhere; rows inside clipped panes draw it inside their own box. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.cat-row:focus-visible, .round-row:focus-visible, .cust-row:focus-visible, .rank-row:focus-visible, .recent-link:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.is-active:focus-visible { outline-color: var(--on-accent); }
/* Scrollbars belong to the palette, not the platform. */
.pane, .sheet-body, .cats-list { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
.pane::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { width: 8px; height: 8px; }
.pane::-webkit-scrollbar-thumb, .sheet-body::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.pane::-webkit-scrollbar-track, .sheet-body::-webkit-scrollbar-track { background: transparent; }

/* ── Type roles ────────────────────────────────────────────────── */
.display    { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--track-display); line-height: var(--lh-tight); text-wrap: balance; }
.display-sm { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.15; text-wrap: balance; }
.detail     { font-size: var(--fs-detail); color: var(--text-2); }
.quiet      { color: var(--text-2); }
.faint      { color: var(--text-3); }
.num        { font-variant-numeric: tabular-nums; }
.lede       { font-size: var(--fs-body); color: var(--text-2); max-width: 64ch; text-wrap: pretty; }
.section-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.section-title .count { color: var(--text-3); font-weight: 400; margin-left: var(--sp-2); }

/* Status word: one coloured word, never a badge */
.status { font-weight: 500; white-space: nowrap; }
.status::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: currentColor;
}
.st-neutral { color: var(--text-2); }
.st-accent  { color: var(--accent-ink); }
.st-green   { color: var(--green); }
.st-amber   { color: var(--amber); }
.st-red     { color: var(--red); }

/* ── Buttons — one primary per screen, everything else is text ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent-ink); color: var(--on-accent); font-weight: 500; font-size: var(--fs-body); letter-spacing: var(--track-ui);
  white-space: nowrap; transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn-primary:hover { background: var(--accent-ink-strong); text-decoration: none; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-primary.is-danger { background: var(--red); }
.btn-primary.is-danger:hover { background: var(--arx-danger-hover); }
.btn-primary.is-sm { padding: 6px 14px; font-size: var(--fs-detail); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--text);
  font-size: var(--fs-body); white-space: nowrap; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-secondary:hover { background: var(--hover); border-color: var(--n-300); text-decoration: none; }
.btn-secondary:active { background: var(--pressed); transform: scale(0.98); }
.btn-secondary.is-sm { padding: 5px 12px; font-size: var(--fs-detail); }
.link-btn { color: var(--accent-ink); background: none; border: 0; padding: 0; font-size: inherit; text-underline-offset: 3px; }
.link-btn:hover { text-decoration: underline; }
.link-btn:active { color: var(--accent-ink-strong); }
.link-btn.detail { color: var(--text-2); }
.link-btn.detail:hover { color: var(--text); }
.links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-detail); }
.links a, .links .link-btn { font-size: var(--fs-detail); }
.done-word { color: var(--text-3); font-size: var(--fs-detail); white-space: nowrap; }

/* Provenance chip: legacy ARX Sense rounds / letters (read-only adapter) */
.src-chip {
  display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 500; line-height: 16px; letter-spacing: 0.01em; color: var(--text-2);
  vertical-align: 2px; white-space: nowrap;
}
.round-row.is-active .src-chip, .cust-row.is-active .src-chip { color: var(--on-accent); border-color: var(--on-accent-2); }
.hero-meta .src-chip { margin-left: 0; vertical-align: 1px; }

/* Purchase orders linked to a letter (ARX Sense customers_po) */
.pos { list-style: none; margin: 0; padding: 0; font-size: var(--fs-detail); }
.pos .po { padding: var(--sp-2) 0; border-top: 1px solid var(--hairline); }
.pos .po:first-child { border-top: 0; padding-top: 0; }
.po-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.po-number { font-weight: 600; color: var(--text); }
.po-tag { font-size: var(--fs-micro); color: var(--text-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 0 6px; }
.po-when { margin-left: auto; color: var(--text-2); white-space: nowrap; }
.po-sum { color: var(--text-2); margin-top: 2px; }
.po-items { list-style: none; margin: var(--sp-1) 0 0; padding: 0; color: var(--text-2); }
.po-items li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-4); padding: 2px 0; }
/* Documents of a legacy letter / PO: kind chip · name · date · View/Download (ARXCDN) or Open in ARX Sense */
.docs { list-style: none; margin: 0; padding: 0; font-size: var(--fs-detail); }
.docs .doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: baseline; padding: 4px 0; border-top: 1px solid var(--hairline); }
.docs .doc:first-child { border-top: 0; }
.doc-kind { font-size: var(--fs-micro); color: var(--text-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 0 6px; white-space: nowrap; }
.doc-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-when { color: var(--text-2); white-space: nowrap; }
.doc-links { white-space: nowrap; }
.po .docs { margin-top: var(--sp-1); }
.po .docs .doc { border-top: 0; padding: 2px 0; }
.doc-note { margin: var(--sp-2) 0 0; font-size: var(--fs-detail); }

/* ── Form controls ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: var(--fs-detail); color: var(--text-2); }
.field input, .field select, .field textarea {
  padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--hairline-strong);
  background: var(--surface); font-size: var(--fs-body); width: 100%; min-width: 0;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--n-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { resize: vertical; min-height: 84px; }
.field .hint { font-size: var(--fs-detail); color: var(--text-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid > .span-2 { grid-column: span 2; }
.form-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-section + .form-section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.form-section-title { font-size: var(--fs-detail); color: var(--text-2); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.check input { width: 16px; height: 16px; accent-color: var(--accent-ink); }
.form-note { font-size: var(--fs-detail); color: var(--text-2); }
.form-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-5); font-size: var(--fs-detail); color: var(--text-2); }
.form-summary strong { color: var(--text); font-weight: 500; }
.sched { width: 100%; border-collapse: collapse; font-size: var(--fs-detail); }
.sched th { text-align: left; font-weight: 500; color: var(--text-2); padding: 4px 6px; }
.sched td { padding: 4px 6px; border-top: 1px solid var(--hairline); }
.sched input { width: 100%; padding: 6px 8px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); font-size: var(--fs-detail); }
.sched .num-col input { text-align: right; font-variant-numeric: tabular-nums; }
.sched .rm { color: var(--text-3); font-size: 18px; line-height: 1; }
.sched .rm:hover { color: var(--red); }

/* ── Sign-in ───────────────────────────────────────────────────── */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.login-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.login-logo { margin-bottom: var(--sp-4); }
.login-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--track-title); }
.login-sub { color: var(--text-2); margin-bottom: var(--sp-4); }
.login-dev { margin-top: var(--sp-4); }

/* ── Top bar: product mark · section switcher · account ────────── */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 253, 0.85); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--hairline); }
.topbar-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-5); height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); transition: max-width var(--t-pane) var(--ease); }
.app.depth-2 .topbar-inner, .app.depth-3 .topbar-inner { max-width: var(--max-wide); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); justify-self: start; }
.brand:hover { text-decoration: none; }
.brand-name { font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--track-ui); color: var(--text); padding-left: 10px; border-left: 1px solid var(--hairline-strong); line-height: 1; }
.sections { display: inline-flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.05); border-radius: var(--r-pill); padding: 3px; }
.section-link {
  padding: 5px 16px; border-radius: var(--r-pill); font-size: var(--fs-detail); font-weight: 500; color: var(--text-2); letter-spacing: var(--track-ui);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.section-link:hover { color: var(--text); text-decoration: none; }
.section-link[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), var(--ring); }
.topbar-right { display: flex; align-items: center; gap: var(--sp-4); justify-self: end; }
.topbar-link { font-size: var(--fs-detail); color: var(--text-2); }
.topbar-link:hover { color: var(--text); text-decoration: none; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: var(--r-pill); cursor: pointer; transition: background var(--t) var(--ease); }
.user-btn:hover, .user-menu[open] > .user-btn { background: var(--hover); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-ink); color: var(--on-accent); font-size: var(--fs-nano); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; }
.topbar-user { font-size: var(--fs-detail); color: var(--text-2); }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 30;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2), var(--ring);
  padding: var(--sp-2); animation: menu-in var(--t) var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-id { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-2); }
.menu-email { font-size: var(--fs-detail); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.menu-email:empty { display: none; }
.menu-role { font-size: var(--fs-micro); color: var(--text-3); }
.menu-item { display: block; width: 100%; text-align: left; padding: 7px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-detail); color: var(--text); transition: background var(--t-fast) var(--ease); }
.menu-item:hover { background: var(--hover); }
.menu-item:active { background: var(--pressed); }

/* ── Page = the pane stack ─────────────────────────────────────────
   #view is a grid that persists across renders: rows = heading · toolbar ·
   path line · panes, columns = one per depth. All four column tracks always exist (an
   absent pane sits in a 0-width track) so grid-template-columns interpolates
   and the parent list visibly shrinks while a deeper pane slides in. Fixed
   selector widths are written minmax(Wpx, 0fr) so they interpolate with the
   minmax(0, 1fr) of a full-width pane. */
.page {
  max-width: var(--max); margin: 0 auto;
  height: calc(100vh - 52px); height: calc(100dvh - 52px);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: grid;
  grid-template-rows: auto auto auto minmax(200px, 1fr);
  grid-template-columns: var(--col-cats) minmax(0, 1fr) minmax(0, 0fr) minmax(0, 0fr);
  column-gap: 0;
  transition: grid-template-columns var(--t-pane) var(--ease), max-width var(--t-pane) var(--ease);
}
.page.depth-2 { grid-template-columns: var(--col-cats) minmax(var(--col-rounds), 0fr) minmax(0, 1fr) minmax(0, 0fr); }
.page.depth-3 { grid-template-columns: var(--col-cats) minmax(var(--col-rounds), 0fr) minmax(var(--col-custs), 0fr) minmax(0, 1fr); }
.page.depth-2, .page.depth-3 { max-width: var(--max-wide); }
.page > .page-head, .page > .toolbar, .page > .pathline, .page > .loading, .page > .error { grid-column: 1 / -1; }
.page-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.readonly-note { font-size: var(--fs-detail); color: var(--text-3); }
.loading { color: var(--text-3); padding: var(--sp-7) 0; text-align: center; }
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.empty .display-sm { color: var(--text); margin-bottom: var(--sp-1); }
.empty-act { font-size: var(--fs-detail); margin-top: var(--sp-2); }
.empty-line { padding: var(--sp-4) 16px; font-size: var(--fs-detail); }
.error { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--text-2); }

/* Panes: one grid column each, independent vertical scroll, sticky heads. */
.pane { grid-row: 4; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }
.pane-cats   { grid-column: 1; }
.pane-rounds { grid-column: 2; margin-left: var(--sp-5); }
.pane-round  { grid-column: 3; margin-left: var(--sp-5); }
.pane-letter { grid-column: 4; margin-left: var(--sp-5); }
/* Enter: an exponential ease-out from 24px, the head a beat before the body. Leave: faster, ease-in. */
.pane.is-new     { animation: pane-in var(--t-pane) var(--ease-out) both; }
.pane.is-new > *:not(.pane-head) { animation: pane-body-in calc(var(--t-pane) + 60ms) var(--ease-out) both; animation-delay: 40ms; }
.pane.is-leaving { animation: pane-out calc(var(--t-pane) - 40ms) var(--ease-in) forwards; pointer-events: none; }
@keyframes pane-in      { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pane-body-in { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }
@keyframes pane-out     { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
.pane-title {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  font-size: var(--fs-detail); font-weight: 400; color: var(--text-2);
  padding: 10px 16px 8px; border-bottom: 1px solid var(--hairline);
}
.pane-title .count { color: var(--text-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.pane-head { position: sticky; top: 0; z-index: 3; background: var(--bg); padding-bottom: var(--sp-3); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-detail); color: var(--text-2); margin-bottom: var(--sp-2); }
.back:hover { color: var(--text); text-decoration: none; }
.pane .back { display: none; }                 /* wide: Esc or × closes a pane; the link returns below 800px */
.hero-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.hero-main { flex: 1; min-width: 0; }
.hero-title { font-size: var(--fs-h); font-weight: 600; letter-spacing: var(--track-h); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta { font-size: var(--fs-micro); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta .sep { color: var(--text-3); margin: 0 5px; }
.hero-action { flex-shrink: 0; padding-top: 1px; }
.pane-x {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 18px; line-height: 1; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pane-x:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.pane-x:active { background: var(--pressed); }

/* ── Progress line (meter: fill carries state, track is a lighter step) ── */
.bar { position: relative; height: 3px; border-radius: 3px; background: var(--n-100); overflow: hidden; }
.bar > span { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; transition: width var(--t-pane) var(--ease-out); }
.bar .fill-acc  { background: var(--accent); }
.bar .fill-pend { background: var(--arx-blue-border); }
.bar.is-done .fill-acc { background: var(--green); }
.bar.lg { height: 5px; }

/* ── Above the stack: toolbar ──────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.toolbar .spacer { flex: 1; }
.segmented { display: inline-flex; background: rgba(0, 0, 0, 0.05); border-radius: var(--r-pill); padding: 3px; }
.segmented button {
  padding: 5px 16px; border-radius: var(--r-pill); font-size: var(--fs-detail); color: var(--text-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), var(--ring); font-weight: 500; }
.segmented .count { color: var(--text-3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.search { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.search:focus-within { color: var(--text-2); }
.search input {
  border: 0; background: transparent; font-size: var(--fs-body); width: 220px; padding: 6px 0;
  border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; border-bottom-color: var(--accent-ink); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Above the stack: the path line — Category › Round › Customer ──
   Quiet grey text links back to each depth; the current segment is plain
   body colour. Pulled up under the toolbar so it reads as part of the stack. */
.pathline {
  grid-row: 3; font-size: var(--fs-detail); line-height: 1.4; color: var(--text-2);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.path-seg { color: var(--text-2); }
a.path-seg:hover { color: var(--text); text-decoration: underline; }
.path-seg.is-current { color: var(--text); }
.path-sep { color: var(--text-3); margin: 0 6px; }

/* ── Cards: the same anatomy in every list pane — white surface, one ring,
   a quiet title over a hairline, rows with a 6px radius. ──────────── */
.cats, .rounds-card, .custs-card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--ring); }
.cats-list, .rounds, .custs { padding: 10px; display: flex; flex-direction: column; gap: 1px; }
.rounds-count { color: var(--text-3); margin-left: 4px; }

/* Pane 1 — categories (mirrors MIND's Offer Grouping list). */
.cat-row {
  width: 100%; text-align: left; padding: 6px 8px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-detail); color: var(--text);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cat-row:hover { background: var(--hover); }
.cat-row:active { background: var(--pressed); }
.cat-row.is-empty { color: var(--text-3); }
/* Selection = shared orange tint + charcoal text, in every mode (full card, initials
   rail, pill strip); hover is only ever the faint --hover wash. */
.cat-row.is-active, .cat-row.is-active:hover, .cat-row.is-active.is-empty { background: var(--arx-selection-soft); color: var(--on-accent); }
.cat-row.is-active .cat-name, .cat-row.is-active .cat-initial { font-weight: 600; }
.cat-initial { display: none; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { font-size: var(--fs-micro); color: var(--text-3); line-height: 1.4; flex-shrink: 0; }
.cat-row.is-active .cat-count { color: var(--on-accent-2); }
.cat-count.is-warn, .cat-row.is-active .cat-count.is-warn {
  background: var(--amber-bg); color: var(--amber-ink); font-size: var(--fs-nano); font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-pill);
}
/* Mode switch at the top of pane 1 (Category · Customer · Product): sticky, the card's own surface. */
.mode-switch { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 10px 10px 8px; border-radius: var(--r-md) var(--r-md) 0 0; }
.mode-seg { display: flex; width: 100%; }
.mode-seg button { flex: 1; padding: 4px 0; min-width: 0; font-size: var(--fs-detail); white-space: nowrap; }
.pane-cats .cats-title { top: 46px; }
/* Pane 1, tree modes — a vertical tree (Windows-Explorer anatomy) in the same card:
   disclosure triangle · name · count, children under an indentation guide with a
   status dot; the open round's row is filled with the accent like a selected category. */
.tree-head { position: sticky; top: 46px; z-index: 2; background: var(--surface); padding: 0 12px 8px; border-bottom: 1px solid var(--hairline); }
.tree-search { display: flex; }
.tree-search input { width: 100%; font-size: var(--fs-detail); padding: 4px 0; }
.tree { padding: 8px 8px 10px; }
.tree-node { border-radius: var(--r-sm); }
.tree-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 4px; border-radius: var(--r-sm); cursor: default;
  font-size: var(--fs-detail); color: var(--text); transition: background var(--t-fast) var(--ease);
}
.tree-row:hover { background: var(--hover); }
.tree-node:focus-visible { outline: none; }
.tree-node:focus-visible > .tree-row { outline: 2px solid var(--focus); outline-offset: -2px; }
.tree-node.is-selected > .tree-row .tree-name { font-weight: 600; }
.tree-disc { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; transition: transform var(--t-fast) var(--ease); }
.tree-node.is-open > .tree-row .tree-disc { transform: rotate(90deg); }
.tree-initial { display: none; }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-sub { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.tree-meta { font-size: var(--fs-micro); color: var(--text-3); flex-shrink: 0; min-width: 14px; text-align: right; }
.tree-total { font-size: var(--fs-micro); color: var(--text-3); padding: 0 6px 4px 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-children { margin: 0 0 4px 10px; padding-left: 4px; border-left: 1px solid var(--hairline); }
.tree-leaf {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; border-radius: var(--r-sm); cursor: default;
  font-size: var(--fs-detail); color: var(--text); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tree-leaf:hover { background: var(--hover); }
.tree-leaf:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.tree-guide { position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--hairline); }
.tree-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tree-when { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.tree-leaf.is-active, .tree-leaf.is-active:hover { background: var(--arx-selection-soft); color: var(--on-accent); }
.tree-leaf.is-active .tree-name { font-weight: 600; }
.tree-leaf.is-active .tree-when { color: var(--on-accent-2); }
.tree-leaf.is-active .tree-dot { color: var(--on-accent); }
.tree-leaf.is-active .tree-guide { background: var(--hairline); }

/* Pane 2 — rounds. Full rows at depth 1, mini rows (title · status · expiry) deeper. */
.round-row {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(120px, 0.7fr) 92px 128px 84px;
  gap: var(--sp-4); align-items: center;
  padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-detail); line-height: 1.35;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.round-row + .round-row { box-shadow: 0 -1px 0 var(--hairline); }
.round-row:hover { background: var(--hover); }
.round-row:active { background: var(--pressed); }
.rr-main { min-width: 0; }
.rr-title { font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--track-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-sub { font-size: var(--fs-micro); color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-sub .code { color: var(--text-3); }
.rr-sub .rr-cat { color: var(--text-3); }
.rr-goal { display: flex; flex-direction: column; gap: 4px; }
.rr-goal-text { font-size: var(--fs-micro); color: var(--text-2); white-space: nowrap; }
.rr-status { font-size: var(--fs-detail); white-space: nowrap; }
.rr-expiry { font-size: var(--fs-micro); line-height: 1.3; white-space: nowrap; }
.rr-expiry .when { color: var(--text); }
.rr-expiry .in { color: var(--text-3); }
.rr-expiry .in.is-soon { color: var(--amber); }
.rr-expiry .in.is-past { color: var(--red); }
.rr-activity { font-size: var(--fs-micro); color: var(--text-3); text-align: right; white-space: nowrap; }
.round-row.is-mini { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.round-row.is-mini .rr-sub .when { color: var(--text-2); }
/* Selection continuity: selected records share the arx-brand.css selection tokens (blue, 2026-09-22). */
.round-row.is-active, .round-row.is-active:hover { background: var(--arx-selection-soft); color: var(--on-accent); }
.round-row.is-active .rr-sub, .round-row.is-active .rr-sub .code, .round-row.is-active .rr-sub .rr-cat, .round-row.is-active .rr-goal-text, .round-row.is-active .rr-activity,
.round-row.is-active .rr-expiry .when, .round-row.is-active .rr-expiry .in, .round-row.is-active .rr-expiry .in.is-soon, .round-row.is-active .rr-expiry .in.is-past { color: var(--on-accent-2); }
.round-row.is-active .status { color: var(--on-accent); }

/* Pane 3 — round: condensed hero, then the Customers card. */
.goal { margin-top: var(--sp-3); }
.goal-text { font-size: var(--fs-micro); color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.goal-text strong { color: var(--text); font-weight: 600; }
.goal-text .sep { color: var(--text-3); margin: 0 5px; }
.goal-text .over { color: var(--green); }
.custs-card { margin-top: var(--sp-2); }
.custs-title { position: static; }             /* the hero above it is the sticky head of this pane */
.cust-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto);
  gap: var(--sp-4); align-items: center;
  padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-detail); line-height: 1.35;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cust-row + .cust-row { box-shadow: 0 -1px 0 var(--hairline); }
.cust-row:hover { background: var(--hover); }
.cust-row:active { background: var(--pressed); }
.cr-main { min-width: 0; }
.cr-name { font-size: var(--fs-ui); font-weight: 600; letter-spacing: var(--track-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-legal { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* legal name under the short name */
.cust-row.is-rejected .cr-name { color: var(--text-2); }
.cr-sub { font-size: var(--fs-micro); color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-sub strong { color: var(--text); font-weight: 500; }
.cr-sub .sep { color: var(--text-3); margin: 0 5px; }
.cr-state { text-align: right; font-size: var(--fs-micro); white-space: nowrap; line-height: 1.35; }
.cr-rev { color: var(--text-2); }
.cr-rev .sep { color: var(--text-3); margin: 0 5px; }
.cr-note { color: var(--text-3); margin-top: 1px; }
.cr-note .sep { margin: 0 5px; }
.cr-note .warn { color: var(--amber); }
.cr-note .bad { color: var(--red); }
.cr-act { text-align: right; }
.row-act { font-size: var(--fs-detail); font-weight: 500; white-space: nowrap; }
.cust-row.is-mini { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.cust-row.is-active, .cust-row.is-active:hover { background: var(--arx-selection-soft); color: var(--on-accent); }
.cust-row.is-active .cr-name, .cust-row.is-active .status, .cust-row.is-active .cr-sub strong { color: var(--on-accent); }
.cust-row.is-active .cr-legal, .cust-row.is-active .cr-sub, .cust-row.is-active .cr-rev, .cust-row.is-active .cr-note,
.cust-row.is-active .cr-note .warn, .cust-row.is-active .cr-note .bad, .cust-row.is-active .done-word { color: var(--on-accent-2); }
.cust-row.is-active .row-act { color: var(--on-accent); }
/* At depth 3 the round pane is a selector: title + goal line only. */
.pane-round.is-condensed .hero-meta, .pane-round.is-condensed .hero-action, .pane-round.is-condensed .goal-text, .pane-round.is-condensed .pane-x { display: none; }

/* Pane 4 — letter: tight spec list, PDF row (View opens the on-screen viewer), timeline, activity, actions. */
.reason { font-size: var(--fs-detail); color: var(--red); margin-bottom: var(--sp-3); }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
.terms > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.terms dt { font-size: var(--fs-micro); color: var(--text-2); }
.terms dd { font-size: var(--fs-detail); color: var(--text); overflow-wrap: anywhere; }
.terms dd .sub { display: block; font-size: var(--fs-micro); color: var(--text-3); }
.terms .adj { color: var(--amber); font-size: var(--fs-micro); margin-left: 4px; }
.installments { font-size: var(--fs-detail); color: var(--text-2); margin-top: var(--sp-3); }
.installments li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 4px 0; border-top: 1px solid var(--hairline); }
.installments li:first-child { border-top: 0; }
.pdf-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-detail); }
.pdf-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-detail); color: var(--text-2); }
.pdf-row .pdf-label { color: var(--text); font-weight: 500; }
.pdf-row .rev { color: var(--text-3); }
/* "PDF ready" as a chip: same look as the status word, opens the viewer. */
.status-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.status-btn:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.section { margin-top: var(--sp-5); }
.section > .section-title { font-size: var(--fs-detail); font-weight: 400; color: var(--text-2); margin-bottom: var(--sp-2); }
.timeline { border-top: 1px solid var(--hairline); font-size: var(--fs-detail); }
.timeline li { display: grid; grid-template-columns: 44px 128px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.timeline .rev { font-weight: 600; }
.timeline .when { font-size: var(--fs-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }
.timeline .what { font-size: var(--fs-detail); }
.timeline .changes { font-size: var(--fs-micro); color: var(--text-2); margin-top: 3px; }
.timeline .changes .old { text-decoration: line-through; color: var(--text-3); }
.timeline .changes .arrow { margin: 0 4px; color: var(--text-3); }
.timeline .pdfs { font-size: var(--fs-micro); margin-top: 3px; }
.activity { font-size: var(--fs-detail); color: var(--text-2); }
.activity li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--sp-3); padding: 5px 0; border-top: 1px solid var(--hairline); }
.activity li:first-child { border-top: 0; }
.activity .when { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); }
.activity .what { color: var(--text); }
.activity .more { color: var(--text-2); }
.letter-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); margin-top: var(--sp-5); }

/* ── Sheet ─────────────────────────────────────────────────────── */
.sheet-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--t) var(--ease); }
.sheet {
  position: relative; width: min(680px, 100%); max-height: min(88vh, 900px);
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-3);
  transform: translateY(24px); opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
}
.sheet-root.is-open .sheet-backdrop { opacity: 1; }
.sheet-root.is-open .sheet { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) var(--sp-3); }
.sheet-title { font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--track-ui); }
.sheet-x { font-size: 22px; line-height: 1; color: var(--text-3); width: 32px; height: 32px; border-radius: 50%; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.sheet-x:hover { background: var(--hover); color: var(--text); }
.sheet-body { padding: var(--sp-2) var(--sp-6) var(--sp-5); overflow-y: auto; }
.sheet-body p { color: var(--text-2); }
.sheet-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-6) var(--sp-5); border-top: 1px solid var(--hairline); }
.sheet-foot:empty { display: none; }
@media (min-width: 720px) {
  .sheet-root { align-items: center; padding: var(--sp-5); }
  .sheet { border-radius: var(--r-lg); transform: translateY(12px) scale(0.985); }
}

/* ── Attachment viewer (on-screen PDF, Outlook Web style) ──────── */
/* Above the sheet (a View link inside the history sheet opens over it), below the toast. */
.viewer-root { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.viewer-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.viewer {
  position: relative; width: min(1100px, 100%); height: min(92vh, 1200px);
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-4);
  transform: scale(0.97); opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
}
.viewer-root.is-open .viewer-backdrop { opacity: 1; }
.viewer-root.is-open .viewer { transform: none; opacity: 1; }
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-shrink: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--hairline); background: var(--surface);
}
.viewer-doc { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.viewer-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--red); }
.viewer-names { min-width: 0; }
.viewer-title { font-size: var(--fs-detail); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-sub { font-size: var(--fs-micro); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-sub:empty { display: none; }
.viewer-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.viewer-actions .btn-secondary:hover { text-decoration: none; }
.viewer-actions [hidden] { display: none; }        /* Download is hidden for documents served by ARX Sense */
.viewer-x { font-size: 22px; line-height: 1; color: var(--text-3); width: 32px; height: 32px; border-radius: 50%; margin-left: var(--sp-1); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.viewer-x:hover { background: var(--hover); color: var(--text); }
/* Stage: the browser's PDF plugin fills it; the grey matches Chrome's viewer so the page reads as paper. */
.viewer-stage { position: relative; flex: 1; min-height: 0; background: #525659; }
.viewer-stage iframe { border: 0; width: 100%; height: 100%; display: block; }
.viewer-loading, .viewer-error {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  background: #525659; color: #fff; font-size: var(--fs-detail); text-align: center; padding: var(--sp-5);
}
.viewer-root.is-loading .viewer-loading { display: flex; }
.viewer-root.is-error .viewer-error { display: flex; }
.viewer-root.is-error .viewer-stage iframe { visibility: hidden; }
.viewer-error p { color: inherit; }
.viewer-error a, .viewer-error .link-btn { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.viewer-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: viewer-spin 0.8s linear infinite; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
body.is-locked { overflow: hidden; }

/* Filter sheet: a list of quiet selects */
.filter-list { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Toast ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-detail); box-shadow: var(--shadow-2); z-index: 60;
  max-width: min(560px, calc(100% - 2 * var(--sp-5)));
  animation: toast-in var(--t) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.toast-error { background: var(--red); }
.toast.toast-success { background: var(--green); }

/* ── Dashboard: #/dashboard — a scrolling page on the same tokens ── */
.page.is-dashboard { display: block; height: auto; min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); max-width: var(--max); }
.app.is-dashboard .topbar-inner { max-width: var(--max); }
.dash { display: flex; flex-direction: column; transition: opacity var(--t) var(--ease); }
.dash.is-refreshing .kpis, .dash.is-refreshing .dash-grid { opacity: 0.55; transition: opacity var(--t) var(--ease); }
.dash-toolbar { margin-bottom: var(--sp-5); }
.month-nav { display: inline-flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.05); border-radius: var(--r-pill); padding: 3px; }
.month-btn {
  width: 30px; height: 28px; border-radius: var(--r-pill); font-size: 18px; line-height: 1; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.month-btn:hover { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), var(--ring); }
.month-btn:active { background: var(--pressed); box-shadow: none; }
.month-btn:disabled { color: var(--n-300); cursor: default; background: transparent; box-shadow: none; }
.month-label { min-width: 88px; text-align: center; font-size: var(--fs-detail); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
/* "Updated 3 min ago · Refresh" — same quiet line on the Offers toolbar and the Dashboard toolbar. */
.updated { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.updated .link-btn[disabled] { color: var(--text-3); cursor: default; text-decoration: none; }
/* Measure switch (USD · Tons): the month picker's pill, the toolbar's segmented buttons, sized to its 34px height. */
.measure-seg button { padding: 0 14px; height: 28px; min-width: 56px; }

/* Hero strip: one surface, four tiles divided by hairlines. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--ring); overflow: hidden; }
.kpi { position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kpi + .kpi { box-shadow: -1px 0 0 var(--hairline); }
.kpi-label { font-size: var(--fs-detail); font-weight: 400; color: var(--text-2); }
.kpi-value { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.15; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { font-size: var(--fs-micro); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub .sep { color: var(--text-3); margin: 0 5px; }
.kpi-spark { margin-top: var(--sp-2); color: var(--viz-muted); line-height: 0; }
.spark { display: block; }
.spark-dot { fill: var(--accent-ink); }
.kpi.is-muted .kpi-value { color: var(--text-3); font-weight: 500; }
.kpi-unavailable { color: var(--text-3); }
.dash-activity { color: var(--text-3); margin: var(--sp-3) 0 var(--sp-5) 2px; }
.dash-activity .sep { color: var(--n-300); margin: 0 6px; }

/* Blocks */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: stretch; }
.dash-grid .span-2 { grid-column: span 2; }
.dash-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dash-block { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--ring); padding: var(--sp-4) var(--sp-5) var(--sp-5); min-width: 0; display: flex; flex-direction: column; }
.dash-block > .trend-chart { margin-top: auto; margin-bottom: auto; }
.dash-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.dash-title { font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--track-ui); }
.dash-empty { font-size: var(--fs-detail); color: var(--text-3); padding: var(--sp-4) 0; }
.dash-error { font-size: var(--fs-detail); color: var(--red); padding: var(--sp-3) var(--sp-3); background: var(--red-bg); border-radius: var(--r-sm); }
.dash-fail { padding: var(--sp-8) 0; text-align: center; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }

/* Trend chart: ≤24px columns, rounded data-end, hairline grid, POs as a dot row under the axis. */
.trend-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.tc-grid { stroke: var(--viz-grid); stroke-width: 1; }
.tc-axis { stroke: var(--viz-axis); stroke-width: 1; }
.tc-tick, .tc-x, .tc-po-n { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.tc-year { fill: var(--n-400); font-size: 10px; }
.tc-label { fill: var(--text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-bar { transition: opacity var(--t-fast) var(--ease); }
.tc-offered { fill: var(--viz-offered); }
.tc-accepted { fill: var(--viz-accepted); }
.tc-hit { fill: transparent; }
.tc-band { fill: var(--accent-wash); }
.tc-group.is-current .tc-x { fill: var(--text); font-weight: 600; }
.tc-group:hover .tc-bar { opacity: 0.8; }
.tc-po { fill: var(--accent-ink); }
.tc-po.is-zero { fill: none; stroke: var(--viz-axis); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-micro); color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sw-offered { background: var(--viz-offered); }
.sw-accepted { background: var(--viz-accepted); }
.sw-po { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }

/* Pipeline strip */
.fn-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: transparent; }
.fn-bar.is-empty { background: var(--n-100); }
.fn-seg { display: block; min-width: 4px; height: 100%; }
.fn-seg:first-child { border-radius: 5px 0 0 5px; }
.fn-seg:last-child { border-radius: 0 5px 5px 0; }
.fn-seg:only-child { border-radius: 5px; }
.fn-1 { background: var(--viz-1); } .fn-2 { background: var(--viz-2); } .fn-3 { background: var(--viz-3); }
.fn-4 { background: var(--viz-4); } .fn-5 { background: var(--viz-5); } .fn-6 { background: var(--viz-6); }
.fn-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.fn-stage { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fn-n { font-size: var(--fs-h); font-weight: 600; letter-spacing: var(--track-h); line-height: 1.2; }
.fn-stage.is-zero .fn-n { color: var(--text-3); font-weight: 500; }
.fn-label { font-size: var(--fs-micro); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.fn-foot { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.fn-foot .sep { color: var(--text-3); margin: 0 6px; }
.fn-rejected { color: var(--text-3); }

/* Ranked lists: label · value, then a proportional fill beneath. */
.rank { display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: baseline; padding: var(--sp-2) 0 var(--sp-3); }
.rank-row + .rank-row { border-top: 1px solid var(--hairline); }
.rank-label { font-size: var(--fs-ui); font-weight: 500; letter-spacing: var(--track-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { display: block; font-size: var(--fs-micro); color: var(--text-3); font-weight: 400; }
.rank-val { font-size: var(--fs-detail); color: var(--text); white-space: nowrap; }
.rank-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--n-100); overflow: hidden; margin-top: 4px; }
.rank-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width var(--t-pane) var(--ease-out); }

/* Recent activity: when · what · who, each row a link back into the column flow. */
.recent { display: flex; flex-direction: column; }
.recent-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; }
.recent-row + .recent-row { border-top: 1px solid var(--hairline); }
.recent-when { font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.recent-link { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text); border-radius: var(--r-xs); }
.recent-link:hover { text-decoration: none; }
a.recent-link:hover .recent-who { color: var(--accent-ink); }
.recent-what { font-size: var(--fs-detail); }
.recent-who { font-size: var(--fs-micro); color: var(--text-2); overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.recent-who .sep { color: var(--text-3); margin: 0 5px; }
.recent-ol { color: var(--text-3); margin-left: 8px; }
/* Outcome chips above the recent list — the segmented look, one pill per chip so the row can wrap. */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button {
  padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-micro); color: var(--text-2); background: rgba(0, 0, 0, 0.05);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chips button:hover { color: var(--text); background: rgba(0, 0, 0, 0.08); }
.chips button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), var(--ring); font-weight: 500; }
.chips .count { color: var(--text-3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.recent-chips { margin-bottom: var(--sp-3); }

/* Skeletons: the layout is reserved so nothing shifts when the data lands. */
.skel { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--n-100) 0%, var(--n-50) 50%, var(--n-100) 100%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; }
@keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kpi.is-skeleton { gap: 8px; }
.skel-label { width: 42%; height: 12px; }
.skel-value { width: 60%; height: 28px; }
.skel-sub { width: 50%; height: 11px; }
.dash-block.is-skeleton { display: flex; flex-direction: column; gap: var(--sp-3); }
.skel-title { width: 36%; height: 14px; }
.skel-body { width: 100%; }

/* ── Responsive ────────────────────────────────────────────────── */
/* Mid widths: the full rounds rows lose the goal and activity columns. */
@media (max-width: 1000px) {
  :root { --fs-display: 34px; --fs-title: 26px; }
  .pane-rounds .round-row:not(.is-mini) { grid-template-columns: minmax(0, 1fr) 100px 130px; }
  .pane-rounds .round-row:not(.is-mini) .rr-goal, .pane-rounds .round-row:not(.is-mini) .rr-activity { display: none; }
  .app.depth-3 { --col-rounds: 200px; --col-custs: 240px; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid .span-2 { grid-column: 1 / -1; }
  .dash-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; }
  .dash-col > .dash-block { align-self: start; }
  .kpi { padding: var(--sp-4); }
}
/* Below ~1100px (≈1280px with three deep panes) the categories card becomes a slim rail of initials. */
@media (max-width: 1280px) { .app.depth-3 { --col-cats: 44px; } }
@media (max-width: 1100px) { .app.depth-2 { --col-cats: 44px; } }
@media (max-width: 1280px) {
  .app.depth-3 .cats-title, .app.depth-3 .cat-name, .app.depth-3 .cat-count { display: none; }
  .app.depth-3 .cat-initial { display: block; }
  .app.depth-3 .cats-list { padding: 6px 5px; }
  .app.depth-3 .cat-row { justify-content: center; padding: 8px 0; font-size: var(--fs-nano); font-weight: 600; }
  /* tree modes in the rail: root initials only */
  .app.depth-3 .mode-switch, .app.depth-3 .tree-head, .app.depth-3 .tree-children, .app.depth-3 .tree-total,
  .app.depth-3 .tree-disc, .app.depth-3 .tree-name, .app.depth-3 .tree-sub, .app.depth-3 .tree-meta { display: none; }
  .app.depth-3 .tree-initial { display: block; }
  .app.depth-3 .tree { padding: 6px 5px; }
  .app.depth-3 .tree-row { justify-content: center; padding: 8px 0; font-size: var(--fs-nano); font-weight: 600; }
  .app.depth-3 .tree-node.is-selected > .tree-row { background: var(--arx-selection-soft); color: var(--on-accent); }
}
@media (max-width: 1100px) {
  .app.depth-2 .cats-title, .app.depth-2 .cat-name, .app.depth-2 .cat-count { display: none; }
  .app.depth-2 .cat-initial { display: block; }
  .app.depth-2 .cats-list { padding: 6px 5px; }
  .app.depth-2 .cat-row { justify-content: center; padding: 8px 0; font-size: var(--fs-nano); font-weight: 600; }
  .app.depth-2 .mode-switch, .app.depth-2 .tree-head, .app.depth-2 .tree-children, .app.depth-2 .tree-total,
  .app.depth-2 .tree-disc, .app.depth-2 .tree-name, .app.depth-2 .tree-sub, .app.depth-2 .tree-meta { display: none; }
  .app.depth-2 .tree-initial { display: block; }
  .app.depth-2 .tree { padding: 6px 5px; }
  .app.depth-2 .tree-row { justify-content: center; padding: 8px 0; font-size: var(--fs-nano); font-weight: 600; }
  .app.depth-2 .tree-node.is-selected > .tree-row { background: var(--arx-selection-soft); color: var(--on-accent); }
}
/* Below ~800px: stack behaviour — only the deepest two panes, with a ‹ back link. */
@media (max-width: 800px) {
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .toolbar { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
  .search input { width: 160px; }
  .topbar-inner { grid-template-columns: auto 1fr auto; padding: 0 var(--sp-4); }
  .sections { justify-self: center; }
  .topbar-user { display: none; }
  .user-btn { padding: 3px; }
  /* depth 1: categories as a pill strip above the rounds card */
  .page.depth-1 { grid-template-rows: auto auto auto auto minmax(200px, 1fr); grid-template-columns: minmax(0, 1fr) 0px 0px 0px; }
  .page.depth-1 .pane-cats { grid-column: 1 / -1; grid-row: 4; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; margin-bottom: var(--sp-3); }
  .page.depth-1 .mode-switch { position: static; background: transparent; padding: 0 0 var(--sp-3); }
  .page.depth-1 .mode-seg { width: auto; }
  .page.depth-1 .mode-seg button { flex: 0 0 auto; padding: 4px 14px; }
  .page.depth-1 .pane-cats.is-tree { background: var(--surface); box-shadow: var(--ring); border-radius: var(--r-md); overflow-y: auto; max-height: 42vh; }
  .page.depth-1 .pane-cats.is-tree .mode-switch { position: sticky; background: var(--surface); padding: 10px 10px 8px; }
  .page.depth-1 .cats-title { display: none; }
  .page.depth-1 .cats-list {
    flex-direction: row; gap: 6px; padding: 0 0 var(--sp-2); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4);
  }
  .page.depth-1 .cats-list::-webkit-scrollbar { display: none; }
  .page.depth-1 .cats-list li { flex-shrink: 0; }
  .page.depth-1 .cat-row { width: auto; border-radius: var(--r-pill); padding: 5px 12px; background: rgba(0, 0, 0, 0.05); white-space: nowrap; }
  .page.depth-1 .cat-row:hover { background: rgba(0, 0, 0, 0.08); }
  .page.depth-1 .cat-row.is-active, .page.depth-1 .cat-row.is-active:hover { background: var(--arx-selection-soft); color: var(--on-accent); }
  .page.depth-1 .pane-rounds { grid-column: 1; grid-row: 5; margin-left: 0; }
  .page.depth-1 .round-row { grid-template-columns: minmax(0, 1fr) 100px; }
  .page.depth-1 .rr-goal, .page.depth-1 .rr-expiry, .page.depth-1 .rr-activity { display: none; }
  /* depth 2: rounds selector + round */
  .page.depth-2 { grid-template-columns: 0px minmax(200px, 0fr) minmax(0, 1fr) 0px; }
  .page.depth-2 .pane-cats { display: none; }
  .page.depth-2 .pane-rounds { margin-left: 0; }
  .page.depth-2 .pane-round { margin-left: var(--sp-4); }
  /* depth 3: customers selector + letter */
  .page.depth-3 { grid-template-columns: 0px 0px minmax(200px, 0fr) minmax(0, 1fr); }
  .page.depth-3 .pane-cats, .page.depth-3 .pane-rounds { display: none; }
  .page.depth-3 .pane-round { margin-left: 0; }
  .page.depth-3 .pane-letter { margin-left: var(--sp-4); }
  .pane .back { display: inline-flex; }
  .pane-x { display: none; }
  .hero-row { flex-wrap: wrap; }
  .cust-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-act { grid-column: 1 / -1; text-align: left; }
  .terms { grid-template-columns: 1fr; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .form-grid > .span-2 { grid-column: auto; }
  .timeline li { grid-template-columns: 44px minmax(0, 1fr); }
  .timeline .when { grid-column: 2; }
  .timeline li > span:last-child { grid-column: 1 / -1; }
  .activity li { grid-template-columns: 1fr; gap: 2px; }
  /* the attachment viewer takes the whole screen */
  .viewer-root { padding: 0; }
  .viewer { width: 100%; height: 100%; max-height: none; border-radius: 0; transform: translateY(12px); }
  .viewer-bar { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); }
  .viewer-open { display: none; }
  /* dashboard: tiles 2×2, blocks in one column */
  .page.is-dashboard { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi + .kpi { box-shadow: none; }
  .kpi:nth-child(2n) { box-shadow: -1px 0 0 var(--hairline); }
  .kpi:nth-child(n + 3) { box-shadow: 0 -1px 0 var(--hairline); }
  .kpi:nth-child(4) { box-shadow: 0 -1px 0 var(--hairline), -1px 0 0 var(--hairline); }
  .dash-grid, .dash-col { grid-template-columns: minmax(0, 1fr); }
  .dash-block-head { flex-wrap: wrap; }
  .dash-toolbar { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
  .recent-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 720px) {
  .dash-activity { white-space: normal; line-height: 1.8; }
  .fn-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
  .viewer, .viewer-backdrop { transition: none; }
  .viewer-spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.3); }
  .skel { animation: none; background: var(--n-100); }
}

/* Column headers for every list pane — same grid as the rows, quiet type. */
.list-head, .list-head:hover { cursor: default; background: transparent; color: var(--text-3); font-size: var(--fs-micro); padding: 2px 10px 6px; }
.list-head > * { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-head .rr-activity, .list-head .cr-action { text-align: right; }