/* ══════════════════════════════════════════════════════════════════════
   EXECUTIVE DASHBOARD — board-meeting page styling
   ----------------------------------------------------------------------
   Editorial / institutional-report aesthetic for the partner-facing
   dashboard. Builds on the existing --fr-* design tokens defined in
   custom.css; nothing here introduces new color or font primitives.

   Scope: only `.exec-*` classes are used here. No global selectors. The
   page wrapper class `.exec-page` opts a page into this language; other
   pages remain on the existing fr-* / Bootstrap vocabulary.
   ══════════════════════════════════════════════════════════════════════ */


/* ── Page wrapper ───────────────────────────────────────────────────── */
/* Two-layer structure:
     .exec-page         — full-width warm cream shell (overrides the global
                          #eef1f5 body background). Negative margins extend
                          beyond Bootstrap's .p-3 padding so the tint
                          reaches the parent content area's edges.
     .exec-page__inner  — centered max-width column where actual content
                          lives. Reads like a document on wide monitors.
*/
.exec-page {
    color: var(--fr-ink);
    font-family: var(--fr-font-sans);
    background: var(--fr-bg);
    /* Cancel the parent's .p-3 (1rem) so the tint runs full-bleed, then
       restore vertical padding internally. Horizontal padding lives on
       __inner via padding-left/right so it scales with viewport. */
    margin: -1rem;
    padding: 24px 0 64px;
    min-height: calc(100vh - 96px);
}
.exec-page__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Plotly + CSS-grid interaction: grid items default to min-width: auto
   which lets their content (including a Plotly chart's autosize box)
   push the column wider than its 1fr share, triggering a resize loop.
   Pinning min-width to 0 on every direct child of .exec-two-col stops
   the tick. */
.exec-two-col > * {
    min-width: 0;
}

/* ── Page header (eyebrow + serif title + sub) ──────────────────────── */
.exec-page-head {
    padding: 32px 0 28px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--fr-hairline);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
}
.exec-page-head__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-accent);
    margin: 0 0 14px;
}
.exec-page-head__title {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fr-ink);
    margin: 0;
}
.exec-page-head__sub {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fr-ink-2);
    max-width: 56ch;
}
.exec-page-head__stamp {
    font-family: var(--fr-font-serif);
    font-style: italic;
    color: var(--fr-ink-3);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: right;
}
.exec-page-head__stamp .exec-stamp-strong {
    display: block;
    font-style: normal;
    color: var(--fr-ink);
    font-family: var(--fr-font-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Section scaffolding (Roman numeral + eyebrow + serif title) ────── */
.exec-section {
    padding: 56px 0 8px;
}
.exec-section + .exec-section {
    padding-top: 48px;
}
.exec-section__head {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 20px;
    align-items: end;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fr-hairline);
    margin-bottom: 28px;
}
.exec-roman {
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    color: var(--fr-accent);
    letter-spacing: -0.02em;
}
.exec-section__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.exec-section__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-accent);
    margin: 0;
}
.exec-section__h2 {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--fr-ink);
    margin: 0;
}
.exec-section__meta {
    text-align: right;
    font-size: 11px;
    color: var(--fr-ink-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The body of every section is offset to align with the section title
   (skipping the rail where the Roman numeral sits) so all content
   columns line up vertically. */
.exec-section__body {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
}
.exec-section__rail {
    /* empty; reserved for future per-section marginalia */
}

/* ── AUM hero block (Section I) ─────────────────────────────────────── */
.exec-aum {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    padding: 44px 48px 40px;
    position: relative;
    overflow: hidden;
}
.exec-aum::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fr-accent);
}
.exec-aum__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fr-hairline);
}
.exec-aum__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-2);
    margin: 0;
}
.exec-aum__period {
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--fr-ink-3);
    margin: 0;
}
.exec-aum__number {
    margin: 28px 0 22px;
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: clamp(52px, 7.4vw, 100px);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: var(--fr-ink);
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.exec-aum__currency {
    font-size: 0.6em;
    color: var(--fr-accent);
    margin-right: 4px;
    font-weight: 400;
    transform: translateY(-0.16em);
}
.exec-aum__detail {
    display: flex;
    gap: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--fr-hairline);
    flex-wrap: wrap;
}
.exec-aum__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.exec-aum__stat-label {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 500;
}
.exec-aum__stat-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.exec-aum__stat-value .exec-aum__stat-unit {
    color: var(--fr-ink-3);
    font-weight: 400;
    font-size: 14px;
    margin-left: 2px;
}
.exec-aum__stat-value--positive { color: var(--fr-positive); }


