/* ─────────────────────────────────────────────────────────────────────────
   public-site.css — the shared PUBLIC-SITE layer.

   Loaded on every anonymous public page by _partials/public_head.html, after
   tokens-bureau.css (the one token source) and marketing-bureau.css (the
   frozen homepage canon's own page system).

   This file adds NO tokens and redefines NO canon class. Every value below is
   recovered from the homepage canon:
     container  .mkt-wrap        max-width 1080 / padding 0 34   (mb.css:639)
     page h1    .mkt-hero h1     clamp(2.125rem,1.3rem+2.75vw,3.5rem)/560/-.022em
     lead       .mkt-hero .lede  serif 20px / 1.55 / 58ch
     section h2 .mkt-body h2     sans 22px / 600 / -.01em
     body copy  .mkt-body p      15.5px / 1.62 / --text-secondary
     rhythm     .mkt-hero 66px top · .mkt-sec 48px bottom · h2 40px lead-in

   WHY THIS EXISTS. public_header/public_footer were extracted long ago, which
   is why the header and footer never jumped. The DOCUMENT layer never was, so
   each shell invented its own width and type scale: at 1440 the content left
   edge landed on 214 / 394 / 170 / 180 / 384 depending on the page, and the h1
   came in seven sizes across five weights. Worse, three separate `:has()`
   rules existed only to let pages BREAK OUT of the old 720px `.static-shell`
   reading column — pages were fighting the shell instead of being served by
   it. `.pub-shell` replaces that inversion: the shell owns the container, and
   a page opts into the document variant when it hands over bare prose.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. THE PUBLIC SHELL MARKER ─────────────────────────────────────────────
   `.pub-shell` marks a document rendered by the shared public layout. It
   carries NO layout of its own on purpose: composed marketing pages bring
   their own `.wrap` / `.mkt-wrap` container and their own full-bleed tinted
   bands, and both already measure from the shared width contract now that
   `.wrap` and `.mkt-wrap` read --pub-w-wide / --pub-gutter. Constraining the
   shell as well would apply the gutter twice and trap the bands. The marker
   exists so the regression tests can assert that every public route renders
   through this layout and not a revived standalone shell. */

/* ── 2. THE DOCUMENT VARIANT ────────────────────────────────────────────────
   Reference + legal pages (Glossary, Disclaimer, Terms, Privacy, Refund,
   Contributor). They emit bare prose — no page classes — so the shell styles
   the elements directly and supplies the container itself.

   The narrower measure is intentional, and it is applied to the TEXT rather
   than to the container: the container stays the public container, so the h1
   starts on exactly the same left edge as every marketing page instead of
   floating in a centred column that reads as an unrelated document. That
   centred 720px column is precisely what made these pages look detached — at
   1440 their h1 sat at x=384 while the rest of the site sat at x=214. */
.pub-doc {
  max-width: var(--pub-w-wide);
  margin: 0 auto;
  padding: var(--pub-hero-top) var(--pub-gutter) var(--pub-hero-bottom);
}
.pub-doc > * { max-width: var(--pub-w-read); }
/* Text arriving from outside is unbounded (CLAUDE.md §9.3). The Glossary cites
   full Wikipedia URLs — one ran 651px wide inside a 390px viewport and pushed
   document scrollWidth to 910px. Prose only breaks when a word genuinely
   cannot fit; URLs and code may break anywhere. Fixed for the whole document
   family, not for the one page that surfaced it. */
.pub-doc { overflow-wrap: break-word; }
.pub-doc a,
.pub-doc code { word-break: break-word; overflow-wrap: anywhere; }

