/* practice-v1.css — the revision page (practice.html). Practice chat, 29 Sep 2026.
 * Loaded after theory-v2.css and built only from its tokens (--cat, --card, --line,
 * --ink, --muted, --soft, --ok, --bad ...), so light and dark mode come from there.
 * The per-category hues below are theory-v2.css's own values, repeated only so each
 * chooser tile can wear its category's colour before one is chosen. */

.prac .pcat[data-cat="the-economic-problem"] { --cat: #8a5a00; --cat-fill: #f7f1e6; }
.prac .pcat[data-cat="markets"]              { --cat: #1d5fcc; --cat-fill: #edf3fc; }
.prac .pcat[data-cat="market-failure"]       { --cat: #c2410c; --cat-fill: #fcf0ea; }
.prac .pcat[data-cat="firms"]                { --cat: #7a3fd6; --cat-fill: #f4effc; }
.prac .pcat[data-cat="work-and-pay"]         { --cat: #1b7a3a; --cat-fill: #ebf5ee; }
.prac .pcat[data-cat="macroeconomy"]         { --cat: #0d7571; --cat-fill: #e8f4f3; }
.prac .pcat[data-cat="policy"]               { --cat: #4b45c9; --cat-fill: #efeefb; }
.prac .pcat[data-cat="global-economy"]       { --cat: #b3246e; --cat-fill: #f9ecf3; }
@media (prefers-color-scheme: dark) {
  .prac .pcat[data-cat="the-economic-problem"] { --cat: #e0b04a; --cat-fill: #272216; }
  .prac .pcat[data-cat="markets"]              { --cat: #7aaaf5; --cat-fill: #1b2230; }
  .prac .pcat[data-cat="market-failure"]       { --cat: #f59a6b; --cat-fill: #2a1f1a; }
  .prac .pcat[data-cat="firms"]                { --cat: #b99af5; --cat-fill: #221e2e; }
  .prac .pcat[data-cat="work-and-pay"]         { --cat: #6fcf8f; --cat-fill: #19251d; }
  .prac .pcat[data-cat="macroeconomy"]         { --cat: #5cc9c2; --cat-fill: #172524; }
  .prac .pcat[data-cat="policy"]               { --cat: #a3a0f5; --cat-fill: #1f1f2e; }
  .prac .pcat[data-cat="global-economy"]       { --cat: #f27fb8; --cat-fill: #2a1b23; }
}

/* ---- chooser ---------------------------------------------------------------- */
.pmode { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--line); }
.pmode button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  font: inherit; font-weight: 750; font-size: 15px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); cursor: pointer; }
.pmode button .ic { width: 18px; height: 18px; }
.pmode button[aria-checked="true"] { background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pcats { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .pcats { grid-template-columns: 1fr 1fr; } }
.pcat { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; min-height: 64px; }
.pcat:hover { border-color: var(--cat); }
.pcat .ttile { background: var(--cat-fill); border-color: transparent; }
.pcat .in { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcat .ttl { font-weight: 750; font-size: 16px; line-height: 21px; }
.pcat .dsc { font-size: 13.5px; line-height: 19px; color: var(--muted); }
.pnote { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---- the stage -------------------------------------------------------------- */
.pstage { margin: 6px 0 0; }
.pwait { color: var(--muted); padding: 24px 0; }
.phead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin: 0 0 2px; }
.pprog { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cat); }
.pfmt { font-size: 13px; color: var(--muted); }
.ptopic { margin: 0 0 10px; font-size: 18px; line-height: 24px; font-weight: 750; color: var(--ink);
  text-wrap: balance; }
.ptcat { color: var(--cat); font-weight: 750; }
.ptsep { color: var(--muted); margin: 0 6px; font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pbar { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; margin: 0 0 16px; }
.pbar span { display: block; height: 100%; background: var(--cat); border-radius: 999px; transition: width .25s; }
@media (prefers-reduced-motion: reduce) { .pbar span { transition: none; } }
.pitem .tb { margin: 0; }
.phint { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.pafter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0 0; }
.pafter[hidden] { display: none; }
.prr { font-size: 14.5px; font-weight: 650; }
.pnav { display: inline-flex; gap: 8px; margin-left: auto; }
.pafter .btn, .pend .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; font-weight: 750; text-decoration: none; }

/* ---- endings ---------------------------------------------------------------- */
.pend { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 22px; }
.pkick { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat); }
.pend .ph { margin: 0 0 8px; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.01em; }
.pend .ph:focus { outline: none; }
.pend p { margin: 0 0 10px; line-height: 1.5; }
.pmiss { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.pmiss li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 8px 12px;
  border-radius: 10px; background: var(--soft); }
.pmiss a { font-weight: 700; }
.pmiss span { font-size: 13px; color: var(--muted); }
.pbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pfree { margin: 14px 0 0 !important; font-size: 14px; color: var(--muted); }

/* while a set or deck runs, only the crumb and title of the hero stay */
.prac.pinset .thero .tout, .prac.pinset .thero .tchips, .prac.pinset .thero .tkick { display: none; }
.prac.pinset .thero h1 { font-size: 20px; line-height: 26px; margin: 0; }

/* focus is moved to the question for screen readers on each new item; that is a
   programmatic focus, so it draws no ring (keyboard focus on controls still does) */
.pitem .tq:focus, .pitem .tq:focus-visible { outline: none; }
/* theory-v2 paints every .btn in the category hue; secondary actions stay quiet */
.prac .btn.sec { background: var(--soft); color: var(--ink); }