/* ============================================================
   Atlas study modes - shared by /quiz/ and /flashcards/
   Same design tokens as the landing page.
   ============================================================ */
:root{
  --void:#07090c; --panel:#0e1116; --panel-raised:#12161c;
  --line:#1e252b; --line-bright:#313a42;
  --signal:#ff4d2e; --phosphor:#35d67c; --amber:#ffb020; --danger:#ff4d2e;
  --text:#d7dbde; --text-dim:#7d8891; --text-faint:#4b545c;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --accent:var(--signal);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--void);
  background-image:radial-gradient(ellipse at 50% -10%,rgba(255,77,46,.06),transparent 62%);
  background-attachment:fixed; color:var(--text);
  margin:0; line-height:1.6; min-height:100vh;
}

/* ---------- chrome ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:rgba(7,9,12,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-logo{height:26px;width:auto;flex-shrink:0}
.topbar .title{
  font-family:var(--mono); font-size:.92rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; margin:0;
}
.topbar .title .sub{color:var(--text-faint); font-weight:400; letter-spacing:.03em}
.btn-ghost{
  font-family:var(--mono); background:transparent; border:1px solid var(--signal);
  color:var(--signal); font-size:.74rem; letter-spacing:.03em; padding:7px 12px;
  border-radius:2px; text-decoration:none; text-transform:uppercase; cursor:pointer;
  transition:background-color .15s ease,color .15s ease; white-space:nowrap;
}
.btn-ghost::before{content:"["} .btn-ghost::after{content:"]"}
.btn-ghost:hover{background:var(--signal); color:var(--void)}
.topbar .btn-ghost{margin-left:auto}

.wrap{max-width:820px; margin:0 auto; padding:38px 18px 70px}
.screen[hidden]{display:none !important}

h1.h{
  font-family:var(--mono); font-weight:700; font-size:clamp(1.7rem,6vw,2.6rem);
  letter-spacing:.13em; text-transform:uppercase; margin:0 0 8px;
}
h1.h .dot{color:var(--accent)}
.lede{color:var(--text-dim); margin:0 0 30px; max-width:60ch}

/* ---------- setup form ---------- */
fieldset{border:0; margin:0 0 26px; padding:0}
legend{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-faint); padding:0; margin-bottom:12px;
}
legend::before{content:"// "; color:var(--accent)}

.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.05em;
  background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
  padding:9px 15px; border-radius:2px; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.opt:hover{border-color:var(--line-bright); color:var(--text)}
.opt[aria-pressed="true"]{
  border-color:var(--tint,var(--accent)); color:var(--tint,var(--accent));
  background:var(--panel-raised);
}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.opt .n{color:var(--text-faint); font-size:.86em; margin-left:6px}

select,input[type=number]{
  font-family:var(--mono); font-size:.85rem;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:9px 12px; border-radius:2px; max-width:100%;
}
select:focus,input:focus{outline:2px solid var(--accent); outline-offset:1px}
input[type=number]{width:110px}

.avail{
  font-family:var(--mono); font-size:.76rem; color:var(--text-faint);
  margin:16px 0 24px; padding:11px 14px;
  border:1px solid var(--line); border-left:2px solid var(--accent);
  background:var(--panel); border-radius:2px;
}
.avail b{color:var(--text); font-weight:500}
.avail.warn{border-left-color:var(--amber); color:var(--amber)}

.btn-go{
  font-family:var(--mono); font-size:.9rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; background:var(--accent); border:1px solid var(--accent);
  color:var(--void); padding:14px 30px; border-radius:2px; cursor:pointer;
  transition:opacity .15s ease;
}
.btn-go:hover{opacity:.86}
.btn-go:disabled{opacity:.4; cursor:not-allowed}
.btn-go:focus-visible{outline:2px solid var(--text); outline-offset:3px}

/* ---------- run chrome ---------- */
.runbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--text-faint);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;
}
.runbar .spacer{margin-left:auto}
.runbar b{color:var(--text); font-weight:500}
.pill{
  border:1px solid var(--line); border-radius:2px; padding:3px 9px;
  color:var(--tint,var(--text-dim));
}
.bar{height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:26px}
.bar i{display:block; height:100%; background:var(--accent); width:0; transition:width .3s ease}

.card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:2px; padding:30px 26px;
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.3;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/13px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top left/2px 13px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top right/13px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) top right/2px 13px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left/13px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom left/2px 13px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/13px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) bottom right/2px 13px no-repeat;
}
.qmeta{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint); margin:0 0 12px;
}
.qtext{font-size:1.24rem; line-height:1.45; margin:0 0 24px; color:var(--text)}
.qtext .term{font-family:var(--mono); color:var(--accent); font-weight:600}

