/* ═══════════════════════════════════════════════════════════════════════════
   privacy.css: Privacy on the bright site (src/pages/privacy.html). Everything is scoped to .page--privacy.

   A calm reading page:
     the head      sand: the lockup, the lead, one promise with a medallion; beside them the hub of the wheel
                   (a pale disc, the ring, the keyway), which turns as the page is read
     the reading   white: the contents (a sand card, its dial fills as the page is read) and the parts, each
                   a sand card with its medallion; the Personal Information Collection Statement on its own
                   sand panel, its six pairs as white rows
     questions     paper: the last part, the page's one button, the date

   COLOUR. Nothing here names a colour's value or chooses a text colour by hand. The cards and the panel are
   bright.css's own (b-card, b-panel): this file lays them out. Surfaces inside them are --row (what shows on
   the card), marks and medallions the tone's pair or --link, the wheel --wheel-colour, the ring --accent.

   What moves: the hub and the dial's wheel turn (transform), the dial's ring fills (the engine's .ring),
   cards rise in. Nothing is hidden by this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────── the head ── */
.page--privacy .privacy-head {
  --hub: clamp(9.5rem, 21vw, 17rem);
  padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.75rem, 1rem + 4.5vw, 5rem)) clamp(2.75rem, 2rem + 3.5vw, 5rem);
}
.page--privacy .privacy-head__inner { position: relative; display: grid; gap: var(--space-m); justify-items: start; }
.page--privacy .privacy-head__lead { max-inline-size: 34em; color: var(--fg-muted); }

/* The hub of the wheel, enlarged: a pale disc, the ring round it, the keyway at its centre (which turns). */
.page--privacy .privacy-hub { display: none; }
@media (min-width: 45rem) {
  .page--privacy .privacy-hub {
    position: absolute;
    display: block;
    inset-block-start: calc(50% + var(--clear-top, 0px) / 2 - var(--hub) / 2);
    inset-inline-end: calc(max(var(--gutter), (100% - var(--container)) / 2) + var(--hub) * .08);
    inline-size: var(--hub);
    aspect-ratio: 1;
    pointer-events: none;
  }
  .page--privacy .privacy-head__inner { padding-inline-end: calc(var(--hub) * 1.08 + var(--space-xl)); }
}
.page--privacy .privacy-hub__body { position: absolute; inset: 0; }
.page--privacy .privacy-hub__disc { position: absolute; inset: 7%; border-radius: 50%; background: var(--row); }
.page--privacy .privacy-hub__ring { --p: 1; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
/* As the page arrives the ring draws itself once (privacy.js says when). Whole from the start without scripts,
   under reduced motion and after the failsafe. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rac-failsafe) .page--privacy .privacy-hub__ring:not(.is-drawn) { --p: 0; }
  .page--privacy .privacy-hub__ring.is-drawn .ring__value { transition-duration: 1500ms; transition-delay: 250ms; }
}
.page--privacy .privacy-hub__turn { position: absolute; inset: 0; display: grid; place-items: center; }
.page--privacy .privacy-hub__key { inline-size: 36%; block-size: 36%; color: var(--accent); }
/* A short, wide window: less air above the title, so the contents begin in the first screen. */
@media (min-width: 40rem) and (max-height: 45rem) {
  .page--privacy .privacy-head { padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.5rem, 5vh, 3rem)) clamp(2.25rem, 6vh, 3.5rem); }
}

/* ────────────────────────────────────────────────────────── the reading ── */
.page--privacy .privacy-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }

/* The contents: a card. At its head a small dial (the ring fills as the page is read; the wheel inside it
   turns to the part being read) and the heading. Then the eight parts, each behind one tooth. */
