/* WordSense alpha — Dark Hero design system (matches the app).
   Tokens sourced live from ws-app-merge/web/src/app/globals.css (CSS wins
   over DESIGN_SYSTEM.md prose where the two disagree — see the restyle
   report for the two places that happened: font family, --text-hero/
   --text-section). Dark mode only; no light-mode branch.
   ALPHA-BRAND (2026-10-29): logo + icons live in assets/brand/ (generated
   from the app's own brand components, never redrawn); --text-tertiary
   follows the app's UI-FIX1 value; the primary button moved to
   --hero-blue-dim so its text passes WCAG AA (see report).
   ALPHA-JOIN (2026-11-01): the page is bilingual (one rule below) and the Join section has three server-set states;
   the design notes for both are in DESIGN.md at the repo root. */

:root {
  /* Background hierarchy — globals.css:43-46 */
  --bg-primary: #0A0E1A;
  --bg-secondary: #141829;
  --bg-tertiary: #1E2337;
  --bg-hover: #282D45;

  /* Accents — globals.css:47-49, hero-blue-dim from DESIGN_SYSTEM.md Color Palette */
  --hero-blue: #3B82F6;
  --hero-blue-dim: #2563EB;
  --hero-blue-deep: #1D4ED8; /* hover step under --hero-blue-dim (6.1:1 with --text-primary) */
  --hero-gold: #F59E0B;
  --hero-red: #EF4444;

  /* Text — globals.css:67,70,71 */
  --text-primary: #F1F5F9;
  --text-secondary: #9CABC1;
  --text-tertiary: #8A9AB2; /* globals.css:149 UI-FIX1 2026-10-05 — 4.5:1+ on every surface (old #6A7B93 was 3.6:1 on bg-tertiary) */

  --border-subtle: #1E293B;

  /* Brand — logo-art.ts LOGO_COLORS / globals.css:151-154. The wordmark is
     --hero-gold; the four squares of the mark are the rating colours. */
  --rating-again: #F97316;
  --rating-hard: #EAB308;
  --rating-good: #22C55E;
  --rating-easy: #60A5FA;

  /* Radii — globals.css --radius-sm/md/lg/xl (0.5/0.75/1/1.5rem) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Type scale — globals.css:149 (--text-hero, LIVE value 2rem/32px — the
     doc's own "24px" prose at DESIGN_SYSTEM.md:44 is stale, superseded by
     Frank's later live rulings baked into CSS; CSS wins per this mission's
     brief) and :160 (--text-section, LIVE 1.25rem/20px, doc says stale 18px). */
  --text-hero: 2rem;        /* 32px */
  --text-section: 1.25rem;  /* 20px */
  --text-body: 0.9375rem;   /* 15px */
  --text-caption: 0.8125rem; /* 13px */

  --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif; /* globals.css:110 — CSS wins over the doc's stale "Comfortaa" */

  --max: 448px; /* max-w-md, DESIGN_SYSTEM.md § Phone-first posture */
}

* { box-sizing: border-box; }
/* Root cause of the "Thanks box shown ABOVE a still-filled form" bug
   (ALPHA-THANKS, 2026-09-09): the browser's own UA rule `[hidden]{display:
   none}` and an author rule that sets `display` on the SAME element (e.g.
   `.req-form { display: flex }`) tie on specificity — same (0,1,0) either
   way, attribute selector vs. class selector — so source order decides,
   and the later-loaded author stylesheet wins, silently defeating the
   `hidden` attribute. This is the general fix, not a one-off `.req-form`
   patch, so no future `display`-setting class can reintroduce the same
   bug against `hidden`. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4; /* DESIGN_SYSTEM.md § iOS Typography Rules — body line-height */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hero-blue); }
a:hover { color: var(--hero-blue-dim); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hero-blue);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; } /* 16px screen padding, DESIGN_SYSTEM.md § Safe Areas */

/* ---- language (ALPHA-JOIN) ----
   Every visible string on the home page exists twice, data-l="en" and data-l="id"; <html lang> picks one. The server
   sets lang on /join pages; assets/home.js sets it from ?hl=, else the browser language. No script: English. */
