/* review.css — Review tab: game library, import, profile dashboard, foresight cards.
   Tokens from style.css (:root + light theme). Follows panel.css /
   feedback.css conventions. Tokens only — no raw color literals
   (raw values live solely in the style.css token blocks).
   ------------------------------------------------------------------ */

/* ==========================================================================
   Review bar — board-column bar shown in review mode (mirrors trap-bar/rep-bar).
   ========================================================================== */

.review-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-3);
}

/* display:flex above out-specifies the UA [hidden] rule — mirror the explicit
   guard the sibling bars carry (style.css .setup-bar/.trap-bar/.rep-bar). */
.review-bar[hidden] {
  display: none;
}

.review-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-game-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

.review-game-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.review-game-result {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#review-return {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

#review-return:hover,
#review-return:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  outline: none;
}

/* ==========================================================================
   Foresight card area
   ========================================================================== */

.review-foresight {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-foresight-card {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  background: var(--surface-raised);
}

.review-foresight-lead-in {
  border-left-color: var(--q-mistake);
}

.review-foresight-tie-back {
  border-left-color: var(--muted);
  opacity: 0.85;
}

.review-foresight-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Severity badge */
.review-severity {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
}

.review-severity-blunder { color: var(--q-blunder); }
.review-severity-mistake { color: var(--q-mistake); }

.review-foresight-phase {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: capitalize;
}

/* Narration buckets */
.review-narration-bucket {
  margin-bottom: var(--space-2);
}

.review-narration-summary {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.review-bucket-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

.review-bucket-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Context row (category + win-prob drop) */
.review-foresight-ctx {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.review-category {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--surface-overlay);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.review-win-drop {
  font-size: 0.75rem;
  color: var(--q-mistake);
  font-variant-numeric: tabular-nums;
}

/* Tie-back */
.review-foresight-tieback {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
  line-height: 1.4;
}

.review-foresight-best {
  font-size: 0.8rem;
  color: var(--accent);
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Tab-panel Review content (library + import + profile)
   ========================================================================== */

/* Scoped to .is-active: a bare #tab-review ID selector out-specifies the generic
   [role="tabpanel"]:not(.is-active) hide rule and leaks this panel into every tab. */
#tab-review.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
}

.review-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}

.review-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.review-subsection-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-3) 0 var(--space-2);
}

/* ==========================================================================
   Game library list
   ========================================================================== */

.review-game-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: var(--space-4);
  text-align: center;
}

.review-game-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  /* Transparent resting border: elevation + gap do the grouping;
     the 1px slot stays so the hover outline doesn't shift layout. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.review-game-row:hover {
  border-color: var(--border);
}

.review-game-players {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.review-vs {
  color: var(--muted);
  font-size: 0.75rem;
}

.review-game-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-game-opening,
.review-game-date {
  font-size: 0.75rem;
  color: var(--muted);
}

.review-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.review-badge-win   { color: var(--q-best); background: var(--q-best-dim); }
.review-badge-loss  { color: var(--q-blunder); background: var(--q-blunder-dim); }
.review-badge-draw  { color: var(--q-inaccuracy); background: var(--q-inaccuracy-dim); }
.review-badge-score {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  background: var(--surface-raised);
}

.review-status {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: capitalize;
  margin-left: auto;
}

.review-status-analyzing { color: var(--accent); }
.review-status-done      { color: var(--q-best); }
.review-status-failed    { color: var(--q-blunder); }

.review-game-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-game-status-live {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
}

/* ==========================================================================
   Buttons (review-specific variants)
   ========================================================================== */

