/* The documents' sheet (release v2026.09.30.3, stream S5): the static pages
   (legal, privacy, terms, about, methodology, the guides and their hub, the
   404), /ai, /api, /report, the tracker checklist and the mail link pages.
   Linked only by those pages (seo/staticDocs.ts docsSheet()), so the rest of
   the public pages do not carry it: public.css stays under its gzip ceiling
   (publicCss.test.ts, PLAN §9 P1).

   Plain CSS on the design tokens, in the components layer like the shared
   sheet's own rules, so a utility still wins. The documents are Read
   surfaces (server/src/seo/staticDocs.ts): the desk's page head, then .g-doc
   as a contents rail, prose at a 72ch measure, and an aside. Below lg the
   rail is one "Sections" row and the aside stacks (legal: above the text,
   the others: after it); from 1280 it is three columns. Rhythm (L7): 6px inside a pair, 12 to 14px between
   siblings, 18 to 20px between plates, 40px above a section heading and
   12px below it. */
@layer components {
  /* --- the grid ---------------------------------------------------------- */
  .doc-grid { font-size: 15px; row-gap: 20px; grid-template-areas: "toc" "prose" "aside"; }
  .doc-grid.doc-legal { grid-template-areas: "toc" "aside" "prose"; }
  /* /api's aside carries its two actions, so it comes before the text until
     it has a column of its own. */
  .api-docs .doc-grid { grid-template-areas: "toc" "aside" "prose"; }
  @media (min-width: 1024px) { .api-docs .doc-grid { grid-template-areas: "toc aside" "toc prose"; } }
  .doc-toc-cell { grid-area: toc; min-width: 0; }
  .doc-grid > .doc-prose { grid-area: prose; }
  .doc-aside { grid-area: aside; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  @media (min-width: 1024px) {
    .doc-grid { column-gap: clamp(28px, 2.6vw, 64px); grid-template-areas: "toc prose" "toc aside"; }
    .doc-grid.doc-legal { grid-template-areas: "toc aside" "toc prose"; }
    .doc-toc-cell { align-self: stretch; }
    .doc-grid.doc-legal > .doc-aside { max-width: 72ch; }
  }
  /* Three columns from 1280, so a 1366 screen has no empty right third.
     The aside has a fixed width below 1920 and the prose takes the rest
     (a minmax aside would take its maximum before the 1fr prose got any,
     which left the text at 45ch at 1440). These override the shared
     sheet's .g-doc tracks (14-public-desk.css), which this sheet follows. */
  @media (min-width: 1280px) {
    .doc-grid.g-doc, .doc-grid.g-doc.doc-legal { grid-template-columns: 232px minmax(0, 1fr) 288px; grid-template-areas: "toc prose aside"; }
    .doc-grid.doc-legal > .doc-aside { max-width: none; }
    .doc-grid > .doc-aside { position: sticky; top: calc(var(--header-h) + 20px); }
    .doc-grid.g-doc > .doc-prose { justify-self: center; width: 100%; max-width: 72ch; }
  }
  @media (min-width: 1440px) {
    .doc-grid.g-doc, .doc-grid.g-doc.doc-legal { grid-template-columns: 272px minmax(0, 1fr) 340px; }
  }
  /* A wide screen reads at the static pages' 16px; the aside grows toward
     520px only once the prose has its full measure (V3). */
  @media (min-width: 1920px) {
    .doc-grid { font-size: 16px; }
    .doc-grid.g-doc, .doc-grid.g-doc.doc-legal { grid-template-columns: minmax(272px, 340px) minmax(0, 78ch) minmax(340px, 1fr); }
    /* The prose sits next to the contents rail, never centred in its track
       with an empty band on each side; the aside takes the freed width. */
    .doc-grid.g-doc > .doc-prose { justify-self: start; max-width: 78ch; }
    .doc-aside { max-width: 720px; }
  }
  /* From 2200 the free width goes to the aside, never to gutters around the
     prose: its plates sit side by side and a long link list runs in two
     columns, so the screen has no empty band down the middle. */
  @media (min-width: 2200px) {
    .doc-grid { font-size: 17px; }
    .doc-grid.g-doc, .doc-grid.g-doc.doc-legal { grid-template-columns: minmax(272px, 340px) minmax(0, 78ch) minmax(380px, 1fr); }
    .doc-grid.g-doc > .doc-prose { justify-self: start; max-width: 78ch; }
    /* No 720px cap here: the aside runs to the main column's edge (V3, a
       2560 screen left 17% empty after it). */
    .doc-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; max-width: none; }
    .doc-aside .doc-links, .doc-related ul { display: block; columns: 2; column-gap: 28px; }
    .doc-aside .doc-links li, .doc-related li { break-inside: avoid; }
    .doc-links li:first-child a, .doc-related li:first-child > a { border-top: 1px solid var(--pt-hairline); }
  }

  /* A document's title is often one long word in German or Russian
     ("Datenschutzhinweise"): on a phone it steps down until the word fits
     rather than breaking inside it. */
  @media (max-width: 639px) {
    body:has(.s-doc) main .page-head .title-xl { font-size: clamp(28px, 9.2vw, 48px); hyphens: auto; }
  }

  /* --- the contents rail --------------------------------------------------- */
  .doc-k { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-faint); }
  .doc-toc { display: none; }
  .doc-toc .doc-k { padding-inline: 12px; }
  .doc-toc-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .doc-toc-l a { display: flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: var(--radius-ctl); font-family: var(--font-sans); font-size: 13px; line-height: 1.3; color: var(--pt-soft); text-decoration: none; overflow-wrap: anywhere; hyphens: auto; }
  .doc-link { text-decoration: none; }
  .doc-sep { display: none; }
  .doc-toc-l a:hover { color: var(--pt-ink); background: color-mix(in srgb, var(--pt-steel) 6%, transparent); }
  .doc-toc-l a:target, .doc-toc-l a[aria-current] { color: var(--pt-ink); background: color-mix(in srgb, var(--pt-copper) 10%, transparent); }
  @media (hover: none) and (pointer: coarse) { .doc-toc-l a { min-height: 44px; } }
  /* Below lg: one plate, "Sections" and the count; it opens in place. */
  .doc-toc-m { border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .doc-toc-s { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-soft); }
  .doc-toc-s::-webkit-details-marker { display: none; }
  .doc-toc-s::after { content: "+"; font-size: 14px; color: var(--pt-faint); }
  .doc-toc-m[open] > .doc-toc-s::after { content: "\2212"; }
  .doc-toc-n { margin-left: auto; color: var(--pt-faint); }
  .doc-toc-m > nav { padding: 4px 6px 8px; border-top: 1px solid var(--pt-hairline); }
  @media (min-width: 1024px) {
    .doc-toc { display: block; position: sticky; top: calc(var(--header-h) + 20px); }
    .doc-toc-m { display: none; }
  }
  /* A long contents list scrolls inside the rail with no bar; its bottom
     edge fades while there is more below and clears at the end (R4). */
  .doc-toc-scroll {
    max-height: calc(100vh - var(--header-h) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cue-h)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cue-h)), transparent 100%);
  }
  .doc-toc-scroll::-webkit-scrollbar { display: none; }

  /* --- the prose ------------------------------------------------------------ */
  .doc-prose { min-width: 0; max-width: 72ch; font-size: 1em; line-height: 1.65; color: var(--pt-soft); text-wrap: pretty; }
  .doc-prose > :first-child { margin-top: 0; }
  .doc-prose :is(p, ul, ol, dl, blockquote) { margin: 0 0 14px; }
  .doc-prose h2 { margin: 40px 0 12px; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); text-wrap: balance; }
  .doc-prose > h2:first-child, .doc-prose > section:first-child > h2:first-child { margin-top: 0; }
  .doc-prose h3 { margin: 26px 0 8px; font-family: var(--font-sans); font-weight: 600; font-size: 1.0667em; line-height: 1.35; color: var(--pt-ink); }
  .doc-prose strong { color: var(--pt-ink); font-weight: 600; }
  .doc-prose :is(ul, ol) { padding-left: 1.3em; }
  .doc-prose li { margin: 6px 0; }
  .doc-prose li::marker { color: var(--pt-faint); }
  .doc-prose code { font-family: var(--font-mono); font-size: 0.87em; color: var(--pt-ink); background: color-mix(in srgb, var(--pt-steel) 9%, transparent); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
  .doc-prose time { font-variant-numeric: tabular-nums; }
  .doc-prose section { display: block; }
  /* A note: a quiet plate, never a coloured edge (craft floor). */
  .doc-note { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-wash); color: var(--pt-soft); font-size: 0.94em; }
  .doc-note > :last-child { margin-bottom: 0; }
  .doc-form { margin: 14px 0 18px; padding: 14px 18px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .doc-form > :last-child { margin-bottom: 0; }
  .doc-cta { margin: 22px 0; }
  .doc-prose .hint { font-size: 13px; line-height: 1.8; color: var(--pt-faint); }

  /* --- the fold (§1.6, staticDocs.ts foldSections): a later section shows
     its heading and opening paragraph, then one quiet pill opens the rest in
     place. Every word is in the HTML; print opens them all (D2). ----------- */
  .doc-fold { margin: 0 0 14px; }
  .doc-fold-s { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border: 1px solid var(--pt-hairline); border-radius: 999px; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-soft); transition: color 160ms var(--ease-soft), border-color 160ms var(--ease-soft); }
  .doc-fold-s::-webkit-details-marker { display: none; }
  .doc-fold-s::after { content: "+"; font-size: 13px; color: var(--pt-faint); }
  .doc-fold[open] > .doc-fold-s::after { content: "\2212"; }
  .doc-fold-s:hover { color: var(--pt-ink); border-color: var(--pt-hairline-strong); }
  .doc-fold-s:focus-visible { outline: 2px solid var(--pt-copper); outline-offset: 2px; }
  @media (hover: none) and (pointer: coarse) { .doc-fold-s { min-height: 44px; } }
  .doc-fold[open] > .doc-fold-s { margin-bottom: 14px; }
  .doc-fold-b > :first-child { margin-top: 0; }
  .doc-fold-b > :last-child { margin-bottom: 0; }
  /* The questions inside a document: one column at the prose measure, the
     question in the shared FAQ row's type (the prose's h3 rule would win). */
  .doc-prose .faq { margin-top: 40px; }
  .doc-prose .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-prose .faq-q { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 17px; line-height: 1.25; letter-spacing: 0.01em; }
  .doc-prose .faq-a > :last-child { margin-bottom: 0; }

  /* --- tables: the desk's Table (THead wash, mono 10px faint, hairline rows) */
  .doc-table-s { overflow-x: auto; }
  .doc-table { margin: 18px 0; max-width: 100%; overflow: hidden; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .doc-table-s:focus-visible { outline: 2px solid var(--pt-copper); outline-offset: 3px; }
  table.doc-t { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
  .doc-t caption { caption-side: top; text-align: left; padding: 12px 16px 6px; font-weight: 600; color: var(--pt-ink); }
  .doc-t thead th { padding: 10px 16px; background: var(--pt-wash); border-bottom: 1px solid var(--pt-hairline); text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-faint); }
  .doc-t :is(tbody td, tbody th) { padding: 12px 16px; border-bottom: 1px solid var(--pt-hairline); text-align: left; vertical-align: top; color: var(--pt-soft); overflow-wrap: anywhere; }
  .doc-t tbody th { color: var(--pt-ink); font-weight: 500; }
  .doc-t tbody tr:last-child > * { border-bottom: 0; }
  .doc-t .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--pt-ink); white-space: nowrap; }
  .doc-t-items tbody td { vertical-align: middle; }
  .doc-item { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--pt-ink); text-decoration: none; }
  .doc-item:hover { color: var(--pt-copper-bright); }
  .doc-item .well { flex: none; }
  @media (hover: none) and (pointer: coarse) { .doc-item, .mail-item-n { min-height: 44px; display: flex; align-items: center; } }
  .doc-sub { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--pt-faint); }
  /* Below sm a row stacks, each cell under its column's name, so nothing
     scrolls sideways on a phone (L6). */
  @media (max-width: 639px) {
    .doc-t thead { display: none; }
    .doc-t, .doc-t tbody, .doc-t tr, .doc-t :is(tbody td, tbody th) { display: block; width: auto; }
    .doc-t tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--pt-hairline); }
    .doc-t tbody tr:last-child { border-bottom: 0; }
    .doc-t :is(tbody td, tbody th) { padding: 3px 0; border: 0; }
    .doc-t :is(tbody td, tbody th)[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); }
    .doc-t .num { text-align: left; }
    .doc-t-items tbody td:first-child::before { display: none; }
  }

  /* --- the legal notice's facts: stat plates, the dl kept ------------------ */
  .doc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 0 0 18px; }
  .doc-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .doc-fact dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pt-faint); }
  .doc-fact dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pt-ink); overflow-wrap: anywhere; }

  /* --- the aside ------------------------------------------------------------- */
  .doc-plate { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .doc-plate .doc-k { margin: 0; }
  .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
  .doc-applies { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pt-soft); }
  .doc-glance-l { margin: 0; }
  .doc-glance-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--pt-hairline); }
  .doc-glance-r dt { font-size: 12.5px; color: var(--pt-faint); }
  .doc-glance-r dd { margin: 0; min-width: 0; text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--pt-ink); overflow-wrap: anywhere; }
  .doc-glance-r dd a { color: inherit; }
  .doc-links, .doc-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .doc-links a, .doc-related li > a { display: flex; align-items: center; min-height: 38px; padding: 6px 0; border-top: 1px solid var(--pt-hairline); font-size: 13.5px; line-height: 1.35; color: var(--pt-soft); text-decoration: none; }
  .doc-links li:first-child a, .doc-related li:first-child > a { border-top: 0; }
  .doc-links a:hover, .doc-related li > a:hover { color: var(--pt-ink); }
  @media (hover: none) and (pointer: coarse) { .doc-links a, .doc-related li > a { min-height: 44px; } }
  .doc-related h2 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 19px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); }
  .doc-related .hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--pt-faint); }
  .doc-related .hint strong { color: var(--pt-soft); font-weight: 600; }
  .doc-related .hint a { color: var(--pt-soft); }

  /* --- the guides hub -------------------------------------------------------- */
  .doc-hub { display: flex; flex-direction: column; gap: 20px; }
  .doc-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 22px; color: inherit; text-decoration: none; transition: border-color 160ms var(--ease-soft); }
  .doc-card:hover { border-color: color-mix(in srgb, var(--pt-copper) 45%, transparent); }
  .doc-card h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--pt-ink); overflow-wrap: anywhere; hyphens: auto; }
  .doc-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pt-soft); }
  .doc-hint { margin: 0; max-width: 110ch; font-size: 13px; line-height: 1.9; color: var(--pt-faint); }
  .doc-hint strong { color: var(--pt-soft); font-weight: 600; }
  .doc-hint a { color: var(--pt-soft); text-decoration: none; border-bottom: 1px solid var(--pt-hairline-strong); }
  .doc-hint a:hover { color: var(--pt-copper-bright); border-bottom-color: currentColor; }

  /* --- the 404: a left aligned empty state with the search well ------------ */
  .doc-nf { align-items: flex-start; text-align: left; gap: 18px; padding: clamp(20px, 3vw, 32px); width: fit-content; max-width: 100%; }
  @media (min-width: 1280px) { .doc-nf { min-width: min(100%, 760px); } }
  .doc-nf-lede { max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--pt-soft); }
  .doc-nf-search { width: 100%; max-width: 640px; }
  .doc-nf-links { display: flex; flex-wrap: wrap; gap: 10px; }

  /* --- the report form (/report, W48) ---------------------------------------- */
  .rp-plate { min-width: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  .rp { display: flex; flex-direction: column; gap: 18px; }
  .rp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .rp-l { margin: 0; padding: 0; font-size: 12px; font-weight: 500; color: var(--pt-soft); }
  .rp-in { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--pt-hairline-strong); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--pt-steel) 7%, transparent); color: var(--pt-ink); font-family: var(--font-sans); font-size: 14px; transition: border-color 160ms var(--ease-soft); }
  .rp-in::placeholder { color: var(--pt-faint); }
  .rp-in:focus { border-color: var(--pt-copper); }
  .rp-in:focus-visible { outline: 2px solid var(--pt-copper); outline-offset: 2px; }
  textarea.rp-in { resize: vertical; line-height: 1.5; }
  .rp-set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .rp-chips { display: grid; gap: 8px; }
  @media (min-width: 640px) { .rp-chips { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
  .rp-chip { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--pt-steel) 6%, transparent); font-size: 13.5px; line-height: 1.35; color: var(--pt-soft); cursor: pointer; transition: border-color 160ms var(--ease-soft), background-color 160ms var(--ease-soft); }
  .rp-chip:hover { border-color: var(--pt-hairline-strong); color: var(--pt-ink); }
  .rp-chip input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--pt-copper); }
  .rp-chip:has(input:checked) { border-color: color-mix(in srgb, var(--pt-copper) 55%, transparent); background: color-mix(in srgb, var(--pt-copper) 14%, transparent); color: var(--pt-ink); }
  .rp-chip:has(input:focus-visible) { outline: 2px solid var(--pt-copper); outline-offset: 2px; }
  .rp-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 13.5px; line-height: 1.45; color: var(--pt-soft); cursor: pointer; }
  .rp-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pt-copper); }
  .rp-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--pt-faint); }
  .rp-what { margin: 0; color: var(--pt-ink); font-size: 14px; }
  .rp-what code { font-family: var(--font-mono); font-size: 12.5px; color: var(--pt-soft); }
  .rp-err { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--pt-crit) 55%, transparent); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--pt-crit) 10%, transparent); color: var(--pt-ink); font-size: 13.5px; }
  .rp-two { display: grid; gap: 14px; }
  @media (min-width: 640px) { .rp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .rp-send { align-self: flex-start; }
  .rp-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--pt-hairline); border-radius: var(--radius-card); background: var(--pt-surface); }
  @media (min-width: 1280px) { .rp-aside { position: sticky; top: calc(var(--header-h) + 20px); } }
  .rp-aside .doc-k { margin: 0; }
  .rp-steps { margin: 0; padding-left: 1.3em; list-style: decimal; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--pt-soft); }
  .rp-steps li::marker { font-family: var(--font-mono); color: var(--pt-faint); }

  /* --- the tracker checklist (C4: layout only) ------------------------------- */
  .tc-intro .prose, .tc-split .prose { max-width: 72ch; }
  .tc-meta { color: inherit; }
  .tc-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
  .tc-table th, .tc-table td { padding: 12px 16px; border-bottom: 1px solid var(--pt-hairline); text-align: left; vertical-align: top; }
  .tc-table thead th { padding-block: 10px; background: var(--pt-wash); font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pt-faint); }
  .tc-table tbody th { width: 22%; color: var(--pt-ink); font-weight: 500; }
  .tc-table td { color: var(--pt-soft); }
  .tc-table td.tc-ask { color: var(--pt-faint); }
  .tc-table tbody tr:last-child > * { border-bottom: 0; }
  .tc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  /* A plate's title and note stack on a phone rather than both being cut
     (the checklist, /ai's plates). */
  @media (max-width: 639px) {
    .tc-plate > .panel-h, .s-doc .panel > .panel-h { flex-wrap: wrap; row-gap: 4px; }
    .tc-plate > .panel-h > *, .s-doc .panel > .panel-h > * { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
  }
  @media (max-width: 639px) {
    .tc-table thead { display: none; }
    .tc-table tr, .tc-table th, .tc-table td { display: block; width: auto; }
    .tc-table tbody th { width: auto; }
    .tc-table tr { padding: 10px 16px; border-bottom: 1px solid var(--pt-hairline); }
    .tc-table th, .tc-table td { padding: 4px 0; border: 0; }
    .tc-table td::before { content: attr(data-l); display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-faint); }
  }

  /* --- /ai and /api code (C8): mono, scrolls with no bar, a faded edge ---- */
  .doc-prose :is(.ai-code, .api-docs pre), .api-docs .doc-prose pre { margin: 10px 0; padding: 12px 16px; overflow-x: auto; white-space: pre; border: 1px solid var(--pt-hairline); border-radius: var(--radius-ctl); background: color-mix(in srgb, var(--pt-steel) 8%, transparent); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--pt-ink); }
  .doc-prose pre::-webkit-scrollbar { display: none; }
  /* /api's examples wrap at the prose edge rather than cutting a JSON key
     off with no cue on a desktop. */
  .api-docs .doc-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .doc-prose pre:focus-visible { outline: 2px solid var(--pt-copper); outline-offset: 3px; }
  .ai-code code { user-select: all; }
  .ai-pad { padding: 14px 16px; }
  .ai-pad p { margin: 10px 0 0; font-size: 14px; color: var(--pt-soft); }
  .ai-tools { display: grid; gap: 14px; }
  .ai-tool a { text-decoration: none; }
  @media (hover: none) and (pointer: coarse) { .ai-tool a { display: inline-flex; align-items: center; min-height: 44px; } }
  .ai-tool code { font-family: var(--font-mono); font-size: 13px; color: var(--pt-ink); }
  .ai-tool p { margin: 4px 0 0; }
  .api-docs .ep { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--pt-hairline); }
  .api-docs .ep:first-of-type { border-top: 0; }
  .api-docs .ep code { font-family: var(--font-mono); font-size: 12.5px; color: var(--pt-ink); overflow-wrap: anywhere; }
  .api-docs .ep span { font-size: 13.5px; line-height: 1.5; color: var(--pt-soft); }
  .doc-prose .s { margin-top: 0; }
  .doc-prose .s + .s, .doc-prose .panel + .s, .doc-prose .s + .faq, .doc-prose .panel + .panel { margin-top: 28px; }

  /* --- the mail link pages (followPages.ts, W25): a static brand header
     with no controls, one centred card; the done page's next step ---------- */
  .mail-head { display:flex;align-items:center;min-height:59px;padding:8px clamp(1rem,2.6vw,4.5rem) }
  .mail-brand { display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none }
  .follow-page { flex:1;display:flex;justify-content:flex-start;padding:clamp(24px,6vh,72px) clamp(1rem,2.6vw,4.5rem) 48px }
  .mail-card { width:min(600px,100%);display:flex;flex-direction:column;gap:20px;min-width:0 }
  .mail-card .title-xl { font-size:clamp(40px,5vw,64px) }
  .mail-item { display:flex;align-items:center;gap:14px;min-width:0;padding:12px 16px;border:1px solid var(--pt-hairline);border-radius:12px;background:var(--pt-surface) }
  .mail-item .well { flex:none }
  .mail-item-n { min-width:0;font-size:14px;line-height:1.4;color:var(--pt-ink);text-decoration:none;overflow-wrap:anywhere }
  .mail-act form { display:flex;flex-direction:column;align-items:flex-start;gap:12px }
  .mail-done { display:flex;flex-direction:column;gap:28px }
  .mail-next { display:flex;flex-direction:column;gap:10px }

}

