/* /privacy/: this site collects almost nothing, and the page proves it about itself: a live readout of its
   own requests, cookies and storage, and the one path a message takes, drawn. */

/* ---- The readout: an instrument set into the paper ---- */
.proof-strip{margin:var(--space-6) 0 0;padding:clamp(18px,3vw,26px);background:#12151A;color:#E8EBF0;border-radius:3px;box-shadow:0 18px 40px rgba(20,23,28,.18)}
.proof-strip[hidden]{display:none}
.proof-strip__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.proof-strip__title{margin:0;font:600 .8125rem/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#E8EBF0}
.proof-strip__live{display:inline-flex;align-items:center;gap:8px;font:600 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#5BE3A0}
.proof-strip__live::before{content:"";width:8px;height:8px;border-radius:50%;background:#5BE3A0;box-shadow:0 0 10px rgba(91,227,160,.7)}
.proof-strip__rows{margin:0;display:grid}
.proof-strip__rows>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.proof-strip__rows dt{font:500 .75rem/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#9AA2B1}
.proof-strip__rows dd{margin:0;font:500 .9375rem/1.5 "JetBrains Mono",monospace;color:#E8EBF0;overflow-wrap:anywhere}
.proof-strip .is-good{color:#5BE3A0}
.proof-strip .is-bad{color:#FF7A7A}
.proof-strip__list{margin-top:14px}
.proof-strip__list summary{display:flex;align-items:center;min-height:44px;font:600 .8125rem/1.3 "JetBrains Mono",monospace;color:#77F5FF;cursor:pointer}
.proof-strip__list summary:focus-visible{outline:3px solid #77F5FF;outline-offset:2px}
.proof-strip__table{max-height:340px;overflow:auto;margin-top:6px;border:1px solid rgba(255,255,255,.1)}
.proof-strip__table table{width:100%;border-collapse:collapse;font:500 .75rem/1.45 "JetBrains Mono",monospace}
.proof-strip__table th{position:sticky;top:0;padding:8px 10px;background:#1B1F27;color:#9AA2B1;text-align:left;font-weight:600}
.proof-strip__table td{padding:6px 10px;border-top:1px solid rgba(255,255,255,.06);color:#C3C9D6;vertical-align:top}
.proof-strip__table td:first-child{overflow-wrap:anywhere;max-width:36ch}
.proof-strip__table td:nth-child(n+3){white-space:nowrap;text-align:right}
.proof-strip__note{margin:14px 0 0;font:400 .875rem/1.6 "IBM Plex Sans",var(--font-sans);color:#9AA2B1}
@media(min-width:640px){
  .proof-strip__rows>div{grid-template-columns:minmax(150px,.36fr) minmax(0,1fr);gap:16px;align-items:baseline}
}
@media(max-width:520px){.proof-strip__table td:nth-child(2),.proof-strip__table th:nth-child(2){display:none}}

/* ---- Where a message goes: four stops, drawn ---- */
.data-path{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;counter-reset:hop}
.data-path li{position:relative;display:grid;gap:2px;padding:0 0 18px 34px;counter-increment:hop}
.data-path li::before{content:counter(hop);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper-ink);color:var(--paper);font:600 .75rem/1 "JetBrains Mono",monospace}
.data-path li::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--paper-rule)}
.data-path li:last-child{padding-bottom:0}
.data-path li:last-child::after{content:none}
.data-path b{font:600 1rem/1.35 "Space Grotesk",var(--font-display);color:var(--paper-ink)}
.data-path span{font-size:.9375rem;line-height:1.5;color:var(--paper-body)}
.data-path code{font-size:.875em}
@media(min-width:760px){
  .data-path{grid-template-columns:repeat(4,minmax(0,1fr))}
  .data-path li{padding:34px 14px 0 0}
  .data-path li::after{left:26px;right:6px;top:10px;bottom:auto;width:auto;height:2px}
}
@media(prefers-reduced-motion:reduce){.proof-strip__live::before{animation:none}}
@media(prefers-reduced-motion:no-preference){
  html[data-motion-preference="on"] .proof-strip__live::before{animation:proof-pulse 2s ease-in-out infinite}
  @keyframes proof-pulse{50%{opacity:.3}}
}