.review-btn {
  padding: var(--space-1) var(--space-3);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.review-btn:hover:not(:disabled),
.review-btn:focus-visible {
  color: var(--text);
  border-color: var(--accent);
}

.review-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.review-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.review-btn-primary {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.review-btn-primary:hover:not(:disabled) {
  background: var(--accent-dim-hover);
}

.review-btn-danger {
  color: var(--q-blunder);
  border-color: var(--q-blunder-border);
}

.review-btn-danger:hover:not(:disabled) {
  border-color: var(--q-blunder);
  background: var(--q-blunder-dim);
}

/* File-input label styled as a button */
.review-btn-file {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

input[type="file"].review-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Import controls
   ========================================================================== */

.review-import {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}

.review-import-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-pgn-input {
  width: 100%;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--motion-fast) var(--ease-out);
}

.review-pgn-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.review-pgn-input::placeholder {
  color: var(--muted);
}

.review-import-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-import-options {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-option-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.review-color-select {
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.review-color-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.review-import-status {
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.2em;
}

.review-import-status.success { color: var(--q-best); }
.review-import-status.error   { color: var(--q-blunder); }

/* ==========================================================================
   Profile dashboard
   ========================================================================== */

.review-profile-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-profile-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: var(--space-3);
  text-align: center;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-subtle);
}

/* Stats row */
.review-stats-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.review-stat {
  flex: 1;
  min-width: 100px;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.review-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-stat-sub {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Leak list */
.review-leak-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-leak-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.review-leak-category {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}

.review-leak-coach {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

.review-leak-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Phase / color rows */
.review-phase-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.review-phase-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.review-phase-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Opening list */
.review-opening-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.review-opening-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.review-opening-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-opening-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  margin-left: var(--space-2);
  font-variant-numeric: tabular-nums;
}

/* Trend */
.review-trend {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-trend-bucket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  min-width: 60px;
}

.review-trend-date {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
}

.review-trend-count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Coverage hint
   ========================================================================== */

.review-coverage {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}

.review-coverage-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-coverage-stat {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.review-coverage-sep {
  font-size: 0.75rem;
  color: var(--muted);
}

.review-coverage-nudge {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================================================================
   Bulk controls (retag — analysis is automatic)
   ========================================================================== */

.review-bulk {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}

.review-bulk-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.review-bulk-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-bulk-input {
  flex: 1;
  min-width: 140px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  padding: var(--space-1) var(--space-2);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.review-bulk-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.review-bulk-input::placeholder {
  color: var(--muted);
}

/* ==========================================================================
   Per-game color control
   ========================================================================== */

.review-game-color-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-game-color-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.review-color-select-sm {
  font-size: 0.75rem;
  padding: 1px var(--space-1);
}

.review-game-color-status {
  font-size: 0.72rem;
  color: var(--muted);
}

.review-game-color-status-ok  { color: var(--q-best); }
.review-game-color-status-err { color: var(--q-blunder); }

/* ==========================================================================
   Toast notifications
   ========================================================================== */

.review-toast {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  box-shadow: var(--shadow-toast);
  animation: review-toast-in var(--motion-fast) var(--ease-out);
  pointer-events: none;
}

.review-toast-fade {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

@keyframes review-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: skip the slide-in — toast appears in place.
   (style.css zeroes animation-duration globally, but @keyframes
   animations get their own explicit override here, matching
   feedback.css.) */
@media (prefers-reduced-motion: reduce) {
  .review-toast {
    animation: none;
  }
}

/* ==========================================================================
   Game summary row (per-side accuracy & Elo estimates)
   ========================================================================== */

.review-game-summary {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.review-game-summary[hidden] {
  display: none;
}

.rgs-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}

.rgs-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rgs-acc {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rgs-elo {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.rgs-est {
  font-size: 0.7rem;
  color: var(--muted);
}

.review-analyzing-note {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   AI narrative panel — hosted at #review-narrative, now living in the Analysis
   panel (.analysis-eval-row, right of the eval readouts), not under #review-bar.
   ========================================================================== */

.review-narrative[hidden] {
  display: none;
}

.review-narrative-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}

.review-narrative-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.review-narrative-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.review-narrative-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.review-narrative-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-narrative-regen {
  font-size: 0.75rem;
  padding: 1px var(--space-2);
}

.review-narrative-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Collapsed to roughly four lines; "Read more" expands to the full story. */
.review-narrative-collapsed {
  max-height: 6.4em;
  overflow: hidden;
}

.review-narrative-phase {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.review-narrative-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  /* Cap the reading measure — in the wide Analysis-panel column the prose would
     otherwise run ~90+ chars/line. 56ch lands ~70 rendered chars (the ch unit
     tracks the wider "0" glyph); on narrow stacked layouts the column is
     narrower so this never binds. */
  max-width: 56ch;
}

/* Chapters render one <p> per model paragraph (split on newlines) — space
   consecutive paragraphs apart without adding margin above the first. */
.review-narrative-text + .review-narrative-text {
  margin-top: var(--space-2);
}

.review-narrative-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.review-narrative-toggle:hover {
  text-decoration: underline;
}

.review-narrative-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   AI moment cards — rendered alongside foresight cards in #review-foresight,
   visually distinct (accent border + "AI" tag) from the template-narrated
   lead-in/tie-back cards.
   ========================================================================== */

.review-moment-card {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
}

.review-moment-hdr {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-1);
}

.review-moment-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--surface-overlay);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.review-moment-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   Eval graph — whole-game eval line in the review bar
   ============================================================ */

.review-eval-graph {
  margin-top: var(--space-2);
}

.review-eval-graph[hidden] {
  display: none;
}

.review-eval-graph svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.reg-mid {
  stroke: var(--border);
  stroke-dasharray: 3 3;
}

.reg-line {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
}

.reg-dot { stroke: none; }
.reg-dot-blunder { fill: var(--q-blunder); }
.reg-dot-mistake { fill: var(--q-mistake); }

.reg-marker {
  fill: var(--accent);
  stroke: var(--surface-raised);
  stroke-width: 1;
}

.reg-hit {
  fill: transparent;
  cursor: pointer;
}

.reg-hit:hover {
  fill: var(--accent);
  fill-opacity: 0.35;
}

/* ============================================================
   Fetch-from-API block (lichess / chess.com) under Import PGN
   ============================================================ */

.review-fetch {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.review-fetch-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.review-fetch-user {
  flex: 1;
  min-width: 0;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.review-fetch-user:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}