/* ==========================================================================
   Kalvien — shared stylesheet for the legal documents.

   Three pages share it (privacy, terms, data safety) plus the deletion route,
   so unlike the landing page this one is worth a separate cacheable file.

   Priorities, in order: readable at length, printable, and no external
   requests. Long-form legal text is read on a phone at an awkward moment, so
   measure and line-height matter more than anything decorative here.
   ========================================================================== */

:root {
  --bg:#05070C;
  --bg-2:#080B12;
  --surface:rgba(255,255,255,.038);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --text:#EAF0F7;
  --dim:#A3AEBF;
  --dim-2:#7C8799;
  --i1:#22D3EE;
  --i2:#6FB5FF;
  --i3:#A78BFA;
  --i4:#F472B6;
  --iris:linear-gradient(100deg,var(--i1),var(--i2) 38%,var(--i3) 70%,var(--i4));
  --acid:#D4FF3F;
  --warn:#FF8A6B;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;
}

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  background:var(--bg);
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--text);
  font:400 16.5px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

a { color:var(--i2); }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--i2); outline-offset:3px; border-radius:6px; }
svg { display:block; }

.wrap { width:min(760px, 100% - 2.5rem); margin-inline:auto; }

.sr {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:-999px; top:0; z-index:300;
  background:var(--text); color:var(--bg);
  padding:.8rem 1.3rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
  text-decoration:none;
}
.skip:focus { left:0; }

/* ---------- nav ---------- */

.nav {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem clamp(1rem,3vw,2rem);
  background:rgba(5,7,12,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:1.05rem; letter-spacing:-.025em; text-decoration:none;
  color:var(--text);
}
.brand:hover { text-decoration:none; }
.brand-mark {
  position:relative; display:grid; place-items:center;
  width:30px; height:30px; border-radius:10px; flex:none;
  background:var(--bg-2); color:var(--bg); isolation:isolate;
}
.brand-mark::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--iris); z-index:-1;
}
.brand-mark svg { width:16px; height:16px; }
.nav-back {
  font-size:.875rem; font-weight:500; color:var(--dim); text-decoration:none;
}
.nav-back:hover { color:var(--text); }

/* ---------- document head ---------- */

.doc-head { padding:clamp(3rem,8vh,5rem) 0 0; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim-2);
}
h1 {
  font-size:clamp(2.1rem,5.5vw,3.1rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.04; margin-top:1rem;
  text-wrap:balance;
}
.doc-meta {
  margin-top:1.5rem; padding:1rem 1.15rem; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  font-size:.875rem; line-height:1.65; color:var(--dim);
  display:grid; gap:.3rem;
}
.doc-meta b { color:var(--text); font-weight:600; }

/* The plain-language box at the top of each document. Not a substitute for
   the text below it, and it says so — but a policy nobody reads protects
   nobody, so the summary comes first. */
.tldr {
  margin-top:1.5rem; padding:1.35rem 1.5rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(111,181,255,.09),rgba(167,139,250,.045));
  box-shadow:inset 0 0 0 1px rgba(111,181,255,.24);
}
.tldr h2 {
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--i2); margin-bottom:.9rem;
}
.tldr ul { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
/* Positioned marker rather than a grid track. These items contain inline
   <strong>, and on a grid container every inline child becomes its own grid
   item — which tore each sentence into one word per row. */
.tldr li {
  position:relative; padding-left:1.6rem;
  font-size:.95rem; line-height:1.6; text-wrap:pretty;
}
.tldr li::before {
  content:"—"; position:absolute; left:0; top:0;
  color:var(--i2); font-weight:700;
}
.tldr p {
  margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(111,181,255,.2);
  font-size:.82rem; color:var(--dim-2); line-height:1.6;
}

/* ---------- table of contents ---------- */

.toc {
  margin-top:2rem; padding:1.25rem 1.4rem; border-radius:var(--r-md);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
}
.toc h2 {
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim-2); margin-bottom:.9rem;
}
.toc ol {
  list-style:none; counter-reset:toc; padding:0; margin:0;
  display:grid; gap:.5rem;
}
.toc li { counter-increment:toc; display:grid; grid-template-columns:2rem 1fr; }
.toc li::before {
  content:counter(toc,decimal-leading-zero);
  font:600 .72rem/1.75 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--dim-2); letter-spacing:.08em;
}
.toc a { font-size:.95rem; text-decoration:none; color:var(--text); }
.toc a:hover { color:var(--i2); text-decoration:underline; }

