:root {
  --dashboard-blue: #1d4ed8;
  --dashboard-border: #93c5fd;
  --dashboard-surface: #eff6ff;
  --category-equity: #7e22ce;
  --category-bonds: #1e3a8a;
  --category-cash: #0f766e;
  --case-worst: #b91c1c;
  --case-bad: #ea580c;
  --case-typical: #15803d;
  --case-good: #1d4ed8;
}

/* nav, dashboard, detail report and footer share one content width and the body's 1rem gutter (#100) */
body:has(.dashboard) { max-width: 96rem; }
.dashboard { margin: 0 0 1.5rem; }
.dashboard h1, .dashboard h2 { color: #172554; text-wrap: balance; }
.dashboard h1 { margin: .15rem 0; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.dashboard h2 { margin: 0 0 .45rem; font-size: 1rem; }
.dashboard-brand { margin: 0; color: var(--dashboard-blue); font-weight: 700; }
.dashboard-context { margin: 0; color: #475569; }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
.dashboard-actions { flex-wrap: wrap; justify-content: flex-end; }
.dashboard-actions, .scope-switch { display: flex; align-items: center; gap: .5rem; }
.scope-switch { padding: .2rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; }
.scope-switch button, .outline-button {
  box-sizing: border-box; min-height: 2.75rem; margin: 0; padding: .55rem 1rem; border: 1px solid var(--dashboard-border);
  border-radius: .4rem; background: #fff; color: #172554; font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
}
.scope-switch button[aria-pressed="true"] { border: 3px solid var(--dashboard-blue); padding: calc(.55rem - 2px) calc(1rem - 2px); }
.scope-switch button:hover, .outline-button:hover { border-color: var(--dashboard-blue); background: var(--dashboard-surface); }
.scope-switch button:focus-visible, .outline-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

.dashboard-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.dashboard-card { box-sizing: border-box; min-width: 0; padding: .65rem .85rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; background: var(--dashboard-surface); }
.capital-card { opacity: .78; }
.capital-card.is-active { border: 3px solid var(--dashboard-blue); padding: calc(.65rem - 2px) calc(.85rem - 2px); opacity: 1; }
.capital-total, .parameter-card strong { display: block; color: #172554; font-size: clamp(1.35rem, 2vw, 1.85rem); font-variant-numeric: tabular-nums; }
.capital-breakdown { margin: .35rem 0 0; font-variant-numeric: tabular-nums; }
.capital-breakdown div { display: flex; justify-content: space-between; gap: .5rem; }
.capital-breakdown dt, .capital-breakdown dd { margin: .1rem 0; }
.capital-breakdown dd { color: #172554; font-weight: 650; white-space: nowrap; }
.category-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .45rem; border-radius: 50%; }
.category-equity { background: var(--category-equity); }
.category-bonds { background: var(--category-bonds); }
.category-cash { background: var(--category-cash); }
.parameter-card p { margin: .35rem 0 0; color: #475569; }

.money-flow { margin-top: .6rem; padding: .55rem 1rem .75rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; }
.money-flow h2 { margin-bottom: .25rem; }
/* branched flow on two levels (#111): five equal columns over the full width, BG above, private level below */
.flow-diagram { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 0; color: #172554; }
.flow-level { position: relative; z-index: 0; grid-column: 1 / -1; padding: .1rem .4rem; color: #475569; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.flow-level-bg { grid-row: 1; background: var(--dashboard-surface); border-radius: .4rem .4rem 0 0; }
.flow-level-private { grid-row: 2; border-top: 1px dashed var(--dashboard-border); }
.flow-box { position: relative; z-index: 1; display: grid; align-content: start; gap: .1rem; margin: 1.3rem 0 .5rem; padding: .4rem .6rem; border: 1px solid var(--dashboard-border); border-radius: .4rem; background: #fff; font-size: .85rem; }
.flow-box strong { display: inline-flex; align-items: center; font-size: .95rem; }
.flow-box span { display: inline-flex; align-items: center; color: #475569; font-variant-numeric: tabular-nums; }
.flow-box .category-dot { margin-right: .35rem; }
.flow-bg { grid-row: 1; grid-column: 1; }
.flow-private { grid-row: 2; grid-column: 1; }
.flow-hub { grid-row: 2; grid-column: 3; border: 2px solid var(--category-cash); }
.flow-sink { grid-row: 2; grid-column: 5; }
.flow-edge { position: relative; z-index: 1; min-width: 0; color: var(--dashboard-blue); }
.flow-edge span { position: absolute; left: .5rem; right: .9rem; bottom: calc(50% + .2rem); color: #172554; font-size: .8rem; font-weight: 600; text-align: center; }
.flow-edge::before { position: absolute; top: calc(50% + .4rem); left: 0; right: 0; border-top: 1.5px solid currentColor; content: ""; }
.flow-head { position: absolute; top: calc(50% + .4rem - .3rem); right: 1px; width: .55rem; height: .55rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.flow-edge-private { grid-row: 2; grid-column: 2; }
.flow-edge-out { grid-row: 2; grid-column: 4; }
/* BG edge: right along the BG level, then down into the top of the private account (75% = middle of column 3) */
.flow-edge-bg { grid-row: 1; grid-column: 2 / 4; }
.flow-edge-bg::before { right: 25%; }
.flow-edge-bg::after { position: absolute; top: calc(50% + .4rem); bottom: -1.3rem; left: 75%; border-left: 1.5px solid currentColor; content: ""; }
.flow-edge-bg span { right: 25%; }
.flow-edge-bg .flow-head { top: auto; right: auto; bottom: calc(-1.3rem + 1px); left: calc(75% - .27rem); transform: rotate(135deg); }
.dashboard-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .6rem; margin-top: .6rem; }
.case-selection, .dashboard-timeline { padding: .55rem 1rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; }
.case-selection h2 { margin: 0 0 .35rem; }
/* four equal columns over the panel width (#112); every button keeps a 3px border box, unselected ones draw the
   thin line as an inset shadow, so selecting changes neither width nor height */
.case-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.case-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0; min-height: 2.75rem; padding: .3rem .4rem; border: 3px solid transparent; border-radius: .4rem; background: #fff; box-shadow: inset 0 0 0 1.5px currentColor; font: inherit; cursor: pointer; touch-action: manipulation; }
.case-button[aria-pressed="true"] { border-color: currentColor; box-shadow: none; font-weight: 700; }
.case-button:disabled { cursor: not-allowed; opacity: .55; }
.case-button[aria-pressed="true"]:disabled { opacity: 1; }
.case-button:not(:disabled):hover { background: var(--dashboard-surface); }
.case-button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.case-worst { color: var(--case-worst); } .case-bad { color: var(--case-bad); } .case-typical { color: var(--case-typical); } .case-good { color: var(--case-good); }
.case-check { display: inline-block; width: 1.1em; margin-right: .25rem; }
.case-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .45rem; border-radius: 50%; background: currentColor; }
.case-selection p { display: flex; gap: .65rem; margin: .35rem 0 0; color: #475569; font-size: .85rem; }
.case-selection p strong { color: #172554; }
.dashboard-timeline { display: grid; grid-template-columns: auto auto minmax(8rem, 1fr) auto auto auto; align-items: center; gap: .5rem; }
.timeline-buttons { display: flex; gap: .3rem; }
.timeline-label strong { display: block; font-variant-numeric: tabular-nums; }
.dashboard-timeline h2 { margin: 0; } .dashboard-timeline strong { color: #172554; white-space: nowrap; }
.dashboard-timeline input { width: 100%; margin: 0; accent-color: var(--dashboard-blue); }
/* autoplay checkpoints under the slider (#110), at the thumb positions thumb/2 + (100% − thumb) · year / N */
.timeline-track { --thumb: 16px; min-width: 0; }
.timeline-track input { display: block; box-sizing: border-box; width: 100%; height: var(--thumb); padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; }
/* the thumb is sized explicitly in both engines, so the ticks sit exactly under its centre */
.timeline-track input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #cbd5e1; }
.timeline-track input::-webkit-slider-thumb { width: var(--thumb); height: var(--thumb); margin-top: calc((4px - var(--thumb)) / 2); border: 0; border-radius: 50%; background: var(--dashboard-blue); -webkit-appearance: none; appearance: none; }
.timeline-track input::-moz-range-track { height: 4px; border-radius: 2px; background: #cbd5e1; }
.timeline-track input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--dashboard-blue); }
.timeline-track input::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: var(--dashboard-blue); }
.timeline-ticks { position: relative; height: 1.1rem; color: #475569; font-size: .75rem; font-variant-numeric: tabular-nums; }
.timeline-ticks span { position: absolute; top: 0; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at)); transform: translateX(-50%); }
.timeline-ticks span::before { position: absolute; top: -.15rem; left: 50%; height: .2rem; border-left: 1px solid #94a3b8; content: ""; }
.timeline-ticks span.is-current { color: #172554; font-weight: 700; }
.timeline-button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .35rem; white-space: nowrap; border: 1px solid var(--dashboard-border); border-radius: .4rem; background: #fff; color: #172554; font: 700 1.1rem/1 sans-serif; cursor: pointer; }
.timeline-button:disabled { cursor: not-allowed; opacity: .45; }
.timeline-button:not(:disabled):hover { border-color: var(--dashboard-blue); background: var(--dashboard-surface); }
.timeline-button:focus-visible, .dashboard-timeline input:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.dashboard-comparison { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: .6rem; margin-top: .6rem; align-items: start; }
.scenario-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: .6rem; }
.scenario-card, .comparison-panel { min-width: 0; border: 1px solid var(--dashboard-border); border-radius: .5rem; background: #fff; overflow: hidden; }
.scenario-card { container-type: inline-size; border-top: 3px solid currentColor; color: #172554; } .scenario-card.case-worst { color: var(--case-worst); } .scenario-card.case-bad { color: var(--case-bad); } .scenario-card.case-typical { color: var(--case-typical); } .scenario-card.case-good { color: var(--case-good); }
.scenario-card > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .5rem; padding: .5rem .75rem; background: color-mix(in srgb, currentColor 8%, white); }
.scenario-card > header h2 { margin: 0; color: currentColor; font-size: 1.2rem; } .scenario-card > header span { color: #475569; font-size: .85rem; } .scenario-card > header strong { color: #172554; }
.scenario-metric { padding: .4rem .55rem; border: 1px solid #dbeafe; border-radius: .4rem; color: #172554; } .metric-prominent { margin: .6rem .75rem; }
.metric-label { display: block; color: #334155; font-size: .83rem; font-weight: 650; }
.scenario-metric strong { display: flex; align-items: center; gap: .25rem; min-height: 1.6rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.metric-prominent strong { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .4rem; padding: 0 .75rem .5rem; }
.metric-neighbours { display: flex; justify-content: space-between; gap: .4rem; min-height: 1.25rem; padding-top: .2rem; border-top: 1px solid #e2e8f0; color: #475569; font-size: .78rem; font-variant-numeric: tabular-nums; }
.metric-neighbours { flex-wrap: wrap; }
.metric-neighbours span { display: inline-flex; align-items: center; gap: .15rem; min-width: 0; white-space: nowrap; }
.scenario-status { margin: 0 .75rem .6rem; color: #475569; font-size: .83rem; }
.metric-basis { margin: -.2rem .75rem .5rem; color: #475569; font-size: .78rem; }
/* headline bridge of the scope total (#117): stacked in reading order, one row on cards of at least 40rem */
.headline-bridge { display: grid; gap: .25rem; margin: .6rem .75rem; padding: .5rem .6rem; border: 2px solid var(--dashboard-blue); border-radius: .5rem; color: #172554; }
.headline-bridge > :not(:last-child)::after { display: block; color: var(--dashboard-blue); font-size: 1rem; line-height: 1.1; text-align: center; content: "↓"; }
.hb-caption { display: block; color: #334155; font-size: .9rem; font-weight: 650; }
.hb-end strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-end, .hb-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.hb-end .hb-caption, .hb-current .hb-caption { flex-basis: 100%; }
.hb-end::after, .hb-current::after { flex-basis: 100%; }
.hb-current strong { font-size: clamp(1.55rem, 3vw, 2.15rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-step dl { margin: .15rem 0 0; }
.hb-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; padding: .05rem 0; border-bottom: 1px solid #e2e8f0; }
.hb-row dt { color: #334155; font-size: .9rem; }
.hb-row dd { margin: 0 0 0 auto; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-quiet { color: #64748b; font-size: .9rem; font-style: italic; }
.hb-note { margin: .15rem 0 0; color: #475569; font-size: .8rem; }
.hb-preview { padding: .3rem .45rem; border: 1px dashed #94a3b8; border-radius: .4rem; background: #f8fafc; }
.hb-preview, .hb-preview .hb-caption, .hb-preview dt, .hb-preview dd, .hb-next strong { color: #475569; }
@container (min-width: 40rem) {
  .headline-bridge { grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1.3fr) minmax(11rem, 1fr) minmax(0, 1.3fr) minmax(6.5rem, .7fr); align-items: start; gap: .6rem; }
  .headline-bridge.is-initial { grid-template-columns: minmax(0, 1.3fr) minmax(11rem, 1fr) minmax(0, 1.3fr) minmax(6.5rem, .7fr); }
  .hb-current strong { font-size: 1.7rem; }
  .headline-bridge > :not(:last-child)::after { display: none; }
  .hb-step > .hb-caption::after { content: " →"; color: var(--dashboard-blue); }
  .hb-current { justify-content: center; text-align: center; }
}
/* annual bridges (#107) */
.bridges { margin: 0 .75rem .5rem; color: #172554; }
.bridges > summary { padding: .35rem 0; color: #172554; font-size: .95rem; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.bridges > summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.bridge { margin: 0; padding: .4rem .5rem; border: 1px solid var(--dashboard-border); border-radius: .4rem; }
.bridge-main { border-width: 2px; border-color: var(--dashboard-blue); }
.bridge-preview { margin-top: .4rem; border-style: dashed; background: #f8fafc; color: #475569; }
.bridge-preview .bridge-table td, .bridge-preview .bridge-table th, .bridge-preview figcaption strong { color: #475569; }
.bridge figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .5rem; margin-bottom: .2rem; font-size: .88rem; }
.bridge figcaption span { color: #475569; font-size: .78rem; }
.bridge-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.bridge-table th, .bridge-table td { padding: .12rem .25rem; border-bottom: 1px solid #e2e8f0; text-align: right; white-space: nowrap; }
.bridge-table thead th { font-weight: 650; color: #334155; }
.bridge-table tbody th { min-width: 6.5rem; text-align: left; font-weight: 500; color: #334155; white-space: normal; }
.bridge-table th:last-child, .bridge-table td:last-child { background: var(--dashboard-surface); font-weight: 650; }
.bridge-table .bridge-end th, .bridge-table .bridge-end td { border-top: 1.5px solid #64748b; border-bottom: 0; font-weight: 700; }
.bridge-sub, .bridge-percent td { color: #475569; font-size: .76rem; }
.bridge-na, .bridge-internal, .bridge-missing { color: #64748b; font-style: italic; }
.bridge-table td[data-full] { cursor: help; }
.bridge-table td[data-full]:focus-visible { outline: 2px solid #f59e0b; outline-offset: -2px; }
.bridge-table td[data-full]:hover { background: #fef3c7; }
.bridge-scroll { overflow-x: auto; }
.bridge-detail { min-height: 1.1rem; margin: .2rem 0 0; color: #172554; font-size: .78rem; font-weight: 600; }
.bridge-explain, .bridge-note, .bridge-end-note { margin: .3rem 0 0; color: #475569; font-size: .78rem; }
.trend { display: inline-flex; align-items: center; } .trend svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.trend-up { color: #15803d; } .trend-down { color: #b91c1c; } .trend-same { color: #64748b; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.comparison-panel h2 { margin: 0; padding: .6rem .75rem; border-bottom: 1px solid #dbeafe; }
.comparison-scroll { overflow-x: visible; } .comparison-panel table { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.comparison-panel th, .comparison-panel td { padding: .45rem .45rem; border-bottom: 1px solid #dbeafe; text-align: right; white-space: nowrap; } .comparison-panel th:first-child { text-align: left; }
.comparison-panel thead .case-worst { color: var(--case-worst); } .comparison-panel thead .case-bad { color: var(--case-bad); } .comparison-panel thead .case-typical { color: var(--case-typical); } .comparison-panel thead .case-good { color: var(--case-good); }
.comparison-panel th[scope="row"] { white-space: normal; font-weight: 500; }
.comparison-total { background: var(--dashboard-surface); font-weight: 700; }
.comparison-panel .cumulative-title { margin-top: .6rem; border-top: 1px solid #dbeafe; } .dashboard-footnote { margin: .75rem 0; color: #475569; font-size: .82rem; }
.dashboard-chart-panel { margin-top: .6rem; padding: .75rem 1rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; background: #fff; }
.dashboard-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dashboard-chart-heading h2 { margin-bottom: .2rem; font-size: 1.25rem; }
.dashboard-chart-heading p, .chart-note { margin: 0; color: #475569; font-size: .85rem; }
.dashboard-chart-heading label { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: #172554; font-weight: 650; white-space: nowrap; }
.dashboard-chart-heading input { width: 1.15rem; height: 1.15rem; accent-color: var(--dashboard-blue); }
.dashboard-chart-heading input:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.dashboard-chart { min-height: 22rem; margin-top: .5rem; }
.dashboard-chart svg { display: block; width: 100%; min-height: 22rem; overflow: visible; }
.chart-grid { stroke: #dbeafe; stroke-width: 1; }
.chart-axis-label, .chart-axis-title { fill: #475569; font: 12px system-ui, sans-serif; }
.chart-axis-title { font-weight: 650; }
.chart-actual, .chart-percentile { fill: none; vector-effect: non-scaling-stroke; }
.chart-actual { stroke-width: 2.5; }
.chart-bonds { stroke-dasharray: 8 5; }
.chart-percentile { stroke-width: 1.25; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .78; }
.chart-percentile.chart-bonds { stroke-dasharray: 1 4 5 4; }
.chart-future { fill: #fff; opacity: .38; pointer-events: none; }
.chart-cursor { stroke: var(--dashboard-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-cursor-label { fill: #172554; font: 650 12px system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.chart-current-marker { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-current-marker.chart-bonds { fill: #fff; stroke-width: 2; }
.chart-percentile-marker { fill: #fff; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.chart-value-label { font: 650 11px system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.dashboard-chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: #475569; font-size: .78rem; }
.dashboard-chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-line { display: inline-block; width: 1.8rem; border-top: 2.5px solid var(--legend-colour, #64748b); }
.legend-line.is-dashed { border-top-style: dashed; }
.legend-line.is-dotted { border-top: 2px dotted #64748b; }
.legend-percentiles { flex-wrap: wrap; }
.legend-marker { width: .8rem; height: .8rem; fill: #fff; stroke: #475569; stroke-width: 1.25; }
.dashboard-bookings { margin-top: .6rem; border: 1px solid var(--dashboard-border); border-radius: .5rem; background: #fff; }
.dashboard-bookings summary { padding: .9rem 1rem; color: #172554; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.dashboard-bookings summary:hover { background: var(--dashboard-surface); }
.dashboard-bookings summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.dashboard-bookings-note { margin: 0; padding: 0 1rem .5rem; color: #475569; font-size: .85rem; font-weight: 650; }
#dashboard-bookings-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 1rem 1rem; }
.case-bookings { min-width: 0; }
.case-bookings h3 { margin: .4rem 0; color: currentColor; font-size: 1rem; }
.bookings-scroll { overflow-x: auto; }
.case-bookings table { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.case-bookings th, .case-bookings td { padding: .5rem; border-bottom: 1px solid #dbeafe; text-align: left; }
.case-bookings th:nth-child(3), .case-bookings td:nth-child(3) { text-align: right; white-space: nowrap; }
#details { scroll-margin-top: 1rem; }
#details > p { max-width: 60rem; }

@media (max-width: 80rem) {
  .dashboard-header { flex-direction: column; }
  .dashboard-actions { justify-content: flex-start; }
  .dashboard-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* below ordinary desktop: cards, then the still visible table, then the chart (#102) */
@media (max-width: 75rem) {
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parameter-card:last-child { grid-column: span 2; }
  .dashboard-comparison { grid-template-columns: 1fr; }
  .dashboard-controls { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .dashboard-header, .dashboard-actions { align-items: stretch; flex-direction: column; }
  .dashboard-actions { width: 100%; }
  .scope-switch > *, .outline-button { flex: 1; text-align: center; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .parameter-card:last-child { grid-column: auto; }
  .dashboard-card { min-height: auto; }
  /* sources side by side, each with its own arrow down into the private account (#111) */
  .flow-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 3rem auto 3rem auto; column-gap: .5rem; }
  .flow-level { display: none; }
  .flow-box { margin: 0; }
  .flow-bg { grid-row: 1; grid-column: 1 / -1; }
  .has-private .flow-bg { grid-column: 1; }
  .flow-private { grid-row: 1; grid-column: 2; }
  .flow-edge-bg { grid-row: 2; grid-column: 1 / -1; }
  .has-private .flow-edge-bg { grid-column: 1; }
  .flow-edge-private { grid-row: 2; grid-column: 2; }
  .flow-hub { grid-row: 3; grid-column: 1 / -1; }
  .flow-edge-out { grid-row: 4; grid-column: 1 / -1; }
  .flow-sink { grid-row: 5; grid-column: 1 / -1; }
  .flow-edge::before, .flow-edge-bg::before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 1.5px solid currentColor; }
  .flow-edge-bg::after { display: none; }
  .flow-edge span, .flow-edge-bg span { top: 50%; bottom: auto; left: calc(50% + .45rem); right: 0; text-align: left; transform: translateY(-50%); }
  .flow-head, .flow-edge-bg .flow-head { top: auto; right: auto; bottom: 1px; left: calc(50% - .27rem); transform: rotate(135deg); }
  .case-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-timeline { grid-template-columns: auto 1fr auto; }
  .dashboard-timeline > .timeline-label, .dashboard-timeline > .timeline-track { grid-column: 1 / -1; }
  .scenario-cards { grid-template-columns: 1fr; }
  .dashboard-chart-heading { flex-direction: column; }
  .dashboard-chart { overflow: visible; }
  .dashboard-chart svg { width: 100%; }
  #dashboard-bookings-content { grid-template-columns: 1fr; }
}

/* runs list (#122): the dashboard's header, buttons and card around a DataTables table */
.outline-button.is-current { border-color: var(--dashboard-blue); background: var(--dashboard-surface); cursor: default; }
.runs-card { display: block; padding: 1rem; }
.runs-card table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.runs-card th, .runs-card td { padding: .45rem .5rem; border-bottom: 1px solid #dbeafe; text-align: left; vertical-align: top; }
.runs-card td { white-space: normal; }
.runs-card td.num { white-space: nowrap; }
.runs-card .row-action { display: inline-block; min-width: 9rem; min-height: auto; padding: .3rem .6rem; font-size: .85rem; white-space: normal; }
body:has(.runs-page) { max-width: none; }   /* the overview needs every column visible at desktop width */
.runs-card { font-size: .85rem; }
.runs-card table.dataTable thead th, .runs-card table.dataTable tbody td { padding: .4rem .35rem; }
.runs-card table.dataTable thead th.dt-orderable-asc, .runs-card table.dataTable thead th.dt-orderable-desc { padding-right: 1.4rem; }
.runs-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.runs-card th:first-child, .runs-card td:first-child { width: 3rem; }
.runs-card th:first-child label { display: block; font-size: .8rem; font-weight: 400; }
.runs-card input[type=checkbox] { width: auto; }