/* This small PWA is served without a frontend build step. The file is
   colocated and named like a CSS Module, following Jellybot Platform's feature
   convention, while its selectors intentionally remain global.

   Design system: one loud brand green, heavy rounded type, 2px visible borders,
   and solid-offset "lips" that physically depress on press. Depth comes from
   flat colour offsets, never blur. Full light and dark support. */

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* ground */
  --paper: #fff;
  --panel: #f4f7f9;
  --panel-2: #e9eef2;

  /* ink */
  --ink: #16233c;
  --ink-2: #5a6a83;
  --ink-3: #8b99ad;

  /* structural lines: --line is the stroke, --lip is the solid drop under it */
  --line: #e2e7ec;
  --lip: #cfd7df;

  /* brand */
  --brand: #19b85c;
  --brand-lip: #10893f;
  --brand-soft: #e6f8ed;
  --brand-line: #9fe3bd;
  --brand-ink: #10893f;

  /* semantic */
  --wrong: #ff4b4b;
  --wrong-lip: #d13434;
  --wrong-soft: #ffecec;
  --wrong-line: #ffbcbc;
  --wrong-ink: #d13434;
  --amber: #ffb020;
  --amber-lip: #d98c00;
  --amber-soft: #fff6e2;
  --amber-line: #ffdb96;
  --amber-ink: #92600a;
  --info: #1c9bef;
  --info-lip: #1179bd;
  --info-soft: #e6f4fe;

  /* mode accents */
  --m-f: #ff5c8a;
  --m-f-lip: #d63c69;
  --m-l: #1c9bef;
  --m-l-lip: #1179bd;
  --m-v: #9b5cff;
  --m-v-lip: #7a3cd6;

  /* shape */
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* the signature depth: solid offset, no blur */
  --drop: 0 4px 0;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --sans:
    "Nunito", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system,
    "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131820;
    --panel: #1b212b;
    --panel-2: #252d39;
    --ink: #eef3f8;
    --ink-2: #a7b4c6;
    --ink-3: #78869a;
    --line: #2c3542;
    --lip: #0b0f15;
    --brand: #23cd6c;
    --brand-lip: #0f8a45;
    --brand-soft: #14301f;
    --brand-line: #1d6b41;
    --brand-ink: #56e08d;
    --wrong: #ff5f5f;
    --wrong-lip: #c33;
    --wrong-soft: #33191c;
    --wrong-line: #7a3131;
    --wrong-ink: #ff9b9b;
    --amber: #ffbe45;
    --amber-lip: #c98a10;
    --amber-soft: #322614;
    --amber-line: #6d5322;
    --amber-ink: #ffcf6b;
    --info: #38aaf5;
    --info-lip: #1b7ec0;
    --info-soft: #14283a;
    --m-f: #ff6d96;
    --m-f-lip: #c9445f;
    --m-l: #38aaf5;
    --m-l-lip: #1b7ec0;
    --m-v: #a875ff;
    --m-v-lip: #7d4ad2;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
}

button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--info);
  outline-offset: 3px;
}

