/* Readout: the chart chrome, shared by the story and the dashboard.
 *
 * Only what a chart draws lives here. The tokens it reads are declared by the
 * page, because the two surfaces set their dark mode with different attributes
 * and neither should have to know about the other's. Every value below is a
 * var() so this file is the same file on both.
 *
 * Type in a chart is one family with tabular figures, so a number that changes
 * under a filter does not shove the numbers beside it.
 */

/* ─────────────────────────────── charts ────────────────────────────── */

.ro-chartbox { position: relative; width: 100%; min-width: 0; }
.ro-chartbox svg { display: block; width: 100%; height: auto; overflow: visible; }
.ro-chartbox canvas { display: block; width: 100%; border-radius: 6px; }

.ro-axis text { font: 400 10.5px var(--ro-chart-font, var(--ro-sans, system-ui)); fill: var(--ro-ink-faint); }
.ro-axis line, .ro-axis path { stroke: var(--ro-axis); shape-rendering: crispEdges; }
.ro-gridline { stroke: var(--ro-grid); shape-rendering: crispEdges; }
.ro-axis-title { fill: var(--ro-ink-dim); font-size: 11.5px; font-weight: 600; }
.ro-tick { fill: var(--ro-ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.ro-datalabel { fill: var(--ro-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ro-annot { font: 500 10.5px var(--ro-chart-font, var(--ro-sans, system-ui)); fill: var(--ro-warn); }
.ro-annot-line { stroke: var(--ro-warn); stroke-width: 1; }
.ro-cell-num { font: 500 10px var(--ro-chart-font, var(--ro-sans, system-ui)); }

/* Marks a keyboard user can reach get a visible ring. A focus style that only
   exists on the wrapper leaves the reader unable to tell which bar they are on. */
.ro-chartbox [tabindex]:focus-visible,
.ro-detail__chart [tabindex]:focus-visible {
    outline: 3px solid var(--ro-lens, var(--ro-accent));
    outline-offset: 2px;
}

.ro-legend {
    display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem;
    font: 500 11.5px var(--ro-chart-font, var(--ro-sans, system-ui));
    color: var(--ro-ink-dim);
}
.ro-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ro-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.ro-sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1.1rem; }
@media (max-width: 900px) { .ro-sm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ro-sm-grid { grid-template-columns: 1fr; } }
.ro-sm-cell { min-width: 0; }
.ro-sm-title {
    display: block; margin-bottom: .15rem;
    font: 500 11.5px var(--ro-chart-font, var(--ro-sans, system-ui));
    color: var(--ro-ink-faint);
}
.ro-sm-title b { color: var(--ro-ink); font-weight: 600; }

/* Two panels of the same chart side by side, for the comparisons that only
   exist between two counts of the same thing. */
.ro-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
@media (max-width: 720px) { .ro-pair { grid-template-columns: 1fr; } }
.ro-pair__cell { min-width: 0; }

.ro-tip {
    position: fixed; z-index: 9999; pointer-events: none; opacity: 0;
    transition: opacity .12s ease;
    background: var(--ro-ink); color: var(--ro-bg); border-radius: 7px; padding: 7px 9px;
    font: 400 11.5px/1.45 var(--ro-chart-font, var(--ro-sans, system-ui));
    max-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,.28);
    font-variant-numeric: tabular-nums;
}
.ro-tip.on { opacity: 1; }
.ro-tip b { font-weight: 600; }

.ro-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────── the expander ────────────────────────── */

/* The chart is not the button. A click handler on the chart itself fights the
   tooltips and the brushes and gives a keyboard user nothing to land on. */
.ro-expand {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--ro-surface-2); color: var(--ro-ink-dim);
    border: 1px solid var(--ro-border); border-radius: 7px;
    padding: .28rem .6rem; cursor: pointer;
    font: 600 11px var(--ro-chart-font, var(--ro-sans, system-ui));
    letter-spacing: .02em; white-space: nowrap;
}
.ro-expand:hover { background: var(--ro-surface-3); color: var(--ro-ink); }
.ro-expand:focus-visible { outline: 3px solid var(--ro-lens, var(--ro-accent)); outline-offset: 2px; }

/* ──────────────────────────── the detail view ──────────────────────── */

.ro-detail {
    width: min(1120px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0; border: 1px solid var(--ro-border); border-radius: 16px;
    background: var(--ro-surface); color: var(--ro-ink);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    overflow: auto;
}
.ro-detail::backdrop { background: rgba(8, 11, 18, .62); backdrop-filter: blur(2px); }

.ro-detail__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.15rem 1.3rem .85rem;
    border-bottom: 1px solid var(--ro-border);
    position: sticky; top: 0; background: var(--ro-surface); z-index: 2;
}
.ro-detail__heads { min-width: 0; flex: 1; }
.ro-detail__title {
    margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700;
    letter-spacing: -.01em; color: var(--ro-ink); line-height: 1.25;
}
.ro-detail__meta {
    margin: 0; color: var(--ro-ink-faint);
    font: 500 11.5px/1.5 var(--ro-chart-font, var(--ro-sans, system-ui));
    letter-spacing: .01em;
}
.ro-detail__close {
    flex: none; width: 34px; height: 34px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; cursor: pointer;
    background: var(--ro-surface-2); color: var(--ro-ink-dim);
    border: 1px solid var(--ro-border); border-radius: 9px;
}
.ro-detail__close:hover { background: var(--ro-surface-3); color: var(--ro-ink); }
.ro-detail__close:focus-visible { outline: 3px solid var(--ro-lens, var(--ro-accent)); outline-offset: 2px; }

.ro-detail__controls {
    display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
    padding: .85rem 1.3rem; border-bottom: 1px solid var(--ro-border);
    background: var(--ro-surface-2);
}
.ro-detail__control { display: flex; align-items: center; gap: .5rem; }
.ro-detail__control-label {
    font: 600 10.5px var(--ro-chart-font, var(--ro-sans, system-ui));
    letter-spacing: .1em; text-transform: uppercase; color: var(--ro-ink-faint);
}

.ro-seg { display: inline-flex; border: 1px solid var(--ro-border); border-radius: 8px; overflow: hidden; }
.ro-seg button {
    border: 0; background: var(--ro-surface); color: var(--ro-ink-dim); cursor: pointer;
    padding: .34rem .68rem; font: 600 11.5px var(--ro-chart-font, var(--ro-sans, system-ui));
    border-right: 1px solid var(--ro-border);
}
.ro-seg button:last-child { border-right: 0; }
.ro-seg button:hover { background: var(--ro-surface-3); color: var(--ro-ink); }
.ro-seg button[aria-pressed="true"] { background: var(--ro-accent); color: #fff; }
/* Dark mode brightens the accent, and white on it measures 3.03:1. Both
   theme attributes are named because this file is loaded by the story,
   which uses data-bs-theme, and by the dashboard, which uses data-theme. */
[data-bs-theme="dark"] .ro-seg button[aria-pressed="true"],
[data-theme="dark"] .ro-seg button[aria-pressed="true"] { color: #0b1020; }
.ro-seg button:focus-visible { outline: 3px solid var(--ro-lens, var(--ro-accent)); outline-offset: -3px; }

.ro-detail__chart { padding: 1.1rem 1.3rem; position: relative; min-width: 0; }

.ro-detail__foot {
    padding: .2rem 1.3rem 1.3rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
}
.ro-detail__why { margin: 0; max-width: 78ch; font-size: .95rem; line-height: 1.62; color: var(--ro-ink-dim); }
.ro-detail__caption {
    margin: 0; max-width: 78ch;
    font: 500 .78rem/1.55 var(--ro-chart-font, var(--ro-sans, system-ui));
    color: var(--ro-ink-faint);
}

@media (max-width: 640px) {
    .ro-detail { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; border: 0; }
    .ro-detail__controls { gap: .6rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .ro-tip { transition: none; } }