/* jaack.css — bundle of tokens.css + components/*.css (generated by build.sh; edit the sources). */
/* jaack design system — tokens.
   Ombra: one warm dark for every site. Never pure zero-RGB (no zero-RGB hex, keyword or rgba; see README, Tanizaki dark). Shadows and scrims: rgba(8,5,4,…).
   Light/dark are chosen by theme.js (local clock 07:00–18:59 light, else dark; user override Auto/Light/Dark, Italian Auto/Chiaro/Scuro)
   and written to <html data-theme="light|dark"> before first paint. Every value below is data-free. */

:root{
  /* type */
  --jk-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --jk-fs-xs:12.5px;          /* labels / eyebrows (700, uppercase, +.06em) */
  --jk-fs-sm:13px;            /* captions, figure captions, tooltips */
  --jk-fs-note:14px;          /* notes, secondary row text */
  --jk-fs-body:17px;          /* body, rows, comparisons */
  --jk-fs-lede:20px;          /* chapter lede */
  --jk-fs-title:clamp(30px,2.6vw,44px);   /* chapter question */
  --jk-fs-mid:clamp(36px,3vw,52px);       /* secondary number */
  --jk-fs-big:clamp(56px,7.5vw,120px);    /* the one hero number per chapter */
  --jk-fs-deco:clamp(96px,8vw,150px);     /* decorative chapter numeral (6 % ink) */
  --jk-lh-tight:1.02;--jk-lh:1.6;
  --jk-track-label:.06em;--jk-track-big:-.05em;--jk-track-mid:-.04em;--jk-track-title:-.03em;

  /* reading — editorial pages opt in with .jk-prose (components/reading.css). Scale 4:3, 14px baseline. */
  --jk-font-read:"Newsreader","Newsreader Fallback Iowan","Newsreader Fallback Georgia","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --jk-serif:var(--jk-font-read);
  --jk-baseline:14px;
  --jk-fs-read:18px; --jk-lh-body:28px;
  --jk-measure-read:33em;          /* ≈ 66 characters */
  --jk-fs-h4:24px; --jk-lh-h4:28px;
  --jk-fs-h3:32px; --jk-lh-h3:42px;
  --jk-fs-h2:43px; --jk-lh-h2:56px;
  --jk-fs-h1:57px; --jk-lh-h1:70px;
  --jk-fs-body-long:20px; --jk-lh-body-long:28px;
  --jk-measure-long:23em;          /* 460px at 20px ≈ 55 measured characters. Never 55ch (= 70–76 characters). */

  /* spacing: 4 px scale */
  --jk-s1:4px;--jk-s2:8px;--jk-s3:12px;--jk-s4:16px;--jk-s5:20px;--jk-s6:24px;--jk-s7:28px;--jk-s8:32px;--jk-s10:40px;--jk-s12:48px;--jk-s16:64px;--jk-s18:72px;--jk-s20:80px;--jk-s24:96px;--jk-s32:128px;
  /* airy rhythm; numeric tables may use the data row padding */
  --jk-row-pad:12px;          /* hairline row ≈ 46 px */
  --jk-row-pad-data:9px;     /* numeric tables and lists only */
  --jk-group-gap:48px;        /* between groups inside a chapter */
  --jk-hero-gap:32px;         /* chapter header → hero */
  --jk-chapter-gap:128px;      /* between chapters, desktop (hairline in the middle) */
  --jk-chapter-gap-m:72px;    /* between chapters, < 768 px */
  --jk-page-x:clamp(20px,6vw,120px);
  --jk-measure:64ch;
  /* bars: content clears bar height + edge offset + safe area + 14px breathing room, top and bottom */
  --jk-breath:14px;
  --jk-bar-h:60px;            /* floating top bar (.jk-top) */
  --jk-bar-gap:10px;          /* top bar distance from the edge */
  --jk-dock-h:72px;           /* bottom dock (.jk-dock) incl. 44px targets and pill border; a site with a scrolling pill sets 80px */
  --jk-dock-gap:16px;
  --jk-top-clearance:calc(var(--jk-bar-h) + var(--jk-bar-gap) + env(safe-area-inset-top,0px) + var(--jk-breath));
  --jk-dock-clearance:calc(var(--jk-dock-h) + var(--jk-dock-gap) + env(safe-area-inset-bottom,0px) + var(--jk-breath));
  --jk-topbar-h:72px; /* deprecated: fixed 72px as in 1.x, not an alias; use --jk-top-clearance; removal in 3.0 */
  --jk-max:3440px;

  /* radii */
  --jk-r-xs:8px;--jk-r-s:14px;--jk-r-m:20px;--jk-r-panel:24px;--jk-r-l:26px;--jk-r-xl:34px;--jk-r-pill:999px;

  /* motion */
  --jk-ease-out: cubic-bezier(.2,0,0,1);      /* ingresso, hover, cambi di stato */
  --jk-ease-inout: cubic-bezier(.4,0,.2,1);   /* spostamenti brevi (indicatore pill) */
  --jk-d-1: 120ms;  /* hover, press, tooltip */
  --jk-d-2: 200ms;  /* fade di gruppi, pill, tema */
  --jk-d-3: 280ms;  /* sheet, primo disegno grafico — massimo consentito */
  /* alias per compatibilità, da rimuovere in v3 */
  --jk-ease: var(--jk-ease-out);
  --jk-spring: var(--jk-ease-inout);          /* niente più overshoot */
  --jk-d-fast: var(--jk-d-1);
  --jk-d-fade: var(--jk-d-2);
  --jk-d-theme: var(--jk-d-2);
  --jk-d-pill: var(--jk-d-2);
  --jk-d-draw: var(--jk-d-3);

  /* chart / data colours (marks, bars, lines — never body text) */
  --jk-c-blue:#0a84ff;--jk-c-orange:#ff9f0a;--jk-c-yellow:#ffd60a;--jk-c-green:#30d158;--jk-c-cyan:#64d2ff;--jk-c-purple:#bf5af2;--jk-c-pink:#ff375f;--jk-c-red:#ff453a;
}

