/* Studytutor's public pages: the front page (register.html), the privacy notices, the terms and the safety page. The
   pages' content policy allows no inline styles, so everything is here. Classes for page writers (src/public/pages.ts):
   site-head (the top bar), doc (the page's main column), note (a short aside), callout (something important),
   site-foot (the standard footer, from {{footer}}). The front page alone uses home, hero, join, band and the rest.
   Colours, type and shapes come from the theme (theme.css, which every page loads first; docs/style-guide.md).
   Font: Figtree (text and headings), latin subsets, self-hosted under fonts/ (OFL.txt). */

/* ---------- the site's own settings: colours, type and shapes are the theme's (theme.css, loaded first) ---------- */
:root {
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5578' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.5l2 5.5 5.5 2-5.5 2-2 5.5-2-5.5-5.5-2 5.5-2zM18.5 14l1 2.8 2.8 1-2.8 1-1 2.7-1-2.7-2.8-1 2.8-1z'/%3E%3C/svg%3E");
  --wrap: 1120px;
  --gutter: 20px;
  --radius: var(--r-lg);
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="auto"] {
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b4d6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(52rem 30rem at 105% -6rem, var(--glow-a), transparent 70%) no-repeat,
    radial-gradient(44rem 26rem at -12% -2rem, var(--glow-b), transparent 70%) no-repeat,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- page frame ---------- */
.site-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 68px;
  padding: 10px max(var(--gutter), calc((100% - var(--wrap)) / 2));
  border-bottom: 1px solid var(--border);
}
/* The logo: 552x120 files, 3x a 40px height. */
.site-head a[href="/"] { display: inline-flex; flex: none; align-items: center; min-height: 44px; border-radius: 8px; }
.site-head a[href="/"] img { display: block; width: auto; height: 34px; }
@media (min-width: 560px) { .site-head a[href="/"] img { height: 40px; } }
@media (min-width: 920px) { .site-head a[href="/"] img { height: 44px; } }
.site-head .sign-in {
  display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 700; font-size: 16px; white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-head .sign-in:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 359px) { .site-head .sign-in { padding: 0 16px; } }

