/* privacy.css — compositions used only on the Privacy notice. Everything
   else comes from the shared system (tokens, base, layout, shell, ui).

   A calm reading page (9 Oct 2026): a short type-led Ink opening (the
   heading and the date; the intro sentence was removed the same day), then
   the notice on Chalk. From
   1024 px the contents list stays beside the text (sticky) and shares the
   heading's left edge, while the text column shares the intro's; below
   1024 px the contents are a compact numbered list above the text. Each
   section opens on a thin line with its number (the PDF's small
   structured label), the purposes under "Why we use it" are separated by
   lines, and the notice ends on a quiet Oyster contact panel.

   Section numbers are CSS counters, so adding or removing a section
   renumbers the page and its contents list by itself.

   Motion (inside prefers-reduced-motion: no-preference only; nothing
   depends on script): the opening rises in from first paint, and the
   contents list's current-section mark (privacy.js) grows into place.
   Without script the list is a plain set of anchor links. */

/* ---- P01 opening: the heading on one line, the date under it --------- */
.privacy-hero { padding-block: clamp(2.75rem, 1.25rem + 5vw, 6rem) clamp(2.25rem, 1rem + 3.5vw, 4.5rem); }
.privacy-hero__grid { display: grid; row-gap: var(--space-4); }
.privacy-hero__title { margin: 0; }
.privacy-hero__date { margin: 0; font-size: var(--text-ui); color: var(--on-muted); }
/* phones turned sideways: the padding above grows with the width, which is
   exactly where height is scarce; keep the band short so the contents list
   shows under it */
@media (orientation: landscape) and (max-height: 500px) {
  .privacy-hero { padding-block: var(--space-6) var(--space-5); }
}

@keyframes privacy-rise { from { opacity: 0; transform: translateY(var(--travel-expressive)); } }
@media (prefers-reduced-motion: no-preference) {
  .privacy-hero__in { animation: privacy-rise 560ms var(--ease-out) both; animation-delay: var(--privacy-delay, 0ms); }
  .privacy-hero__date { --privacy-delay: 120ms; }
}

/* ---- P02 the notice -------------------------------------------------------
   The text column keeps a reading measure of about 68 characters a line
   (49ch of Commissioner, measured: a "ch" is the width of its zero, wider
   than an average letter). From 1024 px the "Contents" label and the
   first section's number share one top line. */
.privacy-body { padding-block: var(--space-6) var(--section-pad); }
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); align-items: start; }
.privacy-text { max-width: 49ch; min-width: 0; counter-reset: privacy-sec; }
.privacy-text p { text-wrap: pretty; }   /* no lone last word ("message.", "you.") on a phone's short lines */

@media (min-width: 1024px) {
  .privacy-body { padding-top: var(--space-8); }
  .privacy-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .privacy-toc { grid-column: 1 / span 3; }
  .privacy-text { grid-column: 5 / -1; }
}

/* ---- contents ------------------------------------------------------------
   The numbers share the "Contents" label's left edge; the current-section
   mark hangs just outside it. The number is positioned out of flow, so a
   hover underline covers the words only */
.privacy-toc__label { margin: 0 0 var(--space-2); }
.privacy-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: privacy-toc; }
.privacy-toc__list > li { counter-increment: privacy-toc; break-inside: avoid; }
.privacy-toc__list a {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 10px 0 10px 2.25rem;
  font-size: var(--text-ui);
  line-height: 1.4;
  color: var(--on-text);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
/* hover only where there is a pointer that hovers: on a phone a tapped link
   would otherwise keep its underline after the jump */
@media (hover: hover) { .privacy-toc__list a:hover { text-decoration-color: currentColor; } }
/* the section number: decoration, not read aloud */
.privacy-toc__list a::before {
  content: counter(privacy-toc, decimal-leading-zero);
  content: counter(privacy-toc, decimal-leading-zero) / "";
  position: absolute;
  left: 0;
  top: 10px;
  font-size: var(--text-caption);
  line-height: calc(var(--text-ui) * 1.4);
  letter-spacing: var(--tracking-label);
  color: var(--on-muted);
}
/* the current section (privacy.js sets aria-current): Ink Text 650 and a
   Vermilion mark beside it, the page's one "lit" state; the others step
   back to Muted Plum while a section is marked */
.privacy-toc__list a::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3));
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-brand-energy);
  transform: scaleY(0);
  transform-origin: center top;
}
.privacy-toc.has-current .privacy-toc__list a { color: var(--on-muted); }
.privacy-toc.has-current .privacy-toc__list a[aria-current="true"] { color: var(--on-text); font-weight: var(--weight-strong); }
.privacy-toc__list a[aria-current="true"]::after { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  .privacy-toc__list a::after { transition: transform var(--duration-enter) var(--ease-out); }
}
@media (forced-colors: active) {
  .privacy-toc__list a::after { background: CanvasText; }
}

