/* Teachers use this on a phone, one-handed, while supervising children
   (CLAUDE.md). Tap targets are 48px minimum, the primary action is pinned to the
   bottom within thumb reach, and nothing depends on a hover state.

   The look is the "drawn" one the owner adopted on 2026-09-16. The reference is
   docs/14-drawn-look.html, and STATE.md records what was chosen and why:

   - One ground for the whole app, warm paper rather than white, with warm
     charcoal ink. No cards, no panels, no shadows, no gradients. Things are
     separated by space, and a list by a faint dashed rule.
   - Colour carries meaning and nothing else: coral is attention (unpaid, an
     allergy, a draft waiting), green is done (recorded, approved, paid). The
     drawings are the only other colour on the screen.
   - A choice is shown by underlining the chosen word, not by filling a pill.
   - Dark is night blue, and follows the phone's own setting.

   Type is IBM Plex Sans Arabic, with Rubik behind it for any glyph Plex lacks.
   Both are self-hosted in public/fonts.
   The CSP in src/server.js is `style-src 'self'` with no `font-src`, so a Google
   Fonts link would be blocked outright, and self-hosting is the better answer
   anyway: no third-party request carrying a nursery's IP. */

/* IBM Plex Sans Arabic, three weights, split by script so an Arabic screen
   only fetches what it draws. Not variable, hence one file per weight. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/rubik-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* Roles */
  --bg: #f6f2eb;
  --ink: #3a3530;
  --ink-soft: color-mix(in srgb, var(--ink) 62%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --tint: color-mix(in srgb, var(--ink) 6%, transparent);
  --surface: var(--tint);

  /* Meaning */
  --attn: #c0532d;
  --attn-ink: #8f3a1d;
  --attn-soft: color-mix(in srgb, var(--attn) 11%, var(--bg));
  --done: #4b8446;
  --done-ink: #2f5e2b;
  --done-soft: color-mix(in srgb, var(--done) 13%, var(--bg));
  --on-strong: #fbf9f5;

  /* The drawings' own colours: the colours real toys come in. */
  --k-blue: #3b7dd8;
  --k-red: #e0453a;
  --k-yellow: #e2a31a;
  --k-green: #4f9d52;
  --k-orange: #ee8a2c;
  --k-purple: #8a5cc7;
  --k-brown: #8b5a34;

  /* Older names, kept so the phase 1 screen and any markup that still uses
     them resolves to the right meaning in both themes. */
  --brand: var(--attn);
  --brand-ink: var(--on-strong);
  --brand-soft: var(--attn-soft);
  --accent-2: var(--done);
  --warn: var(--attn-ink);
  --warn-soft: var(--attn-soft);
  --danger: var(--attn-ink);

  --font-body: "IBM Plex Sans Arabic", "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font-body);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-6: 26px;
  --space-8: 36px;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-card: 20px;

  --tap: 48px;
  --dock: 86px;

  /* A critically-damped spring: settles cleanly, no bounce. */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Night blue. Only the tokens change; every rule below reads them. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b2230;
    --ink: #e6ecf5;
    --attn: #f0977a;
    --attn-ink: #f6b7a0;
    --attn-soft: color-mix(in srgb, var(--attn) 16%, var(--bg));
    --done: #8fcb86;
    --done-ink: #b6e3ae;
    --done-soft: color-mix(in srgb, var(--done) 16%, var(--bg));
    --on-strong: #1b2230;

    --k-blue: #7fb0f0;
    --k-red: #f0776d;
    --k-yellow: #f2c14e;
    --k-green: #8fcb86;
    --k-orange: #f5a55c;
    --k-purple: #b596e6;
    --k-brown: #c99a74;
  }
}

* { box-sizing: border-box; }

/* A component's own `display` would otherwise beat the attribute, which is how
   the back arrow stayed on the home screen with `hidden` set. */
[hidden] { display: none !important; }

/* Every tap target responds the instant it is pressed, not on release.
   touch-action removes the legacy tap delay and the double-tap zoom that would
   otherwise eat the first tap of a fast double press. */
button, .card, .chip, a.btn {
  touch-action: manipulation;
  transition: transform .1s var(--ease-spring), background .12s, color .12s, opacity .12s;
}
button:active, .card:active, .chip:active {
  transform: scale(0.96);
  opacity: .85;
}

