/* ============================================================================================================
   GHAR SE GATE TAK — from home to the gate.          Design layer for the English Tutor, 14 Oct 2026.
   ------------------------------------------------------------------------------------------------------------
   A private departure lounge for a family's most important journey: the warmth of home, the precision of an
   international airport. Direction worked out with an outside design review (reviews/TRIAGE.md, design note).

   Rules this file keeps, because the people using it are 55-70 and on ordinary Android phones:
   - nothing read is under 16 px, nothing tapped is under 44 px, text contrast at least 4.5:1 in both themes;
   - light ("Arrival Ivory") is the default; dark ("Night Terminal") follows the phone, or the moon button;
   - depth goes where it says what matters (the tutor's stage, the one primary action), glass only on the control
     tray, never under text a person must read; no parallax, no particles, nothing moves under a finger;
   - everything that moves stops for "reduce motion"; html.lite (old phones) drops blur and shadows.
   Remove the <link> to this file and the page falls back to its plain styles.
   ============================================================================================================ */

:root {
  color-scheme: light;
  /* Arrival Ivory */
  --bg: #F7F4ED;  --panel: #FFFFFF;  --panel-2: #EEE8DE;  --line: #DED6C8;  --line-2: #C9BEAC;
  --text: #172536;  --text-soft: #2E3F52;  --muted: #536579;
  --accent: #155B83;            /* wayfinding blue: links, the tutor's colour        */
  --you: #8A5A00;               /* brass: the learner's own words                    */
  --primary: #006B60;  --on-primary: #FFFFFF;  --primary-2: #00897A;
  --ok: #1F7A4D;  --warn: #8A5A00;  --bad: #B3261E;
  --ok-line: #9FD1B6;  --warn-line: #E2C58A;  --bad-line: #E7A9A4;
  --glow: rgba(0, 107, 96, .16);
  --tray: rgba(255, 255, 255, .82);
  --shadow-1: 0 1px 2px rgba(23, 37, 54, .06), 0 4px 14px rgba(23, 37, 54, .06);
  --shadow-2: 0 2px 6px rgba(23, 37, 54, .08), 0 18px 40px rgba(23, 37, 54, .12);
  --stage-ground: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #EFE9DE 58%, #E2D9CA 100%);
  --sans: "Noto Sans", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, sans-serif;
  --serif: "Noto Serif", "Noto Serif Gujarati", "Noto Serif Devanagari", Georgia, serif;
  --r: 20px;  --r-lg: 28px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Night Terminal */
    --bg: #101923;  --panel: #182533;  --panel-2: #223344;  --line: #2C4054;  --line-2: #3A5168;
    --text: #F7F2E8;  --text-soft: #D0DCE7;  --muted: #A9B8C8;
    --accent: #8CCBFF;  --you: #FFD27A;  --primary: #6CD8C4;  --on-primary: #0F1C22;  --primary-2: #8FE5D5;
    --ok: #6CD8C4;  --warn: #FFB36B;  --bad: #FF8A8A;
    --ok-line: #2F6F5F;  --warn-line: #6A5126;  --bad-line: #6B2F2F;
    --glow: rgba(108, 216, 196, .18);  --tray: rgba(24, 37, 51, .86);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);  --shadow-2: 0 20px 50px rgba(0, 0, 0, .45);
    --stage-ground: radial-gradient(120% 90% at 50% 18%, #2A3E52 0%, #182533 55%, #101923 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101923;  --panel: #182533;  --panel-2: #223344;  --line: #2C4054;  --line-2: #3A5168;
  --text: #F7F2E8;  --text-soft: #D0DCE7;  --muted: #A9B8C8;
  --accent: #8CCBFF;  --you: #FFD27A;  --primary: #6CD8C4;  --on-primary: #0F1C22;  --primary-2: #8FE5D5;
  --ok: #6CD8C4;  --warn: #FFB36B;  --bad: #FF8A8A;
  --ok-line: #2F6F5F;  --warn-line: #6A5126;  --bad-line: #6B2F2F;
  --glow: rgba(108, 216, 196, .18);  --tray: rgba(24, 37, 51, .86);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);  --shadow-2: 0 20px 50px rgba(0, 0, 0, .45);
  --stage-ground: radial-gradient(120% 90% at 50% 18%, #2A3E52 0%, #182533 55%, #101923 100%);
}

/* ---------- ground and type ---------- */
html, body { background: var(--bg); color: var(--text); font-family: var(--sans); }
body {
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* a faint departure-board glow at the top: the only decoration on the page */
  background-image: radial-gradient(900px 420px at 50% -120px, var(--glow), transparent 70%);
  background-repeat: no-repeat;
}
main { gap: 22px; padding-top: 20px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 6.4vw, 36px); line-height: 1.2;
  letter-spacing: 0; text-wrap: balance; color: var(--text); }
h2, h3 { text-wrap: balance; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px !important; border-radius: 10px; }
::selection { background: var(--glow); }

/* the brand line under the title: home, a route, the gate */
main > header { align-items: center; row-gap: 10px; }
main > header::before {
  content: ""; flex: 0 0 100%; height: 14px; order: -1;     /* its own row above the title, drawn in the first 220 px */
  background:
    radial-gradient(circle at 7px 7px, var(--you) 4px, transparent 4.5px) 0 0 / 14px 14px no-repeat,
    radial-gradient(circle at 7px 7px, var(--primary) 4px, transparent 4.5px) 206px 0 / 14px 14px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px) 18px 6px / 184px 2px no-repeat;
}

/* ---------- buttons: one primary per screen, unmistakable ---------- */
button, .button { font-family: var(--sans); }
button:not(.link):not(.bnav button):not(.langs button):not(.card):not(.kind):not(.person) {
  min-height: 52px; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 17px;
  background: var(--primary); color: var(--on-primary); border: 0; box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
button:not(.link):not(.secondary):not(.danger):not(:disabled):hover { background: var(--primary-2); }
button:not(.link):active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.secondary { background: var(--panel) !important; color: var(--text) !important; border: 1.5px solid var(--line-2) !important; box-shadow: none !important; }
button.secondary:hover:not(:disabled) { border-color: var(--accent) !important; }
button.danger { background: transparent !important; color: var(--bad) !important; border: 1.5px solid var(--bad-line) !important; }
button:disabled { opacity: .55; }
#start.big {
  min-height: 64px; padding: 16px 34px; font-size: 20px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary)); color: var(--on-primary);
  box-shadow: 0 10px 26px var(--glow), var(--shadow-1);
}