.pub-doc h1 {
  font-family: var(--font-sans);
  font-size: var(--pub-type-title);
  line-height: var(--pub-lh-tight);
  font-weight: 560;
  letter-spacing: -.022em;
  color: var(--text-primary);
  margin: 0;
  max-width: 20ch;
}
/* The standfirst under a document h1 — same role as `.mkt-hero .lede`. */
.pub-doc .static-subtitle,
.pub-doc > p.lede {
  font-family: var(--font-serif);
  font-size: var(--pub-type-body);
  line-height: var(--pub-lh-body);
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 18px 0 0;
}
.pub-doc h2 {
  font-family: var(--font-sans);
  font-size: var(--pub-type-section);
  line-height: var(--pub-lh-snug);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin: 40px 0 10px;
  padding: 0;
  border: 0;
  text-transform: none;
}
.pub-doc h3 {
  font-family: var(--font-sans);
  font-size: var(--pub-type-body);
  line-height: var(--pub-lh-snug);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-primary);
  margin: 24px 0 6px;
}
.pub-doc p,
.pub-doc li {
  color: var(--text-secondary);
  font-size: var(--pub-type-body);
  line-height: var(--pub-lh-body);
}
.pub-doc p { margin: 0 0 14px; }
.pub-doc ul,
.pub-doc ol { margin: 0 0 14px; padding-left: 20px; }
.pub-doc li { margin: 0 0 7px; }
.pub-doc li::marker { color: var(--brand-500); }
.pub-doc a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--brand-500) 55%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.pub-doc a:hover { text-decoration-color: var(--brand-500); }
.pub-doc code {
  font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}
.pub-doc hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}
.pub-doc table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: var(--pub-type-body); }
.pub-doc th, .pub-doc td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.pub-doc th { color: var(--text-primary); font-weight: 600; }
/* Trailing metadata line (effective date, version, contact). */
.pub-doc .static-meta {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--pub-type-meta);
  line-height: var(--pub-lh-meta);
  letter-spacing: .03em;
  color: var(--text-tertiary);
}
.pub-doc .static-meta a { color: var(--text-tertiary); }

/* ── 2b. SHARED HEADER/FOOTER ON PUBLIC PAGES ──────────────────────────────
   public_header.html is deliberately self-contained because the public report
   view also includes it (out of scope — do not edit the partial). This sheet
   loads ONLY on public pages, so asserting the canonical roles here brings
   the nav onto the body role on the public site while the report keeps its
   current header exactly. The element tag lifts specificity above the
   partial's own scoped rules without any !important. The beta chip and the
   footer already sit on the meta value (14px) and need no assertion. */
header.pubnav .lnk,
header.pubnav .ghost,
header.pubnav .amber { font-size: var(--pub-type-body); }
@media (max-width: 880px) {
  header.pubnav .lnk { font-size: var(--pub-type-body); }
}

/* ── 3. AUTH + PURCHASE FAMILY ──────────────────────────────────────────────
   The compact form column is intentional and must NOT stretch to marketing
   width. cabinet-login.css already owns the composition; the width and field
   height now come from the shared contract so login, signup and any future
   anonymous form measure identically. */
.lg-card { max-width: var(--pub-w-form); }
.lg-stage, .lg-side { padding-left: var(--pub-gutter); padding-right: var(--pub-gutter); }
/* Auth typography roles. cabinet-login.css is shared with the authenticated
   attestation page (out of scope), so — exactly like the header partial — it
   stays untouched and this public-only layer asserts the canonical roles.
   Element-qualified selectors outrank the composition file's single-class
   rules even though it loads later; no !important. The mono kickers, labels
   and footer rows already compute to the meta value (--fs-2xs = 14px). */
section.lg-stage .stage-slogan { font-size: var(--pub-type-title); line-height: var(--pub-lh-tight); }
section.lg-stage .stage-sub { font-size: var(--pub-type-body); line-height: var(--pub-lh-body); }
form.lg-card h1 { font-size: var(--pub-type-section); line-height: var(--pub-lh-snug); }
form.lg-card .lg-sub { font-size: var(--pub-type-body); line-height: var(--pub-lh-body); }
form.lg-card .lg-input input,
form.lg-card .lg-btn,
form.lg-card .lg-sso,
form.lg-card .lg-alt { font-size: var(--pub-type-body); }

/* ── 4. SHARED PUBLIC BREAKPOINTS ───────────────────────────────────────────
   The two public steps (tablet 900, phone 640) already used by the canon.
   The gutter itself steps down on the token in marketing-bureau.css. */
@media (max-width: 640px) {
  .pub-doc > * { max-width: none; }
  .pub-doc h2 { margin-top: 32px; }
}