/* Walkthrough-only styles. Everything structural (grid, cell, pill, btn)
   comes from ../styles.css so the tutorial grid and the real grid are the
   same object visually. */

.brand span { color: var(--accent); }
/* Skip is an <a> wearing .pill, so it needs the colour and underline reset
   that a <button>.pill gets for free. */
a.pill { color: var(--ink); text-decoration: none; }

.step { width: 100%; margin-top: 14px; }
.step h1 { font-size: 19px; margin: 0 0 8px; }
#step-body { color: var(--ink); font-size: 15px; line-height: 1.55; }
#step-body p { margin: 0 0 10px; }
/* The clue list a step quotes verbatim, kept monospaced and indented so it
   reads as the puzzle's own text rather than as prose. */
#step-body pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

/* ── Grid highlighting ─────────────────────────────────────
   Two tints rather than one, because several steps are specifically about two
   entries meeting: the overlap cell takes both and is the visible proof of
   "one square, two numbers". Backgrounds, not borders — a border on a 38px
   cell competes with the digit. */
.cell.focus-a { background: var(--active-soft); }
.cell.focus-b { background: #f5b30126; }
.cell.focus-a.focus-b { background: #7a4a7a55; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.filled { color: var(--good); }

/* ── Candidate table ───────────────────────────────────────
   The elimination step is the one place a table beats prose: six candidates
   entering, one leaving. */
#step-table { width: 100%; }
#step-table table {
  width: 100%;
  margin: 12px 0 4px;
  border-collapse: collapse;
  font-size: 14px;
}
#step-table th {
  text-align: left;
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}
#step-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
#step-table tr.out td { color: var(--ink-dim); text-decoration: line-through; }
/* The note column explains the verdict; never struck through, since it is the
   reason rather than the thing being ruled out. */
#step-table tr.out td.note { text-decoration: none; }
#step-table td.note { color: var(--ink-dim); font-size: 13px; }
#step-table tr.keep td { color: var(--good); }
#step-table tr.keep td.note { color: var(--good); }

/* ── Clues ─────────────────────────────────────────────────
   Dimmed by default and lit when a step uses them, so "which fact am I using
   right now" never has to be held in the reader's head. */
#clue-list li { opacity: 0.45; transition: opacity 0.15s ease; }
#clue-list li.lit { opacity: 1; border-color: var(--accent); }

/* ── Navigation ────────────────────────────────────────────
   Sticky, because the narration on a phone is often taller than the viewport
   and hunting for Next at the bottom of every step is its own drop-off. */
.learn-nav {
  position: sticky;
  bottom: 0;
  /* Pushed to the bottom of the flex column so the early steps, whose
     narration is short, do not leave the buttons stranded mid-screen. */
  margin-top: auto;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.learn-nav .btn { flex: 1; text-align: center; text-decoration: none; }
.learn-nav .btn:disabled { opacity: 0.35; cursor: default; }
.hidden { display: none !important; }