/* ============================================================
   Bristlenose website v2 — merged design system
   Reuses bristlenose/theme/ tokens (Inter, neutral palette) AND the
   existing style.css token values (#1a1a1a / #2563eb / #e5e5e5) so the
   frozen v1 index and the new docs share one look. Two layouts:
   .plain (index/support/privacy) and .docs (sidebar + content).
   ============================================================ */
:root{
  color-scheme:light dark;   /* follow the OS; light-dark() resolves per scheme */
  --ink:light-dark(#1a1a1a,#e6e7e9); --muted:light-dark(#6b7280,#9ca3af); --faint:light-dark(#9aa3ad,#6b7280);
  --line:light-dark(#e5e7eb,#2a2a2c); --bg:light-dark(#ffffff,#121214); --bg-alt:light-dark(#f8f8f8,#1a1a1d);
  --accent:light-dark(#2563eb,#6ba2f5); --badge-bg:light-dark(#f3f4f6,#26262a); --badge-text:light-dark(#374151,#cfd3da);
  --code-bg:light-dark(#f3f4f6,#1c1c20); --warn:light-dark(#c2410c,#fb923c); --ok:light-dark(#3a8a55,#5fb87e); --tip:light-dark(#7a6a1f,#cdb45e);
  --soft:light-dark(#fcfcfd,#181a1d);   /* subtle raised surface (callouts, card hover) */
  --font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w-normal:420; --w-emph:490; --w-strong:700; --r:6px;
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;font-family:var(--font);font-weight:var(--w-normal);color:var(--ink);
     background:var(--bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.125em}
[data-icon] svg{width:1em;height:1em;display:block}

/* ---- topbar (shared across every page) ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
        height:54px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--bg)}
.topbar .brand{font-weight:var(--w-strong);letter-spacing:-.01em;text-decoration:none;font-size:16px}
.topbar .brand .dot{color:var(--accent)}
.topbar nav{display:flex;gap:18px;margin-left:6px}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:14px}
.topbar nav a:hover,.topbar nav a.active{color:var(--ink)}
.topbar .spacer{flex:1}
.topbar .search{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:13px;
     border:1px solid var(--line);border-radius:var(--r);padding:5px 11px;min-width:130px;cursor:text}
.topbar .menubtn{display:none;background:none;border:0;color:var(--ink);font-size:20px;cursor:pointer;padding:4px}

/* ---- footer (shared) ---- */
.foot{border-top:1px solid var(--line);margin-top:50px;padding:26px 22px;color:var(--faint);font-size:13px}
.foot .links{display:flex;flex-wrap:wrap;gap:16px;margin:0 auto 10px;max-width:1180px}
.foot .links a{color:var(--muted);text-decoration:none} .foot .links a:hover{color:var(--ink)}
.foot .note{max-width:1180px;margin:0 auto;font-size:12px} .foot .note a{color:var(--faint)}

/* ---- layouts ---- */
.plain{max-width:720px;margin:0 auto;padding:34px 22px 0}
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);max-width:1180px;margin:0 auto}
.sidebar{border-right:1px solid var(--line);padding:24px 14px 60px;
         height:calc(100vh - 54px);position:sticky;top:54px;overflow:auto}
.shell main{min-width:0;padding:30px 40px 0}
.page-inner{max-width:760px;margin:0 auto}

/* ---- sidebar nav ---- */
.navgroup{margin:0 0 20px}
.navgroup h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
             font-weight:var(--w-emph);margin:0 0 7px;padding:0 10px;display:flex;align-items:center;gap:7px}
.navlink{display:block;text-decoration:none;color:var(--muted);font-size:14px;padding:5px 10px;
         border-radius:var(--r);line-height:1.3}
.navlink:hover{color:var(--ink);background:var(--badge-bg)}
.navlink.active{color:var(--ink);font-weight:var(--w-emph);background:var(--badge-bg)}
.navlink.soon{color:var(--faint);cursor:default} .navlink.soon:hover{background:none}
.navlink.soon::after{content:" soon";font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}

/* ---- page chrome ---- */
.typebadge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--badge-text);
     background:var(--badge-bg);border-radius:999px;padding:3px 10px;margin:0 0 10px;font-weight:var(--w-emph)}
h1{font-size:30px;letter-spacing:-.02em;font-weight:var(--w-strong);margin:0 0 10px;line-height:1.15}
.lead{font-size:17px;color:var(--muted);margin:0 0 26px;line-height:1.5}
h2{font-size:20px;letter-spacing:-.01em;font-weight:var(--w-strong);margin:34px 0 10px}
h3{font-size:15.5px;font-weight:var(--w-strong);margin:22px 0 6px}
p{margin:0 0 14px} .prose ul,.prose ol,main ul,main ol{margin:0 0 14px;padding-left:22px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose a.ext [data-icon]{font-size:.70em;color:var(--faint);margin-left:3px}
.prose a.ext:hover [data-icon]{color:var(--accent)}
.prose li,main li{margin:6px 0} .muted{color:var(--muted)}

/* ---- code ---- */
code{font-family:var(--mono);font-size:.86em;background:var(--code-bg);border-radius:4px;padding:1.5px 5px}
.code,pre{position:relative;margin:0 0 16px}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r);
    padding:13px 15px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.55}
