/* ============================================
   LAZY LEARNERS — Base
   Design tokens, reset, typography and the phone-width app frame.
   The app is designed for 360–430px wide screens; wider screens show
   the same layout in a centred column.
   ============================================ */

:root {
  --canvas: #E9ECF1;          /* outside the app column on wide screens */
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --border: #E2E5EA;
  --border-strong: #CBD0D8;

  --text: #101828;
  --text-2: #475467;
  --text-3: #667085;

  /* App colour. Everything below is worked out from these three numbers, so the whole app changes
     together. The admin picks the colour (Content page); js/core/theme-boot.js applies the saved
     choice before the page paints. Keep --l dark enough for white text to stay readable. */
  --h: 224;
  --s: 76%;
  --l: 48%;
  --brand: hsl(var(--h) var(--s) var(--l));
  --brand-strong: hsl(var(--h) var(--s) calc(var(--l) - 9%));
  --brand-soft: hsl(var(--h) 90% 97%);
  --brand-tint: hsl(var(--h) 88% 93%);
  --brand-line: hsl(var(--h) 80% 88%);
  --brand-glow: hsl(var(--h) var(--s) var(--l) / 0.3);
  --brand-wash: hsl(var(--h) var(--s) var(--l) / 0.08);

  /* The header and the band under it use the app colour. --day (set by js/core/theme-boot.js) is 0 at
     night and 1 in full daylight, so the same shade is lighter by day and darker at night.
     The header runs up under the phone's status bar; a darker edge below the heading separates it
     from the page, and a soft tint fades out below that. */
  --day: 1;
  /* Header band (user's picture, 2026-10-16): pale, a touch deeper at the top, with a soft shadow
     under it. The title sits on a soft highlight (--hdr-pill). It is only a little lighter by day
     and a little deeper at night. The text colour on it (--hdr-ink) is chosen by theme-boot.js. */
  --hdr-top: hsl(var(--h) 85% calc(88% + 3% * var(--day)));
  --hdr-bot: hsl(var(--h) 85% calc(94% + 2% * var(--day)));
  --hdr-pill: hsl(var(--h) 85% calc(82% + 3% * var(--day)));
  --band-fade: hsl(var(--h) calc(var(--s) + 8%) calc(95.5% + 1.5% * var(--day)));
  --hdr-ink: #0F1F4A;
  --hdr-ink-2: rgba(15, 31, 74, 0.72);
  --hdr-press: rgba(15, 31, 74, 0.1);
  --hdr-slant: 0px;
  --band-bar: calc(var(--header-h) + var(--safe-t));

  /* The colour is never used flat. Solid areas get a light-to-deep shade (--brand-fill);
     pale areas get a pale shade (--brand-fill-soft). Shades only: no lines or patterns on top. */
  --brand-shade: linear-gradient(135deg,
    hsl(calc(var(--h) - 8) var(--s) calc(var(--l) + 4%)) 0%,
    hsl(var(--h) var(--s) var(--l)) 50%,
    hsl(calc(var(--h) + 12) var(--s) calc(var(--l) - 11%)) 100%);
  --brand-fill: var(--brand-shade);
  --brand-fill-soft: linear-gradient(150deg, hsl(var(--h) 88% 92%) 0%, hsl(var(--h) 90% 96%) 55%, #FFFFFF 100%);
  /* Two companion hues for the tinted boxes on the student home, so they always sit well
     beside whichever app colour is chosen */
  --h-2: calc(var(--h) + 165);
  --h-3: calc(var(--h) + 285);

  --ok: #067647;
  --ok-soft: #ECFDF3;
  --ok-line: #A6E9C2;
  --bad: #B42318;
  --bad-soft: #FEF3F2;
  --bad-line: #FDCAC6;
  --warn: #B54708;
  --warn-soft: #FFFAEB;
  --warn-line: #FEDF89;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16);

  /* Interface font: Trebuchet MS (built into Windows, macOS and iOS). Android has no Trebuchet,
     so Fira Sans, the closest free match, is loaded as the fallback there. */
  --font: "Trebuchet MS", "Fira Sans", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
  /* Handwritten font for personal touches: titles, greetings, the daily quote, short remarks */
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --app-w: 480px;
  --gutter: 16px;
  --header-h: 62px;
  --nav-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
}

body {
  margin: 0 auto;
  max-width: var(--app-w);
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--band-fade) 0, var(--band-fade) var(--band-bar), transparent calc(var(--band-bar) + 130px));
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

@media (min-width: 520px) {
  body { box-shadow: 0 0 0 1px var(--border), 0 24px 64px rgba(16, 24, 40, 0.08); }
}

h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 16px; line-height: 1.35; font-weight: 600; }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Page frame ---------- */
.page {
  padding: var(--gutter);
  padding-bottom: calc(28px + var(--safe-b));
}
body.has-nav .page { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); }

.section { margin-top: 24px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Handwritten text: use sparingly, for lines that should feel personal */
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0; line-height: 1.1; }
h1.hand { font-size: 44px; }
h2.hand { font-size: 30px; }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}