/* ── Filter pill row (above KPI grid) ───────────────────────────────── */
.exec-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    flex-wrap: wrap;
}
.exec-filter-row__label {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin-right: 4px;
}
.exec-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 999px;
    background: transparent;
    font-size: 12.5px;
    color: var(--fr-ink-2);
    cursor: pointer;
    transition: all 0.16s ease;
    font-family: var(--fr-font-sans);
    line-height: 1.2;
}
.exec-pill:hover {
    border-color: var(--fr-accent);
    color: var(--fr-ink);
}
.exec-pill.is-active {
    background: var(--fr-ink);
    color: var(--fr-surface);
    border-color: var(--fr-ink);
}

/* ── KPI grid ───────────────────────────────────────────────────────── */
.exec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--fr-hairline);
    background: var(--fr-hairline);
}
.exec-kpi {
    background: var(--fr-surface);
    padding: 28px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.18s ease;
}
.exec-kpi:hover { background: #FCFAF4; }
.exec-kpi__label {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin: 0;
}
.exec-kpi__value {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--fr-ink);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}
.exec-kpi__value--accent { color: var(--fr-accent); }
.exec-kpi__value .exec-kpi__unit {
    font-size: 20px;
    font-weight: 400;
    color: var(--fr-ink-3);
    margin-left: 2px;
}
.exec-kpi__caption {
    font-size: 12px;
    color: var(--fr-ink-3);
    margin: 0;
    line-height: 1.4;
}
.exec-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fr-ink-2);
    flex-wrap: wrap;
}
.exec-delta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 2px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--fr-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.exec-delta-chip--pos {
    background: var(--fr-positive-tint);
    color: var(--fr-positive);
}
.exec-delta-chip--neg {
    background: rgba(185, 28, 28, 0.07);
    color: var(--fr-negative);
}
.exec-delta-chip svg { display: block; }

/* ── Geographic footprint (Section III) ─────────────────────────────── */
.exec-geo {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    padding: 32px 40px 36px;
}
.exec-geo__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.exec-geo__title {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--fr-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.exec-geo__legend {
    display: flex;
    gap: 22px;
    font-size: 12px;
    color: var(--fr-ink-2);
}
.exec-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.exec-swatch i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--fr-horizon-orange);
}
.exec-swatch--pin i {
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 2px var(--fr-surface), 0 0 0 3px var(--fr-horizon-orange);
}

.exec-map-figure {
    margin: 0;
    padding: 24px 0 12px;
    display: flex;
    justify-content: center;
    position: relative;
}
.exec-map-figure::before,
.exec-map-figure::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1px;
    background: var(--fr-hairline-strong);
}
.exec-map-figure::before { left: 0; }
.exec-map-figure::after  { right: 0; }
.exec-map-figure img {
    max-width: 100%;
    width: 720px;
    height: auto;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(20, 24, 29, 0.04));
}

.exec-geo__caption {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--fr-hairline);
    font-size: 12.5px;
    color: var(--fr-ink-3);
}
.exec-geo__caption strong {
    color: var(--fr-ink);
    font-weight: 600;
}

/* ── Two-column row + panels (Section IV) ───────────────────────────── */
.exec-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.exec-panel {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    padding: 28px 32px 26px;
}
.exec-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
    gap: 12px;
}
.exec-panel__title {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--fr-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.exec-panel__sub {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    margin: 0;
    font-weight: 600;
}

/* Composition stacked bar */
.exec-composition__bar {
    height: 32px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--fr-hairline);
    margin-top: 6px;
}
.exec-composition__seg {
    height: 100%;
    transition: filter 0.18s ease;
}
.exec-composition__seg:hover { filter: brightness(1.07); }
.exec-composition__seg--conv    { background: var(--fr-accent); }
.exec-composition__seg--hybrid  { background: var(--fr-slate); }
.exec-composition__seg--student { background: var(--fr-gold); }

