/* ------------------------------------------------------------------
   docs.css — shared stylesheet for the long-form document pages
   (eula, privacy-policy, third-party-notices, guide, support).

   Palette, fonts and radii are the ones index.html already defines;
   they are repeated here rather than extracted so the landing page
   keeps working untouched.
   ------------------------------------------------------------------ */

:root{
  --bg-0:#0E0D0B; --bg-1:#141210; --bg-2:#1A1714; --bg-3:#211D18;
  --line:#2F2A22; --line-soft:#241F19;
  --ink:#F4EFE6; --ink-2:#B7AE9E; --ink-3:#827969; --ink-4:#574F44;
  --gold:#E7B24C; --gold-2:#F4C766;
  --gold-soft:rgba(231,178,76,.13); --gold-line:rgba(231,178,76,.32);
  --commit:#54C5DE;
  --f-disp:'Fraunces',Georgia,serif;
  --f-ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r-s:7px; --r-m:11px; --r-l:16px;
  --gut:clamp(20px,5vw,64px);
  --maxw:1080px;
  --measure:72ch;          /* ~72–78 characters at 17px Hanken Grotesk */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg-0); color:var(--ink);
  font-family:var(--f-ui); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 40% at 50% -10%, rgba(231,178,76,.06), transparent 70%);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); position:relative; z-index:1}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px}

/* ---------- top bar (same as the landing page) ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--line-soft);
  background:rgba(14,13,11,.86); backdrop-filter:blur(12px);
}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; font-weight:600; letter-spacing:-.01em}
.brand img{width:26px; height:26px; border-radius:6px; display:block}
.bar-meta{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
}
a.bar-meta:hover{color:var(--gold)}

/* ---------- document header ---------- */
.doc-head{padding:clamp(46px,7vw,84px) 0 clamp(26px,3vw,36px)}
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0 0 22px;
  display:flex; align-items:center; gap:11px;
}
.eyebrow::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--gold-line),transparent); max-width:220px}
.doc-head h1{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.06;
  letter-spacing:-.025em; margin:0 0 18px; max-width:20ch;
  font-variation-settings:'SOFT' 0,'WONK' 1;
}
/* a title the source sets in block capitals carries its weight at a smaller size */
.doc-head h1.caps{
  font-size:clamp(1.7rem,3.5vw,2.5rem); line-height:1.14;
  letter-spacing:-.004em; max-width:26ch;
}
.doc-sub{color:var(--ink-2); max-width:var(--measure); margin:0 0 18px; font-size:1.04rem}
.doc-meta{
  font-family:var(--f-mono); font-size:12px; color:var(--ink-3);
  letter-spacing:.03em; margin:0; display:flex; flex-wrap:wrap; gap:8px 18px;
}

/* ---------- table of contents ---------- */
.toc{
  border:1px solid var(--line-soft); border-radius:var(--r-m);
  background:var(--bg-1); padding:20px clamp(18px,2.6vw,26px);
  margin:0 0 clamp(38px,5vw,56px); max-width:var(--measure);
}
.toc h2{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px; border:0; padding:0; font-weight:400;
}
.toc ol,.toc ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.toc-2{padding-left:18px !important; margin-top:8px !important}
.toc a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent; font-size:.95rem}
.toc a:hover{color:var(--gold); border-bottom-color:var(--gold-line)}
.toc .n{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-4); margin-right:9px}

/* ---------- prose ---------- */
.prose{max-width:var(--measure); padding-bottom:clamp(56px,8vw,96px)}
.prose-wide{max-width:min(100%,104ch)}

.prose h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.42rem,2.9vw,1.92rem); line-height:1.18; letter-spacing:-.018em;
  margin:clamp(46px,5.5vw,68px) 0 18px; padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--line-soft); scroll-margin-top:78px;
  font-variation-settings:'SOFT' 0,'WONK' 1;
}
.prose > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.prose h3{
  font-family:var(--f-ui); font-weight:600; font-size:1.06rem; letter-spacing:-.005em;
  margin:38px 0 12px; color:var(--ink); scroll-margin-top:78px;
}
.prose h4{font-family:var(--f-ui); font-weight:600; font-size:.98rem; margin:28px 0 10px; color:var(--ink-2)}

.prose p{margin:0 0 20px; color:var(--ink-2)}
.prose strong{color:var(--ink); font-weight:600}
.prose em{font-style:italic}

.prose a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-line)}
.prose a:hover{color:var(--gold-2); border-bottom-color:var(--gold)}
.prose a[href^="http"]{overflow-wrap:anywhere}

