/* Reading pages — the guides and the two legal pages (1.2 redesign, 2026-09-19).

   Loaded after /tools/tesserae-tools.css (tokens, top bar, footer, card grid)
   and /tools/public-chrome.css (theme toggle, back to top, the fixed action
   colour) by exactly seven pages: /guides, its four articles, /privacy.html and
   /terms.html. EVERY selector below is scoped to one of the two reading body
   classes — .rd-page (an article or a legal page) or .rd-hub (the guides
   index) — so /tools, /compare and the landing are untouched.

   What it does, and nothing else:
   - a readable measure (~68 characters) for long text, 17px on desktop;
   - breadcrumbs on the guide articles, matching their BreadcrumbList schema;
   - "On this page" on the legal pages: a native <details>, closed in the
     HTML, so below 1024px it is one 44px row until opened (then wrapping
     pills); from 1024px a sticky rail, held open by /tools/theme.js, whose
     summary is only a label there;
   - the guides' "Model it with your own numbers" block as a quiet panel whose
     buttons are legible on paper — before this, the primary was a white
     button on ivory and the secondary white text on ivory, because both were
     styled for the dark CTA card and these pages never had one;
   - print: the legal text alone, black on white. */

/* ── Canvas ─────────────────────────────────────────────────────────────── */
.rd-page.rd-guide .wrap { max-width: 800px; }
.rd-hub .wrap { max-width: 960px; }
.rd-page.rd-legal .wrap { max-width: 1060px; }
:is(.rd-page, .rd-hub) main { padding: 32px 0 72px; }
:is(.rd-page, .rd-hub) [id] { scroll-margin-top: 84px; }

/* ── Breadcrumbs (guide articles) ───────────────────────────────────────── */
.rd-page .rd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0 0 10px; padding: 0; font-size: .875rem; color: var(--muted); }
.rd-page .rd-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rd-page .rd-crumbs li + li::before { content: "/"; color: var(--faint); }
.rd-page .rd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-weight: 500; }
.rd-page .rd-crumbs a:hover { color: var(--indigo-ink); }
.rd-page .rd-crumbs [aria-current] { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* ── Heading block ─────────────────────────────────────────────────────── */
:is(.rd-page, .rd-hub) h1 { max-width: 24ch; }
.rd-page.rd-legal h1 { font-size: clamp(2rem, 4.4vw, 2.6rem); margin-bottom: 8px; }
:is(.rd-page, .rd-hub) .intro { font-size: 1.12rem; line-height: 1.6; max-width: 62ch; margin-bottom: 30px; }

/* ── The reading column ────────────────────────────────────────────────── */
.rd-page .prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.72; }
.rd-page .prose p { margin: 0 0 1.05em; }
.rd-page .prose h2 { font-size: 1.4rem; margin: 2.1em 0 .55em; }
.rd-page .prose ul { padding-left: 1.25em; margin: 0 0 1.1em; }
.rd-page .prose li { margin: .45em 0; }
.rd-page .prose li::marker { color: var(--faint); }
.rd-page .prose strong { color: var(--ink); font-weight: 650; }
/* Links inside running text are underlined: colour alone isn't enough. */
.rd-page .prose p a, .rd-page .prose li a { color: var(--indigo-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--indigo) 45%, transparent); }
.rd-page .prose p a:hover, .rd-page .prose li a:hover { text-decoration-color: currentColor; }
/* One small accent where the article starts. */
.rd-page.rd-guide .rd-article::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--indigo); opacity: .7; margin: 0 0 26px; }