html[data-theme="light"]{
  color-scheme:light;
  --jk-bg:#f7f5f0;--jk-surface:#ffffff;--jk-surface-2:#efece5;
  --jk-ink:#121210;                       /* primary text, 17.6:1 on bg */
  --jk-ink-2:#4f4b44;                     /* secondary solid */
  --jk-t2:rgba(18,18,16,.70);             /* secondary text (grey-opacity hierarchy) */
  --jk-t3:rgba(18,18,16,.64);             /* tertiary text — lowest allowed for text (≥ 4.5:1) */
  --jk-hair:rgba(18,18,16,.11);           /* hairlines */
  --jk-hair-2:rgba(18,18,16,.20);
  --jk-edge:rgba(18,18,16,.47);      /* controls: 3.16 / 3.21 / 3.10 on bg / surface / surface-2 (unrounded alpha composite) */
  --jk-focus:var(--jk-accent-text);
  --jk-scrim:rgba(8,5,4,.28);
  --jk-accent:#a8850f; /* fills/large areas only where ≥ 3:1: bg 3.20, surface 3.48; NOT surface-2 (2.95) */
  --jk-accent-text:#866400; /* L lowered by 0.005 steps, same C/H: 5.02 / 5.47 / 4.64 on bg / surface / surface-2 */
  --jk-on-accent:#171710;--jk-accent-wash:rgba(168,133,15,.12);
  --jk-amb:#8a5300;                       /* warning text (low confidence etc.) */
  --jk-ok:#256b2d;--jk-fail:#a33a22;--jk-info:#3f6fa6;
  /* glass */
  --jk-tint:rgba(255,255,255,.66);--jk-tint-hi:rgba(255,255,255,.8);--jk-tint-edge:rgba(255,255,255,.34);
  --jk-rim:rgba(255,255,255,.95);--jk-rim-lo:rgba(255,255,255,.25);--jk-glow:rgba(255,255,255,.7);
  --jk-drop:0 24px 60px -28px rgba(40,30,0,.45),0 2px 6px -2px rgba(40,30,0,.12);
  --jk-text-shadow:0 1px 0 rgba(255,255,255,.5);
  /* background veil */
  --jk-bg-1:rgba(236,204,120,.20);--jk-bg-1b:rgba(236,204,120,.08);
  --jk-bg-2:rgba(158,182,210,.20);--jk-bg-2b:rgba(158,182,210,.08);
  --jk-bg-3:rgba(226,168,140,.15);--jk-bg-3b:rgba(226,168,140,.06);
}
html[data-theme="dark"]{
  color-scheme:dark;
  /* Ombra: one warm dark for every site. OKLCH hue 60°, planes lighten toward the viewer. */
  --jk-bg:#130e0b;          /* oklch(0.17 0.010 60) */
  --jk-surface:#1c1713;     /* oklch(0.21 0.011 60) */
  --jk-surface-2:#26201c;   /* oklch(0.25 0.012 60) */
  --jk-ink:#e9e4da;         /* oklch(0.92 0.014 80) — 15.13:1 on bg */
  --jk-ink-2:#b6b0a8;       /* oklch(0.76 0.014 75) — 7.48:1 on surface-2 */
  --jk-t2:rgba(233,228,218,.72);
  --jk-t3:rgba(233,228,218,.58);   /* 5.19:1 on surface-2 — lowest allowed for text */
  --jk-hair:rgba(233,228,218,.12);
  --jk-hair-2:rgba(233,228,218,.20);
  --jk-edge:rgba(233,228,218,.39); /* control boundaries: 3.15 / 3.17 / 3.12 on bg / surface / surface-2 (unrounded alpha composite) */
  /* accent: rule of §2 (light #a8850f → L+0.08, C−0.03) */
  --jk-accent:#ba9f59;      /* oklch(0.712 0.096 89.4) — 6.27:1 on surface-2 */
  --jk-accent-text:#ba9f59;
  --jk-on-accent:#130e0b;   /* 7.48:1 on accent */
  --jk-accent-wash:rgba(186,159,89,.12);
  --jk-focus:var(--jk-accent-text);
  --jk-amb:#e9b44c;--jk-ok:#8fbf8a;--jk-fail:#e07a5f;--jk-info:#8fb3d9;
  --jk-tint:rgba(19,14,11,.6);--jk-tint-hi:rgba(28,23,19,.74);--jk-tint-edge:rgba(19,14,11,.3);
  --jk-rim:rgba(233,228,218,.42);--jk-rim-lo:rgba(233,228,218,.06);--jk-glow:rgba(233,228,218,.16);
  --jk-scrim:rgba(8,5,4,.28);
  --jk-drop:0 28px 70px -30px rgba(8,5,4,.8),0 2px 8px -2px rgba(8,5,4,.45);
  --jk-text-shadow:0 1px 2px rgba(8,5,4,.5);
  --jk-bg-1:rgba(214,186,100,.10);--jk-bg-1b:rgba(214,186,100,.04);
  --jk-bg-2:rgba(104,132,184,.15);--jk-bg-2b:rgba(104,132,184,.06);
  --jk-bg-3:rgba(168,150,196,.10);--jk-bg-3b:rgba(168,150,196,.04);
}
/* Breakpoints (media queries cannot read custom properties — use these literal values):
   760 (44px theme-switch targets), 768 (mobile → desktop spacing), 900 (chapter title inline with lede), 1100, 1920 (2 columns of chapters), 2560 (3 columns).
   Inside components prefer container queries (@container) over viewport queries. */

