/* ══════════════════════════════════════════════════════════════════════════════
   THE BRIEF — DESIGN SYSTEM v1  (public/ds.css)

   ONE source for type, space, colour, radius, shadow and the shared components
   (card, KPI tile, table, button, tag/pill, tab strip, banner).

   PRESENTATION ONLY. Nothing here may change a number, a label, an order, a
   handler or what is shown — only how it looks. Every rule is scoped, so a page
   is on the system only when it opts in:

     html.ds                     — the preview switch (?ds=1 on, ?ds=0 off;
                                   remembered per browser in localStorage)
     .ds-scope                   — the elements of a page that are ON the system

   Rollout is "add .ds-scope to a page's elements". Revert is removing it.
   Today ONLY the Karin Herzog Overview is in scope (the proposal for JP).

   `!important` appears only where a rule must outrank an INLINE style that the
   page markup or a renderer writes; each one says so. Nothing outside .ds-scope
   is touched, so a page that is not opted in renders byte-for-byte as before.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── colour: cream + charcoal, ONE accent ─────────────────────────────────
     Contrast measured on --ds-surface (#FFF); every one is >= 4.5:1 on all four surfaces:           */
  --ds-bg:#F8F7F3;
  --ds-surface:#FFFFFF;
  --ds-surface-2:#F4F2ED;          /* quiet fill: table hover, inset panels    */
  --ds-line:#E8E4DB;               /* hairlines                                 */
  --ds-line-strong:#D6D1C5;
  --ds-text:#1A1915;               /* 17.6:1  primary — titles, hero figures   */
  --ds-text-2:#4F4C44;             /*  8.6:1  supporting text                  */
  --ds-text-3:#6B675E;             /*  5.6:1  labels, captions, source lines   */
  --ds-accent:#8A6410;             /*  5.4:1  the one accent (KH gold, deepened)*/
  --ds-accent-soft:#FBF7EC;
  --ds-accent-line:#E9DDBD;
  --ds-pos:#1B6B44;  --ds-pos-soft:#EEF6F1;  --ds-pos-line:#BFDCCB;   /* 6.5:1 */
  --ds-neg:#A62626;  --ds-neg-soft:#FBF1F0;  --ds-neg-line:#EBC3C0;   /* 7.2:1 */
  --ds-warn:#7A5200; --ds-warn-soft:#FDF6E6; --ds-warn-line:#EBD9A6;  /* 6.9:1 */
  --ds-info:#1F4F86; --ds-info-soft:#EEF3FA; --ds-info-line:#C5D6EC;  /* 8.3:1 */

  /* ── type ─────────────────────────────────────────────────────────────────── */
  --ds-font-display:'Instrument Serif',Georgia,serif;   /* page + section titles */
  --ds-font-sans:'DM Sans',system-ui,sans-serif;        /* everything else       */
  --ds-font-mono:'DM Mono',ui-monospace,monospace;      /* code-like ids only    */
  --ds-fs-2xs:11px;   /* uppercase micro-labels only (tracked)                   */
  --ds-fs-xs:12px;    /* captions, source lines                                  */
  --ds-fs-sm:13px;    /* supporting text, table cells on phone                   */
  --ds-fs-base:14px;  /* body, table cells                                       */
  --ds-fs-md:16px;
  --ds-fs-lg:20px;    /* section titles (display face)                           */
  --ds-fs-xl:28px;    /* hero figure in a KPI tile                               */
  --ds-fs-2xl:34px;   /* page hero figure                                        */
  --ds-lh-tight:1.15; --ds-lh-snug:1.35; --ds-lh-body:1.55;
  --ds-w-regular:400; --ds-w-medium:500; --ds-w-semibold:600;
  --ds-track-label:.08em;

  /* ── space (4px rhythm) ───────────────────────────────────────────────────── */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:20px; --ds-6:24px; --ds-8:32px; --ds-10:40px;

  /* ── shape + depth ────────────────────────────────────────────────────────── */
  --ds-radius-sm:8px; --ds-radius:12px; --ds-radius-lg:16px; --ds-radius-pill:999px;
  --ds-shadow-1:0 1px 2px rgba(26,25,21,.04),0 1px 1px rgba(26,25,21,.02);
  --ds-shadow-2:0 4px 16px rgba(26,25,21,.06),0 1px 2px rgba(26,25,21,.04);
}