.answers{display:flex; flex-direction:column; gap:10px}
.ans{
  display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%;
  font-family:var(--sans); font-size:.94rem; line-height:1.5;
  background:var(--panel-raised); border:1px solid var(--line); color:var(--text-dim);
  padding:14px 16px; border-radius:2px; cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.ans:hover:not(:disabled){border-color:var(--line-bright); color:var(--text)}
.ans:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ans .key{
  font-family:var(--mono); font-size:.72rem; color:var(--text-faint);
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; flex-shrink:0; margin-top:1px;
}
.ans.correct{border-color:var(--phosphor); color:var(--text); background:rgba(53,214,124,.07)}
.ans.correct .key{border-color:var(--phosphor); color:var(--phosphor)}
.ans.wrong{border-color:var(--danger); color:var(--text); background:rgba(255,77,46,.07)}
.ans.wrong .key{border-color:var(--danger); color:var(--danger)}
.ans:disabled{cursor:default}

.verdict{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.verdict .v-ok{color:var(--phosphor); text-transform:uppercase; font-weight:600}
.verdict .v-no{color:var(--danger); text-transform:uppercase; font-weight:600}
.verdict a{color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--line)}
.verdict a:hover{color:var(--accent)}
.verdict .spacer{margin-left:auto}

/* ---------- results ---------- */
.score{
  font-family:var(--mono); font-size:clamp(3rem,14vw,5rem); font-weight:700;
  letter-spacing:.06em; margin:0; color:var(--accent); line-height:1
}
.score small{font-size:.32em; color:var(--text-faint); letter-spacing:.12em}
.breakdown{
  border:1px solid var(--line); border-radius:2px; background:var(--panel);
  margin:26px 0; font-family:var(--mono); font-size:.8rem;
}
.brow{display:flex; gap:12px; padding:11px 15px; align-items:center}
.brow + .brow{border-top:1px solid var(--line)}
.brow .lbl{color:var(--text-dim); flex:1; min-width:0}
.brow .val{color:var(--text); white-space:nowrap}
.missed{margin:26px 0 0}
.missed h2{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 12px;
}
.missed h2::before{content:"// "; color:var(--danger)}
.missed ul{list-style:none; padding:0; margin:0}
.missed li{
  border-left:2px solid var(--line); padding:8px 0 8px 14px; margin-bottom:10px;
  font-size:.9rem; color:var(--text-dim);
}
.missed li b{color:var(--text); font-weight:500; font-family:var(--mono); font-size:.92em}
.missed li a{color:var(--accent); text-decoration:none; font-size:.82em; font-family:var(--mono)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* ---------- flashcard ---------- */
.flip{
  perspective:1600px; margin-bottom:22px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.flip-inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.2,.2,1); min-height:290px;
}
.flip.flipped .flip-inner{transform:rotateX(180deg)}
.face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:2px;
  padding:32px 28px;
}
.face.back{transform:rotateX(180deg); background:var(--panel-raised)}
.face .lbl{
  position:absolute; top:14px; left:18px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-faint);
}
.face .lbl.b{color:var(--phosphor)}
.face .front-term{
  font-family:var(--mono); font-size:clamp(1.3rem,5vw,2rem); font-weight:600;
  color:var(--text); letter-spacing:.02em; margin:0; text-align:center;
}
.face .back-def{font-size:1.02rem; color:var(--text); margin:0}
.face .hint{
  position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-faint);
}
.face .src{
  position:absolute; bottom:13px; right:18px;
  font-family:var(--mono); font-size:.66rem; color:var(--text-faint); text-decoration:none;
}
.face .src:hover{color:var(--accent)}
.deck-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.deck-controls .spacer{margin-left:auto}
.btn-mark{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:11px 18px; border-radius:2px; cursor:pointer; transition:all .15s ease;
}
.btn-mark.good:hover,.btn-mark.good:focus-visible{border-color:var(--phosphor); color:var(--phosphor)}
.btn-mark.again:hover,.btn-mark.again:focus-visible{border-color:var(--amber); color:var(--amber)}
.btn-mark:disabled{opacity:.35; cursor:not-allowed}

.foot{
  border-top:1px solid var(--line); margin-top:44px; padding-top:18px;
  font-family:var(--mono); font-size:.72rem; color:var(--text-faint);
  display:flex; gap:8px 18px; flex-wrap:wrap; justify-content:space-between;
}
.foot a{color:var(--text-dim); text-decoration:none}
.foot a:hover{color:var(--accent)}

@media (max-width:560px){
  .wrap{padding:26px 14px 56px}
  .card{padding:22px 17px}
  .face{padding:26px 18px}
  .qtext{font-size:1.08rem}
  .ans{font-size:.9rem; padding:12px 13px}
  .topbar .title .sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .flip-inner{transition:none !important}
}

/* ============================================================
   Quiz / deck picker grid
   ============================================================ */
