/* Echo public pages: shared tokens, header, footer, buttons and the legal layout.
   Spec: echo/docs/design/public-pages-direction.md. Landing-only styles live
   inline in views/echo.html. Flat single-class selectors on purpose: a nested
   type selector once out-ranked .eyebrow in the mock (spec §10 a). */

/* ===== Tokens: dark (default, all pages) — spec §3.1 ===== */
:root {
  color-scheme: dark;
  --bg: #0A0A0C;
  --bg-raised: #131317;
  --bg-sunk: #070709;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --text: #ECECEF;
  --text-body: #D4D4D8;
  --text-2: #A1A1AA;
  --text-3: #8B8B94;
  --accent: #FFC32D;
  --accent-hover: #FFD25E;
  --accent-ink: #0A0A0C;
  --link: #FFC32D;
  --dot: #FFC32D;
  --focus: #FFC32D;
  --header-bg: rgba(10,10,12,0.72);
  --glass: rgba(10,10,13,0.68);
  --glass-line: rgba(255,255,255,0.14);
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 8px;
  --sans: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --header-h: 60px;
}

/* ===== Tokens: light (legal pages only) — spec §3.2 ===== */
.legal-page { color-scheme: light dark; }
@media (prefers-color-scheme: light) {
  .legal-page {
    color-scheme: light;
    --bg: #FAFAF7;
    --bg-raised: #FFFFFF;
    --bg-sunk: #F2F2EE;
    --line: rgba(0,0,0,0.08);
    --line-strong: rgba(0,0,0,0.14);
    --text: #18181B;
    --text-body: #27272A;
    --text-2: #52525B;
    --text-3: #6B6B74;
    --link: #8A5300;
    --focus: #8A5300;
    --dot: #B07000;
    --header-bg: rgba(250,250,247,0.82);
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Smooth scroll for in-page jumps. On the legal pages it switches on only after
   load (echo-legal.js adds .is-loaded): a smooth scroll to a deep-linked section
   on a first, uncached visit is still animating when the web fonts swap in, and
   it landed 57px short. The initial jump is instant, so scroll anchoring holds it. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.legal-page) { scroll-behavior: smooth; }
  html.legal-page.is-loaded { scroll-behavior: smooth; }
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
}
a:hover { text-decoration-color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* ===== Skip link — spec §4.3 ===== */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: var(--accent-ink); outline-offset: 2px; }

/* ===== Header — spec §4.1 ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header__in {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__in--landing { max-width: 1120px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}
.brand__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #0E0E12;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px 8px;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav__link {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.nav__link:hover { color: var(--text); background: var(--line); }
.nav__link[aria-current="page"] { color: var(--text); background: var(--line); }
.nav__btn { margin-left: 8px; }

/* ===== Buttons — spec §7.1 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color 150ms ease, transform 150ms ease;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn--primary:active { transform: translateY(1px); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }

/* ===== Mono label ===== */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ===== Legal: hero — spec §3.4, §6.1 ===== */
.legal-hero { max-width: 1200px; margin: 0 auto; padding: 72px 24px 40px; }
.legal-title {
  margin-top: 12px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
}
.legal-meta { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* ===== Legal: grid — spec §6.1 ===== */
.legal-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  column-gap: 72px;
}
.legal-grid > .glance { grid-column: 2; grid-row: 1; }
.legal-grid > .toc { grid-column: 1; grid-row: 1 / span 2; }
.legal-grid > .prose { grid-column: 2; grid-row: 2; }

