/* AC Bridge legal pages (privacy.html + terms.html) -- "Midnight" theme.
 *
 * These two pages are PLAIN STATIC HTML in public/: Vite copies them verbatim, so they get
 * no Tailwind and no src/index.css. The tokens below are therefore RESTATED from the SPA's
 * design system (frontend/WebApp/src/index.css :root) rather than imported. Keep them in
 * sync with that file -- it stays the source of truth.
 *
 * Shared (not inlined per page) so the two pages cannot drift apart: they are a legal pair
 * and must read as one document set. Served as a same-origin asset, which the Pages CSP in
 * public/_headers allows (`style-src 'self'`).
 */

:root {
  color-scheme: dark;

  /* --- palette (mirrors src/index.css --ac-*) --- */
  --ac-bg: #07070f;
  --ac-surface-solid: #0d0d1a;
  --ac-border: rgba(148, 132, 255, 0.16);
  --ac-hairline: rgba(255, 255, 255, 0.06);
  --ac-text: #e9e8f4;
  --ac-text-dim: #9b9ab3;
  --ac-text-mute: #6c6b85;
  --ac-accent: #38bdf8;
  --ac-accent-soft: #7dd3fc;
  --ac-accent-3: #34d399; /* green -- "connected/success" in the SPA; here: a commitment kept */
  --ac-warn: #fcd34d;
  --ac-danger: #f87171;
  --ac-danger-soft: #f0a4a4;
  --ac-brand-grad-text: linear-gradient(92deg, #67e8f9, #38bdf8 40%, #a78bfa 75%, #c084fc);

  /* link colours come from the SPA's `@layer base a {}` rule, not a token */
  --ac-link: #a5b4fc;
  --ac-link-hover: #c4b5fd;

  --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  --radius-md: 0.75rem;

  /* one measure drives the masthead, the prose column and the footer */
  --measure: 44rem;
  --gutter: 1.5rem;
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--ac-bg);
}

/* The SPA's ambient wash: a violet crown glow + cyan/violet aurora over near-black.
   Copied verbatim from src/index.css `@layer base body {}` so a legal page and the app
   share one horizon. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ac-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--ac-bg);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(88, 80, 236, 0.14), transparent 60%),
    radial-gradient(760px 420px at 12% 4%, rgba(56, 189, 248, 0.08), transparent 58%),
    radial-gradient(760px 420px at 88% 2%, rgba(139, 92, 246, 0.1), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

a {
  color: var(--ac-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--ac-link-hover);
}
a:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection {
  background: rgba(139, 92, 246, 0.45);
  color: #ffffff;
}

/* ===== masthead: the brand lockup from src/components/ac/Brand.tsx, in plain CSS ===== */
.masthead {
  border-bottom: 1px solid var(--ac-hairline);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.15rem var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ac-text);
}
.brand:hover {
  color: var(--ac-text);
}
/* the stencil glyph filled with the brand gradient -- same mask trick as <BrandMark /> */
.brand-mark {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #3aa0ff 0%, #6a6ff6 52%, #8a4ff0 100%);
  -webkit-mask: url(/brand/ac-bridge-mark-stencil.png) center / contain no-repeat;
  mask: url(/brand/ac-bridge-mark-stencil.png) center / contain no-repeat;
}
.brand-word {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.masthead-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ac-text-mute);
}

/* ===== prose column ===== */
main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem var(--gutter) 4rem;
}

/* h1 follows the app's page-title pattern (AccountPage/Hero): plain lead + gradient subject */
h1 {
  margin: 0 0 0.7rem;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--ac-text);
}
.grad {
  background: var(--ac-brand-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the version stamp: mono, matching the app's meta rows */
.meta {
  margin: 0 0 2.5rem;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ac-text-dim);
}

h2 {
  margin: 2.5rem 0 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ac-text);
}

p,
li {
  color: var(--ac-text-dim);
}
p {
  margin: 0 0 1rem;
}
ul {
  padding-left: 1.15rem;
}
li {
  margin-bottom: 0.5rem;
}
li::marker {
  color: var(--ac-accent);
}
strong {
  color: var(--ac-text);
  font-weight: 600;
}
em {
  color: var(--ac-text);
  font-style: italic;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ac-accent-soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ac-hairline);
  padding: 0.08rem 0.32rem;
  border-radius: 0.3rem;
  white-space: nowrap;
}

/* ===== callouts =====
 * Prominence tracks consequence, and the colour carries the meaning rather than decorating:
 *   .key   -- amber (--ac-warn):    the thing you must not miss (we record your sessions by default)
 *   .note  -- red   (--ac-danger):  a hazard that can hurt you (secrets, eavesdropping)
 *   .good  -- green (--ac-accent-3): a commitment in the reader's favour (we never sell your data)
 * All three are status colours already in the design system, so no new vocabulary is introduced.
 */
.key,
.note,
.good {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ac-hairline);
  border-left-width: 3px;
  border-radius: var(--radius-md);
}
.key {
  border-left-color: var(--ac-warn);
  background: rgba(252, 211, 77, 0.06);
}
.note {
  border-left-color: var(--ac-danger);
  background: rgba(248, 113, 113, 0.06);
}
.good {
  border-left-color: var(--ac-accent-3);
  background: rgba(52, 211, 153, 0.06);
}

/* a callout's own heading -- mono eyebrow, inherits the callout's accent via currentColor */
.callout-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.key .callout-label {
  color: var(--ac-warn);
}
.note .callout-label {
  color: var(--ac-danger-soft);
}
.good .callout-label {
  color: var(--ac-accent-3);
}

/* ===== table =====
 * The wrapper scrolls, not the page: min-width keeps the columns legible on a phone while
 * `overflow-x: auto` contains the overflow.
 */
.table-wrap {
  margin: 1.25rem 0;
  overflow-x: auto;
  border: 1px solid var(--ac-border);
  border-radius: var(--radius-md);
}
table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 14.5px;
}
th,
td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ac-hairline);
}
th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-text);
  background: var(--ac-surface-solid);
}
td {
  color: var(--ac-text-dim);
}
tr:last-child td {
  border-bottom: 0;
}

/* ===== footer: mirrors <LandingFooter /> ===== */
.legal-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--ac-hairline);
}
.legal-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3.5rem;
}
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 12px;
}
.legal-nav a {
  color: var(--ac-text-mute);
}
.legal-nav a:hover {
  color: var(--ac-text);
}
/* dim, not mute: this disclaimer is legally load-bearing, so it clears AA (7.3:1) */
.disclaimer {
  margin: 0;
  font-size: 12.5px;
  color: var(--ac-text-dim);
}
.copyright {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ac-text-mute);
}

@media (max-width: 640px) {
  :root {
    --gutter: 1.15rem;
  }
  main {
    padding-top: 2.25rem;
    padding-bottom: 3rem;
  }
  h1 {
    font-size: 27px;
  }
  .masthead-tag {
    display: none;
  }
}