/* Cookie policy — page CSS
 * ============================================================================================
 * GOAL: a FAITHFUL (1:1) reproduction of the reference "Cookie Policy.dc.html" without its
 * inline styles. Every value below was read off the reference, not guessed.
 *
 * STRATEGY (WORKFLOW.md): the markup uses DESIGN-SYSTEM classes wherever the DS has the right
 * component (.section, .page-container), and this file carries the reference's metric DELTAS
 * as page-scoped overrides. Tuning toward the DS later is deleting overrides one at a time.
 *
 * This is a legal document, so the DS surface it uses is deliberately small: there is no
 * button, no card component, no closer band. What it DOES share with Security — the sticky
 * table of contents and the white prose card — is near byte-identical, which is the argument
 * for a "legal prose card + TOC" pattern once Privacy and T&Cs are ported (4 pages).
 *
 * Every rule is scoped under `.cookies-page`, so this file is inert on any other page.
 *
 * TOKENS: the reference's :root is the same block Security declares — ink #0F1A4F/#4D5B7F/
 * #8893B0, accent #EC634B, paper #FFFFFF, sand #F4F5F9 (page-bg), sand-2 #E9ECF3, rule
 * #E6E8EF, and IBM Plex Mono (= our --font-label). Only sand-2 and the prose-card shadow
 * (0 14px 40px rgba(15,26,79,.07)) have no token of ours.
 *
 * GEOMETRY: the reference container is 1200px with a 24px gutter; ours is 1224/32. Overridden
 * here only — .page-container and .section in app/ are untouched.
 * ============================================================================================ */

.cookies-page {
  --dc-sand-2: #E9ECF3;                                   /* pill hover fill */
  --dc-shadow-card: 0 14px 40px rgba(15, 26, 79, 0.07);   /* the prose card */

  background: var(--color-page-bg);

  /* The reference sets `font-family: var(--font-body)` on its root element, and so must we:
     `.app` declares only `text-ink-soft`, NOT a font family, so body copy on a marketing page
     falls through to Tailwind's generic `ui-sans-serif, system-ui` stack rather than Inter
     unless the element carries an explicit font class. Measured on the Security port, where it
     re-wrapped a paragraph and cost 28px. Flagged in the report as a production issue; fixed
     page-locally here because this file may not touch app/. */
  font-family: var(--font-sans);
}

/* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */
/* ── Vertical rhythm — the reference's own per-section values ────────────────────────────── */
/* Deliberately literal (`dc-py-<top>-<bottom>`) so a later normalisation pass maps each one to
   a DS step or explains why not. The reference does not step these down on mobile. */
.cookies-page .dc-py-132-0 { padding-bottom: 0; }
.cookies-page .dc-py-36    { padding-top: 36px;  padding-bottom: 36px; }
.cookies-page .dc-py-0-88  { padding-top: 0;     padding-bottom: 88px; }

/* ── Display type ───────────────────────────────────────────────────────────────────────── */
.cookies-page [class*="dc-t-"] {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* margin + text-wrap at ZERO specificity via :where(), so an ordinary utility can override
   them. Written as a plain descendant selector (0-2-0) this silently beats every unlayered
   Tailwind margin utility — WORKFLOW §4b trap 1. */
:where(.cookies-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.cookies-page .dc-t-60 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; }

/* ── Body copy ──────────────────────────────────────────────────────────────────────────── */
/* Note the min differs from the Security hero's (15 here, 15.5 there) — kept as measured. */
.cookies-page .dc-lede-17 { font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.cookies-page .dc-measure-62ch { max-width: 62ch; }

/* ── Mono labels (IBM Plex Mono 500 = our --font-label) ──────────────────────────────────── */
/* The reference declares every label with the `font:` SHORTHAND and no `/line-height`, so they
   compute to `normal`. Inheriting our 1.5 instead makes each label row taller — WORKFLOW §4b
   trap 2. Declared once here. */
.cookies-page .dc-label-10,
.cookies-page .dc-label-9,
.cookies-page .dc-toc-title {
  font-family: var(--font-label);
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  display: block;
}

.cookies-page .dc-label-10  { font-size: 10.5px; letter-spacing: 0.08em; }
.cookies-page .dc-label-9   { font-size: 9.5px;  letter-spacing: 0.07em; }
.cookies-page .dc-toc-title { font-size: 10.5px; letter-spacing: 0.08em; }

/* ── The legal sub-nav ──────────────────────────────────────────────────────────────────── */
.cookies-page .dc-legalnav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 6px;
}
.cookies-page .dc-legalnav-title { display: inline-block; margin-right: 8px; }

/* Pill links across the four legal documents. Not .badge: a badge is a passive status chip
   with no interactive padding or hover, and these are navigation. */
.cookies-page .dc-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  line-height: normal;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
  transition: background-color 200ms cubic-bezier(.2, .8, .2, 1), color 200ms cubic-bezier(.2, .8, .2, 1);
}
.cookies-page .dc-pill:hover { background: var(--dc-sand-2); color: var(--color-ink-deep); }