pre code{background:none;padding:0;font-size:13px}
.copybtn{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;
     font:inherit;font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);
     border-radius:5px;padding:3px 8px;cursor:pointer}
.copybtn:hover{color:var(--ink)} .copybtn.done{color:var(--ok);border-color:var(--ok)}

/* ---- callouts ---- */
.callout{display:flex;gap:11px;border:1px solid var(--line);border-left:3px solid var(--muted);
     border-radius:var(--r);padding:12px 14px;margin:0 0 18px;font-size:14px;background:var(--soft)}
.callout .ci{flex:0 0 auto;margin-top:1px} .callout p{margin:0} .callout p+p{margin-top:6px}
.callout.info{border-left-color:var(--accent)} .callout.info .ci{color:var(--accent)}
.callout.warn{border-left-color:var(--warn)} .callout.warn .ci{color:var(--warn)}
.callout.tip{border-left-color:var(--tip)}  .callout.tip .ci{color:var(--tip)}

/* ---- channel fork ---- */
.fork{margin:18px 0;border-top:1px solid var(--line)}
details.ch{border-bottom:1px solid var(--line)}
details.ch>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
     padding:10px 2px;font-size:13px;color:var(--muted);user-select:none}
details.ch>summary:hover{color:var(--ink)}
details.ch>summary::-webkit-details-marker{display:none}
details.ch>summary .chev{color:var(--faint);transition:transform .12s;font-size:15px}
details.ch[open]>summary .chev{transform:rotate(90deg)}
details.ch .body{padding:0 0 6px 22px}
.sharedline{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:0 0 16px}
.sharedline .tick{color:var(--ok)}

/* ---- tables ---- */
table{border-collapse:collapse;width:100%;font-size:13.5px;margin:0 0 18px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:var(--w-emph);color:var(--badge-text);font-size:12px} td code{font-size:12px}

/* ---- front-page cards ---- */
.shell .hero{margin:6px 0 30px} .shell .hero h1{font-size:34px} .shell .hero .lead{max-width:560px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 30px}
.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;
     padding:16px 17px;transition:border-color .12s,background .12s}
.card:hover{border-color:light-dark(#cfd4da,#3a3a3e);background:var(--soft)}
.card .ch{display:flex;align-items:center;gap:9px;font-weight:var(--w-strong);font-size:15px;margin:0 0 5px}
.card .ch [data-icon]{color:var(--accent);font-size:18px}
.card p{margin:0;color:var(--muted);font-size:13.5px}
.popular h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 0 8px}
.popular a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px;
     padding:7px 0;border-bottom:1px solid var(--line)}
.popular a [data-icon]{color:var(--faint);font-size:15px} .popular a:hover [data-icon]{color:var(--accent)}

/* ---- prev/next ---- */
.prevnext{display:flex;justify-content:space-between;gap:14px;margin:36px 0 0;border-top:1px solid var(--line);padding-top:18px}
.pn{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-size:14px}
.pn:hover{color:var(--ink)} .pn small{display:block;color:var(--faint);font-size:11px} .pn.next{margin-left:auto;text-align:right}

/* ---- responsive ---- */
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:54px;width:260px;background:var(--bg);z-index:15;
           transform:translateX(-100%);transition:transform .18s}
  .sidebar.open{transform:none;box-shadow:0 10px 40px rgba(0,0,0,.12)}
  .topbar .menubtn{display:inline-flex} .topbar nav{display:none}
  .cards{grid-template-columns:1fr} .shell main{padding:24px 20px 0}
}