/* ══ THEVIN — LÄSUPPDRAGET I ELEVENS KAHOOT-VY ════════════════════════
   Två saker som bara finns när quizet byggts av ett läsuppdrag:
   ett uteslutet svarsalternativ i poängtrappan, och ghost-vyn för den
   som valde frågan.

   Egen fil, inte ett tillägg i elev.css: den filen är 27 kB och delas av
   alla elevlägen. Det här hör till ett läge och ska gå att läsa för sig.
   ════════════════════════════════════════════════════════════════════ */

/* Ett alternativ eleven redan prövat. Tonas ned och stryks över — men
   ingenting sägs om vilket som är rätt. */
.alternativ-btn.kahoot-uteslutet {
  opacity: .42;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── GHOST-VYN ── */
.kahoot-ghost {
  margin-top: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
}
.kahoot-ghost-rub {
  font-size: var(--t-meta);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.kahoot-ghost-vantar { font-size: var(--t-brod); color: var(--muted2); }

.kahoot-ghost-topp {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.kahoot-ghost-topp > div { flex: 1 1 0; background: var(--surface2); padding: 10px 12px; }
.kahoot-ghost-topp .etikett {
  font-size: var(--t-meta); letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.kahoot-ghost-topp .tal {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-h2); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.kahoot-ghost-staplar { display: grid; gap: 8px; }
.kahoot-ghost-rad {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 36px;
  gap: 10px; align-items: center;
}
.kahoot-ghost-rad .bok {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-liten); color: var(--muted2);
}
.kahoot-ghost-rad .spar {
  height: 22px; background: var(--surface2); border: 1px solid var(--border);
  display: block; overflow: hidden;
}
.kahoot-ghost-rad .fyll { display: block; height: 100%; background: var(--accent); }
.kahoot-ghost-rad .tal {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-liten);
  font-variant-numeric: tabular-nums; text-align: right; color: var(--muted2);
}

.kahoot-ghost-fot { margin-top: 12px; font-size: var(--t-liten); color: var(--muted); }

/* Kahoot-läget skriver över elevens tema med body.kahoot. Ghost-rutan ska
   följa med dit utan att något färgvärde hårdsätts här. */
body.kahoot .kahoot-ghost { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.18); }
body.kahoot .kahoot-ghost-topp > div { background: rgba(0, 0, 0, 0.2); }