/* ==========================================================================
   sovernity.com — single stylesheet (R1-6a)
   Design language: docs/DESIGN_SPEC.md §5 — warm paper + deep Sovernity
   green, flat surfaces, hairline borders, system type, calm motion.
   Color tokens are the §5.3 table, verbatim. No external fonts, no external
   requests of any kind.

   Moved from the Chat site's root style.css to sovernity-web (S2b Task 9).
   Scoped to Chat's content: every selector sits under
   body[data-page="chat"] main, so nothing reaches the studio header and
   footer around it. The old header, footer, skip-link and 404 rules are
   gone with the markup they styled (the studio frame replaces them). The
   dark tokens follow the site's theme toggle as well as the system.
   ========================================================================== */

/* ---- Tokens (DESIGN_SPEC §5.3) ---- */
body[data-page="chat"] main {
  --bg-app: #FAFAF8;
  --surface-raised: #FFFFFF;
  --border: #E4E2DD;
  --text-primary: #1A1A18;
  --text-secondary: #6B6A66;
  --text-tertiary: #9A9892;
  --accent: #3D6B5C;
  --on-accent: #FAFAF8;
  --state-ok: #3E7D5B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="chat"] main {
    --bg-app: #1C1C1E;
    --surface-raised: #28282B;
    --border: #3A3A3E;
    --text-primary: #ECECEA;
    --text-secondary: #A4A3A0;
    --text-tertiary: #6E6D6A;
    --accent: #6FA08E;
    --on-accent: #14211C;
    --state-ok: #5FAF85;
  }
}
:root[data-theme="dark"] body[data-page="chat"] main {
  --bg-app: #1C1C1E;
  --surface-raised: #28282B;
  --border: #3A3A3E;
  --text-primary: #ECECEA;
  --text-secondary: #A4A3A0;
  --text-tertiary: #6E6D6A;
  --accent: #6FA08E;
  --on-accent: #14211C;
  --state-ok: #5FAF85;
}

/* ---- Base ---- */
body[data-page="chat"] main * { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  :root:has(body[data-page="chat"]) { scroll-behavior: smooth; }
}

body[data-page="chat"] main {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem; /* 17px — reading prose is the primary activity */
  line-height: 1.55;
  -webkit-font-smoothing: auto; /* the studio body sets 500 + antialiased; Chat used neither */
}

body[data-page="chat"] main code, body[data-page="chat"] main .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

body[data-page="chat"] main a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body[data-page="chat"] main a:hover { text-decoration-thickness: 2px; }

body[data-page="chat"] main :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

body[data-page="chat"] main h1, body[data-page="chat"] main h2, body[data-page="chat"] main h3 {
  font-family: system-ui, -apple-system, "SF Pro Display", "Helvetica Neue",
    "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
body[data-page="chat"] main h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
body[data-page="chat"] main h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
body[data-page="chat"] main h3 { font-size: 1.1rem; }

body[data-page="chat"] main p { margin: 0 0 1em; }

/* ---- Layout ---- */
body[data-page="chat"] main .wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 24px;
}
body[data-page="chat"] main .prose { max-width: 68ch; }

body[data-page="chat"] main section { padding: 56px 0; }
body[data-page="chat"] main section + section { border-top: 1px solid var(--border); }

/* ---- Hero ---- */
body[data-page="chat"] main .hero { padding: 84px 0 64px; }
body[data-page="chat"] main .hero .kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary); /* was --text-tertiary: 2.8:1 light, 3.3:1 dark at 12.8 px, under WCAG AA 4.5:1 */
  margin-bottom: 16px;
}
body[data-page="chat"] main .hero h1 { max-width: 21ch; }
body[data-page="chat"] main .hero .subhero {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 12px 0 20px;
}
body[data-page="chat"] main .hero .qualifier {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 62ch;
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin: 0 0 32px;
}
body[data-page="chat"] main .cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body[data-page="chat"] main .cta-note { color: var(--text-secondary); font-size: 0.95rem; }

/* ---- Buttons ---- */
body[data-page="chat"] main .btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
}
body[data-page="chat"] main .btn:hover { filter: brightness(1.07); text-decoration: none; }
body[data-page="chat"] main .btn:active { filter: brightness(0.95); }

