/* 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-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ro-datalabel { fill: var(--ro-ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Annotation carries its own ink rather than the status amber. --ro-warn is
   sized for a mark, where 3:1 is the bar; as 10.5px text on a light card it
   measured 3.00:1 against the worst ground it sits on and could not be read.
   The line beside it keeps the amber, because a line is a mark. */
.ro-annot { font: 500 11.5px var(--ro-chart-font, var(--ro-sans, system-ui)); fill: var(--ro-annot-ink, var(--ro-warn)); }
.ro-annot-line { stroke: var(--ro-warn); stroke-width: 1; }
/* Labels over a map sit on whatever the map happens to paint underneath them,
   which is ocean, land, or a cluster of marks depending on the year. A halo in
   the surface colour is the cartographic answer: the text keeps its contrast
   without the map having to give up any of its own. paint-order puts the stroke
   behind the fill so the glyph shapes stay intact. */
.ro-annot--halo {
    stroke: var(--ro-surface); stroke-width: 3.5px; stroke-linejoin: round;
    paint-order: stroke fill;
}
.ro-cell-num { font: 600 11px 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-legend--ramp { align-items: center; gap: .45rem; }
/* The chart rule above stretches every svg in the box to the full column, which
   is right for a chart and wrong for a key: the ramp is drawn at a fixed 190 by
   30 and has to stay there. */
.ro-legend svg { width: auto !important; height: auto !important; flex: none; display: block; }
.ro-legend__ramp {
    width: 140px; height: 10px; border-radius: 2px;
    border: 1px solid var(--ro-border); display: inline-block;
}
.ro-legend__sep { margin-left: .5rem; }

/* ---- R.legend's row ----
   These live here rather than in a page's own stylesheet because R.legend is
   shared code: any page that calls it needs them. They were written inline in
   the case study first, and the dashboard, which calls the same function from
   the same file, rendered every shaped swatch at its intrinsic size, which for a
   symbol path is whatever the path happens to span. */
.ro-legend-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .35rem 1.1rem;
    padding: .6rem 1.1rem .2rem;
    margin: 0;
    font-size: .78rem; color: var(--ro-ink-dim);
}
.ro-legend-row span { display: inline-flex; align-items: center; gap: .4rem; }
.ro-legend-row i { width: .62rem; height: .62rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
/* A shaped swatch is an svg, and an inline svg with no CSS box takes its
   intrinsic size. The depth ramp legend above sets svg to auto with !important,
   so this needs the same weight to win inside a page that loads both. */
.ro-legend-row svg { width: 13px !important; height: 13px !important; flex: 0 0 auto; display: block; }

/* The row gap carries the panel title of the row below it, so it has to clear
   a line of type rather than just separate two plots. The top margin does the
   same job against the bar above the chart. */
.ro-sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem 1.1rem; margin-top: .85rem; }
@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 12.5px var(--ro-chart-font, var(--ro-sans, system-ui));
    color: var(--ro-ink-dim);
}
.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; }
/* A project card embeds this chart as an image of the work, not as something to
   operate. The expander opens a dialog the card has no room for and no way out
   of, so it does not travel into the embed. */
html[data-card-mode] .ro-expand { display: none !important; }

/* ──────────────────────────── 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;
    /* A scroll that runs out inside the dialog stops here rather than chaining
       to the page behind it. */
    overscroll-behavior: contain;
}
.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; } }