/* Intel figures: charts drawn by lib/intel-charts.mjs at true pixel width, so
   their type stays at the page's 9.5 to 11px. Base tokens (--ink, --accent2,
   --rule, --hair, --well, --paper, --f-mono ...) come from intel-report.css;
   this file adds the figure tokens and every class the chart markup uses.
   Colours are set here only, never in the markup. */

:root, .fr-page {
  --ev-strike: #a7453d; --ev-out: #e8a33d; --ev-ship: #3d9fa8;
  --seq-0: #efeeea; --seq-1: #f8e1de; --seq-2: #eeb3ae; --seq-3: #e48980; --seq-4: #d9564a; --seq-5: #a7453d;
}
/* intel-report.css has no dark palette, so the dark figure tokens apply only
   where the page itself is dark: html[data-theme="dark"], or the system
   preference when html carries data-theme="auto". A light page never gets them. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"]:not([data-theme="light"]), :root[data-theme="auto"]:not([data-theme="light"]) .fr-page {
    --ev-strike: #e06b60;
    --seq-0: #25262a; --seq-1: #3a2422; --seq-2: #5e302c; --seq-3: #8a3c35; --seq-4: #c0544a; --seq-5: #e48980;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] .fr-page {
  --ev-strike: #e06b60;
  --seq-0: #25262a; --seq-1: #3a2422; --seq-2: #5e302c; --seq-3: #8a3c35; --seq-4: #c0544a; --seq-5: #e48980;
}

/* Frame: a top rule, the header (Fig. N and title), an optional sub line, the plot, the source. */
.fig2 { margin: 0; border-top: 1px solid var(--rule); padding-top: 9px; display: grid; gap: 6px; min-width: 0; position: relative; align-content: start; }
.fr .sec .fig2 div, .fr .sec .fig2 p, .fr .sec .fig2 span, .fr .sec .fig2 h3, .fr .sec .fig2 figcaption { margin-top: 0; margin-bottom: 0; }
.fig2 .fh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fig2 .fh .fn { font: 600 9.5px var(--f-mono, 'IBM Plex Mono', monospace); color: var(--accent); letter-spacing: .1em; flex: none; }
.fig2 .fh h3, .fr .sec .fig2 .fh h3 { flex: 1 1 14em; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 0; }
.fig2 .sub, .fig2 .fsub { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.fig2 .src, .fig2 figcaption.src { font: 400 9.5px/1.5 var(--f-mono, 'IBM Plex Mono', monospace); color: var(--faint); }
.fig2 .src a.cite { color: var(--accent); }

.plot { position: relative; min-width: 0; }
.plot svg { display: block; overflow: visible; max-width: none; }

/* Tooltip, placed by the bundle at chartHover()'s left/top. */
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 10px/1.45 var(--f-mono, 'IBM Plex Mono', monospace); padding: 5px 7px; border-radius: 2px; white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); z-index: 4; }
.tip b, .fr .tip b { font-weight: 600; color: inherit; }

/* Text in the SVGs */
.plot .ax { font: 400 9.5px var(--f-mono, 'IBM Plex Mono', monospace); fill: var(--faint); }
.plot .axl { font: 500 9.5px var(--f-mono, 'IBM Plex Mono', monospace); fill: var(--muted); }
.plot .vl { font: 600 10px var(--f-mono, 'IBM Plex Mono', monospace); fill: var(--ink); }
.plot .vl.mu { fill: var(--muted); }
.plot .ann { font: 500 9.5px var(--f-mono, 'IBM Plex Mono', monospace); fill: var(--muted); }

