/* Module 02 — Top-P. Only what styles.css does not already provide: the ranked
   candidate bars, the cut line between them, and the two comparison grids.
   Everything uses the shared tokens so this still reads as one product. */

/* ------------------------------------------------------------ the sentence */

.tp-prefix {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 14px 15px;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.7;
}
.tp-prefix .tp-blank {
  display: inline-block;
  min-width: 68px;
  border-bottom: 3px solid var(--accent);
  color: var(--accent-dark);
  font-weight: 700;
  text-align: center;
}
.tp-prefix-note {
  font-family: var(--font);
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* --------------------------------------------------------------- readout */

.tp-readout {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 14px;
}
.tp-readout .tp-big {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0;
}
.tp-readout .tp-sub {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

/* ------------------------------------------------------- candidate ladder */

.tp-cands { display: grid; gap: 7px; }

.cand {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 9px 11px;
}
.cand-main { min-width: 0; }
.cand-rank {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-faint);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cand-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cand-word {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .98rem;
  overflow-wrap: anywhere;
}
.cand-prob {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cand-track {
  height: 10px;
  border-radius: 999px;
  background: #e3e9f2;
  overflow: hidden;
  margin: 6px 0 5px;
}
.cand-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  min-width: 4px;
}
.cand-foot {
  font-size: .78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* inside the nucleus */
.cand.in { border-color: var(--accent-line); background: var(--accent-soft); }
.cand.in .cand-rank { color: var(--accent-dark); }

/* cut */
.cand.out { background: var(--surface-alt); }
.cand.out .cand-word { text-decoration: line-through; color: var(--ink-soft); font-weight: 600; }
.cand.out .cand-prob { color: var(--ink-faint); font-weight: 600; }
.cand.out .cand-fill { background: var(--line-strong); }

.tp-cut {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 3px 0;
}
.tp-cut::before, .tp-cut::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, #d99 0 7px, transparent 7px 13px);
}

/* ----------------------------------------------------------- draw a word */

.tp-draw { margin-top: 18px; }
.tp-history {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  min-height: 34px;
}
.tp-drawn {
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.tp-drawn.first { border-color: var(--accent); }

/* ------------------------------------------------------- the p x shape grid */

.tp-matrix { display: grid; gap: 9px; }
.tp-mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 11px 13px;
}
.tp-mrow.active { border-color: var(--accent); background: var(--accent-soft); }
.tp-mname { font-weight: 700; font-size: .95rem; }
.tp-mshape { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-soft); }
.tp-mcount {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tp-mcount span { font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--ink-soft); }

/* ------------------------------------------------------------- comparison */

.tp-cols { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 760px) {
  .tp-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
.tp-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.tp-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft);
}
.tp-col-head h3 { margin: 0 0 2px; font-size: 1.05rem; color: var(--accent-dark); }
.tp-col-head p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.tp-col-body { padding: 12px; }

.tp-fail {
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 13px 15px;
  margin-bottom: 12px;
}
.tp-fail:last-child { margin-bottom: 0; }
.tp-fail h4 { margin: 0 0 5px; font-size: .98rem; }
.tp-fail p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ guided lab */

.tp-exp { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.tp-exp:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.tp-exp-num {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.tp-exp h3 { margin-bottom: 8px; }

/* ------------------------------------------------- touch targets on phones */
/* Shared styles.css leaves the chip at 43 px and the range track at 32 px.
   Both are dragged or tapped constantly in this module, so they get the full
   44 px here. Scoped to this page only — no shared file is touched. */

.chip { min-height: 44px; }
input[type="range"] { min-height: 48px; padding: 18px 0; }