.pickhead{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:34px 0 14px;
}
.pickhead h2{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-faint); margin:0;
}
.pickhead h2::before{content:"// "; color:var(--accent)}
.pickhead .note{font-family:var(--mono); font-size:.7rem; color:var(--text-faint); margin-left:auto}

.quizgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:11px;
}
.qcard{
  position:relative; display:flex; flex-direction:column; gap:7px;
  text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:2px; padding:15px 15px 13px; cursor:pointer; color:inherit;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.qcard:hover{border-color:var(--line-bright); background:var(--panel-raised); transform:translateY(-2px)}
.qcard:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.qcard .nm{
  font-family:var(--mono); font-size:.84rem; font-weight:600; color:var(--text);
  line-height:1.3; letter-spacing:.02em;
}
.qcard .sub{
  font-family:var(--mono); font-size:.68rem; color:var(--text-faint);
  letter-spacing:.05em; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.qcard .best{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  border:1px solid var(--line); border-radius:2px; padding:2px 6px;
  color:var(--phosphor); white-space:nowrap;
}
.qcard .best.mid{color:var(--amber)}
.qcard .best.low{color:var(--signal)}
.qcard.mixed{border-color:var(--accent); background:var(--panel-raised)}
.qcard.mixed .nm{color:var(--accent)}
.qcard[disabled]{opacity:.4; cursor:not-allowed; transform:none}

.spark{display:flex; gap:2px; align-items:flex-end; height:12px}
.spark i{display:block; width:4px; border-radius:1px; background:var(--line-bright)}

.histline{
  font-family:var(--mono); font-size:.72rem; color:var(--text-faint);
  margin:10px 0 0; display:flex; gap:14px; flex-wrap:wrap;
}
.histline b{color:var(--text); font-weight:500}
.histline .clear{
  margin-left:auto; background:none; border:0; color:var(--text-faint);
  font-family:var(--mono); font-size:.7rem; cursor:pointer; text-decoration:underline;
}
.histline .clear:hover{color:var(--signal)}

/* grade buttons for flashcards */
.grades{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.grade{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:12px 6px; border-radius:2px; cursor:pointer; transition:all .15s ease;
  display:flex; flex-direction:column; gap:3px; align-items:center;
}
.grade .iv{font-size:.62rem; color:var(--text-faint); letter-spacing:.02em}
.grade:disabled{opacity:.3; cursor:not-allowed}
.grade[data-g="1"]:hover:not(:disabled),.grade[data-g="1"]:focus-visible{border-color:var(--signal); color:var(--signal)}
.grade[data-g="3"]:hover:not(:disabled),.grade[data-g="3"]:focus-visible{border-color:var(--amber); color:var(--amber)}
.grade[data-g="4"]:hover:not(:disabled),.grade[data-g="4"]:focus-visible{border-color:var(--phosphor); color:var(--phosphor)}
.grade[data-g="5"]:hover:not(:disabled),.grade[data-g="5"]:focus-visible{border-color:#5ad6ff; color:#5ad6ff}

@media (max-width:560px){
  .quizgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px}
  .grades{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   Mobile hardening
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
.wrap { width: 100%; }

/* long single-word terms must not push the layout sideways */
.front-term, .qtext, .qcard .nm, .missed li b {
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
/* a long definition must scroll inside the card, never spill out of it */
.face { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.face.back { justify-content: flex-start; padding-top: 42px; }
.back-def { max-height: 100%; }

/* tap targets: keep everything at or above the 44px guidance */
.opt, .grade, .btn-mark, .btn-ghost, .qcard { min-height: 44px; }
.ans { min-height: 48px; }
.opt { padding: 11px 15px; }

/* the flip card needs room on a phone but must not dominate a tall screen */
.flip-inner { min-height: clamp(240px, 42vh, 320px); }

@media (max-width: 560px) {
  .runbar { font-size: .68rem; gap: 9px }
  .runbar .pill { padding: 3px 7px }
  .grades { gap: 7px }
  .grade { padding: 13px 4px; font-size: .72rem }
  .actions { gap: 9px }
  .actions .btn-go, .actions .btn-ghost { flex: 1 1 100%; text-align: center }
  .pickhead .note { margin-left: 0; width: 100% }
  .histline { font-size: .68rem; gap: 10px }
  .histline .clear { margin-left: 0 }
  .score { font-size: clamp(2.6rem, 16vw, 4rem) }
  .breakdown { font-size: .74rem }
  .brow { padding: 10px 12px }
  .missed li { font-size: .85rem }
  .face .src { position: static; display: block; margin-top: 14px }
}

/* very small phones */
@media (max-width: 360px) {
  .quizgrid { grid-template-columns: 1fr }
  .grades { grid-template-columns: repeat(2, 1fr) }
}