/* Uppercase micro-label. Buttons opt out below — they carry weight instead. */
.caps {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.big.caps,
.ghost.caps,
.fab.caps,
.rate button.caps,
.why.caps {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- feed scroller ---------- */
#reel {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#reel::-webkit-scrollbar {
  display: none;
}

.card {
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(84px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
  background: var(--paper);
}

.card .inner {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  overflow-y: auto;
  scrollbar-width: none;

  /* overflow clips painting at the box edge, and the last child's 4px lip
     (plus its 4px pressed travel) paints below its border box — without this
     inset the bottom shadow is sliced off against the background. */
  padding-bottom: 8px;
}

.card .inner::-webkit-scrollbar {
  display: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.tag.fix {
  background: var(--wrong-soft);
  color: var(--wrong);
}

.tag .rev {
  color: var(--brand);
}

.q {
  font-size: clamp(1.5rem, 6vw, 1.95rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  white-space: pre-line;
  text-wrap: balance;
}

.sub {
  color: var(--ink-3);
  font-weight: 700;
  margin: 0 0 22px;
}

.opts {
  display: grid;
  gap: 12px;
}

/* The signature control: 2px stroke, solid lip beneath, presses into the lip. */
.opt {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 16px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: var(--drop) var(--lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease),
    border-color 0.12s var(--ease),
    background 0.12s var(--ease);
}

.opt:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip);
}

@media (hover: hover) {
  .opt:not(:disabled):hover {
    background: var(--panel);
  }
}

.opt .l {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-3);
  transition:
    background 0.12s var(--ease),
    color 0.12s var(--ease),
    border-color 0.12s var(--ease);
}

.opt.sel {
  border-color: var(--info);
  background: var(--info-soft);
  box-shadow: var(--drop) var(--info-lip);
}

.opt.sel .l {
  border-color: var(--info);
  background: var(--info);
  color: #fff;
}

.opt.right {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
  box-shadow: var(--drop) var(--brand-lip);
  animation: correct-pop 0.4s var(--ease);
}

.opt.right .l {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.opt.wrong {
  border-color: var(--wrong);
  background: var(--wrong-soft);
  color: var(--wrong-ink);
  box-shadow: var(--drop) var(--wrong-lip);
  animation: shake 0.4s var(--ease);
}

.opt.wrong .l {
  border-color: var(--wrong);
  background: var(--wrong);
  color: #fff;
}

.opt.dim {
  opacity: 0.4;
  box-shadow: none;
  transform: translateY(4px);
}

.opt:disabled {
  cursor: default;
}

@keyframes correct-pop {
  35% {
    transform: scale(1.02);
  }

  70% {
    transform: scale(0.995);
  }
}

@keyframes shake {
  20% {
    transform: translateX(-7px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(3px);
  }
}

/* ---------- celebration ---------- */
.cf {
  position: absolute;
  width: 9px;
  height: 9px;
  z-index: 6;
  pointer-events: none;
  border: 0 !important;
  border-radius: 2px;
  animation: cfly 0.9s var(--ease) forwards;
}

@keyframes cfly {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(320deg);
    opacity: 0;
  }
}

/* ---------- answer sheet ---------- */

/* #reel is position:fixed and forms its own stacking context, and the FAB must
   outrank the reel to float over opaque cards — so no z-index here can lift the
   sheet above it, and a bottom inset fails too because sheet content scrolls
   under the FAB. The FAB is tucked away instead (see below). */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--panel);
  border-top: 2px solid var(--line);
  max-height: 46dvh;
  overflow-y: auto;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(108%);
  transition: transform 0.36s cubic-bezier(0.3, 1.18, 0.4, 1);
}

.sheet.show {
  transform: none;
}

.sheet .in {
  max-width: 540px;
  margin: 0 auto;
}

.vrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.why {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 9px 16px;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: 0 3px 0 var(--lip);
  flex: none;
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.why:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--lip);
}

.more {
  margin-top: 14px;
}

/* Verdict reads as a headline, not a chip — the sheet itself is the surface. */
.sticker {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sticker.good {
  color: var(--brand-ink);
}

.sticker.bad {
  color: var(--wrong-ink);
}

.sheet .ans {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 12px 0 0;
}

.sheet .exp {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.55;
}

.sheet .note,
.miss .note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 2px solid var(--amber-line);
  border-radius: 12px;
  color: var(--amber-ink);
  background: var(--amber-soft);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------- swipe hint ---------- */
.hint {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  pointer-events: none;
  background: var(--panel-2);
  color: var(--ink-3);
  padding: 8px 16px;
  border-radius: 999px;
}

.hint.show {
  display: block;
  animation: bob 1.5s var(--ease) infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -6px);
  }
}

.chip.streak.lit {
  background: var(--amber-soft);
  border-color: var(--amber-line);
}

/* ---------- session progress bar (quiz + mock) ---------- */
.feedbar {
  position: fixed;
  top: calc(4px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  max-width: 540px;
  margin-inline: auto;
  height: 5px;
  z-index: 10;
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
}

.feedbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

.feedbar.done i {
  background: var(--amber);
}

/* ---------- overlay chrome ---------- */
.bar {
  position: fixed;
  left: 0;
  right: 0;

  /* On wide viewports the reel content column is 540px centered; the floating
     chrome must track that column, not the window edges, or it ends up marooned
     on the empty background. 572px = 540px column + 16px padding each side. */
  max-width: 572px;
  margin-inline: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}

.bar.top {
  top: calc(14px + env(safe-area-inset-top));
}

.bar > * {
  pointer-events: auto;
}

.bargroup {
  display: flex;
  gap: 9px;
  pointer-events: auto;
}

.chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--line);
  color: var(--ink-2);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.chip:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--lip);
}