.cookies-page .dc-pill.is-on,
.cookies-page .dc-pill.is-on:hover {
  background: var(--color-ink-deep);
  color: #fff;
}

/* ── Grid ───────────────────────────────────────────────────────────────────────────────── */
/* 220px here, against Security's 230px — the reference's own values, kept apart on purpose. */
.cookies-page .dc-grid { display: grid; }
.cookies-page .dc-grid-legal { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* ── The table of contents ──────────────────────────────────────────────────────────────── */
.cookies-page .dc-toc-wrap { position: sticky; top: 96px; }
.cookies-page .dc-toc      { display: flex; flex-direction: column; gap: 2px; }

.cookies-page .dc-toc-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  padding: 8px 14px;
  color: var(--color-ink-soft);
  border-left: 2px solid var(--color-rule);
  transition: color 200ms cubic-bezier(.2, .8, .2, 1), border-color 200ms cubic-bezier(.2, .8, .2, 1);
}
.cookies-page .dc-toc-link:hover { color: var(--color-ink-deep); }

/* `.is-on` is set in the markup for the first entry AND toggled by page.js scroll-spy, so it
   is styled here and present in the markup — a class only ever named in JS would never be
   styled at all (WORKFLOW §4). */
.cookies-page .dc-toc-link.is-on {
  color: var(--color-ink-deep);
  border-left-color: var(--color-coral-500);
  font-weight: 700;
}

/* ── The prose cards ────────────────────────────────────────────────────────────────────── */
/* The reference styles these through a `[data-legal]` attribute context rather than classing
   every element, and this is genuinely prose — so it is reproduced as a page-scoped context.
   Unlike Security's, these cards carry no icon tile, and their links are CORAL (this
   reference sets `a { color: #EC634B }`, where the Security one sets ink).
   The reference also declares [data-legal] h3/ul/li rules that this page never uses — not
   reproduced, because dead CSS is not fidelity. */
.cookies-page .dc-stack { display: flex; flex-direction: column; gap: 16px; }

.cookies-page .dc-legal {
  background: var(--color-paper);
  border-radius: var(--radius-4\.5);
  box-shadow: var(--dc-shadow-card);
  padding: clamp(26px, 3vw, 36px) clamp(26px, 3.2vw, 40px);
  scroll-margin-top: 96px;
}

.cookies-page .dc-legal h2 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.22; letter-spacing: -0.02em;
  margin: 0 0 12px; color: var(--color-ink-deep);
}
.cookies-page .dc-legal p {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 15px; line-height: 1.7;
  margin: 0 0 14px; color: var(--color-ink-soft);
}
.cookies-page .dc-legal p:last-child { margin-bottom: 0; }

.cookies-page .dc-legal a       { color: var(--color-coral-500); }
.cookies-page .dc-legal a:hover { color: var(--color-ink-deep); }

/* ── Exact spacing steps ────────────────────────────────────────────────────────────────── */
/* Named by px so they can never be confused with a Tailwind step (whose compiled spacing
   surface is patchy — WORKFLOW §4b trap 4). Declared AFTER the type/body blocks so they win
   the equal-specificity tie against their `margin: 0`. */
.cookies-page .dc-mt-18 { margin-top: 18px; }
.cookies-page .dc-mb-14 { margin-bottom: 14px; }

/* ── Reflow — the reference's own breakpoint (1000px) ────────────────────────────────────── */
@media (max-width: 1000px) {
  .cookies-page .dc-grid-legal { grid-template-columns: minmax(0, 1fr); }
  .cookies-page .dc-toc-wrap   { position: static; }
}

/* NO BREAKPOINT HERE IN THE REFERENCE - the padding steps that were here are gone.
 * A gutter step at 767px and a section-padding step at 991px had been added right across the
 * batch. No reference has either: they pad with literal px, no clamp and no media query, all the
 * way down to a phone - and neither 767px nor 991px is even a breakpoint the package uses
 * anywhere (its own are 1080/1000/940/900/800/720/680/640/620/560). Removed to keep the port
 * faithful; the narrow-viewport squeeze that leaves is the reference's own and is recorded in
 * STATUS.md section 5 as the defect most worth fixing at source, after the port.
 */