/* ---------- body ---------- */

.doc { padding:clamp(2.5rem,6vh,4rem) 0 clamp(4rem,10vh,7rem); }

.doc section { margin-top:3rem; scroll-margin-top:5rem; }
.doc section:first-of-type { margin-top:2rem; }

h2.h {
  font-size:1.5rem; font-weight:600; letter-spacing:-.025em; line-height:1.2;
  padding-bottom:.7rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--line);
  text-wrap:balance;
}
h2.h .n {
  font:600 .7rem/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.14em; color:var(--i2);
  display:block; margin-bottom:.55rem;
}
h3 {
  font-size:1.05rem; font-weight:600; letter-spacing:-.015em;
  margin:1.9rem 0 .6rem; text-wrap:balance;
}

.doc p { margin-bottom:1rem; color:var(--dim); text-wrap:pretty; }
.doc p strong, .doc li strong { color:var(--text); font-weight:600; }
.doc section > p:last-child { margin-bottom:0; }

.doc ul, .doc ol.list {
  margin:0 0 1.1rem; padding-left:1.3rem; color:var(--dim);
  display:grid; gap:.55rem;
}
.doc li { text-wrap:pretty; }
.doc li::marker { color:var(--dim-2); }

code, kbd {
  font:500 .87em/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--i2); word-break:break-word;
}

/* Callouts. `note` is context, `warn` is a limitation the reader is likely to
   assume away, and there are more of the second kind on purpose. */
.note, .warn {
  margin:1.4rem 0; padding:1.1rem 1.25rem; border-radius:var(--r-md);
  font-size:.94rem; line-height:1.65;
}
.note {
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  color:var(--dim);
}
.warn {
  background:rgba(255,138,107,.06);
  box-shadow:inset 0 0 0 1px rgba(255,138,107,.26);
  color:var(--dim);
}
.note b, .warn b { display:block; margin-bottom:.35rem; color:var(--text); }
.warn b { color:var(--warn); }
.note p:last-child, .warn p:last-child { margin-bottom:0; }

/* ---------- tables ---------- */

.tbl-scroll {
  margin:1.4rem 0; overflow-x:auto; overscroll-behavior-x:contain;
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line);
}
table { width:100%; min-width:520px; border-collapse:collapse; text-align:left; }
th, td {
  padding:.85rem 1rem; vertical-align:top;
  font-size:.9rem; line-height:1.55;
  border-top:1px solid var(--line);
}
thead th {
  border-top:0; background:rgba(255,255,255,.035);
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim-2); white-space:nowrap;
}
tbody th {
  font-weight:600; color:var(--text); width:30%; min-width:150px;
}
td { color:var(--dim); }

.yes { color:var(--acid); font-weight:600; }
.no  { color:var(--warn); font-weight:600; }

/* ---------- footer ---------- */

.foot {
  border-top:1px solid var(--line);
  padding:2.5rem 0 3rem;
  font-size:.85rem; line-height:1.7; color:var(--dim-2);
}
.foot-links {
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin-bottom:1.4rem;
  font-weight:500;
}
.foot-links a { color:var(--dim); text-decoration:none; }
.foot-links a:hover { color:var(--text); text-decoration:underline; }
.foot p { max-width:64ch; text-wrap:pretty; }

/* ---------- print ---------- */

@media print {
  html, body { background:#fff; color:#000; }
  .nav, .skip, .toc, .foot-links { display:none; }
  .wrap { width:100%; }
  a { color:#000; text-decoration:underline; }
  .tldr, .note, .warn, .doc-meta {
    box-shadow:none; border:1px solid #999; background:none; color:#000;
  }
  .doc p, .doc li, td { color:#000; }
  h2.h { border-bottom:1px solid #000; }
  .doc section { page-break-inside:avoid; }
}