.chip.streak {
  color: var(--amber-lip);
}

.chip.timer {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  z-index: 10;
  color: var(--ink);
}

.chip.timer:active {
  transform: translateX(-50%) translateY(3px);
}

.chip.timer.low {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #fff;
  box-shadow: 0 3px 0 var(--wrong-lip);
  animation: tock 1s var(--ease) infinite;
}

@keyframes tock {
  50% {
    transform: translateX(-50%) scale(1.06);
  }
}

.pop {
  animation: pop 0.4s var(--ease);
}

@keyframes pop {
  40% {
    transform: scale(1.28) rotate(-4deg);
  }
}

.fab {
  position: fixed;
  right: max(16px, calc(50vw - 254px));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 10;
  padding: 15px 22px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r);
  box-shadow: var(--drop) var(--brand-lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.fab:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brand-lip);
}

/* Answering tucks the mock-test button away so it can never sit on top of the
   answer sheet. Answered cards stay mounted in the reel, so it stays hidden for
   the rest of the feed session — the mock test remains reachable from Home. */
body:has(.sheet.show) .fab {
  display: none;
}

/* ---------- modal sheets ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(22 35 60 / 55%);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: var(--paper);
  border-top: 2px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
  max-height: 82dvh;
  overflow-y: auto;
  animation: sheetup 0.28s var(--ease);
}

.panel::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--panel-2);
  transform: translateX(-50%);
}

@keyframes sheetup {
  from {
    transform: translateY(18%);
  }
}

.panel h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.panel .phead {
  color: var(--ink-3);
  font-weight: 700;
  margin: 0 0 20px;
  font-size: 0.95rem;
}

.rowwrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  padding: 11px 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: 0 3px 0 var(--lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.pill:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--lip);
}

.pill.on {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
  box-shadow: 0 3px 0 var(--info-lip);
}

select {
  width: 100%;
  margin: 4px 0 18px;
  padding: 15px 16px;
  border-radius: var(--r);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--sans);
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position:
    calc(100% - 21px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.big {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 17px;
  border-radius: var(--r);
  background: var(--brand);
  color: #fff;
  text-align: center;
  box-shadow: var(--drop) var(--brand-lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.big:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brand-lip);
}

.big.danger {
  background: var(--amber);
  color: #4a3000;
  box-shadow: var(--drop) var(--amber-lip);
}

.big.danger:active {
  box-shadow: 0 0 0 var(--amber-lip);
}

.big.disabled {
  background: var(--panel-2);
  color: var(--ink-3);
  box-shadow: none;
  cursor: default;
  transform: none;
}

.ghost {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 12px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink-2);
  text-align: center;
  box-shadow: var(--drop) var(--lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.ghost:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip);
}

.hist {
  margin: 22px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.hist b.caps {
  display: block;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.hist div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 2px solid var(--line);
  color: var(--ink-2);
}

.hist div:last-child {
  border-bottom: 0;
}

.hist div b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- score / review ---------- */
.scorewrap {
  text-align: center;
}

@keyframes score-pop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  65% {
    transform: scale(1.06);
  }
}

.scorenum {
  animation: score-pop 0.5s var(--ease) both;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  margin: 18px 0 10px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}

.scorenum small {
  font-size: 1.6rem;
  color: var(--ink-3);
}

.stamp {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 6px 0;
  background: var(--panel-2);
  color: var(--ink-2);
}

.stamp.pass {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--drop) var(--brand-lip);
}

.stamp.fail {
  background: var(--wrong);
  color: #fff;
  box-shadow: var(--drop) var(--wrong-lip);
}

.stamp.pass,
.stamp.fail {
  animation: score-pop 0.45s var(--ease) 0.12s backwards;
}

.resultStatus {
  margin-top: 16px;
  color: var(--ink-3);
}

.fullMarks {
  font-size: 1.35rem;
  margin: 0;
}

.actions {
  max-width: 330px;
  margin: 28px auto 0;
}

#review {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--panel);
  overflow-y: auto;
  display: none;
  padding: calc(78px + env(safe-area-inset-top)) 18px 48px;
}

#review.show {
  display: block;
}

#review .inner {
  max-width: 540px;
  margin: 0 auto;
}

#review h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.miss {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 18px;
  margin-bottom: 16px;
}