/* Same breakpoint as themeswitch.css: 44px switch targets make the bar 64px. */
@media (max-width:760px){:root{--jk-bar-h:64px}}

@media (prefers-reduced-motion: reduce){
  :root{--jk-d-1:0ms;--jk-d-2:0ms;--jk-d-3:0ms}
  *,*::before,*::after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;scroll-behavior:auto!important}
}
/* base: page, type roles, fade-in, theme cross-fade, reduced motion */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--jk-top-clearance);scroll-padding-bottom:var(--jk-dock-clearance);background:var(--jk-bg);color:var(--jk-ink);-webkit-text-size-adjust:100%}
body{margin:0;font:var(--jk-fs-body)/var(--jk-lh) var(--jk-font);color:var(--jk-ink);background:transparent;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.jk-page{padding:var(--jk-top-clearance) max(var(--jk-page-x),env(safe-area-inset-right)) var(--jk-dock-clearance) max(var(--jk-page-x),env(safe-area-inset-left));max-width:var(--jk-max);margin:0 auto;font-variant-numeric:tabular-nums;text-shadow:var(--jk-text-shadow)}
.jk-page svg text{text-shadow:none}
/* type roles */
.jk-lab{display:block;font-size:var(--jk-fs-xs);font-weight:700;letter-spacing:var(--jk-track-label);text-transform:uppercase;color:var(--jk-t2);margin:0}
.jk-big{font-size:var(--jk-fs-big);font-weight:800;letter-spacing:var(--jk-track-big);line-height:.9;margin-top:var(--jk-s2);white-space:nowrap;font-variant-numeric:tabular-nums}
.jk-mid{font-size:var(--jk-fs-mid);font-weight:750;letter-spacing:var(--jk-track-mid);line-height:1;margin-top:var(--jk-s2);white-space:nowrap;font-variant-numeric:tabular-nums}
.jk-u{font-size:max(15px,.28em);font-weight:600;letter-spacing:-.01em;margin-left:.12em;color:var(--jk-ink-2)}
.jk-cmp{margin:var(--jk-s2) 0 0;font-size:var(--jk-fs-body);line-height:var(--jk-lh);color:var(--jk-t2);max-width:68ch}
.jk-cmp b{color:var(--jk-ink);font-weight:650}
.jk-note{margin:var(--jk-s2) 0 0;font-size:var(--jk-fs-note);line-height:var(--jk-lh);color:var(--jk-t3);max-width:68ch}
.jk-na{color:var(--jk-t2);font-weight:650;font-size:22px;letter-spacing:0}
.jk-placeholder{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--jk-amb);border:1px dashed currentColor;border-radius:var(--jk-r-pill);padding:2px 8px;text-shadow:none}
:where(a){color:inherit}
:where(button,a,[tabindex]):focus-visible{outline:2px solid var(--jk-focus);outline-offset:3px;border-radius:var(--jk-r-xs)}
/* fade-in: opacity only — data never moves or scales */
.jk-fx{opacity:0;transition:opacity var(--jk-d-2) var(--jk-ease-out)}.jk-fx.in{opacity:1}
/* theme cross-fade (theme.js adds .jk-th-fade for 220 ms) */
html.jk-th-fade,html.jk-th-fade *{transition:background-color var(--jk-d-theme) ease,color var(--jk-d-theme) ease,border-color var(--jk-d-theme) ease,fill var(--jk-d-theme) ease!important}
@media (prefers-reduced-motion:reduce){.jk-fx{opacity:1;transition:none}html.jk-th-fade,html.jk-th-fade *{transition:none!important}}
html.jk-rm .jk-fx{opacity:1;transition:none}
.jk-end{text-align:center;padding:40px 16px var(--jk-dock-clearance);font-size:13px;color:var(--jk-t3)}
/* Static, optional background veil. Opt in with <html data-jk-veil>.
   Markup: <div class="jk-bg" aria-hidden="true"><i></i><i></i><i></i></div>. */