.site-foot {
  padding: 28px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 44px;
  border-top: 1px solid var(--border); background: var(--soft); font-size: 15px; color: var(--muted);
}
.site-foot nav { display: flex; flex-wrap: wrap; margin: 0 0 14px -10px; }
.site-foot nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--text); font-weight: 600; text-decoration: none;
}
.site-foot nav a:hover { color: var(--accent); text-decoration: underline; }
.site-foot p { margin: 0 0 6px; }
.site-foot p:first-of-type { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.site-foot p:first-of-type::before {
  content: ""; flex: none; width: 22px; height: 22px; background: var(--accent);
  -webkit-mask: var(--spark) center / contain no-repeat;
  mask: var(--spark) center / contain no-repeat;
}

/* ---------- asides, shared by every page ---------- */
.note { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.callout { background: var(--warm); border: 1px solid var(--warm-border); border-radius: 16px; padding: 14px 18px; margin: 0 0 16px; }
.note p, .callout p { margin: 0 0 10px; }
.note > :last-child, .callout > :last-child { margin-bottom: 0; }

/* ---------- headings ---------- */
.doc h1, .doc h2, .hero h1, .band h2, .card-label, .join-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.doc h3, .band h3 { font-family: var(--font-display); font-weight: 750; letter-spacing: -.012em; }

/* ---------- the notices, terms and safety pages: one readable column, about 72 characters a line ---------- */
.doc { max-width: calc(36em + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 64px; font-size: 18px; line-height: 1.7; }
.doc h1 { font-size: clamp(34px, 3vw + 22px, 52px); line-height: 1.06; margin: 20px 0 20px; }
.doc h2 { font-size: 26px; line-height: 1.2; margin: 52px 0 12px; }
.doc h2::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; margin-bottom: 16px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.doc h3 { font-size: 20px; line-height: 1.3; margin: 30px 0 6px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li { margin-bottom: 8px; padding-left: .2em; }
.doc li::marker { color: var(--accent); }
.doc strong { font-weight: 700; }
.doc > .note:first-child { display: inline-block; border-left: 0; border-radius: 14px; padding: 6px 16px; font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.doc table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 15px; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--accent-soft); }
@media (min-width: 700px) { .doc { padding-top: 48px; } }
/* The explainers and the questions and answers (docs/support-spec.md). */
.doc .lead-in { font-size: 20px; color: var(--text); }
.doc details.qa { border: 1px solid var(--border); border-radius: 14px; margin: 0 0 10px; background: var(--surface); }
.doc details.qa > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style-position: inside; border-radius: 14px; }
.doc details.qa > summary:hover { color: var(--accent); }
.doc details.qa > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.doc details.qa[open] > summary { border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; }
.doc details.qa > p { margin: 12px 16px; }
.hero-links { font-size: 16px; margin: -4px 0 18px; }
.hero-links a { font-weight: 700; }

/* ---------- the front page ---------- */
.hero, .hero-media { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.hero-media { margin: 0 auto; padding: 24px var(--gutter) 0; }
.hero-media:empty { display: none; }
.hero-media img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 24px; }

.hero { display: grid; gap: 32px; align-items: center; margin: 0 auto; padding: 36px var(--gutter) 56px; }
.hero-copy > * { max-width: 36rem; }
.hero h1 { font-size: clamp(36px, 4.4vw + 16px, 64px); line-height: 1.04; margin: 0 0 20px; }
@media (max-width: 359px) { .hero h1 { font-size: 32px; } }
.hl {
  background: linear-gradient(transparent 60%, var(--gold) 60%, var(--gold) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em;
}
.hero-sub { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 32em; margin: 0 0 18px; }
.lead { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.lead strong { color: var(--text); font-weight: 700; }
.where { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 600; }
.where-icon { flex: none; color: var(--accent); }

/* The card beside the headline: the waiting list (open), its closed message, the answer, and Sign in. Its art strip
   carries the mascot and the Beta sticker. */
.join { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.join::after {
  content: "Beta"; content: "Beta" / ""; position: absolute; top: 12px; right: 14px; transform: rotate(5deg);
  padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 15px; line-height: 1.4;
  box-shadow: 0 3px 0 var(--sticker-edge);
}
.join-art {
  display: flex; align-items: flex-end; gap: 8px; padding: 14px 16px 0; overflow: hidden;
  background:
    radial-gradient(var(--art-dots) 1.2px, transparent 1.7px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 55%, var(--blue-bright) 100%);
}
.join-art .mascot { flex: none; width: 88px; height: auto; margin-bottom: -2px; filter: drop-shadow(0 8px 14px var(--art-shadow)); }
.join-art svg { display: block; flex: 1; min-width: 0; height: auto; max-height: 124px; }
@media (min-width: 560px) { .join-art .mascot { width: 120px; } }
.join-body { padding: 24px 20px 22px; }
.join .callout { display: flex; gap: 16px; align-items: flex-start; background: none; border: 0; padding: 0; margin: 0; }
.callout-icon { flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.card-label { font-size: 22px; line-height: 1.2; margin: 2px 0 6px; }
.join .callout p { margin: 0 0 4px; }
.join-title { font-size: 26px; line-height: 1.15; margin: 0 0 18px; }
.signin-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-weight: 600;
}
.signin-line a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.signin-line a::after {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
}
.signin-line a:hover { background: var(--accent); color: var(--on-accent); }
/* Closed or full: Sign in is the card's one action. */
body[data-state="closed"] .signin-line a, body[data-state="full"] .signin-line a { background: var(--accent); color: var(--on-accent); }
body[data-state="closed"] .signin-line a:hover, body[data-state="full"] .signin-line a:hover { background: var(--accent-strong); }

/* Sections below the fold: full-width bands, content in the same column as the header. */
.band { padding: 56px max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.band-soft { background: var(--soft); border-block: 1px solid var(--border); }
.band h2 { font-size: clamp(28px, 1.8vw + 20px, 40px); line-height: 1.1; margin: 0 0 10px; }
.band h3 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; }
.section-head { max-width: 40rem; margin-bottom: 24px; }
.section-head p { font-size: 19px; color: var(--muted); margin: 0; }
.modes, .extras, .chips, .steps, .facts { list-style: none; margin: 0; padding: 0; }
.modes, .extras, .steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.mode, .steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--card-shadow); }
.mode p, .steps p, .facts p { margin: 0; color: var(--muted); }
.icon { display: grid; place-items: center; flex: none; }
.mode .icon { width: 54px; height: 54px; border-radius: 17px; margin-bottom: 18px; color: var(--ink); }
.mode-ask .icon { background: var(--accent); color: var(--on-accent); }
.mode-revise .icon { background: var(--gold); }
.mode-exam .icon { background: var(--sky); }

.extras { margin-top: 16px; }
.extras li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; border: 1.5px dashed var(--border); color: var(--muted); line-height: 1.4; }
.extras svg { flex: none; color: var(--accent); }
.extras strong { color: var(--text); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 13px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border); font-weight: 650; line-height: 1.3;
}
.chip::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 4px; transform: rotate(45deg); background: var(--accent); }
.c-english::before { background: var(--gold); }
.c-science::before { background: var(--sky); }
.c-humanities::before, .c-languages::before { background: var(--text); }
.small { font-size: 16px; color: var(--muted); max-width: 44rem; margin: 0; }

