/* aimlink.ai Privacy page (privacy/index.html). Load after site.css and nav.css. Script: assets/privacy-page.js.

   Privacy is trust, so it is quiet. On the frame of the other pages (dark hero, light content, dark footer):
   1. Hero (data-rhythm="hero"): the statement on night, the target's rings as hairlines behind it. No photograph.
   2. The document (data-rhythm="proof"): a table of contents that follows you on the left (collapsed on phones, where it
      is a button above the text), the text on the right at a reading length (about 65 characters), headings that
      are links, and the "who is responsible for what" table first, because it is the question people come with.
   3. The ask: a short block at the end of the text with the address, the contact page and account deletion.
   No scrub, nothing pinned. The sections come in with the site's reveal and the hero's words rise once; reduced motion
   keeps colour and opacity only. Without JS the contents list is simply the first thing you read.
   Type and space come from the tokens. */

@layer sections {
  /* ───────────────────────── Hero ───────────────────────── */
  .pv-hero { position: relative; isolation: isolate; overflow: clip; background: var(--color-night); color: var(--text); padding-bottom: var(--space-8); }
  .pv-hero-copy { display: grid; justify-items: start; }
  .pv-hero .hl { display: block; }
  .pv-hero .lede { margin-top: var(--gap-head); color: var(--text); opacity: 0.92; max-width: 34ch; }
  .pv-hero .w { display: inline-block; animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger)); }
  .pv-hero .lede { animation: rise var(--duration-reveal) var(--ease-out) 360ms both; }
  /* the rings of the target as hairlines, off to the lower right, cropped by the hero's edge */
  .pv-rings {
    position: absolute; z-index: -1; right: -18vw; bottom: -42vw; width: 70vw; aspect-ratio: 1; pointer-events: none;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(5.5% - 1px), rgb(160 224 32 / 0.16) calc(5.5% - 1px) 5.5%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0 56%, transparent 71%);
    mask-image: radial-gradient(circle at 50% 50%, black 0 56%, transparent 71%);
  }
  @media (min-width: 900px) { .pv-rings { right: -6vw; bottom: -30vw; width: 52vw; } }

  /* ───────────────────────── Body: contents + text ───────────────────────── */
  .pv-body { background: var(--bg); color: var(--text); }
  .pv-grid { display: grid; gap: var(--gap-group); }
  @media (min-width: 1000px) {
    .pv-grid { grid-template-columns: 15rem minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  }

  /* contents */
  .pv-toc { min-width: 0; }
  .pv-toc nav { font-size: var(--type-small-size); line-height: 1.4; }
  .pv-toc-label { margin-bottom: var(--space-3); color: var(--text-subtle); }
  .pv-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .pv-toc ol ol { margin: 2px 0 var(--space-2) var(--space-3); padding-left: var(--space-3); border-left: var(--line-hairline) solid var(--line); }
  .pv-toc a {
    position: relative; display: flex; align-items: center; min-height: 36px; padding: 2px var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-xs);
    color: var(--text-muted); text-decoration: none; transition: color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover);
  }
  /* the hit area is 44 px tall (4 px above and below the 36 px row); the look is unchanged */
  .pv-toc a::before { content: ""; position: absolute; inset: -4px 0; }
  @media (hover: hover) and (pointer: fine) { .pv-toc a:hover { color: var(--text); background: var(--bg-alt); } }
  .pv-toc a:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 1px; color: var(--text); }
  .pv-toc a[aria-current="true"] { color: var(--text); font-weight: 700; box-shadow: inset 2px 0 0 var(--color-lime); padding-left: calc(var(--space-2) + 6px); background: var(--bg-alt); }
  /* with JS a lime marker slides between entries (privacy-page.js); the entry then keeps only its fill and weight */
  .pv-toc nav { position: relative; }
  .pv-toc-bar { position: absolute; left: 0; top: 0; width: 2px; background: var(--color-lime); opacity: 0; pointer-events: none; will-change: auto; }
  .pv-toc-bar.is-ready { transition: transform var(--duration-nav) var(--ease-out), height var(--duration-nav) var(--ease-out), opacity var(--duration-hover) var(--ease-hover); }
  .pv-toc.has-bar a[aria-current="true"] { box-shadow: none; padding-left: calc(var(--space-2) + 6px); }
  @media (min-width: 1000px) {
    .pv-toc { position: sticky; top: calc(var(--nav-space) + var(--space-4)); max-height: calc(100svh - var(--nav-space) - var(--space-6)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
  }
  /* below 1000 px (and only with JS) the list folds into a button above the text */
  @media (max-width: 999.98px) {
    .pv-toc-toggle {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 52px; padding: 0 var(--space-4);
      border: 0; border-radius: var(--radius-field); background: var(--bg-alt); color: var(--text); font: 700 var(--type-small-size)/1.2 var(--font-text); cursor: pointer;
      box-shadow: inset 0 0 0 1px var(--line);
    }
    .pv-toc-toggle[hidden] { display: none; }
    .pv-toc-toggle .icon { width: 24px; height: 24px; transition: transform var(--duration-nav) var(--ease-out); }
    .pv-toc-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .pv-toc-toggle:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; }
    .pv-toc.is-folded nav { display: none; }
    .pv-toc nav { padding: var(--space-4) var(--space-4) 0; }
    .pv-toc-label { display: none; }
    .pv-toc.is-folded + .pv-doc { margin-top: 0; }
  }

  /* the text */
  .pv-doc { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); max-width: 56rem; }
  .pv-sec { display: grid; gap: var(--space-4); align-content: start; scroll-margin-top: var(--space-9); }
  .pv-sec > * { max-width: 58ch; }
  .pv-sec > .pv-table-wrap { max-width: none; }
  .pv-sec h2, .pv-sec h3 { margin: 0; scroll-margin-top: calc(var(--nav-space) + var(--space-4)); }
  .pv-sec h3.title { margin-top: var(--space-5); }
  .pv-sec h2 + p, .pv-sec h2 + .pv-intro { margin-top: calc(-1 * var(--space-1)); }
  /* the lede: .pv-sec p (below) would win over a bare .pv-intro, so it is named with its section */
  .pv-sec .pv-intro { font-size: var(--type-lede-size); line-height: var(--type-lede-leading); color: var(--text); max-width: 48ch; }
  .pv-sec p, .pv-sec li { font-size: var(--type-body-size); line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
  .pv-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
  .pv-sec li { position: relative; padding-left: var(--space-5); }
  .pv-sec li::before { content: ""; position: absolute; left: 0.2rem; top: 0.78em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-fern); }
  .pv-sec a:not(.pv-anchor), .pv-ask a:not(.btn) {
    color: var(--text); text-decoration: underline; text-decoration-thickness: var(--line-underline); text-underline-offset: 0.2em; text-decoration-color: var(--text-subtle);
    transition: text-decoration-color var(--duration-hover) var(--ease-hover);
  }
  @media (hover: hover) and (pointer: fine) { .pv-sec a:not(.pv-anchor):hover, .pv-ask a:not(.btn):hover { text-decoration-color: var(--accent-strong); } }
  .pv-sec a:not(.pv-anchor):focus-visible, .pv-ask a:not(.btn):focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; border-radius: 2px; }

  /* headings are links (copy the address of a section) */
  .pv-anchor { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.4em; }
  .pv-anchor::after { content: "#"; font-family: var(--font-text); font-size: 0.55em; font-weight: 400; color: var(--text-subtle); opacity: 0; transition: opacity var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) { .pv-anchor:hover::after { opacity: 1; } }
  .pv-anchor:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 4px; border-radius: 2px; }
  .pv-anchor:focus-visible::after { opacity: 1; }
  /* touch: no hover, so the # is always there (quietly) and the tap area is at least 44 px tall */
  @media (hover: none) {
    .pv-anchor { position: relative; }
    .pv-anchor::before { content: ""; position: absolute; inset: -10px -6px; }
    .pv-anchor::after { opacity: 0.6; }
  }

  /* who is responsible for what */
  .pv-table-wrap { margin-top: var(--space-2); }
  .pv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--type-small-size); line-height: 1.45; }
  .pv-table thead th {
    padding: var(--space-3) var(--space-4); text-align: left; background: var(--color-night); color: var(--color-snow);
    font: 700 var(--type-label-size)/1.2 var(--font-text); letter-spacing: var(--type-label-tracking); text-transform: uppercase;
  }
  .pv-table thead th:first-child { border-top-left-radius: var(--radius-icon); }
  .pv-table thead th:last-child { border-top-right-radius: var(--radius-icon); }
  .pv-table tbody th, .pv-table tbody td { padding: var(--space-4); text-align: left; vertical-align: top; color: var(--text-muted); border-bottom: var(--line-hairline) solid var(--line); background: var(--bg); }
  .pv-table tbody th { color: var(--text); font-weight: 700; white-space: nowrap; }
  .pv-table tbody tr:last-child th { border-bottom-left-radius: var(--radius-icon); }
  .pv-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-icon); }
  .pv-table tbody tr:nth-child(even) > * { background: var(--bg-alt); }
  /* phones: each row becomes a block with its column names beside the values */
  @media (max-width: 699.98px) {
    .pv-table, .pv-table tbody, .pv-table tr, .pv-table th, .pv-table td { display: block; }
    .pv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pv-table tbody tr { margin-bottom: var(--space-3); border-radius: var(--radius-icon); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
    .pv-table tbody th { padding: var(--space-3) var(--space-4); background: var(--color-night); color: var(--color-snow); border: 0; }
    .pv-table tbody td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); border-bottom: var(--line-hairline) solid var(--line); }
    .pv-table tbody td:last-child { border-bottom: 0; }
    .pv-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--text); }
    .pv-table tbody tr:nth-child(even) > td { background: var(--bg); }
    /* the row name keeps its night fill in every row (the even-row rule above would turn it light on light) */
    .pv-table tbody tr:nth-child(even) > th { background: var(--color-night); }
    .pv-table tbody tr:last-child th, .pv-table tbody tr:last-child td:last-child { border-radius: 0; }
  }

  .pv-company { display: grid; gap: 2px; font-style: normal; font-size: var(--type-body-size); line-height: 1.6; color: var(--text-muted); }
  .pv-company a { justify-self: start; }

  /* the ask */
  .pv-ask { display: grid; gap: var(--space-4); align-content: start; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-panel); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); max-width: 44rem; }
  .pv-ask p { max-width: 52ch; color: var(--text-muted); font-size: var(--type-body-size); line-height: 1.6; }
  .pv-ask-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .pv-ask-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
  .pv-ask .pv-ask-note { margin-top: calc(-1 * var(--space-2)); font-size: var(--type-small-size); color: var(--text-subtle); }
  .pv-ask-more { font-size: var(--type-small-size); }
}