.jk-bg{display:none;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
html[data-jk-veil] .jk-bg{display:block}
.jk-bg i{position:absolute;display:block;width:var(--s);height:var(--s);left:var(--x);top:var(--y);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;background:radial-gradient(closest-side,var(--c) 0%,var(--c2) 45%,transparent 100%)}
.jk-bg i:nth-child(1){--s:max(82vw,82vh);--x:14%;--y:10%;--c:var(--jk-bg-1);--c2:var(--jk-bg-1b)}
.jk-bg i:nth-child(2){--s:max(74vw,74vh);--x:90%;--y:30%;--c:var(--jk-bg-2);--c2:var(--jk-bg-2b)}
.jk-bg i:nth-child(3){--s:max(88vw,88vh);--x:56%;--y:100%;--c:var(--jk-bg-3);--c2:var(--jk-bg-3b)}
.jk-bg i:nth-child(n+4){display:none}
/* glass material — earned containers only: at most ONE glass block per screen besides the top bar.
   Use it for a single summary/side panel, a sheet, a tooltip. Everything else is open layout with hairlines. */
.jk-glass{position:relative;isolation:isolate;--r:var(--jk-r-l);border-radius:var(--r);
  background:radial-gradient(130% 125% at 50% 45%,var(--jk-tint) 62%,var(--jk-tint-edge) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:var(--jk-drop);text-shadow:none}
.jk-glass.hi{background:radial-gradient(130% 125% at 50% 45%,var(--jk-tint-hi) 62%,var(--jk-tint) 100%)}
.jk-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:2;
  background:conic-gradient(from 210deg at 50% 50%,var(--jk-rim),var(--jk-rim-lo) 22%,var(--jk-rim-lo) 45%,var(--jk-rim) 55%,var(--jk-rim-lo) 72%,var(--jk-rim-lo) 92%,var(--jk-rim));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}
.jk-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at 25% -10%,var(--jk-glow),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%);
  box-shadow:inset 0 1px 1px var(--jk-rim),inset 0 -10px 24px -18px rgba(8,5,4,.25)}