.steps { counter-reset: step; }
.steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.steps li > p { grid-column: 1 / -1; margin-top: 12px; }
.steps h3 { margin: 0; }
.steps li::before {
  content: counter(step); content: counter(step) / "";
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-weight: 800; font-size: 20px; background: var(--accent); color: var(--on-accent);
}
.steps li:nth-child(2)::before { background: var(--gold); color: var(--ink); }
.steps li:nth-child(3)::before { background: var(--sky); color: var(--ink); }

.facts { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.facts li { display: flex; align-items: flex-start; gap: 16px; }
.facts .icon { width: 46px; height: 46px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); }
.facts h3 { font-size: 19px; margin-top: 2px; }

@media (max-width: 559px) {
  .hero-sub { font-size: 18px; }
  .join .callout { gap: 12px; }
  .callout-icon { width: 40px; height: 40px; padding: 9px; border-radius: 13px; }
  .mode { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .mode .icon { grid-row: span 2; margin-bottom: 0; width: 48px; height: 48px; border-radius: 15px; }
  .mode h3 { align-self: center; }
}
@media (min-width: 560px) {
  .join-body { padding: 28px 32px; }
}
@media (min-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: 56px; padding-top: 48px; padding-bottom: 56px; }
  .hero-copy { padding-top: 36px; }
  .hero-copy > * { max-width: 40rem; }
  .band { padding-top: 52px; padding-bottom: 52px; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-areas: "head chips" "note chips"; column-gap: 56px; align-items: start; }
  .split .section-head { grid-area: head; margin-bottom: 12px; }
  .split .chips { grid-area: chips; margin: 6px 0 0; }
  .split .small { grid-area: note; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .facts li { flex-direction: column; gap: 14px; }
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 45px; right: -17px; width: 18px; height: 2px; background: var(--field);
  }
}
@media (prefers-color-scheme: dark) {
  .hl { background: none; color: var(--gold); }
  .c-science::before { background: none; box-shadow: inset 0 0 0 2px var(--sky); }  /* told from the blue dots by shape */
}