html:not([lang="id"]) [data-l="id"],
html[lang="id"] [data-l="en"] { display: none !important; }

/* ---- brand header (ALPHA-BRAND) ---- */
.site-header { padding: 12px 0 0; }
.brand-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px; /* touch-target floor */
  margin-left: -10px; /* the lockup's own side padding, so the mark's edge lines up with the text column */
  border-radius: var(--radius-sm);
}
.brand-link img { display: block; width: 176px; height: 44px; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Same look as the legal pages' switch (privacy.html / terms.html), sized to sit beside the logo at 360px. */
.lang-switch { display: flex; gap: 6px; flex: none; }
.lang-switch button {
  min-height: 48px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  background: transparent; color: var(--text-primary); font: inherit; font-size: var(--text-caption); font-weight: 600;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.site-header + .entry-hero { padding-top: 20px; }
.site-header + .notfound { padding-top: 0; }
.site-header + .doc-header { padding-top: 8px; }

/* ---- hero ---- */
.entry-hero { padding: 40px 0 8px; }
.headword {
  font-family: var(--font-sans);
  font-weight: 700; /* DESIGN_SYSTEM.md § Type Scale — Headword: 700 */
  font-size: var(--text-hero);
  line-height: 1.2; /* iOS Typography Rules — headings */
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.pron {
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: 6px 0 0;
}
.pron b { color: var(--hero-gold); font-weight: 700; }
.promise {
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.3;
  max-width: 30ch;
  margin: 14px 0 0;
  color: var(--text-primary);
}
.support {
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 8px 0 0;
}
.cta-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-body);
  height: 50px; /* DESIGN_SYSTEM.md § Button Styles */
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-md); /* 12px, § Button Styles */
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 100ms ease-out; /* § Animation & Motion — Button press */
}
.btn:active { transform: scale(0.97); } /* iOS-style press feedback, not hover overlay */
/* ALPHA-BRAND: --text-primary on --hero-blue is 3.4:1, under WCAG AA for 15px
   text; --hero-blue-dim gives 4.7:1, so the resting fill is the dim step. */
.btn-primary { background: var(--hero-blue-dim); color: var(--text-primary); border: 1px solid var(--hero-blue-dim); }
/* ALPHA-POLISH (2026-09-09): the generic `a:hover { color: var(--hero-blue-dim) }`
   above (same file, line ~69) has equal specificity to a bare .btn-primary
   rule and loads later in cascade order, so it was silently winning the
   `color` property on hover — text and background both landed on
   --hero-blue-dim (rgb(37,99,235)), verified live (computed color ===
   computed background-color on hover, before this fix). Explicit `color`
   here — narrower/self-documenting fix vs. rescoping the shared a:hover
   rule, which risks changing plain-text link hover elsewhere on the page. */
.btn-primary:hover { background: var(--hero-blue-deep); border-color: var(--hero-blue-deep); color: var(--text-primary); }
.btn-secondary { background: transparent; color: var(--hero-blue); border: 1px solid var(--hero-blue); }
/* Same root cause, smaller effect: without this, hover text was actually
   --hero-blue-dim (not --hero-blue as it reads at rest) — still legible
   against the 8% tint background, but not literally "keeps hero-blue
   text" per spec. Explicit color makes that literally true. */
.btn-secondary:hover { background: rgba(59, 130, 246, 0.08); color: var(--hero-blue); }

/* ---- body sections ---- */
main { padding: 8px 0 16px; }
section { padding: 32px 0 0; }
.sec-label {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 10px;
} /* matches the app's own "LEARNING PROFILE" / "MANAGE PROGRESS" row-label pattern */
h2 {
  font-family: var(--font-sans);
  font-weight: 600; /* § Type Scale — Section Header: 600 */
  font-size: var(--text-section);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text-primary);
}
p { margin: 0 0 12px; max-width: 62ch; font-size: var(--text-body); color: var(--text-secondary); line-height: 1.4; }
p:last-child { margin-bottom: 0; }
.lede { color: var(--text-secondary); }