html[data-theme="dark"] .jk-glass::after{background:radial-gradient(420px circle at 25% -10%,var(--jk-glow),transparent 46%),linear-gradient(180deg,rgba(233,228,218,.07),transparent 30%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.jk-glass{background:var(--jk-surface)}}
/* panel */
.jk-panel{--r:var(--jk-r-panel);padding:var(--jk-s6);min-width:0}
.jk-panel.warn::before{background:none}
.jk-panel .jk-flag{position:absolute;left:var(--jk-s6);right:var(--jk-s6);top:0;height:2px;border-radius:2px;background:var(--jk-amb);z-index:3}
@media (max-width:767px){.jk-panel{padding:var(--jk-s4)}.jk-panel .jk-flag{left:var(--jk-s4);right:var(--jk-s4)}}
/* sheet: a <dialog class="jk-sheet jk-glass"> opened with sheet.js — bottom sheet on mobile, centred card on desktop */
.jk-sheet{--r:var(--jk-r-xl);border:0;padding:var(--jk-s6);color:var(--jk-ink);width:min(560px,calc(100% - 24px));max-height:min(80vh,720px);overflow:auto}
.jk-sheet::backdrop{background:var(--jk-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.jk-sheet[open]{animation:jksheet var(--jk-d-3) var(--jk-ease-out)}
.jk-sheet[open].jk-leaving{animation:jksheetout var(--jk-d-3) var(--jk-ease-out) forwards}
.jk-sheet[open].jk-leaving::backdrop{animation:jksheetbackdropout var(--jk-d-3) var(--jk-ease-out) forwards}
.jk-sheet .jk-x{position:absolute;right:var(--jk-s3);top:var(--jk-s3);z-index:4;width:36px;height:36px;border-radius:var(--jk-r-pill);border:0;background:var(--jk-tint-hi);color:var(--jk-ink);font:600 18px/1 var(--jk-font);cursor:pointer}
@keyframes jksheet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes jksheetout{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
@keyframes jksheetbackdropout{from{opacity:1}to{opacity:0}}
@media (max-width:767px){.jk-sheet{margin:auto auto 8px;width:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.jk-sheet[open],.jk-sheet[open].jk-leaving,.jk-sheet[open].jk-leaving::backdrop{animation:none}}
/* top bar — floating glass pill (the one permanent glass element). Content scrolls under it. */
.jk-top{position:fixed;z-index:40;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);width:min(1180px,calc(100% - 2 * max(10px,env(safe-area-inset-left),env(safe-area-inset-right))));
  display:flex;align-items:center;gap:var(--jk-s3);padding:8px 10px 8px 18px;--r:var(--jk-r-pill)}
.jk-top .jk-mark{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-right:auto;text-decoration:none;color:var(--jk-ink);white-space:nowrap;min-width:0;flex-shrink:1}
.jk-top .jk-mark .dot{color:var(--jk-accent)}            /* logo dot: brand mark, exempt from text contrast */
.jk-top .jk-mark .dom{color:var(--jk-ink-2);font-weight:500}
.jk-top .jk-tag{font-size:12px;color:var(--jk-ink-2);white-space:nowrap}
.jk-top .jk-links{display:flex;gap:var(--jk-s2);min-width:0;flex-shrink:1}
.jk-top a.jk-sw{font-size:13px;color:var(--jk-ink);text-decoration:none;padding:7px 12px;border-radius:var(--jk-r-pill);background:var(--jk-tint-hi);white-space:nowrap}
@media (max-width:640px){.jk-top{gap:4px}.jk-top>*{min-width:0;flex-shrink:1}.jk-top .jk-tag{display:none}.jk-top .jk-links .jk-sw:not(.keep){display:none}}
/* theme switch — Auto / Chiaro / Scuro (mounted by theme.js: JaackTheme.mount(hostElement)) */
.jk-thsw{display:inline-flex;gap:2px;padding:2px;border-radius:var(--jk-r-pill);background:var(--jk-tint-hi);flex:none;min-width:0;max-width:100%}
.jk-thsw button{position:relative;display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 var(--jk-font);color:var(--jk-ink-2);background:none;border:0;border-radius:var(--jk-r-pill);padding:6px 9px;cursor:pointer;min-height:28px;min-width:0;flex:1 1 auto}
.jk-thsw button[aria-pressed="true"]{background:var(--jk-bg);color:var(--jk-ink);box-shadow:0 1px 3px rgba(8,5,4,.12)}
.jk-thsw button:focus-visible{outline:2px solid var(--jk-focus);outline-offset:1px}
.jk-thsw .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.jk-thsw .i{display:none}
[data-jk-theme-switch]{display:inline-flex;flex:none;min-width:0;max-width:100%}
[data-jk-theme-switch]:empty{min-width:148px;min-height:32px}
@media (max-width:760px){.jk-thsw{flex-shrink:1}.jk-thsw .i{display:inline}.jk-thsw .l{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.jk-thsw button{padding:0;font-size:13px;min-width:44px;min-height:44px;flex:0 0 44px}[data-jk-theme-switch]{flex-shrink:1}[data-jk-theme-switch]:empty{min-width:140px;min-height:44px}}
@media (max-width:420px){.jk-thsw button{min-width:36px;min-height:36px;flex:0 0 36px}[data-jk-theme-switch]:empty{min-width:116px;min-height:36px}}
/* editorial chapters — each page section is a chapter that answers one question:
   numeral + eyebrow, the question as title, a one-line lede, then hero → figure → groups.
   128 px between chapters on desktop (72 on mobile) with one hairline in the middle. */
.jk-chs{display:grid;grid-template-columns:minmax(0,1fr);row-gap:calc(var(--jk-chapter-gap-m)/2)}
.jk-ch{position:relative;min-width:0}
.jk-ch+.jk-ch{border-top:1px solid var(--jk-hair);padding-top:calc(var(--jk-chapter-gap-m)/2)}
.jk-ct{position:relative;z-index:0;padding-top:clamp(8px,1.5vw,24px)}
.jk-ch+.jk-ch .jk-ct{padding-top:0}
.jk-ct .jk-eb{font-size:var(--jk-fs-xs);font-weight:700;letter-spacing:var(--jk-track-label);text-transform:uppercase;color:var(--jk-t2)}
.jk-ct .jk-eb b{color:var(--jk-ink)}
.jk-ct .jk-q{margin:4px 0 0;font-size:var(--jk-fs-title);font-weight:750;letter-spacing:var(--jk-track-title);line-height:var(--jk-lh-tight)}
.jk-ct .jk-lede{margin:var(--jk-s2) 0 0;font-size:var(--jk-fs-lede);line-height:var(--jk-lh);max-width:68ch;color:var(--jk-t2)}
.jk-deco{position:absolute;z-index:-1;left:-.04em;top:-.08em;font-size:var(--jk-fs-deco);font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--jk-ink);opacity:.06;pointer-events:none;user-select:none;text-shadow:none}
.jk-cb{container-type:inline-size;min-width:0}
.jk-group{margin-top:var(--jk-group-gap);container-type:inline-size;min-width:0}
.jk-group>.jk-lab{margin-bottom:var(--jk-s2)}
.jk-fig{margin:var(--jk-group-gap) 0 0;min-width:0}
.jk-fig figcaption{font-size:var(--jk-fs-sm);font-weight:600;color:var(--jk-t2);margin:0 0 4px;line-height:1.4}
/* two short groups side by side with a hairline between, when the chapter is wide enough */
@container (min-width:700px){.jk-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--jk-s6)}.jk-duo>*+*{border-left:1px solid var(--jk-hair);padding-left:var(--jk-s6)}}
/* main + one glass side panel */
@container (min-width:860px){.jk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,36%);column-gap:var(--jk-s12);align-items:start}.jk-split>.jk-aside{position:sticky;top:88px}}
.jk-aside{margin-top:var(--jk-group-gap)}
@media (min-width:768px){.jk-chs{row-gap:calc(var(--jk-chapter-gap)/2)}.jk-ch+.jk-ch{padding-top:calc(var(--jk-chapter-gap)/2)}}
/* title row: question left, lede beside it — no empty title column */
@media (min-width:900px){.jk-ct{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--jk-s12);align-items:end}.jk-ct .jk-eb{grid-column:1/-1}.jk-ct .jk-lede{margin:0 0 .3em;font-size:var(--jk-fs-body)}}
/* ultrawide: chapters become columns so there are no wide empty strips */
@media (min-width:1920px){.jk-chs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--jk-s16)}.jk-ch+.jk-ch{border-top:0;padding-top:0}
  .jk-chs>.jk-ch:nth-child(2n){border-left:1px solid var(--jk-hair);padding-left:var(--jk-s8);margin-left:calc(-1*var(--jk-s8))}
  .jk-chs>.jk-ch:nth-child(n+3){border-top:1px solid var(--jk-hair);padding-top:var(--jk-s8)}}
