.fastest-chart { margin: 1.5rem 0; position: relative; }

.fastest-chart__frame {
	position: relative;
	height: 380px;
	background: var(--bg-1, #1a1530);
	border: 1px solid var(--bg-line, #2a2342);
	border-radius: 12px;
	padding: 10px 12px;
}
.fastest-chart__canvas { display: block; }

@media (max-width: 600px) {
	.fastest-chart__frame { height: 300px; }
}

/* Per-series colour, set once via --c and read back by the view script's theme
   probe. The hex fallbacks let colours resolve when the JRPG design tokens
   aren't loaded (e.g. inside the Gutenberg editor iframe). On the front end the
   live oklch tokens win via the cascade and theme-aware colours are preserved. */
/* Series palette: light/dark variants of the two brand hues only (purple &
   gold), interleaved so adjacent series stay distinct without pulling in
   off-brand cyan/pink/green. */
.fastest-chart .s1 { --c: var(--jrpg-purple, #8b5cf6); }  /* purple */
.fastest-chart .s2 { --c: var(--jrpg-gold,   #ffd56b); }  /* gold */
.fastest-chart .s3 { --c: #5b3fb3; }                      /* deep violet */
.fastest-chart .s4 { --c: #e8992e; }                      /* amber */
.fastest-chart .s5 { --c: #c4b5fd; }                      /* lavender */
.fastest-chart .s6 { --c: #fff0c2; }                      /* pale gold */
.fastest-chart__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--c); }

/* Theme probe: the view script reads computed color/font off these to feed
   Chart.js, so the canvas matches the design tokens (with editor fallbacks). */
.fastest-chart .pk-fg      { color: var(--fg-2, rgba(232, 227, 245, .78)); }
.fastest-chart .pk-dim     { color: var(--fg-3, rgba(232, 227, 245, .55)); }
.fastest-chart .pk-grid    { color: var(--bg-line, #2a2342); }
.fastest-chart .pk-title   { color: var(--fg-1, #e8e3f5); }
.fastest-chart .pk-panel   { color: var(--bg-2, #2a2342); }
.fastest-chart .pk-mono    { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); }
.fastest-chart .pk-body    { font-family: var(--font-body, "Inter", system-ui, sans-serif); }
.fastest-chart .pk-display { font-family: var(--font-display, "Audiowide", system-ui, sans-serif); }

.fastest-chart__caption { font-size: var(--fs-meta, .875rem); color: var(--fg-3, rgba(232, 227, 245, .55)); margin-top: 8px; text-align: center; }

.fastest-chart__data { margin-top: 14px; }
.fastest-chart__data > summary { list-style: none; display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; color: var(--fg-2, rgba(232, 227, 245, .78)); background: color-mix(in oklch, var(--bg-2, #1a1530) 85%, transparent); border: 1px solid var(--bg-line, #2a2342); border-radius: 999px; padding: 7px 16px; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.fastest-chart__data > summary::-webkit-details-marker { display: none; }
.fastest-chart__data > summary:hover { color: var(--fg-1, #e8e3f5); border-color: var(--jrpg-purple-bright, #a78bfa); }
.fastest-chart__chev { font-size: 13px; transition: transform .2s ease; opacity: .75; }
.fastest-chart__data[open] > summary { color: var(--fg-1, #e8e3f5); border-color: var(--jrpg-purple-bright, #a78bfa); }
.fastest-chart__data[open] .fastest-chart__chev { transform: rotate(180deg); }
.fastest-chart__data table { width: 100%; border-collapse: collapse; margin-top: 14px; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: var(--fs-meta, .875rem); }
.fastest-chart__data th,
.fastest-chart__data td { border-bottom: 1px solid var(--bg-line, #2a2342); padding: 4px 8px; text-align: right; color: var(--fg-2, rgba(232, 227, 245, .78)); }
.fastest-chart__data th[scope="row"] { text-align: left; }
.fastest-chart__data caption { font-size: 11px; color: var(--fg-3, rgba(232, 227, 245, .55)); padding-bottom: 8px; text-align: left; }

.fastest-chart--empty {
	padding: 1rem;
	border: 1px dashed var(--bg-line, #2a2342);
	border-radius: 10px;
	color: var(--fg-3, rgba(232, 227, 245, .55));
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
}
.fastest-chart-placeholder { color: var(--fg-3, rgba(232, 227, 245, .55)); font-style: italic; }

/* Visually hidden but indexable + screen-reader accessible (NOT display:none). */
.fastest-chart__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Download toolbar (injected by view.js) */
.fastest-chart__tools {
	position: absolute;
	top: 8px;
	right: 10px;
	display: flex;
	gap: 6px;
}
.fastest-chart__tool {
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	color: var(--fg-2, rgba(232, 227, 245, .78));
	background: color-mix(in oklch, var(--bg-2, #1a1530) 85%, transparent);
	border: 1px solid var(--bg-line, #2a2342);
	border-radius: 6px;
	padding: 3px 9px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.fastest-chart__tool:hover { color: var(--fg-1, #e8e3f5); border-color: var(--jrpg-purple-bright, #a78bfa); }