/* Entry surface styles. Hand-written, no framework, no build step.
   Budget: the whole entry surface must stay under 250 KB brotli and must be
   interactive with zero Flutter dependency. */

@font-face {
  font-family: 'Heebo';
  src: url('/fonts/Heebo.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tap-min: 52px;
  --font-size-xs: 14px;
  --font-size-sm: 18px;
  --font-size-md: 20px;
  --font-size-lg: 22px;
  --font-size-xl: 34px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius-ctl: 12px;
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-raised: #273449;
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #14b8a6;
  --on-accent: #042f2e;
  --border: #334155;
  --danger: #ef4444;
  --focus: #fde047;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

body { min-height: 100dvh; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-2) var(--space-4);
  z-index: 10;
}
.skip-link:focus { inset-inline-start: 0; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-5);
}

header.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
header.brand h1 { font-size: var(--font-size-xl); margin: 0; font-weight: 700; }
.age-badge {
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.tagline { color: var(--muted); margin: 0 0 var(--space-4); }

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.proof span {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}
.proof .live { border-color: var(--accent); color: var(--accent); }

form.join {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

label { display: block; font-size: var(--font-size-xs); margin-bottom: var(--space-1); }

input[type='text'],
input[type='number'],
input[type='password'],
select {
  width: 100%;
  min-height: var(--tap-min);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: 0 var(--space-3);
  font: inherit;
}
input[aria-invalid='true'] { border-color: var(--danger); }

.consent-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}
.consent-note a { color: var(--accent); }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Door picker. Each door shows only its own fields, so nothing is collapsed
   behind a disclosure and nothing irrelevant is on screen. */
.doors { display: flex; gap: var(--space-2); }
.door {
  flex: 1;
  min-height: var(--tap-min);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.door[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 700;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-xs);
}
.label {
  display: block;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-1);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-height: 40px;
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Once the app mounts, the landing content is gone and the Flutter view owns
   the viewport. A rejected join swaps them back — the engine stays alive and
   ready to retry, it just stops covering the form it is reporting to. */
body.app-running { overflow: hidden; }
body.app-running #landing { display: none; }
body:not(.app-running) flutter-view { display: none; }

/* Flutter positions its semantics host absolutely with no inset, so the host
   resolves to its static position — which in this RTL document is the right
   edge of the view. That pushed the whole accessible layer outside the
   viewport, leaving screen readers and touch exploration aiming at nothing.
   The app sets its own direction in the widget tree, so the host must not
   inherit ours. */
flutter-view { direction: ltr; }

/* Interactive semantics nodes sit in a DOM overlay above the canvas. A
   full-screen node (the sheet scrim used to be one) captures the pointer and
   the painted controls underneath never see the click — edit-profile and
   in-chat avatar look dead. Route pointers to the canvas so hit-testing
   follows paint order. Programmatic .click() on flt-semantics still fires
   for the browser specs. Form fields keep auto so the caret works. */
body.app-running flt-semantics-host,
body.app-running flt-semantics-host flt-semantics {
  pointer-events: none !important;
}
body.app-running flt-semantics-host input,
body.app-running flt-semantics-host textarea,
body.app-running flt-semantics-host [contenteditable] {
  pointer-events: auto !important;
}

.hp { position: absolute; inset-inline-start: -9999px; }

button.cta {
  min-height: var(--tap-min);
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-ctl);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button.cta[disabled] { opacity: .5; cursor: not-allowed; }

.error {
  color: var(--danger);
  font-size: var(--font-size-xs);
  min-height: 1.2em;
}

nav.links {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
nav.links a { color: var(--muted); font-size: var(--font-size-xs); }

a { color: var(--accent); }

section.pitch { margin-top: var(--space-5); }
section.pitch h2 { font-size: var(--font-size-lg); }
section.pitch ul { padding-inline-start: var(--space-4); color: var(--muted); }
section.pitch p { color: var(--muted); }

form.join h2 { margin: 0; font-size: var(--font-size-lg); }
form.join legend { margin-bottom: var(--space-2); }
.consent label { margin: 0; }
.consent-group { border: 0; padding: 0; margin: 0; }

footer { margin-top: var(--space-5); color: var(--muted); font-size: var(--font-size-xs); }

#boot-status { margin-top: var(--space-3); color: var(--muted); font-size: var(--font-size-xs); }

@media (min-width: 768px) {
  .wrap { padding-top: 48px; }
}

/* Legal, help and SEO pages share the entry stylesheet — one small file for
   every crawlable route rather than the 104 KB shell stylesheet they used to
   pull in. */
.legal-page main,
main.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}
.legal-page h1, main.doc h1 { font-size: var(--font-size-xl); }
.legal-page h2, main.doc h2 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-5);
}
.legal-page a, main.doc a { color: var(--accent); }
.legal-page li, main.doc li { margin-bottom: var(--space-2); }
.legal-page p, main.doc p { color: var(--text); }

.doc-cta {
  display: inline-block;
  min-height: var(--tap-min);
  line-height: var(--tap-min);
  padding: 0 var(--space-5);
  margin-top: var(--space-4);
  background: var(--accent);
  color: var(--on-accent) !important;
  border-radius: var(--radius-ctl);
  font-weight: 700;
  text-decoration: none;
}

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.doc-nav a { color: var(--muted) !important; font-size: var(--font-size-xs); }