body[data-page="chat"] main .btn-quiet {
  display: inline-block;
  color: var(--accent);
  font-size: 0.95rem;
  text-decoration: none;
}

/* ---- Media placeholders (FB-3) ---- */
body[data-page="chat"] main .media-slot {
  position: relative;
  margin: 0;
  background: var(--surface-raised);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body[data-page="chat"] main .media-slot.ratio-16x10 { aspect-ratio: 16 / 10; }
body[data-page="chat"] main .media-slot .watermark {
  position: absolute;
  width: 42%;
  opacity: 0.07;
  pointer-events: none;
}
body[data-page="chat"] main .media-slot .slot-label {
  position: relative;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  text-align: center;
  padding: 0 16px;
}
body[data-page="chat"] main figcaption {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 10px;
}

body[data-page="chat"] main .shot {
  margin: 0;
}
body[data-page="chat"] main .shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
}

/* The shots are 2084px-wide full-window captures. Left to fill .wrap they
   render ~476px per column — a quarter scale, which is both visually
   dominant and too small to read. Capping the gallery keeps them as a
   gallery rather than four hero images; the figure is the cap, not the
   image width, so the two-column rhythm and the captions stay intact. */
body[data-page="chat"] main .shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
  max-width: 760px;      /* -> ~370px per shot on desktop */
  margin-inline: auto;
}

/* ---- How it works ---- */
body[data-page="chat"] main .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
body[data-page="chat"] main .steps li {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  counter-increment: step;
}
body[data-page="chat"] main .steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}
body[data-page="chat"] main .steps h3 { margin-bottom: 8px; }
body[data-page="chat"] main .steps p { color: var(--text-secondary); font-size: 0.97rem; margin: 0; }
body[data-page="chat"] main .steps p + p { margin-top: 8px; }

/* ---- Privacy section ---- */
body[data-page="chat"] main .privacy-lead {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 34ch;
  line-height: 1.35;
  margin: 0 0 28px;
  text-wrap: balance;
}
body[data-page="chat"] main .claim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
body[data-page="chat"] main .claim-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
body[data-page="chat"] main .claim-card p { margin: 0; color: var(--text-secondary); }
body[data-page="chat"] main .claim-card p strong { color: var(--text-primary); }

/* ---- Download ---- */
body[data-page="chat"] main .download-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body[data-page="chat"] main .download-lines {
  color: var(--text-secondary);
  font-size: 0.97rem;
  max-width: 62ch;
}
body[data-page="chat"] main .download-lines p { margin: 0 0 6px; }
body[data-page="chat"] main .requirements {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 24px;
  max-width: 720px;
  font-size: 0.97rem;
}
body[data-page="chat"] main .requirements p { margin: 0 0 8px; }
body[data-page="chat"] main .requirements p:last-child { margin-bottom: 0; }

/* ---- Privacy-policy page ---- */
body[data-page="chat"] main.policy { padding: 56px 0 72px; }
body[data-page="chat"] main.policy h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
body[data-page="chat"] main.policy .version-line { color: var(--text-secondary); }
body[data-page="chat"] main.policy h2 { margin-top: 2em; font-size: 1.3rem; }
body[data-page="chat"] main.policy ul { padding-left: 1.3em; }
body[data-page="chat"] main.policy li { margin-bottom: 0.4em; }
body[data-page="chat"] main .table-scroll { overflow-x: auto; margin: 1em 0; }
body[data-page="chat"] main.policy table {
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 640px;
}
body[data-page="chat"] main.policy th, body[data-page="chat"] main.policy td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal; /* tokens.css breaks cells anywhere; this table scrolls inside .table-scroll instead */
}
body[data-page="chat"] main.policy th { background: var(--surface-raised); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  body[data-page="chat"] main .shot-grid, body[data-page="chat"] main .claim-grid, body[data-page="chat"] main .steps { grid-template-columns: 1fr; }
  /* One column: without a cap a shot stretches to the full container
     (~712px at this breakpoint), which is larger than it ever renders
     on desktop — the opposite of what a narrow viewport wants. */
  body[data-page="chat"] main .shot img { max-width: 420px; margin-inline: auto; }
  body[data-page="chat"] main .hero { padding: 56px 0 48px; }
  body[data-page="chat"] main section { padding: 44px 0; }
}