@media (min-width:2560px){.jk-chs{grid-template-columns:repeat(3,minmax(0,1fr))}.jk-chs>.jk-ch:nth-child(2n){border-left:0;padding-left:0;margin-left:0}
  .jk-chs>.jk-ch:nth-child(3n+2),.jk-chs>.jk-ch:nth-child(3n+3){border-left:1px solid var(--jk-hair);padding-left:var(--jk-s8);margin-left:calc(-1*var(--jk-s8))}
  .jk-chs>.jk-ch:nth-child(n+3){border-top:0;padding-top:0}.jk-chs>.jk-ch:nth-child(n+4){border-top:1px solid var(--jk-hair);padding-top:var(--jk-s8)}}
@media (max-width:767px){.jk-deco{font-size:88px}}
/* hero number + comparison — exactly one big number per chapter, always with a comparison beneath it
   (target, yesterday, average, previous period). An optional secondary number sits beside it after a hairline. */
.jk-hero{margin-top:var(--jk-hero-gap);container-type:inline-size}
.jk-hero>.jk-hc{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--jk-s6)}
.jk-hero .jk-hm .jk-cmp{max-width:42ch}
.jk-hero .jk-sec{padding-top:var(--jk-s4);border-top:1px solid var(--jk-hair);min-width:0}
.jk-sec .jk-mid{display:flex;align-items:center}
.jk-sec .jk-mark{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:14px;flex:none;background:var(--jk-t3)} /* non-text sign marker: colour never carries meaning alone */
.jk-sec .jk-mark.neg{background:var(--jk-c-blue)}.jk-sec .jk-mark.pos{background:var(--jk-c-orange)}
.jk-sec .jk-cmp{max-width:44ch}
@container (min-width:820px){.jk-hero>.jk-hc{grid-template-columns:auto minmax(260px,1fr);column-gap:var(--jk-s8);align-items:end}.jk-hero .jk-sec{padding:0 0 4px var(--jk-s8);border-top:0;border-left:1px solid var(--jk-hair)}}
/* chips for deltas next to a comparison */
.jk-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--jk-r-pill);font-size:var(--jk-fs-xs);font-weight:600;background:var(--jk-tint-hi);color:var(--jk-ink);white-space:nowrap;text-shadow:none;vertical-align:1px}
.jk-chip.ok{color:var(--jk-ok)}.jk-chip.fail{color:var(--jk-fail)}
/* hairline row list — tables without boxes: rows ≈ 46 px, hairline above each row and one below the list.
   Set the columns per list with --jk-cols. Below 520 px of container width, columns marked .jk-opt are hidden. */
