* { 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)); }
    body {
      margin: 0;
      padding: 24px;
      background: rgb(var(--dev3-surface-base));
      color: rgb(var(--dev3-text-primary));
      font: .875rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .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);
    }
    h1 { margin: 0; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.03em; }
    .eyebrow, .muted { color: rgb(var(--dev3-text-secondary)); }
    .eyebrow { margin-bottom: 3px; font-size: .6875rem; 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));
    }
    .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);
    }
    .kpi { padding: 16px; }
    .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;
    }
    .dashboard-grid > * { min-width: 0; }
    .velocity-panel { grid-column: span 8; }
    .pie-panel { grid-column: span 4; }
    .radar-panel { grid-column: span 7; }
    .scenario-panel { grid-column: span 5; }
    .section { padding: 18px; }
    .section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .section-title { margin: 0; font-size: .9375rem; font-weight: 700; }
    .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; }
    .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)); 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-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-accent)); box-shadow: 0 0 0 3px rgb(var(--dev3-accent) / .16); }
    .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; }
    .evidence-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
    .evidence-table { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
    .evidence-table th, .evidence-table td { padding: 6px 9px; white-space: nowrap; text-align: right; font-size: .65625rem; }
    .evidence-table th { background: rgb(var(--dev3-surface-raised)); cursor: default; font-size: .59375rem; }
    /* Its own scroller is the scrollport, so the page offset would push the
       header onto the rows instead of pinning it. */
    .evidence-table thead th { top: 0; }
    /* The label column stays put while the numbers scroll past it. */
    .evidence-table th:first-child, .evidence-table td:first-child { position: sticky; inset-inline-start: 0; border-inline-end-color: rgb(var(--dev3-border)); text-align: left; }
    .evidence-table thead th:first-child { z-index: 6; }
    .evidence-table tbody td:first-child { z-index: 1; background-color: rgb(var(--dev3-surface-raised)); background-image: linear-gradient(var(--dev3-row-tint, transparent), var(--dev3-row-tint, transparent)); }
    .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)); }
    .evidence-table .sig { font-weight: 700; }
    .evidence-table .wrap { min-width: 15rem; white-space: normal; 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-border)); 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); }
    .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-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-text-secondary)); 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%; }
      th:nth-child(3), td:nth-child(3), th:nth-child(5), td:nth-child(5) { display: none; }
      .evidence-table th:nth-child(3), .evidence-table td:nth-child(3), .evidence-table th:nth-child(5), .evidence-table td:nth-child(5) { display: table-cell; }
      .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; }
    }
    @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; }
      /* 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; }
      .evidence-table-scroll { overflow: visible; }
      .evidence-table { width: 100%; min-width: 0; 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; }
    }
    :root, [data-theme="dark"] { color-scheme: dark; --dev3-surface-base: 6 9 21; --dev3-surface-raised: 14 18 30; --dev3-surface-elevated: 21 26 41; --dev3-text-primary: 250 252 255; --dev3-text-secondary: 170 187 212; --dev3-text-muted: 82 98 121; --dev3-border: 32 38 55; --dev3-accent: 68 150 255; --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; }
    [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: 148 163 184; --dev3-border: 203 213 225; --dev3-accent: 59 130 246; --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; }
    @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: 148 163 184; --dev3-border: 203 213 225; --dev3-accent: 59 130 246; --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; }
    }
    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)); }