/* ── "Model it with your own numbers" — a quiet panel, legible buttons ─── */
:is(.rd-page, .rd-hub) .rd-cta { margin: 40px 0 0; padding: 24px 26px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
:is(.rd-page, .rd-hub) .rd-cta h2 { margin: 0 0 10px; font-size: 1.4rem; }
:is(.rd-page, .rd-hub) .rd-cta p { margin: 0 0 18px; max-width: 60ch; }
:is(.rd-page, .rd-hub) .rd-cta .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: .95rem; }
:is(.rd-page, .rd-hub) .rd-cta .btn-primary { background: var(--tc-action); color: #fff; box-shadow: 0 0 0 1px var(--indigo-ink); }
:is(.rd-page, .rd-hub) .rd-cta .btn-primary:hover,
:is(.rd-page, .rd-hub) .rd-cta .btn-primary:focus-visible { background: var(--tc-action-hover); color: #fff; text-decoration: none; }
:is(.rd-page, .rd-hub) .rd-cta .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
:is(.rd-page, .rd-hub) .rd-cta .btn-ghost:hover,
:is(.rd-page, .rd-hub) .rd-cta .btn-ghost:focus-visible { background: var(--surface-2); border-color: var(--indigo); color: var(--indigo-ink); text-decoration: none; }
@media (max-width: 480px) {
  :is(.rd-page, .rd-hub) .rd-cta { padding: 20px 18px 20px; }
  :is(.rd-page, .rd-hub) .rd-cta .btn { width: 100%; }
}

/* ── Related links ("Put it to work") ─────────────────────────────────── */
.rd-page .related { margin-top: 48px; }
.rd-page .related h2 { font-size: 1.4rem; }
.rd-page .related-grid a { min-height: 44px; padding: 14px 16px; border-radius: 16px; }

/* ── Guides index cards ───────────────────────────────────────────────── */
.rd-hub .tool-grid { gap: 14px; }
.rd-hub .tool-card { padding: 20px 22px; border-radius: 18px; }
.rd-hub .tool-card .tc-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.25; color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.rd-hub .tool-card:hover .tc-name { color: var(--indigo-ink); }
.rd-hub .tool-card .tc-desc { font-size: .92rem; line-height: 1.55; }
/* The closing card spans the card grid; its paragraph keeps its own 60ch. */
.rd-hub .prose { max-width: none; }

/* ── Legal pages ──────────────────────────────────────────────────────── */
.rd-page.rd-legal .rd-updated { font-size: .92rem; margin: 0 0 22px; }
.rd-page.rd-legal .rd-summary { margin: 0 0 28px; padding: 18px 22px; background: color-mix(in srgb, var(--indigo) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--indigo) 20%, var(--border)); border-radius: 16px; }
.rd-page.rd-legal .rd-summary p { margin: 0 0 8px; }
.rd-page.rd-legal .rd-summary ul { margin: 0; }
.rd-page.rd-legal .rd-summary li:last-child { margin-bottom: 0; }
.rd-page.rd-legal .prose > h2:first-child { margin-top: 0; }
.rd-page.rd-legal .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 28px; font-weight: 500; }

/* On this page, below 1024px: one 44px row ("On this page · 12 sections"),
   closed until tapped — the list of pills used to fill most of a phone's
   first screen. It is closed in the HTML, so this holds without JS; opening it
   needs no JS either. theme.js only closes it again after a jump. */