/* ══ LEGACY TOKENS → SYSTEM, INSIDE THE SCOPE ONLY ═════════════════════════════
   Most secondary text on these pages is inline `color:var(--hi)` (2.5:1 on
   white — fails WCAG AA) or `var(--mu)` (4.4:1). Re-pointing the legacy names
   inside the scope lifts every one of them to AA with zero markup change, the
   same mechanism the 2026-08-27 readability pass used for Ask AI.             */
html.ds .ds-scope{
  --t:var(--ds-text); --mu:var(--ds-text-2); --hi:var(--ds-text-3);
  --b:var(--ds-line); --b2:var(--ds-line-strong);
  --s:var(--ds-surface); --s2:var(--ds-surface-2);
  --kh:var(--ds-accent); --khb:var(--ds-accent-soft); --khbo:var(--ds-accent-line);
  --pos:var(--ds-pos); --pb:var(--ds-pos-soft); --pbo:var(--ds-pos-line);
  --neg:var(--ds-neg); --nb:var(--ds-neg-soft); --nbo:var(--ds-neg-line);
  --warn:var(--ds-warn); --wb:var(--ds-warn-soft); --wbo:var(--ds-warn-line);
  --info:var(--ds-info); --ib:var(--ds-info-soft); --ibo:var(--ds-info-line);
  color:var(--ds-text);
  font-family:var(--ds-font-sans);
}

/* Inline micro-type (9–10.5px) is the single biggest source of "noise": it is
   too small to read and too many to scan. Floor it inside the scope. Charts
   are canvases and are not affected. (!important: outranks the inline size.) */
html.ds .ds-scope [style*="font-size:9px"],
html.ds .ds-scope [style*="font-size:9.5px"],
html.ds .ds-scope [style*="font-size:10px"],
html.ds .ds-scope [style*="font-size:10.5px"]{font-size:var(--ds-fs-xs)!important}
html.ds .ds-scope [style*="font-size:11px"],
html.ds .ds-scope [style*="font-size:11.5px"]{font-size:12.5px!important}

/* Uppercase micro-labels painted inline stay small and tracked: the floor
   above is for reading text, a label is scanned. (!important: inline size.) */
html.ds .ds-scope [style*="text-transform:uppercase"]{font-size:var(--ds-fs-2xs)!important;letter-spacing:var(--ds-track-label)!important}

/* Figures painted inline in DM Mono read as code. Inside the scope every
   figure is set in the sans with tabular, lining numerals: columns still align,
   and the page gets one numeric voice. (!important: inline font-family.) */
html.ds .ds-scope [style*="DM Mono"]{font-family:var(--ds-font-sans)!important;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}

/* ══ BRAND HEADER ═══════════════════════════════════════════════════════════════
   (!important throughout: the header is written with inline styles.)         */
html.ds .ds-brandhead{
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-line)!important;
  border-radius:var(--ds-radius-lg)!important;
  box-shadow:var(--ds-shadow-1);
  padding:var(--ds-5) var(--ds-6)!important;
  margin-bottom:var(--ds-5)!important;
  flex-wrap:wrap; row-gap:var(--ds-3)!important;
}
html.ds .ds-brandhead [style*="Instrument Serif"]{font-size:26px!important;line-height:var(--ds-lh-tight)}
html.ds .ds-brandhead [style*="DM Mono"]{
  font-family:var(--ds-font-sans)!important; font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--ds-fs-2xl)!important; font-weight:var(--ds-w-semibold); letter-spacing:-.02em;
  color:var(--ds-text)!important; line-height:var(--ds-lh-tight);
}
html.ds .ds-brandhead > div:last-child{min-width:0}

/* ══ KPI TILE — label > hero figure > supporting line ══════════════════════════ */
html.ds .ds-scope.krow,html.ds .ds-scope .krow{gap:var(--ds-3);margin-bottom:var(--ds-4)}
html.ds .ds-scope .kpi{
  border:1px solid var(--ds-line)!important;          /* !important: inline accent border-left */
  border-radius:var(--ds-radius);
  padding:var(--ds-4) var(--ds-5) var(--ds-4);
  box-shadow:var(--ds-shadow-1);
  display:flex; flex-direction:column; min-width:0;
}
html.ds .ds-scope .kl{
  font-size:var(--ds-fs-2xs); font-weight:var(--ds-w-semibold);
  letter-spacing:var(--ds-track-label); color:var(--ds-text-3);
  margin-bottom:var(--ds-2); display:flex; align-items:center; gap:6px;
}
html.ds .ds-scope .kv{
  font-family:var(--ds-font-sans); font-variant-numeric:tabular-nums lining-nums;
  font-size:var(--ds-fs-xl); font-weight:var(--ds-w-semibold);
  letter-spacing:-.02em; line-height:var(--ds-lh-tight); color:var(--ds-text);
}
/* Brand colour is not a meaning — the accent is spent on nothing here. Good /
   bad keep their colour because they ARE a meaning. */
