/* 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, taken from the Fluento Figma kit, with rounded Nunito typography
   in sentence case, one sky-blue brand with a darker shade, 1.5px light strokes
   on controls and cards, and a solid 4px bottom lip on anything you can press.
   Correct is green, wrong is red, streaks are amber. Depth comes from flat
   colour offsets, never blur. Controls are 12px round, cards and sheets 16px.
   The kit is light-only and mobile-only; dark mode and the desktop rail are
   our own mappings of the same tokens. */

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito.woff2") format("woff2");
}
@font-face {
  /* Wordmark only: Fredoka Bold (SIL Open Font License), latin subset, self-hosted. */
  font-family: Fredoka;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fredoka-700.woff2") format("woff2");
}


:root {
  color-scheme: light dark;

  /* ground — backgrounds/primary plus two neutral panels */
  --paper: #fff;
  --panel: #f9fafb;
  --panel-2: #f3f4f6;

  /* ink — text/text, text/text-variant, placeholder, disabled */
  --ink: #404b60;
  --ink-2: #6c737f;
  --ink-3: #9da4ae;
  --disabled: #d2d6db;

  /* strokes — borders/_1 divides chrome (nav bars, list rows), borders/_2
     outlines controls and cards. --lip is the solid drop under a neutral
     control; in the kit it is the same grey as the stroke. */
  --line-1: #f3f4f6;
  --line-2: #e5e7eb;
  --line: var(--line-2);
  --lip: #e5e7eb;

  /* brand — primary/blue-light, its shade, and the two light variants */
  --brand: #36bffa;
  --brand-lip: #0ba5ec;
  /* White on #36bffa is 2.10:1. The server-rendered pages already put this
     dark ink on the same fill, so the brand keeps its colour and the label
     becomes readable. */
  --brand-on: #071827;
  --focus-ring: #b54708;
  --brand-soft: #e0f2fe;
  --brand-soft-2: #b9e6fe;
  --brand-line: #7cd4fd;
  --brand-tint: #7cd4fd;
  --brand-ink: #026aa2;
  --on-brand: #fff;
  --brand-contrast: #071827;

  /* semantic — green-light for correct, red for wrong, amber for streaks */
  --green: #85e13a;
  --green-lip: #66c61c;
  --green-soft: #e3fbcc;
  --green-line: #c5f295;
  --green-ink: #3b7c10;
  --wrong: #ef4444;
  /* The countdown's coral red, brighter than the wrong-answer red so time reads as its own signal. */
  --countdown: #ff4b4b;
  --wrong-lip: #dc2626;
  --wrong-soft: #fee2e2;
  --wrong-line: #fecaca;
  --wrong-ink: #b91c1c;
  --amber: #fbbf24;
  --amber-lip: #d97706;
  --amber-text: #d97706;
  --amber-soft: #fef3c7;
  --amber-line: #fde68a;
  --amber-ink: #92400e;
  --info: #0ba5ec;
  --info-lip: #026aa2;
  --info-soft: #e0f2fe;

  /* mode accents — learn shares the kit's green */
  --m-f: #ff5c8a;
  --m-f-lip: #d63c69;
  --m-l: #85e13a;
  --m-l-lip: #66c61c;
  --m-v: #9b5cff;
  --m-v-lip: #7a3cd6;

  /* shape */
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 16px;

  /* 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: #0d1520;
    --panel: #131e2b;
    --panel-2: #1b2837;
    --ink: #f0f5fa;
    --ink-2: #a3b0bf;
    --ink-3: #71808f;
    --disabled: #3a4756;
    --line-1: #1b2837;
    --line-2: #233242;
    --lip: #233242;
    --brand: #36bffa;
    --brand-lip: #0086c9;
    --brand-on: #071827;
    --focus-ring: #fdb022;
    --brand-soft: #0b4a6f;
    --brand-soft-2: #0b3049;
    --brand-line: #065986;
    --brand-tint: #b9e6fe;
    --brand-ink: #7cd4fd;
    --on-brand: #fff;
    --brand-contrast: #071827;
    --green: #85e13a;
    --green-lip: #5aa815;
    --green-soft: #17300a;
    --green-line: #2f5a12;
    --green-ink: #a6f26a;
    --wrong: #f87171;
    --wrong-lip: #dc2626;
    --wrong-soft: #3a1a1c;
    --wrong-line: #7a3131;
    --wrong-ink: #fca5a5;
    --amber: #fbbf24;
    --amber-lip: #b45309;
    --amber-text: #fbbf24;
    --amber-soft: #33270f;
    --amber-line: #6d5322;
    --amber-ink: #fcd34d;
    --info: #36bffa;
    --info-lip: #026aa2;
    --info-soft: #0b3049;
    --m-f: #ff6d96;
    --m-f-lip: #c9445f;
    --m-l: #85e13a;
    --m-l-lip: #5aa815;
    --m-v: #a875ff;
    --m-v-lip: #7d4ad2;
  }
}

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

/* Apply to nested scrollers as well as controls: taps should not zoom the
   app. Scrolling and deliberate pinch zoom remain available to the browser. */
* { touch-action: manipulation; }

[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;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  /* The ring used to be the brand blue, which made it invisible against every
     brand-blue button it was drawn around. */
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

button,
.big,
.ghost,
.chip,
.pill,
input:not([type="checkbox"]),
select {
  min-height: 44px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Small label. The kit sets everything in sentence case at 14–16px, so a
   label is weight and colour rather than uppercase tracking. Buttons opt out
   below — they carry the full 16px. */
.caps {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.big.caps,
.ghost.caps,
.rate button.caps,
.why.caps {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Native app (Capacitor): Apple requires In-App Purchase for anything sold in
   the app, and nothing is for sale yet, so pricing links never render there. */
body.native-app .price-link, body.native-app a[href="/pricing"] { display: none !important; }