/* below 1024 px: a compact list above the text, two columns from 600 px
   (read down, then across) */
@media (max-width: 1023px) {
  .privacy-toc { padding-bottom: var(--space-5); border-bottom: 1px solid var(--on-line); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .privacy-toc__list { columns: 2; column-gap: var(--grid-gutter); }
}
/* desktop: beside the text, held below the sticky header while it reads.
   If a short window cannot hold the whole list, the list scrolls; the
   inline padding keeps the mark and focus rings inside that scroll box */
@media (min-width: 1024px) {
  .privacy-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    max-height: calc(100vh - var(--header-h) - 2 * var(--space-6));
    max-height: calc(100svh - var(--header-h) - 2 * var(--space-6));   /* a tablet's browser bars never hide the list's end */
    overflow-y: auto;
    scrollbar-width: thin;
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
  }
}

/* ---- sections -------------------------------------------------------------
   Each opens on a thin line with its number; generous space between them */
.privacy-sec {
  counter-increment: privacy-sec;
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--on-line);
  scroll-margin-top: var(--space-4);
}
.privacy-sec::before {
  content: counter(privacy-sec, decimal-leading-zero);
  content: counter(privacy-sec, decimal-leading-zero) / "";
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  color: var(--on-muted);
}
.privacy-sec h2 {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem);   /* 26 → 36: a reading page's sections, below the PDF's H2 */
  line-height: 1.15;
}
.privacy-sec > :last-child, .privacy-purpose > :last-child, .privacy-note > :last-child { margin-bottom: 0; }
/* the first section follows the contents list (phones) or the Ink edge
   (desktop): no line of its own, and no top padding either, so on phones
   its number sits as far below the contents' line as every other number
   sits below its section line */
.privacy-sec:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) {
  .privacy-sec { padding-block: var(--space-7) var(--space-8); }
}

/* "Why we use it": the heading leads straight into the first purpose;
   lines separate only the purposes that follow. Each purpose heading is
   Text 650 */
.privacy-purpose { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--on-line); }
.privacy-sec h2 + .privacy-purpose { margin-top: 0; padding-top: 0; border-top: 0; }
.privacy-purpose h3 { margin: 0 0 var(--space-3); font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem); line-height: 1.25; }   /* 20 → 23 */
/* the two paragraphs that apply to registrations and news alike, set a
   step in under a decorative line */
.privacy-note { margin-top: var(--space-5); padding-left: var(--space-5); border-left: 2px solid var(--on-line); }
/* phones: a smaller step in, so the note keeps close to the text's measure */
@media (max-width: 599px) { .privacy-note { padding-left: var(--space-4); } }

/* the authority's address: may break at its dots on a phone; the arrow
   says it opens elsewhere (the words are in the hidden text) */
.privacy-ext { overflow-wrap: anywhere; }
.privacy-ext__icon { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.2em; vertical-align: -0.02em; }
/* larger text (12 Oct 2026, Alessandro approved after the mobile/desktop
   size checks): main is the size container "page", and under 20rem the
   reader's text is set larger than a 320 px phone shows it at the default
   size. There the email address in the running text sets a step smaller
   where it would otherwise split, so it stays whole on one line with its
   full stop ("studio@cognifluxlab.com" is 11.46em of Text 400; 11.75
   leaves room for the note's indent); narrower still it breaks across
   lines (the shared mailto rule). At the default text size this never
   applies */
@container page (width < 20rem) {
  .privacy-sec p a[href^="mailto:"] { font-size: min(1em, (100cqi - 2 * var(--page-margin) - var(--space-5)) / 11.75); }
}

/* ---- the closing contact: a quiet Oyster panel --------------------------- */
.privacy-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: var(--radius-card);
  scroll-margin-top: var(--space-4);
}
.privacy-contact p { margin: 0; }
.privacy-contact__q { font-size: var(--text-h3); line-height: 1.2; }
.privacy-contact__email { min-width: 0; font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: 1.3; overflow-wrap: anywhere; }
/* a 44 px touch target on phones; the negative margin keeps the panel's
   layout exactly as it was */
.privacy-contact__email a { display: inline-block; padding-block: 10px; margin-block: -4px; }

@media print {
  .privacy-toc { display: none; }
  .privacy-text { max-width: none; }
  .privacy-sec::before { break-after: avoid; }   /* a section's number stays with its heading (10 Oct 2026) */
}