/* generic card surface — DESIGN_SYSTEM.md § Card Design, verbatim */
.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md); /* 12px, iOS standard */
  border: 1px solid var(--border-subtle);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.05);
  padding: 16px;
}

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); /* 16px — Material 3 lockdown's own "small radius" tile example */
  padding: 14px 16px;
}
.steps li::before {
  content: counter(step);
  flex: none;
  width: 32px; height: 32px; /* decorative, not a tap target — no 48px floor applies */
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15); /* hero-gold/15 — DESIGN_SYSTEM.md § Set/Active states, medium-variant tint convention */
  color: var(--hero-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--text-caption);
}
.steps li span { padding-top: 4px; font-size: var(--text-body); color: var(--text-secondary); line-height: 1.4; }
.steps li span strong { color: var(--text-primary); }

.note { font-size: var(--text-caption); color: var(--text-tertiary); }
.note a { color: var(--hero-blue); }

/* ---- request-access form ---- */
.req-form { display: flex; flex-direction: column; gap: 14px; }
.req-form label { font-size: var(--text-caption); font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.req-form input, .req-form textarea {
  width: 100%;
  min-height: 48px; /* M3 touch-target floor */
  font-family: var(--font-sans);
  font-size: var(--text-body);
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}
.req-form input::placeholder, .req-form textarea::placeholder { color: var(--text-tertiary); }
.req-form input:focus, .req-form textarea:focus { border-color: var(--hero-blue); }
.req-form textarea { resize: vertical; min-height: 72px; }

/* Level choices (ALPHA-POLISH) — Dark Hero "grouped toggles / chip cloud"
   pattern per DESIGN_SYSTEM.md § 4a Medium variant: unset = bg-tertiary +
   border-subtle + text-tertiary; set = {accent}/15 tint + accent border +
   accent text. hero-blue accent (role: "enabled / active", same section). */
.level-fieldset { border: 0; padding: 0; margin: 0; }
.level-fieldset legend {
  font-size: var(--text-caption); font-weight: 600; color: var(--text-secondary);
  padding: 0; margin-bottom: 6px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* `.chip-row .chip-label` (not bare `.chip-label`) deliberately — needs to
   out-specificity the generic `.req-form label { display: block; ... }`
   rule above, which would otherwise win (0,1,1) vs a bare class's (0,1,0)
   and force these back to stacked full-width blocks. */
.chip-row .chip-label { display: inline-flex; cursor: pointer; margin-bottom: 0; }
/* ALPHA-BRAND root-cause fix for the 360px sideways scroll: the generic
   `.req-form input` rule (0,1,1) out-specifies a bare `.chip-input` (0,1,0),
   so width:1px lost to width:100% + min-height/padding and the "hidden" radio
   became a 360px-wide box off the right edge. `.req-form .chip-input` (0,2,0)
   wins, and the label is the containing block. Standard visually-hidden
   pattern (still focusable and keyboard-operable). */
.chip-row .chip-label { position: relative; }
.req-form .chip-input {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.chip-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box; padding: 10px 16px;
  border-radius: 9999px; /* M3 choice-chip shape, distinct from the tile/card radius */
  background: var(--bg-tertiary); border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); font-family: var(--font-sans);
  font-size: var(--text-caption); font-weight: 600; text-align: center; line-height: 1.3;
}
.chip-input:checked + .chip-pill {
  background: rgba(59, 130, 246, 0.15); border-color: var(--hero-blue); color: var(--text-primary); /* ALPHA-BRAND: blue-on-tint was 3.5:1 */
}
.chip-input:focus-visible + .chip-pill { outline: 2px solid var(--hero-blue); outline-offset: 2px; }
.req-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req-form button { align-self: flex-start; min-width: 200px; cursor: pointer; }
.req-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Join testing (ALPHA-JOIN, 2026-11-01) ----
   One section, three states set by the server on <section id="join" data-state=…> (start | form | pending) and one
   optional message (data-err = signin | name | save). CSS alone shows the matching panel, so no state needs
   JavaScript. Panels that are not shown are display:none, so screen readers skip them too. */
.join [data-panel] { display: none; }
.join[data-state="start"] [data-panel="start"],
.join[data-state="form"] [data-panel="form"],
.join[data-state="pending"] [data-panel="pending"] { display: block; }
.join .req-err[data-err-show] { display: none; margin: 0 0 14px; }
.join[data-err="signin"] [data-err-show="signin"],
.join[data-err="name"] [data-err-show="name"],
.join[data-err="save"] [data-err-show="save"] { display: block; }
.join h2:focus, #steps-h:focus { outline: none; } /* focus moved there by an in-page link (home.js), not by Tab */
/* ALPHA-JOIN fix-up 2: the hero's Join testing link scrolls to "Join in three steps"; smooth unless the visitor asked
   for less motion, and the heading stops a little below the top edge. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#steps, #join { scroll-margin-top: 12px; }
/* The Join button: the site's primary button with Google's standard-colour "G" on a white chip. Google's branding
   guidelines: the G keeps its standard colours, unscaled shape, on a light, dark or neutral background — never
   directly on a coloured one (Google's own blue button does the same white chip). */
.btn-join { gap: 12px; width: 100%; font-size: 1rem; font-weight: 700; margin-top: 4px; }
.g-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: #FFFFFF;
}
.g-chip svg { display: block; width: 18px; height: 18px; }
.join-with { margin-top: 8px; text-align: center; max-width: none; }
.join-other { margin-top: 14px; }
.join-other a { display: inline-flex; align-items: center; min-height: 48px; } /* 48px touch-target floor */
.join-note {
  padding: 12px 16px; margin: 0 0 14px;
  background: rgba(245, 158, 11, 0.10); border: 1px solid var(--hero-gold); border-radius: var(--radius-md);
}
.join-note p { color: var(--text-primary); font-size: var(--text-caption); margin: 0; }
.signedin-line { margin: 0; font-size: var(--text-body); color: var(--text-secondary); overflow-wrap: anywhere; }
.signedin-line strong { color: var(--text-primary); font-weight: 600; }
/* Post-submit completion card — Dark Hero card surface (matches .card),
   not the old green-wash inline banner, since this now replaces the form
   entirely rather than sitting alongside it. */