html.ds .ds-scope .kv.kh,html.ds .ds-scope .kv.ecb,html.ds .ds-scope .kv.bc,html.ds .ds-scope .kv.personal{color:var(--ds-text)}
html.ds .ds-scope .kv.pos{color:var(--ds-pos)}
html.ds .ds-scope .kv.neg{color:var(--ds-neg)}
html.ds .ds-scope .kv.warn{color:var(--ds-warn)}
html.ds .ds-scope .ks{font-size:var(--ds-fs-sm); color:var(--ds-text-2); margin-top:var(--ds-2); line-height:var(--ds-lh-snug)}
html.ds .ds-scope .kpi-info,html.ds .ds-scope .kh-tip{
  width:15px;height:15px;font-size:9.5px;background:transparent;text-transform:none;letter-spacing:0;
  border:1px solid var(--ds-line-strong);color:var(--ds-text-3);
}
html.ds .ds-scope .kpi-info:hover,html.ds .ds-scope .kh-tip:hover{background:var(--ds-text);border-color:var(--ds-text);color:#fff}

/* ══ CARD ═══════════════════════════════════════════════════════════════════════ */
html.ds .ds-scope .card{
  border:1px solid var(--ds-line); border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-1); margin-bottom:var(--ds-5)!important;   /* inline margin */
}
html.ds .ds-scope .card-head{padding:var(--ds-5) var(--ds-6) var(--ds-3);border-bottom:0;align-items:flex-start;gap:var(--ds-3)}
html.ds .ds-scope .card-title{
  font-family:var(--ds-font-display); font-weight:400;
  font-size:var(--ds-fs-lg); line-height:var(--ds-lh-tight); letter-spacing:.005em;
}
html.ds .ds-scope .card-sub{font-size:var(--ds-fs-sm);color:var(--ds-text-2);margin-top:var(--ds-1);line-height:var(--ds-lh-snug)}
html.ds .ds-scope .card-body{padding:var(--ds-3) var(--ds-6) var(--ds-6)}

/* ══ SOURCE TAG / STATUS PILL ═══════════════════════════════════════════════════
   The source tag is provenance, not news: quiet and neutral. Status pills keep
   their meaning colour, on the soft fill. (!important: inline tag colours.)   */
html.ds .ds-scope .tag{
  font-size:var(--ds-fs-2xs); font-weight:var(--ds-w-medium); letter-spacing:.01em;
  padding:3px 9px; border-radius:var(--ds-radius-pill); line-height:1.35;
}
html.ds .ds-scope .card-head .tag{
  background:var(--ds-surface-2)!important; color:var(--ds-text-3)!important;
  border-color:var(--ds-line)!important; white-space:nowrap;
}
html.ds .ds-scope .tag.pos{background:var(--ds-pos-soft);color:var(--ds-pos);border-color:var(--ds-pos-line)}
html.ds .ds-scope .tag.neg{background:var(--ds-neg-soft);color:var(--ds-neg);border-color:var(--ds-neg-line)}
html.ds .ds-scope .tag.warn{background:var(--ds-warn-soft);color:var(--ds-warn);border-color:var(--ds-warn-line)}
html.ds .ds-scope .tag.info{background:var(--ds-info-soft);color:var(--ds-info);border-color:var(--ds-info-line)}

/* ══ TABLE ══════════════════════════════════════════════════════════════════════ */
html.ds .ds-scope table.t th{
  font-size:var(--ds-fs-2xs); letter-spacing:var(--ds-track-label); font-weight:var(--ds-w-semibold);
  color:var(--ds-text-3); padding:var(--ds-3) var(--ds-4); border-bottom:1px solid var(--ds-line-strong);
}
html.ds .ds-scope table.t td{
  font-size:var(--ds-fs-base); padding:var(--ds-3) var(--ds-4);
  border-bottom:1px solid var(--ds-line); font-variant-numeric:tabular-nums lining-nums;
}
html.ds .ds-scope table.t td.r,html.ds .ds-scope table.t td .mono,html.ds .ds-scope table.t td[style*="DM Mono"]{
  font-family:var(--ds-font-sans)!important;            /* inline mono on figures */
  font-variant-numeric:tabular-nums lining-nums;
}
html.ds .ds-scope table.t th:first-child,html.ds .ds-scope table.t td:first-child{padding-left:0}
html.ds .ds-scope table.t th:last-child,html.ds .ds-scope table.t td:last-child{padding-right:0}
html.ds .ds-scope table.t tr:hover td{background:var(--ds-surface-2)}
/* Row tints painted inline by a renderer (a loss row) stay — they carry
   meaning — but are softened to the system's negative fill. */
