/*
 * Charts (Data chart, Storm surge explorer). Series colours: slots 1-2 of the dataviz reference palette,
 * validated (CVD and normal-vision separation) on The Draft's paper. Slot 2
 * sits under 3:1 on paper, so every chart ships a legend or direct labels
 * and the data table. Text always uses ink tokens, never a series colour.
 */
.the-draft-chart,
.the-draft-surge {
	--the-draft-series-1: #2a78d6;
	--the-draft-series-2: #eb6834;
	--the-draft-critical: #d03b3b;
}
.the-draft-chart { display: grid; gap: 0.6rem; margin-block: var(--wp--preset--spacing--60, 3rem); }
.the-draft-chart__title { font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0; }
.the-draft-chart__dek { color: var(--wp--preset--color--muted, #5e584f); font-size: 0.95rem; margin: 0; }
.the-draft-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0; padding: 0; }
.the-draft-chart__key {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink, #191919);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 0.85rem;
	gap: 0.45rem;
	padding: 0.2rem 0;
}
.the-draft-chart__key::before { border-radius: 2px; content: ""; height: 12px; width: 12px; }
.the-draft-chart__key.is-series-1::before { background: var(--the-draft-series-1); }
.the-draft-chart__key.is-series-2::before { background: var(--the-draft-series-2); }
.the-draft-chart__key[aria-pressed="false"] { color: var(--wp--preset--color--muted, #5e584f); text-decoration: line-through; }
.the-draft-chart__key[aria-pressed="false"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--wp--preset--color--stone, #8f8d86); }
.the-draft-chart__plot { position: relative; touch-action: pan-y; }
.the-draft-chart__plot:focus-visible { outline: 2px solid var(--wp--preset--color--accent, #b83508); outline-offset: 4px; }
.the-draft-chart__svg { display: block; height: auto; overflow: visible; width: 100%; }
.the-draft-chart__grid line { stroke: var(--wp--preset--color--rule, #d6ccbc); stroke-width: 1; }
.the-draft-chart__grid line.is-baseline { stroke: var(--wp--preset--color--stone, #8f8d86); }
.the-draft-chart__grid text,
.the-draft-chart__direct,
.the-draft-chart__threshold text {
	fill: var(--wp--preset--color--muted, #5e584f);
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.the-draft-chart__direct { fill: var(--wp--preset--color--ink, #191919); font-weight: 600; }
.the-draft-chart__threshold line { stroke: var(--the-draft-critical); stroke-dasharray: 5 4; stroke-width: 1.5; }
.the-draft-chart__threshold text { fill: var(--wp--preset--color--ink, #191919); font-weight: 600; }
.the-draft-chart__series { transition: opacity 0.2s; }
.the-draft-chart__series.is-hidden { opacity: 0; }
.the-draft-chart__series.is-series-1 path { fill: var(--the-draft-series-1); }
.the-draft-chart__series.is-series-2 path { fill: var(--the-draft-series-2); }
.the-draft-chart__series path { stroke: var(--wp--preset--color--paper, #f3ece1); stroke-width: 0; }
.the-draft-chart__series path.is-active { stroke: var(--wp--preset--color--ink, #191919); stroke-width: 1.5; }
.the-draft-chart__series polyline { fill: none; stroke-linejoin: round; stroke-width: 2; }
.the-draft-chart__series.is-series-1 polyline { stroke: var(--the-draft-series-1); }
.the-draft-chart__series.is-series-2 polyline { stroke: var(--the-draft-series-2); }
.the-draft-chart__end,
.the-draft-chart__marker { stroke: var(--wp--preset--color--paper, #f3ece1); stroke-width: 2; }
.is-series-1 .the-draft-chart__end, .the-draft-chart__marker.is-series-1 { fill: var(--the-draft-series-1); }
.is-series-2 .the-draft-chart__end, .the-draft-chart__marker.is-series-2 { fill: var(--the-draft-series-2); }
.the-draft-chart__cursor { stroke: var(--wp--preset--color--ink, #191919); stroke-dasharray: 2 3; stroke-width: 1; }
.the-draft-chart__tip {
	background: var(--wp--preset--color--ink, #191919);
	border-radius: 4px;
	color: var(--wp--preset--color--paper, #f3ece1);
	display: grid;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	gap: 0.15rem;
	padding: 0.45rem 0.6rem;
	pointer-events: none;
	position: absolute;
	transform: translate(12px, -100%);
	white-space: nowrap;
	z-index: 2;
}
.the-draft-chart__tip.is-flipped { transform: translate(calc(-100% - 12px), -100%); }
.the-draft-chart__tip-row { align-items: center; display: flex; gap: 0.4rem; }
.the-draft-chart__tip-row::before { border-radius: 2px; content: ""; height: 8px; width: 8px; }
.the-draft-chart__tip-row.is-series-1::before { background: var(--the-draft-series-1); }
.the-draft-chart__tip-row.is-series-2::before { background: var(--the-draft-series-2); }
.the-draft-chart__data summary { color: var(--wp--preset--color--accent-dark, #8e2a06); cursor: pointer; font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif); font-size: 0.85rem; font-weight: 600; }
.the-draft-chart__table { margin-top: 0.6rem; overflow-x: auto; }
.the-draft-chart__table table { border-collapse: collapse; font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.the-draft-chart__table th,
.the-draft-chart__table td { border-bottom: 1px solid var(--wp--preset--color--rule, #d6ccbc); padding: 0.3rem 1rem 0.3rem 0; text-align: left; }
.the-draft-chart__table td { text-align: right; }
.the-draft-chart__source { color: var(--wp--preset--color--muted, #5e584f); font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif); font-size: 0.8rem; }