.page--privacy .privacy-contents__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  padding: clamp(1.125rem, .9rem + 1vw, 1.625rem);
  border-radius: var(--r-panel);
}
.page--privacy .privacy-contents__top { display: flex; align-items: center; gap: var(--space-s); padding-inline: .375rem; }
.page--privacy .privacy-contents__dial { position: relative; display: grid; flex: none; place-items: center; inline-size: 3.5rem; aspect-ratio: 1; }
.page--privacy .privacy-contents__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.page--privacy .privacy-contents__ring .ring__track { stroke: var(--row); }
.page--privacy .privacy-contents__rotor { display: block; inline-size: 54%; block-size: 54%; color: var(--wheel-colour); }
.page--privacy .privacy-contents__rotor .wheel { inline-size: 100%; block-size: 100%; }
.page--privacy .privacy-contents__title { font-size: var(--fs-sub); font-weight: var(--fw-title); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--privacy .privacy-contents__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .125rem; margin: 0; padding: 0; list-style: none; }
.page--privacy .privacy-contents__list > li { min-inline-size: 0; }
/* A pane, a tablet: two columns, read down the first and then down the second. */
@media (min-width: 34rem) and (max-width: 63.99rem) {
  .page--privacy .privacy-contents__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--space-s); }
}
.page--privacy .privacy-contents__link {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  min-block-size: var(--target);
  padding: .625rem .875rem;
  border-radius: var(--r-field);
  color: var(--fg);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.page--privacy .privacy-contents__mark { margin-block-start: .34em; background: var(--line-strong); opacity: .5; transition: background-color var(--dur-2) ease, opacity var(--dur-2) ease, translate var(--dur-3) var(--ease-out); }
/* The part being read: a white row, its words in the link colour and the semibold, its tooth lit. */
.page--privacy .privacy-contents__list > li.is-current > .privacy-contents__link,
.page--privacy .privacy-contents__link[aria-current] { background: var(--row); color: var(--link); font-weight: var(--fw-strong); }
.page--privacy .privacy-contents__list > li.is-current .privacy-contents__mark { background: var(--accent); opacity: 1; }
.page--privacy .privacy-contents__link:active { background: var(--row); }
@media (hover: hover) and (pointer: fine) {
  .page--privacy .privacy-contents__link:hover { background: var(--row-hover); }
  .page--privacy .privacy-contents__link:hover .privacy-contents__mark { background: var(--accent); opacity: 1; translate: .15em 0; }
  .page--privacy .privacy-contents__list > li.is-current > .privacy-contents__link:hover { background: var(--row); }
}

/* The parts: cards. The medallion and the title on one line; the words under the title. */
.page--privacy .privacy-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); min-inline-size: 0; }
.page--privacy .privacy-part {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
}
.page--privacy .privacy-part__icon { --m: 3rem; --m-bg: var(--row); --m-fg: var(--link); }
.page--privacy .privacy-part__title { font-size: var(--fs-sub); font-weight: var(--fw-title); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); }
.page--privacy .privacy-part__say { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); justify-items: start; }
.page--privacy .privacy-part__say p { max-inline-size: 38em; }
@media (min-width: 40rem) {
  .page--privacy .privacy-part__say { grid-column: 2; }
}
/* The notice of the preview stage: the same card in the amber tint, its medallion the amber itself. */
.page--privacy .privacy-part--notice { --card: var(--apricot-tint); }
.page--privacy .privacy-part--notice .privacy-part__icon { --m-bg: var(--panel); --m-fg: var(--fg); }

/* The Personal Information Collection Statement: the one formal part, on a panel: the heading with its
   medallion, the sentence that says what it covers, then the six pairs as white rows (the term behind a tooth). */
.page--privacy .privacy-statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); margin-block: var(--space-xs); padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem); }
.page--privacy .privacy-statement__head { display: flex; align-items: center; gap: var(--space-s); }
.page--privacy .privacy-statement__icon { --m: 3rem; }
.page--privacy .privacy-statement__lead { max-inline-size: 40em; }
.page--privacy .privacy-statement__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.page--privacy .privacy-statement__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-m);
  padding: var(--space-s) clamp(1rem, .8rem + .8vw, 1.5rem);
  border-radius: var(--r-card);
  background: var(--row);
}
.page--privacy .privacy-statement__term {
  display: flex;
  align-items: baseline;
  gap: .6em;
  color: var(--heading);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  line-height: 1.4;
  letter-spacing: 0;
}
.page--privacy .privacy-statement__term > span:last-child { min-inline-size: 0; }
.page--privacy .privacy-statement__say { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); justify-items: start; }
.page--privacy .privacy-statement__say p { max-inline-size: 36em; }
@media (min-width: 48rem) {
  .page--privacy .privacy-statement__row { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); align-items: baseline; }
}

/* A wide screen: the contents stay beside the text while it is read. */
@media (min-width: 64rem) {
  .page--privacy .privacy-layout { grid-template-columns: minmax(0, 20.5rem) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start; }
  .page--privacy .privacy-contents__link { padding-block: .5rem; font-size: var(--fs-small); }
}
@media (min-width: 64rem) and (min-height: 41rem) {
  .page--privacy .privacy-contents { position: sticky; inset-block-start: calc(var(--bar-top) + var(--space-m)); }
}

/* Where a contents link lands: the engine moves the focus to the part itself (not a control, so it is out of
   the tab order). A ring just outside the card says where you are. */
.page--privacy :is(.privacy-part, .privacy-statement)[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--privacy .privacy-ask[tabindex="-1"]:focus-visible { outline: 0; }

/* ──────────────────────────────────────────────────────────── questions ── */
.page--privacy .privacy-ask__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); justify-items: start; }
.page--privacy .privacy-ask__words { display: grid; gap: var(--space-xs); min-inline-size: 0; }
.page--privacy .privacy-ask__title { font-size: var(--fs-section); }
.page--privacy .privacy-ask__act { display: grid; gap: var(--space-s); justify-items: start; }
.page--privacy .privacy-updated { font-weight: var(--fw-text); }
.page--privacy .privacy-updated > .b-medallion { --m-bg: var(--bg); --m-fg: var(--link); }
@media (min-width: 52rem) {
  .page--privacy .privacy-ask__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-l); }
  .page--privacy .privacy-ask__act { justify-items: end; }
}