/* One stylesheet for all four pages. Mobile first - most of the use will be a
   kid on a phone - so everything is a single column with thumb-sized targets,
   and the wider layouts are the exception at the bottom.

   Look and feel: bold, rounded, high-contrast - the kind of confident,
   playful-but-not-childish system apps like Duolingo use, instead of the
   generic pale-card "AI demo" look. Bigger type, punchier section colors,
   pressable buttons (a solid color "shadow" along the bottom edge that the
   button sinks into on tap), and a title font with real personality. */

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700;800&family=Baloo+2:wght@600;700;800&display=swap");

:root {
  --bg: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f2f5fb;
  --text: #1c2536;
  --text-dim: #6b7690;
  --line: #dde3f0;
  --accent: #3b82f6;
  --accent-dark: #2563eb;
  --good: #16a34a;
  --good-dark: #15803d;
  --good-bg: #e0f9e9;
  --bad: #ef4444;
  --bad-dark: #dc2626;
  --bad-bg: #fee2e2;
  --gold: #f5a524;
  --shadow: 0 1px 2px rgba(28, 37, 54, .05), 0 10px 28px rgba(28, 37, 54, .08);

  --vocab: #3b82f6;
  --vocab-dark: #1d4ed8;
  --spelling: #06b6d4;
  --spelling-dark: #0e7490;
  --grammar: #a855f7;
  --grammar-dark: #7e22ce;
  --listening: #f97316;
  --listening-dark: #c2410c;
  --reading: #22c55e;
  --reading-dark: #15803d;

  --radius: 20px;
  --radius-sm: 12px;
  --title: "Baloo 2", "Rubik", "Assistant", "Segoe UI", Arial, sans-serif;
  --hebrew: "Rubik", "Assistant", "Gisha", "Segoe UI", Arial, sans-serif;
  /* Verdana for English on purpose: wide, well-differentiated letterforms,
     the usual pick for language learning material. */
  --latin: Verdana, Calibri, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1220;
    --surface: #161d2e;
    --surface-2: #1e2740;
    --text: #eef2fb;
    --text-dim: #94a1c2;
    --line: #2b3554;
    --good-bg: #103824;
    --bad-bg: #3f1a1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--hebrew);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  direction: rtl;
  -webkit-text-size-adjust: 100%;
}

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--latin);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 56px;
}
.wrap.wide { max-width: 1160px; }

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-inner.wide { max-width: 1160px; }