/* ===== Legal: contents (desktop) — spec §6.5 ===== */
.toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
  /* 92px top + 32px spacing + room for the footer at the end of the page: on a
     short window (700px) the list scrolls inside itself rather than being
     pushed under the header when the page bottoms out. */
  max-height: calc(100vh - 216px);
  overflow-y: auto;
  padding-bottom: 16px;
}
.toc__label { margin-bottom: 12px; }
.toc__list { list-style: none; border-left: 1px solid var(--line); }
.toc__link {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  padding: 6px 0 6px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
.toc__link:hover { color: var(--text); }
/* §7.1 (b): the list scrolls inside itself, so an outset ring is clipped. */
.toc__link:focus-visible { outline-offset: -2px; }
.toc__n { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text-3); }
.toc__link[aria-current="true"] { color: var(--text); font-weight: 500; border-left-color: var(--accent); }
.toc__link[aria-current="true"] .toc__n { color: var(--link); }

/* ===== Legal: at a glance (privacy only) — spec §6.4 ===== */
.glance {
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 28px 32px 24px;
  margin-bottom: 56px;
}
.glance__title { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.glance__note { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.glance__groups { margin-top: 20px; }
.glance__group {
  display: grid;
  grid-template-columns: 132px 1fr;
  column-gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.glance__label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 2.2;
  text-transform: uppercase;
  color: var(--text-2);
}
.glance__list { list-style: none; }
.glance__item { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.glance__item + .glance__item { margin-top: 8px; }
.glance__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}
.glance__para { font-size: 16px; line-height: 1.6; color: var(--text-body); }

/* ===== Legal: the document — spec §6.2, §6.3 ===== */
/* Bottom space lives on main, not the grid padding, so the sticky contents
   list (whose limit is the grid content box) can stay clear of the header at
   the end of the page. */
.prose { color: var(--text-body); margin-bottom: 96px; }
.legal-section { scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-section + .legal-section { margin-top: 56px; }
.legal-h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}
.legal-h2__n { min-width: 24px; flex-shrink: 0; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.legal-h2__anchor {
  margin-left: 4px;
  opacity: 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
}
.legal-h2:hover .legal-h2__anchor, .legal-h2__anchor:focus-visible { opacity: 1; }
.prose p, .prose li { color: var(--text-body); }
.prose p + p, .prose ul + p, .prose p + ul, .prose ul + ul { margin-top: 16px; }
.prose ul { padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--text-3); }
.prose strong { font-weight: 600; color: var(--text); }
/* All-caps clauses: same size and colour as body text, never dimmed (§6.3).
   The source text is already in capitals: no text-transform. */
.caps {
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 20px 24px;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-body);
}

/* ===== Legal: floating Contents pill — spec §6.6 ===== */
.fab {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.55);
  color: #ECECEF;
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.fab.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}
.fab:hover { color: #FFFFFF; }
.fab:focus-visible { outline-color: #FFC32D; }

/* ===== Footer — spec §4.2 ===== */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
}
.site-footer__in--landing { max-width: 1120px; }
.site-footer__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__link { color: var(--text-2); text-decoration: none; }
.site-footer__link:hover { color: var(--text); text-decoration: underline; }

/* ===== Below 1100: contents becomes a card at the top — spec §6.6 ===== */
@media (max-width: 1099px) {
  .legal-hero { max-width: 768px; padding-top: 48px; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); max-width: 768px; }
  .legal-grid > .glance, .legal-grid > .toc, .legal-grid > .prose { grid-column: 1; grid-row: auto; }
  .toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 56px;
    padding: 20px 20px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    scroll-margin-top: 76px;
  }
  .toc__list { border-left: 0; }
  .toc__item + .toc__item { border-top: 1px solid var(--line); }
  .toc__link { min-height: 40px; padding: 9px 0; margin-left: 0; border-left: 0; font-size: 15px; }
  .toc__link[aria-current="true"] { border-left: 0; }
}
@media (min-width: 1100px) { .fab { display: none; } }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header__in { padding: 0 16px; gap: 12px; }
  .nav__link { padding: 8px 10px; font-size: 14px; }
  .legal-hero { padding: 36px 20px 28px; }
  .legal-title { font-size: 36px; }
  .legal-grid { padding: 0 20px; }
  .prose { margin-bottom: 80px; }
  .glance { padding: 22px 20px 20px; }
  .glance__group { grid-template-columns: 1fr; row-gap: 6px; }
  .glance__label { line-height: 1.5; }
  .glance__item, .glance__para { font-size: 15.5px; }
  .legal-h2 { font-size: 21px; }
  .caps { padding: 16px; font-size: 16px; }
  .site-footer__in { padding: 28px 20px 36px; }
  .site-footer__nav { margin-left: 0; width: 100%; }
}

