/* Long-form content styles for the static marketing pages: /learn (hub + guides + platforms +
   magnets), /security, and /legal/* (ADR-058). Served as a REAL stylesheet under /css/learn.css
   (the same static /css tree as tokens.css + chrome.css), loaded via a <link> AFTER them.

   Why a <link>, not an inlined <style>: the production CSP is `style-src 'self'` (ADR-065, no
   'unsafe-inline'), which BLOCKS an inline <style> block — so the old inlined critical.css never
   applied on the live site (the pages fell back to the browser default: white page, Times, no
   layout). An external same-origin stylesheet is allowed by 'self', exactly like chrome.css.

   It references the shared SEMANTIC TOKENS (--color-*, --space-*, --text-*, --radius-*, --shadow-*)
   from tokens.css directly — no hand-copied palette, no hex literals — so these pages can never
   drift in color, type, or spacing from index.html. The chrome (header/footer) is the exact same
   markup + stylesheet the landing uses (chrome.css), read verbatim from the landing partials.

   Layout intent: a CENTERED reading column (balanced margins, premium long-form feel) inside the
   same 1080px .container the landing uses, with wide elements (diagrams, the related-guide card
   grid, tables) breaking out to a broader measure for visual rhythm. */

:root {
  /* One content width for everything — running text, diagrams, the card grid, and tables all
     share --doc-max so the prose lines up edge-to-edge with the graphics (owner: the text used to
     read much narrower than the figures). Centered inside the same 1080px .container the landing
     uses. --wide-max is kept as an alias in case a future element wants a distinct wider measure. */
  --doc-max:  60rem;
  --wide-max: 60rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* ── The document column ─────────────────────────────────────────────────────
   Every block is centered at the reading measure; wide elements opt into --wide-max.
   .container (chrome.css) still provides the outer 1080px cap + responsive padding. */
main { padding: var(--space-10) 0 var(--space-16); }
main > * { max-width: var(--doc-max); margin-inline: auto; }
main > figure.fig,
main > [data-interlinks],
main > table { max-width: var(--wide-max); }

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-strong);
  letter-spacing: -0.01em;
  margin-block: 0 var(--space-3);
}
h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-strong);
  margin-block: var(--space-12) var(--space-4);
}
h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-ink-strong);
  margin-block: var(--space-6) var(--space-2);
}

/* ── Body copy + links ──────────────────────────────────────────────────────── */
p { margin-block: 0 var(--space-5); }
strong { font-weight: var(--weight-semibold); color: var(--color-ink-strong); }

main a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-border);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard),
              text-decoration-color var(--duration-fast) var(--ease-standard);
}
main a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

ol, ul { padding-left: var(--space-6); margin-block: 0 var(--space-5); }
li { margin: var(--space-2) 0; }
li::marker { color: var(--color-ink-subtle); }

/* ── Breadcrumb (guides) ─────────────────────────────────────────────────────── */
.crumbs {
  padding: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-subtle);
}
.crumbs a { color: var(--color-ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-strong); }

/* ── Answer box (the extraction-optimized lede) ─────────────────────────────── */
.answer {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}

/* ── Key facts ──────────────────────────────────────────────────────────────── */
.key-facts {
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto var(--space-8);
  border-top: 1px solid var(--color-border);
}
.key-facts li {
  padding: var(--space-3) 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.key-facts .src { color: var(--color-ink-subtle); font-size: var(--text-sm); }
.key-facts .src a { color: var(--color-ink-muted); }

/* ── Meta line under a legal/security title ─────────────────────────────────── */
.updated {
  color: var(--color-ink-subtle);
  font-size: var(--text-sm);
  margin: calc(var(--space-2) * -1) auto var(--space-8);
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-6) auto;
  font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
thead th {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  background: var(--color-bg-sunk);
  letter-spacing: 0.02em;
}
tbody tr:last-child td { border-bottom: 0; }

/* ── Blockquote ─────────────────────────────────────────────────────────────── */
blockquote {
  margin: var(--space-6) auto;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--color-accent-border);
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ── CTA card ───────────────────────────────────────────────────────────────── */
.cta {
  background: var(--color-safe-bg);
  border: 1px solid var(--color-safe-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-12) auto;
  box-shadow: var(--shadow-sm);
}
.cta h2 { margin: 0 0 var(--space-2); }
.cta p { color: var(--color-ink); }
.cta a { color: var(--color-safe-strong); font-weight: var(--weight-semibold); }
.cta form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-top: var(--space-4); }
.cta label { display: block; width: 100%; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-ink-strong); }
.cta input[type="email"] {
  flex: 1 1 16rem; min-width: 0;
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-base);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}
.cta input[type="email"]:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.cta button {
  padding: var(--space-3) var(--space-6);
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-on-accent);
  background: var(--color-safe-strong);
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.cta button:hover { background: var(--color-safe); }

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
[data-faq] { margin-top: var(--space-10); }
[data-faq-item] {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
[data-faq-item] h3 { margin-top: 0; }

/* ── Trust footer (author + verified + sources) ─────────────────────────────── */
.trust {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.author { display: flex; gap: var(--space-3); align-items: center; }
.author img { border-radius: var(--radius-pill); }
.author strong { color: var(--color-ink-strong); }
.verified { margin: var(--space-3) 0 0; }
.sources-h { font-weight: var(--weight-semibold); color: var(--color-ink); margin: var(--space-4) 0 var(--space-2); }
.sources { padding-left: var(--space-6); }

/* ── Related guides: a card grid, not a bare link list ──────────────────────── */
[data-interlinks] { margin-top: var(--space-10); }
[data-interlinks] ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}
[data-interlinks] li { margin: 0; }
[data-interlinks] a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink-strong);
  text-decoration: none;
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
[data-interlinks] a::after {
  content: "→";
  color: var(--color-accent);
  font-size: var(--text-lg);
  flex: 0 0 auto;
}
/* The "← All guides" back-link (always href="/learn/") is a nav-up, not a peer guide — no → arrow. */
[data-interlinks] a[href="/learn/"]::after { content: none; }
[data-interlinks] a:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Diagrams (inline SVG figures) ──────────────────────────────────────────── */
figure.fig {
  margin: var(--space-10) auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
figure.fig svg { display: block; width: 100%; height: auto; }
figure.fig svg text { font-family: var(--font-sans); }
figure.fig .fig-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
figure.fig .fig-title { font-size: 15px; font-weight: 600; }
figure.fig .fig-note { font-size: 13px; }
figure.fig figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  text-align: center;
}
figure.fig figcaption strong { color: var(--color-ink-strong); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  body { font-size: var(--text-base); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  main { padding-top: var(--space-8); }
  .answer { font-size: var(--text-lg); padding: var(--space-4) var(--space-5); }
  .cta { padding: var(--space-5) var(--space-5); }
  figure.fig { padding: var(--space-4); }
}