.miss .mq {
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  white-space: pre-line;
}

.miss .you,
.miss .cor {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
}

.miss .you {
  color: var(--wrong-ink);
  background: var(--wrong-soft);
}

.miss .cor {
  color: var(--brand-ink);
  background: var(--brand-soft);
  margin-top: 6px;
}

.miss .exp {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 12px;
}

.closex {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: max(16px, calc(50vw - 254px));
  z-index: 31;
}

/* ---------- shared scroll panes ---------- */
#home,
#learn,
#cards {
  position: fixed;
  inset: 0;
  background: var(--paper);
  overflow-y: auto;
  display: none;
  padding: calc(20px + env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
}

#home {
  z-index: 25;
}

#learn {
  z-index: 26;
}

#cards {
  z-index: 27;
}

#home.show,
#learn.show,
#cards.show {
  display: block;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

#home.show .hinner > *,
#learn.show .linner > *,
#cards.show .cinner > * {
  animation: rise-in 0.34s var(--ease) backwards;
}

#home.show .hinner > :nth-child(2),
#learn.show .linner > :nth-child(2),
#cards.show .cinner > :nth-child(2) {
  animation-delay: 0.05s;
}

#home.show .hinner > :nth-child(3),
#learn.show .linner > :nth-child(3),
#cards.show .cinner > :nth-child(3) {
  animation-delay: 0.1s;
}

#home.show .hinner > :nth-child(4),
#learn.show .linner > :nth-child(4),
#cards.show .cinner > :nth-child(4) {
  animation-delay: 0.15s;
}

#home.show .hinner > :nth-child(n + 5),
#learn.show .linner > :nth-child(n + 5),
#cards.show .cinner > :nth-child(n + 5) {
  animation-delay: 0.2s;
}

#home .hinner,
#learn .linner,
#cards .cinner {
  max-width: 540px;
  margin: 0 auto;
}

#home h1 {
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin: 16px 0 14px;
  text-wrap: balance;
}

#learn h1,
#cards h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 16px 0 6px;
}

#home .sub,
#learn .sub,
#cards .sub {
  margin: 0 0 24px;
  max-width: 44ch;
  line-height: 1.55;
}

/* ---------- home header row + settings ---------- */
.hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* chips size to their label; the row wraps rather than the words */
.hrow .chip,
.hrow .tag {
  white-space: nowrap;
}

.hrow .tag {
  margin-bottom: 0;
}

/* account + settings travel together, so a narrow header wraps the date
   chip onto its own line rather than orphaning the gear */
.hactions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.chip.acct {
  text-decoration: none;
}

.chip.gear {
  padding: 8px 12px;
  font-size: 1rem;
  flex: none;
}

.setlabel {
  display: block;
  color: var(--ink-3);
  margin: 14px 0 6px;
}

input[type="date"] {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.setrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  font-weight: 700;
}

.setrow input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

/* ---------- home stats ---------- */
.goal {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.goal .ring {
  width: 56px;
  height: 56px;
  flex: none;
}

.goal .track {
  fill: none;
  stroke: var(--panel-2);
  stroke-width: 9;
}

.goal .fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}

.goal.done .fill {
  stroke: var(--amber);
}

.goal .gtxt b {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.goal .gtxt .caps {
  color: var(--ink-3);
  font-size: 0.64rem;
}

.goal .xp {
  margin-left: auto;
  background: var(--amber-soft);
  color: var(--amber-ink);
  border: 2px solid var(--amber-line);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.tile {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop) var(--lip);
  padding: 14px 8px;
  text-align: center;
}

.tile b {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tile:nth-child(1) b {
  color: var(--info);
}

.tile:nth-child(2) b {
  color: var(--brand);
}

.tile:nth-child(3) b {
  color: var(--amber-lip);
}

.tile span {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 5px;
}

/* ---------- mode cards ---------- */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 22px;
}

.mode {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 16px;
  text-align: left;
  color: var(--ink);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.mode:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip);
}

.mode .i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 12px;
  overflow: hidden;
}

.mode .i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mode .n {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.018em;
  display: block;
}

.mode .c {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  display: block;
}

.mode.q .i {
  background: var(--brand);
  box-shadow: 0 3px 0 var(--brand-lip);
}

.mode.f .i {
  background: var(--m-f);
  box-shadow: 0 3px 0 var(--m-f-lip);
}