.jk-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--jk-hair);--jk-cols:56px 112px minmax(0,1fr) auto 96px}
.jk-rows li{display:grid;grid-template-columns:var(--jk-cols);align-items:baseline;column-gap:var(--jk-s4);padding:var(--jk-row-pad) 0;border-top:1px solid var(--jk-hair);font-size:var(--jk-fs-body);line-height:1.4;min-width:0}
.jk-rows li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jk-rows .t{color:var(--jk-t3);font-size:var(--jk-fs-note)}
.jk-rows .m{font-size:var(--jk-fs-xs);font-weight:700;letter-spacing:var(--jk-track-label);text-transform:uppercase;color:var(--jk-t2)}
.jk-rows .r{text-align:right;font-weight:650}
.jk-rows .p{color:var(--jk-t3);font-weight:500;font-size:var(--jk-fs-note);text-align:right}
.jk-rows li.tot{font-weight:650}
.jk-rows.wrap li>span{white-space:normal}
@container (max-width:520px){.jk-rows{--jk-cols:48px minmax(0,1fr) auto!important}.jk-rows .jk-opt{display:none}}
/* alert rows: side by side when there is room */
.jk-alerts li{grid-template-columns:120px minmax(0,1fr)}
.jk-alerts li>span{white-space:normal}
.jk-alerts .warn{color:var(--jk-amb);font-weight:700;text-transform:uppercase;font-size:var(--jk-fs-xs);letter-spacing:var(--jk-track-label)}
.jk-alerts .info{color:var(--jk-t2);font-weight:700;text-transform:uppercase;font-size:var(--jk-fs-xs);letter-spacing:var(--jk-track-label)}
@container (min-width:900px){.jk-alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:var(--jk-s6);border-bottom:0}.jk-alerts li{grid-template-columns:minmax(0,1fr);row-gap:2px;border-bottom:1px solid var(--jk-hair)}}
@container (max-width:520px){.jk-alerts li{grid-template-columns:minmax(0,1fr)}}
.jk-prose{font-family:var(--jk-font-read);font-size:var(--jk-fs-read);line-height:var(--jk-lh-body);max-width:var(--jk-measure-read)}
.jk-prose h1{font-size:var(--jk-fs-h1);line-height:var(--jk-lh-h1)}
.jk-prose h2{font-size:var(--jk-fs-h2);line-height:var(--jk-lh-h2)}
.jk-prose h3{font-size:var(--jk-fs-h3);line-height:var(--jk-lh-h3)}
.jk-prose h4{font-size:var(--jk-fs-h4);line-height:var(--jk-lh-h4)}
@media (max-width:599px){
  .jk-prose h1{font-size:43px;line-height:56px}
  .jk-prose h2{font-size:32px;line-height:42px}
  .jk-prose h3{font-size:24px;line-height:28px}
  .jk-prose h4{font-size:18px;line-height:28px}
}
@media (min-width:600px){
  .jk-prose[data-measure="long"]{font-size:var(--jk-fs-body-long);line-height:var(--jk-lh-body-long);max-width:var(--jk-measure-long)}
}
@media (max-width:479px){:root{--jk-page-x:20px}}
/* stat row — open grid of 2 or 4 cells separated by vertical hairlines (no boxes).
   Each cell: label, secondary number, comparison, optional small chart. Collapses with container queries. */