/* ---------- surfaces ---------- */
section > form, .lform, .goal, .block, .member, .chk, .plink, .hero, details.adv, .agreecard, .endcard,
.vsetup, .lessonrow, .sit, .today {
  background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important;
  box-shadow: var(--shadow-1);
}
input[type=text], input[type=date], input[type=email], input[type=password], select, textarea {
  background: var(--panel) !important; color: var(--text) !important; border: 1.5px solid var(--line-2) !important;
  border-radius: 14px !important; min-height: 52px; font: 400 17px var(--sans) !important; padding: 10px 14px !important;
}
input:focus-visible, select:focus-visible { border-color: var(--accent) !important; }
label, legend { color: var(--text-soft); font-weight: 600; }
.hint, .tip, .status, .pmeta, .mlast, .mrev, .gdate, .none { color: var(--muted); }
.langs button, .who-chip { border-radius: 999px; }
.langs button { min-height: 44px; min-width: 44px; padding: 0 14px; background: var(--panel); color: var(--text);
  border: 1.5px solid var(--line-2); font: 600 16px var(--sans); }
.langs button[aria-pressed=true] { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }

/* ---------- the lesson: a human presence in a portal ---------- */
.stage {
  background: var(--stage-ground) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -30px 60px rgba(0, 0, 0, .06), var(--shadow-2) !important;
  isolation: isolate;
}
/* the portal's rim shows whose turn it is, in colour AND in the label below (never colour alone) */
.ring { border-radius: var(--r-lg) !important; transition: box-shadow 220ms ease; }
.ring.listening { box-shadow: inset 0 0 0 4px var(--you), 0 0 0 6px color-mix(in srgb, var(--you) 22%, transparent) !important; }
.ring.speaking { box-shadow: inset 0 0 0 4px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent) !important; }

/* whose turn it is, in words, under the face (filled by app.js) */
.turn {
  justify-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 18px; border-radius: 999px; font: 700 18px var(--sans); color: var(--text);
  background: var(--tray); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}
.turn i { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.turn[data-s="you"] i { background: var(--you); }
.turn[data-s="tutor"] i { background: var(--accent); }
.turn[data-s="you"] i, .turn[data-s="tutor"] i { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.35); opacity: .7; } }

.say { font: 600 clamp(20px, 5.2vw, 26px)/1.4 var(--sans) !important; color: var(--text) !important; text-align: center; text-wrap: balance; }
.subs .line { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; }
.subs .line small { font: 700 14px var(--sans) !important; letter-spacing: .04em; }
.subs .line span { font-size: 18px; line-height: 1.5; }
.line.tutor small { color: var(--accent) !important; }
.line.you small { color: var(--you) !important; }

/* the control tray: the one glass surface, solid enough to read through */
#lesson > .controls:first-of-type {
  position: sticky; bottom: 12px; z-index: 5; justify-content: center; padding: 10px; border-radius: 999px;
  background: var(--tray); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
#stop.big { background: var(--panel) !important; color: var(--bad) !important; border: 2px solid var(--bad-line) !important; }

/* ---------- the journey route: Ghar -> waypoints -> Gate (learners.js, route()) ---------- */
.route { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2);
  padding: 22px 20px 18px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.route::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none; }
.route-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.route-head b { font: 600 clamp(20px, 5vw, 24px) var(--serif); }
.route-head span { color: var(--muted); font-size: 16px; }
.route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.route li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; min-height: 56px; position: relative; }
.route li::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 11px); }
.route li:first-child::before { top: 50%; }
.route li:last-child::before { bottom: 50%; }
.route li.done::before { background: var(--primary); }
.route .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--panel); border: 2px solid var(--line-2); font: 700 16px var(--sans); color: var(--muted); }
.route li.done .dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.route li.now .dot { border-color: var(--you); color: var(--you); box-shadow: 0 0 0 6px color-mix(in srgb, var(--you) 18%, transparent); }
.route li.end .dot { border-radius: 10px; }
.route .wp { font: 600 18px var(--sans); color: var(--text); }
.route .wp small { display: block; font: 400 16px var(--sans); color: var(--muted); }
.route .st { font: 700 15px var(--sans); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.route li.done .st { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.route li.now .st { color: var(--you); background: color-mix(in srgb, var(--you) 14%, transparent); }
.route li.ahead .st { color: var(--muted); }
.route-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px dashed var(--line-2); padding-top: 14px; }
.route-next p { margin: 0; font: 600 18px var(--sans); }
a.go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font: 700 17px var(--sans); text-decoration: none; box-shadow: var(--shadow-1); }
a.go:hover { background: var(--primary-2); }
.route-next p small { display: block; font: 400 16px var(--sans); color: var(--muted); }

/* ---------- consent: respect before interaction ---------- */
.agreecard h2 { font: 600 clamp(24px, 6vw, 30px) var(--serif) !important; }
.agreecard li { color: var(--text-soft) !important; font-size: 18px !important; }
.agreecard .controls { gap: 12px; }

/* ---------- theme button beside A+ (i18n.js adds it) ---------- */
.langs button[data-theme-toggle] { font-size: 18px; }

/* ---------- old phones and calm settings ---------- */
html.lite .turn, html.lite #lesson > .controls:first-of-type { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
html.lite .stage, html.lite .route { box-shadow: var(--shadow-1) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .turn, #lesson > .controls:first-of-type { background: var(--panel); }
}

/* sign-up: the promise and the two choices read at full size */
.points span, .points b, .kind span, .kind b, .hero p { font-size: 16px !important; line-height: 1.5; }
.hero h2 { font: 600 clamp(24px, 6vw, 32px)/1.25 var(--serif) !important; }
.kind { min-height: 64px; border-radius: var(--r) !important; border: 1.5px solid var(--line-2) !important; background: var(--panel) !important; }
.kind[aria-pressed=true] { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--glow) !important; }

/* cards that had no inner margin before they became cards */
.hero, .block { padding: 22px 20px !important; }
.hero .hero-text { min-width: 0; }

/* "Help" and "More settings": a plain row that opens, not an empty box */
details.adv, details.help { padding: 0 !important; }
details.adv > summary, details.help > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px;
  font: 600 17px var(--sans); color: var(--text); text-align: left; cursor: pointer; list-style-position: inside; }
