/*
 * Prose template layer — /privacy-policy/, /terms-of-service/, /dpa/,
 * /security/, /refund/ and /subprocessors/.
 *
 * Not /docs/, despite what this line used to say. BetterDocs renders that
 * section and emits none of .prose-layout, .toc or .prose, so this sheet was
 * loading there and matching nothing; p-docs.css is the layer that styles it.
 *
 * p-shared.css already owns .prose-layout, .toc, .prose and .prose__meta, so
 * this file is deliberately short: the compact page header the seven pages
 * share, and the three things the shared layer cannot fix on its own — a jump
 * link landing under the sticky topbar, a contents rail longer than the
 * viewport, and a table wider than the measured column.
 *
 * Nothing below is /security/-specific. Instantiating another of the seven is a
 * head-and-body swap with no CSS change.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-prose.css.
 * Same constraint as the rest of the lab: no literal colour, radius or size.
 */

/* ---------- compact page header ----------
   A legal page is read, not browsed, so the header's whole job is to get out of
   the way: what this is, one line of why, the date it changed. The .subhero
   used by the pair and platform templates would put a 460px glow above six
   paragraphs of policy. */

.prose-hero { padding-bottom: var(--s-6); }
.prose-hero__head { margin-top: var(--s-5); }
.prose-hero h1 { max-width: 24em; }
.prose-hero .prose__meta { margin-top: var(--s-5); }

.prose-body { padding-bottom: var(--s-9); }

/* ---------- sticky-header clearance ----------
   .topbar is sticky and about 76px tall, so p-shared's --s-8 scroll margin
   parks a jumped-to heading just underneath it. The contents rail is the main
   way through these pages; a jump link that hides its own target is the most
   likely bug on this template. */

.prose h2,
.prose h3 { scroll-margin-top: calc(var(--s-8) + var(--s-5)); }

/* ---------- the sticky contents rail ----------
   Two corrections to the shared rail, both only above 900px where it is sticky.

   p-shared parks it 80px down and the sticky topbar measures 77px, so the two
   read as touching; --s-8 + --s-6 leaves a visible gap instead.

   And /security/ has nine sections where /privacy-policy/ has seventeen: a rail
   taller than the viewport cannot be scrolled to its own last item, so it has
   to scroll itself. */

@media (min-width: 901px) {
  .toc {
    top: calc(var(--s-8) + var(--s-6));
    max-height: calc(100vh - var(--s-9) - var(--s-5));
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .toc a { transition: color .2s var(--fx-ease), border-left-color .2s var(--fx-ease); }
}

/* ---------- prose additions ----------
   /subprocessors/ is a table rather than paragraphs, so the table has to hold
   up inside a 42em column on a phone. The wrapper lets a table that genuinely
   cannot fit scroll itself rather than pushing the whole document sideways. */

.prose__table { overflow-x: auto; }
.prose thead th { background: var(--surface); }
.prose caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: left;
}

/* Three columns inside a 42em measure leave about 110px each on a phone, which
   wraps "Runs the service and stores your products" onto five lines. Each row
   becomes a block instead and repeats its column header from data-label — the
   same trick, and the same markup contract, as .cap in p-shared. */
@media (max-width: 560px) {
  .prose__table table,
  .prose__table tbody,
  .prose__table tr,
  .prose__table th,
  .prose__table td { display: block; }
  .prose__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose__table tbody tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .prose__table tbody th { padding: 0 0 var(--s-2); border-bottom: 0; }
  .prose__table tbody td { padding: 0 0 var(--s-2); border-bottom: 0; }
  .prose__table tbody td:last-child { padding-bottom: 0; }
  .prose__table td::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--muted); }
  /* caption-side has no effect once the table is not display:table, so it reads
     as a lead-in above the rows rather than a note below them. */
  .prose__table caption { display: block; padding: 0 0 var(--s-3); }
}

/* Policy copy leans on bold for the term being defined at the start of a list
   item, which has to read as a heading-ish step down from --ink body text
   rather than as shouting. */
.prose b,
.prose strong { color: var(--ink); font-weight: 600; }

.prose code {
  font-family: var(--mono);
  font-size: var(--t-sm);
  padding: 1px var(--s-1);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prose .note,
.prose .todo,
.prose .card { margin-top: var(--s-5); }
.prose .link-grid a { text-decoration: none; }