/* The analysis board: the board with its evaluation bar on one side, the graph, the annotated moves and the verdict on the other. */
.analysis-page { padding-block: 1rem 3rem; }
.analysis-page:has(.analysis-live h1) .analysis-static { display: none; }
.analysis-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.analysis-heading h1 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 780; letter-spacing: -0.03em; }
.analysis-heading h1 span { margin-left: 0.4rem; color: var(--ink-muted); font-weight: 650; }
.analysis-status { color: var(--ink-muted); }
.analysis-layout { display: grid; gap: 1.25rem; }
.analysis-board-column { display: grid; gap: 0.6rem; align-content: start; }
.analysis-board-row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.5rem; }
.analysis-board { min-width: 0; }
.analysis-variation { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink-muted); font-size: 0.8rem; }
.analysis-panel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.analysis-run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem; border-radius: var(--radius-surface); background: var(--surface); }
.analysis-run label { color: var(--ink-muted); font-size: 0.75rem; }
.analysis-run progress { flex: 1 1 8rem; accent-color: var(--accent); }
.analysis-progress-text, .analysis-source { color: var(--ink-muted); font-size: 0.72rem; }
/* Which analysis is shown reads first; the controls to run another follow on one row. */
.analysis-source, .analysis-lines-pending { flex: 1 1 100%; order: -1; }
.analysis-run select { flex: 1 1 5rem; min-width: 0; }
.eval-graph { border-radius: var(--radius-item); outline-offset: 2px; cursor: pointer; }
.eval-graph svg { width: 100%; height: 7.5rem; display: block; border-radius: var(--radius-item); }
.eval-graph-black { fill: #2a2a2a; }
.eval-graph-white { fill: #e9e6dc; }
.eval-graph-mid { stroke: #7d7d7d; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eval-graph-current { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.eval-graph-critical { stroke: var(--danger); stroke-dasharray: 4 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eval-graph-hit { fill: transparent; }
.eval-graph-mark { stroke: #111; stroke-width: 1; }
.eval-graph-mark.inaccuracy { fill: #e6c34a; }
.eval-graph-mark.mistake { fill: #e68f3c; }
.eval-graph-mark.blunder { fill: #e3554a; }
.analysis-moves { max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.5rem; border-radius: var(--radius-surface); background: var(--surface); }
.analysis-moves .move-glyph { margin-left: 0.15rem; font-weight: 800; }
.move.inaccuracy .move-glyph, .analysis-report-moves .inaccuracy a { color: #e6c34a; }
.move.mistake .move-glyph, .analysis-report-moves .mistake a { color: #e68f3c; }
.move.blunder .move-glyph, .analysis-report-moves .blunder a { color: #ff7b70; }
.analysis-verdict { padding: 0.75rem 1rem; border-left: 4px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); }
.analysis-verdict.inaccuracy { border-left-color: #e6c34a; }
.analysis-verdict.mistake { border-left-color: #e68f3c; }
.analysis-verdict.blunder { border-left-color: #e3554a; }
.analysis-verdict.best, .analysis-verdict.excellent { border-left-color: var(--accent); }
.analysis-verdict h2 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.analysis-verdict p { margin: 0.25rem 0; color: var(--ink-muted); font-size: 0.8rem; }
.analysis-best-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.analysis-best-line .move { min-height: 32px; padding-inline: 0.4rem; }
.analysis-summary { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.8rem; }
.analysis-summary caption { margin-bottom: 0.4rem; color: var(--ink-muted); font-size: 0.72rem; font-weight: 700; text-align: start; text-transform: uppercase; letter-spacing: 0.06em; }
.analysis-summary th, .analysis-summary td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: end; }
.analysis-summary th[scope="row"] { color: var(--ink-muted); font-weight: 600; text-align: start; }
.analysis-summary thead th { overflow-wrap: break-word; }
.analysis-critical { margin: 0; font-size: 0.8rem; }
.analysis-report { display: grid; gap: 1rem; }
.analysis-report-moves { display: grid; gap: 0.2rem; margin: 0; padding-left: 0; list-style: none; font-size: 0.8rem; }
.analysis-report-moves li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.analysis-report-moves span { color: var(--ink-muted); }
@media (min-width: 58rem) {
  .analysis-layout { grid-template-columns: minmax(0, min(36rem, 100vh - 12rem)) minmax(20rem, 1fr); align-items: start; }
}
.move.book:not([aria-current="step"]) { color: var(--ink-muted); }

.analysis-lines-pending { color: var(--ink-muted); font-size: 0.74rem; }