/* Flashcards — standalone site.
   Design tokens deliberately mirror /activities/assets/exercise.css so the two
   sections read as one product (Nunito / indigo / rounded, dark mode on
   html[data-theme="dark"] driven by the shared 'ax-theme' localStorage key). */

:root{
  --ink:#2a2440; --paper:#faf7f2; --card:#ffffff;
  --indigo:#4338ca; --rose:#e11d48; --amber:#d98a06; --teal:#0d9488;
  --muted:#8a83a0; --line:#ece7f5;
  --soft:#f3f0ff; --field:#faf9ff;
  --shadow:0 1px 2px rgba(42,36,64,.06), 0 8px 24px rgba(42,36,64,.07);
  --shadow-lg:0 12px 40px rgba(42,36,64,.18);
  --r:18px;
}
html[data-theme="dark"]{
  --ink:#e9e6f5; --paper:#16141f; --card:#211d2e;
  --muted:#9a92b5; --line:#33304a;
  --soft:#2a2540; --field:#1c1930;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  min-height:100vh;line-height:1.5;
  padding:clamp(14px,2vw,28px) clamp(16px,4vw,48px) clamp(28px,4vw,60px);
}
.wrap{max-width:820px;margin:0 auto;width:100%}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}

.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo)}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.82rem;color:var(--indigo)}
.themebtn{
  margin-left:auto;font-family:inherit;font-size:1rem;line-height:1;cursor:pointer;
  border:2px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 11px;
}
.themebtn:hover{border-color:var(--indigo)}

h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;line-height:1.08;letter-spacing:-.02em;margin:.1em 0 .2em}
.sub{color:var(--muted);font-weight:700;margin-bottom:18px}
.intro{color:var(--muted);font-weight:600;margin-bottom:18px}

.pill{font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--indigo);display:inline-flex;align-items:center;gap:5px}
.pill.lvl{background:#e7f6f3;color:var(--teal)}
.pill.lang{background:#efeafc;color:var(--indigo)}
html[data-theme="dark"] .pill.lvl{background:#123c37;color:#5eddc9}
html[data-theme="dark"] .pill.lang{background:#2c2550;color:#b3a6ff}
.metarow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0 16px}

/* ── deck picker ─────────────────────────────────────────────────────── */
.filters{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.filtergroup{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-weight:800;font-size:.82rem;padding:7px 14px;border-radius:999px;
  border:2px solid var(--line);background:var(--card);color:var(--muted);
}
.chip:hover{border-color:var(--indigo);color:var(--indigo);text-decoration:none}
.chip.active{border-color:var(--indigo);color:var(--indigo);background:var(--soft)}

.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.deck{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  color:inherit;transition:transform .16s,box-shadow .16s,border-color .16s;
}
.deck:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--indigo);text-decoration:none}
.deck-top{display:flex;gap:6px;flex-wrap:wrap}
.deck h2{font-size:1.15rem;font-weight:900;letter-spacing:-.01em}
.deck-blurb{color:var(--muted);font-size:.9rem;font-weight:600}
.deck-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:6px}
.count{font-size:.8rem;font-weight:800;color:var(--muted)}
.go{font-size:.82rem;font-weight:900;color:var(--indigo)}

.empty{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow);text-align:center;color:var(--muted);font-weight:600;
}
.empty p+p{margin-top:8px}

/* ── study stage ─────────────────────────────────────────────────────── */
.stage{margin-top:6px}

.progressbar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:10px}
.progressfill{height:100%;width:0;background:var(--indigo);border-radius:999px;transition:width .25s ease}

.statusrow{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.82rem;color:var(--muted);margin-bottom:14px}
.tally{display:flex;gap:12px}
.tally-known{color:var(--teal)}
.tally-learning{color:var(--amber)}

/* The card itself is a <button>; strip the UA chrome. */
.card{
  position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;
  font-family:inherit;color:inherit;text-align:center;
  height:clamp(230px,42vw,300px);perspective:1200px;
}
.card .face{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
/* the two faces live in a flipping plane */
.card .front{transform:rotateY(0deg)}
.card .back{transform:rotateY(180deg)}
.card .face{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card.flipped .front{transform:rotateY(-180deg)}
.card.flipped .back{transform:rotateY(0deg)}

.word{font-size:clamp(1.7rem,6vw,2.6rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.hint{font-size:.76rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.example{font-size:1rem;font-weight:600;color:var(--muted);font-style:italic;overflow-wrap:anywhere}

.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.controls.mark{margin-top:10px}
.controls.tools{margin-top:16px}
.btn{
  font-family:inherit;font-weight:800;font-size:.9rem;cursor:pointer;
  padding:11px 18px;border-radius:999px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);transition:border-color .15s,background .15s,transform .1s;
}
.btn:hover{border-color:var(--indigo)}
.btn:active{transform:translateY(1px)}
.btn.ghost{color:var(--muted)}
.btn.known{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.known:hover{filter:brightness(1.07)}
.btn.learning{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.learning:hover{filter:brightness(1.07)}
.btn.tiny{font-size:.78rem;padding:8px 13px}
.btn.tiny.active{border-color:var(--indigo);color:var(--indigo);background:var(--soft)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.done{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);text-align:center;margin-top:16px;
}
.done h2{font-size:1.4rem;font-weight:900;margin-bottom:6px}
.done p{color:var(--muted);font-weight:700}

.kbd{margin-top:18px;text-align:center;font-size:.76rem;font-weight:700;color:var(--muted)}
kbd{
  font-family:inherit;font-size:.72rem;font-weight:800;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:1px 6px;background:var(--field);
}
/* Touch devices have no keyboard — don't advertise shortcuts. */
@media (hover:none){ .kbd{display:none} }

.foot{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-top:36px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.84rem;font-weight:800;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  .card .face{transition:none}
  .progressfill{transition:none}
  .deck{transition:none}
}