.status-details{display:grid;gap:var(--space);margin-top:var(--space);min-width:0}
.status-details>.detail{margin:0;min-width:0}
.attempt-chart{position:relative}
.attempt-chart h2{margin-bottom:0}
.attempt-chart-feedback{padding:var(--space);text-align:center;color:var(--muted)}
.attempt-chart-scroll{overflow-x:auto;overscroll-behavior-x:contain;max-width:100%}
.attempt-chart-canvas{position:relative;min-width:500px}
.attempt-chart-svg{display:block;width:100%;min-width:500px;height:auto;overflow:hidden}
.attempt-chart-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space)}
.attempt-chart-header,.attempt-chart-scroll{margin-inline-end:var(--space)}
.attempt-final-value,.recall-final-value{flex:none;margin-left:auto;margin-inline-end:var(--chart-value-offset,0px);pointer-events:none;white-space:nowrap;line-height:1;font-size:2rem}
.attempt-chart-svg text{fill:var(--muted);font:20px sans-serif;font-variant-numeric:tabular-nums}
.attempt-chart-svg .attempt-axis-label{fill:var(--muted);font-size:18px;opacity:.8}
/* Small breaks suggest dry chalk without moving points or adding SVG filters. */
.attempt-grid{stroke:var(--muted);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:4 5;stroke-linecap:round}
.attempt-axis{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:9 .6 3 .4;stroke-linecap:round}
.attempt-point{cursor:pointer;outline:none}
.attempt-mark{fill:none;stroke-width:3;stroke-dasharray:2.3 .3 1.2 .2;vector-effect:non-scaling-stroke}
.is-revealing .attempt-mark{animation:attempt-point-reveal 140ms ease-out var(--point-delay,0ms) both}
.attempt-point:focus-visible .attempt-mark,.attempt-point:hover .attempt-mark{animation:none}
@keyframes attempt-point-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.is-revealing .attempt-mark{animation:none}}
.attempt-point-correct .attempt-mark{stroke:var(--accent)}
.attempt-point-incorrect .attempt-mark{stroke:var(--alert)}
.attempt-hit{fill:transparent;stroke:transparent;vector-effect:non-scaling-stroke}
.attempt-point:focus-visible .attempt-hit,.attempt-point:hover .attempt-hit{stroke:var(--text);stroke-width:1}
.attempt-chart-tooltip{position:absolute;z-index:20;width:max-content;max-width:min(300px,calc(100% - 2 * var(--space)));padding:var(--space);border:1px solid var(--accent);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 5px 18px rgba(0,0,0,.25);font-size:.8rem;line-height:1.5;overflow-wrap:anywhere;pointer-events:none}
.attempt-chart-tooltip strong,.attempt-chart-tooltip span,.attempt-chart-tooltip time{display:block}
.attempt-chart-tooltip span{overflow:hidden;white-space:nowrap;text-overflow:clip}
.attempt-chart-tooltip strong{color:var(--accent);font-weight:750;margin-bottom:var(--space)}
.attempt-chart-tooltip time{color:var(--muted);margin-top:var(--space)}
.attempt-chart-tooltip::after{content:"";position:absolute;left:var(--tooltip-arrow,50%);width:8px;height:8px;background:var(--panel);transform:translateX(-50%) rotate(45deg)}
.attempt-chart-tooltip[data-side="above"]::after{bottom:-5px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.attempt-chart-tooltip[data-side="below"]::after{top:-5px;border-left:1px solid var(--accent);border-top:1px solid var(--accent)}


/* Outer chart panels inherit --radius from .panel/.detail.
   Only the graph's own drawing, bars and tooltip keep independent geometry. */