/* ===== Motion — spec §7.2 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* ===== Print — spec §7.3 ===== */
@media print {
  .legal-page, :root { color-scheme: light; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .site-header, .toc, .fab, .skip, .site-footer__nav, .legal-h2__anchor { display: none !important; }
  .legal-hero, .legal-grid { max-width: none; padding-left: 0; padding-right: 0; }
  .legal-grid { display: block; padding-bottom: 0; }
  .legal-title, .legal-h2, .glance__title, .prose strong { color: #000000; }
  .legal-meta, .glance__note, .glance__label, .eyebrow, .legal-h2__n { color: #333333; }
  .prose p, .prose li, .glance__item, .glance__para, .caps { color: #000000; }
  .glance { background: #FFFFFF; border: 1px solid #999999; break-inside: avoid; }
  .caps { background: #FFFFFF; border: 1px solid #000000; break-inside: avoid; }
  a { color: #000000; text-decoration: underline; }
  /* Every link in the legal text already shows its own address as its text
     (paths, the email, priv.gc.ca), so no attr(href) suffix: it would print twice. */
  .legal-section { break-inside: auto; }
  .legal-h2 { break-after: avoid; }
}

/* ===== Legal pages: the /echo top bar =====
   Same bar as /echo (echo-landing.css .nav / .brand / .brand-mark /
   .nav-links): full width, 60px, clamp(20px, 4vw, 48px) sides (16px on
   phones), the "echo" wordmark with the gold bars, text links on the right.
   Copied rather than linked: echo-landing.css restyles body, h1, h2 and p,
   and its .nav / .brand names collide with the classes above. Sticky here
   (fixed on /echo): the legal pages have no hero to sit under it. */
.site-header--echo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: rgba(12, 13, 16, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  /* /echo's --ink and --muted, so the wordmark and links match exactly */
  --bar-ink: rgba(255, 255, 255, 0.94);
  --bar-muted: rgba(255, 255, 255, 0.62);
}
.echo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bar-ink);
  font: 500 17px/1 var(--mono);
  letter-spacing: 0.14em;
  text-decoration: none;
}
.echo-brand__mark {
  width: 26px;
  height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 36'%3E%3Cg fill='rgba(255,200,50,0.9)'%3E%3Crect x='0' y='13' width='7' height='10' rx='3.5'/%3E%3Crect x='11' y='10' width='7' height='16' rx='3.5'/%3E%3Crect x='22' y='8' width='7' height='20' rx='3.5'/%3E%3Crect x='33' y='10' width='7' height='16' rx='3.5'/%3E%3Crect x='44' y='13' width='7' height='10' rx='3.5'/%3E%3C/g%3E%3C/svg%3E");
}
.echo-nav { display: flex; align-items: center; gap: 28px; }
.echo-nav a {
  font: 500 14px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--bar-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  transition: color 160ms ease;
}
.echo-nav a:hover { color: var(--bar-ink); }
/* The page you're on: full-strength text with a gold underline. */
.echo-nav a[aria-current="page"] {
  color: var(--bar-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (max-width: 560px) {
  .site-header--echo { padding: 0 16px; }
  .echo-nav { gap: 20px; }
  .echo-nav a { padding: 13px 0; }
}
@media (prefers-color-scheme: light) {
  .legal-page .site-header--echo { background: var(--header-bg); border-bottom-color: var(--line); --bar-ink: var(--text); --bar-muted: var(--text-2); }
}