/* ============================================================
   visa.css — VISA Commodities risk dashboard
   Round 2 token + class extension. Single stylesheet, self-hosted
   fonts, ZERO external requests of any kind (no CDN, no preconnect,
   no dns-prefetch). WOFF2 files ship in static/fonts/ next to this sheet; engineering serves them from /static/fonts/.
   Class reference: styleguide.html · chart classes: charts.html
   ============================================================ */

@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/static/fonts/Spectral-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("/static/fonts/Spectral-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* neutrals (warm paper -> cool ink) */
  --paper: #F7F5F1;        /* page surface */
  --panel: #FCFBF9;        /* cards, tables, app bar */
  --mist: #F2F0EB;         /* NEW r2: hover surfaces, code blocks */
  --ash: #EFEDE8;          /* NEW r2: skeleton fills, disabled, chart bands */
  --hairline: #E3E0D9;     /* rules, row separators, chart grid */
  --hairline-2: #DAD7CF;   /* skeleton strokes (named in r2) */
  --hairline-3: #C9C5BC;   /* skeleton marks, roll ticks (named in r2) */
  --stone: #B5B1A8;        /* input borders, faint dashed tags */
  --line: #D8D4CB;         /* panel borders */
  --slate: #8A8F97;        /* tertiary text, axis labels */
  --graphite: #5B6068;     /* secondary text, overlay series */
  --ink-soft: #3A3D42;     /* prose */
  --ink: #1C1E21;          /* text, primary series, readout band */
  /* accent — the only non-semantic hue */
  --navy: #174891;
  --navy-ring: rgba(23, 72, 145, 0.18);
  /* semantic triad — risk state ONLY */
  --green: #1F7A46;
  --amber: #B07908;
  --red: #B3261E;
  --green-on-dark: #5CBF8A;
  --red-on-dark: #E5534B;
  --dim-on-dark: #9AA0A8;
  /* brand orange #F26522 is LOGO ONLY — deliberately not a token */

  /* spacing — 4px base, one vertical rhythm */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* type */
  --font-display: "Spectral", serif;
  --font-ui: "IBM Plex Sans", sans-serif;
  --font-data: "IBM Plex Mono", monospace;
  --t-display-l: 600 24px/30px var(--font-display);
  --t-display-m: 600 19px/26px var(--font-display);
  --t-display-s: 600 18px/24px var(--font-display);
  --t-ui: 400 13px/20px var(--font-ui);
  --t-ui-s: 400 12.5px/19px var(--font-ui);
  --t-ui-xs: 400 12px/18px var(--font-ui);
  --t-label: 500 10px/14px var(--font-data);      /* +0.08em tracked, uppercase */
  --t-data-xl: 500 26px/32px var(--font-data);
  --t-data-l: 500 22px/28px var(--font-data);
  --t-data: 400 12px/16px var(--font-data);
  --t-data-s: 400 10.5px/14px var(--font-data);
  --t-annot: 400 9.5px/12px var(--font-data);

  /* charts */
  --chart-primary: var(--ink);      /* primary series, 1.5px */
  --chart-overlay: var(--graphite); /* secondary series, 1px */
  --chart-grid: var(--hairline);    /* horizontal hairlines only */
  --chart-skeleton: var(--hairline-2);
  --chart-band: var(--ash);
  --chart-detail-min: 6px;  /* below this rendered span, add a DECLARED xN detail strip — never a silent rescale */
}

