@scope (.financial-overview) {
  :scope {
    --_surface: var(--color-surface);
    --_muted: var(--color-surface-muted);
    --_border: var(--color-border-muted);
    --_ink: var(--color-text-heading);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    container: overview / inline-size;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :scope > * {
    min-inline-size: 0;
  }

  .financial-overview__table-scroll {
    overflow-x: auto;
  }

  .financial-overview__masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-shrink: 0;
    padding-block: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--_border);
  }

  .financial-overview__eyebrow {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .financial-overview__title {
    margin-top: var(--space-xs);
    color: var(--_ink);
    font-size: clamp(var(--text-heading-2), 3vw, var(--text-heading-1));
    font-weight: var(--font-semibold);
  }

  .financial-overview__thesis {
    max-inline-size: 46rem;
    margin-top: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
  }

  /* Filters */
  .financial-overview__filters {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
  }

  .financial-overview__filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
  }

  @container overview (width < 40rem) {
    .financial-overview__filters,
    .financial-overview__filter-row {
      inline-size: 100%;
    }

    .financial-overview__field {
      flex: 1 1 10rem;
    }

    .financial-overview__field .search-filter__input {
      inline-size: 100%;
    }
  }

  .financial-overview__field {
    display: grid;
    gap: var(--space-2xs, 0.25rem);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  .financial-overview__basis {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--_border);
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .financial-overview__basis legend {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .financial-overview__basis-option {
    position: relative;
    cursor: pointer;
  }

  .financial-overview__basis-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
  }

  .financial-overview__basis-option span {
    display: block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-sm, var(--text-caption));
    font-weight: var(--font-semibold);
    transition: background-color 150ms ease, color 150ms ease;
  }

  .financial-overview__basis-option input:checked + span {
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
    color: var(--_ink);
  }

  .financial-overview__basis-option input:focus-visible + span {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* KPI tiles — same joined panel as the contracts page. */
  .financial-overview__summary,
  .financial-overview__card {
    flex-shrink: 0;
    border: 1px solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
  }

  /* The tiles size themselves by the panel, not the window: the 1px grid gap over
     the border color draws the dividers, so any column count keeps clean lines. */
  .financial-overview__summary {
    container: kpis / inline-size;
  }

  .financial-overview__metrics {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid var(--_border);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    background: var(--_border);
  }

  .financial-overview__metric {
    display: grid;
    align-content: start;
    gap: var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-lg);
    background: var(--_surface);
  }

  .financial-overview__metric--lead {
    grid-column: 1 / -1;
    background: linear-gradient(var(--color-primary-muted), var(--color-primary-muted)), var(--_surface);
  }

  @container kpis (width >= 44rem) {
    .financial-overview__metrics {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container kpis (width >= 66rem) {
    .financial-overview__metrics {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .financial-overview__metric--lead {
      grid-column: auto;
    }
  }

  @container kpis (width < 24rem) {
    .financial-overview__metrics {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .financial-overview__metric-label {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .financial-overview__metric-value {
    overflow: hidden;
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: clamp(var(--text-heading-5), 2.2cqi, var(--text-heading-3));
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    text-overflow: ellipsis;
  }

  .financial-overview__metric-value--loss {
    color: var(--color-error-text);
  }

  .financial-overview__delta {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
  }

  .financial-overview__delta--good {
    color: var(--color-success-text);
  }

  .financial-overview__delta--bad {
    color: var(--color-error-text);
  }

  /* The trail reads the month's revenue as one bar: where each real sold went. */
  .financial-overview__trail {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--_border);
  }

  .financial-overview__trail-title {
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
  }

  .financial-overview__trail-track {
    display: flex;
    gap: 2px;
    overflow: hidden;
    height: 0.65rem;
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .financial-overview__trail-segment {
    flex: var(--share, 0) 1 0;
    min-inline-size: 2px;
    background: var(--_segment);
  }

  .financial-overview__trail-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
    list-style: none;
  }

  .financial-overview__trail-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .financial-overview__trail-key::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--radius-full);
    background: var(--_segment);
  }

  .financial-overview__trail-key span {
    color: var(--color-text-muted);
  }

  .financial-overview__empty {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  /* Cards */
  .financial-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  @container overview (width >= 54rem) {
    .financial-overview__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Each card is its own container: its width comes from the grid track, never
     from what is inside, so a chart canvas drawn at an older width cannot push
     the page wider, and everything within adapts to the card's own size. */
  .financial-overview__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-md);
    min-inline-size: 0;
    padding: var(--space-lg);
    container: card / inline-size;
  }

  .financial-overview__card .echart {
    min-inline-size: 0;
  }

  .financial-overview__card-title {
    color: var(--_ink);
    font-size: var(--text-heading-5);
    font-weight: var(--font-semibold);
  }

  .financial-overview__card-hint {
    margin-top: var(--space-2xs, 0.25rem);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  .financial-overview__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  .financial-overview__negative {
    color: var(--color-error-text);
  }

  /* Cash flow readout: the three balances worth reading before the chart. */
  .financial-overview__readout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .financial-overview__readout dt {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .financial-overview__readout dd {
    margin-top: var(--space-2xs);
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: var(--text-heading-6, var(--text-body));
    font-variant-numeric: tabular-nums;
  }

  .financial-overview__readout .financial-overview__negative {
    color: var(--color-error-text);
  }

  /* Payables / receivables */
  .financial-overview__card-header--split {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .financial-overview__windows {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--_border);
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .financial-overview__window {
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    text-decoration: none;
  }

  .financial-overview__window:hover {
    color: var(--_ink);
    text-decoration: none;
  }

  .financial-overview__window[aria-current="true"] {
    background: var(--_surface);
    box-shadow: var(--shadow-xs);
    color: var(--_ink);
  }

  .financial-overview__window:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .financial-overview__agenda {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .financial-overview__agenda th,
  .financial-overview__agenda td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--_border);
    text-align: start;
    vertical-align: middle;
  }

  .financial-overview__agenda thead th {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .financial-overview__agenda .financial-overview__num {
    text-align: end;
  }

  .financial-overview__agenda thead .financial-overview__num {
    font-family: inherit;
  }

  .financial-overview__agenda tbody tr:last-child td {
    border-bottom: 0;
  }

  .financial-overview__date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .financial-overview__date .badge {
    margin-inline-start: var(--space-xs);
    font-family: var(--font-sans, inherit);
    font-size: var(--text-xs);
  }

  .financial-overview__agenda-row--overdue .financial-overview__date {
    color: var(--color-error-text);
  }

  .financial-overview__undated {
    color: var(--color-text-muted);
    font-family: var(--font-sans, inherit);
    font-size: var(--text-caption);
  }

  .financial-overview__entry-link {
    color: var(--_ink);
    text-decoration: none;
  }

  .financial-overview__entry-link:hover {
    color: var(--color-text-link);
    text-decoration: underline;
  }

  .financial-overview__category {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  .financial-overview__more {
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  /* Composition: donut beside its legend table, so identity is never color alone. */
  .financial-overview__composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
  }

  .financial-overview__legend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .financial-overview__legend-table th,
  .financial-overview__legend-table td {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--_border);
    text-align: start;
  }

  .financial-overview__legend-table th {
    color: var(--color-text-secondary);
    font-weight: var(--font-normal);
  }

  .financial-overview__legend-table .financial-overview__num {
    padding-inline-start: var(--space-sm);
    color: var(--_ink);
    text-align: end;
  }

  .financial-overview__legend-table tr:last-child > * {
    border-bottom: 0;
  }

  .financial-overview__swatch {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-inline-end: var(--space-xs);
    border-radius: var(--radius-full);
    background: var(--_segment);
  }

  /* Break-even: the revenue bar read against a fixed mark. */
  .financial-overview__break-even-value {
    color: var(--_ink);
    font-family: var(--font-mono);
    font-size: var(--text-heading-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
  }

  .financial-overview__readout .financial-overview__positive {
    color: var(--color-success-text);
  }

  .financial-overview__gauge {
    position: relative;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background: var(--_muted);
  }

  .financial-overview__gauge-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--share, 0) * 1%);
    border-radius: var(--radius-full);
    background: var(--color-success);
  }

  .financial-overview__gauge-fill--short {
    background: var(--color-warning);
  }

  .financial-overview__gauge-mark {
    position: absolute;
    inset-block: -0.3rem;
    inset-inline-start: calc(var(--at, 0) * 1%);
    width: 2px;
    border-radius: 1px;
    background: var(--_ink);
    box-shadow: 0 0 0 2px var(--_surface);
  }

  .financial-overview__gauge-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
  }

  .financial-overview__agenda tfoot th,
  .financial-overview__agenda tfoot td {
    border-top: 2px solid var(--color-border);
    border-bottom: 0;
    color: var(--_ink);
    font-weight: var(--font-semibold);
  }

  @container card (width >= 30rem) {
    .financial-overview__readout {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .financial-overview__readout--pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container card (width >= 22rem) and (width < 30rem) {
    .financial-overview__readout--pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container card (width < 30rem) {
    .financial-overview__readout > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-sm);
    }

    .financial-overview__readout--pair > div {
      display: block;
    }
  }

  /* A narrow card turns each entry into a two-line block — due date over the
     description, amount on the right — instead of a table that scrolls sideways. */
  @container card (width < 28rem) {
    .financial-overview__agenda--entries thead {
      display: none;
    }

    .financial-overview__agenda--entries tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--space-2xs) var(--space-sm);
      padding-block: var(--space-sm);
      border-bottom: 1px solid var(--_border);
    }

    .financial-overview__agenda--entries tbody tr:last-child {
      border-bottom: 0;
    }

    .financial-overview__agenda--entries td {
      padding: 0;
      border: 0;
    }

    .financial-overview__agenda--entries .financial-overview__date {
      grid-column: 1;
      grid-row: 1;
    }

    .financial-overview__agenda--entries td:nth-child(2) {
      grid-column: 1;
      grid-row: 2;
    }

    .financial-overview__agenda--entries .financial-overview__num {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }

  @container card (width >= 34rem) {
    .financial-overview__composition {
      grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.4fr);
    }
  }

  /* DRE: a cascade, so subtotals carry weight and lines stay quiet. */
  .financial-overview__dre {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, var(--text-caption));
  }

  .financial-overview__dre th,
  .financial-overview__dre td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--_border);
    text-align: start;
  }

  .financial-overview__dre thead th {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .financial-overview__dre .financial-overview__num {
    text-align: end;
  }

  .financial-overview__dre thead .financial-overview__num {
    font-family: inherit;
  }

  .financial-overview__dre-row--line td {
    color: var(--color-text-secondary);
  }

  .financial-overview__dre-row--line th {
    padding-inline-start: var(--space-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-normal, 400);
  }

  .financial-overview__dre-row--subtotal {
    background: var(--_muted);
  }

  .financial-overview__dre-row--subtotal th,
  .financial-overview__dre-row--total th {
    color: var(--_ink);
    font-weight: var(--font-semibold);
  }

  .financial-overview__dre-row--total td {
    color: var(--_ink);
    font-weight: var(--font-semibold);
  }

  .financial-overview__dre-row--total:last-child th,
  .financial-overview__dre-row--total:last-child td {
    border-top: 2px solid var(--color-border);
    border-bottom: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .financial-overview__basis-option span {
      transition: none;
    }
  }
}