details.adv[open] > summary, details.help[open] > summary { border-bottom: 1px solid var(--line); }
details.adv > :not(summary), details.help > :not(summary) { margin: 14px 20px; }
/* a family member's card: name and the days-left label never overlap */
.member header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.member header > div { min-width: 0; flex: 1; }

/* ============================================================================================================
   THE CALL — the lesson is a video call with the tutor (18 Oct 2026).
   Parents of 55-70 already know one screen by heart: a video call with their child. So the lesson borrows it.
   Her face fills the phone; whose turn it is shows as light at the screen's edge AND in words; what she just said
   is a caption over a dark fade; the board arrives like a shared screen while she moves to a small window; the one
   button is green to begin and red to end. Fixed "night glass" colours here in both themes: text sits on a fade
   of 74-92% black over the picture, so white text stays well above 4.5:1 whatever the picture behind it.
   ============================================================================================================ */
html.call {
  --call-ink: #FFFFFF;  --call-soft: rgba(255, 255, 255, .88);  --call-dim: rgba(255, 255, 255, .76);
  --call-glass: rgba(10, 17, 24, .55);  --call-glass-2: rgba(10, 17, 24, .82);  --call-line: rgba(255, 255, 255, .22);
  --call-tutor: #9BD8FF;  --call-you: #FFD27A;  --call-live: #7BE0C9;  --call-end: #D8363C;
  --call-fade: 10, 16, 22;
  --display: "Noto Serif Display", "Noto Serif", "Noto Serif Gujarati", "Noto Serif Devanagari", Georgia, serif;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
  --hangup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E");
}
.callui { display: contents; }
.calltop, .lobby, .callhint { display: none; }

html.call body { background-image: none; }
html.call main { max-width: none; padding: 0 0 40px; gap: 0; display: grid; grid-template-columns: 100%;
  grid-template-rows: auto auto 1fr; }
html.call main > header, html.call #whoChip, html.call #lesson { grid-column: 1; }
html.call #lesson { grid-row: 1 / -1; display: block; }
html.call main > header, html.call #whoChip { position: relative; z-index: 6; justify-self: center; width: min(100%, 560px);
  transition: opacity 400ms var(--ease-out), visibility 400ms; }
html.call main > header { grid-row: 1; align-self: start; justify-content: flex-end; padding: max(14px, env(safe-area-inset-top)) 16px 0; }
html.call main > header::before { display: none; }
html.call #title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.call #status:empty { display: none; }
html.call #status { color: var(--call-ink); }
html.call .langs { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
html.call .langs button { background: var(--call-glass) !important; color: var(--call-ink) !important; border: 1px solid var(--call-line) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
html.call .langs button[aria-pressed=true] { background: var(--call-ink) !important; color: #12202C !important; border-color: var(--call-ink) !important; }
html.call #whoChip { grid-row: 2; align-self: start; display: block; padding: 10px 16px 0; color: var(--call-soft); line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
html.call #whoChip[hidden] { display: none; }
html.call #whoChip b, html.call #whoChip a { color: var(--call-ink); }
html.call.oncall main > header, html.call.oncall #whoChip { opacity: 0; visibility: hidden; }

/* the stage: the whole phone; on a bigger screen a tall window with rounded corners */
html.call #lesson > .stage { width: 100%; max-width: none; height: 100svh; min-height: 600px; aspect-ratio: auto; margin: 0;
  border: 0 !important; border-radius: 0 !important; background: #0E151C !important; box-shadow: none !important; }
@media (min-width: 600px) {
  html.call #lesson > .stage { width: min(100% - 32px, 560px); height: min(100svh - 32px, 1000px); margin: 16px auto 0;
    border-radius: 34px !important; box-shadow: 0 2px 6px rgba(10, 20, 30, .12), 0 40px 100px rgba(10, 20, 30, .32) !important; }
  html.call main > header { padding-top: 32px; padding-right: 32px; }
  html.call #whoChip { padding-left: 32px; padding-right: 32px; }
}
/* her picture is square: it keeps its shape (the mouth and blink layers are placed in % of it) and fills the
   height, centred, so a tall phone sees her face and shoulders as in a call */
html.call .tutorbox { border-radius: inherit; animation: arrive 1100ms var(--ease-out) both; }
html.call .head { inset: 0 auto auto 50%; height: 100%; width: auto; aspect-ratio: 1 / 1; translate: -50% 0; }
@keyframes arrive { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } }
/* whose turn: light at the edge of the screen — blue while she speaks, gold while she hears you */
html.call .ring { border-radius: inherit !important; transition: box-shadow 450ms var(--ease-out); }
html.call .ring.speaking { box-shadow: inset 0 0 0 3px var(--call-tutor), inset 0 0 110px rgba(155, 216, 255, .30) !important; }
html.call .ring.listening { box-shadow: inset 0 0 0 3px var(--call-you), inset 0 0 110px rgba(255, 210, 122, .34) !important; }

/* the layer over her picture */
html.call .callui { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none; color: var(--call-ink); }
html.call .calltop { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 16px 48px;
  background: linear-gradient(rgba(var(--call-fade), .62), rgba(var(--call-fade), 0)); opacity: 0; transition: opacity 500ms var(--ease-out); }
html.call.oncall .calltop { opacity: 1; }
.livepill, .clock { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--call-glass); border: 1px solid var(--call-line); font: 600 16px var(--sans); color: var(--call-ink);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.livepill b { font: 600 17px var(--serif); }
.livepill span { color: var(--call-dim); font-weight: 600; }
.livepill i { width: 9px; height: 9px; border-radius: 50%; background: var(--call-dim); }
html.islive .livepill i { background: var(--call-live); box-shadow: 0 0 0 4px rgba(123, 224, 201, .22); animation: breathe 2s ease-in-out infinite; }
.clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

html.call .callbottom { display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: 110px 20px max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(var(--call-fade), 0), rgba(var(--call-fade), .74) 110px, rgba(var(--call-fade), .92)); }
html.call .callbottom > * { pointer-events: auto; max-width: 520px; width: 100%; }
html.call .callbottom > [hidden] { display: none !important; }