/* ---------- base ---------- */
body { margin: 0; background: var(--paper); }
.page-root { min-height: 100vh; font: var(--t-ui); font-weight: 400; font-family: var(--font-ui); color: var(--ink); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- chrome: app bar ---------- */
.appbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.appbar-inner { max-width: 1376px; margin: 0 auto; padding: 0 var(--sp-6); height: 54px; display: flex; align-items: center; gap: 28px; }
.appbar-logo { height: 22px; display: block; }
.appbar-system { font: var(--t-label); letter-spacing: 0.1em; color: var(--slate); border-left: 1px solid var(--line); padding-left: 28px; font-size: 10.5px; }
.appbar-nav { display: flex; gap: 22px; align-items: baseline; margin-left: var(--sp-3); }
.appbar-user { margin-left: auto; font-family: var(--font-data); font-size: 11px; color: var(--graphite); }
.nav-current { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--navy); padding-bottom: 2px; }
.nav-idle { color: var(--slate); }
.link { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; transition: opacity 150ms; }
.link:hover { opacity: 0.72; }
.link-plain { color: var(--navy); transition: opacity 150ms; }
.link-plain:hover { opacity: 0.72; }

/* ---------- exceptions readout ---------- */
.readout { background: var(--ink); }
.readout-inner { max-width: 1376px; margin: 0 auto; padding: 0 var(--sp-6); height: 34px; display: flex; align-items: center; gap: 18px; font-family: var(--font-data); font-size: 11.5px; color: var(--paper); }
.readout-scope { color: var(--dim-on-dark); letter-spacing: 0.08em; }
.readout-sep { color: var(--dim-on-dark); }
.readout-stamp { margin-left: auto; color: var(--dim-on-dark); }
.gate-pass { color: var(--green-on-dark); font-weight: 600; }
.readout-demo { background: var(--ink); height: 34px; display: flex; align-items: center; gap: 18px; padding: 0 var(--sp-4); font-family: var(--font-data); font-size: 11.5px; color: var(--paper); }
.readout-demo--clean { color: var(--dim-on-dark); }

/* ---------- risk cockpit ---------- */
.cockpit { background: var(--panel); border-bottom: 1px solid var(--line); }
.cockpit-inner { max-width: 1376px; margin: 0 auto; padding: var(--sp-4) var(--sp-6) 20px; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 40px; }
.cockpit-label { font: var(--t-label); letter-spacing: 0.08em; color: var(--slate); text-transform: uppercase; }
.cockpit-value { font: var(--t-data-xl); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }
.cockpit-unit { font: var(--t-ui-xs); color: var(--graphite); }
.cockpit-chart { display: block; margin-top: var(--sp-1); }
.cockpit-note { font: var(--t-data-s); color: var(--graphite); margin-top: var(--sp-1); }