.prose ul,.prose ol{margin:0 0 20px; padding-left:1.35em; color:var(--ink-2)}
.prose li{margin:0 0 10px}
.prose li > ul,.prose li > ol{margin:10px 0 0}
.prose ul{list-style:none; padding-left:1.5em}
.prose ul > li{position:relative}
.prose ul > li::before{
  content:'—'; position:absolute; left:-1.5em; top:0;
  color:var(--gold); font-family:var(--f-mono); font-size:.86em; line-height:1.9;
}
.prose ol > li::marker{color:var(--ink-4); font-family:var(--f-mono); font-size:.86em}

.prose hr{border:0; border-top:1px solid var(--line-soft); margin:clamp(38px,5vw,56px) 0}

.prose code{
  font-family:var(--f-mono); font-size:.86em; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:var(--r-s); padding:.12em .42em; overflow-wrap:anywhere;
}
.prose pre{
  font-family:var(--f-mono); font-size:13px; line-height:1.65; color:var(--ink-2);
  background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:16px clamp(14px,2vw,20px); margin:0 0 22px; overflow-x:auto;
}
.prose pre code{background:none; border:0; padding:0; font-size:inherit; color:inherit}

.prose blockquote{
  margin:0 0 22px; padding:2px 0 2px 20px;
  border-left:2px solid var(--gold-line); color:var(--ink-2);
}

/* tables (the guide's live-toggle key) */
.table-wrap{overflow-x:auto; margin:0 0 24px; -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse; width:100%; font-size:.95rem}
.prose th,.prose td{
  text-align:left; vertical-align:top; padding:11px 16px 11px 0;
  border-bottom:1px solid var(--line-soft); color:var(--ink-2);
}
.prose th{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-4); font-weight:400;
}
.prose td:first-child{white-space:nowrap; padding-right:22px}

/* the registered-company block that closes the legal documents */
.prose address.org{
  font-style:normal; font-size:.92rem; color:var(--ink-3);
  line-height:1.7; margin:26px 0 0; padding-top:22px;
  border-top:1px solid var(--line-soft);
}

/* runs of block capitals in the EULA — tracked out slightly so they stay readable */
.prose p.caps{letter-spacing:.012em; color:var(--ink)}

/* verbatim notice text (third-party notices): preserved layout, still wraps on
   narrow screens rather than forcing the page to scroll sideways */
.verbatim{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.7; color:var(--ink-2);
  background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:clamp(16px,2.4vw,24px); margin:0 0 26px;
  white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2;
}
.verbatim a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gold-line)}
.verbatim a:hover{color:var(--gold-2)}

/* callout used for the source-availability obligation */
.note{
  border:1px solid var(--gold-line); border-radius:var(--r-m);
  background:linear-gradient(180deg,var(--gold-soft),transparent);
  padding:clamp(18px,2.6vw,26px); margin:0 0 30px; max-width:var(--measure);
}
.note p:last-child{margin-bottom:0}
.note p{color:var(--ink-2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft); padding:38px 0 56px; color:var(--ink-4); font-size:.9rem; position:relative; z-index:1}
footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
footer a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{color:var(--gold); border-bottom-color:var(--gold-line)}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px}
.foot-links a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold-line)}

@media (max-width:640px){
  body{font-size:16.5px}
  .doc-head h1{max-width:100%}
  .prose td:first-child{white-space:normal}
}

/* ---------- print: these are documents people save and print ---------- */
@media print{
  :root{--ink:#111; --ink-2:#222; --ink-3:#555; --ink-4:#666; --line-soft:#ccc; --gold:#000; --gold-line:#999}
  body{background:#fff; color:#111; font-size:11pt; line-height:1.55}
  body::before{display:none}
  .bar,.toc,footer,.eyebrow::after{display:none !important}
  .wrap{max-width:none; padding:0}
  .prose,.prose-wide,.note,.toc{max-width:none}
  .prose a{color:#111; border-bottom:0; text-decoration:underline}
  .prose a[href^="http"]::after{content:' (' attr(href) ')'; font-size:8.5pt; color:#555; word-break:break-all}
  .prose h2{page-break-after:avoid; border-top:1px solid #ccc}
  .prose h3{page-break-after:avoid}
  .prose pre,.verbatim,.note{background:#fafafa; border:1px solid #ddd; color:#222}
  .prose li,.prose p{orphans:3; widows:3}
}