/* before the call: a greeting, today's task, one button */
html.call .lobby { display: grid; gap: 6px; }
html.call.oncall .lobby { display: none; }
html.call .hello { margin: 0; font: 600 clamp(34px, 9.6vw, 46px)/1.1 var(--display); letter-spacing: -.01em; text-wrap: balance;
  animation: rise 900ms 250ms var(--ease-out) both; }
html.call .readyline { margin: 0; font: 400 19px/1.4 var(--sans); color: var(--call-soft); animation: rise 900ms 380ms var(--ease-out) both; }
html.call #todayTip { margin: 8px auto 0; padding: 10px 16px; border-radius: 16px; max-width: 36ch; font-size: 16px !important; line-height: 1.5;
  color: var(--call-soft); background: var(--call-glass); border: 1px solid var(--call-line); animation: rise 900ms 500ms var(--ease-out) both; }
html.call #todayTip[hidden] { display: none; }
html.call #todayTip b { color: var(--call-you); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* whose turn, in words: one pill, the same colour as the light at the edge */
html.call .turn { display: none !important; }
html.call .say { justify-self: center; width: auto !important; display: inline-flex; align-items: center; gap: 10px; margin: 0; border-radius: 24px !important;
  min-height: 48px; padding: 8px 20px; font: 700 19px/1.3 var(--sans) !important; color: var(--call-ink) !important;
  background: var(--call-glass); border: 1px solid var(--call-line); text-align: left;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
html.call .say::before { content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--call-dim); }
html.call .say.listen::before { background: var(--call-you); animation: breathe 1.6s ease-in-out infinite; }
html.call .say.speaking::before { background: var(--call-tutor); animation: breathe 1.6s ease-in-out infinite; }
html.call .say.warn { color: #FFE2BF !important; border-color: rgba(255, 179, 107, .6); }
html.call .say.warn::before { background: #FFB36B; }
html.call .say.listen { border-color: rgba(255, 210, 122, .55); }
html.call .say.speaking { border-color: rgba(155, 216, 255, .55); }
html.call:not(.oncall) .say[data-key="say_ready"] { display: none; }
html.call .micbar { width: 140px !important; height: 4px; margin: -6px auto 0; background: rgba(255, 255, 255, .18); }
html.call .micbar i { background: var(--call-you); }

/* what was said: captions, not boxes */
html.call .subs { display: none; gap: 10px; min-height: 0; text-align: left; }
html.call.oncall .subs { display: grid; }
html.call .subs .line { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none; }
html.call .subs .line small { font: 700 14px var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
html.call .line.tutor small { color: var(--call-tutor) !important; }
html.call .line.you small { color: var(--call-you) !important; }
html.call .line.tutor span { font: 500 clamp(21px, 5.6vw, 25px)/1.4 var(--serif); color: var(--call-ink); max-height: 4.3em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
html.call .line.you span { font-size: 17px; line-height: 1.5; color: var(--call-soft); max-height: 3em; }
html.call .callhint { margin: -2px 0 0; font-size: 16px; line-height: 1.45; color: var(--call-dim); }
html.call.islive .callhint { display: block; }

/* the button: green to begin, red to end — the colours of every call screen */
html.call .callbar { gap: 12px; }
html.call #start.big { width: 100%; max-width: 380px; min-height: 64px; font-size: 20px; letter-spacing: .01em;
  background: linear-gradient(180deg, #13A08E, #00796B) !important; color: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 34px rgba(0, 121, 107, .45) !important;
  animation: rise 900ms 620ms var(--ease-out) both; }
html.call #start.big:hover { background: linear-gradient(180deg, #19B19D, #00897A) !important; }
html.call #stop.big { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; min-height: 64px; font-size: 20px;
  background: var(--call-end) !important; color: #FFFFFF !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 34px rgba(216, 54, 60, .45) !important; }
html.call #stop.big[hidden] { display: none; }
html.call #stop.big::before { content: ""; width: 26px; height: 26px; margin-right: 10px; flex: none; background: currentColor;
  -webkit-mask: var(--hangup) center / contain no-repeat; mask: var(--hangup) center / contain no-repeat; }
html.call #alt { color: var(--call-soft) !important; text-decoration: underline; text-underline-offset: 4px; }
html.call.oncall #alt { display: none; }

/* after the call */
html.call .endcard { background: var(--call-glass-2) !important; border: 1px solid var(--call-line) !important; color: var(--call-ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: none; animation: rise 700ms var(--ease-out) both; }
html.call .endcard b { font: 600 26px var(--display); }
html.call .endcard p, html.call .endcard .rate span, html.call .endcard .hint { color: var(--call-soft) !important; }
html.call .endcard button.secondary { background: transparent !important; color: var(--call-ink) !important; border-color: var(--call-line) !important; }

/* the board: arrives like a shared screen; she moves to a small window over its corner and keeps talking */
html.call .board { inset: calc(max(14px, env(safe-area-inset-top)) + 60px) 12px 44% 12px; border-radius: 26px; z-index: 3;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: share 650ms var(--ease-out) both; }
@keyframes share { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
html.call .stage.boarding .tutorbox { inset: auto 24px calc(44% - 70px) auto; width: 108px; height: 144px; border-radius: 22px; z-index: 5;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 16px 40px rgba(0, 0, 0, .6); animation: none; }
html.call .stage.boarding .tutorbox .ring { border-radius: inherit !important; }
html.call .bbody.draw { padding-bottom: 22%; }
html.call .bback { top: calc(max(14px, env(safe-area-inset-top)) + 62px); left: 16px; z-index: 5; }

/* under the call (scroll down): the tip, help and settings, on the page's own colours */
html.call #lesson > :not(.stage) { width: min(100% - 32px, 560px); margin: 18px auto 0; }

/* larger text (A+) reaches the captions too */
html.call.big .line.tutor span { font-size: 28px; }
html.call.big .line.you span, html.call.big .callhint { font-size: 20px; }
html.call.big .say { font-size: 22px !important; }

html.lite.call .langs button, html.lite .livepill, html.lite .clock, html.lite.call .say, html.lite.call .endcard {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--call-glass-2) !important; }
html.lite.call .tutorbox, html.lite.call .hello, html.lite.call .readyline, html.lite.call #todayTip, html.lite.call #start.big { animation: none; }
/* before the call the top fade sits behind the language and family links; the live pills appear only on a call */
html.call:not(.oncall) .calltop { opacity: 1; min-height: 190px; background: linear-gradient(rgba(var(--call-fade), .7), rgba(var(--call-fade), .35) 55%, rgba(var(--call-fade), 0)); }
html.call:not(.oncall) .calltop > * { visibility: hidden; }
html.call #status a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--call-ink);
  background: var(--call-glass); border: 1px solid var(--call-line); text-decoration: none; font-weight: 600; }
/* while the board is up: no fade over it, and the turn label moves left so her small window never covers it */
html.call .stage.boarding .callbottom { padding-top: 28px; background: linear-gradient(rgba(var(--call-fade), 0), rgba(var(--call-fade), .5) 28px); }
html.call .stage.boarding .say { justify-self: start; max-width: calc(100% - 140px); }
html.call .stage.boarding .micbar { justify-self: start; margin-left: 8px; }
html.call .bwrong { all: unset; position: absolute; right: 0; bottom: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 4px 0 12px; font: 400 15px var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  background: none !important; box-shadow: none !important; }
html.call .stage.boarding .bcredit { max-width: 100%; }
/* the board is always a light card held up to the camera, in both themes: it stands apart from the dark call */
html.call .board { color-scheme: light; --bg: #F7F4ED; --panel: #FFFFFF; --panel-2: #F1EBE0; --line: #DED6C8; --line-2: #C9BEAC;
  --text: #172536; --text-soft: #2E3F52; --muted: #536579; --you: #8A5A00; --accent: #155B83;
  background: linear-gradient(170deg, #FFFFFF, #F4EFE6) !important; border-color: rgba(255, 255, 255, .6); }
html.call .board::before { opacity: .35; background-image: linear-gradient(rgba(23, 37, 54, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 37, 54, .05) 1px, transparent 1px); }
html.call .bnav button { background: rgba(23, 37, 54, .06); }
/* credit at the top, "wrong picture" at the bottom left: her small window sits bottom right */
html.call .bcredit { top: -4px; bottom: auto; font-size: 14px; }
html.call .bwrong { left: 0; right: auto; bottom: 0; top: auto; }
html.call .stage.boarding .calltop { background: none; }
/* the family links before a call sit on their own dark glass: readable over any part of the picture */
html.call #whoChip:not([hidden]) { width: fit-content; max-width: min(100% - 32px, 528px); margin: 10px 16px 0; padding: 6px 14px;
  border-radius: 18px; background: var(--call-glass-2); border: 1px solid var(--call-line); text-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); justify-self: start; }
@media (min-width: 600px) { html.call #whoChip:not([hidden]) { justify-self: center; } }
/* board text at phone size: the heading 14 px, the meaning under each sentence 16 px, the arrows 48 px */
html.call .bhead { font-size: 14px; }
html.call .bline .mean { font-size: max(16px, 3.5cqw); }
html.call .bnav button { width: 48px; height: 48px; line-height: 46px; }
/* one slim line, never over her eyes; on a narrow phone the end of it slides sideways (sign out is last) */
html.call #whoChip:not([hidden]) { display: flex; align-items: center; white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 0 14px; min-height: 48px; line-height: 1; border-radius: 999px; overscroll-behavior-x: contain; }
html.call #whoChip::-webkit-scrollbar { display: none; }
html.call #whoChip a { min-height: 44px; flex: none; }
html.call #lesson .controls { justify-content: center; }

/* ---------- polish pass (18 Oct 2026, from the outside research that fits this audience) ----------
   Movement: a heavy, calm spring (mass 1, stiffness 180, damping 24: settles with about 0.1% overshoot), computed
   once and written as a CSS curve; phones too old for it keep the ease-out above. Buttons answer the finger at
   once (pressed in by 3%). The voice line replaces the thin bar. A dropped connection dims her, it never blanks. */
@supports (transition-timing-function: linear(0, 1)) {
  html.call {
    --ease-out: linear(0, 0.0812, 0.2344, 0.4015, 0.554, 0.6805, 0.7791, 0.8524, 0.9047, 0.9409, 0.965, 0.9805, 0.9901, 0.9958,
      0.9989, 1.0005, 1.0012, 1.0013, 1.0012, 1.001, 1.0008, 1.0006, 1.0004, 1.0003, 1.0002, 1.0001, 1.0001, 1, 1, 1);
  }
}
html.call .tutorbox { transition: inset 700ms var(--ease-out), width 700ms var(--ease-out), height 700ms var(--ease-out),
  border-radius 700ms var(--ease-out), box-shadow 700ms var(--ease-out); }
button { transition: transform 140ms var(--ease-out, ease), box-shadow 160ms ease, background 160ms ease; }
button:active:not(:disabled) { transform: scale(.97) !important; }
html.call #start.big:active, html.call #stop.big:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px rgba(0, 0, 0, .3) !important; }

/* the voice line */
html.call .micbar { width: 220px !important; height: 36px; margin: -4px auto -6px; background: none; border-radius: 0; overflow: visible; }
html.call .micbar i { display: none; }
#wave { display: none; }
html.call #wave { display: block; width: 220px; height: 36px; }
html.call .stage.boarding #wave { width: 160px; }
html.call .stage.boarding .micbar { width: 160px !important; }

/* the line drops: she dims and waits; the pill says it is reconnecting; nothing else changes */
html.call .head { transition: filter 600ms ease; }
html.reconnecting.call .head { filter: brightness(.55) saturate(.6); }
html.reconnecting.call .say::before { background: #FFB36B; animation: breathe 1.2s ease-in-out infinite; }

/* multi-layer soft shadow and a hairline of light on the one raised surface: the board card */
html.call .board { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .22),
  0 30px 70px rgba(0, 0, 0, .38); }
html.reconnecting .livepill i { background: #FFB36B; box-shadow: 0 0 0 4px rgba(255, 179, 107, .22); }
html.call .stage.boarding .callbottom { background: none; }
/* she heard you and is answering: a slow blue pulse, between "your turn" and "she speaks" */
html.call .say.thinking { border-color: rgba(155, 216, 255, .4); }
html.call .say.thinking::before { background: var(--call-tutor); opacity: .8; animation: breathe 2.4s ease-in-out infinite; }

/* ============================================================================================================
   THE OTHER PAGES — brought up to the call (18 Oct 2026).
   Same family as the lesson: the display serif for titles, her face as the welcome, fewer boxes, layered soft
   shadows with a hairline of light, one 8-point rhythm (8 / 16 / 24 / 32), links that look like a quiet menu
   rather than underlined text. Light "Arrival Ivory" stays the ground: these pages are read and filled in.
   ============================================================================================================ */
:root {
  --display: "Noto Serif Display", "Noto Serif", "Noto Serif Gujarati", "Noto Serif Devanagari", Georgia, serif;
  --lift: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(23, 37, 54, .05), 0 6px 16px rgba(23, 37, 54, .05),
    0 18px 40px rgba(23, 37, 54, .06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lift: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3); } }
:root[data-theme="dark"] { --lift: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3); }

/* titles: the display serif, as in the lesson greeting */
html:not(.call) h1 { font: 600 clamp(30px, 8vw, 42px)/1.12 var(--display); letter-spacing: -.01em; }
html:not(.call) main { gap: 24px; padding-top: 24px; }
html:not(.call) main > header { row-gap: 12px; }

/* the account links: a quiet menu of pills, not a wrapped line of underlined words */
html:not(.call) #status, html:not(.call) #whoChip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); }
html:not(.call) #status:empty { display: none; }
html:not(.call) #whoChip[hidden] { display: none; }
html:not(.call) #status a, html:not(.call) #whoChip a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px !important; border-radius: 999px; text-decoration: none;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); font-weight: 600; box-shadow: var(--shadow-1); }
html:not(.call) #status a:hover, html:not(.call) #whoChip a:hover { border-color: var(--accent); }
html:not(.call) #status a[data-signout], html:not(.call) #whoChip a[data-signout] { color: var(--muted); background: transparent; box-shadow: none; }
/* the " · " separators between links are text nodes: hidden by colour, the gap does the spacing */
html:not(.call) #status, html:not(.call) #whoChip { word-spacing: 0; }
html:not(.call) #whoChip b { color: var(--text); margin-right: 4px; }

/* surfaces: one radius, one shadow recipe, generous inside */
section > form, .lform, .goal, .block, .member, .chk, .plink, details.adv, .agreecard, .vsetup, .sit, .today, .route {
  border-radius: 24px !important; box-shadow: var(--lift) !important; }
.lform { padding: 24px !important; gap: 16px !important; }
.lform h2, .block h2, .route-head b, .agreecard h2 { font-family: var(--display) !important; letter-spacing: -.005em; }

/* sign-up: her face is the welcome, lit as in the lesson; the promise sits on it */
#auth .hero { position: relative; display: grid !important; align-items: end; min-height: min(560px, 118vw); padding: 0 !important;
  overflow: hidden; border-radius: 28px !important; border: 0 !important; background: #0E151C !important;
  box-shadow: 0 2px 6px rgba(10, 20, 30, .12), 0 30px 80px rgba(10, 20, 30, .28) !important; margin-bottom: 8px; isolation: isolate; }
#auth .hero-img { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  border: 0; border-radius: 0; z-index: -2; animation: arrive 1200ms cubic-bezier(.16, .84, .24, 1) both; }
#auth .hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(10, 16, 22, 0) 30%, rgba(10, 16, 22, .78) 62%, rgba(10, 16, 22, .94)); }
#auth .hero-text { padding: 24px 24px 28px; color: #FFFFFF; }
#auth .hero h2 { font: 600 clamp(30px, 8.4vw, 44px)/1.12 var(--display) !important; letter-spacing: -.01em; color: #FFFFFF; max-width: 18ch;
  margin: 0 0 12px; }
#auth .hero p { color: rgba(255, 255, 255, .88) !important; font-size: 17px !important; margin: 0; max-width: 46ch; }
@media (min-width: 760px) {
  #auth .hero { min-height: 520px; }
  #auth .hero-img { object-position: 70% 20%; }
  #auth .hero::after { background: linear-gradient(90deg, rgba(10, 16, 22, .94) 0%, rgba(10, 16, 22, .8) 38%, rgba(10, 16, 22, 0) 70%); }
  #auth .hero-text { max-width: 56%; align-self: center; padding: 48px; }
}
/* the four promises: plain lines with a brass rule, not four boxes */
#auth .points { gap: 0 !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; margin: 0 0 8px; }
#auth .points li { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  padding: 16px 4px !important; gap: 4px; }
#auth .points li b { font: 600 18px var(--serif) !important; color: var(--text); }
#auth .points li b::before { content: ""; display: block; width: 24px; height: 2px; background: var(--you); margin-bottom: 12px; }

/* the two kinds of account and the people: calm, roomy tiles */
.kind, .person { border-radius: 20px !important; box-shadow: var(--shadow-1); }
.person { padding: 24px 16px !important; gap: 8px !important; }
.person .mono { width: 72px !important; height: 72px !important; font: 600 28px var(--display) !important;
  background: radial-gradient(circle at 35% 30%, var(--panel), var(--panel-2)) !important; border: 1px solid var(--line-2) !important; }
.person .pname { font: 600 21px var(--display) !important; }

/* choosing a tutor: portraits, as in a gallery, the name set on the picture */
#grid { gap: 16px !important; }
.card { position: relative; border-radius: 24px !important; box-shadow: var(--lift) !important; padding-bottom: 16px !important; }
.card img { aspect-ratio: 4 / 5 !important; object-position: 50% 22%; margin-bottom: 0 !important; }
.card .cname { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; padding: 16px !important;
  font: 600 26px var(--display) !important; color: #FFFFFF; pointer-events: none;
  background: linear-gradient(rgba(10, 16, 22, 0) 55%, rgba(10, 16, 22, .82)); }
.card .ctitle { padding: 16px 16px 0 !important; }
.card .cblurb { padding: 4px 16px 0 !important; }
.card:hover:not(:disabled) { transform: translateY(-3px); }
.card.soon .cname { background: linear-gradient(rgba(10, 16, 22, 0) 55%, rgba(10, 16, 22, .6)); }

/* progress and family: big numbers in the display serif */
.tile b, .chk .score, .goal .gdate b { font-family: var(--display) !important; }
.tile { border-radius: 18px !important; padding: 16px !important; box-shadow: var(--shadow-1); }

html.lite #auth .hero-img { animation: none; }
html.lite section > form, html.lite .lform, html.lite .card, html.lite .route { box-shadow: var(--shadow-1) !important; }
/* each menu is one line that slides sideways on a narrow phone (a fade at the edge says there is more);
   the " · " separators are hidden: the gap between the buttons does that job */
html:not(.call) #status, html:not(.call) #whoChip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 0 !important;
  padding: 2px 24px 6px 2px; margin: -2px 0 0 -2px; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html:not(.call) #status::-webkit-scrollbar, html:not(.call) #whoChip::-webkit-scrollbar { display: none; }
html:not(.call) #status a, html:not(.call) #whoChip a, html:not(.call) #whoChip b, html:not(.call) #whoChip span, html:not(.call) #status b {
  font-size: 16px !important; flex: none; }
