/* Analysis breakdown pages (dashboard/<slug>/): one template for all ten. Kit tokens only, no literal colours,
   so the light theme and the edition accents carry over. Text 13 px and up, mono labels 12 px and up. */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* ---------- header: question, short answer, manifest ---------- */
.an-head { position: relative; isolation: isolate; padding: 116px var(--gut) var(--sp5); overflow: hidden; }
.an-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 80% at 85% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.an .m-eyebrow { font-size: 12px; }
.an-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--sp4) var(--sp8); align-items: end; }
.an-h1 { margin: 18px 0 0; font: 400 clamp(36px, 4.4vw, 62px)/1.04 var(--sans); letter-spacing: -.042em; text-wrap: balance; }
.an-q { margin: var(--sp2) 0 0; max-width: 64ch; font-size: var(--t-lead); line-height: 1.6; font-weight: 400; color: var(--ink-2); }
.an-answer { margin: var(--sp3) 0 0; max-width: 70ch; padding-left: 18px; border-left: 2px solid var(--accent); font-size: 16px; line-height: 1.66; color: var(--ink); }
.an-answer b { display: block; margin-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.an-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp1); margin: var(--sp3) 0 0; padding: 0; }
.an .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font: 400 12px/1.2 var(--mono); color: var(--ink-2); }
.an .chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.an .chip.pub { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.an .chip.flag { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 50%, transparent); }
.an-manifest { margin: 0; padding: 18px 20px; border-radius: var(--r-lg); display: grid; gap: 12px; }
.an-manifest div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.an-manifest div:last-child { padding-bottom: 0; border: 0; }
.an-manifest dt { font: 500 12px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.an-manifest dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.an-manifest a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- body: sticky section rail + main column ---------- */
.an-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: var(--sp6); padding: var(--sp3) var(--gut) var(--sp10); }
.an-index { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; padding: 4px 4px 4px 0; }
.an-index-k { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.an-index .m-rail > li { line-height: 1.3; }
.an-index .m-rail a { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.an-index .m-rail a:hover { color: var(--ink); }
.an-main { min-width: 0; }
.an-sec { scroll-margin-top: 90px; }
.an-sec + .an-sec { padding-top: var(--sp8); }
#charts { padding-top: 0; }
.an-sec .h2 { margin-bottom: var(--sp4); font-size: clamp(30px, 3vw, 44px); }

/* KPI strip */
.an-kpis { list-style: none; margin: 0 0 var(--sp3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--sp2); }
.an-kpis li { container-type: inline-size; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); }
:root[data-theme="light"] .an-kpis li { box-shadow: var(--shadow); }
.an-kpis b { display: block; font: 400 clamp(17px, 12cqi, 28px)/1.1 var(--mono); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }   /* sized to the tile so long figures (7,038,973.25 TEU) never break mid-number */
.an-kpis .kl { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.an-kpis .kn { display: block; margin-top: 6px; font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* ---------- figures ---------- */
.an-fig { position: relative; margin: 0 0 var(--sp3); padding: 22px 24px 18px; border-radius: var(--r-lg); scroll-margin-top: 90px; }
:root[data-theme="light"] .an-fig.glass { box-shadow: var(--shadow); }
.fig-k { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.fig-k span { padding: 4px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2); }
.fig-h h3 { margin: 12px 0 0; font: 500 clamp(19px, 1.6vw, 23px)/1.25 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.fig-q { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.an-ch { height: var(--h, 340px); margin: 16px -4px 0; }
.fig-cap { margin: 14px 0 0; max-width: 76ch; font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.fig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fig-tools .btn { font-size: 13px; }
.fig-src { margin: 0 0 0 auto; font: 400 12px/1.4 var(--mono); color: var(--muted); }
html:not(.js) .tbl-btn, html:not(.js) .csv-btn { display: none; }

/* the lead chart: the page's one signature, large, in a dark window with schematic corner marks */
.an-lead { padding: 26px 28px 20px; border: 1px solid var(--line-2); background: radial-gradient(90% 70% at 80% 0%, color-mix(in srgb, var(--m-hl) 9%, transparent), transparent 70%), var(--bg); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.an-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask: radial-gradient(80% 70% at 50% 45%, #000 25%, transparent 80%); mask: radial-gradient(80% 70% at 50% 45%, #000 25%, transparent 80%); opacity: .5; }
.an-lead::after { content: ""; position: absolute; inset: 10px; pointer-events: none; border-radius: calc(var(--r-lg) - 8px);
  background: linear-gradient(var(--line-2), var(--line-2)) top left / 14px 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) top left / 1px 14px no-repeat,
              linear-gradient(var(--line-2), var(--line-2)) top right / 14px 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) top right / 1px 14px no-repeat,
              linear-gradient(var(--line-2), var(--line-2)) bottom left / 14px 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) bottom left / 1px 14px no-repeat,
              linear-gradient(var(--line-2), var(--line-2)) bottom right / 14px 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) bottom right / 1px 14px no-repeat; }
.an-lead .fig-k { color: var(--m-hl); }
.an-lead .fig-h h3 { font-size: clamp(23px, 2.3vw, 32px); font-weight: 400; letter-spacing: -.03em; }
.an-lead .an-ch { height: var(--h, clamp(380px, 38vw, 520px)); }
.an-lead .btn.ghost-s { color: var(--ink); }

/* data tables: open by default without JavaScript, behind a toggle with it; scroll inside their own box */
.tbl { margin-top: 14px; max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.js .tbl:not(.open) { display: none; }
.tbl table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--mono); }
.tbl caption { padding: 12px 14px; caption-side: top; text-align: left; font: 400 13px/1.55 var(--sans); color: var(--ink-2); }
.tbl th, .tbl td { padding: 7px 14px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { position: sticky; top: 0; z-index: 1; min-width: 88px; vertical-align: bottom; white-space: normal; font-weight: 500; color: var(--ink); background: var(--bg-3); }
.tbl td { color: var(--ink-2); }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- findings ---------- */
.an-finds { list-style: none; counter-reset: f; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp2); }
.an-finds li { counter-increment: f; padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); }
:root[data-theme="light"] .an-finds li { box-shadow: var(--shadow); }
.an-finds li::before { content: counter(f, decimal-leading-zero); font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
.an-finds p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; }
.an-finds .see { display: flex; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.an-finds .see a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- method ---------- */
.md-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp4); margin-bottom: var(--sp4); }
.md-col h3, .md-h3 { margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.md-h3 { margin-top: var(--sp2); }
.md-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.md-list.chk { list-style: none; padding: 0; }
.md-list.chk li { position: relative; padding-left: 24px; }
.md-list.chk li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 5px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg); }
.md-note { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.md-note a, .md-note code { color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.an code { font: 400 13px/1 var(--mono); }
.q-card { margin: var(--sp2) 0; }
.md-note + .md-grid, .q-card + .md-grid { margin-top: var(--sp5); }
.q-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.q-l { margin: 0; font-size: 14.5px; font-weight: 500; }
.sqlbox { margin: 0; max-height: 320px; overflow: auto; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-3); font: 400 13px/1.65 var(--mono); color: var(--ink-2); white-space: pre; }
.sqlbox .cm { color: var(--muted); }
.sqlbox:has(.api-url) { white-space: pre-wrap; }
.api-url { color: var(--ink-2); word-break: break-all; text-underline-offset: 3px; }

/* ---------- sources, downloads, next and previous ---------- */
.src-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.src-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px var(--sp3); padding: 14px 0; border-bottom: 1px solid var(--line); }
.src-list a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; overflow-wrap: anywhere; }
.src-list span:not(.arr) { font-size: 14.5px; color: var(--ink-2); }
.csv-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.csv-list a { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font: 400 13px/1.2 var(--mono); color: var(--ink); text-decoration: none; }
.csv-list a:hover { border-color: var(--ink-2); }
html:not(.js) .csv-list, html:not(.js) .csv-list + * { display: none; }

