/* Alpha AI legal pages — one stylesheet, no external requests.
   Store reviewers and crawlers must be able to read these with no JS, no
   fonts to fetch and no login, so everything here is static and self-hosted. */

:root {
  color-scheme: light dark;

  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #0b1220;
  --text: #2b3444;
  --muted: #5b6675;
  --border: #e2e6ed;
  --accent: #2f63cc;
  --accent-soft: #eaf0fd;
  --todo-bg: #fff3cd;
  --todo-ink: #6b4e00;
  --todo-border: #e8c86a;
  --maxw: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --surface: #151b24;
    --ink: #f2f5f9;
    --text: #ccd4e0;
    --muted: #939eae;
    --border: #263041;
    --accent: #7aa5f5;
    --accent-soft: #1a2436;
    --todo-bg: #40320d;
    --todo-ink: #ffdf8a;
    --todo-border: #7a6220;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang HK", "Microsoft JhengHei",
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- masthead */

header.masthead {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding-block: 28px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 26px;
  width: auto;
}

h1 {
  color: var(--ink);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 16px 0 10px;
}

.dateline {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.dateline strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ layout */

main { padding-block: 36px 64px; }

h2 {
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

main > .wrap > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

h3 {
  color: var(--ink);
  font-size: 1.02rem;
  margin: 26px 0 8px;
}

p { margin: 0 0 14px; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

strong { color: var(--ink); font-weight: 650; }

/* Editable values the publisher has to fill in before this goes live.
   Loud on purpose — an unfilled placeholder must not survive a proofread. */
.todo {
  background: var(--todo-bg);
  color: var(--todo-ink);
  border: 1px dashed var(--todo-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  font-size: 0.94em;
}

.lede {
  font-size: 1.06rem;
  color: var(--text);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 18px;
}

.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 0.96rem;
}

.note > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; margin: 0 0 18px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--ink);
  font-weight: 650;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  background: var(--accent-soft);
}

tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- index */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 26px 0 0;
}

.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}

.tile:hover { border-color: var(--accent); }

.tile h2 {
  border: 0;
  padding: 0;
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--accent);
}

.tile p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* ------------------------------------------------------------------ footer */

footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 22px 40px;
  font-size: 0.9rem;
  color: var(--muted);
}

footer a { color: var(--accent); }
footer p { margin: 0 0 6px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------- print */

@media print {
  :root { --bg: #fff; --surface: #fff; --border: #ccc; }
  body { font-size: 11pt; }
  .note, .card { break-inside: avoid; }
  h2 { break-after: avoid; }
  .todo { border: 1px solid #000; background: none; color: #000; }
  footer { border-top: 1px solid #ccc; }
}