.brand {
  font-family: var(--title);
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand small { color: var(--text-dim); font-weight: 500; font-size: 14px; }
.spacer { flex: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.chip.points { color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  background: var(--surface-2);
  border: 3px solid var(--line);
  flex: none;
}

/* ---------- progress ---------- */
.progress {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.progress > div {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card.accent { border-top: 6px solid var(--accent); }

h1 { font-family: var(--title); font-size: 25px; font-weight: 700; margin: 4px 0 14px; }
h2 { font-family: var(--title); font-size: 20px; font-weight: 700; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--text-dim); font-weight: 700; }
p { margin: 0 0 10px; }
.muted { color: var(--text-dim); font-size: 15px; }
.center { text-align: center; }

/* ---------- buttons ----------
   Duolingo-style pressable buttons: a solid darker strip along the bottom
   edge (via border-bottom) that the button visually sinks into on tap. */
button {
  font: inherit;
  font-family: var(--hebrew);
  cursor: pointer;
}

.btn {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--line);
  border-bottom: 4px solid var(--line);
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--accent); }
}
.btn:disabled { opacity: .6; cursor: default; }
.btn.correct { background: var(--good-bg); border-color: var(--good); color: var(--good-dark); }
.btn.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad-dark); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
.btn-primary:disabled { background: var(--accent); opacity: .55; }
.btn-small {
  width: auto;
  min-height: 42px;
  padding: 9px 18px;
  font-size: 15px;
  border-radius: 12px;
  border-bottom-width: 3px;
  margin: 0;
}
.btn-ghost { background: transparent; border-bottom-width: 2px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- forms ---------- */
input, select, textarea {
  font: inherit;
  font-family: var(--hebrew);
  font-weight: 600;
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input.answer {
  font-family: var(--latin);
  direction: ltr;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .5px;
}
label { display: block; font-size: 14px; font-weight: 700; color: var(--text-dim); margin: 0 0 6px; }
.field { margin-bottom: 12px; }

/* ---------- question layout ---------- */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  margin-bottom: 16px;
}
.tag-vocab { background: var(--vocab); }
.tag-spelling { background: var(--spelling); }
.tag-grammar { background: var(--grammar); }
.tag-listening { background: var(--listening); }
.tag-reading { background: var(--reading); }

.prompt {
  font-family: var(--title);
  font-size: 27px;
  font-weight: 700;
  text-align: center;
  margin: 6px 0 4px;
  word-break: break-word;
}
.prompt.ltr { font-size: 31px; font-family: var(--latin); font-weight: 700; }
.prompt .blank { color: var(--grammar); letter-spacing: 2px; }

.hint {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.tip .tip-icon { flex: none; font-size: 16px; }

.speak {
  border: none;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  min-height: 46px;
}
.speak:active { transform: scale(.96); }

.passage {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-family: var(--latin);
  direction: ltr;
  text-align: left;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 42vh;
  overflow-y: auto;
}

.feedback {
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: 17px;
}
.feedback.ok { background: var(--good-bg); color: var(--good-dark); }
.feedback.no { background: var(--bad-bg); color: var(--bad-dark); }

.rulebox {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rulebox .rule { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 15px; }
.rulebox .en {
  font-family: var(--latin);
  direction: ltr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 14px;
  white-space: nowrap;
}

/* ---------- stats and tables ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat .value { font-family: var(--title); font-size: 26px; font-weight: 700; }
.stat .label { font-size: 13px; font-weight: 700; color: var(--text-dim); }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--text-dim); font-size: 13px; font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 800;
}
.pill.good { background: var(--good-bg); color: var(--good-dark); }
.pill.warn { background: #fef3c7; color: #b45309; }
.pill.bad { background: var(--bad-bg); color: var(--bad-dark); }

.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 700;
}
.badge.locked { opacity: .35; }

.board { margin-bottom: 14px; }
.board ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.board li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.board li:last-child { border-bottom: none; }
.board .rank { width: 26px; color: var(--text-dim); font-weight: 800; }
.board .who { flex: 1; font-weight: 700; }
.board .val { font-weight: 800; }

.grid2 { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.bar {
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 10px;
}
.bar > div { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.22, 1, .36, 1); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.spark div {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

/* ---------- points breakdown (the challenge-result screen) ---------- */
.point-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.point-line:last-child { border-bottom: none; }
.point-icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 17px;
  background: var(--surface-2);
}
.point-reason { flex: 1; font-weight: 600; }
.point-delta { font-family: var(--title); font-weight: 700; color: var(--good-dark); }

.grade-badge {
  width: 132px; height: 132px;
  margin: 8px auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--title);
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .3);
}