.mode.l .i {
  background: var(--m-l);
  box-shadow: 0 3px 0 var(--m-l-lip);
}

.mode.v .i {
  background: var(--m-v);
  box-shadow: 0 3px 0 var(--m-v-lip);
}

.mode.q {
  border-color: var(--brand-line);
}

#home .big {
  margin-top: 0;
}

/* ---------- chapter progress ---------- */
.chrows {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 6px 16px;
  margin: 24px 0;
}

.chrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
}

.chrow:last-child {
  border-bottom: 0;
}

.chrow .nm {
  width: 94px;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

.chbar {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}

.chbar i {
  position: relative;
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.6s var(--ease);
}

.chbar i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 25%);
}

.chrow .pc {
  width: 82px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

#home .hist {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 16px 18px;
  margin-top: 24px;
}

.smallprint {
  margin: 26px 0 0;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- learn ---------- */
.catgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cat {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--drop) var(--lip);
  padding: 16px;
  text-align: left;
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.cat:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip);
}

.cat .i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--panel);
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 10px;
}

.cat .n {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.cat .c {
  display: block;
  color: var(--ink-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 5px;
}

.fact {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop) var(--lip);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.fact b {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.fact span {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.55;
}

.learnHome {
  margin-top: 14px;
}

#learn .big {
  margin-top: 22px;
}

/* ---------- flashcards ---------- */
.deck {
  display: block;
  width: 100%;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop) var(--lip);
  padding: 16px 18px;
  margin-bottom: 12px;
  text-align: left;
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.deck:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--lip);
}

.deck b {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.deck span {
  display: block;
  color: var(--ink-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 5px;
}

.fcbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.flipwrap {
  perspective: 1400px;
  margin-bottom: 14px;
}

.flip {
  position: relative;
  width: 100%;
  min-height: 340px;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
  cursor: pointer;
  user-select: none;
}

.flip.on {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 6px 0 var(--lip);
  padding: 30px 24px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
}

.face.back {
  transform: rotateY(180deg);
  background: var(--panel);
}

.face .k {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.face .v {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 12px;
  line-height: 1.55;
}

.face .tapme {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rate button {
  padding: 17px;
  border-radius: var(--r);
  border: 2px solid transparent;
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.rate .again {
  background: var(--amber);
  color: #4a3000;
  box-shadow: var(--drop) var(--amber-lip);
}

.rate .again:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--amber-lip);
}

.rate .got {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--drop) var(--brand-lip);
}

.rate .got:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brand-lip);
}

/* ---------- bottom navigation ---------- */
#tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

#tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 12px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.15s var(--ease);
}

#tabs button span {
  font-size: 1.25rem;
  line-height: 1;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.15s var(--ease);
}

#tabs button.on {
  color: var(--brand-ink);
}

#tabs button.on span {
  filter: none;
}

/* every scrollable surface clears the nav bar */
#home,
#learn,
#cards {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.card {
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.fab {
  bottom: calc(90px + env(safe-area-inset-bottom));
}

/* ---------- locked video card ---------- */

/* The card sits on the black video ground, so its text is light in both
   themes rather than following the paper palette. */
.locked {
  padding: 0 24px;
}

.locked .lockicon {
  font-size: 2.4rem;
  margin-bottom: 14px;
}

.locked .q {
  margin-bottom: 8px;
  color: #fff;
}

.locked .sub {
  color: rgb(255 255 255 / 72%);
}

/* ---------- video reel ---------- */
.vcard {
  padding: 0 !important;
  background: #000;
}

.vcard video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vcap {
  position: absolute;
  left: 18px;
  right: 78px;
  top: calc(18px + env(safe-area-inset-top));
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 75%);
}

.vcap .t {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.vcap .f {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.88;
  margin-top: 3px;
}

.vmute {
  position: absolute;
  right: 18px;
  top: calc(14px + env(safe-area-inset-top));
  z-index: 2;
  background: rgb(255 255 255 / 16%);
  border-color: rgb(255 255 255 / 26%);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

@media (hover: hover) {
  .big:not(.disabled):hover,
  .fab:hover {
    filter: brightness(1.05);
  }

  .ghost:hover,
  .chip:hover,
  .why:hover,
  .deck:hover,
  .mode:hover,
  .cat:hover,
  .pill:not(.on):hover {
    background: var(--panel);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}