/* Marks */
.plot .gd { stroke: var(--hair); stroke-width: 1; }
.plot .evl { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.plot .evt { stroke: var(--muted); stroke-width: 1; }
.plot .ln { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .ar { fill: var(--accent2); opacity: .1; }
.plot .sl { stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; }
.plot .dot { fill: var(--accent2); stroke: var(--paper); stroke-width: 2; }
.plot .dot.ctx { fill: var(--rule); }
.plot .xh-l { stroke: var(--muted); stroke-width: 1; }
.plot .col { fill: var(--rule); }
.plot .col.on { fill: var(--accent2); }
.plot .col.ink { fill: var(--ink); }

/* Days: five steps of the red ramp, plus none */
.plot .d0 { fill: var(--seq-0); } .plot .d1 { fill: var(--seq-1); } .plot .d2 { fill: var(--seq-2); }
.plot .d3 { fill: var(--seq-3); } .plot .d4 { fill: var(--seq-4); } .plot .d5 { fill: var(--seq-5); }
.dlegend { display: flex; gap: 6px; align-items: center; margin-top: 4px; font: 400 9.5px var(--f-mono, 'IBM Plex Mono', monospace); color: var(--faint); }
.dlegend .sw { display: block; width: 14px; height: 8px; border-radius: 2px; }
.dlegend .d1 { background: var(--seq-1); } .dlegend .d2 { background: var(--seq-2); } .dlegend .d3 { background: var(--seq-3); }
.dlegend .d4 { background: var(--seq-4); } .dlegend .d5 { background: var(--seq-5); }

/* Bars: a ranked HTML list; column widths come from the markup (--lab, --num) */
.hbars { display: grid; gap: 7px; }
.hb { display: grid; grid-template-columns: var(--lab, 92px) minmax(0, 1fr) var(--num, 26px); gap: 8px; align-items: center; min-height: 18px; font-size: 12px; line-height: 1.3; color: var(--body); }
.hb .hl { min-width: 0; overflow-wrap: anywhere; }
.hb .tr { height: 10px; background: var(--seq-0); border-radius: 0 2px 2px 0; }
.hb .tr i { display: block; height: 100%; background: var(--ink); border-radius: 0 2px 2px 0; }
.hb .n { font: 600 10.5px var(--f-mono, 'IBM Plex Mono', monospace); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Slopes: small multiples, each panel on its own scale */
.slopes { display: grid; gap: 14px 18px; }
.slopes.c1 { grid-template-columns: minmax(0, 1fr); }
.slopes.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slopes.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slope { display: grid; gap: 4px; min-width: 0; align-content: start; }
/* Side by side, panels share row tracks so a title that wraps does not push its chart down alone. */
@supports (grid-template-rows: subgrid) {
  .slopes.c2 .slope, .slopes.c3 .slope { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; }
  .slopes.c2, .slopes.c3 { row-gap: 4px; }
  .slopes.c2 .slope .st, .slopes.c3 .slope .st { align-self: end; }
}
.slope .st { font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.slope .src { font: 400 9.5px/1.5 var(--f-mono, 'IBM Plex Mono', monospace); color: var(--faint); }
.slope .src a.cite { color: var(--accent); }

/* Units: a share of a whole as a grid of squares */
.waffle { display: grid; grid-template-columns: repeat(var(--cols, 15), 14px); gap: 2px; }
.waffle i { display: block; width: 14px; height: 14px; border-radius: 2px; background: var(--seq-0); }
.waffle i.on { background: var(--ink); }
.ulegend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.ulegend span { display: inline-flex; gap: 6px; align-items: center; }
.ulegend .sw { display: block; width: 10px; height: 10px; border-radius: 2px; background: var(--seq-0); box-shadow: inset 0 0 0 1px var(--hair); }
.ulegend .sw.on { background: var(--ink); box-shadow: none; }
/* Numbered event rules and their key, on narrow line charts */
.fr .ch .evn, .ch .evn { fill: var(--paper, #fff); stroke: var(--muted, #55534e); stroke-width: 1; }
.ch .evn-t { font: 600 9px var(--f-mono, 'IBM Plex Mono', monospace); fill: var(--ink, #101114); }
.ev-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font: 400 10px/1.5 var(--f-mono, 'IBM Plex Mono', monospace); color: var(--muted, #55534e); }
.ev-key b { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--muted, #55534e); border-radius: 50%; font-size: 9px; color: var(--ink, #101114); margin-right: 4px; }
/* Tooltips that carry a sentence wrap inside their box */
.tip.wrap { white-space: normal; width: max-content; max-width: 240px; }

/* ------------------------------------------------------------------------
   Hero: one data visual under the headline (lib/intel-charts.mjs renderHero).
   The section is a size container, so each kind switches layout on the
   column's width, not the window's: next becomes a list under 520px, the
   ladder goes to two columns under 640px, the locator stacks under 560px.
   ------------------------------------------------------------------------ */
.fr .hero { container: hero / inline-size; margin: 0 0 16px; display: grid; gap: 8px; min-width: 0; position: relative; }
.fr .hero :is(p, h4, ol, ul) { margin: 0; }
.fr .hero p + p { margin-top: 0; }
.fr .hero .lab { font: 500 9px var(--f-mono, 'IBM Plex Mono', monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fr .hero .src { font: 400 9.5px/1.5 var(--f-mono, 'IBM Plex Mono', monospace); color: var(--faint); }
.fr .hero .src a.cite { color: var(--accent); }
.fr .hero-body { display: grid; gap: 8px; min-width: 0; }
.fr .hero-cap { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; max-width: 62ch; }
.fr .hero .hero-plot svg { max-width: 100%; height: auto; }
.hero-plot .rf { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.hero-plot .rf.on { stroke: var(--accent); opacity: .9; }
.hero-plot .ann.on { fill: var(--accent); }
.hero-plot .ann.sj { fill: var(--ink); font-weight: 600; }
.hero-plot .dot.ctx2 { fill: var(--muted); }

/* figure: the number set large, then its line */
.fr .hero-big { display: flex; align-items: flex-end; gap: 6px 16px; flex-wrap: wrap; }
.fr .hero-big .n { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: .95; color: var(--ink); font-variant-numeric: tabular-nums; }
.fr .hero-big .n small { font-size: 18px; font-weight: 600; letter-spacing: 0; margin-left: 4px; color: var(--muted); }
.fr .hero-big .ctx { display: grid; gap: 2px; padding-bottom: 4px; min-width: 0; flex: 1 1 18em; }
.fr .hero-big .ctx b { color: var(--accent); font: 600 12px var(--f-mono, 'IBM Plex Mono', monospace); }
.fr .hero-big .ctx span { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* scale: one ruler */
.hero-plot .sc-track { fill: var(--sunk); }
.hero-plot .sc-band { fill: var(--accent-soft); }
.hero-plot .sc-tick { stroke: var(--rule); stroke-width: 1; }
.hero-plot .sc-lead { stroke: var(--rule); stroke-width: 1; }
.hero-plot .sc-th { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 2; }

/* next: dated decisions ahead, a track on a wide column and a list on a narrow one */
.fr .hn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.fr .hn-head .n { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1; margin-top: 4px; }
.fr .hn-head .n small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.hero-plot .nx-track { stroke: var(--rule); stroke-width: 1.5; }
.hero-plot .nx-lead { stroke: var(--hair); stroke-width: 1; }
.hero-plot .nx-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.hero-plot .nx-dot.end { fill: var(--ink); }
.hero-plot .nx-dot.past { stroke: var(--faint); }
.fr .hn-list { display: none; list-style: none; padding: 0; margin: 6px 0 0 5px; border-left: 1.5px solid var(--rule); }
.fr .hn-list li { position: relative; padding: 4px 0 8px 16px; font-size: 12px; line-height: 1.45; }
.fr .hn-list li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); box-sizing: border-box; }
.fr .hn-list li.end::before { background: var(--ink); }
.fr .hn-list li.past { color: var(--faint); }
.fr .hn-list li.past::before { border-color: var(--faint); }
.fr .hn-list b { font: 600 10.5px var(--f-mono, 'IBM Plex Mono', monospace); color: var(--ink); }
.fr .hn-list span { color: var(--muted); }
@container hero (max-width: 519px) {
  .fr .hn-track { display: none; }
  .fr .hn-list { display: block; }
}

/* ladder: the escalation test as five rungs */
.fr .rungs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fr .rung { border: 1px solid var(--hair); border-radius: 4px; padding: 9px 10px 10px; display: grid; gap: 6px; align-content: start; background: var(--paper); min-width: 0; }
.fr .rung.on { border-color: var(--accent2); background: var(--accent-soft); }
.fr .rung .st { font: 600 9px var(--f-mono, 'IBM Plex Mono', monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.fr .rung.on .st { color: var(--accent); }
.fr .rung h4 { font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.fr .rung p { font-size: 11.5px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.fr .rung.on p.w { color: var(--ink); }
.fr .hl-verdict { display: flex; align-items: center; gap: 8px 12px; margin-top: 4px; flex-wrap: wrap; }
.fr .hl-verdict .pill { font: 600 10.5px var(--f-mono, 'IBM Plex Mono', monospace); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; background: var(--accent2); color: #fff; }
.fr .hl-verdict .meter { display: inline-flex; gap: 3px; }
.fr .hl-verdict .meter i { width: 26px; height: 6px; border-radius: 2px; background: var(--hair); }
.fr .hl-verdict .meter i.on { background: var(--accent2); }
.fr .hl-verdict .rule { color: var(--faint); letter-spacing: .1em; }
@container hero (max-width: 639px) {
  .fr .rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* rulings: where the courts and regulators stand (legal and regulatory alerts) */
.fr .rcases { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.fr .rcase { border: 1px solid var(--hair); border-radius: 4px; padding: 9px 10px 10px; display: grid; gap: 6px; align-content: start; background: var(--paper); min-width: 0; }
.fr .rcase .st { font: 600 9px var(--f-mono, 'IBM Plex Mono', monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.fr .rcase.o-for .st, .fr .rcase.o-blocked .st { color: var(--accent); }
.fr .rcase h4 { font-size: 12.5px; color: var(--ink); line-height: 1.3; }
.fr .rcase p { font-size: 11.5px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.fr .rcase p.t { font-style: italic; }
.fr .rcase p.t .when { display: block; margin-top: 2px; font: 500 9.5px var(--f-mono, 'IBM Plex Mono', monospace); font-style: normal; letter-spacing: .06em; color: var(--faint); white-space: nowrap; }
.fr .rcase.subj { border: 1.5px dashed var(--accent2); background: var(--accent-soft); }
.fr .rcase.subj .st { color: var(--accent); }
.fr .rcase.subj p.w { color: var(--ink); }
@container hero (max-width: 639px) {
  .fr .rcases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hero (max-width: 359px) {
  .fr .rcases { grid-template-columns: minmax(0, 1fr); }
}

/* versus: places on one measure, the subject in red and set larger */
.fr .hv-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.fr .hv-rows { display: grid; gap: 9px; margin-top: 2px; }
.fr .hv { display: grid; grid-template-columns: var(--lab, 92px) minmax(0, 1fr) var(--num, 58px); gap: 10px; align-items: center; }
.fr .hv .k { font-size: 12.5px; font-weight: 500; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.fr .hv .tr { height: 14px; background: var(--sunk); border-radius: 0 3px 3px 0; position: relative; }
.fr .hv .tr i { position: absolute; inset: 0 auto 0 0; background: var(--rule); border-radius: 0 3px 3px 0; }
.fr .hv .n { font: 600 12px var(--f-mono, 'IBM Plex Mono', monospace); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.fr .hv.on .k { font-size: 14px; font-weight: 700; }
.fr .hv.on .tr { height: 22px; }
.fr .hv.on .tr i { background: var(--accent2); }
.fr .hv.on .n { font-size: 18px; }

/* locator: a map strip beside the one figure that matters there */
.fr .hl-loc { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; align-items: center; }
.fr .hero .hero-map { border-top: 0; padding-top: 0; }
.fr .hl-stat { display: grid; gap: 4px; min-width: 0; }
.fr .hl-stat .n { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: .95; color: var(--ink); }
.fr .hl-stat b { font-size: 13px; color: var(--ink); line-height: 1.35; }
.fr .hl-stat span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.fr .hl-places { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.fr .hero .mk-tip { white-space: nowrap; }
@container hero (max-width: 559px) {
  .fr .hl-loc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .fr .hero-big .n, .fr .hl-stat .n { font-size: 44px; }
}
/* Locator markers are smaller than a full map's, so sites a few kilometres apart stay apart on a phone. */
.fr .hero .map2 .mk { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 1.5px; }
.fr .hero .map2 .mk svg { width: 9px; height: 9px; }