.rd-page .rd-toc { margin: 0 0 28px; }
.rd-page .rd-toc-inner { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.rd-page .rd-toc-label { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; margin: 0; cursor: pointer; border-radius: 13px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.rd-page .rd-toc-label::-webkit-details-marker { display: none; }
.rd-page .rd-toc-label::after { content: ""; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.rd-page .rd-toc-inner[open] > .rd-toc-label::after { transform: translateY(2px) rotate(-135deg); }
.rd-page .rd-toc-label:focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 2px; }
.rd-page .rd-toc-count { font-size: .86rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.rd-page .rd-toc ol { list-style: none; margin: 0; padding: 4px 14px 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-page .rd-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .9rem; font-weight: 500; line-height: 1.3; }
.rd-page .rd-toc a:hover { text-decoration: none; border-color: var(--indigo); color: var(--indigo-ink); }
@media (prefers-reduced-motion: reduce) { .rd-page .rd-toc-label::after { transition: none; } }
:is(.rd-page, .rd-hub) a:focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 2px; border-radius: 6px; }

/* …and a sticky rail beside the text from 1024px. The reading order stays
   title → contents → text; the grid only moves the contents into the rail,
   spanning both rows so it stays in view the whole way down. */
@media (min-width: 1024px) {
  .rd-page.rd-legal .rd-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .rd-page.rd-legal .rd-head { grid-column: 2; grid-row: 1; }
  .rd-page.rd-legal .rd-body { grid-column: 2; grid-row: 2; min-width: 0; }
  .rd-page.rd-legal .rd-toc { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin: 10px 0 0; padding: 0; border-top: 0; }
  .rd-page.rd-legal .rd-toc-inner { position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow-y: auto; padding-left: 16px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; }
  /* With JS (data-rail, set by theme.js) the summary is a label here, not a
     control: the details is held open and the summary leaves the tab order.
     Without JS it stays a working toggle. */
  .rd-page.rd-legal .rd-toc-label { min-height: 0; padding: 0; margin: 0 0 10px; font-size: .72rem; color: var(--muted); }
  .rd-page.rd-legal .rd-toc-inner[data-rail] > .rd-toc-label { cursor: default; pointer-events: none; }
  .rd-page.rd-legal .rd-toc-inner[data-rail] > .rd-toc-label::after { display: none; }
  .rd-page.rd-legal .rd-toc-count { display: none; }
  .rd-page.rd-legal .rd-toc ol { display: block; padding: 0; }
  .rd-page.rd-legal .rd-toc li { margin: 0; }
  .rd-page.rd-legal .rd-toc a { display: flex; min-height: 36px; padding: 7px 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: .9rem; }
  .rd-page.rd-legal .rd-toc a:hover { color: var(--indigo-ink); }
}

/* Without JS, the details stays closed on desktop too; where the browser
   supports ::details-content the rail's list shows anyway, elsewhere the
   label still opens it. (Its own rule, so an older parser drops only this.) */
@media (min-width: 1024px) {
  .rd-page.rd-legal .rd-toc-inner::details-content { content-visibility: visible; display: block; }
}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :is(.rd-page, .rd-hub) main { padding-top: 22px; }
  .rd-page .prose { font-size: 1rem; line-height: 1.7; }
}

/* ── Print (people print a privacy policy) ────────────────────────────── */
/* Paper is white whatever theme is selected on screen. The tokens are
   redefined on the reading body itself, so every rule built on var(--ink),
   var(--surface), var(--indigo-ink)… resolves to paper values in print — a
   dark-theme reader's pale --ink (#e8ecf4) would otherwise print bold text,
   links and headings near-white on white. Then the inks that matter are pinned
   black, and cards and summaries drop their fills and shadows. Screen CSS is
   untouched: all of this is inside @media print. */
@media print {
  :is(.rd-page, .rd-hub) {
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #000; --muted: #333; --faint: #555;
    --border: #bbb; --border-strong: #999;
    --indigo: #000; --indigo-ink: #000; --indigo-soft: #fff;
    --shadow: none;
    color-scheme: light;
    background: #fff; color: #000;
  }
  :is(.rd-page, .rd-hub) :is(.topbar, footer, .rd-toc, .rd-crumbs, .tc-top) { display: none !important; }
  :is(.rd-page, .rd-hub) main { padding: 0; }
  .rd-page.rd-legal .rd-layout { display: block; }
  :is(.rd-page, .rd-hub) :is(h1, h2, h3, p, li, strong, em, a, .muted, .intro, .kicker) { color: #000; }
  :is(.rd-page, .rd-hub) a { text-decoration: underline; }
  .rd-page .prose, .rd-page .prose p, .rd-page .prose li { color: #000; max-width: none; }
  :is(.rd-page, .rd-hub) :is(.rd-summary, .rd-cta, .tool-card, .related-grid a) { background: none; box-shadow: none; border-color: #999; }
  /* Printers drop backgrounds: a white-on-indigo button would print white on white. */
  :is(.rd-page, .rd-hub) .rd-cta .btn { background: none; color: #000; border: 1px solid #999; box-shadow: none; }
}