/* primer.css — "Before You Start" prep page. */

.primer-need { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.pn-item {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 17px; line-height: 1.5; color: var(--ink);
}
.pn-n {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--current); color: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px;
}

.primer-units {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  overflow: hidden; margin-top: 22px; background: var(--bg-card);
}
.pu-row {
  display: grid; grid-template-columns: 44px 1fr 1.4fr; gap: 14px;
  align-items: baseline; padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.pu-row:first-child { border-top: none; }
.pu-sym { font-family: 'Newsreader', serif; font-style: italic; font-size: 28px; }
.pu-unit { font-size: 13px; color: var(--ink); }
.pu-desc { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 600px) {
  .pu-row { grid-template-columns: 36px 1fr; }
  .pu-desc { grid-column: 2; }
}

.primer-scale {
  display: flex; flex-direction: column; gap: 8px; margin-top: 22px;
}
.ps-row {
  display: grid; grid-template-columns: 140px 130px 1fr; gap: 14px;
  align-items: baseline; padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px;
}
.ps-pre { font-size: 14px; color: var(--current); }
.ps-eq { font-size: 13px; color: var(--ink-soft); }
.ps-ex { font-size: 14px; color: var(--ink); }
@media (max-width: 600px) {
  .ps-row { grid-template-columns: 1fr 1fr; }
  .ps-ex { grid-column: 1 / -1; }
}

/* rearrange demo */
.primer-rearrange {
  margin-top: 24px; border: 2px solid var(--current); border-radius: 12px;
  background: var(--bg-card); padding: 22px; text-align: center;
}
.pr-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pr-tab {
  appearance: none; border: 1.5px solid var(--rule-strong); background: transparent;
  color: var(--ink-soft); padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; transition: all 140ms ease;
}
.pr-tab.on { background: var(--current); color: var(--bg-card); border-color: var(--current); }
.pr-stage { padding: 26px 0 8px; }
.pr-eq { justify-content: center; font-size: 64px; }
.pr-num { font-size: 20px; color: var(--ink-soft); margin-top: 12px; }
.pr-say { font-size: 16px; color: var(--ink); margin: 6px 0 0; }

.eq .frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; line-height: 0.95;
}
.eq .frac .bar { width: 100%; height: 2px; background: currentColor; margin: 2px 0; }

.primer-seal {
  border: 2px dashed var(--current); border-radius: 14px;
  padding: 30px 40px; background: var(--bg-card);
}

.eq .V { color: var(--water); }
.eq .I { color: var(--current); }
.eq .R { color: var(--ink); }
.eq .op { color: var(--ink-faint); margin: 0 0.12em; }