/**
 * Passage Memory — Study / Distractor / Recall
 *
 * The study sheet deliberately reads like a document rather than a UI panel: light
 * ground, serif-ish measure, generous line height. Everything else stays in the
 * cockpit theme used by the other modules.
 */

.passage-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.passage-stage {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.85rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  position: relative;
  min-height: 60vh;
}

.passage-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.passage-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.passage-actions .form-select {
  min-width: 17rem;
}

.passage-progress {
  font: 600 0.72rem var(--font-ui);
  color: var(--text-secondary);
}

/* Status row in the header */
.passage-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.passage-state-badge {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font: 700 0.62rem var(--font-hud);
  letter-spacing: 0.08em;
  border: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.passage-state-badge[data-state="study"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.passage-state-badge[data-state="distractor"] {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}

.passage-state-badge[data-state="recall"] {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.passage-clock {
  font: 700 1.35rem var(--font-mono);
  color: var(--text-primary);
  min-width: 4.2rem;
  text-align: right;
}

.passage-clock.urgent {
  color: var(--rose-danger);
  animation: passagePulse 1s ease-in-out infinite;
}

@keyframes passagePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .passage-clock.urgent { animation: none; }
}

/* Idle intro */
.passage-intro {
  padding: 1rem 0.25rem;
  max-width: 46rem;
}

.passage-intro.hidden { display: none !important; }

.passage-intro h2 {
  margin: 0 0 0.75rem;
  font: 700 1.15rem var(--font-ui);
  color: var(--text-primary);
}

.passage-intro ol {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.passage-intro li { margin-bottom: 0.5rem; }

.passage-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.passage-panel.hidden { display: none !important; }

/* The study sheet — a document, not a panel */
/* Exam header — the preset and both phase budgets on one line above the sheet, as the
   reference paper prints them. Centred over the sheet rather than tucked into the stage
   head, because it is read once at the start of the phase and then ignored. */
.passage-exam-head {
  text-align: center;
  margin: 0 0 0.7rem;
}

.passage-exam-title {
  margin: 0;
  font: 700 0.95rem/1.45 var(--font-ui);
  color: var(--accent);
  letter-spacing: 0.01em;
}

.passage-exam-title:empty,
.passage-exam-hint:empty { display: none; }

.passage-exam-hint {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.passage-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--surface-sunken);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.passage-mode-toggle:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
}

.passage-mode-toggle input { accent-color: var(--accent); cursor: pointer; }

.passage-sheet {
  background: var(--play-paper);
  color: var(--play-ink);
  border-radius: 0.6rem;
  padding: 1.5rem 1.75rem;
  max-height: 62vh;
  overflow-y: auto;
  box-shadow: inset 0 0 30px rgba(15, 23, 42, 0.06);
}

.passage-sheet h3 {
  margin: 0 0 1rem;
  font: 700 0.95rem var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--play-ink);
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  padding-bottom: 0.55rem;
}

.passage-sheet-body p {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.75;
  /* A generous measure: dense numeric prose is read slowly, and a long line makes
     losing your place mid-paragraph far too easy. */
  max-width: 62ch;
}

.passage-sheet-body p:last-child { margin-bottom: 0; }

/* Mock Exam renders the whole document as one block, so the measure widens and the
   leading opens up — a 300-word unbroken paragraph at the tiers' 1.75 line-height is
   where the eye starts losing its place between numbers. */
.passage-sheet-body.is-flowing p {
  max-width: 74ch;
  font-size: 0.92rem;
  line-height: 2.05;
}

.passage-done {
  align-self: center;
  margin-top: 0.85rem;
}

/* Distractor */
.passage-distractor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
}

.passage-distractor-kicker {
  font: 700 0.65rem var(--font-hud);
  letter-spacing: 0.1em;
  color: var(--amber-warning);
}

.passage-distractor-prompt {
  margin: 0;
  font: 600 1.05rem var(--font-ui);
  color: var(--text-primary);
}

.passage-distractor-controls {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.passage-distractor-controls .form-input {
  min-width: 12rem;
  text-align: center;
  font: 700 1.05rem var(--font-mono);
}

.passage-distractor small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Recall */
.passage-recall-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.passage-question {
  border: 1px solid var(--border-default);
  border-radius: 0.6rem;
  background: var(--surface-overlay);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.passage-question.answered {
  border-color: var(--success);
  background: var(--success-soft);
}

.passage-question-head {
  display: flex;
  gap: 0.55rem;
  font: 600 0.82rem var(--font-ui);
  color: var(--text-primary);
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.passage-question-no {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--sky-accent);
  font: 700 0.7rem var(--font-mono);
}

.passage-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.35rem;
}

.passage-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-default);
  border-radius: 0.45rem;
  background: var(--surface-sunken);
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.passage-option:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.passage-option b {
  font: 700 0.7rem var(--font-mono);
  color: var(--text-muted);
  flex-shrink: 0;
}

.passage-option:has(input:checked) {
  border-color: var(--sky-accent);
  background: var(--accent-soft);
  color: var(--text-primary);
}

.passage-option input { accent-color: var(--sky-accent); }

.passage-submit {
  align-self: flex-start;
  margin-top: 0.7rem;
  min-width: 12rem;
}

.passage-feedback {
  min-height: 1.2rem;
  font: 600 0.75rem var(--font-ui);
  color: var(--text-secondary);
}

.passage-feedback.ok { color: var(--emerald-success); }
.passage-feedback.warn { color: var(--amber-warning); }
.passage-feedback.bad { color: var(--rose-danger); }

/* Results */
.passage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-overlay);
  backdrop-filter: blur(5px);
  border-radius: 0.85rem;
  z-index: 10;
  overflow-y: auto;
}

.passage-overlay.hidden { display: none !important; }

.passage-modal-card {
  width: min(94%, 34rem);
  padding: 1.4rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  box-shadow: 0 16px 40px var(--shadow-color);
  margin: auto;
}

.passage-section-kicker {
  font: 700 0.58rem var(--font-hud);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.passage-modal-card h2 {
  margin: 0.2rem 0 0.9rem;
  font: 700 1.3rem var(--font-ui);
  color: var(--text-primary);
}

.passage-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.passage-result-item {
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-default);
  background: var(--surface-overlay);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.passage-result-item span {
  font: 600 0.62rem var(--font-hud);
  color: var(--text-muted);
  text-transform: uppercase;
}

.passage-result-item strong {
  font: 700 1.05rem var(--font-mono);
  color: var(--sky-accent);
}

.passage-result-item.highlight strong {
  color: var(--emerald-success);
  font-size: 1.35rem;
}

/* Per-type breakdown — the useful signal is which kind of fact failed */
.passage-breakdown { margin-top: 0.9rem; }

.passage-breakdown h4 {
  margin: 0 0 0.5rem;
  font: 700 0.62rem var(--font-hud);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.passage-breakdown-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.passage-breakdown-row i {
  display: block;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--border-default);
  overflow: hidden;
}

.passage-breakdown-row i b {
  display: block;
  height: 100%;
  background: var(--sky-accent);
  border-radius: 999px;
}

.passage-breakdown-row em {
  font: 600 0.7rem var(--font-mono);
  font-style: normal;
  color: var(--text-muted);
  text-align: right;
}

.passage-seed {
  margin: 0.75rem 0 0;
  font-size: 0.65rem;
  color: var(--text-muted);
  word-break: break-word;
}

@media (max-width: 720px) {
  .passage-actions .form-select { min-width: 100%; }
  .passage-result-grid { grid-template-columns: 1fr; }
  .passage-sheet { padding: 1rem 1.1rem; }
}