    * { box-sizing: border-box; }
    /* One scale for everything that stacks, so no panel has to guess a number.
       Overlays live in the browser top layer, so their z-index only orders them
       against each other. */
    :root { --dev3-font-scale: var(--dev3-font-scale-user, 1); --dev3-z-nav: 20; --dev3-z-overlay: 900; --dev3-z-toast: 1000; }
    html, body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    /* Every font size in this sheet is a rem, so the text-size control moves one
       number here and the whole report follows. Starting from 100% instead of a
       px base keeps the reader's own browser font setting intact. */
    html { scroll-behavior: smooth; font-size: calc(100% * var(--dev3-font-scale)); }
    /* The page color lives on `html`, never on `body` — an opaque body background
       would paint over the wash below, which sits at z-index -1 inside it. */
    body {
      margin: 0;
      padding: 24px;
      color: rgb(var(--dev3-text-primary));
      font: .875rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    /* A faint fixed wash behind the report, so the page reads as deep blue with
       light in it instead of as black. `--dev3-wash` dials it down in light mode. */
    body::before {
      position: fixed;
      z-index: -1;
      inset: 0;
      background:
        radial-gradient(58% 44% at 10% -8%, rgb(var(--dev3-accent) / calc(.28 * var(--dev3-wash))), transparent 70%),
        radial-gradient(46% 38% at 90% 0%, rgb(var(--dev3-viz-2) / calc(.24 * var(--dev3-wash))), transparent 72%),
        radial-gradient(54% 42% at 46% 106%, rgb(var(--dev3-gold) / calc(.16 * var(--dev3-wash))), transparent 74%);
      content: "";
      pointer-events: none;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* Stacked top-level blocks are spaced by the container, so any panel order
       an author writes keeps the same rhythm without per-panel margins. */
    /* Wide monitors get the room instead of a 1000px empty gutter; prose keeps a
       readable measure through .prose instead of the container. */
    .app { display: flex; width: min(100%, clamp(1180px, 88vw, 1840px)); flex-direction: column; gap: 14px; margin: auto; }
    .prose { max-width: 72ch; }
    .muted, .section-copy { max-width: 90ch; }
    .topbar, .brand, .actions, .segmented, .inline, .table-tools { display: flex; align-items: center; }
    .topbar { justify-content: space-between; gap: 20px; margin-bottom: 6px; }
    .brand { gap: 13px; }
    .brand img {
      width: 3rem;
      height: 3rem;
      border-radius: 14px;
      box-shadow: 0 10px 28px rgb(var(--dev3-accent) / .22), 0 2px 14px rgb(var(--dev3-gold) / .18);
    }
    h1 { margin: 0; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.03em; }
    .muted { color: rgb(var(--dev3-text-secondary)); }
    /* A gold chip, not gold text: on white the metal only survives as a fill. */
    .eyebrow {
      display: inline-block;
      margin-bottom: 5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgb(var(--dev3-gold));
      color: rgb(var(--dev3-on-gold));
      font-size: .625rem;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    /* A squeezed action row must lose a whole control to the next line, never
       fold one control's label into two — a wrapped pill turns into an oval and
       a wrapped button changes height. */
    /* stretch, so the status pill, the segmented group, and the buttons share one
       height at every text size instead of each computing its own. */
    .actions { align-items: stretch; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .actions > * { flex: 0 0 auto; }
    .actions button, .actions .status { white-space: nowrap; }
    .section-nav {
      position: sticky;
      z-index: var(--dev3-z-nav);
      top: 0;
      display: flex;
      gap: 4px;
      margin: 0;
      padding: 5px;
      overflow-x: auto;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 14px;
      background: rgb(var(--dev3-surface-raised) / .92);
      box-shadow: 0 10px 30px rgb(var(--dev3-shadow) / .1);
      backdrop-filter: blur(14px);
      scrollbar-width: none;
    }
    .section-nav::-webkit-scrollbar { display: none; }
    .section-nav a {
      display: inline-flex;
      flex: 0 0 auto;
      min-height: 44px;
      align-items: center;
      padding: 9px 13px;
      border-radius: 9px;
      color: rgb(var(--dev3-text-secondary));
      font-size: .75rem;
      font-weight: 650;
      text-decoration: none;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .section-nav a:hover { background: rgb(var(--dev3-surface-elevated)); color: rgb(var(--dev3-text-primary)); }
    .section-nav a[aria-current="location"] {
      background: rgb(var(--dev3-accent) / .14);
      box-shadow: inset 0 0 0 1px rgb(var(--dev3-accent) / .28);
      color: rgb(var(--dev3-accent));
    }
    .section-anchor { scroll-margin-top: 4.25rem; }
    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid rgb(var(--dev3-success) / .25);
      border-radius: 999px;
      background: rgb(var(--dev3-success) / .08);
      color: rgb(var(--dev3-success));
      font-size: .75rem;
    }
    /* flex: 0 0 auto, or a tight row shrinks the width but not the height and the
       circle reads as an ellipse. */
    .dot {
      flex: 0 0 auto;
      width: .58em;
      height: .58em;
      border-radius: 50%;
      background: rgb(var(--dev3-success));
      box-shadow: 0 0 0 4px rgb(var(--dev3-success) / .12);
    }
    button, input, select { font: inherit; }
    button {
      padding: 8px 12px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 10px;
      background: rgb(var(--dev3-surface-elevated));
      color: rgb(var(--dev3-text-primary));
      cursor: pointer;
      transition: .16s ease;
    }
    button:hover { border-color: rgb(var(--dev3-accent) / .65); transform: translateY(-1px); }
    button:disabled { opacity: .42; cursor: default; }
    button:disabled:hover { border-color: rgb(var(--dev3-border)); transform: none; }
    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, th:focus-visible,
    .choices.is-focused .choices__inner, .noUi-handle:focus-visible {
      outline: 2px solid rgb(var(--dev3-accent));
      outline-offset: 2px;
    }
    button.primary {
      border-color: rgb(var(--dev3-accent));
      background: rgb(var(--dev3-accent));
      color: rgb(var(--dev3-on-accent));
      font-weight: 650;
    }
    button.ghost { background: transparent; }
    button.active {
      border-color: rgb(var(--dev3-accent) / .55);
      background: rgb(var(--dev3-accent) / .14);
      color: rgb(var(--dev3-accent));
    }
    /* One opt-in hue per panel: a KPI rail, heading marker, pill, bar, and
       evidence marker all read `--dev3-tone`, so no author writes a color. */
    .tone-1 { --dev3-tone: var(--dev3-viz-1); }
    .tone-2 { --dev3-tone: var(--dev3-viz-2); }
    .tone-3 { --dev3-tone: var(--dev3-viz-3); }
    .tone-4 { --dev3-tone: var(--dev3-viz-4); }
    .tone-5 { --dev3-tone: var(--dev3-viz-5); }
    .tone-6 { --dev3-tone: var(--dev3-viz-6); }
    .tone-gold { --dev3-tone: var(--dev3-gold); }
    .grid { display: grid; gap: 14px; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    .stack { display: grid; gap: 14px; }
    .card {
      padding: 16px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 16px;
      background: rgb(var(--dev3-surface-raised));
      box-shadow: 0 14px 34px rgb(var(--dev3-shadow) / .08);
    }
    /* A toned panel carries its hue on its own edge, so a grid of cards reads as
       a set of distinct panels rather than one repeated grey box. */
    .card:is(.tone-1, .tone-2, .tone-3, .tone-4, .tone-5, .tone-6, .tone-gold) {
      border-color: rgb(var(--dev3-tone) / .34);
      box-shadow: 0 14px 34px rgb(var(--dev3-shadow) / .08), 0 0 22px -12px rgb(var(--dev3-tone) / .5);
    }
    /* The tone rides a rail, not the number, so the figure stays most legible. */
    .kpi { position: relative; overflow: hidden; padding: 16px; }
    .kpi::before { position: absolute; inset: 0 0 auto; height: 3px; background: rgb(var(--dev3-tone, var(--dev3-accent))); content: ""; }
    .kpi-top > :last-child { color: rgb(var(--dev3-tone, var(--dev3-accent))); font-size: .8125rem; }
    .kpi-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: rgb(var(--dev3-text-secondary));
      font-size: .6875rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .kpi-value { margin: 8px 0 3px; font-size: 1.8125rem; font-weight: 760; letter-spacing: -.04em; }
    .trend { color: rgb(var(--dev3-success)); font-size: .75rem; }
    .trend.warn { color: rgb(var(--dev3-warning)); }
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
    }
    /* 1 / -1, not span 12: a panel without a width class takes the whole row
       instead of collapsing into a 1/12 sliver, and it survives the narrow and
       print grids that have fewer than 12 columns. */
    .dashboard-grid > * { min-width: 0; grid-column: 1 / -1; }
    .velocity-panel { grid-column: span 8; }
    .pie-panel { grid-column: span 4; }
    .radar-panel { grid-column: span 7; }
    .scenario-panel { grid-column: span 5; }
    /* Opt-in widths for author panels, live only where 12 columns exist. */
    @media (min-width: 901px) {
      .dashboard-grid > .span-3 { grid-column: span 3; }
      .dashboard-grid > .span-4 { grid-column: span 4; }
      .dashboard-grid > .span-5 { grid-column: span 5; }
      .dashboard-grid > .span-6 { grid-column: span 6; }
      .dashboard-grid > .span-7 { grid-column: span 7; }
      .dashboard-grid > .span-8 { grid-column: span 8; }
      .dashboard-grid > .span-9 { grid-column: span 9; }
    }
    .section { padding: 18px; }
    .section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    /* Warm rhythm down the page; a toned panel recolors its own marker. */
    .section-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: .9375rem; font-weight: 700; }
    .section-title::before {
      flex: 0 0 auto;
      width: 3px;
      height: 1em;
      border-radius: 2px;
      background: rgb(var(--dev3-tone, var(--dev3-gold)));
      content: "";
    }
    .section-copy { margin-top: 2px; color: rgb(var(--dev3-text-secondary)); font-size: .75rem; }
    .segmented {
      gap: 3px;
      padding: 3px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 11px;
      background: rgb(var(--dev3-surface-base));
    }
    .segmented button { padding: 6px 9px; border: 0; background: transparent; }
    /* The readout is the reset button, so the group needs no fourth control. Its
       width is fixed in ch so stepping 90% → 100% cannot shift the topbar. */
    .text-size button { min-height: 30px; font-weight: 700; }
    .text-size button[data-font-step="-1"] { font-size: .8125rem; }
    .text-size button[data-font-step="1"] { font-size: 1.0625rem; }
    .text-size .text-size-value { min-width: 4ch; color: rgb(var(--dev3-text-secondary)); font-size: .6875rem; font-variant-numeric: tabular-nums; }
    .segmented button.active { background: rgb(var(--dev3-accent)); color: rgb(var(--dev3-on-accent)); }
    .chart-host { position: relative; height: 15.625rem; overflow: hidden; }
    .chart-host svg { max-width: 100%; }
    html.printing .chart-host { height: var(--dev3-print-chart-height, 9.6875rem); }
    html.printing .chart-host > div, html.printing .chart-host svg { width: 100% !important; height: 100% !important; }
    .chart-unavailable {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 0 24px;
      border: 1px dashed rgb(var(--dev3-border));
      border-radius: 12px;
      color: rgb(var(--dev3-text-muted));
      font-size: .75rem;
      text-align: center;
    }
    .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .field { display: grid; gap: 6px; }
    .field.full { grid-column: 1 / -1; }
    .field label, .option-group legend {
      color: rgb(var(--dev3-text-secondary));
      font-size: .6875rem;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .field label:has(output) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .field output {
      padding: 3px 8px;
      border: 1px solid rgb(var(--dev3-accent) / .28);
      border-radius: 999px;
      background: rgb(var(--dev3-accent) / .09);
      color: rgb(var(--dev3-accent));
      font-size: .6875rem;
      font-weight: 750;
      letter-spacing: 0;
      text-transform: none;
    }
    .field input, .field select {
      width: 100%;
      padding: 9px 10px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 10px;
      background: rgb(var(--dev3-surface-base));
      color: rgb(var(--dev3-text-primary));
      outline: none;
    }
    .field input:focus, .field select:focus {
      border-color: rgb(var(--dev3-accent));
      box-shadow: 0 0 0 3px rgb(var(--dev3-accent) / .12);
    }
    input[type="range"] {
      height: 28px;
      padding: 0;
      border: 0;
      box-shadow: none;
      accent-color: rgb(var(--dev3-accent));
    }
    input[data-ui-slider].is-enhanced {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* Slider geometry is em, so the handle stays a comfortable target next to
       enlarged text instead of turning into a dot. */
    .ui-range-control { height: 2.43em; margin: .5em .79em 1.29em; border: 0; background: transparent; box-shadow: none; }
    .ui-range-control.noUi-horizontal { height: .5em; }
    .ui-range-control .noUi-base {
      border-radius: 999px;
      background: rgb(var(--dev3-border) / .72);
      box-shadow: inset 0 1px 2px rgb(var(--dev3-shadow) / .18);
    }
    .ui-range-control .noUi-connect {
      border-radius: 999px;
      background: linear-gradient(90deg, rgb(var(--dev3-accent) / .58), rgb(var(--dev3-accent)));
      box-shadow: 0 0 18px rgb(var(--dev3-accent) / .22);
    }
    .ui-range-control .noUi-handle {
      top: -.64em;
      right: -.93em;
      width: 1.86em;
      height: 1.86em;
      border: 2px solid rgb(var(--dev3-surface-raised));
      border-radius: 50%;
      background: rgb(var(--dev3-accent));
      box-shadow: 0 4px 14px rgb(var(--dev3-shadow) / .28), 0 0 0 5px rgb(var(--dev3-accent) / .12);
      cursor: grab;
    }
    .ui-range-control .noUi-handle:active { cursor: grabbing; }
    .ui-range-control .noUi-handle::before,
    .ui-range-control .noUi-handle::after { display: none; }
    .ui-range-control .noUi-touch-area { border-radius: inherit; }
    .ui-range-control .noUi-tooltip {
      bottom: 2.43em;
      padding: 4px 7px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 7px;
      background: rgb(var(--dev3-surface-elevated));
      color: rgb(var(--dev3-text-primary));
      box-shadow: 0 6px 18px rgb(var(--dev3-shadow) / .2);
      font-size: .625rem;
      font-weight: 700;
      opacity: 0;
      transform: translate(-50%, 3px);
      transition: opacity .16s ease, transform .16s ease;
    }
    .ui-range-control .noUi-handle:hover .noUi-tooltip,
    .ui-range-control .noUi-handle:focus .noUi-tooltip,
    .ui-range-control .noUi-active .noUi-tooltip { opacity: 1; transform: translate(-50%, 0); }
    .ui-range-control .noUi-pips-horizontal { top: .79em; height: 1.57em; padding: 0; }
    .ui-range-control .noUi-marker-horizontal.noUi-marker { width: 1px; height: 4px; background: rgb(var(--dev3-border)); }
    .ui-range-control .noUi-value-horizontal { top: 6px; color: rgb(var(--dev3-text-muted)); font-size: .5625rem; transform: translateX(-50%); }
    .range-label { display: flex; justify-content: space-between; color: rgb(var(--dev3-text-secondary)); font-size: .6875rem; }
    .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .option-group { min-width: 0; padding: 0; margin: 0; border: 0; }
    .option-group legend { margin-bottom: 6px; }
    .check, .switch {
      display: flex;
      min-height: 42px;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 10px;
      background: rgb(var(--dev3-surface-base));
      color: rgb(var(--dev3-text-secondary));
      font-size: .75rem;
      cursor: pointer;
      transition: border-color .16s ease, background .16s ease, color .16s ease;
    }
    .check:hover, .switch:hover { border-color: rgb(var(--dev3-accent) / .48); color: rgb(var(--dev3-text-primary)); }
    .check:has(input:checked), .switch:has(input:checked) { border-color: rgb(var(--dev3-accent) / .34); background: rgb(var(--dev3-accent) / .055); }
    /* Control glyphs are sized in em, so a checkbox, radio, or switch grows with
       the label beside it instead of shrinking against enlarged text. */
    .check input {
      appearance: none;
      display: grid;
      flex: 0 0 auto;
      width: 1.5em;
      height: 1.5em;
      padding: 0;
      place-items: center;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 5px;
      background: rgb(var(--dev3-surface-raised));
      box-shadow: none;
    }
    .check input[type="radio"] { border-radius: 50%; }
    .check input[type="radio"]:checked { border-color: rgb(var(--dev3-accent)); background: rgb(var(--dev3-accent)); box-shadow: inset 0 0 0 .33em rgb(var(--dev3-surface-raised)); }
    .check input[type="checkbox"]:checked { border-color: rgb(var(--dev3-accent)); background: rgb(var(--dev3-accent)); }
    .check input[type="checkbox"]:checked::after { width: .66em; height: .33em; border: solid rgb(var(--dev3-on-accent)); border-width: 0 0 2px 2px; content: ""; transform: translateY(-1px) rotate(-45deg); }
    .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .switch > span { position: relative; flex: 0 0 auto; width: 3.17em; height: 1.83em; border-radius: 999px; background: rgb(var(--dev3-border)); transition: background .18s ease; }
    .switch > span::after { position: absolute; top: .25em; left: .25em; width: 1.33em; height: 1.33em; border-radius: 50%; background: rgb(var(--dev3-text-primary)); content: ""; transition: transform .18s ease; }
    .switch input:checked + span { background: rgb(var(--dev3-accent)); }
    .switch input:checked + span::after { background: rgb(var(--dev3-on-accent)); transform: translateX(1.33em); }
    .switch input:focus-visible + span { outline: 2px solid rgb(var(--dev3-accent)); outline-offset: 2px; }
    .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
    /* Choices sizes its own chips, search field, and select hint from these three
       variables, so handing it rem values is what makes a multi-select follow the
       text-size control instead of staying at its 16/14/12px defaults. */
    .choices {
      width: 100%;
      margin: 0;
      color: rgb(var(--dev3-text-primary));
      --choices-font-size-lg: 1rem;
      --choices-font-size-md: .875rem;
      --choices-font-size-sm: .75rem;
    }
    .choices__heading { font-size: .75rem; }
    .table-tools .choices { width: auto; min-width: 9.5rem; }
    .choices__inner {
      min-height: 39px;
      padding: 7px 38px 7px 10px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 10px;
      background: rgb(var(--dev3-surface-base));
      font-size: .875rem;
    }
    .is-open .choices__inner { border-color: rgb(var(--dev3-accent)); border-radius: 10px 10px 7px 7px; }
    .choices[data-type*="select-one"]::after { right: 14px; width: .5em; height: .5em; margin-top: -6px; border: solid rgb(var(--dev3-text-muted)); border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .choices[data-type*="select-one"].is-open::after { margin-top: -2px; border-color: rgb(var(--dev3-accent)); transform: rotate(225deg); }
    .choices__list--single { padding: 0; }
    .choices__list--dropdown, .choices__list[aria-expanded] {
      z-index: var(--dev3-z-overlay);
      margin-top: 5px;
      overflow: hidden;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 10px;
      background: rgb(var(--dev3-surface-elevated));
      box-shadow: 0 16px 36px rgb(var(--dev3-shadow) / .26);
      color: rgb(var(--dev3-text-primary));
    }
    .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { padding: 9px 11px; font-size: .75rem; }
    .choices__list--dropdown .choices__item--choice.is-selected,
    .choices__list[aria-expanded] .choices__item--choice.is-selected {
      background: rgb(var(--dev3-accent) / .1);
      box-shadow: inset 3px 0 0 rgb(var(--dev3-accent));
      color: rgb(var(--dev3-text-primary));
    }
    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
      background: rgb(var(--dev3-accent) / .18);
      color: rgb(var(--dev3-text-primary));
    }
    /* An open panel is lifted into the top layer, where the viewport is its
       containing block, so the shell owns its coordinates and the UA defaults
       (centred inset, auto margin, own border) must go. */
    .choices__list--dropdown[popover], .choices__list[aria-expanded][popover],
    .choices.is-flipped .choices__list--dropdown[popover] {
      inset: auto;
      margin: 0;
      padding: 0;
    }
    /* Nothing an author writes can clip a menu that is in the top layer: a card
       with overflow, a horizontal scroller, and a sticky header all stop
       mattering. Hand-rolled `position: absolute` panels are the bug this
       replaces — see AUTHORING.md. */
    .popover-anchor { position: relative; }
    .popover {
      position: fixed;
      z-index: var(--dev3-z-overlay);
      min-width: 13rem;
      max-width: min(22.5rem, calc(100vw - 24px));
      overflow-y: auto;
      inset: auto;
      margin: 0;
      padding: 4px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 12px;
      background: rgb(var(--dev3-surface-elevated));
      box-shadow: 0 18px 44px rgb(var(--dev3-shadow) / .3);
      color: rgb(var(--dev3-text-primary));
      overscroll-behavior: contain;
    }
    .popover:not([data-open]) { display: none; }
    .popover-title {
      padding: 7px 10px 5px;
      color: rgb(var(--dev3-text-muted));
      font-size: .625rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .popover hr { margin: 4px 2px; border: 0; border-top: 1px solid rgb(var(--dev3-border)); }
    .popover button, .popover a {
      display: flex;
      width: 100%;
      min-height: 36px;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      font-size: .75rem;
      text-align: start;
      text-decoration: none;
    }
    .popover button:hover, .popover a:hover, .popover button:focus-visible, .popover a:focus-visible {
      background: rgb(var(--dev3-accent) / .14);
      color: rgb(var(--dev3-accent));
      transform: none;
    }
    [data-popover-trigger] .caret, [data-popover-trigger] .popover-caret { transition: transform .16s ease; }
    [data-popover-trigger][aria-expanded="true"] .caret,
    [data-popover-trigger][aria-expanded="true"] .popover-caret { transform: rotate(180deg); }
    /* clip, not hidden: hidden makes the card a scrollport and unpins the header. */
    .table-card { padding: 0; overflow: clip; }
    /* A table answers to the box it sits in, not to the window: one inside a
       half-width panel has to stack while the page is still wide. The box that
       holds the table is the container, whatever an author called it — the
       stacking below is worthless to a plain <table> in a plain card without it,
       and a container query with no container silently never matches. */
    :not(html, body):has(> table), .table-card, .evidence-table-scroll { container: dev3-table / inline-size; }
    .table-head { padding: 16px 18px 12px; }
    .table-tools { gap: 8px; }
    .table-tools input, .table-tools select {
      padding: 7px 9px;
      border: 1px solid rgb(var(--dev3-border));
      border-radius: 9px;
      background: rgb(var(--dev3-surface-base));
      color: rgb(var(--dev3-text-primary));
      outline: none;
    }
    .table-tools input { width: 12rem; }
    table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
    th, td { padding: 11px 18px; border-top: 1px solid rgb(var(--dev3-border)); overflow-wrap: break-word; text-align: left; font-size: .75rem; }
    /* A vertical rule keeps the eye inside one column across a wide row; every
       cell owns its trailing edge so a pinned column can strengthen its own. */
    th:not(:last-child), td:not(:last-child) { border-inline-end: 1px solid rgb(var(--dev3-border) / .5); }
    th {
      color: rgb(var(--dev3-text-muted));
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    /* border-collapse drops borders on sticky cells, so paint them inset. */
    thead th { position: sticky; z-index: 5; top: var(--dev3-table-head-top, 0px); background: rgb(var(--dev3-surface-raised)); box-shadow: inset 0 -1px 0 rgb(var(--dev3-border)); }
    th[data-sort] { cursor: pointer; }
    th[data-sort]:hover { color: rgb(var(--dev3-text-secondary)); }
    th[data-sort]::after { margin-inline-start: 6px; content: "↕"; font-size: .625rem; opacity: .3; }
    th[data-sort]:hover::after { opacity: .65; }
    th[aria-sort]::after { color: rgb(var(--dev3-accent)); opacity: 1; }
    th[aria-sort="ascending"]::after { content: "↑"; }
    th[aria-sort="descending"]::after { content: "↓"; }
    /* The tint travels as a variable so a pinned cell can composite the same
       zebra/hover state over its own opaque base. */
    tbody tr { background: var(--dev3-row-tint, transparent); transition: background-color .12s ease; }
    tbody tr:nth-child(even) { --dev3-row-tint: rgb(var(--dev3-text-primary) / .045); }
    tbody tr:hover { --dev3-row-tint: rgb(var(--dev3-accent) / .1); }
    .evidence-book { display: grid; gap: 16px; }
    .evidence-toolbar, .evidence-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .evidence-toolbar { justify-content: space-between; }
    .evidence-toolbar .choices { min-width: min(22.5rem, 100%); }
    .evidence-legend { color: rgb(var(--dev3-text-secondary)); font-size: .6875rem; }
    .evidence-marker { display: inline-flex; align-items: center; gap: 5px; }
    .evidence-marker::before { width: .58em; height: .58em; border-radius: 50%; background: rgb(var(--dev3-tone, var(--dev3-text-muted))); content: ""; }
    .evidence-marker.good::before { background: rgb(var(--dev3-success)); }
    .evidence-marker.bad::before { background: rgb(var(--dev3-danger)); }
    .evidence-marker.sig::before { background: rgb(var(--dev3-gold)); box-shadow: 0 0 0 3px rgb(var(--dev3-gold) / .18); }
    .evidence-group { overflow: hidden; border: 1px solid rgb(var(--dev3-border)); border-radius: 16px; background: rgb(var(--dev3-surface-raised)); }
    .evidence-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgb(var(--dev3-border)); }
    .evidence-group-title { margin: 0 0 4px; color: rgb(var(--dev3-text-primary)); font-size: .9375rem; }
    .evidence-table-card + .evidence-table-card { border-top: 1px solid rgb(var(--dev3-border)); }
    .evidence-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px 8px; background: rgb(var(--dev3-surface-elevated) / .42); }
    .evidence-table-title { margin: 0; color: rgb(var(--dev3-text-secondary)); font-size: .75rem; font-weight: 700; }
    .evidence-table-meta { flex: 0 0 auto; color: rgb(var(--dev3-text-muted)); font: .625rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
    /* Kept as the table's query container; it deliberately does not scroll. */
    .evidence-table-scroll { max-width: 100%; }
    .evidence-table { width: 100%; font-variant-numeric: tabular-nums; }
    .evidence-table th, .evidence-table td { padding: 6px 9px; text-align: right; font-size: .65625rem; }
    .evidence-table th { background: rgb(var(--dev3-surface-raised)); cursor: default; font-size: .59375rem; }
    /* The row's identity reads as a label, not as one more number. */
    .evidence-table th:first-child, .evidence-table td:first-child { border-inline-end-color: rgb(var(--dev3-border)); text-align: left; }
    .evidence-table th.grp { border-left: 1px solid rgb(var(--dev3-border)); text-align: center; color: rgb(var(--dev3-text-secondary)); }
    .evidence-table .sep { border-left: 1px solid rgb(var(--dev3-border)); }
    .evidence-table .day { color: rgb(var(--dev3-text-primary)); font-weight: 650; }
    .evidence-table .good { color: rgb(var(--dev3-success)); }
    .evidence-table .bad, .evidence-table .neg { color: rgb(var(--dev3-danger)); }
    .evidence-table .flat, .evidence-table .dim { color: rgb(var(--dev3-text-muted)); }
    /* "Notable", never "good": emphasis takes the brand hue, not a verdict one. */
    .evidence-table .sig { color: rgb(var(--dev3-gold-ink)); font-weight: 700; }
    .evidence-table .wrap { text-align: left; line-height: 1.45; }
    .evidence-table tr.regime td { border-top: 2px solid rgb(var(--dev3-accent) / .55); }
    .evidence-table tr.total td { border-top: 2px solid rgb(var(--dev3-gold) / .5); color: rgb(var(--dev3-text-primary)); font-weight: 700; }
    .pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 650; }
    .pill.success { color: rgb(var(--dev3-success)); background: rgb(var(--dev3-success) / .1); }
    .pill.warning { color: rgb(var(--dev3-warning)); background: rgb(var(--dev3-warning) / .1); }
    .pill.accent { color: rgb(var(--dev3-accent)); background: rgb(var(--dev3-accent) / .1); }
    /* A category pill, not a verdict: it follows the panel's tone. */
    .pill.tone { color: rgb(var(--dev3-tone, var(--dev3-accent))); background: rgb(var(--dev3-tone, var(--dev3-accent)) / .12); }
    .bar-cell { display: flex; align-items: center; gap: 9px; }
    .mini-track { width: 4.75rem; height: 6px; overflow: hidden; border-radius: 99px; background: rgb(var(--dev3-border)); }
    .mini-fill { height: 100%; border-radius: 99px; background: rgb(var(--dev3-tone, var(--dev3-accent))); }
    .toast {
      position: fixed;
      z-index: var(--dev3-z-toast);
      right: 22px;
      bottom: 22px;
      padding: 11px 14px;
      border: 1px solid rgb(var(--dev3-success) / .3);
      border-radius: 11px;
      background: rgb(var(--dev3-surface-elevated));
      color: rgb(var(--dev3-text-primary));
      box-shadow: 0 12px 40px rgb(var(--dev3-shadow) / .24);
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px);
      transition: .2s;
    }
    .toast.show { opacity: 1; transform: none; }
    .empty { padding: 26px; color: rgb(var(--dev3-text-muted)); text-align: center; }
    .print-only { display: none; }
    .dev3-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 4px 2px;
      color: rgb(var(--dev3-text-muted));
      font-size: .6875rem;
    }
    .dev3-footer strong { color: rgb(var(--dev3-gold-ink)); font-weight: 650; }
    .dev3-footer a { color: rgb(var(--dev3-accent)); text-decoration: none; }
    .dev3-footer a:hover { text-decoration: underline; }


    /* A chart growing sideways needs height, or a wide panel reads as a strip. */
    @media (min-width: 1500px) {
      .chart-host { height: 20.625rem; }
    }
    @media (max-width: 900px) {
      .kpis { grid-template-columns: repeat(2, 1fr); }
      .dashboard-grid { grid-template-columns: 1fr; }
      .velocity-panel, .pie-panel, .radar-panel, .scenario-panel { grid-column: auto; }
      .topbar { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 560px) {
      body { padding: 14px; }
      .kpis { grid-template-columns: 1fr; }
      .actions { flex-wrap: wrap; }
      .controls { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .choice-grid { grid-template-columns: 1fr; }
      .table-tools { align-items: stretch; flex-direction: column; }
      .table-tools input { width: 100%; }
      .evidence-group-head, .evidence-toolbar { align-items: stretch; flex-direction: column; }
      .evidence-toolbar .choices { width: 100%; min-width: 0; }
      .dev3-footer { align-items: flex-start; flex-direction: column; }
    }
    /* No table ever scrolls sideways. Past the narrow gate a row stops being a
       row of columns and becomes a stack of labelled lines, so a 20-column table
       still fits a phone — long vertically, never wide. auto-fit pairs cells up
       while there is room and drops to one per line on the narrowest screens. */
    @container dev3-table (max-width: 768px) {
      /* Every cell carries its own heading now, and a row of headings is exactly
         the width pressure being removed. */
      thead { display: none; }
      table, tbody { display: block; }
      tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2px 16px; padding: 12px 16px; border-top: 1px solid rgb(var(--dev3-border)); }
      tbody th, tbody td { display: block; padding: 4px 0; border: 0; text-align: left; font-size: .75rem; }
      /* The shell copies thead text onto each cell, so authors write no labels. */
      tbody td[data-dev3-label]::before {
        display: block;
        color: rgb(var(--dev3-text-muted));
        content: attr(data-dev3-label);
        font-size: .5625rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
      }
      /* Its own selector outranks the generic cell rule, so a stacked ledger cell
         has to be told again not to hug the right edge. */
      .evidence-table th, .evidence-table td { text-align: left; font-size: .6875rem; }
      /* A prose cell takes the whole width instead of one 13rem column. */
      .evidence-table .wrap { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }
    @page { margin: 10mm; }
    @media print {
      *:focus { outline: none !important; }
      html, body {
        background: rgb(var(--dev3-surface-base)) !important;
        color: rgb(var(--dev3-text-primary)) !important;
      }
      body { padding: 0; font-size: .625rem; }
      .app { width: auto; gap: 8px; }
      .topbar { margin-bottom: 0; }
      .brand { gap: 9px; }
      .brand img { width: 2.125rem; height: 2.125rem; border-radius: 10px; box-shadow: none; }
      h1 { font-size: 1.0625rem; }
      .eyebrow { font-size: .5rem; }
      .muted, .section-copy { font-size: .5625rem; }
      .actions, .scenario-panel, .table-tools, .toast, .print-hidden { display: none !important; }
      /* Paper gets the page color, never the wash. */
      body::before { display: none !important; }
      /* An overlay is a live interaction, never static output. */
      .popover, [popover] { display: none !important; }
      .print-only { display: block !important; }
      .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
      .card { padding: 10px; }
      .table-card { padding: 0; }
      .kpi { padding: 9px 10px; }
      .kpi-top { font-size: .5rem; }
      .kpi-value { margin: 3px 0 1px; font-size: 1.25rem; }
      .trend { font-size: .5rem; }
      .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .velocity-panel { grid-column: 1 / -1; }
      .pie-panel, .radar-panel { grid-column: auto; }
      .card, tr { break-inside: avoid; box-shadow: none; }
      .section { padding: 10px; }
      .section-head { margin-bottom: 6px; }
      .section-title { font-size: .6875rem; }
      .segmented { padding: 0; border: 0; background: transparent; }
      .segmented button { display: none; padding: 3px 6px; font-size: .5rem; }
      .segmented button.active { display: block; }
      .chart-host { height: var(--dev3-print-chart-height, 9.6875rem); }
      .chart-host > div, .chart-host svg { width: 100% !important; height: 100% !important; }
      .table-head { padding: 8px 10px 6px; }
      th, td { padding: 5px 10px; font-size: .5rem; }
      thead { display: table-header-group; }
      /* Repeat the header on every page instead of pinning it to a scrollport. */
      thead th, .evidence-table th:first-child, .evidence-table td:first-child { position: static; box-shadow: none; }
      th[data-sort]:not([aria-sort])::after { content: ""; margin: 0; }
      .evidence-book { gap: 8px; }
      .evidence-toolbar, .evidence-legend { display: none !important; }
      .evidence-group { overflow: visible; border-radius: 8px; break-inside: auto; }
      .evidence-group-head { padding: 7px 9px; break-after: avoid; }
      .evidence-group-title { font-size: .5625rem; }
      .evidence-table-head { padding: 5px 7px 3px; break-after: avoid; }
      .evidence-table-title { font-size: .4375rem; }
      .evidence-table-meta { font-size: .375rem; }
      /* Paper is narrow enough to trip the stacking query, and print wants real
         columns with a repeating header — so the query container goes away. */
      :not(html, body):has(> table), .table-card, .evidence-table-scroll { container: normal; }
      .evidence-table { width: 100%; table-layout: auto; }
      .evidence-table th, .evidence-table td { display: table-cell; padding: 1.5px 3px; white-space: normal; font-size: .3875rem; }
      .evidence-table th { font-size: .3625rem; }
      .pill { padding: 2px 5px; font-size: .4375rem; }
      .mini-track { width: 3.25rem; height: 4px; }
      .dev3-footer { padding: 8px 2px 0; font-size: .5rem; }
    }
    /* The semantic four assert a verdict; `--dev3-gold` is brand emphasis and
       `--dev3-viz-*` are categorical hues at one lightness. Never swap families. */
    /* Gold ships twice on purpose. On a white page a gold that passes 4.5:1 as
       TEXT is brown, so `--dev3-gold` stays the real metal for fills, rules and
       markers, and `--dev3-gold-ink` is the darker one used only when gold is
       text. Light mode was the whole reason for the split. */
    :root, [data-theme="dark"] { color-scheme: dark; --dev3-surface-base: 6 9 21; --dev3-surface-raised: 17 22 36; --dev3-surface-elevated: 25 31 48; --dev3-text-primary: 232 238 250; --dev3-text-secondary: 170 187 212; --dev3-text-muted: 115 129 149; --dev3-border: 39 49 64; --dev3-accent: 68 150 255; --dev3-gold: 243 183 67; --dev3-gold-ink: 240 178 54; --dev3-on-gold: 28 22 8; --dev3-success: 74 222 128; --dev3-warning: 250 204 21; --dev3-danger: 255 130 130; --dev3-on-accent: 255 255 255; --dev3-shadow: 0 0 0; --dev3-wash: 1; --dev3-viz-1: 139 184 250; --dev3-viz-2: 194 163 250; --dev3-viz-3: 251 134 220; --dev3-viz-4: 231 169 42; --dev3-viz-5: 49 210 177; --dev3-viz-6: 250 153 115; }
    [data-theme="light"] { color-scheme: light; --dev3-surface-base: 240 242 250; --dev3-surface-raised: 255 255 255; --dev3-surface-elevated: 237 239 247; --dev3-text-primary: 15 23 42; --dev3-text-secondary: 71 85 105; --dev3-text-muted: 100 116 139; --dev3-border: 203 213 225; --dev3-accent: 59 130 246; --dev3-gold: 187 136 0; --dev3-gold-ink: 127 92 24; --dev3-on-gold: 28 22 8; --dev3-success: 22 163 74; --dev3-warning: 202 138 4; --dev3-danger: 220 38 38; --dev3-on-accent: 255 255 255; --dev3-shadow: 15 23 42; --dev3-wash: .8; --dev3-viz-1: 19 106 219; --dev3-viz-2: 142 31 243; --dev3-viz-3: 186 26 156; --dev3-viz-4: 144 104 20; --dev3-viz-5: 24 130 109; --dev3-viz-6: 183 73 19; }
    @media (prefers-color-scheme: light) {
      :root:not([data-theme]) { color-scheme: light; --dev3-surface-base: 240 242 250; --dev3-surface-raised: 255 255 255; --dev3-surface-elevated: 237 239 247; --dev3-text-primary: 15 23 42; --dev3-text-secondary: 71 85 105; --dev3-text-muted: 100 116 139; --dev3-border: 203 213 225; --dev3-accent: 59 130 246; --dev3-gold: 187 136 0; --dev3-gold-ink: 127 92 24; --dev3-on-gold: 28 22 8; --dev3-success: 22 163 74; --dev3-warning: 202 138 4; --dev3-danger: 220 38 38; --dev3-on-accent: 255 255 255; --dev3-shadow: 15 23 42; --dev3-wash: .8; --dev3-viz-1: 19 106 219; --dev3-viz-2: 142 31 243; --dev3-viz-3: 186 26 156; --dev3-viz-4: 144 104 20; --dev3-viz-5: 24 130 109; --dev3-viz-6: 183 73 19; }
    }
    html { background: rgb(var(--dev3-surface-base)); color: rgb(var(--dev3-text-primary)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    body { margin: 0; }
    .dev3-card { padding: 16px; border: 1px solid rgb(var(--dev3-border)); border-radius: 16px; background: rgb(var(--dev3-surface-raised)); }
    .dev3-grid { display: grid; gap: 16px; }
    .dev3-muted { color: rgb(var(--dev3-text-secondary)); }
    .dev3-accent { color: rgb(var(--dev3-accent)); }