.an-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp2); margin-top: var(--sp10); }
.pn { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid var(--line-2); text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.pn:hover { border-color: var(--ink-2); transform: translateY(-2px); }
.pn.next { text-align: right; }
.pn-k { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pn-t { font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
.an-back { margin: var(--sp3) 0 0; }
.an-back a { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.an-back a:hover { color: var(--ink); }
.an-chart-err { margin: 0; padding: 24px; font-size: 14px; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .an-body { grid-template-columns: minmax(0, 1fr); }
  .an-index { display: none; }
}
@media (max-width: 860px) {
  .an-hgrid { grid-template-columns: minmax(0, 1fr); }
  .an-finds, .md-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .an-head { padding-top: 100px; }
  .an-fig { padding: 18px 16px 14px; margin-left: calc(var(--gut) * -.5); margin-right: calc(var(--gut) * -.5); }
  .an-lead { padding: 20px 16px 16px; }
  .an-lead .an-ch { height: var(--h, 360px); }
  .fig-src { margin-left: 0; flex-basis: 100%; }
  .an-pn, .src-list li { grid-template-columns: minmax(0, 1fr); }
  .pn.next { text-align: left; }
}

.q-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   K3b (Oct 7): the ten breakdowns on the K1 kit, same rooms on every page. Charts (one frame: glass, the lead in a dark window)
   then Findings on a full-bleed sky band with the first finding as the dark lead, Method under a ruler divider with ghost 02,
   Sources on a sand band, the lit contact. KPI strip as one instrument panel, like the Dashboard rail.
   ===================================================================== */
/* KPI strip: one panel; every cell draws its own left and top hairline, the panel clips the outer ones, so any wrap works */
.an-kpis { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--elev-1); overflow: hidden; }
.an-kpis li { position: relative; padding: 20px 20px 18px; border: 0; border-radius: 0; background: none; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line) !important; }
.an-kpis li::before { content: ""; position: absolute; left: 20px; top: 0; width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
:root[data-theme="light"] .an-kpis { border-color: color-mix(in srgb, var(--line-2) 70%, #fff); box-shadow: 0 1px 0 var(--hi) inset, 0 2px 6px rgba(24, 44, 96, .06), 0 22px 44px -26px rgba(24, 44, 96, .34); }

/* chart frames: one frame for every chart; daylight cards get the floating-glass depth */
:root[data-theme="light"] .an-fig.glass { box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--line-2) 65%, #fff); }
.an-lead.m-window { border-radius: var(--r-lg); }

/* rooms inside the main column: the tint runs full bleed through a border-image outset (paints outside the box, never widens the page) */
.an-room { position: relative; isolation: isolate; padding-bottom: var(--sp8); }
.an-room::before { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; border-image: linear-gradient(180deg, transparent, var(--an-band) 64px, var(--an-band) calc(100% - 64px), transparent) fill 0 / 0 / 0 100vmax; }
.an-room--sky { --an-band: var(--band-sky); }
.an-room--sand { --an-band: var(--band-sand); }
.an-room + .an-sec, .an-sec + .an-room { padding-top: var(--sp8); }
.an-sec.an-room#findings { padding-top: calc(var(--sp8) + 8px); }

/* findings: the first one is the dark lead */
.an-finds li { background: var(--card); box-shadow: var(--elev-1); }
.an-finds li.m-lead { border: 1px solid; }
.an-finds li.m-lead p:first-child { font-size: 17px; }
.an-finds li.m-lead .see a { color: var(--m-hl); }

/* method: a ruler divider opens the room, ghost 02 behind the head */
.an-main .m-divider { margin: 0 0 var(--sp5); max-width: none; }
.an-main .m-ghost > .m-ghost-n { top: calc(var(--sp8) + 34px); right: 0; font-size: clamp(110px, 10vw, 150px); }   /* sits beside the head, clear of the Checks column */