.req-ok {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.05);
  padding: 20px;
}
.req-ok h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-section);
  color: #22C55E; /* rating-good / status-learned accent, DESIGN_SYSTEM.md Color Palette */
  margin: 0 0 8px;
}
.req-ok p { color: var(--text-secondary); }
.req-ok .btn { margin-top: 8px; }
.req-err {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--hero-red);
  border-radius: var(--radius-md);
  color: #FFC9C9;
  font-size: var(--text-caption);
  display: none;
}

footer {
  border-top: 1px solid var(--border-subtle);
  padding: 24px 0 56px;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.footer-mark { width: 24px; height: 24px; flex: none; display: block; }
footer a { color: var(--text-secondary); }
footer a:hover { color: var(--hero-blue); }

/* ---- plain document pages (privacy / terms) ---- */
.doc-header { padding: 32px 0 8px; }
.doc-header .wrap { display: flex; flex-direction: column; gap: 6px; }
.doc-header h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}
.doc-header .back {
  color: var(--text-secondary);
  font-size: var(--text-caption);
  text-decoration: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.doc-header .back:hover { color: var(--hero-blue); }
.doc main section { padding: 28px 0 0; }
.doc h2 { font-size: var(--text-body); font-weight: 600; }
.doc .updated { color: var(--text-tertiary); font-size: var(--text-caption); }

/* Contact/company glyph-outline blocks — unchanged mechanism (inline SVG
   <path>, no text nodes), recolored to text-primary so they read like the
   surrounding body copy on the new dark background. */
.legal-glyphs { color: var(--text-primary); margin: 4px 0 0; }

/* ---- 404 ---- */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound .wrap { padding-top: 0; padding-bottom: 0; width: 100%; } /* ALPHA-BRAND: full width, so the text column lines up with the header lockup (flex centring shrank it) */

@media (min-width: 480px) {
  .cta-row { flex-direction: row; }
  .btn { flex: 1; }
}