/* ==========================================================================
   Policy page — policy.html only (generated by tools/build-policy.py).
   Loaded after identity-v2.css, so every token and the header/footer/tab bar
   come from there; this sheet owns only the long-form register.

   Round 3 / concept B — «the botanical ledger»: one reading column, a sticky
   rail of section glyphs beside it on desktop (a horizontal strip on phones),
   the summary as a ruled ledger entry with the PW seal, and each section
   opened by a § mark over a hairline. No cards, no motion: `position: sticky`
   does the rail, IntersectionObserver marks the current entry, and nothing
   here transitions, so prefers-reduced-motion needs no override.
   Version pinned in tools/build-policy.py (POLICY_CSS_V) — bump it there.
   ========================================================================== */

.policy {
  position: relative;
  color: var(--archive-ink);
  background: var(--archive-paper);
}

/* Desktop: rail column + reading column. The head, entries and contact sit in
   the reading column; the rail owns the first column from the summary down. */
.policy-wrap {
  display: grid;
  grid-template-columns: 72px minmax(0, 760px);
  column-gap: 44px;
  align-items: start;
  max-width: 920px;
  margin: 0 auto;
  padding: 72px var(--pw-gutter, 34px) 96px;
}
.policy-head,
.policy-loading,
.policy-fallback,
.policy-summary,
.policy-body,
.policy-contact { grid-column: 2; }

.policy-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--archive-line-strong);
}

/* Ledger stamp: the PW seal from the hero, small, beside a Latin-only kicker. */
.policy-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.policy-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--archive-ink);
  border: 1px solid var(--archive-ink);
  border-radius: 50%;
  font-family: var(--archive-display-en);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}
.policy-kicker {
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.policy-head h1 {
  margin: 0 0 14px;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0;
}
html[dir='ltr'] .policy-head h1 { font-family: var(--archive-display-en); }

.policy-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--archive-ink-soft);
  font-size: 0.95rem;
  line-height: 1.9;
}

.policy-loading,
.policy-fallback {
  padding: 40px 0;
  color: var(--archive-ink-soft);
  font-size: 0.9rem;
}
.policy-fallback p { margin: 0 0 14px; }
.policy-fallback-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Screen-reader-only text: the rail link's real name is the section title. */
.policy-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Phosphor glyphs — filled 256-viewBox paths, sized in em so they follow type. */
.policy-ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* ---- the rail ---------------------------------------------------------- */
.policy-rail {
  grid-column: 1;
  grid-row: 2 / span 5;
  position: sticky;
  top: 96px;
  align-self: start;
  padding: 6px 0 0;
  border-inline-end: 1px solid var(--archive-line);
}
.policy-rail ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* position: relative is load-bearing: the visually-hidden name inside is
   absolutely positioned, and on the phone the rail is a horizontal scroller —
   without a positioned parent the hidden spans escape the scroller and push
   the document sideways (measured at 375: scrollWidth 500+). */
.policy-rail-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--archive-ink-soft);
  text-decoration: none;
  border-inline-end: 2px solid transparent;
  margin-inline-end: -1px;
}
.policy-rail-link .policy-ic { font-size: 16px; }
.policy-rail-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;      /* 10.9px — above the 10.5 floor */
  letter-spacing: 0.08em;
  line-height: 1;
}
.policy-rail-link[aria-current] {
  color: var(--archive-ink);
  border-inline-end-color: var(--archive-clay-deep);
}
.policy-rail-link[aria-current] .policy-rail-n { color: var(--archive-clay-deep); }
.policy-rail-link:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 2px; }
@media (hover: hover) {
  .policy-rail-link:hover { color: var(--archive-ink); }
}

/* ---- the summary: a ledger entry, not a card ---------------------------- */
.policy-summary {
  margin: 28px 0 8px;
  padding: 2px 0 6px;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--archive-ink);
}
.policy-summary h2 {
  margin: 0 0 10px;
  color: var(--archive-clay-deep);
  font-family: var(--archive-display-ar);
  font-size: 0.9rem;
  font-weight: 600;
}
html[dir='ltr'] .policy-summary h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.policy-summary p {
  margin: 0;
  color: var(--archive-ink);
  font-size: 0.95rem;
  line-height: 1.95;
}
.policy-summary p + p { margin-top: 12px; }

/* ---- entries ------------------------------------------------------------ */
.policy-section { padding: 30px 0 8px; }

/* § and the number over a hairline: Latin-only mono, so no Arabic is tracked. */
.policy-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--archive-clay-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.policy-eyebrow i { flex: 1; border-top: 1px solid var(--archive-line); }

.policy-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--archive-ink);
  font-family: var(--archive-display-ar);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.3;
}
html[dir='ltr'] .policy-section h2 { font-family: var(--archive-display-en); font-size: 1.55rem; }
.policy-section h2 .policy-ic { font-size: 17px; color: var(--archive-ink-soft); }

.policy-section p {
  max-width: 68ch;
  margin: 0 0 14px;
  color: var(--archive-ink);
  font-size: 0.97rem;
  line-height: 1.95;
}

/* ---- contact ------------------------------------------------------------ */
.policy-contact {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--archive-line-strong);
}
.policy-contact p {
  margin: 0 0 12px;
  color: var(--archive-ink-soft);
  font-size: 0.9rem;
}

/* The one control: an ink outline link, 44px floor, same idiom as .btn-ghost. */
.policy-wa,
.policy-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--archive-ink);
  background: transparent;
  border: 1px solid var(--archive-ink);
  border-radius: 0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.policy-wa .policy-ic { font-size: 18px; }
.policy-wa:focus-visible,
.policy-retry:focus-visible { outline: 2px solid var(--archive-clay); outline-offset: 3px; }
@media (hover: hover) {
  .policy-wa:hover,
  .policy-retry:hover { color: var(--archive-paper); background: var(--archive-ink); }
}

/* ---- phones and narrow tablets: one column, the rail becomes a strip ----- */
@media (max-width: 980px) {
  .policy-wrap {
    display: block;
    padding: 44px 16px 72px;
  }
  .policy-head { padding-bottom: 22px; }
  .policy-rail {
    position: static;
    margin-top: 20px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--archive-line-strong);
    border-bottom: 1px solid var(--archive-line);
  }
  .policy-rail ol {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 8px;
  }
  .policy-rail ol::-webkit-scrollbar { display: none; }
  .policy-rail-link {
    flex: none;
    min-width: 48px;
    padding: 6px 8px;
    margin: 0;
    border-inline-end: 0;
    border-bottom: 2px solid transparent;
  }
  .policy-rail-link[aria-current] { border-bottom-color: var(--archive-clay-deep); }
  .policy-summary { margin-top: 22px; }
  .policy-section { padding-top: 26px; }
  .policy-section h2 { font-size: 1.22rem; }
  html[dir='ltr'] .policy-section h2 { font-size: 1.32rem; }
  .policy-section p,
  .policy-summary p { font-size: 0.94rem; line-height: 1.9; }
}