html:not(.call) #whoChip span { color: var(--muted); }
html:not(.call) main > header { flex-wrap: wrap; }
html:not(.call) main > header > #status { flex: 1 1 100%; min-width: 0; }
.langs { flex-wrap: wrap; }      /* with large text (A+) the five buttons wrap instead of pushing the page sideways */

/* ---------- the house mark: Elocia (D-020). The tutor (emerald) and you (brass) face each other; the dot is the
   spoken moment between you. Same two colours the lesson uses for whose turn it is. ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  min-height: 44px; flex: 0 0 100%; order: -1; }
.brand .mk { width: 34px; height: 32px; flex: none; overflow: visible; }
.brand .mk path { fill: none; stroke-width: 9; stroke-linecap: round; }
.brand .mk .t { stroke: var(--primary); }
.brand .mk .y { stroke: var(--you); }
.brand .mk circle { fill: var(--text); }
.brand span { font: italic 600 32px/1 "Cormorant Garamond", var(--serif); letter-spacing: .005em; transform: translateY(-2px); }
main > header::before { display: none; }          /* the old route-line mark gives way to the name */
html.call .brand { display: none; }                /* on the call, her face is the brand */

/* ---------- welcome page: how it works, beside a real lesson screen in a phone ---------- */
#auth .how { display: grid; gap: 24px; align-items: center; margin: 8px 0 24px; }
@media (min-width: 760px) { #auth .how { grid-template-columns: 300px 1fr; gap: 48px; } }
.phone { margin: 0 auto; width: min(280px, 72vw); aspect-ratio: 600 / 1298; border-radius: 40px; padding: 8px; background: #10161D;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(10, 20, 30, .15), 0 30px 70px rgba(10, 20, 30, .30); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }
#auth .steps h2 { font: 600 clamp(26px, 6.4vw, 34px)/1.15 var(--display); margin: 0 0 16px; letter-spacing: -.005em; }
#auth .steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
#auth .steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; row-gap: 4px; counter-increment: step; }
#auth .steps li::before { content: counter(step); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 600 18px var(--display); color: var(--you); border: 1.5px solid var(--warn-line); background: var(--panel); }
#auth .steps li b { font: 600 18px/1.35 var(--sans); color: var(--text); }
#auth .steps li span { font-size: 16px; line-height: 1.55; color: var(--text-soft); }
#auth .trust { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
#auth .native { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 17px/1.5 var(--sans); color: var(--primary); }
#auth .wa-share { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 18px; min-height: 48px;
  border-radius: 999px; border: 1.5px solid var(--line-2); font: 600 16px var(--sans); color: var(--text); text-decoration: none; }
#auth .wa-share::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #25D366; }
#auth .wa-share:hover { border-color: var(--accent); }
@media (min-width: 760px) { #auth .authform { margin-left: auto !important; margin-right: auto !important; } }
/* On the call nothing is blurred: her head sways every frame, so every blurred pill over it is re-drawn every frame,
   which costs a cheap phone's graphics chip (perf_phone.py, 19 Oct). Solid dark glass reads the same over the fade. */
html.call .langs button, html.call .livepill, html.call .clock, html.call .say, html.call .endcard, html.call #whoChip, html.call #todayTip {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.call .livepill, html.call .clock, html.call .say, html.call .langs button:not([aria-pressed=true]) { background: rgba(10, 17, 24, .72) !important; }
/* outside a lesson she still breathes and sways a little, run by the graphics chip, not by the page's code */
html:not(.facemoving) .head { animation: idle 9s ease-in-out infinite; }
@keyframes idle {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(.24px, .2px) rotate(.15deg) scale(1.003); }
  50% { transform: translate(0, -.2px) rotate(0deg) scale(.998); }
  75% { transform: translate(-.24px, .1px) rotate(-.15deg) scale(1.002); }
}

/* ============================================================================================================
   THE CALL ON A WIDE SCREEN (laptop, desktop, tablet held sideways) — 21 Oct 2026, item 34.
   Full screen, like a film or a FaceTime call: her face at full height in the middle, the sides a soft dark blur of
   her own picture, the captions wide at the bottom. When she shows the board it slides in on the right as a large
   card and she moves to the left — still full size, still talking — instead of shrinking into a small window.
   ============================================================================================================ */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html.call #lesson > .stage { width: 100%; height: 100svh; min-height: 560px; margin: 0; border-radius: 0 !important;
    box-shadow: none !important; }
  html.call #lesson > .stage::before { content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none;
    background: var(--face, none) center 30% / cover no-repeat; filter: blur(52px) brightness(.4) saturate(1.15); }
  html.call .head { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    transition: left 900ms var(--ease-out); }
  html.call main > header { width: 100%; padding: 28px 40px 0; }
  html.call #whoChip:not([hidden]) { justify-self: start; margin: 12px 40px 0; }
  html.call .calltop { padding: 28px 40px 64px; }
  html.call .callbottom { padding: 140px 40px 36px; gap: 16px; }
  html.call .callbottom > * { max-width: 760px; }
  html.call .hello { font-size: clamp(46px, 4.4vw, 68px); }
  html.call .line.tutor span { font-size: clamp(24px, 1.8vw, 30px); }
  html.call .line.you span { font-size: 19px; }
  html.call #start.big { max-width: 420px; }

  /* the board beside her, not over her */
  html.call .board { inset: 104px 4vw 112px auto; width: min(46vw, 780px); border-radius: 28px; z-index: 6; }
  html.call .stage.boarding .tutorbox { inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; z-index: auto; }
  html.call .stage.boarding .tutorbox .ring { border-radius: 0 !important; }
  html.call .stage.boarding .head { left: 28%; }
  html.call .stage.boarding .calltop { background: linear-gradient(rgba(var(--call-fade), .62), rgba(var(--call-fade), 0)); }
  html.call .stage.boarding .callbottom { padding-top: 140px;
    background: linear-gradient(rgba(var(--call-fade), 0), rgba(var(--call-fade), .74) 140px, rgba(var(--call-fade), .92)); }
  /* while the board is up: her words, the turn and End sit under her, on the left half */
  html.call .stage.boarding .callbottom { justify-items: start; }
  html.call .stage.boarding .callbottom > * { max-width: min(760px, 44vw); }
  html.call .stage.boarding .say { justify-self: start; max-width: min(760px, 44vw); }
  html.call .stage.boarding .micbar { justify-self: start; margin-left: 12px; }
  html.call .stage.boarding .callhint { text-align: left; }
  html.call .stage.boarding .callbar { justify-content: flex-start !important; }
  html.call .bbody.draw { padding-bottom: 4%; }
  html.call .bback { top: 104px; left: 40px; }
}
/* the board's own text colours always win over the call's white text and the general button style */
html.call .board { color: var(--text); }
html.call .bwrong { color: var(--muted) !important; min-height: 44px !important; padding: 0 4px !important; font-weight: 400 !important; box-shadow: none !important; }

