/* Forge Trading — restyled to the BIGHEAVYINK vertical design system.
   Tokens, fonts and layout mirror the ten exam apps: dark teal ground, the
   rail header with the gold BIGHEAVYINK eyebrow, mono uppercase tabs, and
   paper cards for the content being studied. The app's own accent is the
   registry teal. Class names are unchanged — app.js knows nothing of this. */

:root {
  --ground: #132229;
  --ground-2: #0E1A20;
  --surface: #1B2F38;
  --surface-2: #223B46;
  --line: #2E4A56;
  --text: #DCE8ED;
  --text-dim: #8FA8B3;
  --paper: #F2EDE3;
  --paper-line: #DAD1C1;
  --paper-ink: #241D14;
  --paper-dim: #6C6255;
  --gold: #EBA83A;
  --good: #5FB86B;
  --bad: #D9455F;
  --accent: #3E9C8B;                       /* this app's registry accent */

  --display: "Bricolage Grotesque", 'Segoe UI', system-ui, sans-serif;
  --read: "Newsreader", Georgia, 'Times New Roman', serif;
  --mono: "IBM Plex Mono", ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(16px, 4vw, 32px);
  --measure: 40rem;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--text); font-family: var(--read); font-size: 17px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }
button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
p { margin: 0 0 .75rem; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #1A1206; padding: .5rem 1rem; font-family: var(--mono); }
.skip:focus { left: 0; z-index: 10; }

/* ---------- the rail, same anatomy as every vertical ---------- */
.rail {
  display: flex; align-items: center; gap: 20px;
  padding: 12px var(--pad); border-bottom: 1px solid var(--line);
  background: var(--ground-2); flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; gap: 4px; }
.brand .bh { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; }
.brand .bh::after { content: ""; display: block; width: 28px; height: 1.5px; background: var(--gold); margin-top: 4px; }
.brand b { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 19px; color: var(--text); }
.brand span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; display: none; }

.tabs { display: flex; gap: 2px; }
.tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 13px; color: var(--text-dim); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* progress ruler, folded into the rail's lower edge */
.ruler { height: 3px; background: var(--surface); }
.ruler span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }

.meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); padding: 10px var(--pad) 0; max-width: var(--measure); margin: 0 auto; width: 100%; }

.main { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: .75rem var(--pad) 2.5rem; }
.main:focus { outline: none; }

.legal { font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-dim);
  border-top: 1px solid var(--line); padding: 1rem var(--pad) 2rem; max-width: var(--measure); margin: 0 auto; width: 100%; }
.legal a { color: var(--gold); text-decoration-color: rgba(235,168,58,.5); }

/* ---------- controls ---------- */
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
select { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .45rem .6rem; color: var(--text); }
.btn {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 4px;
  background: var(--gold); border: 1px solid var(--gold); color: #1A1206; font-weight: 600;
  transition: border-color .12s, background .12s, color .12s, filter .12s;
}
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: none; border-color: var(--line); color: var(--text); font-weight: 400; }
.btn.quiet:hover { border-color: var(--text-dim); background: var(--surface); filter: none; }
.btn.danger { background: none; border-color: #5A3038; color: #F0A0AE; font-weight: 400; }
.btn.danger:hover { background: rgba(217,69,95,.14); border-color: var(--bad); filter: none; }
.btn:focus-visible, select:focus-visible, textarea:focus-visible, .choice:focus-visible, .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- the term card: paper, like every other vertical ---------- */
.card {
  background: var(--paper); color: var(--paper-ink); border: 0; border-top: 4px solid var(--accent);
  border-radius: 8px; padding: 1.4rem 1.3rem; min-height: 11rem; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; justify-content: center; text-align: left;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.7);
}
.card .id { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: .5rem; }
.card .term { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.card .def { font-size: 1.02rem; line-height: 1.6; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--paper-line); }
.card .hint { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); margin-top: .9rem; }

/* ---------- say it ---------- */
textarea { width: 100%; min-height: 7rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--text); resize: vertical; }
textarea:focus { border-color: var(--gold); outline: none; }
.reference { background: var(--paper); color: var(--paper-ink); border-radius: 8px; border-left: 4px solid var(--good);
  padding: .9rem 1.1rem; margin-top: 1rem; }
.grade { display: flex; gap: .5rem; margin-top: 1rem; }
.grade .btn { flex: 1; }

/* ---------- scenarios ---------- */
.stem { font-size: 1.08rem; line-height: 1.6; margin-bottom: 1rem; }
.choices { display: grid; gap: .55rem; }
.choice {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
  padding: .75rem .95rem; display: flex; gap: .8rem; align-items: baseline; color: var(--text);
  transition: border-color .12s, background .12s;
}
.choice:hover:not(:disabled) { border-color: var(--text-dim); }
.choice .letter { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--gold); min-width: 1.2rem; }
.choice[data-state="right"] { border-color: var(--good); background: rgba(95,184,107,.13); }
.choice[data-state="right"] .letter { color: var(--good); }
.choice[data-state="wrong"] { border-color: var(--bad); background: rgba(217,69,95,.11); }
.choice[data-state="wrong"] .letter { color: var(--bad); }
.choice:disabled { cursor: default; }
.rationale { background: var(--paper); color: var(--paper-ink); border-radius: 8px; border-left: 4px solid var(--good);
  padding: .9rem 1.1rem; margin-top: 1rem; line-height: 1.6; }
.rationale.miss { border-left-color: var(--bad); }
.tally { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .8rem; }

/* ---------- progress ---------- */
.prog { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.prog li { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.prog .bar { grid-column: 1 / -1; height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.prog .bar span { display: block; height: 100%; background: var(--accent); }
.prog .label { font-size: .95rem; }
.prog .pct { font-family: var(--mono); font-size: .82rem; color: var(--text-dim); }
.empty { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) { .ruler span { transition: none; } }
@media (max-width: 560px) {
  .rail { gap: 10px; }
  .tabs { width: 100%; overflow-x: auto; }
  .tab { padding: 8px 10px; white-space: nowrap; }
}