.exec-composition__legend {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.exec-legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--fr-hairline);
}
.exec-legend-row:last-child {
    border-bottom: none;
}
.exec-legend-row__dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
.exec-legend-row__dot--conv    { background: var(--fr-accent); }
.exec-legend-row__dot--hybrid  { background: var(--fr-slate); }
.exec-legend-row__dot--student { background: var(--fr-gold); }
.exec-legend-row__name {
    color: var(--fr-ink);
    font-weight: 500;
    font-size: 13.5px;
}
.exec-legend-row__units {
    font-size: 12.5px;
    color: var(--fr-ink-3);
    font-variant-numeric: tabular-nums;
}
.exec-legend-row__pct {
    font-family: var(--fr-font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--fr-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.exec-legend-row__pct-unit {
    font-size: 11px;
    color: var(--fr-ink-3);
    margin-left: 1px;
}

/* Empty / placeholder small message inside an exec panel */
.exec-panel__empty {
    color: var(--fr-ink-3);
    font-size: 13px;
    padding: 16px 0;
}

/* ── Tab nav (dbc.Tabs) — match the editorial vocabulary ────────────── */
/* Scoped under .exec-page so other pages keep Bootstrap's default tabs. */
.exec-page .nav-tabs {
    border-bottom: 1px solid var(--fr-hairline);
    margin-bottom: 36px;
    margin-top: 8px;
    padding: 0;
    gap: 0;
}
.exec-page .nav-tabs .nav-item { margin-bottom: -1px; }
.exec-page .nav-tabs .nav-link {
    color: var(--fr-ink-3);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    background: transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.exec-page .nav-tabs .nav-link:hover {
    color: var(--fr-ink);
    border-color: transparent;
    background: transparent;
    isolation: isolate;
}
.exec-page .nav-tabs .nav-link.active {
    color: var(--fr-ink);
    border-bottom-color: var(--fr-accent);
    background: transparent;
}

/* Tab content area — restore consistent vertical rhythm */
.exec-page .tab-content > .tab-pane { padding-top: 8px; }


/* ── Section preamble for YoY / Track Record tabs ───────────────────── */
/* Lighter than the Overview's Roman-numeral section heads — these tabs
   are data-dense; the eyebrow + serif title alone is enough framing. */
.exec-tab-head {
    margin-bottom: 28px;
}
.exec-tab-head__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-accent);
    margin: 0 0 8px;
}
.exec-tab-head__title {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--fr-ink);
    margin: 0 0 6px;
}
.exec-tab-head__sub {
    font-size: 13.5px;
    color: var(--fr-ink-3);
    margin: 0;
    max-width: 64ch;
}


/* ── Collapsible sections (Footnotes, Top 5/Bottom 5, drill-downs) ──── */
.exec-collapsible {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    margin-top: 18px;
    overflow: hidden;
}
.exec-collapsible[open] {
    border-color: var(--fr-hairline-strong);
}
.exec-collapsible__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
    transition: background 0.16s ease;
    border-bottom: 1px solid transparent;
}
.exec-collapsible__summary::-webkit-details-marker { display: none; }
.exec-collapsible__summary:hover { background: #FCFAF4; }
.exec-collapsible[open] .exec-collapsible__summary {
    border-bottom-color: var(--fr-hairline);
    background: #FCFAF4;
}

/* Custom chevron */
.exec-collapsible__summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--fr-ink-3);
    border-bottom: 1.5px solid var(--fr-ink-3);
    transform: rotate(-45deg);
    transition: transform 0.2s ease, border-color 0.18s ease;
    flex: 0 0 auto;
}
.exec-collapsible[open] > .exec-collapsible__summary::before {
    transform: rotate(45deg);
    border-color: var(--fr-accent);
}