/* ---------- the example chat and progress page (register.html .demo, register.js) ----------
   A picture of the tutor drawn with the site's own tokens: the AI line, a student's message with a photo of a
   worksheet, the app's photo rule, the tutor's replies and the diagram pane, with the app's composer and tab bar as
   decoration; then the student's progress page below it, as the app draws it (public/app.js renderProgress): two of
   its figures, the subject's card with its coverage bar, and a band, a count and a score for each topic tried. The
   whole thing is in the HTML, so it reads as a transcript. register.js adds .play once the chat scrolls into view
   (once, and never under reduced motion): the rules below then fade the messages in one by one, draw the graph, and
   build the progress page row by row; .paused freezes them. Without the script, or with motion reduced, nothing moves
   and the finished picture is simply shown. */
.demo .section-head { margin-bottom: 20px; }
.device { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; }
.device-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--muted); }
.device-user { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 13px; }
.device-tag { padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.demo-play {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0;
  font: inherit; font-size: 14px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.demo-play:hover { background: var(--accent); color: var(--on-accent); }
.demo-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.demo.playing .demo-play::before { width: 11px; height: 14px; border-width: 0 4px; border-color: currentColor; }
.device-panes { display: grid; }
.demo-chat-col { display: flex; flex-direction: column; min-width: 0; }
.demo-chat { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.demo-chat > li { position: relative; display: flex; min-width: 0; }
.demo-chat > .student { justify-content: flex-end; }
.demo-ai { flex: 1; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; line-height: 1.45; }
.demo-chat .msg { max-width: 88%; padding: 9px 14px; border-radius: 14px; overflow-wrap: anywhere; }
.demo-chat .tutor > .msg { background: var(--soft); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.demo-chat .student > .msg { max-width: min(88%, 440px); background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.demo-photo { display: block; width: 104px; height: auto; border-radius: 10px; margin: 2px 0 8px; }
.photo-note { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.photo-note svg { flex: none; }
.photo-rule { margin-top: -4px; }
.photo-line { margin: 0 0 0 auto; max-width: 88%; padding: 6px 10px; border-radius: 10px; background: var(--warm); border: 1px solid var(--warm-border); color: var(--text); font-size: 12px; line-height: 1.4; }
/* Three dots where the tutor's next message will be; shown only while the sequence plays. */
.typing { position: absolute; left: 0; top: 0; display: none; align-items: center; height: 38px; padding: 0 14px; border-radius: 14px 14px 14px 4px; background: var(--soft); border: 1px solid var(--border); pointer-events: none; }
.typing::before { content: ""; width: 34px; height: 8px; background: radial-gradient(circle, var(--muted) 3.2px, transparent 3.8px) 0 0 / 13px 8px repeat-x; }
/* The app's composer and tab bar, as decoration: nothing here can be typed in or tapped. */
.demo-composer { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 10px 14px 14px; font-size: 14px; }
.demo-cam { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; color: var(--accent); }
.demo-field { flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--field); border-radius: 999px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-send { padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.demo-nav { display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); }
.demo-nav .on { color: var(--accent-ink); font-weight: 700; }
.demo-pane { position: relative; border-top: 1px solid var(--border); background: var(--soft); padding: 12px 14px 16px; }
.demo-tabs { margin: 0 0 10px; }
.demo-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.demo-tab svg { flex: none; color: var(--accent); }
.demo-plot { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 11px; font-weight: 600; }
.demo-plot .grid { stroke: var(--border); }
.demo-plot .axis { stroke: var(--muted); stroke-width: 1.5; }
.demo-plot .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.demo-plot text { fill: var(--muted); }
.demo-plot .pt { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.demo-empty { display: none; position: absolute; inset: 0; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--muted); font-size: 15px; pointer-events: none; }
/* The progress page: the app's .stat, .subject-card, .bar and .topic-row (public/style.css), with the same band colours. */
.demo-progress { display: grid; gap: 12px; padding: 14px 14px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.demo-ph { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 20px; }
.demo-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-stats li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); }
.demo-stats .k, .demo-stats .s { font-size: 12px; color: var(--muted); }
.demo-stats .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.demo-subject { padding: 12px 14px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.demo-subject-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.demo-subject-head strong { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.demo-subject-head .cov { flex: 1; font-size: 13px; color: var(--muted); }
.demo-subject-head .pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.demo-bar { display: block; height: 8px; margin: 8px 0 6px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.demo-bar i { display: block; width: 19%; height: 100%; border-radius: var(--r-pill); background: var(--accent); transform-origin: left; } /* 5 of 27 */
.demo-topics { list-style: none; margin: 0; padding: 0; }
.demo-topics li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.35; }
.demo-topics .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.demo-topics .b-secure .dot { background: var(--level-good); }
.demo-topics .b-getting-there .dot { background: var(--level-mid); box-shadow: inset 0 0 0 1.5px var(--level-mid-ink); }
.demo-topics .b-needs-work .dot { background: var(--level-low); }
.demo-topics .t { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.demo-topics .meta { font-size: 12px; color: var(--muted); }
.demo-topics .score { flex: none; min-width: 40px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.demo-topics .b-secure .score { color: var(--level-good); }
.demo-topics .b-getting-there .score { color: var(--level-mid-ink); }
.demo-topics .b-needs-work .score { color: var(--level-low); }
.demo-topics .again { flex: none; padding: 4px 9px; border: 1px solid var(--field); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.demo-share { margin: 0; font-size: 14px; color: var(--muted); }
/* The narrowest phones keep the topic names readable: the app's "Again" button goes. */
@media (max-width: 379px) { .demo-topics .again { display: none; } }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* On a phone the bar with Pause stays at the top of the card and the pane follows the reader, pinned to the bottom of
   the screen while the chat scrolls, as the real app keeps its diagrams a tap away. (.device uses overflow: clip, not
   hidden, so sticky works inside it.) A short screen gets the plain stacked card instead. */
@media (max-width: 919px) {
  .device-top { position: sticky; top: 0; z-index: 2; }
  .demo-pane { position: sticky; bottom: 0; z-index: 1; max-height: 45vh; overflow: auto; box-shadow: var(--pane-shadow); }
  .demo-plot { max-width: 300px; }
}
@media (max-width: 919px) and (max-height: 600px) {
  .device-top, .demo-pane { position: static; }
  .demo-pane { max-height: none; }
}
@media (min-width: 920px) {
  .device-panes { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .demo-pane { border-top: 0; border-left: 1px solid var(--border); }
  .demo-chat { padding: 18px 20px 22px; font-size: 16px; }
  .demo-photo { width: 150px; }
  .demo-nav { display: none; }
  /* The intro across the top and the last line across the bottom; the heading and figures down the left, the card on
     the right, the spare height under the figures (the 1fr row), not between them and the heading. */
  .demo-progress { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: auto auto 1fr auto; gap: 14px 24px; align-items: start; padding: 20px 20px 24px; }
  .demo-later, .demo-share { grid-column: 1 / -1; }
  .demo-ph { grid-column: 1; grid-row: 2; }
  .demo-stats { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .demo-subject { grid-column: 2; grid-row: 2 / span 2; }
  .demo-share { grid-row: 4; }
}
/* The sequence (about 18 seconds), only for people who haven't asked for less motion. Every element already sits in
   its final place; only opacity, a 6px rise, the graph's stroke, the coverage bar's fill and the tab bar's colours
   move, so nothing outside the frame shifts. The chat takes 13 seconds; the progress page follows, the tab bar moving
   from Diagrams to Progress as it starts. register.js waits for the last line (.demo-share) to finish. */
@media (prefers-reduced-motion: no-preference) {
  .demo.play .msg, .demo.play .photo-line { animation: demo-in .45s ease-out both; }
  .demo.play .typing { display: flex; animation: demo-typing 1.8s ease-in-out both; }
  .demo.play .demo-empty { display: grid; animation: demo-out .4s ease both; animation-delay: 9.2s; }
  .demo.play .demo-pane > :not(.demo-empty) { animation: demo-in .5s ease-out both; animation-delay: 9.4s; }
  .demo.play .demo-plot .curve { stroke-dasharray: 1; animation: demo-draw 1.2s ease-in-out both; animation-delay: 9.8s; }
  .demo.play .s1 .msg, .demo.play .s1 .photo-line { animation-delay: .4s; }
  .demo.play .s2 .typing { animation-delay: 1.4s; }
  .demo.play .s2 .msg { animation-delay: 3.2s; }
  .demo.play .s3 .msg { animation-delay: 5.6s; }
  .demo.play .s4 .typing { animation-delay: 6.4s; }
  .demo.play .s4 .msg { animation-delay: 8.2s; }
  .demo.play .s6 .typing { animation-delay: 11s; }
  .demo.play .s6 .msg { animation-delay: 12.6s; }
  .demo.play .demo-progress > *, .demo.play .demo-topics li { animation: demo-in .45s ease-out both; }
  .demo.play .demo-later { animation-delay: 14.2s; }
  .demo.play .demo-ph { animation-delay: 14.8s; }
  .demo.play .demo-stats { animation-delay: 15.2s; }
  .demo.play .demo-subject { animation-delay: 15.6s; }
  .demo.play .demo-bar i { animation: demo-fill .8s ease-out both; animation-delay: 16s; }
  .demo.play .demo-topics li:nth-child(1) { animation-delay: 16.2s; }
  .demo.play .demo-topics li:nth-child(2) { animation-delay: 16.5s; }
  .demo.play .demo-topics li:nth-child(3) { animation-delay: 16.8s; }
  .demo.play .demo-topics li:nth-child(4) { animation-delay: 17.1s; }
  .demo.play .demo-topics li:nth-child(5) { animation-delay: 17.4s; }
  .demo.play .demo-share { animation-delay: 18s; }
  .demo.play .demo-nav .d { animation: demo-tab-off .3s ease both; animation-delay: 14.2s; }
  .demo.play .demo-nav .later { animation: demo-tab-on .3s ease both; animation-delay: 14.2s; }
  .demo.paused * { animation-play-state: paused !important; }
  @keyframes demo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes demo-typing { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
  @keyframes demo-out { to { opacity: 0; visibility: hidden; } }
  @keyframes demo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes demo-fill { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes demo-tab-off { from { color: var(--accent-ink); font-weight: 700; } to { color: var(--muted); font-weight: 600; } }
  @keyframes demo-tab-on { from { color: var(--muted); font-weight: 600; } to { color: var(--accent-ink); font-weight: 700; } }
}

/* ---------- the waiting-list form (register.html, register.js) ---------- */
.form fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.form legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.choice {
  display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; cursor: pointer; font-weight: 600; line-height: 1.35;
  transition: border-color .15s, background-color .15s;
}
.choice:hover { border-color: var(--field); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* The focus ring moves to the row only where :has works. */
@supports selector(:has(*)) {
  .choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .choice input:focus-visible { outline: none; }
}
.choice input {
  flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; cursor: pointer;
  appearance: none; border: 2px solid var(--field); border-radius: 50%; background: var(--surface);
}
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
.choice input:checked { border-color: var(--accent); }
.choice input:checked::before { transform: scale(1); }
.field { margin: 0 0 20px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 50px; font: inherit; color: var(--text); background: var(--surface);
  padding: 11px 14px; border: 1.5px solid var(--field); border-radius: 14px;
}
.field select { -webkit-appearance: none; appearance: none; padding-right: 44px; background: var(--surface) var(--select-arrow) right 14px center / 20px no-repeat; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.optional { font-weight: 400; color: var(--muted); }
.hint { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.hint + .hint { margin-top: 4px; }
.error { display: block; font-size: 15px; font-weight: 600; color: var(--danger); margin-top: 6px; }
.error:empty { display: none; }
.notice { font-size: 15px; line-height: 1.5; color: var(--muted); }
.send-row { margin: 22px 0 4px; }
.button {
  display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 54px; padding: 12px 24px;
  font: inherit; font-size: 18px; font-weight: 700; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--button-edge);
  transition: transform .08s, box-shadow .08s, background-color .15s;
}
.button:hover { background: var(--accent-strong); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--button-edge); }
.button:disabled { opacity: .6; cursor: default; transform: none; box-shadow: 0 4px 0 var(--button-edge); }
.link-button { font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
/* The honeypot: off screen rather than display:none, which some bots skip. People (and screen readers) never meet it. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#under13 { margin: 0; }
.answer { margin: 18px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--accent-soft); font-weight: 650; overflow-wrap: anywhere; }
.answer:empty { display: none; }
.answer p { margin: 0; }
.answer p + p { margin-top: 8px; font-weight: 400; }
.answer:focus { outline: none; } /* focused only so a screen reader lands on it after the form goes */
body:not([data-state="open"]) .answer { margin-top: 0; }
body[data-state="done"] .answer {
  padding-left: 58px; border: 1.5px solid var(--success-border);
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f5a623'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%230a1a45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16px 14px / 28px no-repeat;
}
.answer + .note { margin-top: 12px; }

/* Page states: body data-state is open or closed (from the server), then done or full (from register.js). */
body:not([data-state="open"]) .open-only { display: none !important; }
body:not([data-state="closed"]) .closed-only { display: none !important; }
body:not([data-kind="parent"]) .parent-only { display: none !important; }
body:not([data-kind="student13"]) .student-only { display: none !important; }
body:not([data-state="done"]) .done-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .button:active { transform: none; }
}

/* High contrast: edges and underlines where colour carried meaning. */
@media (forced-colors: active) {
  .hl { background: none; text-decoration: underline; }
  .button, .signin-line a, .site-head .sign-in, .join::after { border: 2px solid ButtonText; }
  .choice:has(input:checked) { border: 2px solid Highlight; }
  .choice input { appearance: auto; }
  .demo-chat .msg, .demo-ai, .demo-tab, .demo-play, .device-tag, .typing, .photo-line, .demo-field, .demo-send, .demo-nav { border: 1px solid CanvasText; }
  .demo-stats li, .demo-bar, .demo-topics .dot, .demo-topics .again { border: 1px solid CanvasText; }
  .demo-bar i { forced-color-adjust: none; background: CanvasText; }
}

@media print {
  :root { color-scheme: light; --bg: #fff; --soft: #fff; --surface: #fff; --sunken: #fff; --text: #000; --muted: #333; --accent: #0050d0; --accent-ink: #0050d0; --danger: #c0262d; --border: #bbb; --accent-soft: transparent; --level-good: #157a46; --level-mid-ink: #8a5600; --level-low: #c0262d; }
  body { background: #fff; font-size: 12pt; }
  .site-head .sign-in, .join-art, .join::after { display: none; }
  .doc { max-width: none; margin: 0; padding: 0; color: #000; }
  .hl { background: none; color: inherit; }
  /* A dark device keeps its dark (white-lettered) logo when printing, so print the name as text instead. */
  .site-head picture { display: none; }
  .site-head a[href="/"] { text-decoration: none; }
  .site-head a[href="/"]::after { content: "Studytutor"; font-weight: 800; font-size: 24px; letter-spacing: -.025em; color: #0a1a45; }
  /* The example chat prints finished and still. */
  .demo-play, .demo-empty, .typing, .demo-composer, .demo-nav { display: none; }
  .demo-chat .msg, .demo .photo-line, .demo-pane > *, .demo-progress > *, .demo-topics li, .demo-bar i { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
}