body {
  margin: 0;
  padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Arabic joins its letters, so tracking breaks words rather than styling them,
   and text-transform does nothing at all. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

/* Header ------------------------------------------------------------------ */
/* Flat, on the ground, carrying only the wordmark. The frosted floating bar
   from the motion pass was dropped with the drawn look: a translucent material
   is exactly the kind of surface this style does without. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-2);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  background: var(--bg);
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 5;
}
.bar__title { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.bar__title strong { font-weight: 700; font-size: 20px; }
.bar__title span { color: var(--ink-soft); font-size: .85rem; }
.bar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  margin-inline-start: calc(var(--space-3) * -1);
  background: none; border: 0; border-radius: 50%;
  color: inherit; cursor: pointer; padding: 0;
}
.pill {
  font-size: .9rem;
  padding: 0 var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--attn);
  white-space: nowrap;
}

/* Layout ------------------------------------------------------------------ */
.sheet {
  padding: var(--space-2) var(--space-4) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-6);
  max-width: 640px; margin: 0 auto;
}
/* A section is a heading and its controls, on the ground. No box around it. */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field h2 {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.hint { margin: var(--space-2) 2px 0; font-size: .82rem; color: var(--ink-soft); }

/* Choices — the whole entry surface is taps, not typing -------------------- */
/* No boxes to hit. Each choice is a word, 48px tall; the chosen one takes the
   attention colour and a drawn underline. */
.chips { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.chips--scroll .chip { scroll-snap-align: end; flex: 0 0 auto; }

.chip {
  min-height: var(--tap);
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline 2px transparent;
  text-underline-offset: 7px;
}
.chip[aria-checked="true"], .chip[aria-pressed="true"] {
  color: var(--attn);
  font-weight: 600;
  text-decoration-color: currentColor;
}
.chip:focus-visible { outline: 2px solid var(--attn); outline-offset: 2px; border-radius: 6px; }

/* Text inputs — deliberately few -------------------------------------------- */
/* A soft tint rather than a border, so a field still reads as a place to type. */
input[type="text"], input[type="tel"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--tint);
  color: var(--ink);
  font: inherit;
  caret-color: var(--attn);
}
textarea {
  padding: var(--space-3) 16px;
  min-height: 104px;
  line-height: 1.8;
  resize: vertical;
}
select { padding-inline-end: var(--space-3); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--attn); outline-offset: 0; }
::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); }

/* Buttons ----------------------------------------------------------------- */
.btn {
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: 999px;
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
}
/* The primary action is solid ink: the one heavy shape on the screen. */
.btn--primary { background: var(--ink); color: var(--bg); flex: 1; }
.btn--primary:hover { opacity: .9; }
.btn--ghost { background: var(--tint); color: var(--ink); }
.btn--ghost:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.btn--small { flex: 0 0 auto; font-weight: 500; font-size: .95rem; }
.btn[disabled] { opacity: .45; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--attn); outline-offset: 2px; }
.row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* The dock sits on the ground itself, full width, no fade. */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--bg);
  max-width: 640px;
  margin: 0 auto;
}
/* Three actions share a phone's width: the secondary ones give up padding
   before the primary label is allowed to wrap. */
.dock .btn--small { padding: 0 14px; }
.dock .btn--primary { min-width: 0; }

/* Result (the phase 1 screen) ---------------------------------------------- */
.result { display: flex; flex-direction: column; gap: var(--space-2); }
.result h2 { font-size: 1.25rem; }
.notice { margin: 0 0 var(--space-3); font-size: .82rem; color: var(--ink-soft); }
.report {
  margin: 0;
  font-size: 1.05rem;
  line-height: 2;
  white-space: pre-wrap;
}
.meta { margin: var(--space-3) 2px 0; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.warnings {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--attn-soft);
  border-radius: var(--radius);
  color: var(--attn-ink);
  font-size: .9rem;
}
.warnings ul { margin: 6px 0 0; padding-inline-start: 20px; }

/* Anything that must stop the teacher — an allergy, a failed login — takes the
   attention voice on a soft wash of it. */
.error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--attn-soft);
  color: var(--attn-ink);
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.error svg { flex: 0 0 auto; }

/* Batch ------------------------------------------------------------------- */
.batch { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: var(--space-3); }
.batch li { font-size: .9rem; }
.batch .name { font-weight: 600; }
.batch .snippet { color: var(--ink-soft); display: block; }

/* A screen arrives as a cascade of its own pieces settling into place. render()
   in app.js gives each piece this class and staggers it through --stagger, a
   custom property set through the CSSOM, which the CSP allows. */
@keyframes materialize {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* It runs under reduced motion too: the owner's explicit call on 2026-09-15,
   recorded in STATE.md, after being told what that setting is for. */
.materialize {
  animation: materialize .36s var(--ease-spring) both;
  animation-delay: calc(var(--stagger, 0) * 1ms);
}