/* Charts, maps, legends, play control. */
.fig { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5) var(--s5) var(--s4); }
.fig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.fig-title { font-size: var(--t-md); margin: 0; }
.fig-sub { margin: var(--s1) 0 0; font-size: var(--t-xs); color: var(--fg-3); }
.fig-body { position: relative; }
.fig-body svg, .chart svg { font-variant-numeric: tabular-nums; }
.chart { position: relative; width: 100%; }

/* Observable Plot overrides */
figure.legend-plot, .legend-plot { margin: 0; }
[aria-label="tip"] path, g[aria-label="tip"] path { fill: var(--surface-3); stroke: var(--line-strong); }
g[aria-label="tip"] text { fill: var(--fg); }
g[aria-label="y-grid"] line, g[aria-label="x-grid"] line { stroke: var(--grid); stroke-opacity: 1; }
g[aria-label="y-axis tick label"], g[aria-label="x-axis tick label"] { fill: var(--fg-3); }

/* map */
.eqmap { position: relative; width: 100%; touch-action: manipulation; }
.eqmap svg { width: 100%; height: auto; }
.eqmap .sphere { fill: var(--sphere); stroke: var(--line); stroke-width: 1; }
.eqmap .graticule { fill: none; stroke: var(--graticule); stroke-width: .6; }
.eqmap .units path { stroke: var(--unit-line); stroke-width: .45; stroke-linejoin: round; cursor: pointer; transition: opacity var(--dur); }
.eqmap .units path:hover { stroke: var(--fg); stroke-width: 1.1; }
.eqmap .units path.sel { stroke: var(--fg); stroke-width: 1.6; }
.eqmap .dots circle { stroke: var(--fg-3); stroke-width: .8; cursor: pointer; }
.eqmap .dots circle:hover, .eqmap .dots circle.sel { stroke: var(--fg); stroke-width: 1.6; }
.map-legend { display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; font-size: var(--t-xs); color: var(--fg-2); }
.nodata-key { display: inline-flex; align-items: center; gap: var(--s2); padding-bottom: 6px; }
.nodata-key .hatch { width: 18px; height: 12px; border-radius: 2px; border: 1px solid var(--line-strong); }

/* play control */
.play { display: flex; align-items: center; gap: var(--s3); }
.play-btn { flex: none; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg); }
.play-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.play input[type="range"] { flex: 1; }
.play-year { font: 600 var(--t-lg)/1 var(--font-display); min-width: 3.2em; text-align: right; color: var(--fg); }

/* ramps (style guide, legends) */
.ramp { height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.ramp-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--fg-2); }