/* Cards: the children's flashcards. One screen, card in the middle, big answer buttons in thumb reach. */
:root { --sky:#13262e; --stone:#d9a35b; --olive:#8fb05a; --ink:#f3ead8; --ink-dim:#b7ad98; --panel:#0d1b21; --berry:#e3877a;
  --blue:#86b8f2; --line:#2c4650; --cardbg:#1b323b; --cardink:#f3ead8; --carddim:#b7ad98; --chipbg:rgba(255,255,255,.04);
  /* button fills stay the same in both themes (dark text on them); the colors above are for text and lines */
  --fill-show:#d9a35b; --fill-again:#e3877a; --fill-good:#8fb05a;
  --display:"Alegreya SC", Georgia, serif; --body:"Alegreya Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color-scheme:dark; }
/* Follows the device: dark (above) when it's in dark mode, this light palette otherwise (same as the landing page and maps). */
@media (prefers-color-scheme: light) {
  :root { --sky:#f6f5f1; --panel:#fffefb; --ink:#242b31; --ink-dim:#5c666e; --line:#d8d5cb; --cardbg:#fffefb; --cardink:#242b31;
    --carddim:#5c666e; --chipbg:rgba(0,0,0,.03); --stone:#9a6a22; --olive:#2c6e49; --berry:#a3392b; --blue:#2f62a8; color-scheme:light; }
}
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
[hidden] { display:none !important; }
body { margin:0; background:var(--sky); color:var(--ink); font-family:var(--body); font-size:18px; }
html, body, *, *::before, *::after { touch-action:manipulation; }
button { font:inherit; color:var(--ink); cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.wrap { box-sizing:border-box; height:100vh; height:100dvh; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom)); }
.hud { display:flex; align-items:center; gap:12px; }
.spacer { flex:1; }
.chip { padding:6px 14px; border-radius:999px; border:2px solid var(--line); background:var(--chipbg); }
.chip.on { border-color:var(--stone); background:rgba(217,163,91,.22); }
.whoBtn { font-weight:700; }
.whoBtn.demo { color:var(--berry); border-color:var(--berry); }   /* Demo on: answers not saved */
.chip.demo.on { border-color:var(--berry); background:rgba(227,135,122,.25); font-weight:700; }
.counts { display:flex; gap:12px; font-variant-numeric:tabular-nums; font-weight:700; font-size:1.15rem; }
.cnew { color:var(--blue); } .clearn { color:var(--berry); } .cdue { color:var(--olive); }
.counts .now { text-decoration:underline; text-underline-offset:4px; }
.sync { font-size:.85rem; color:var(--ink-dim); }
.sync.wait { color:var(--stone); }
.hud .chip, .sync { white-space:nowrap; }
#undoBtn { padding:4px 12px; }
#undoBtn:disabled { opacity:.35; cursor:default; }
.hud { min-width:0; } .counts { gap:8px; }
.menu { border:2px solid var(--line); border-radius:10px; background:var(--panel); padding:10px 14px; }
.menu .row, .kids { display:flex; gap:8px; flex-wrap:wrap; }
.mlabel { margin:0 0 6px; color:var(--ink-dim); font-size:.9rem; }
.menu .mlabel + .kids { margin-bottom:10px; }
.cats .chip { padding:5px 10px; font-size:.95rem; }
.cats .n { font-weight:700; font-variant-numeric:tabular-nums; margin-left:6px; }
.cats .n.cdue { color:var(--olive); } .cats .n.cnew { color:var(--blue); } .cats .n.clearn { color:var(--berry); }
.chip.go { background:var(--stone); border-color:var(--stone); color:var(--panel); font-weight:700; }
.panel .chip { font-size:1.05rem; padding:10px 18px; }
.chip.small { padding:1px 10px; font-size:.8rem; margin-left:6px; }
.menu { max-height:70vh; overflow:auto; }
.note { color:var(--ink-dim); font-size:.9rem; line-height:1.35; }
.esv { color:var(--ink-dim); font-size:.75rem; margin:4px 0 0; }
main { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.deckline { display:flex; justify-content:space-between; color:var(--ink-dim); font-size:.9rem; }
#cardTag { font-weight:700; }
.panel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.panel h1 { margin:0; font-family:var(--display); color:var(--stone); font-size:1.8rem; }
.big3 button { font-size:1.4rem; padding:14px 26px; }

/* The card: the Anki cards' layout (build.py CSS) in the page's theme. */
.card { flex:1; min-height:0; overflow:auto; border-radius:14px; background:var(--cardbg); color:var(--cardink); padding:18px 16px;
  font-family:-apple-system, "Helvetica Neue", Arial, sans-serif; font-size:22px; line-height:1.4; text-align:center; border:2px solid var(--line); }
.card hr { border:0; border-top:2px solid var(--line); margin:16px 0; }
.card .translit { font-size:34px; font-weight:600; }
.card .orig { font-size:30px; font-family:"SBL Greek", "SBL Hebrew", "Times New Roman", serif; margin:4px 0 10px; }
.card .big { font-size:30px; font-weight:600; margin-bottom:8px; }
.card .verse { font-style:italic; margin:8px auto; max-width:640px; }
.card .dim { color:var(--carddim); font-size:17px; margin-top:6px; }
.card .theme { color:var(--stone); font-size:.8em; font-weight:normal; font-style:normal; }
.card .tag { background:rgba(134,184,242,.18); color:var(--blue); border-radius:4px; padding:1px 6px; font-size:15px; }
.card ul { text-align:left; display:inline-block; margin:6px 0; }
.face { overflow-wrap:anywhere; }

.answer { flex:none; }
.grades { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
button.big { width:100%; min-height:64px; border-radius:14px; border:0; font-size:1.25rem; font-weight:700; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; color:#10181b; }
button.big small { font-size:.85rem; font-weight:600; opacity:.75; }
button.big:active { transform:translateY(2px); filter:brightness(.92); }
.show { background:var(--fill-show); }
.again { background:var(--fill-again); } .good { background:var(--fill-good); }
@media (max-height:560px) { .card { font-size:19px; } button.big { min-height:52px; } }