.exec-collapsible__head { flex: 1; }
.exec-collapsible__title {
    font-family: var(--fr-font-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--fr-ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.exec-collapsible__sub {
    font-size: 12px;
    color: var(--fr-ink-3);
    margin-top: 2px;
    line-height: 1.4;
}
.exec-collapsible__body {
    padding: 22px;
    background: var(--fr-surface);
}

/* Nested collapsible (drill-down inside another collapsible) — flatter,
   denser. Used for the per-property drill-downs and the inner footnote
   "excluded properties" details. */
.exec-collapsible--compact {
    margin-top: 10px;
}
.exec-collapsible--compact > .exec-collapsible__summary {
    padding: 12px 18px;
}
.exec-collapsible--compact .exec-collapsible__title {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    font-weight: 500;
}

/* Filter row inside a collapsible body (Top 5/Bottom 5 type filter) */
.exec-collapsible__body .exec-filter-row {
    margin: 0 0 18px;
}

/* Branded callout block (replaces dbc.Alert in the forecast footnote) */
.exec-callout {
    background: var(--fr-accent-soft);
    border-left: 3px solid var(--fr-accent);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--fr-ink-2);
    line-height: 1.55;
}
.exec-callout strong { color: var(--fr-ink); }

/* Methodology paragraph styling inside a collapsible body */
.exec-method-text {
    color: var(--fr-ink-2);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Nested details (inside a collapsible body — e.g. excluded properties) */
.exec-collapsible__inner {
    margin-top: 18px;
    border-top: 1px solid var(--fr-hairline);
    padding-top: 14px;
}
.exec-collapsible__inner-summary {
    list-style: none;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--fr-ink-2);
    padding: 4px 0;
    user-select: none;
    transition: color 0.16s ease;
}
.exec-collapsible__inner-summary::-webkit-details-marker { display: none; }
.exec-collapsible__inner-summary::before {
    content: "▸";
    color: var(--fr-ink-3);
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.16s ease;
}
.exec-collapsible__inner[open] > .exec-collapsible__inner-summary::before {
    transform: rotate(90deg);
}
.exec-collapsible__inner-summary:hover { color: var(--fr-ink); }
.exec-collapsible__inner-list {
    margin: 10px 0 0;
    padding-left: 20px;
    font-size: 12.5px;
    color: var(--fr-ink-2);
    line-height: 1.55;
}
.exec-collapsible__inner-list li { margin-bottom: 4px; }

/* Per-property drill-downs section header */
.exec-drilldowns-head {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 24px;
    color: var(--fr-ink);
    letter-spacing: -0.01em;
    margin: 36px 0 6px;
}
.exec-drilldowns-sub {
    font-size: 12.5px;
    color: var(--fr-ink-3);
    margin: 0 0 16px;
}


/* ── Year-over-Year tab — restyled metric table ─────────────────────── */
/* Alignment is opt-in: cells default to left-aligned, use Bootstrap's
   .text-end on cells that should right-align. This way drill-down tables
   with multiple text columns (Property, Type) line up correctly without
   per-table overrides. */
.exec-yoy-table {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
}
.exec-yoy-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto;
}
.exec-yoy-table thead th {
    padding: 20px 22px 14px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--fr-hairline-strong);
    white-space: nowrap;
    background: var(--fr-surface);
}
.exec-yoy-table tbody td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--fr-hairline);
    text-align: left;
    color: var(--fr-ink);
    font-family: var(--fr-font-sans);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' on, 'lnum' on;
    font-size: 13.5px;
}
.exec-yoy-table tbody td:first-child {
    /* Label column: same sans, slightly heavier */
    font-weight: 500;
}
.exec-yoy-table tbody tr:last-child td {
    border-bottom: none;
}
.exec-yoy-table .exec-yoy-num--pos { color: var(--fr-positive); font-weight: 500; }
.exec-yoy-table .exec-yoy-num--neg { color: var(--fr-negative); font-weight: 500; }

/* Summary-table modifier — used by the main YoY metric table where every
   data column carries the same kind of value (a percentage or count) and
   should be evenly spaced regardless of header word length. Without this,
   "Conventional" pulls more width than "Hybrid" or "Total" and the columns
   look ragged. */
