/* Shared styling for the static legal pages.
   These are deliberately plain static HTML, not React routes: a legal page must
   render when the bundle fails, must be crawlable by Stripe/Twilio/carrier
   reviewers, and must not depend on auth or the SPA booting. */
:root {
  color-scheme: light;
  --ink: #171719;
  --muted: #63636b;
  --line: rgba(23, 23, 25, 0.10);
  --wash: #f6f5f4;
  --card: #ffffff;
  --accent: #F02B1D; /* Sepia brand red — matches the landing page */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #fbfaf9 0%, var(--wash) 100%);
  color: var(--ink);
  font-family: Sora, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 88px; }
article {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(23, 23, 25, 0.06);
  padding: clamp(24px, 5vw, 56px);
}
.eyebrow {
  color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; margin: 0 0 10px; text-transform: uppercase;
}
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 36px 0 8px; letter-spacing: -0.01em; }
h3 { font-size: 15px; margin: 22px 0 6px; }
p, li { color: var(--ink); font-size: 15px; }
.muted { color: var(--muted); }
.updated { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
a { color: var(--accent); }
table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 14px; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.legal-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; font-size: 13px; }
.legal-nav a { text-decoration: none; }
footer.legal-foot { color: var(--muted); font-size: 13px; margin-top: 28px; }

/* Unresolved entity details. Deliberately LOUD: a legal page naming the wrong
   company is worse than one that is obviously unfinished, and this project has
   already shipped a policy belonging to a different LLC. */
.todo {
  background: #fff3c4; color: #6b4f00; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; border: 1px dashed #c99a00;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #f2f2f4; --muted: #a0a0aa; --line: rgba(255,255,255,0.12); --wash: #121214; --card: #1a1a1d; }
  body { background: linear-gradient(180deg, #151517 0%, var(--wash) 100%); }
  .todo { background: #4a3800; color: #ffe08a; border-color: #a37c00; }
}

/* Sub-processor tables. The base `table` rule already sets display:block +
   overflow-x:auto so a wide table scrolls inside itself instead of pushing
   the page sideways on a phone. */
.legal-table th,
.legal-table td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 650; font-size: 12.5px; letter-spacing: 0.01em; }
.legal-table td:first-child { white-space: nowrap; padding-right: 20px; }
.legal-table .muted { font-size: 12px; }

/* ── THE LAVA LAMP DRESS ────────────────────────────────────────────────────
   ONE set of legal documents, two surfaces. The Lava Lamp host serves the same
   files as Sepia — same words, same entity, same policies — wearing the room.
   `html.lava` is set by the inline host script at the top of every page that
   links this stylesheet (pinned by tests/lavaEventAddress.test.ts: the class
   list, the host list, and COUNT = files).

   WHY A CLASS AND NOT A SECOND SET OF PAGES: two copies of a privacy policy is
   two copies to keep truthful, and this project has already shipped a policy
   belonging to a different LLC. The dress may change; the document may not.

   The palette is the room's own (src/lib/lavaLampDesign.ts): void ground, warm
   ink, coral accent. The card sits a STEP ABOVE the ground, never below it. */
/* `html.lava` (0,1,1) outranks the `:root` (0,1,0) blocks above — including the
   prefers-color-scheme one — and is later in the file, so the room wins in both
   OS schemes without a single !important. */
html.lava {
  color-scheme: dark;
  --ink: #f7f5f1;      /* LAVA_LAMP_BRAND.colors.ink */
  --muted: #918a87;    /* solid warm grey — never a low-alpha wash of the ink */
  --line: rgba(255, 255, 255, 0.11);
  --wash: #050506;     /* .colors.void */
  --card: #0f0f11;     /* a step ABOVE the ground */
  --accent: #ff6236;   /* .colors.coral */
}
html.lava body {
  /* One quiet ambient, the room's own two lights, over the void. Not a
     periodic gradient and not a decorative sweep — a legal document is read,
     not admired. */
  background:
    radial-gradient(ellipse 60% 40% at 82% -6%, rgba(23, 75, 255, 0.10), transparent 72%),
    radial-gradient(ellipse 56% 38% at 4% 104%, rgba(255, 98, 54, 0.07), transparent 70%),
    var(--wash);
  background-attachment: fixed;
}
html.lava article { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); }
html.lava .todo { background: #4a3800; color: #ffe08a; border-color: #a37c00; }

/* The masthead. Typography only — the room has no logo file, and a legal page
   is the wrong place to introduce one. Swapped as WHOLE ELEMENTS rather than
   with generated content so the hidden half leaves the accessibility tree
   instead of being read aloud under the wrong brand.

   TWO LINES ON PURPOSE. Measured at 375 in the browser: "LAVA LAMP · A SEPIA
   LABS PRODUCT" cannot fit one line inside the card at any tracking a 12px
   eyebrow should have, and it broke after "LABS", orphaning "PRODUCT". So the
   mark sits on its own line and the attribution beneath it — a lockup rather
   than a wrap, and it reads the same at 1200. */
.on-lava { display: none; }
html.lava .on-lava { display: block; }
html.lava .on-sepia { display: none; }
html.lava .eyebrow { margin-bottom: 14px; }
html.lava .lava-mark { display: block; letter-spacing: 0.22em; }
html.lava .lava-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Dark surfaces the same way the app does it: the ground is the darkest thing
   on the page, and every rule below only restates what the tokens already say.
   Kept explicit because these two selectors carry hardcoded light values. */
html.lava th,
html.lava td { border-bottom-color: var(--line); }