/* small multiples */
.multiples { display: grid; grid-template-columns: 62px 1fr auto; gap: var(--sp-1) 10px; align-items: center; margin-top: var(--sp-2); }
.multiples-name { font-family: var(--font-data); font-size: 10px; color: var(--graphite); }
.multiples-name--ghost { color: var(--slate); }
.multiples-value { font-family: var(--font-data); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- badge family ---------- */
.badge { font-family: var(--font-data); font-weight: 500; letter-spacing: 0.06em; }
.badge--md { font-size: 10px; padding: 3px 8px; }
.badge--md.badge--filled { padding: 4px 8px; }
.badge--sm { font-size: 9.5px; padding: 2px 7px; }
.badge--sm.badge--filled { padding: 3px 7px; }
.badge--compact { font-size: 9.5px; padding: 1px 6px; }
.badge--t1 { color: var(--graphite); border: 1px dashed var(--slate); }
.badge--t2 { color: var(--navy); border: 1px solid var(--navy); }
.badge--pass { color: var(--green); border: 1px solid var(--green); }
.badge--stale { color: var(--paper); background: var(--graphite); }
.badge--fail { color: var(--paper); background: var(--red); }
.badge--skeleton { font-family: var(--font-data); font-size: 8.5px; letter-spacing: 0.05em; color: var(--slate); border: 1px dashed var(--stone); padding: 1px 5px; }

/* ---------- complex tile ---------- */
.tile { background: var(--panel); border: 1px solid var(--line); padding: var(--sp-4) 18px; }
a.tile { display: block; text-decoration: none; color: inherit; transition: border-color 150ms; }
a.tile:hover { border-color: var(--stone); }
.tile-head { display: flex; align-items: baseline; justify-content: space-between; }
.tile-name { font: var(--t-display-s); }
.tile-name--ghost { color: var(--graphite); }
.tile-flag { font-family: var(--font-data); font-size: 9.5px; letter-spacing: 0.08em; color: var(--graphite); }
.tile-mtm { font: var(--t-data-l); font-variant-numeric: tabular-nums; margin-top: 10px; }
.tile-mtm-unit { font-size: 11px; font-family: var(--font-ui); font-weight: 400; color: var(--graphite); }
.tile-chart { display: block; margin-top: 2px; }
.tile-split { display: grid; grid-template-columns: auto 1fr auto; gap: 3px var(--sp-2); align-items: center; margin-top: var(--sp-2); font-family: var(--font-data); font-size: 11px; font-variant-numeric: tabular-nums; }
.split-label { color: var(--graphite); font-family: var(--font-ui); font-size: 12px; }
.split-num { text-align: right; }
.swatch-solid { width: 8px; height: 8px; background: var(--ink); display: inline-block; }
.swatch-outline { width: 8px; height: 8px; border: 1px solid var(--graphite); box-sizing: border-box; display: inline-block; }
.tile-tonnage { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: var(--sp-2); display: flex; align-items: center; gap: 10px; }
.tonnage-num { font-family: var(--font-data); font-size: 11px; font-variant-numeric: tabular-nums; }
.tonnage-dir { color: var(--graphite); }
.tile-bullet { margin-top: 10px; }
.tile-caption { font-family: var(--font-data); font-size: 10px; color: var(--graphite); margin-top: 3px; }
.tile-caption--ghost { color: var(--slate); }
.tile-worst { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.tile-worst-text { font-size: 12px; color: var(--ink-soft); }
.tile-stamp { font-family: var(--font-data); font-size: 10px; color: var(--slate); margin-top: var(--sp-2); }
.tile-copy { font: var(--t-ui-xs); color: var(--graphite); margin-top: 6px; }
.tile-copy--ghost { font: var(--t-ui-xs); color: var(--slate); margin-top: var(--sp-2); }
.tile-spark { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: var(--sp-2); display: flex; align-items: center; gap: 10px; }

/* ---------- layout ---------- */
.content { max-width: 1376px; margin: 0 auto; }
.content--home { padding: var(--sp-5) var(--sp-6) var(--sp-3); }
.content--coal { padding: var(--sp-5) var(--sp-6) 0; }
.content--intake { padding: var(--sp-5) var(--sp-6) 0; }
.content--report { max-width: 1080px; padding: var(--sp-5) var(--sp-6) 0; }
.tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.page-title { font: var(--t-display-l); margin: 0; }
.section-title { font: var(--t-display-m); margin: var(--sp-5) 0 10px; }
.section-title--first { margin: 0 0 10px; }
.section-title--ghost { color: var(--graphite); }
.rule-line { font: var(--t-ui-s); color: var(--ink-soft); margin-top: var(--sp-2); }

/* ---------- reference block ---------- */
.card { background: var(--panel); border: 1px solid var(--line); padding: 14px var(--sp-4); }
.card--flush { background: var(--panel); border: 1px solid var(--line); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.ref-name { font-weight: 600; font-size: 13px; }
.ref-source { font-family: var(--font-data); font-size: 10px; color: var(--slate); }
.ref-value { font: var(--t-data-l); font-variant-numeric: tabular-nums; margin-top: 6px; }
.ref-unit { font-size: 11px; font-family: var(--font-ui); font-weight: 400; color: var(--graphite); }
.ref-stamp { font: var(--t-data-s); color: var(--graphite); margin-top: 6px; }
.ref-spark { display: flex; align-items: center; gap: 10px; margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.refs-mini { display: grid; grid-template-columns: 1fr auto auto; gap: 6px var(--sp-3); align-items: baseline; margin-top: 10px; }
.refs-mini-name { font-size: 12px; color: var(--ink-soft); }
.refs-mini-value { font-family: var(--font-data); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.refs-mini-unit { font-size: 10px; color: var(--graphite); }
.refs-mini-date { font-family: var(--font-data); font-size: 10px; color: var(--slate); }

/* ---------- positions table ---------- */
.table-scroll { background: var(--panel); border: 1px solid var(--line); max-height: 420px; overflow-y: auto; }
.positions { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.positions th { position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--ink); text-align: left; font: var(--t-label); letter-spacing: 0.06em; color: var(--graphite); padding: var(--sp-2) 10px 6px; white-space: nowrap; }
.positions th:first-child { padding-left: var(--sp-4); }
.positions th:last-child { padding: var(--sp-2) var(--sp-4) 6px 10px; }
.positions td { font: var(--t-data); padding: var(--sp-2) 10px; border-bottom: 1px solid var(--hairline); }
.positions td:first-child { padding-left: var(--sp-4); white-space: nowrap; }
.positions td:last-child { padding: var(--sp-2) var(--sp-4) var(--sp-2) 10px; }
.positions tbody tr:hover td { background: var(--mist); }
.positions .num { text-align: right; }
.positions .cell-text { font-family: var(--font-ui); font-size: 12.5px; white-space: nowrap; }
.positions tfoot td { border-top: 1px solid var(--hairline-3); border-bottom: none; }
.positions tr.last td { border-bottom: none; }
.positions--demo th:first-child { padding-left: 14px; }
.positions--demo th:last-child { padding: var(--sp-2) 14px 6px 10px; }
.positions--demo td:first-child { padding-left: 14px; }
.positions--demo td:last-child { padding: var(--sp-2) 14px var(--sp-2) 10px; }
.foot-note { font-size: 11px; color: var(--graphite); }
.foot-total { font-weight: 600; }
.prop { display: flex; align-items: center; gap: var(--sp-2); }
.prop-pct { font-family: var(--font-data); font-size: 11px; color: var(--graphite); }
.method-name { font-family: var(--font-ui); font-size: 12px; }
.method-formula { font: var(--t-data-s); color: var(--graphite); display: block; }
.cell-dim { color: var(--slate); }
.hatch { height: 10px; width: 120px; background: repeating-linear-gradient(45deg, var(--ash) 0 4px, var(--hairline) 4px 8px); }

/* ---------- QP window ---------- */
.qp-head { display: flex; justify-content: space-between; align-items: baseline; }
.qp-id { font-family: var(--font-data); font-size: 12px; }
.qp-days { font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; }
.qp-dim { color: var(--graphite); }
.qp-foot { display: flex; justify-content: space-between; font: var(--t-data-s); color: var(--graphite); margin-top: 6px; }
.basis-head { display: flex; align-items: center; gap: 10px; }
.basis-name { font-size: 13px; font-weight: 600; }
.basis-copy { font: var(--t-ui-s); color: var(--graphite); margin-top: var(--sp-2); }
.placeholder-row { background: var(--panel); border: 1px solid var(--line); padding: 14px var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.placeholder-copy { font: var(--t-ui-s); color: var(--graphite); }

/* ---------- data intake ---------- */
.banner { border: 1px dashed var(--slate); background: var(--panel); margin-top: 14px; padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.banner-count { font: var(--t-label); letter-spacing: 0.08em; color: var(--graphite); flex: none; }
.banner-doc { font-size: 13px; }
.banner-link { margin-left: auto; white-space: nowrap; }
.mono-12 { font-family: var(--font-data); font-size: 12px; }
.category { background: var(--panel); border: 1px solid var(--line); }
.category-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); }
.category-name { font-weight: 600; font-size: 14px; }
.category-formats { font-family: var(--font-data); font-size: 10px; color: var(--slate); }
.category-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.category-body--split { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.dropzone { border: 1px dashed var(--slate); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 92px; transition: border-color 150ms; }
.dropzone:hover { border-color: var(--graphite); }
.dropzone--slim { flex-direction: row; gap: var(--sp-2); height: 44px; min-height: 0; }
.dropzone-hint { font: var(--t-data-s); color: var(--graphite); }
.dropzone-alt { font-size: 12px; color: var(--graphite); }
.empty-note { font: var(--t-data-s); color: var(--slate); margin-top: var(--sp-3); }
.history { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.history th { border-bottom: 2px solid var(--ink); text-align: left; font: var(--t-label); letter-spacing: 0.06em; color: var(--graphite); padding: var(--sp-1) 10px 5px; }
.history th:first-child { padding-left: 0; }
.history th:last-child { padding: var(--sp-1) 0 5px 10px; }
.history td { font-family: var(--font-data); font-size: 11.5px; padding: var(--sp-2) 10px; border-bottom: 1px solid var(--hairline); }
.history td:first-child { padding-left: 0; }
.history td:last-child { padding: var(--sp-2) 0 var(--sp-2) 10px; }
.history tbody tr:hover td { background: var(--mist); }
.history--lg td { font-size: 12px; }
.history tr.last td { border-bottom: none; }
.doc-note { display: block; font-family: var(--font-ui); font-size: 10.5px; color: var(--slate); }

/* ---------- extraction fields ---------- */
.back { font-size: 12.5px; }
.report-head { display: flex; align-items: baseline; gap: 14px; margin-top: var(--sp-3); flex-wrap: wrap; }
.report-doc { font-family: var(--font-data); font-size: 14px; }
.report-meta { font: var(--t-data-s); color: var(--graphite); margin-top: var(--sp-2); }
.fields { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fields th { border-bottom: 2px solid var(--ink); text-align: left; font: var(--t-label); letter-spacing: 0.06em; color: var(--graphite); padding: var(--sp-2) 10px 6px; }
.fields th:first-child { padding-left: var(--sp-4); width: 180px; }
.fields th:nth-child(3) { width: 200px; }
.fields th:last-child { padding: var(--sp-2) var(--sp-4) 6px 10px; width: 140px; }
.fields td { padding: var(--sp-2) 10px; border-bottom: 1px solid var(--hairline); }
.fields td:first-child { padding-left: var(--sp-4); font-size: 12.5px; color: var(--ink-soft); }
.fields td:last-child { padding: var(--sp-2) var(--sp-4) var(--sp-2) 10px; }
.fields tbody tr:hover td { background: var(--mist); }
.fields .cell-value { font: var(--t-data); }
.fields .cell-clause { font-family: var(--font-data); font-size: 11px; color: var(--graphite); }
.fields .cell-note { font-size: 10.5px; }
.fields tr.last td { border-bottom: none; }

/* ---------- forms & actions ---------- */
.btn { font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: var(--sp-2) 18px; cursor: pointer; white-space: nowrap; border: none; transition: opacity 150ms, border-color 150ms; }
.btn:hover { opacity: 0.88; }
.btn--primary { color: var(--paper); background: var(--navy); }
.btn--ghost { color: var(--navy); background: transparent; border: 1px solid var(--navy); }
.btn--sm { padding: 7px var(--sp-4); }
.input { font-family: var(--font-data); font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); padding: 7px 10px; width: 240px; margin-top: var(--sp-1); outline: none; transition: border-color 150ms; }
.input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy-ring); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.lockout { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 10px; font-size: 12.5px; color: var(--ink); }
.form-actions { display: flex; gap: 10px; margin-top: var(--sp-3); }
.actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.actions-note { font: var(--t-ui-xs); color: var(--slate); }

/* ---------- audit footer ---------- */
.footer { max-width: 1376px; margin: var(--sp-5) auto 0; padding: var(--sp-3) var(--sp-6) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: 18px; font: var(--t-data-s); color: var(--slate); }
.footer--narrow { max-width: 1080px; }

/* ============================================================
   CHART CLASSES (r2) — every chart is server-rendered inline SVG.
   Contracts: charts.html. No canvas, no library, no scripts.
   ============================================================ */
.chart-block { background: var(--panel); border: 1px solid var(--line); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.chart-title { font: var(--t-label); letter-spacing: 0.08em; color: var(--slate); text-transform: uppercase; }
.chart-meta { font: var(--t-annot); color: var(--slate); }
.chart-svg { display: block; margin-top: var(--sp-3); }
.chart-foot { font: var(--t-annot); line-height: 1.6; color: var(--slate); margin-top: var(--sp-2); }
/* SVG element classes */
.cg { stroke: var(--chart-grid); stroke-width: 1; }                    /* grid line */
.cg--zero { stroke: var(--slate); }                                    /* zero axis */
.cs { fill: none; stroke: var(--chart-primary); stroke-width: 1.5; }   /* primary series */
.cs--overlay { stroke: var(--chart-overlay); stroke-width: 1; }
.cs--skeleton { stroke: var(--chart-skeleton); stroke-width: 1; }
.cband { fill: var(--chart-band); }                                    /* parameter band */
.ctick { stroke: var(--hairline-3); stroke-width: 1; }                 /* roll / window ticks */
.ctick--elapsed { stroke: var(--graphite); }
.cbreak { stroke: var(--slate); stroke-width: 1; }                     /* axis break mark */
.cdot { fill: var(--ink); }                                            /* max / current dot */
.cdot--min { fill: var(--graphite); }
.cdot--hollow { fill: var(--panel); stroke: var(--graphite); stroke-width: 1; } /* roll-flagged day */
.climit { stroke: var(--graphite); stroke-width: 2; }                  /* hard limit mark */
.climit--stop { stroke: var(--ink); }
.climit--unsigned { stroke: var(--navy); stroke-dasharray: 3 2; }
.crange { stroke: var(--graphite); stroke-width: 2; }                  /* stress span */
.cavg { fill: none; stroke: var(--navy); stroke-width: 1; }            /* QP running average */
.ca { font-family: var(--font-data); font-size: 9.5px; fill: var(--slate); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }  /* annotation text */
.ca--ink { fill: var(--ink); font-weight: 500; }
.ca--graphite { fill: var(--graphite); }
.ca--navy { fill: var(--navy); }
.ca--x { font-size: 9px; letter-spacing: 0.05em; }
.cbadge-box { fill: var(--panel); stroke: var(--navy); stroke-width: 1; }
.cbadge-box--t1 { stroke: var(--slate); stroke-dasharray: 3 2; }
.cbadge { font-family: var(--font-data); font-size: 8px; letter-spacing: 0.06em; fill: var(--navy); }
.cbadge--t1 { fill: var(--graphite); }
/* specimen stamp — REQUIRED on any synthetic series, anywhere */
.stamp { font-family: var(--font-data); font-size: 9px; letter-spacing: 0.08em; color: var(--slate); border: 1px dashed var(--stone); padding: 2px 6px; white-space: nowrap; }
/* data contract block (charts.html) */
.contract { font-family: var(--font-data); font-size: 10.5px; color: var(--graphite); background: var(--mist); border: 1px solid var(--hairline); padding: 10px var(--sp-3); margin-top: var(--sp-2); line-height: 1.7; }
.contract strong { color: var(--ink); font-weight: 600; }

/* ---------- styleguide sheet presentation ---------- */
.sheet-wrap { min-height: 100vh; display: flex; justify-content: center; padding: 40px var(--sp-5); font-family: var(--font-ui); color: var(--ink); font-size: 13px; }
.sheet-wrap { background: #EBE9E4; }
.sheet { width: 1080px; background: var(--paper); border: 1px solid var(--line); padding: var(--sp-7) 56px 56px; box-sizing: border-box; }
.masthead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.masthead-logo { height: 22px; display: block; }
.masthead-title { font: 600 28px/34px var(--font-display); margin: 10px 0 0; }
.masthead-meta { font-family: var(--font-data); font-size: 11px; color: var(--graphite); text-align: right; }
.sg-section { margin-top: 36px; }
.sg-h { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin: 0 0 var(--sp-3); }
.sg-p { font: var(--t-ui-s); line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.sg-p--tight { margin: 0 0 10px; }
.sg-note { font-size: 11.5px; color: var(--slate); margin-top: 6px; }
.sg-fine { font-size: 12px; color: var(--graphite); line-height: 1.5; margin: var(--sp-3) 0 0; }
.sg-foot { margin-top: 40px; border-top: 1px solid var(--line); padding-top: var(--sp-3); font: var(--t-data-s); color: var(--slate); }
.sg-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); }
.swatch { height: 40px; }
.swatch--paper { background: var(--paper); border: 1px solid var(--line); }
.swatch--mist { background: var(--mist); border: 1px solid var(--hairline); }
.swatch--ash { background: var(--ash); }
.swatch--hairline { background: var(--hairline); }
.swatch--slate { background: var(--slate); }
.swatch--graphite { background: var(--graphite); }
.swatch--ink { background: var(--ink); }
.swatch--navy { background: var(--navy); }
.swatch--semantic { background: repeating-linear-gradient(45deg, #1F7A46 0 10px, #B07908 10px 20px, #B3261E 20px 30px); }
.swatch--orange { background: #F26522; }
.swatch-label { font-family: var(--font-data); font-size: 9.5px; margin-top: var(--sp-1); }
.typespec { display: grid; grid-template-columns: 110px 1fr auto; row-gap: 7px; column-gap: 20px; align-items: baseline; margin-top: 18px; }
.spec-key { font-family: var(--font-data); font-size: 10px; color: var(--graphite); }
.spec-key--dim { color: var(--slate); font-size: 9.5px; }
.ex-display { font: var(--t-display-m); }
.ex-body { font-weight: 500; }
.ex-data { font-family: var(--font-data); font-size: 13px; font-variant-numeric: tabular-nums; }
.dim-note { font-size: 12px; color: var(--graphite); }
.callout { border: 1px solid var(--line); background: var(--panel); padding: var(--sp-3) var(--sp-4); margin-top: 18px; }
.callout-title { font-weight: 600; font-size: 12.5px; }
.callout-body { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin-top: var(--sp-1); }
.code { font-family: var(--font-data); font-size: 10.5px; color: var(--graphite); background: var(--mist); border: 1px solid var(--hairline); padding: 10px var(--sp-3); margin-top: var(--sp-2); line-height: 1.6; }
.spec-grid { display: grid; grid-template-columns: 170px 1fr; row-gap: var(--sp-3); column-gap: 20px; align-items: center; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.demo-row { border: 1px solid var(--line); background: var(--panel); padding: 14px var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.demo-tag { font-family: var(--font-data); font-size: 10px; color: var(--slate); }
.demo-divider { border-left: 1px solid var(--hairline); height: 28px; }
.idioms { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px var(--sp-5); }
.idiom-label { font: var(--t-label); letter-spacing: 0.06em; color: var(--graphite); margin-bottom: 6px; text-transform: uppercase; }
.spec-caption { font-size: 11.5px; color: var(--slate); margin-top: var(--sp-1); }
.sg-sub { border-top: 1px solid var(--hairline); margin-top: 20px; padding-top: var(--sp-4); }
.with-badge { display: flex; align-items: center; gap: 10px; }
.token-table { width: 100%; border-collapse: collapse; }
.token-table td { font-family: var(--font-data); font-size: 10.5px; color: var(--graphite); padding: 5px 10px 5px 0; border-bottom: 1px solid var(--hairline); }
.token-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.token-table tr:last-child td { border-bottom: none; }

/* ---------- utilities ---------- */
.chart { display: block; }
.flex-none { flex: none; }
.nowrap { white-space: nowrap; }
.self-start { justify-self: start; }
.mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-26 { margin-top: 24px; }


/* ============================================================
   PROJECT ADDITIONS (engine-side, not in the design pack):
   login form, legacy-main fallback, intake extras, readout
   variants and the computed-row treatment. Kept on the R2
   tokens; nothing here overrides a pack class.
   ============================================================ */
.muted { color: var(--slate); font-size: 12px; }
.readout--clean .readout-inner { color: #9AA0A8; }
.readout-breach { color: #E5534B; font-weight: 600; }
.input--sm { font: var(--t-data); color: var(--ink); background: var(--paper); border: 1px solid #B5B1A8; padding: 5px 8px; width: 100%; box-sizing: border-box; outline: none; }
.input--sm:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(23, 72, 145, 0.18); }
.fields tr.row-computed td { background: var(--mist); }
form.login { max-width: 340px; margin: 60px auto; background: var(--panel); padding: var(--sp-5); border: 1px solid var(--line); font-family: var(--font-ui); }
form.login .brand { font: var(--t-display-s); }
form.login input { display: block; width: 100%; box-sizing: border-box; font-family: var(--font-data); font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid #B5B1A8; padding: 7px 10px; margin: var(--sp-1) 0 var(--sp-3); outline: none; }
form.login input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(23, 72, 145, 0.18); }
form.login label { display: block; font-size: 12px; font-weight: 600; color: #3A3D42; }
form.login button { width: 100%; font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 9px 18px; color: var(--paper); background: var(--navy); border: none; cursor: pointer; }
.err { font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--sp-2) 0; margin-bottom: 10px; }
main.legacy { padding: 20px var(--sp-6); max-width: 1376px; margin: 0 auto; font-family: var(--font-ui); color: var(--ink); font-size: 13px; }
main.legacy h1 { font: var(--t-display-l); }
main.legacy h2 { font: var(--t-display-m); margin-top: var(--sp-5); }
main.legacy table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; background: var(--panel); border: 1px solid var(--line); }
main.legacy th { border-bottom: 2px solid var(--ink); text-align: left; font: var(--t-label); letter-spacing: 0.06em; color: var(--graphite); padding: 8px 10px 6px; }
main.legacy td { font: var(--t-data); padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
main.legacy td.num, main.legacy th.num { text-align: right; }
.pill { display: inline-block; font-family: var(--font-data); letter-spacing: 0.06em; font-size: 9.5px; padding: 2px 7px; text-transform: uppercase; }
.rag-green { color: var(--green); border: 1px solid var(--green); }
.rag-amber, .rag-orange { color: var(--amber); border: 1px solid var(--amber); }
.rag-red { color: var(--paper); background: var(--red); }
.rag-grey { color: var(--graphite); border: 1px dashed var(--slate); }
.badge.warn { font-size: 9.5px; padding: 2px 7px; color: var(--navy); border: 1px solid var(--navy); text-transform: uppercase; }
.alert { border: 1px solid var(--red); color: var(--red); background: var(--panel); padding: 10px 14px; margin: 6px 0; font: var(--t-data); }
.demo { border: 1px dashed var(--slate); color: var(--graphite); background: var(--panel); padding: var(--sp-2) var(--sp-3); font-size: 12px; margin-bottom: 14px; }
.dropzone input[type="file"] { font-family: var(--font-data); font-size: 11px; color: var(--graphite); max-width: 210px; }

/* R2 inline-style absorption: layout glue promoted to named utilities. */
.u-cap { text-transform: capitalize; }
.u-chart-pad { padding: 10px 14px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }
.u-ml-auto { margin-left: auto; }
.u-strong { font-weight: 700; }
.u-hidden { display: none; }
.u-inline { display: inline; }
.u-navy { color: var(--navy); }
.u-inline-actions { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); }
.cockpit-inner--three { grid-template-columns: 1.25fr 1fr 1.4fr; }