/* Same look as zahid-vocabulary: white page, ink outlines, bright fills, chunky pill buttons. Light only. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --soft: #f4f2ff;
  --ink: #1d1b3a;
  --muted: #5d5a7a;
  --line: #e4e1f2;
  --line-strong: #8a86ad;
  --primary: #6a2cf5;
  --primary-soft: #efe8ff;

  --pink: #ff5fa8;
  --pink-light: #ff85bd;
  --pink-soft: #ffe8f3;
  --yellow: #ffd23f;
  --yellow-soft: #fffae0;
  --blue: #3bb2ff;
  --blue-soft: #e3f4ff;
  --green: #6fdc5a;
  --orange: #ff8a3d;
  --lilac: #c9a8ff;
  --teal: #2ee6c5;

  --correct: #0f7a35;
  --correct-soft: #e6fadf;
  --notyet: #a84b06;
  --notyet-soft: #fff0e0;
  --danger: #c8102e;
  --focus: #2458d6;

  --accent: var(--yellow);
  --radius: 14px;
  --edge: 3px solid var(--ink);
  --shadow: 0 1px 2px rgba(29, 27, 58, 0.06), 0 4px 16px rgba(29, 27, 58, 0.06);
  --font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.5; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 80px; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 1.75rem; font-weight: 800; margin-top: 8px; }
h2 { font-size: 1.25rem; margin: 28px 0 10px; }
.sub, .muted { color: var(--muted); }
ul { padding-left: 22px; }

/* ---------- Header ---------- */
.top { background: var(--surface); border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 60px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.brand { font-size: 1.4rem; font-weight: 800; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); border: 2.5px solid var(--ink); }
nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-weight: 700; }

/* ---------- Buttons: ink outline and a solid shadow the button presses into ---------- */
button, .btn {
  --lift: 3px;
  font: inherit; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.4em 1.1em; border-radius: 999px;
  border: 2.5px solid var(--ink); background: var(--pink);
  box-shadow: 0 var(--lift) 0 var(--ink); cursor: pointer; text-decoration: none;
  transition: background 120ms, transform 80ms, box-shadow 80ms;
}
@media (hover: hover) { button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); background: var(--pink-light); } }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
button:disabled { opacity: 0.5; cursor: default; }
button.ghost, label.ghost { --lift: 2px; background: var(--surface); min-height: 36px; padding: 0.25em 0.8em; font-size: 0.9rem; border-width: 2px; }
@media (hover: hover) { button.ghost:hover:not(:disabled) { background: var(--soft); } }
button.danger { background: var(--danger); color: #fff; }
label.ghost { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; font-weight: 700; }
button.exit { background: var(--yellow); }

/* ---------- Cards, chapters ---------- */
.card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }
.question-card { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--accent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
a.chap { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 4px 4px 0 var(--accent); transition: transform 80ms, box-shadow 80ms; }
a.chap:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--accent); }
a.chap:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--accent); }
a.chap.soon { opacity: .5; pointer-events: none; }
.chap b { display: inline-block; margin-bottom: 4px; padding: 0.05em 0.7em; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--accent); font-weight: 800; font-size: 0.95rem; }
.chap .t { display: block; font-weight: 800; font-size: 1.1rem; margin: 2px 0 4px; }
.track { height: 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--surface); overflow: hidden; margin-top: 8px; }
.fill { height: 100%; background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--blue)); border-right: 2.5px solid var(--ink); }
.fill[style*="width:0%"], .fill[style*="width: 0%"] { border-right: 0; }

/* ---------- Question ---------- */
.qhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 0.95rem; margin-bottom: 8px; }
.qid { font-weight: 800; color: var(--ink); padding: 0.1em 0.8em; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--accent); }
.q { font-size: 1.15rem; margin: 10px 0 16px; }
.q.small { font-size: 1rem; }
.q img, .figure { max-width: 100%; height: auto; display: block; margin: 10px 0; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
input[type=text], input[type=password], textarea { font: inherit; border: 2px solid var(--line-strong); border-radius: 12px; padding: 0.5em 0.7em; background: var(--surface); color: var(--ink); min-width: 0; }
input[type=text], input[type=password] { flex: 1 1 180px; }
input:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--primary-soft); }
.msg { margin-top: 12px; padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 700; }
.msg.ok { background: var(--correct-soft); color: var(--correct); }
.msg.bad { background: var(--notyet-soft); color: var(--notyet); }
.msg.warn { background: var(--yellow-soft); color: var(--ink); }
.nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.choices { display: grid; gap: 10px; }
button.choice { justify-content: flex-start; text-align: left; border-radius: 16px; background: var(--surface); line-height: 1.45; padding: 0.6em 1em; }
@media (hover: hover) { button.choice:hover:not(:disabled) { background: var(--soft); } }

/* ---------- Working (typed or photo) ---------- */
.work { margin-top: 16px; background: var(--soft); border: 2px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.work summary, .brief-q summary { cursor: pointer; font-weight: 800; }
.work textarea { width: 100%; margin-top: 10px; }
.workitem { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--primary); background: var(--soft); border-radius: 6px; }
.wtext { white-space: pre-wrap; }

/* ---------- Parent ---------- */
.parentbox { margin-top: 16px; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 18px; background: var(--yellow-soft); }
.parentbox h3 { margin: 0 0 6px; font-size: 1rem; color: var(--notyet); }
.parentbox p { margin: 6px 0; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; align-items: center; }
.tabs { display: flex; gap: 4px; background: var(--soft); border-radius: 999px; padding: 3px; overflow-x: auto; margin: 12px 0 18px; scrollbar-width: thin; }
.tab { flex: 0 0 auto; min-height: 36px; padding: 0.3rem 0.9rem; border-radius: 999px; border: 0; background: transparent; box-shadow: none; color: var(--muted); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.tab:hover { background: var(--primary-soft); transform: none; box-shadow: none; }
.tab.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); outline: 2px solid var(--ink); }
.chapter-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); }

/* ---------- Chips (same idea as the vocabulary app's step chips) ---------- */
.badge { display: inline-block; padding: 0.1em 0.7em; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.b-first { background: var(--green); color: var(--ink); }
.b-retry { background: var(--yellow); color: var(--ink); }
.b-stuck { background: var(--orange); color: var(--ink); }
.b-new { background: var(--soft); color: var(--muted); }
.stats .badge { font-size: 0.9rem; padding: 0.25em 0.9em; border: 2px solid var(--ink); }
.dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dot { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); background: var(--surface); }
.dot.first { background: var(--green); } .dot.retry { background: var(--yellow); } .dot.stuck { background: var(--orange); }

footer { margin-top: 32px; color: var(--muted); font-size: .9rem; }
a.dot { display: block; }
[hidden] { display: none !important; }

/* Touch: every tap target at least 44 px tall (Apple's and Google's minimum for a finger). */
button.ghost, label.ghost, .tab { min-height: 44px; }
summary { min-height: 44px; display: flex; align-items: center; }
@media (pointer: coarse) {
  .dots { gap: 8px; }
  .dot { width: 24px; height: 24px; border-radius: 6px; }
  table a { display: inline-block; padding: 8px 4px; }
}