/* ---------------------------------------------------------------------------
   Naven — shared stylesheet for the standalone legal and information pages.

   Lifted verbatim out of safety.html, which carried all of it inline. Terms,
   Privacy and Safety are documents people compare against each other, and
   three copies of a palette is three chances for them to drift apart until
   they stop looking like one product. One file, one set of tokens.
--------------------------------------------------------------------------- */

/* Light by default, dark when the reader's system asks for it. Both
   palettes are defined explicitly — a page that inherits its background
   from the browser looks broken in whichever theme it did not expect. */
:root {
  color-scheme: light dark;
  --bg: #eef0fb;
  --bg-art:
    radial-gradient(60rem 40rem at 12% -8%, rgba(91, 92, 240, .16), transparent 60%),
    radial-gradient(50rem 36rem at 92% 4%, rgba(52, 199, 123, .12), transparent 62%);
  --panel: #ffffff;
  --panel-soft: #f5f6fd;
  --text: #131834;
  --muted: #5b6489;
  --hairline: #e2e6f5;
  --accent: #4a5cf5;
  --accent-soft: #eceefe;
  --positive: #16915c;
  --positive-soft: #e5f6ee;
  --warning: #9a6511;
  --warning-soft: #fdf1dd;
  --shadow: 0 18px 50px rgba(30, 40, 100, .10);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1124;
    --bg-art:
      radial-gradient(60rem 40rem at 12% -8%, rgba(91, 92, 240, .26), transparent 60%),
      radial-gradient(50rem 36rem at 92% 4%, rgba(52, 199, 123, .14), transparent 62%);
    --panel: #171b36;
    --panel-soft: #1e2342;
    --text: #eef1ff;
    --muted: #a2abd4;
    --hairline: #2b3158;
    --accent: #8e9bff;
    --accent-soft: #232a54;
    --positive: #4bd699;
    --positive-soft: #16342a;
    --warning: #e7b866;
    --warning-soft: #382d17;
    --shadow: 0 18px 50px rgba(0, 0, 0, .38);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 0 0 72px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-art);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

/* ---- Chrome ---- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 12px max(20px, env(safe-area-inset-left)) 12px max(20px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar a.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none;
  font-weight: 800; font-size: 15px; letter-spacing: -0.015em;
}
.topbar img { width: 26px; height: 26px; border-radius: 8px; }
.topbar .back {
  margin-left: auto;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--panel);
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 700;
  transition: transform 160ms cubic-bezier(.23,1,.32,1);
}
.topbar .back:active { transform: scale(.97); }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }

/* ---- Hero ---- */

header.hero { padding: clamp(36px, 7vw, 68px) 0 clamp(24px, 4vw, 36px); }
.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
h1 {
  margin: 12px 0 0;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.033em;
  font-weight: 830;
  text-wrap: balance;
}
.sub { margin: 16px 0 0; max-width: 62ch; color: var(--muted); font-size: clamp(15px, 1.6vw, 17.5px); }
.updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--hairline); background: var(--panel);
  color: var(--muted); font-size: 12.5px; font-weight: 650;
}
.updated i { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }

/* ---- At a glance ---- */

.glance {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin: 30px 0 8px;
}
.glance div {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.glance dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.glance dd { margin: 8px 0 0; font-size: 14.5px; font-weight: 650; line-height: 1.45; }

/* ---- Contents ---- */

nav.toc {
  margin: 30px 0 0; padding: 20px;
  border-radius: 16px; border: 1px solid var(--hairline); background: var(--panel-soft);
}
nav.toc p { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
nav.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: toc; }
nav.toc li { counter-increment: toc; }
nav.toc a { display: flex; gap: 10px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 620; padding: 4px 0; }
nav.toc a::before { content: counter(toc); color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 16px; }
nav.toc a:hover { color: var(--accent); }

/* ---- Sections ---- */

section.card {
  margin: 18px 0 0;
  padding: clamp(22px, 3.4vw, 34px);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--panel);
  box-shadow: var(--shadow);
  scroll-margin-top: 88px;
}
section.card > h2 {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 4px;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.024em;
  line-height: 1.2;
  font-weight: 790;
}
section.card > h2 span.num {
  display: grid; place-items: center;
  flex: none;
  width: 28px; height: 28px;
  align-self: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px; font-weight: 830;
  font-variant-numeric: tabular-nums;
}
section.card > p:first-of-type { margin-top: 14px; }
p, li { font-size: 15px; }
p { margin: 0 0 14px; color: var(--text); }
section.card p { color: color-mix(in srgb, var(--text) 84%, var(--muted)); }
h3 { margin: 24px 0 8px; font-size: 15.5px; font-weight: 760; letter-spacing: -0.012em; }
a { color: var(--accent); }

/* ---- Layered list, for the screening stack ---- */

ol.layers { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: layer; }
ol.layers li {
  counter-increment: layer;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--panel-soft);
}
ol.layers li::before {
  content: 'L' counter(layer);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 830;
}
ol.layers strong { display: block; font-size: 14.5px; font-weight: 760; }
ol.layers p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---- Badges ---- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.badge.on { background: var(--positive-soft); color: var(--positive); }
.badge.closed { background: var(--accent-soft); color: var(--accent); }
.badge.limit { background: var(--warning-soft); color: var(--warning); }

/* ---- Tables ---- */

.table-wrap {
  overflow-x: auto;
  margin: 6px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; }
thead th {
  background: var(--panel-soft);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
tbody tr + tr { border-top: 1px solid var(--hairline); }
tbody th { font-weight: 730; white-space: nowrap; }
td small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; }

/* ---- Stored / not stored ---- */

.ledger { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 4px 0 0; }
.ledger > div { padding: 18px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--panel-soft); }
.ledger h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ledger.stored h4 { color: var(--positive); }
.ledger ul { margin: 0; padding-left: 18px; }
.ledger li { font-size: 13.5px; color: var(--muted); margin-bottom: 5px; line-height: 1.5; }
.mark { color: var(--positive); font-weight: 800; }
.cross { color: var(--muted); font-weight: 800; }

/* ---- Limits ---- */

ul.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
ul.limits li {
  display: grid; gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--warning);
  background: var(--panel-soft);
}
ul.limits strong { font-size: 14px; font-weight: 760; }
ul.limits span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---- Contact ---- */

.contact {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.contact a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px;
  border-radius: 13px;
  border: 1px solid var(--hairline);
  background: var(--panel-soft);
  color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 700;
  transition: transform 160ms cubic-bezier(.23,1,.32,1);
}
.contact a.primary { border-color: transparent; background: var(--accent); color: #fff; }
.contact a:active { transform: scale(.97); }

.note {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px dashed var(--hairline);
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

footer {
  max-width: 940px; margin: 34px auto 0;
  padding: 22px max(20px, env(safe-area-inset-left)) 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  color: var(--muted); font-size: 13px;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

@media print {
  body { background: #fff; color: #000; }
  .topbar, nav.toc, .contact { display: none; }
  section.card { box-shadow: none; break-inside: avoid; }
}