/* math-hacking-session styles */

#landing,
#session,
#review {
  display: none;
}

body[data-state="landing"] #landing {
  display: block;
}

body[data-state="session"] #session {
  display: block;
}

body[data-state="review"] #review {
  display: block;
}

/* ── Terminal Theme ── */
:root {
  --bg: #0a0a0a;
  --fg: #00ff41;
  --accent: #00cc33;
  --dim: #007a1e;
  --font: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); margin: 0; padding: 1rem; min-height: 100vh; }
.terminal-window { max-width: 800px; margin: 2rem auto; border: 1px solid var(--dim); }
.terminal-header { background: var(--dim); color: var(--bg); padding: 0.3rem 0.75rem; font-size: 0.85em; user-select: none; }
.terminal-body { padding: 1rem 1.25rem; line-height: 1.8; }
/* The `hidden` attribute must win over component display rules
   (e.g. .prompt-line sets display:flex, which would otherwise show it). */
[hidden] { display: none !important; }
.boot-log { color: var(--dim); }
.boot-line { color: var(--dim); white-space: pre-wrap; }
/* Inline KaTeX math (e.g. the y=mx+b catchphrase) should read as terminal
   text, not a textbook: inherit the dim green and size; let KaTeX own spacing. */
.boot-line .katex { color: inherit; font-size: inherit; }
.boot-init-cmd { color: var(--fg); }
.boot-logo {
  color: var(--fg);
  white-space: pre;
  line-height: 1.1;
  margin: 0.75rem 0;
  font-size: clamp(0.45rem, 2.4vw, 0.85rem);
}
.prompt-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.prompt-arrow { color: var(--fg); }
/* Blank line above the (prompt-less) start button — see landing-ui spec §7. */
#boot-start-line { margin-top: 1.2em; }
.start-btn { background: transparent; border: 1px solid var(--fg); color: var(--fg); font-family: inherit; font-size: inherit; cursor: pointer; padding: 0.2em 0.75em; letter-spacing: 0.05em; }
.start-btn:hover { background: var(--fg); color: var(--bg); }
.start-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Session Screen ── */
.status-line { color: var(--accent); margin-bottom: 0.75rem; font-size: 0.9em; letter-spacing: 0.02em; }
.status-line .status-group { white-space: nowrap; }
.progress-bar { color: var(--dim); }
/* No inner scroll: at most 15 problems, so let the log grow naturally and
   let the whole page scroll if needed. */
.session-log { min-height: 4rem; margin-bottom: 0.5rem; }
.session-log .log-ok { color: var(--accent); }
.session-log .log-err { color: #ff4444; }
.session-log .log-entry { display: block; }
.problem-prompt { color: var(--fg); margin-bottom: 0.5rem; min-height: 1.5em; font-size: 1.1em; }
.answer-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fg);
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  outline: none;
  width: 12ch;
  caret-color: var(--fg);
  padding: 0.1em 0;
}
.answer-input:focus { border-bottom-color: var(--accent); }
.submit-btn {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--dim);
  font-family: inherit;
  font-size: 0.8em;
  cursor: pointer;
  padding: 0.1em 0.5em;
  margin-left: 0.5rem;
}
.submit-btn:hover { background: var(--dim); color: var(--bg); }
.submit-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .typewriter-char { animation: none !important; }
}

/* ── Review Screen ── */
.review-summary {
  color: var(--accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--dim);
}
/* No inner scroll: the review list holds at most 15 problems, so let it
   grow to its natural height and let the whole page scroll if needed. */
.review-list-container {
  margin-bottom: 1rem;
}
.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.review-item {
  padding: 0.15em 0;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.review-item[data-correct="true"] .review-marker,
.review-item[data-correct="true"] .review-tag { color: var(--accent); }
.review-item[data-correct="false"] .review-marker,
.review-item[data-correct="false"] .review-tag { color: #ff4444; }
.review-item .review-line { color: var(--fg); flex: 1; }