.exec-yoy-table--summary table {
    table-layout: fixed;
}
.exec-yoy-table--summary thead th:nth-child(n+2) {
    width: 17%;
}

/* Track Record table modifier — same idea as --summary but for the
   five-series Track Record tables. The first column carries an inline
   width:16%; the remaining 84% is intentionally split unevenly so the
   conceptual groupings read at a glance:
     ALL / ACTIVE / SOLD   → status (tighter, 13% each)
     CONVENTIONAL / STUDENT HOUSING → type (wider, ~22-23% each)
   This makes the SOLD → CONVENTIONAL gap visibly larger than the gaps
   inside each cluster. */
.exec-yoy-table--track table {
    table-layout: fixed;
}
.exec-yoy-table--track thead th:nth-child(2),
.exec-yoy-table--track thead th:nth-child(3),
.exec-yoy-table--track thead th:nth-child(4) { width: 13%; }
.exec-yoy-table--track thead th:nth-child(5) { width: 22%; }
.exec-yoy-table--track thead th:nth-child(6) { width: 23%; }
.exec-yoy-table .exec-yoy-col-total {
    background: linear-gradient(to right, transparent, rgba(180, 83, 9, 0.05));
    font-weight: 600;
    color: var(--fr-ink);
}

/* Compact table variant — used for per-property drill-downs and Top
   5/Bottom 5 rankings. Smaller padding + slightly smaller text so dense
   data fits without feeling cramped. */
.exec-yoy-table--compact thead th {
    padding: 14px 16px 10px;
    font-size: 10px;
    letter-spacing: 0.2em;
}
.exec-yoy-table--compact tbody td {
    padding: 11px 16px;
    font-size: 12.5px;
}
.exec-yoy-table--compact tbody tr:nth-child(even) td {
    background: rgba(20, 24, 29, 0.014);
}
.exec-yoy-table--compact tbody tr:nth-child(even) td.exec-yoy-col-total {
    /* keep the gradient stronger than the zebra wash */
    background: linear-gradient(to right, rgba(20, 24, 29, 0.014), rgba(180, 83, 9, 0.06));
}

/* Same-store yes/no chip used in YoY drill-down tables */
.exec-ss-yes, .exec-ss-no {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    font-weight: 500;
}
.exec-ss-yes { color: var(--fr-positive); }
.exec-ss-no  { color: var(--fr-ink-3); }
.exec-ss-yes::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fr-positive);
}
.exec-ss-no::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fr-ink-faint, #B5A99A);
    opacity: 0.6;
}
.exec-ss-no__reason {
    color: var(--fr-ink-3);
    font-weight: 400;
    font-size: 11px;
}

/* Rankings sub-section — title above each Top/Bottom pair */
.exec-rankings__title {
    font-family: var(--fr-font-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--fr-ink);
    margin: 24px 0 10px;
    letter-spacing: -0.005em;
}
.exec-rankings__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.exec-rankings__pair > * { min-width: 0; }
.exec-rankings__caption {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin: 0 0 8px;
}
@media (max-width: 880px) {
    .exec-rankings__pair { grid-template-columns: 1fr; }
}

/* ── Track Record tab card + 4-stat strip ───────────────────────────── */
.exec-tr-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    padding: 32px 40px 28px;
    margin-bottom: 24px;
}
.exec-tr-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.exec-tr-card__title {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 24px;
    color: var(--fr-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.exec-tr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--fr-hairline-strong);
    margin-top: 22px;
}
.exec-tr-stat {
    padding: 22px 18px 4px;
    border-right: 1px solid var(--fr-hairline);
}
.exec-tr-stat:last-child { border-right: none; }
.exec-tr-stat__label {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin-bottom: 6px;
}
.exec-tr-stat__value {
    font-family: var(--fr-font-serif);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--fr-ink);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.exec-tr-stat__value .exec-tr-stat__unit {
    font-size: 13.5px;
    color: var(--fr-ink-3);
    margin-left: 2px;
}
.exec-tr-stat__sub {
    font-size: 11.5px;
    color: var(--fr-ink-3);
    margin-top: 2px;
}

