/* /accuracy: the charts only this page draws. The page itself (hero, tiles, cards, bars, FAQ) is showcase.css.
   precision is indigo and recall teal, as validated there. */
.acc .fom-bar-fill.precision, .acc .fom-legend .precision { background: var(--fom-indigo); }
.acc .fom-bar-fill.recall, .acc .fom-legend .recall { background: var(--fom-teal); }

/* ---- hero example of a tagged listing ---- */
.acc-sample {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--fom-radius);
	padding: 22px;
	backdrop-filter: blur(6px);
	transform: rotate(1.5deg);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.acc-sample-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fom-teal-bright); margin-bottom: 8px; }
.acc-sample-title { font-size: 15px; font-style: italic; color: rgba(255, 255, 255, .9); margin-bottom: 14px; line-height: 1.5; }
.acc-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 8px 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: #fff; color: var(--fom-ink); }
.acc-chip::before { content: "\2713"; font-weight: 700; color: var(--fom-good); }
.acc-chip.type { background: #e8e8fb; }
.acc-chip.strategy { background: #e2f6f8; }
.acc-chip.signal { background: #fff6e0; }
.acc-chip.count { background: #eef0f4; }

/* ---- ring gauges ---- */
.acc-gauge { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.acc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.acc-gauge .track { stroke: var(--fom-soft); }
.acc-gauge .value { stroke-linecap: round; transition: stroke-dasharray 1s ease; }
.acc-gauge-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--fom-ink);
	letter-spacing: -.02em;
}
.acc-gauge-label small { font-size: 14px; font-weight: 600; margin-left: 1px; }

/* ---- icon arrays (precision / recall explainer) ---- */
.acc-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 220px; margin: 16px 0; }
.acc-dots span { aspect-ratio: 1; border-radius: 50%; background: var(--fom-blank); }
.acc-dots.found span.on { background: var(--fom-teal); }
.acc-dots.confirmed span.on { background: var(--fom-indigo); }
.acc-dots span.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fom-blank); }
.acc-big { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.acc-big.found { color: var(--fom-teal); }
.acc-big.confirmed { color: var(--fom-indigo); }

.acc-pipeline { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.acc-pipeline li { counter-increment: step; position: relative; padding: 0 0 16px 44px; font-size: 14px; color: var(--fom-muted); line-height: 1.55; }
.acc-pipeline li:last-child { padding-bottom: 0; }
.acc-pipeline li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #e2f6f8; color: var(--fom-teal); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.acc-pipeline li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; border-left: 1px dashed var(--fom-blank); }
.acc-pipeline b { display: block; color: var(--fom-ink); font-weight: 600; }

/* ---- stacked right / blank / wrong ---- */
.acc-stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; }
.acc-stack > span { display: block; height: 100%; min-width: 3px; }
.acc-stack > span:first-child { border-radius: 4px 0 0 4px; }
.acc-stack > span:last-child { border-radius: 0 4px 4px 0; }
.acc-stack .good { background: var(--fom-good); }
.acc-stack .blank { background: var(--fom-blank); }
.acc-stack .bad { background: var(--fom-bad); }
.acc-stack-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fom-muted); margin-top: 6px; }
.acc-stack-meta b { color: var(--fom-ink); font-weight: 600; }

/* ---- trend chart: SVG lines with HTML labels and CSS crosshair columns ---- */
.acc-trend { position: relative; height: 280px; margin: 8px 0 0 36px; }
.acc-trend svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acc-trend .grid line { stroke: var(--fom-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.acc-trend .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.acc-trend .series.precision { stroke: var(--fom-indigo); }
.acc-trend .series.recall { stroke: var(--fom-teal); }
.acc-ytick { position: absolute; left: -36px; transform: translateY(-50%); font-size: 12px; color: var(--fom-muted); font-variant-numeric: tabular-nums; }
.acc-point { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #fff; pointer-events: none; }
.acc-point.precision { background: var(--fom-indigo); }
.acc-point.recall { background: var(--fom-teal); }
.acc-endlabel { position: absolute; right: 0; transform: translate(0, -135%); font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .9); padding: 0 2px; }
.acc-endlabel.precision { color: var(--fom-indigo); }
.acc-endlabel.recall { color: var(--fom-teal); }
.acc-endlabel.below { transform: translate(0, 35%); }
.acc-col { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.acc-col::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed transparent; }
.acc-col:hover::before, .acc-col:focus-visible::before { border-left-color: #9a9cab; }
.acc-col.fom-tip::after { bottom: auto; top: -8px; transform: translate(-50%, -100%); }
.acc-col.fom-tip:hover::after, .acc-col.fom-tip:focus-visible::after { transform: translate(-50%, -100%); }
.acc-col:first-of-type.fom-tip::after { left: 0; transform: translate(0, -100%); }
.acc-col:last-of-type.fom-tip::after { left: auto; right: 0; transform: translate(0, -100%); }
.acc-xaxis { position: relative; height: 24px; margin: 8px 0 0 36px; font-size: 12px; color: var(--fom-muted); }
.acc-xaxis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.acc-axis-caption { font-size: 13px; color: var(--fom-muted); margin: 6px 0 0 36px; }

@media (max-width: 575.98px) {
	.acc-trend { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.acc-gauge .value { transition: none; }
}