/* AXIOM COMMAND cadet terminal.
   Register: grounded instrument panel — deep gunmetal, Forgeborn orange
   command accents, Archive white-gold reserved for learning moments.
   Signature: every number explains itself (tappable, dotted underline,
   formula popover). */

:root {
  --void: #0c1014;
  --panel: #151c23;
  --line: #2a3542;
  --text: #dce6ee;
  --dim: #8fa0ae;
  --forge: #e8722a;      /* command / action */
  --archive: #f2d98c;    /* learning moments only */
  --verify: #3fc2a7;     /* confirmed / quota secured */
  --warm: #e0704f;       /* shortfall / damage-warm */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 70% -10%, #16222d 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, #ffffff05 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, #ffffff05 39px 40px),
    var(--void);
}

.frame { max-width: 680px; margin: 0 auto; padding: 28px 18px 60px; }

.masthead { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.sigil {
  width: 42px; height: 42px; border: 2px solid var(--forge); rotate: 45deg;
  box-shadow: inset 0 0 0 5px var(--void), inset 0 0 0 7px var(--line);
}
h1 {
  margin: 0; font-size: 22px; letter-spacing: .38em;
  font-weight: 700; text-transform: uppercase;
}
.sub { margin: 2px 0 0; color: var(--dim); font-size: 12px; letter-spacing: .14em;
       text-transform: uppercase; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--forge);
  padding: 20px;
  margin-bottom: 18px;
}
.eyebrow {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim);
}
h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; }

.row { display: flex; gap: 10px; margin: 12px 0 0; flex-wrap: wrap; }

input[type=text], input[type=password] {
  flex: 1; min-width: 160px;
  background: var(--void); color: var(--text);
  border: 1px solid var(--line); padding: 10px 12px;
  font-family: var(--mono); font-size: 16px;
}
input:focus, button:focus-visible { outline: 2px solid var(--archive); outline-offset: 1px; }

button {
  font-family: var(--sans); font-size: 14px; letter-spacing: .06em;
  padding: 10px 16px; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
button.primary { background: var(--forge); border-color: var(--forge); color: #14100c; font-weight: 700; }
button.primary:hover { filter: brightness(1.1); }
button.ghost:hover { border-color: var(--forge); }
button.link { border: 0; color: var(--dim); text-decoration: underline; padding: 0; }

.msg { color: var(--warm); min-height: 1em; font-size: 14px; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 10px; margin-bottom: 6px; }
.roster button {
  padding: 18px 10px; font-size: 15px; border-color: var(--line);
  background: var(--void);
}
.roster button:hover { border-color: var(--archive); color: var(--archive); }

.prompt { font-size: 17px; line-height: 1.65; margin: 4px 0 6px; }
.prompt .num {
  font-family: var(--mono); color: var(--archive);
  border-bottom: 1px dotted var(--archive); cursor: help;
  padding: 0 1px;
}
.answer-row input { font-size: 20px; text-align: center; max-width: 180px; }

.hint {
  border-left: 3px solid var(--archive); background: #f2d98c12;
  padding: 10px 12px; font-size: 15px; line-height: 1.55; margin-top: 14px;
}

.verdict { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); }
.verdict-title { margin: 0 0 6px; font-family: var(--mono); font-size: 13px;
                 letter-spacing: .18em; text-transform: uppercase; }
.verdict.good { border-color: var(--verify); }
.verdict.good .verdict-title { color: var(--verify); }
.verdict.bad { border-color: var(--warm); }
.verdict.bad .verdict-title { color: var(--warm); }
.verdict p:last-child { margin: 0; font-size: 15px; line-height: 1.55; }

.mastery .bar-row { display: grid; grid-template-columns: 1fr auto; gap: 8px;
                    align-items: center; margin-bottom: 10px; }
.mastery .label { font-size: 13px; color: var(--dim); margin-bottom: 3px; }
.mastery .bar { height: 8px; background: var(--void); border: 1px solid var(--line); }
.mastery .fill { height: 100%; background: linear-gradient(90deg, var(--forge), var(--archive)); }
.state-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line);
  color: var(--dim);
}
.state-chip.fluent { color: var(--archive); border-color: var(--archive); }
.state-chip.practicing { color: var(--verify); border-color: var(--verify); }

.popover {
  position: fixed; z-index: 10; max-width: 260px;
  background: #0a0d10; border: 1px solid var(--archive);
  color: var(--archive); font-family: var(--mono); font-size: 13px;
  padding: 8px 10px; pointer-events: none;
}

.foot { display: flex; justify-content: space-between; margin-top: 30px;
        color: var(--dim); font-size: 12px; letter-spacing: .08em; }

@media (prefers-reduced-motion: no-preference) {
  .screen { animation: rise .25s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}

.ghost-link {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border: 1px solid var(--line); color: var(--archive);
  text-decoration: none; font-size: 14px; letter-spacing: .06em;
}
.ghost-link:hover { border-color: var(--archive); }