/* Vertical rhythm inside a Track Record card (table → chart → strip) */
.exec-tr-card .exec-yoy-table { margin-bottom: 22px; }
.exec-tr-card .js-plotly-plot { margin: 0 -8px; }   /* small negative bleed so chart fills card width */
.exec-tr-card__caption {
    font-size: 13px;
    color: var(--fr-ink-3);
    margin: 0 0 14px;
    line-height: 1.5;
    max-width: 64ch;
}


/* ── Executed Rents — filter section ────────────────────────────────── */
/* Replaces the dbc.Card filter strip. Same labelled-grid idea as the prior
   layout (Property | Lease type | Unit type | Date range) but rendered
   with branded vocabulary: small-caps eyebrow labels, pill segmented
   control for lease type, branded Dash Dropdown look. Z-index lift is
   preserved (Plotly creates its own stacking context, so the dropdown
   menu would otherwise render under the chart). */
.exec-filters {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    padding: 22px 28px 24px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
    gap: 24px;
    align-items: end;
    position: relative;
    z-index: 1100;
    overflow: visible;
}
.exec-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.exec-filter-group__label {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fr-ink-3);
    font-weight: 600;
    margin: 0;
}
.exec-pill-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Branded Dash Dropdown (react-select under the hood) used inside .exec-filters */
.exec-filters .Select-control {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 2px;
    box-shadow: none;
    height: 36px;
    color: var(--fr-ink);
    font-family: var(--fr-font-sans);
    font-size: 13px;
}
.exec-filters .Select-control:hover {
    border-color: var(--fr-accent);
}
.exec-filters .is-focused:not(.is-open) > .Select-control {
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 2px var(--fr-accent-soft);
}
.exec-filters .Select-value-label,
.exec-filters .Select-placeholder {
    line-height: 36px !important;
    color: var(--fr-ink) !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 13px !important;
}
.exec-filters .Select-arrow {
    border-color: var(--fr-ink-3) transparent transparent;
}
.exec-filters .is-open > .Select-control .Select-arrow {
    border-color: transparent transparent var(--fr-ink-3);
}
/* Inherit the existing executed-rents-dropdown z-index lift so menus
   render above the Plotly chart below. */
.exec-filters .Select-menu-outer {
    z-index: 9999 !important;
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(20, 24, 29, 0.08);
}

/* Two-column body section for chart card + side panel (used optionally) */
.exec-tr-card__caption + .js-plotly-plot { margin-top: 4px; }

/* Coverage callout sits at the very bottom of the Executed Rents tab */
.exec-callout--quiet {
    background: var(--fr-bg-2, #EDE7D8);
    border-left-color: var(--fr-hairline-strong);
    color: var(--fr-ink-2);
    font-size: 12.5px;
    margin: 28px 0 0;
}

@media (max-width: 960px) {
    .exec-filters {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .exec-filters {
        grid-template-columns: 1fr;
    }
}

/* ── Reveal animation (gentle stagger for sections on page load) ────── */
@keyframes exec-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.exec-reveal {
    animation: exec-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.exec-section:nth-of-type(1) .exec-reveal { animation-delay: 60ms; }
.exec-section:nth-of-type(2) .exec-reveal { animation-delay: 120ms; }
.exec-section:nth-of-type(3) .exec-reveal { animation-delay: 180ms; }
.exec-section:nth-of-type(4) .exec-reveal { animation-delay: 240ms; }


/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .exec-page-head {
        grid-template-columns: 1fr;
    }
    .exec-page-head__stamp { text-align: left; }
    .exec-section__head {
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
    }
    .exec-section__meta {
        grid-column: 1 / -1;
        text-align: left;
    }
    .exec-section__body {
        grid-template-columns: 36px 1fr;
        gap: 12px;
    }
    .exec-roman { font-size: 32px; }
    .exec-aum { padding: 28px 24px; }
    .exec-aum__detail { gap: 28px; }
    .exec-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .exec-two-col { grid-template-columns: 1fr; }
    .exec-tr-stats { grid-template-columns: repeat(2, 1fr); }
    .exec-tr-stat:nth-child(2) { border-right: none; }
}