/* ============================================================
   Learner — skeleton stylesheet
   THREE SURFACES, ONE APP.  Everything is driven by CSS custom
   properties selected by  html[data-surface="hub" | "p5" | "s2"].
   Never hard-code a surface colour in a component rule: add a
   token instead, so all three surfaces stay in sync.
   Owner: Agent 1 (architect). Agents 2/3/4 style inside their own
   screens using THESE tokens — do not redefine the token blocks.
   ============================================================ */

/* ---------- 1. universal (surface-independent) ---------- */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --tap: 44px;              /* minimum touch target */
  --gap-tap: 8px;           /* minimum gap between targets */
  --screen-max: 480px;
  --t-fast: 90ms;           /* press feedback must land < 100ms */
  --t-med: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;          /* belt & braces: never scroll sideways at 375px */
}

/* ---------- 2. surface token sets ---------- */

/* 2a. HUB — "calm trust": landing, sign-in, picker, onboarding, parent hub */
html[data-surface="hub"] {
  --bg:            #F8FAFC;
  --bg-sunk:       #EEF2F7;
  --ink:           #0F172A;
  --ink-soft:      #334155;
  --muted:         #64748B;
  --card:          #FFFFFF;
  --card-alt:      #F1F5F9;
  --border:        #E2E8F0;   /* hairline */
  --border-strong: #CBD5E1;
  --primary:       #2563EB;
  --on-primary:    #FFFFFF;
  --primary-soft:  #EFF6FF;
  --accent:        #2563EB;
  --good:          #059669;
  --warn:          #B45309;
  --header-bg:     #0F172A;
  --header-ink:    #FFFFFF;
  --header-sub:    #94A3B8;
  --header-accent: #7BD88F;

  --font-ui:      "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-display: "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-prose:   "Lora", Georgia, serif;   /* reserved: report / AI-briefing prose */

  --radius:    14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow:      0 1px 2px rgba(15,23,42,.06);
  --shadow-lift: 0 4px 14px rgba(15,23,42,.10);
  --shadow-press: var(--shadow);
  --press-scale: 0.985;
  --ring: #2563EB;
  --card-border-width: 1px;
}

