/*
 * CHART for the three static legal artifacts.
 *
 * WHY THIS FILE EXISTS. /terms.html, /privacy-policy.html and /sms-opt-in.html
 * are REGISTERED A2P 10DLC campaign URLs: they are static, must render with
 * JavaScript disabled, and must never move (CLAUDE.md). They are also the
 * legal documents a boater actually meets — the login footer, both SMS
 * disclosures and the sitemap point here, and `vite preview` (which production
 * Caddy proxies to) answers an extensionless `/terms` with `terms.html` too,
 * so a pasted link or a hard load lands here as well. They were a white
 * `border-radius: 8px` card on #f8fafc with #075985 links and
 * `color-scheme: light`, i.e. the one palette CHART exists to replace, pinned
 * out of dark mode — while the in-app React twin at `/terms` was CHART. One
 * document cannot have two designs depending on how the boater arrived.
 *
 * ONE FILE, THREE PAGES, on purpose: inlining this into each artifact is how
 * they drifted apart in the first place, and there is nothing here a `<style>`
 * block could do that a same-origin stylesheet cannot. If it ever fails to
 * load, the documents are still fully readable — which is the whole reason a
 * legal artifact is plain HTML.
 *
 * Values are the CHART ladders from frontend/src/index.css, hand-copied
 * because there is no Tailwind build on this side of the wall — the same trade
 * `marketing/src/components/AuthShell.astro` and `ops/edge/upstream-down.html`
 * make, and the layout mirrors `frontend/src/components/legal/LegalDocument.tsx`
 * clause for clause: no card, no shadow, one 2px navy rule under the masthead,
 * hairlines between clauses. If those tokens move, move them here too.
 */

/* `color-scheme` is set per theme, not as `light dark`. It tells the UA which
   chrome to draw for form controls — and /sms-opt-in.html mocks a real
   checkbox for the carrier reviewer. Left as `light dark`, a boater on a
   dark-preferring OS reading the LIGHT document gets a dark checkbox on cream
   paper. Same lesson as the `html { color-scheme: light }` note in index.css. */
:root {
  color-scheme: light;
  --stock: #faf7f0;
  --ink: #0d1a26;
  --muted-fg: #6b6153;
  --panel: #f2eee4;
  --border: #d5cdba;
  --field-border: #8a8170;
  --primary: #002146;
  --primary-fg: #ffffff;
}

/* The dark ladder, twice.
 *
 * `html.dark` is set pre-paint by the bootstrap in each document, which reads
 * the same `dockbison.theme` key as frontend/index.html and AuthShell — the
 * app's theme is a PERSISTED choice, not the OS setting, so a boater who
 * forced dark inside the app must not get a cream document when they tap
 * "Privacy Policy". The media query is the no-JS answer, and the bootstrap
 * stamps `html.light` explicitly so an OS-dark / app-light boater is not
 * overridden by it. */
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
    --stock: #0d1b26;
    --ink: #f4efe4;
    --muted-fg: #b6b1a7;
    --panel: #1c2e3a;
    --border: #314958;
    --field-border: #728391;
    --primary: #7eb3c4;
    --primary-fg: #0c1a24;
  }
}

html.dark {
  color-scheme: dark;
  --stock: #0d1b26;
  --ink: #f4efe4;
  --muted-fg: #b6b1a7;
  --panel: #1c2e3a;
  --border: #314958;
  --field-border: #728391;
  --primary: #7eb3c4;
  --primary-fg: #0c1a24;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--stock);
  color: var(--ink);
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
}

/* max-w-2xl px-4 py-8 / md:py-12 — the measure LegalDocument sets. */
main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 32px 16px;
}

@media (min-width: 768px) {
  main {
    padding: 48px 16px;
  }
}

/* The masthead: eyebrow, title, the one 2px navy rule on the page. */
.masthead {
  border-bottom: 2px solid var(--primary);
  padding-bottom: 12px;
}

.eyebrow,
h2 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
  margin: 0;
}

h1 {
  margin: 4px 0 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* "Last Updated" is part of the agreement — the Terms' own change clause
   points the reader at it — so it is set as a caption, not hidden. */
.updated {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-fg);
}

/* A clause. Hairline-separated the way a printed agreement is set; there is
   deliberately no navy fill anywhere on these pages, because the navy block is
   reserved for "the thing you came here to do" and nobody comes to a terms
   page to do anything. */
section {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* .chart-label + .chart-section-title, in ink: the loudest annotation. */
h2 {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink);
}

p,
ul,
ol {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

ul,
ol {
  padding-left: 20px;
}

li {
  margin: 6px 0;
}

a {
  color: var(--primary);
  text-underline-offset: 4px;
}

.muted {
  color: var(--muted-fg);
}

/* The annotated paragraph — the A2P disclosure block a carrier reviewer is
   looking for. It was `border-left: 3px solid #93c5fd` on white, a colour that
   exists nowhere else in the product; this is CHART's own "this paragraph is
   annotated" idiom, matching LegalCallout. */
.sms-box,
.optin-disclosure {
  margin-top: 16px;
  border-left: 2px solid var(--primary);
  background: var(--panel);
  padding: 12px 16px;
}

.sms-box > :first-child,
.optin-disclosure > :first-child {
  margin-top: 0;
}

/* A panel inside a panel would just be a card again. The disclosure quoted
   INSIDE the SMS block on /privacy-policy.html is a quotation of the exact
   words shown in the app, so it is set as one: hairline rule, no fill. */
.sms-box .optin-disclosure {
  border-left-color: var(--border);
  background: transparent;
  font-style: italic;
}

/* The mocked login/consent controls on /sms-opt-in.html. Metrics are the
   mounted React app's, via AuthShell: 44px field, 2px field radius, 48px
   action. A reviewer is comparing this page to the live screens. */
.optin-form {
  margin-top: 16px;
  max-width: 360px;
  border: 1px solid var(--border);
  padding: 20px;
}

.optin-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.optin-form .field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  color: var(--muted-fg);
  background: transparent;
}

.send-code-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 4px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 1rem;
  font-weight: 500;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.consent-row label {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0;
}

.form-links {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--muted-fg);
}

.optin-figure {
  margin: 16px 0 0;
}

.optin-shot {
  display: block;
  max-width: 360px;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}

figcaption {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--muted-fg);
}

/* The cross-reference to the sibling document, set off the last clause. */
.doc-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 0.875rem;
}