/* jaack.css — bundle of tokens.css + components/*.css (generated by build.sh; edit the sources). */
/* jaack design system — tokens.
   Light/dark are chosen by theme.js (local clock 07:00–18:59 light, else dark; user override 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:16px;          /* body, rows, comparisons */
  --jk-fs-lede:17px;          /* 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.5;
  --jk-track-label:.06em;--jk-track-big:-.05em;--jk-track-mid:-.04em;--jk-track-title:-.03em;

  /* 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;
  /* compact densities (as on the current dashboard) */
  --jk-row-pad:7px;           /* hairline row ≈ 36 px with 16 px text */
  --jk-group-gap:28px;        /* between groups inside a chapter */
  --jk-hero-gap:24px;         /* chapter header → hero */
  --jk-chapter-gap:64px;      /* between chapters, desktop (hairline in the middle) */
  --jk-chapter-gap-m:40px;    /* between chapters, < 768 px */
  --jk-page-x:clamp(16px,4.4vw,88px);
  --jk-topbar-h:72px;         /* space reserved under the floating top bar */
  --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:cubic-bezier(.2,.8,.2,1);
  --jk-spring:linear(0,.009,.035 2.1%,.141 4.4%,.281 6.7%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077 22.1%,1.105 24.8%,1.11 27.8%,1.096 31.2%,1.04 37.7%,1.007 44.1%,.993 51.5%,1.001 67.3%,1);
  --jk-d-fast:.15s;           /* hover, tooltip */
  --jk-d-fade:.4s;            /* fade-in of groups (opacity only) */
  --jk-d-theme:.4s;           /* light/dark cross-fade */
  --jk-d-draw:.6s;            /* first draw of a chart */
  --jk-d-pill:.35s;           /* nav pill indicator */

  /* 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-accent:#b8921a;--jk-accent-text:#7a5c00;--jk-on-accent:#fff;--jk-accent-wash:rgba(184,146,26,.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;
  --jk-bg:#121314;--jk-surface:#141414;--jk-surface-2:#191a17;
  --jk-ink:#f6f3ee;--jk-ink-2:#c9c4bb;
  --jk-t2:rgba(246,243,238,.70);
  --jk-t3:rgba(246,243,238,.56);
  --jk-hair:rgba(246,243,238,.12);
  --jk-accent:#e8c547;--jk-accent-text:#e8c547;--jk-on-accent:#171710;--jk-accent-wash:rgba(232,197,71,.12);
  --jk-amb:#e9b44c;
  --jk-ok:#8fbf8a;--jk-fail:#e07a5f;--jk-info:#8fb3d9;
  --jk-tint:rgba(18,18,20,.6);--jk-tint-hi:rgba(26,26,28,.74);--jk-tint-edge:rgba(18,18,20,.3);
  --jk-rim:rgba(255,255,255,.42);--jk-rim-lo:rgba(255,255,255,.06);--jk-glow:rgba(255,255,255,.16);
  --jk-drop:0 28px 70px -30px rgba(0,0,0,.85),0 2px 8px -2px rgba(0,0,0,.5);
  --jk-text-shadow:0 1px 2px rgba(0,0,0,.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):
   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. */
/* base: page, type roles, fade-in, theme cross-fade, reduced motion */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--jk-bg);color:var(--jk-ink);-webkit-text-size-adjust:100%}
body{margin:0;font:var(--jk-fs-body)/1.4 var(--jk-font);color:var(--jk-ink);background:transparent;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.jk-page{padding:calc(var(--jk-topbar-h) + env(safe-area-inset-top)) var(--jk-page-x) 0;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-accent);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-fade) ease-out}.jk-fx.in{opacity:1}
/* theme cross-fade (theme.js adds .jk-th-fade for 450 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 calc(128px + env(safe-area-inset-bottom));font-size:13px;color:var(--jk-t3)}
/* animated soft gradient background — three blurred discs drifting slowly (transform only, no filters).
   Markup: <div class="jk-bg" aria-hidden="true"><i></i><i></i><i></i></div> as the first child of <body>.
   Layer 0 of the scroll model: background.js may translate it at 0.2× scroll (capped). Off under reduced motion. */
.jk-bg{position:fixed;inset:0;bottom:-30vh;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.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%);will-change:transform;animation:jkdrift var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.jk-bg i:nth-child(1){--s:max(82vw,82vh);--x:14%;--y:10%;--d:38s;--dl:-6s;--tx:8vw;--ty:6vh;--c:var(--jk-bg-1);--c2:var(--jk-bg-1b)}
.jk-bg i:nth-child(2){--s:max(74vw,74vh);--x:90%;--y:30%;--d:32s;--dl:-14s;--tx:-7vw;--ty:8vh;--c:var(--jk-bg-2);--c2:var(--jk-bg-2b)}
.jk-bg i:nth-child(3){--s:max(88vw,88vh);--x:56%;--y:100%;--d:40s;--dl:-3s;--tx:-8vw;--ty:-7vh;--c:var(--jk-bg-3);--c2:var(--jk-bg-3b)}
.jk-bg i:nth-child(n+4){display:none}
@keyframes jkdrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(calc(var(--tx)*.6),calc(var(--ty)*-.5),0) scale(1.08)}100%{transform:translate3d(var(--tx),var(--ty),0) scale(.95)}}
@media (prefers-reduced-motion:reduce){.jk-bg i{animation:none}}
html.jk-rm .jk-bg i{animation: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(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 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(0,0,0,.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(255,255,255,.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:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.jk-sheet[open]{animation:jksheet var(--jk-d-fade) var(--jk-ease)}
.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}to{opacity:1}}
@media (max-width:767px){.jk-sheet{margin:auto auto 8px;width:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.jk-sheet[open]{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(calc(100% - 20px),1180px);
  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{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(0,0,0,.12)}
.jk-thsw button:focus-visible{outline:2px solid var(--jk-accent);outline-offset:1px}
.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:none}.jk-thsw button{padding:0;font-size:13px;min-width:36px;min-height:36px;flex:0 0 36px}[data-jk-theme-switch]{flex-shrink:1}[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.
   64 px between chapters on desktop (40 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 ≈ 36 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)}}
/* 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 springs 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-accent);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);box-shadow:0 1px 4px rgba(0,0,0,.12);transition:transform var(--jk-d-pill) var(--jk-spring),width var(--jk-d-pill) var(--jk-spring)}
html[data-theme="dark"] .jk-pill .jk-ind{background:rgba(255,255,255,.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}}