/* ============================================================
   JIIVE — PRIVACY POLICY (v3 · gold period)
   A statement opening, then an editorial split: a sticky section
   index on columns 1–3 and the policy on 5–12, each section with
   a hanging serif number. Sets of things are ledgers and ruled
   lists. Header, footer, buttons and the rail come from
   css/home.css so they match the homepage exactly; the grid and
   type roles come from css/page.css. Every value is a token from
   css/tokens.css.
   ============================================================ */

main:focus { outline: none; }

/* ---------- Opening (statement) ---------- */
.pv-intro { padding-top: calc(var(--size-header) + var(--space-section-tight)); }
.pv-title {
  grid-column: 1 / span 9;
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
  max-width: var(--measure-head);
}
/* one ink rule runs under the title across both columns, with a tick at each column start */
.pv-meta, .pv-opening {
  position: relative;
  margin-top: var(--space-block);
  padding-top: var(--space-md);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
}
.pv-meta::before, .pv-opening::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}
.pv-meta {
  grid-column: 1 / span 4;
  margin-right: calc(-1 * var(--grid-gutter));
}
.pv-opening { grid-column: 5 / -1; }
.pv-date { margin: 0; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pv-date time { white-space: nowrap; }
.pv-draft {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
}
.pv-draft strong { font-weight: var(--weight-strong); color: var(--color-emerald-ink); }
.pv-lead {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- Body: index beside the policy ---------- */
.pv-body { padding: var(--space-block) 0 var(--space-section); }

.pv-toc {
  grid-column: 1 / span 3;
  align-self: start;
  position: sticky;
  top: calc(var(--size-header) + var(--space-xl));   /* below the fixed header */
  max-height: calc(100vh - var(--size-header) - 2 * var(--space-xl));
  max-height: calc(100svh - var(--size-header) - 2 * var(--space-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--space-xs);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  background: linear-gradient(var(--color-emerald-ink), var(--color-emerald-ink)) no-repeat 0 0 / var(--size-hairline) var(--size-ledger-tick);
}
.pv-toc ol { list-style: none; margin: 0; padding: 0; }
.pv-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
  text-decoration: none;
  transition: color var(--dur-120) var(--ease-out);
}
.pv-toc-n {
  flex: none;
  min-width: var(--space-lg);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  transition: color var(--dur-120) var(--ease-out);
}
.pv-toc a[aria-current="true"], .pv-toc a[aria-current="true"] .pv-toc-n { color: var(--color-vital-green); }

.pv-doc {
  grid-column: 5 / -1;
  position: relative;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.pv-doc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}

/* ---------- A policy section: hanging number, then the content ---------- */
.pv-sec {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding: var(--space-xl) 0 var(--space-2xl);
  scroll-margin-top: var(--space-lg);
}
.pv-sec + .pv-sec { border-top: var(--size-hairline) solid var(--color-border); }
.pv-sec h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  font-size: var(--text-title);
  line-height: var(--leading-head);
}
.pv-n {
  grid-column: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-vital-green);
}
.pv-h { grid-column: 2 / -1; }
.pv-content { grid-column: 2 / -1; margin-top: var(--space-lg); }
.pv-content > * { margin: 0; }
.pv-content > p { max-width: var(--measure); }
.pv-content > * + * { margin-top: var(--space-md); }
.pv-content > ul + p, .pv-content > div + p, .pv-content > p + ul { margin-top: var(--space-lg); }

.pv-content strong { font-weight: var(--weight-strong); color: var(--color-emerald-ink); }
.pv-link {
  color: var(--color-vital-green);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* ruled list: hairlines between items, no bullets */
.pv-items, .pv-terms, .pv-never { list-style: none; padding: 0; }
.pv-content > .pv-items > li,
.pv-terms > li {
  padding: var(--space-sm) 0;
  border-top: var(--size-hairline) solid var(--color-border);
}
.pv-content > .pv-items > li:last-child,
.pv-terms > li:last-child { border-bottom: var(--size-hairline) solid var(--color-border); }

/* term rows: the term on three columns, its explanation on four */
.pv-terms > li {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
}
.pv-terms > li > strong { grid-column: 1 / span 3; line-height: var(--leading-snug); }
.pv-terms > li > span { grid-column: 4 / -1; }

/* §2: a ledger of what we collect: ink rules top and bottom, hairlines between rows */
.pv-ledger {
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.pv-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
  padding: var(--space-md) 0;
}
.pv-row + .pv-row { border-top: var(--size-hairline) solid var(--color-border); }
.pv-row h3 {
  grid-column: 1 / span 3;
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  letter-spacing: normal;
}
.pv-row .pv-items { grid-column: 4 / -1; margin: 0; }
.pv-row .pv-items li + li { margin-top: var(--space-xs); }

/* §6: the three things we never do, set as serif statements */
.pv-never > li {
  padding: var(--space-md) 0;
  border-top: var(--size-hairline) solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-pull);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-emerald-ink);
  text-wrap: balance;
}
.pv-never > li:first-child { border-top: 0; padding-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .pv-toc a:hover, .pv-toc a:hover .pv-toc-n { color: var(--color-vital-green); }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .pv-title { grid-column: 1 / -1; }
  .pv-meta { grid-column: 1 / -1; margin-right: 0; }
  .pv-opening {
    grid-column: 1 / -1;
    margin-top: var(--space-lg);
    padding-top: 0;
    border-top: 0;
  }
  .pv-opening::before { content: none; }
  .pv-toc {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: var(--space-block);
  }
  .pv-toc ol { columns: 2; column-gap: var(--grid-gutter); }
  .pv-toc li { break-inside: avoid; }
  .pv-doc { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pv-toc ol { columns: 1; }
  .pv-sec { display: block; padding: var(--space-lg) 0 var(--space-xl); }
  .pv-sec h2 { display: flex; gap: var(--space-sm); }
  .pv-n { flex: none; }
  .pv-content { margin-top: var(--space-md); }
  .pv-terms > li, .pv-row { display: block; }
  .pv-terms > li > strong, .pv-terms > li > span { display: block; }
  .pv-terms > li > strong, .pv-row h3 { margin-bottom: var(--space-xxs); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-toc a, .pv-toc-n { transition: none; }
}