/* 2b. P5 — "the garden", claymorphism. Emoji ARE allowed on this surface. */
html[data-surface="p5"] {
  --bg:            #f2faf4;   /* cream-green */
  --bg-sunk:       #e8f7ec;
  --ink:           #1f3d29;
  --ink-soft:      #33604a;
  --muted:         #5d7d68;
  --card:          #FFFFFF;
  --card-alt:      #e8f7ec;
  --border:        #cfe8d6;
  --border-strong: #9fd3ac;
  --primary:       #2e9e44;   /* garden green */
  --on-primary:    #FFFFFF;
  --primary-deep:  #1d7a31;
  --primary-soft:  #e8f7ec;
  --accent:        #ffca28;   /* sun */
  --soil:          #6d4c41;
  --good:          #1d7a31;
  --warn:          #b3402f;
  --header-bg:     linear-gradient(120deg,#1d7a31,#2e9e44);
  --header-ink:    #FFFFFF;
  --header-sub:    #d9f2df;
  --header-accent: #ffca28;

  --font-ui:      "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-prose:   "Baloo 2", "Segoe UI", system-ui, sans-serif;

  --radius:    20px;          /* puffy */
  --radius-sm: 16px;
  --radius-pill: 999px;
  /* claymorphism = soft DOUBLE shadow + inner highlight */
  --shadow:      0 6px 0 rgba(29,122,49,.13), 0 12px 22px rgba(29,122,49,.16);
  --shadow-lift: 0 8px 0 rgba(29,122,49,.15), 0 18px 30px rgba(29,122,49,.20);
  --shadow-press: 0 2px 0 rgba(29,122,49,.16), 0 4px 10px rgba(29,122,49,.16);
  --press-scale: 0.95;        /* the "squish" */
  --ring: #1d7a31;
  --card-border-width: 2px;
}

/* 2c. S2 — "quiet academic", teen-calm. Flat, minimal, no emoji chrome. */
html[data-surface="s2"] {
  --bg:            #F8FAFC;
  --bg-sunk:       #EEF3F5;
  --ink:           #1b262c;
  --ink-soft:      #39525d;
  --muted:         #78909c;
  --card:          #FFFFFF;
  --card-alt:      #eef4f5;
  --border:        #dde4e7;
  --border-strong: #b9cdd4;
  --primary:       #2d6470;   /* teal */
  --on-primary:    #FFFFFF;
  --primary-soft:  #eef4f5;
  --accent:        #2d6470;
  --good:          #059669;
  --warn:          #b3402f;
  --header-bg:     #1b262c;
  --header-ink:    #dfe8ea;
  --header-sub:    #93a7ae;
  --header-accent: #2d6470;

  --font-ui:      "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-display: "EB Garamond", Georgia, serif;
  --font-prose:   "EB Garamond", Georgia, serif;

  --radius:    12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow:      none;                     /* flat */
  --shadow-lift: 0 2px 8px rgba(27,38,44,.07);
  --shadow-press: none;
  --press-scale: 0.99;
  --ring: #2d6470;
  --card-border-width: 1.5px;
}

/* ---------- 3. shell ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--card); color: var(--ink);
  padding: 10px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; top: 8px; }

.l-header {
  background: var(--header-bg);
  color: var(--header-ink);
  padding: 14px 16px;
  display: flex; align-items: center; gap: var(--sp-3);
}
.l-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.l-logo { font-size: 1.2rem; line-height: 1; }
.l-brandtext { min-width: 0; }
.l-title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800; letter-spacing: .01em;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l-dot { color: var(--header-accent); }
.l-tag {
  margin: 1px 0 0; font-size: .7rem; color: var(--header-sub);
  font-family: var(--font-ui); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l-header-right { margin-left: auto; display: flex; align-items: center; gap: var(--gap-tap); }

.screen {
  max-width: var(--screen-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.screen:focus { outline: none; }

/* ---------- 4. primitives ---------- */
.hidden { display: none !important; }
.spacer { flex: 1 1 auto; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.h-screen {
  font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 800; line-height: 1.25;
  margin: 0; color: var(--ink);
}
html[data-surface="s2"] .h-screen { font-weight: 600; }
.sub { margin: 0; color: var(--muted); font-size: .86rem; }
.fine { margin: 0; color: var(--muted); font-size: .72rem; text-align: center; }
.prose { font-family: var(--font-prose); font-size: .92rem; color: var(--ink-soft); }

.card {
  background: var(--card);
  border: var(--card-border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
}

/* every interactive thing */
.btn, .tapcard {
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
              background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn:active, .tapcard:active {
  transform: scale(var(--press-scale));
  box-shadow: var(--shadow-press);
}
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.btn {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: var(--card-border-width) solid transparent;
  font-size: .95rem; font-weight: 700;
  background: var(--card); color: var(--ink);
  border-color: var(--border-strong);
}
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; }
.btn-block   { width: 100%; }
.btn + .btn  { margin-top: var(--gap-tap); }

.row { display: flex; gap: var(--gap-tap); align-items: center; flex-wrap: wrap; }

/* tappable card (student card, level card, add-learner) */
.tapcard {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  min-height: var(--tap);
  background: var(--card);
  border: var(--card-border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink); font-size: 1rem;
  flex-wrap: wrap;
}
.tapcard:hover { border-color: var(--border-strong); }
.tapcard-body { min-width: 0; flex: 1 1 auto; }
.tapcard-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; display: block; }
.tapcard-meta { font-size: .74rem; color: var(--muted); display: block; margin-top: 1px; }
.tapcard-end  { margin-left: auto; text-align: center; font-size: .64rem; color: var(--muted); }
.tapcard-end b { display: block; font-size: 1rem; color: var(--ink); font-weight: 800; }

/* level accents on the hub picker (per the board) */
.tapcard.for-p5 { border-color: #bfe0c8; }
.tapcard.for-s2 { border-color: #b9cdd4; }

.enc {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: .75rem; line-height: 1.4;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.for-p5 .enc { background: #f0faf2; color: #1d7a31; }
.for-s2 .enc { background: #eef4f5; color: #39525d; }

.avatar-slot {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--card-alt);
}
.avatar-slot svg { display: block; }
.avatar-slot > * { display: block; }
.avatar-slot { line-height: 0; }
.avatar-lg { width: 96px; height: 96px; flex-basis: 96px; border-radius: var(--radius); }

/* dashed "add" card */
.tapcard.add {
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  box-shadow: none;
  justify-content: flex-start;
  color: var(--ink-soft);
}
.add-glyph {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}

/* hub inline SVG icon set (user / settings / chevron / check) — NO emoji on hub */
.icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; }

/* quiet parent-hub link */
.parentlink {
  align-self: center;
  margin-top: var(--sp-4);
  min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--muted); font-size: .76rem; font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer; padding: 8px 12px;
}
.parentlink:hover { color: var(--ink); }

/* empty states — honest, friendly, never fake data */
.empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--card);
  border: var(--card-border-width) dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty-art { font-size: 2rem; line-height: 1; margin-bottom: var(--sp-2); }
html[data-surface="hub"] .empty-art,
html[data-surface="s2"] .empty-art { color: var(--muted); }
.empty h3 {
  font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 4px; color: var(--ink);
}
.empty p { margin: 0; font-size: .84rem; color: var(--muted); }

/* stat chips (station header) */
.chips { display: flex; gap: var(--gap-tap); flex-wrap: wrap; margin-top: 10px; }
.chip {
  background: rgba(255,255,255,.16);
  color: var(--header-ink);
  border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: .7rem; font-weight: 700;
}
.station-head {
  background: var(--header-bg);
  color: var(--header-ink);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap;
}
.station-head .avatar-slot { background: rgba(255,255,255,.18); }
.station-who { font-size: .68rem; color: var(--header-sub); }
.station-name { font-family: var(--font-display); font-size: 1.1rem; margin: 2px 0 0; font-weight: 700; }
html[data-surface="s2"] .station-name { font-weight: 600; }

/* form field */
.field { display: block; }
.field > span {
  display: block; font-size: .76rem; font-weight: 700; color: var(--muted); margin-bottom: 6px;
}
.field input {
  width: 100%; min-height: var(--tap);
  padding: 10px 12px;
  font-family: var(--font-ui); font-size: 1rem; color: var(--ink);
  background: var(--card);
  border: var(--card-border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* tabs (parent hub) */
.tabs { display: flex; gap: var(--gap-tap); }
.tab {
  flex: 1; min-height: var(--tap);
  border-radius: var(--radius-sm);
  border: var(--card-border-width) solid var(--border);
  background: var(--card); color: var(--ink-soft);
  font-family: var(--font-ui); font-weight: 700; font-size: .82rem;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* sign-in */
.signin-card { text-align: center; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.signin-card .h-screen { text-align: center; }
.google-btn {
  width: 100%; min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.google-btn:active { transform: scale(var(--press-scale)); }
.err { color: var(--warn); font-size: .8rem; margin: 0; }

/* stub badge — makes it unmistakable what is not built yet */
.stub-note {
  font-size: .7rem; color: var(--muted);
  border-left: 3px solid var(--border-strong);
  padding: 2px 0 2px 10px; margin: 0;
}

/* toast */
.l-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600; z-index: 40;
  max-width: calc(100vw - 32px);
}

/* auth chip in the header */
.authchip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14); color: var(--header-ink);
  border: none; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  cursor: pointer; max-width: 46vw;
}
.authchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 5. universal accessibility guarantees ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .tapcard:active, .google-btn:active { transform: none; }
}

@media (max-width: 380px) {
  .screen { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .l-tag { display: none; }
}