/* ============================================================================================================
   CHOOSING A TUTOR — a row of big portraits that slides left and right (21 Oct 2026, item 34b).
   The one in the middle is the choice: full size and bright; the others step back. The whole page takes on the
   light of the tutor in the middle (a soft blur of the portrait, cross-faded). Native scroll-snap: smooth on cheap
   phones, swipe with a finger, arrows and keyboard on a computer.
   ============================================================================================================ */
html.pickmode body { background: #0B1117; background-image: none; }
html.pickmode main { max-width: none; padding: 24px 0 48px; }
html.pickmode main > header, html.pickmode #whoChip:not([hidden]) { padding-left: 24px; padding-right: 24px; }
html.pickmode h1, html.pickmode .brand span { color: #FFFFFF; }
html.pickmode .brand .mk circle { fill: #FFFFFF; }
html.pickmode .brand .mk .t { stroke: #7BE0C9; }
html.pickmode .brand .mk .y { stroke: #D4B48C; }
html.pickmode .langs button { background: rgba(10, 17, 24, .55) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .25) !important; }
html.pickmode .langs button[aria-pressed=true] { background: #FFFFFF !important; color: #12202C !important; }
html.pickmode #whoChip span { color: rgba(255, 255, 255, .75); }
#picker { position: relative; }
.pickbg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pickbg i { position: absolute; inset: -80px; background: center 25% / cover no-repeat; filter: blur(54px) brightness(.36) saturate(1.15);
  opacity: 0; transition: opacity 1000ms ease; }
.pickbg i.show { opacity: 1; }
#picker .pick-lead { color: rgba(255, 255, 255, .82); text-align: center; padding: 0 24px; margin: 0 auto 8px; max-width: 52ch; font-size: 17px !important; }
#picker .carousel { --sw: min(74vw, 340px); position: relative; }
#picker .track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none;
  padding: 24px calc(50% - var(--sw) / 2) 28px; overscroll-behavior-x: contain; }
#picker .track::-webkit-scrollbar { display: none; }
#picker .slide { all: unset; box-sizing: border-box; flex: 0 0 var(--sw); scroll-snap-align: center; display: grid; gap: 8px; cursor: pointer;
  transform: scale(.86); opacity: .5; transform-origin: 50% 40%;
  transition: transform 600ms var(--ease-out, cubic-bezier(.16, .84, .24, 1)), opacity 600ms ease; }
#picker .slide.on { transform: none; opacity: 1; }
#picker .sface { display: block; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #1A2430;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 70px rgba(0, 0, 0, .5); }
#picker .sface img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
#picker .slide.soon .sface img { filter: grayscale(.7) brightness(.8); }
#picker .sname { margin-top: 8px; text-align: center; font: 600 clamp(30px, 7vw, 40px)/1.1 var(--display); color: #FFFFFF; }
#picker .straits { text-align: center; font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #FFD27A; }
#picker .sblurb { justify-self: center; max-width: 30ch; text-align: center; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .8);
  opacity: 0; transition: opacity 500ms ease; }
#picker .slide.on .sblurb { opacity: 1; }
#picker .track:focus-visible .slide.on .sface { outline: 3px solid #FFFFFF; outline-offset: 4px; }
#picker .cnav { all: unset; box-sizing: border-box; position: absolute; z-index: 2; top: calc(24px + var(--sw) * 0.625); transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 32px; line-height: 1;
  color: #FFFFFF; background: rgba(10, 17, 24, .6); border: 1px solid rgba(255, 255, 255, .25); }
#picker .cnav.prev { left: max(12px, calc(50% - var(--sw) / 2 - 84px)); }
#picker .cnav.next { right: max(12px, calc(50% - var(--sw) / 2 - 84px)); }
#picker .cnav:disabled { opacity: .25; cursor: default; }
#picker .cnav:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 600px) { #picker .cnav { display: none; } }
#picker .pickgo { display: grid; justify-items: center; padding: 0 24px; }
#picker #pickGo { min-width: min(100%, 380px); min-height: 64px; font-size: 20px; }
html.lite .pickbg i { filter: none; opacity: 0 !important; }
html.pickmode, html.pickmode body { background: #0B1117 !important; }
html.pickmode body { background: transparent !important; }          /* else the page's own ground hides the light */
html.pickmode #whoChip b { color: #FFFFFF; }
#picker .pickgo { position: sticky; bottom: 16px; z-index: 3; }
@media (max-width: 600px) { #picker .carousel { --sw: min(66vw, 340px); } }
#picker .carousel { --sw: min(74vw, 320px, 36vh); }
@media (max-width: 600px) { #picker .carousel { --sw: min(66vw, 320px, 38vh); } }
#picker .pickgo { margin-top: -8px; padding: 28px 24px 4px; background: linear-gradient(rgba(11, 17, 23, 0), rgba(11, 17, 23, .94) 50%); }
@media (max-width: 600px) {
  html.pickmode h1 { font-size: 28px; }
  #picker .pick-lead { font-size: 16px !important; margin-bottom: 0; }
  #picker .carousel { --sw: min(60vw, 300px, 33vh); }
  #picker .track { padding-top: 16px; padding-bottom: 20px; }
}