html.ds .ds-scope table.t tr[style*="background"] td,html.ds .ds-scope table.t td[style*="background:#FB"]{background:var(--ds-neg-soft)!important}

/* ══ BUTTON / CHIP ══════════════════════════════════════════════════════════════ */
html.ds .ds-scope .btn{
  font-size:var(--ds-fs-sm); font-weight:var(--ds-w-medium);
  padding:7px 14px; border-radius:var(--ds-radius-sm);
  border-color:var(--ds-line-strong); color:var(--ds-text-2); background:var(--ds-surface);
}
html.ds .ds-scope .btn.sm{font-size:var(--ds-fs-xs);padding:5px 11px}
html.ds .ds-scope .btn:hover{border-color:var(--ds-text-3);color:var(--ds-text)}
html.ds .ds-scope .btn.p,html.ds .ds-scope .btn.kh,html.ds .ds-scope .btn.khwin-on{
  background:var(--ds-text); border-color:var(--ds-text); color:#fff;
}
html.ds .ds-scope .btn:focus-visible{outline:2px solid var(--ds-info);outline-offset:2px}

/* ══ TAB STRIP ══════════════════════════════════════════════════════════════════
   Pills stay pills (the reorder grip and its drop marker are built on them);
   they go quiet until chosen.                                                 */
html.ds .ds-scope.rtabs{gap:6px;margin:var(--ds-6) 0 var(--ds-5)}
html.ds .ds-scope .rtab{
  font-size:var(--ds-fs-sm); font-weight:var(--ds-w-medium); padding:7px 14px;
  background:transparent; border-color:transparent; color:var(--ds-text-2);
}
html.ds .ds-scope .rtab:hover{background:var(--ds-surface-2);border-color:var(--ds-line);color:var(--ds-text)}
html.ds .ds-scope .rtab.on{background:var(--ds-text);border-color:var(--ds-text);color:#fff}
html.ds .ds-scope .rgrip{opacity:.28}

/* ══ BANNERS (freshness, notes, callouts painted inline) ════════════════════════
   Softer radius + spacing so they read as one family with the cards.         */
html.ds .ds-scope [style*="border-radius:9px"],html.ds .ds-scope [style*="border-radius:10px"]{border-radius:var(--ds-radius)!important}

/* ══ PHONE ══════════════════════════════════════════════════════════════════════
   Two-up KPI tiles: a proportional figure at 22px fits a six-figure dollar
   value in half of a 375px screen (measured, not assumed), so the page opens on
   figures instead of a 1,000px column of nine tiles.                          */
@media (max-width:560px){
  html.ds .ds-scope.krow,html.ds .ds-scope .krow{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--ds-2)}
  html.ds .ds-scope .kpi{padding:var(--ds-3) var(--ds-3) var(--ds-3) var(--ds-4)}
  html.ds .ds-scope .kv{font-size:22px;overflow-wrap:anywhere}
  html.ds .ds-scope .ks{font-size:var(--ds-fs-xs);margin-top:var(--ds-1)}
  html.ds .ds-scope .kl{font-size:10.5px;letter-spacing:.06em}
  html.ds .ds-brandhead{padding:var(--ds-4)!important}
  html.ds .ds-brandhead > div:last-child{margin-left:0!important;text-align:left!important;flex-basis:100%}
  html.ds .ds-brandhead [style*="DM Mono"]{font-size:30px!important}
  html.ds .ds-scope .card-head{padding:var(--ds-4) var(--ds-4) var(--ds-2)}
  html.ds .ds-scope .card-body{padding:var(--ds-2) var(--ds-4) var(--ds-4)}
  html.ds .ds-scope table.t td{font-size:var(--ds-fs-sm)}
}
/* An odd last tile spans the row instead of sitting alone at half width. */
@media (max-width:560px){
  html.ds .ds-scope.krow > .kpi:last-child:nth-child(odd){grid-column:1 / -1}
}