.static-demo-banner{font:500 13px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;
  padding:10px 16px;background:rgba(125,211,252,.10);border-bottom:1px solid rgba(125,211,252,.28);
  color:inherit;text-align:center}
.static-demo-banner a{color:#38bdf8;text-decoration:underline;text-underline-offset:2px}
.static-demo-banner__warn{opacity:.8}


  #overviewPage {
    --overview-ink: var(--wa-text-strong);
    --overview-ink-soft: var(--wa-text-muted);
    --overview-border: var(--wa-hairline);
    --overview-border-strong: var(--wa-hairline);
    --overview-surface: var(--wa-surface);
    --overview-surface-muted: var(--wa-text-inverse);
    --overview-shadow: var(--wa-shadow-sm);
    border-radius: 1.5rem;
    padding: 1.1rem 1.1rem 1.5rem;
    background:
      radial-gradient(1200px 360px at 100% -15%, var(--wa-warn-wash), var(--wa-warn-wash)),
      radial-gradient(900px 280px at 0% 0%, var(--wa-info-wash), var(--wa-info-wash)),
      linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 30%, var(--wa-surface) 100%);
  }
  #overviewPage.is-loading {
    opacity: 0.82;
    transition: opacity 0.18s ease;
  }
  #overviewPage .overview-panel,
  #overviewPage .overview-shell-card,
  #overviewPage .section-shell,
  #overviewPage .hero-main,
  #overviewPage .hero-side {
    border: 1px solid var(--overview-border);
    border-radius: 1.15rem;
    background: var(--overview-surface);
    box-shadow: var(--overview-shadow);
    backdrop-filter: none;
  }
  #overviewPage .panel-header,
  #overviewPage .section-shell-header {
    border-bottom: 1px solid var(--wa-hairline);
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    padding: 1rem 1.1rem;
  }
  #overviewPage .panel-body,
  #overviewPage .section-shell-body {
    padding: 1.05rem 1.1rem 1.1rem;
  }
  #overviewPage .hero-label,
  #overviewPage .panel-eyebrow,
  #overviewPage .overview-section-title,
  #overviewPage .health-scan-label,
  #overviewPage .action-rail-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wa-primary);
    font-weight: 700;
  }
  #overviewPage .panel-title {
    margin: 0.12rem 0 0.1rem;
    font-size: 1.15rem;
    color: var(--overview-ink);
  }
  #overviewPage .panel-subtitle,
  #overviewPage .section-shell-copy {
    color: var(--overview-ink-soft);
  }
  #overviewPage .overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.95fr) minmax(320px, 0.92fr);
    gap: 1rem;
    margin-bottom: 1rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .overview-hero {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .hero-main {
    padding: 1.2rem 1.25rem 1.15rem;
  }
  #overviewPage .hero-side {
    padding: 1rem 1.05rem;
  }
  #overviewPage .hero-title {
    font-size: clamp(1.95rem, 2.35vw, 2.7rem);
    line-height: 1.02;
    color: var(--overview-ink);
    margin: 0.2rem 0 0.45rem;
  }
  #overviewPage .hero-copy {
    max-width: 56rem;
    color: var(--wa-info);
    margin-bottom: 0.65rem;
  }
  #overviewPage .hero-status-blurb {
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--wa-surface), var(--wa-surface-2));
    border: 1px solid var(--wa-info-wash);
    padding: 0.7rem 0.82rem;
    color: var(--wa-info);
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }
  #overviewPage .hero-filter-line {
    font-size: 0.92rem;
    color: var(--wa-text-dim);
  }
  #overviewPage .hero-period-note {
    margin-top: 0.55rem;
    border-left: 3px solid var(--wa-info);
    padding: 0.12rem 0 0.12rem 0.72rem;
    color: var(--wa-info);
    font-size: 0.84rem;
  }
  #overviewPage .context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
  }
  #overviewPage .context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--wa-hairline);
    background: var(--wa-surface);
    color: var(--wa-info);
    font-size: 0.79rem;
    padding: 0.38rem 0.7rem;
    text-decoration: none;
  }
  #overviewPage .context-chip strong {
    color: var(--overview-ink);
    font-weight: 700;
  }
  #overviewPage .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.95rem;
  }
  #overviewPage .hero-link,
  #overviewPage .action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.46rem 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--wa-hairline);
    background: var(--wa-surface);
    color: var(--wa-info);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
  }
  #overviewPage .overview-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
  }
  #overviewPage .overview-status-pill.is-red {
    color: var(--wa-bad);
    background: var(--wa-bad-wash);
    border-color: var(--wa-bad-wash);
  }
  #overviewPage .overview-status-pill.is-orange {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-bad-wash);
  }
  #overviewPage .overview-status-pill.is-yellow {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-warn-wash);
  }
  #overviewPage .overview-status-pill.is-light-green {
    color: var(--wa-good);
    background: var(--wa-good-wash);
    border-color: var(--wa-good-wash);
  }
  #overviewPage .overview-status-pill.is-green {
    color: var(--wa-good);
    background: var(--wa-good-wash);
    border-color: var(--wa-good-wash);
  }
  #overviewPage .overview-status-pill.is-neutral {
    color: var(--wa-text);
    background: var(--wa-surface-2);
    border-color: var(--wa-hairline);
  }
  #overviewPage .hero-side-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }
  #overviewPage .hero-side-header h2 {
    font-size: 1rem;
    color: var(--overview-ink);
    margin: 0.1rem 0 0;
  }
  #overviewPage .hero-side-header p {
    color: var(--overview-ink-soft);
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
  }
  #overviewPage .hero-side-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0.92rem 0;
  }
  @media (max-width: 575.98px) {
    #overviewPage .hero-side-metrics {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .hero-side-metric,
  #overviewPage .health-scan-card,
  #overviewPage .command-side-card,
  #overviewPage .rail-panel-card,
  #overviewPage .risk-summary-card,
  #overviewPage .movers-slab,
  #overviewPage .drivers-period-card,
  #overviewPage .kpi-group-card,
  #overviewPage .trust-card,
  #overviewPage .briefing-card {
    border: 1px solid var(--wa-hairline);
    border-radius: 0.92rem;
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    min-height: 100%;
  }
  #overviewPage .hero-side-metric,
  #overviewPage .health-scan-card,
  #overviewPage .command-side-card,
  #overviewPage .rail-panel-card,
  #overviewPage .risk-summary-card,
  #overviewPage .movers-slab,
  #overviewPage .drivers-period-card,
  #overviewPage .kpi-group-card,
  #overviewPage .trust-card,
  #overviewPage .briefing-card {
    padding: 0.85rem 0.9rem;
  }
  #overviewPage .hero-side-metric .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wa-text-dim);
  }
  #overviewPage .hero-side-metric .value,
  #overviewPage .health-scan-value,
  #overviewPage .score-value,
  #overviewPage .briefing-value {
    margin-top: 0.22rem;
    font-weight: 700;
    color: var(--overview-ink);
    font-size: clamp(1rem, 1.35vw, 1.55rem);
    font-variant-numeric: tabular-nums;
  }
  #overviewPage .hero-side-list,
  #overviewPage .briefing-list,
  #overviewPage .watchouts-list,
  #overviewPage .action-rail-list,
  #overviewPage .issue-list,
  #overviewPage .watchlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }
  #overviewPage .hero-side-list li,
  #overviewPage .action-rail-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    border-bottom: 1px dashed var(--wa-info);
    padding-bottom: 0.52rem;
    color: var(--wa-text);
    font-size: 0.86rem;
  }
  #overviewPage .hero-side-list li:last-child,
  #overviewPage .action-rail-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  #overviewPage .overview-health-rail {
    margin-bottom: 1rem;
  }
  #overviewPage .health-rail-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8rem;
  }
  @media (max-width: 1399.98px) {
    #overviewPage .health-rail-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage .health-rail-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .health-scan-card[data-tone="positive"] {
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    border-color: var(--wa-good);
  }
  #overviewPage .health-scan-card[data-tone="warning"] {
    background: linear-gradient(180deg, var(--wa-warn-wash), var(--wa-surface));
    border-color: var(--wa-warn);
  }
  #overviewPage .health-scan-card[data-tone="negative"] {
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    border-color: var(--wa-bad);
  }
  #overviewPage .health-scan-card[data-tone="neutral"] {
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    border-color: var(--wa-info);
  }
  #overviewPage .health-scan-detail,
  #overviewPage .command-side-copy,
  #overviewPage .score-support,
  #overviewPage .score-delta,
  #overviewPage .briefing-detail,
  #overviewPage .trust-detail,
  #overviewPage .kpi-group-copy {
    color: var(--overview-ink-soft);
    font-size: 0.82rem;
  }
  #overviewPage .control-tower-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.92fr);
    gap: 1rem;
    align-items: start;
  }
  @media (max-width: 1299.98px) {
    #overviewPage .control-tower-layout {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .control-tower-main,
  #overviewPage .control-tower-rail {
    display: grid;
    gap: 1rem;
  }
  #overviewPage .overview-main-flow {
    display: grid;
    gap: 1rem;
  }
  #overviewPage .section-shell-grid {
    align-items: stretch;
  }
  #overviewPage .overview-side-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
  }
  #overviewPage .section-shell-grid > * {
    min-width: 0;
  }
  #overviewPage .section-shell-grid.section-shell-grid-wide {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  #overviewPage .section-shell-grid.section-shell-grid-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (max-width: 1199.98px) {
    #overviewPage .section-shell-grid.section-shell-grid-wide,
    #overviewPage .section-shell-grid.section-shell-grid-balanced {
      grid-template-columns: 1fr;
    }
  }
  /* Bootstrap's `col-xl-*` answer the viewport; these two panels are 579px
     columns inside the outlook grid. At a 1440px viewport the viewport says
     "extra large", so the Pareto was drawn 233px wide and the weekday chart
     140px - narrower than its own legend. Below 1200px the xl classes stop
     applying and this rule is a no-op, which is exactly when the panels are
     full width and the split is real. */
  #overviewPage .outlook-shape .panel-body > .row > [class*="col-xl-"],
  #overviewPage .outlook-pulse .panel-body > .row > [class*="col-xl-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  #overviewPage .control-tower-rail {
    position: sticky;
    top: 1rem;
  }
  @media (max-width: 1299.98px) {
    #overviewPage .control-tower-rail {
      position: static;
      top: auto;
    }
  }
  #overviewPage .executive-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 0.95rem;
    margin-bottom: 0.95rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .executive-command-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .command-primary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.85rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .command-primary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage .command-primary-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .command-secondary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .command-secondary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage .command-secondary-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .command-primary-card {
    border: 1px solid var(--wa-info);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%);
    padding: 1rem 1rem 0.95rem;
    min-height: 100%;
  }
  #overviewPage .score-label,
  #overviewPage .briefing-label,
  #overviewPage .trust-label {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wa-text-dim);
    font-weight: 700;
  }
  #overviewPage .command-context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
  }
  #overviewPage .command-context-strip .context-chip {
    font-size: 0.76rem;
    padding: 0.3rem 0.55rem;
  }
  #overviewPage .comparison-note-stack {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
  }
  #overviewPage .comparison-note-card {
    border: 1px solid var(--wa-info);
    border-radius: 0.88rem;
    background: var(--wa-surface);
    padding: 0.8rem 0.85rem;
  }
  #overviewPage .briefing-grid,
  #overviewPage .briefing-support-grid,
  #overviewPage .trust-grid {
    display: grid;
    gap: 0.8rem;
  }
  #overviewPage .briefing-grid,
  #overviewPage .briefing-support-grid,
  #overviewPage .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (max-width: 767.98px) {
    #overviewPage .briefing-grid,
    #overviewPage .briefing-support-grid,
    #overviewPage .trust-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .briefing-card.positive {
    border-color: var(--wa-good);
    background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%);
  }
  #overviewPage .briefing-card.negative {
    border-color: var(--wa-bad);
    background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%);
  }
  #overviewPage .briefing-card.warning {
    border-color: var(--wa-warn);
    background: linear-gradient(180deg, var(--wa-warn-wash) 0%, var(--wa-surface) 100%);
  }
  #overviewPage .briefing-card.info {
    border-color: var(--wa-info);
    background: linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%);
  }
  #overviewPage .briefing-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: var(--wa-info);
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none;
  }
  #overviewPage .briefing-list li,
  #overviewPage .watchouts-list li {
    color: var(--wa-text);
    padding: 0.15rem 0;
    border-bottom: 1px dashed var(--wa-hairline-soft);
  }
  #overviewPage .briefing-list li:last-child,
  #overviewPage .watchouts-list li:last-child {
    border-bottom: 0;
  }
  #overviewPage .briefing-context {
    display: grid;
    gap: 0.4rem;
  }
  #overviewPage .briefing-context .context-revenue {
    font-size: 1.4rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--overview-ink);
    font-variant-numeric: tabular-nums;
  }
  #overviewPage .briefing-inline-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--wa-text);
  }
  #overviewPage .briefing-inline-metrics span {
    border-radius: 999px;
    background: var(--wa-surface);
    padding: 0.28rem 0.52rem;
  }
  #overviewPage .kpi-command-layout {
    display: grid;
    gap: 0.85rem;
  }
  #overviewPage .kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .kpi-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage .kpi-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .kpi-card {
    border-radius: 0.95rem;
    padding: 1rem 1rem 0.95rem;
    background: var(--wa-surface);
    border: 1px solid var(--wa-info);
    min-height: 178px;
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
    overflow: hidden;
    height: 100%;
  }
  #overviewPage .kpi-card.is-hidden {
    display: none;
  }
  #overviewPage .kpi-head {
    align-items: flex-start !important;
  }
  #overviewPage .kpi-label {
    color: var(--wa-text-dim);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
  }
  #overviewPage .kpi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  #overviewPage .kpi-status {
    border-radius: 999px;
    background: var(--wa-info-wash);
    color: var(--wa-info);
    padding: 0.18rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
  }
  #overviewPage .kpi-value-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
  }
  #overviewPage .kpi-value-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  #overviewPage .kpi-value {
    font-size: clamp(1.45rem, 1.9vw, 2rem);
    /* `overflow: hidden` below clips whatever leaves the line box, so the line
       box has to be taller than the glyph ink or the tail of a `$` and the
       commas get shaved. At 1.08 the box was 25px against 28px of ink. */
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    color: var(--overview-ink);
  }
  #overviewPage .kpi-value.is-empty {
    color: var(--wa-text-faint);
  }
  #overviewPage .kpi-deltas {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-size: 0.76rem;
  }
  #overviewPage .kpi-delta-pill {
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: var(--wa-surface-2);
  }
  #overviewPage .kpi-sub {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--wa-text-dim);
  }
  #overviewPage .overview-section-shell {
    display: grid;
    gap: 0.9rem;
  }
  #overviewPage .section-shell-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 1rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .section-shell-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .chart-placeholder {
    min-height: 340px;
    position: relative;
  }
  #overviewPage #trendDiagnosticsCard .chart-placeholder {
    min-height: 380px;
  }
  #overviewPage .chart-placeholder canvas {
    width: 100% !important;
    height: 340px !important;
  }
  #overviewPage #trendDiagnosticsCard .chart-placeholder canvas {
    height: 380px !important;
  }
  #overviewPage .chart-container-sm canvas {
    height: 240px !important;
  }
  #overviewPage .trend-meta-row,
  #overviewPage .section-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
  }
  #overviewPage .section-meta-row .summary,
  #overviewPage .trend-meta-row .summary {
    color: var(--wa-text-dim);
    font-size: 0.84rem;
  }
  #overviewPage .drivers-insight {
    border-top: 1px dashed var(--wa-hairline-soft);
    padding-top: 0.55rem;
  }
  #overviewPage .drivers-details summary {
    cursor: pointer;
  }
  #overviewPage .drivers-period-card h6 {
    color: var(--overview-ink);
    font-size: 0.95rem;
  }
  #overviewPage .drivers-contrib-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  @media (max-width: 991.98px) {
    #overviewPage .drivers-contrib-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .movers-legend {
    color: var(--wa-text-dim);
    font-size: 0.82rem;
  }
  #overviewPage .movers-direction,
  #overviewPage .insight-title {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wa-text-dim);
    font-weight: 700;
  }
  #overviewPage .insight-item {
    border: 1px solid var(--wa-info);
    border-radius: 0.9rem;
    padding: 0.9rem 0.95rem;
    background: var(--wa-surface);
    min-height: 112px;
  }
  #overviewPage .insight-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--overview-ink);
  }
  #overviewPage .insight-detail {
    font-size: 0.82rem;
    color: var(--wa-text-dim);
  }
  #overviewPage .mini-list li,
  #overviewPage .issue-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
  }
  #overviewPage .issue-list li {
    border: 1px solid var(--wa-info);
    border-radius: 0.85rem;
    padding: 0.75rem 0.85rem;
    background: var(--wa-surface);
    align-items: center;
  }
  #overviewPage .issue-list .issue-count {
    font-weight: 700;
    color: var(--overview-ink);
  }
  #overviewPage .watchlist-list li {
    border: 1px solid var(--wa-info);
    border-radius: 0.82rem;
    padding: 0.72rem 0.8rem;
    background: var(--wa-surface);
  }
  #overviewPage .watchlist-list li strong {
    color: var(--overview-ink);
  }
  #overviewPage .health-actions {
    border-radius: 0.9rem;
    background: var(--wa-surface);
    border: 1px solid var(--overview-border);
    padding: 0.85rem 0.95rem;
    color: var(--wa-text);
  }
  #overviewPage .action-rail-feature {
    border-radius: 0.92rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--wa-info);
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
  }
  #overviewPage .action-rail-feature h3 {
    font-size: 1rem;
    color: var(--overview-ink);
    margin: 0.15rem 0 0.25rem;
  }
  #overviewPage .action-rail-feature p {
    color: var(--overview-ink-soft);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
  }
  #overviewPage .action-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  @media (max-width: 575.98px) {
    #overviewPage .action-link-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage .action-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--wa-info);
    font-weight: 600;
    text-decoration: none;
  }
  #overviewPage .outlook-shell-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "forecast forecast"
      "shape pulse";
    gap: 1rem;
    align-items: stretch;
  }
  #overviewPage .outlook-shell-grid .outlook-main {
    grid-area: forecast;
    min-width: 0;
  }
  #overviewPage .outlook-shell-grid .outlook-shape {
    grid-area: shape;
    min-width: 0;
  }
  #overviewPage .outlook-shell-grid .outlook-pulse {
    grid-area: pulse;
    min-width: 0;
  }
  #overviewPage .trust-shell-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas:
      "health action"
      "health signals";
    gap: 1rem;
    align-items: stretch;
  }
  #overviewPage .trust-shell-grid .trust-health {
    grid-area: health;
    min-width: 0;
  }
  #overviewPage .trust-shell-grid .trust-action {
    grid-area: action;
    min-width: 0;
  }
  #overviewPage .trust-shell-grid .trust-signals {
    grid-area: signals;
    min-width: 0;
  }
  #overviewPage #forecastCard .chart-placeholder {
    min-height: 320px;
  }
  #overviewPage #forecastCard .chart-placeholder canvas {
    height: 320px !important;
  }
  #overviewPage #forecastCard .forecast-summary-card {
    margin: 0.85rem 0 0.95rem;
    padding: 0.9rem 0.95rem;
    border-radius: 0.95rem;
    border: 1px solid var(--wa-info);
    background: linear-gradient(135deg, var(--wa-surface), var(--wa-info-wash));
    color: var(--wa-info);
    font-size: 0.92rem;
  }
  #overviewPage #forecastCard .forecast-command-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.95rem;
  }
  #overviewPage #forecastCard .forecast-signal-card,
  #overviewPage #forecastCard .forecast-note-card {
    border: 1px solid var(--wa-info);
    border-radius: 0.95rem;
    background: var(--wa-surface);
    padding: 0.8rem 0.88rem;
  }
  #overviewPage #forecastCard .forecast-signal-label,
  #overviewPage #forecastCard .forecast-note-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wa-text-dim);
    font-weight: 700;
  }
  #overviewPage #forecastCard .forecast-signal-value {
    margin-top: 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--overview-ink);
  }
  #overviewPage #forecastCard .forecast-signal-detail,
  #overviewPage #forecastCard .forecast-note-copy {
    margin-top: 0.2rem;
    color: var(--wa-text-dim);
    font-size: 0.84rem;
    line-height: 1.45;
  }
  #overviewPage #forecastCard .forecast-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  #overviewPage #forecastCard .forecast-mini-list {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }
  #overviewPage #forecastCard .forecast-mini-list li {
    color: var(--wa-text-dim);
    font-size: 0.84rem;
    line-height: 1.42;
    padding-left: 0.8rem;
    position: relative;
  }
  #overviewPage #forecastCard .forecast-mini-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--wa-info);
  }
  #overviewPage #forecastCard .forecast-value-high {
    color: var(--wa-good);
  }
  #overviewPage #forecastCard .forecast-value-medium {
    color: var(--wa-warn);
  }
  #overviewPage #forecastCard .forecast-value-low {
    color: var(--wa-bad);
  }
  #overviewPage #forecastCard .forecast-value-watch {
    color: var(--wa-warn);
  }
  #overviewPage #forecastCard .forecast-value-limited {
    color: var(--wa-bad);
  }
  @media (max-width: 1199.98px) {
    #overviewPage #forecastCard .forecast-command-grid,
    #overviewPage #forecastCard .forecast-note-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage #forecastCard .forecast-command-grid,
    #overviewPage #forecastCard .forecast-note-grid {
      grid-template-columns: 1fr;
    }
  }
  #overviewPage #commercialShapeCard .chart-placeholder {
    min-height: 290px;
  }
  #overviewPage #commercialShapeCard .chart-placeholder canvas {
    height: 290px !important;
  }
  /* `minmax(0, 1fr)` lets a column shrink to nothing. Inside the concentration
     panel, which sits in a col-xl-8 beside a chart, three of them collapsed to
     ~54px and truncated their own labels and currency values mid-character -
     "Watchlist size", "SKU watchlist" and a negative margin figure were all cut
     off. A real minimum wraps the row instead of shredding its contents. */
  #overviewPage .focus-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  @media (max-width: 991.98px) {
    #overviewPage .focus-summary-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Labels wrap to a second line rather than truncate; a currency value never
     truncates at all. */
  #overviewPage .focus-summary-card .focus-label,
  #overviewPage .focus-summary-card .focus-title,
  #overviewPage .focus-summary-card .focus-detail {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  #overviewPage .focus-summary-card .focus-value {
    overflow-wrap: normal;
    white-space: nowrap;
  }
  #overviewPage .focus-summary-card {
    border: 1px solid var(--wa-info);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, var(--wa-surface), var(--wa-surface));
    padding: 0.82rem 0.9rem;
    min-height: 100%;
  }
  #overviewPage .focus-summary-card .focus-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wa-text-dim);
    font-weight: 700;
  }
  #overviewPage .focus-summary-card .focus-title {
    margin-top: 0.24rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--overview-ink);
  }
  #overviewPage .focus-summary-card .focus-value {
    margin-top: 0.18rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--overview-ink);
    font-variant-numeric: tabular-nums;
  }
  #overviewPage .focus-summary-card .focus-detail {
    margin-top: 0.18rem;
    font-size: 0.82rem;
    color: var(--wa-text-dim);
  }
  #overviewPage .overview-routebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--wa-hairline);
    border-left: 3px solid var(--overview-accent);
    border-radius: 0.85rem;
    background: var(--wa-surface);
    box-shadow: var(--wa-shadow-sm);
  }
  #overviewPage .overview-routebar__label {
    padding-right: 0.9rem;
    border-right: 1px solid var(--wa-hairline);
    color: var(--wa-text-dim);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #overviewPage .overview-routebar__links {
    display: flex;
    gap: 0.35rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  #overviewPage .overview-routebar a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.62rem;
    border-radius: 0.52rem;
    color: var(--wa-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  #overviewPage .overview-routebar a span {
    color: var(--overview-accent);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
  }
  #overviewPage .overview-routebar a:hover,
  #overviewPage .overview-routebar a:focus-visible {
    background: var(--wa-info-wash);
    color: var(--wa-text-strong);
  }
  #overviewPage :is(#executiveScorecardCard, #trendDriversSection, #moversRiskSection, #outlookShapeSection, #trustActionSection) {
    scroll-margin-top: 5.5rem;
  }
  @media (max-width: 1199.98px) {
    #overviewPage .outlook-shell-grid,
    #overviewPage .trust-shell-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "forecast"
        "shape"
        "pulse";
    }
    #overviewPage .trust-shell-grid {
      grid-template-areas:
        "health"
        "action"
        "signals";
    }
  }
  @media (max-width: 767.98px) {
    #overviewPage .overview-routebar {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }
    #overviewPage .overview-routebar__label {
      padding-right: 0;
      border-right: 0;
    }
  }


      :root {
        --wa-primary: #0d6efd;
        --bs-primary: #0d6efd;
      }