/* ---------- calendar / activity heatmap ---------- */
.heatmap { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heatmap-col { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell {
  width: 13px; height: 13px;
  border-radius: 4px;
  background: var(--surface-2);
}
.heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.heatmap-legend .heatmap-cell { width: 11px; height: 11px; }

.hidden { display: none !important; }
.toast {
  position: fixed;
  bottom: 18px;
  right: 16px;
  left: 16px;
  max-width: 420px;
  margin: 0 auto;
  background: var(--text);
  color: var(--bg);
  border-radius: 14px;
  padding: 13px 18px;
  text-align: center;
  font-weight: 700;
  z-index: 50;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}

/* ---------- colour-coded sentence demos ----------
   Three stacked lines: the Hebrew meaning, the English sentence, and the
   name of each part directly beneath the word it belongs to. Each part is
   its own column so the label lines up under its word exactly. */
.demo {
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 16px 12px 12px;
  margin: 12px 0;
  text-align: center;
}
.demo-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.demo-he-line {
  direction: rtl;
  font-family: var(--hebrew);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.demo-en-line {
  direction: ltr;
  font-family: var(--latin);
  font-size: 21px;
  font-weight: 700;
}
.demo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.demo-col.no-gap + .demo-col .demo-part,
.demo-col:has(+ .demo-col.no-gap) .demo-part { border-radius: 9px 0 0 9px; }

.demo-part {
  padding: 3px 10px;
  border-radius: 9px;
  white-space: nowrap;
}
.demo-label {
  font-family: var(--hebrew);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  min-height: 16px;
}
.demo-label:empty { visibility: hidden; }

.demo-part.subject, .demo-label.subject { background: #dbeafe; color: #1d4ed8; }
.demo-part.aux,     .demo-label.aux     { background: #f3e8ff; color: #7e22ce; }
.demo-part.verb,    .demo-label.verb    { background: #dcfce7; color: #15803d; }
.demo-part.ending,  .demo-label.ending  { background: #fef3c7; color: #b45309; }
.demo-part.time,    .demo-label.time    { background: #ffe4e6; color: #be123c; }
.demo-part.neg,     .demo-label.neg     { background: #fee2e2; color: #b91c1c; }
.demo-part.wh,      .demo-label.wh      { background: #cffafe; color: #0e7490; }
.demo-part.link,    .demo-label.link    { background: #ede9fe; color: #6d28d9; }
.demo-part.det,     .demo-label.det     { background: #ffedd5; color: #c2410c; }
.demo-part.rest { background: var(--surface-2); color: var(--text-dim); }
.demo-label.rest { background: transparent; }

@media (prefers-color-scheme: dark) {
  .demo-part.subject, .demo-label.subject { background: #1e3a8a; color: #bfdbfe; }
  .demo-part.aux,     .demo-label.aux     { background: #4c1d95; color: #e9d5ff; }
  .demo-part.verb,    .demo-label.verb    { background: #14532d; color: #bbf7d0; }
  .demo-part.ending,  .demo-label.ending  { background: #713f12; color: #fde68a; }
  .demo-part.time,    .demo-label.time    { background: #881337; color: #fecdd3; }
  .demo-part.neg,     .demo-label.neg     { background: #7f1d1d; color: #fecaca; }
  .demo-part.wh,      .demo-label.wh      { background: #164e63; color: #a5f3fc; }
  .demo-part.link,    .demo-label.link    { background: #4c1d95; color: #ddd6fe; }
  .demo-part.det,     .demo-label.det     { background: #7c2d12; color: #fed7aa; }
}

/* Bilingual heading: Hebrew title with the English name beside it. */
.title-pair {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.title-pair .he { font-family: var(--title); font-weight: 700; font-size: 18px; }
.title-pair .en {
  font-family: var(--latin);
  direction: ltr;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 10px;
}

/* The unseen passage needs to read as a distinct block of text, not as
   background colour behind the question. */
.passage {
  border: 2px solid var(--line);
  border-right: 6px solid var(--reading);
  box-shadow: inset 0 0 0 1px var(--surface);
}
.passage-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--reading);
  margin-bottom: 6px;
}

/* Lesson tables are content, not data grids - they are small and belong on
   screen in one piece. Letting the cells wrap beats a horizontal scrollbar
   inside a page the learner is reading. */
.card .tablewrap table td,
.card .tablewrap table th {
  white-space: normal;
  padding: 10px 8px;
  vertical-align: top;
}
.card .tablewrap table td .ltr { display: inline-block; }


/* ---------------------------------------------------------------------------
   Learning-track additions: the breadcrumb that says which unit and lesson a
   question belongs to, standalone English lines, and the word tiles.
--------------------------------------------------------------------------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 4px; font-size: 13px; color: var(--muted);
}
.crumb { white-space: nowrap; }
.crumb-topic { font-weight: 700; color: var(--grammar); }
.crumb-sep { opacity: .5; }

/* An English sentence never shares a line with Hebrew: mixing the two
   directions on one line is what made these unreadable. */
.en-line {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--soft); border-inline-start: 4px solid var(--grammar);
}
.en-line-en {
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 17px; font-weight: 700; line-height: 1.6;
}
.en-line-he { margin-top: 6px; font-size: 14px; color: var(--muted); }

.instruction {
  margin: 12px 0 4px; font-size: 16px; font-weight: 700;
}

.tile-line {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 56px; padding: 10px; margin: 12px 0;
  border-radius: 14px; background: var(--soft);
  border: 2px dashed var(--line);
}
.tile-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tile {
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 16px; font-weight: 700;
  padding: 10px 14px; min-height: 44px;
  border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: 12px; background: var(--card); color: var(--ink);
  cursor: pointer;
}
.tile:active { transform: translateY(2px); border-bottom-width: 2px; }
.tile:disabled { opacity: .6; cursor: default; }
.tile-used { background: var(--grammar); color: #fff; border-color: transparent; }

.answer-wide { text-align: left; }