.jk-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.jk-stats.two{--n:2}
.jk-cell{position:relative;min-width:0;padding:4px var(--jk-s6) var(--jk-s2);border-left:1px solid var(--jk-hair)}
.jk-stats>.jk-cell:first-child{border-left:0;padding-left:0}
.jk-cell .jk-viz{margin-top:var(--jk-s2)}.jk-cell .jk-viz svg{display:block;width:100%;height:auto}
@container (max-width:880px){.jk-stats:not(.two){--n:2;row-gap:var(--jk-s6)}.jk-stats:not(.two)>.jk-cell:nth-child(3){border-left:0;padding-left:0}.jk-stats:not(.two)>.jk-cell:nth-child(n+3){border-top:1px solid var(--jk-hair);padding-top:var(--jk-s6)}}
@container (max-width:440px){.jk-stats{--n:1!important;row-gap:var(--jk-s6)}.jk-stats>.jk-cell+.jk-cell{border-left:0;padding-left:0;border-top:1px solid var(--jk-hair);padding-top:var(--jk-s6)}.jk-cell{padding-right:0}}
/* nav pill — segmented control (chapter navigation at the bottom, or a period switch above a chart).
   A sliding indicator follows the active item; it moves only when motion is allowed. */
.jk-pill{position:relative;display:inline-flex;padding:4px;--r:var(--jk-r-pill)}
.jk-pill button{position:relative;z-index:3;border:0;background:none;color:var(--jk-ink-2);font:500 14px/1 var(--jk-font);padding:11px 16px;border-radius:var(--jk-r-pill);cursor:pointer;white-space:nowrap;min-height:40px}
.jk-pill button[aria-pressed="true"],.jk-pill button[aria-current="true"]{color:var(--jk-ink);font-weight:600}
.jk-pill button:focus-visible{outline:2px solid var(--jk-focus);outline-offset:-2px}
.jk-pill .jk-ind{position:absolute;z-index:2;top:4px;bottom:4px;left:0;width:0;border-radius:var(--jk-r-pill);background:var(--jk-tint-hi);transition:transform var(--jk-d-pill) var(--jk-ease-inout),width var(--jk-d-pill) var(--jk-ease-inout)}
html[data-theme="dark"] .jk-pill .jk-ind{background:rgba(233,228,218,.12)}
.jk-pill.flat{--r:var(--jk-r-pill);background:var(--jk-tint-hi);box-shadow:none}
.jk-pill.flat::before,.jk-pill.flat::after{display:none}
.jk-pill.flat button{padding:8px 12px;font-size:13px;min-height:32px}
.jk-dock{position:fixed;z-index:45;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%)}
.jk-dock .jk-pill button{padding:12px 20px;font-size:15px}
@media (min-width:1920px){.jk-dock{display:none}}   /* ultrawide shows every chapter at once */
@media (prefers-reduced-motion:reduce){.jk-pill .jk-ind{transition:none}}
html.jk-rm .jk-pill .jk-ind{transition:none}
/* tooltip — small glass label that follows the pointer over a chart (scrubber) or explains an element on hover/focus. */
.jk-tipwrap{position:relative}
.jk-tip{position:absolute;left:0;top:0;--r:var(--jk-r-s);padding:8px 12px;font-size:var(--jk-fs-sm);line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--jk-d-fast);z-index:30;color:var(--jk-ink);text-shadow:none;max-width:min(320px,90vw)}
.jk-tip.on{opacity:1}.jk-tip b{font-weight:700}.jk-tip .d{color:var(--jk-ink-2);font-size:12px}
.jk-tip.wrap{white-space:normal}
.jk-hair{position:absolute;top:8px;bottom:26px;left:0;width:1px;background:var(--jk-ink);opacity:0;pointer-events:none;transition:opacity var(--jk-d-fast)}
.jk-hair.on{opacity:.35}
@media (prefers-reduced-motion:reduce){.jk-tip,.jk-hair{transition:none}}