@property --cue-h {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@supports (animation-timeline: scroll(self block)) {
  @keyframes doc-cue-clear {
    from { --cue-h: 28px; }
    86% { --cue-h: 28px; }
    to { --cue-h: 0px; }
  }
  .doc-toc-scroll { animation: doc-cue-clear linear both; animation-timeline: scroll(self block); }
}

/* --- print (D2) -------------------------------------------------------------
   The legal notice, the privacy notice and the terms get printed and saved
   as PDF: the chrome goes, ink on white, a link prints its address, nothing
   is folded. Outside the layer so the chrome's display utilities lose. */
@media print {
  @page { margin: 16mm 14mm; }
  body:has(.s-doc) :is(.skip-link, aside:has(> [data-rail]), .s-header, #s-new, #s-bar, #s-more-wrap, nav.fixed, .s-foot, .doc-toc-cell) { display: none !important; }
  body:has(.s-doc), body:has(.s-doc) .app-ground { background: #fff !important; }
  body:has(.s-doc) .app-ground::before, body:has(.s-doc) .app-ground::after { display: none !important; }
  body:has(.s-doc) main.s-main { padding: 0 !important; gap: 12px !important; }
  body:has(.s-doc) :is(.page-head, .page-head *, .s-doc, .s-doc *) { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; border-color: #c8c8c8 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  body:has(.s-doc) .title-xl { font-size: 28pt !important; line-height: 1.05 !important; }
  .doc-grid { display: block !important; font-size: 11pt !important; }
  .doc-aside { position: static !important; margin: 0 0 14pt; }
  .doc-prose { max-width: none !important; }
  .doc-table { overflow: visible !important; }
  .doc-prose a[href^="/"]::after { content: " (patinaai.net" attr(href) ")"; font-size: 0.85em; }
  .doc-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .doc-prose h2, .doc-prose h3 { break-after: avoid; }
  .doc-t tr, .doc-fact, .doc-note { break-inside: avoid; }
  body:has(.s-doc) details > * { display: block !important; }
  body:has(.s-doc) details::details-content { content-visibility: visible; display: block; }
}