/* ───────────────────────── Print: the text, open, on white ───────────────────────── */
@media print {
  .site-header, .site-footer, .pv-rings, .pv-toc, .skip-link, .mu-sp, .mu-pointer, [data-ripple] { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .pv-hero { background: none !important; color: #000 !important; padding: 0 0 1rem; }
  .pv-hero .w, .pv-hero .lede, .pv-hero .h1 { color: #000 !important; opacity: 1 !important; transform: none !important; animation: none !important; -webkit-text-fill-color: #000 !important; background: none !important; }
  .pv-body { padding: 0; }
  .pv-grid, .pv-doc { display: block; max-width: none; }
  [data-reveal], .mu-bf, .pv-sec { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pv-sec { margin: 0 0 1.25rem; break-inside: auto; }
  .pv-sec h2, .pv-sec h3 { break-after: avoid; }
  .pv-sec > * { max-width: none; }
  .pv-sec p, .pv-sec li, .pv-company { color: #000 !important; font-size: 11pt; line-height: 1.45; }
  .pv-sec .pv-intro { font-size: 12pt; max-width: none; }
  .pv-intro .mu-wd { opacity: 1 !important; animation: none !important; }
  .pv-table tbody th, .pv-table tbody td, .pv-table thead th { background: none !important; color: #000 !important; border: 1px solid #999; }
  .pv-table tr { break-inside: avoid; }
  .pv-ask { box-shadow: none; border: 1px solid #999; background: none; break-inside: avoid; }
  .pv-sec a[href^="http"]::after, .pv-sec a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .pv-anchor::after, .pv-anchor::before { display: none; }
}

/* ───────────────────────── Reduced motion: colour and opacity only ───────────────────────── */
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .pv-hero .w, .pv-hero .lede { animation: none; }
    .pv-toc-toggle .icon { transition: none; }
    .pv-toc-bar.is-ready { transition: opacity var(--duration-reduced) var(--ease-hover); }
  }
}