/* ============================================================
   inflow — shared foundation for every page on the site.
   Palette is derived from the extension's own theme tokens
   (entrypoints/app/global.css) so the site and the product
   read as one thing. Page-specific rules stay on their page.
   ============================================================ */

:root{
  /* light — the default */
  --ground:#fbfbfc;
  --band:#f2f3f6;
  --panel:#ffffff;
  --ink:#0b0d12;
  --ink-2:#565c66;
  --ink-3:#8b919c;
  --line:#e3e5ea;
  --line-soft:#eceef2;
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --ok:#1a7f37;
  --mark:#0a66c2;
  --star:#eab308;
  --bubble-in:#f1f2f5;
  --bubble-out:#2563eb;
  --bubble-out-ink:#ffffff;
  --sel:#dbeafe;
  --shadow:0 1px 2px rgba(11,13,18,.04),0 12px 24px -8px rgba(11,13,18,.10),0 48px 80px -32px rgba(11,13,18,.18);
  --shadow-sm:0 1px 2px rgba(11,13,18,.05),0 6px 16px -8px rgba(11,13,18,.12);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"JetBrains Mono","Roboto Mono",monospace;

  --wrap:1180px;
  --prose:38rem;
  --pad:clamp(20px,5vw,40px);
  --chapter:clamp(88px,13vw,180px);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#08090b;
    --band:#0e0f13;
    --panel:#121317;
    --ink:#f5f6f8;
    --ink-2:#a2a8b3;
    --ink-3:#6c727c;
    --line:#24262c;
    --line-soft:#1a1c21;
    --accent:#3b82f6;
    --accent-hover:#60a5fa;
    --ok:#3fb950;
    --mark:#58a6ff;
    --star:#facc15;
    --bubble-in:#1c1e23;
    --bubble-out:#2563eb;
    --bubble-out-ink:#ffffff;
    --sel:rgba(37,99,235,.22);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 32px -12px rgba(0,0,0,.6),0 56px 90px -40px rgba(0,0,0,.8);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 20px -10px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
  --ground:#08090b;
  --band:#0e0f13;
  --panel:#121317;
  --ink:#f5f6f8;
  --ink-2:#a2a8b3;
  --ink-3:#6c727c;
  --line:#24262c;
  --line-soft:#1a1c21;
  --accent:#3b82f6;
  --accent-hover:#60a5fa;
  --ok:#3fb950;
  --mark:#58a6ff;
  --star:#facc15;
  --bubble-in:#1c1e23;
  --bubble-out:#2563eb;
  --bubble-out-ink:#ffffff;
  --sel:rgba(37,99,235,.22);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 32px -12px rgba(0,0,0,.6),0 56px 90px -40px rgba(0,0,0,.8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 20px -10px rgba(0,0,0,.6);
}

*{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(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.prose{max-width:var(--prose)}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
.display{
  font-size:clamp(2.3rem,5.5vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.042em;
}
.h2{
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  line-height:1.04;
  letter-spacing:-.038em;
}
.h3{
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.25;
  letter-spacing:-.022em;
}
.lede{
  font-size:clamp(1.06rem,1.55vw,1.4rem);
  line-height:1.45;
  letter-spacing:-.017em;
  color:var(--ink-2);
  margin:0;
}
.body{color:var(--ink-2);margin:0;font-size:1.0625rem;line-height:1.6}
/* Section labels are structure, so they keep the tracked uppercase; the face is
   the body sans and the color clears 4.5:1 on both grounds. Monospace is
   reserved for text that is literally machine text — keys, tokens, hosts, code. */
.eyebrow{
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0;
}
.mark{font-weight:600;letter-spacing:-.03em}
.mark i{font-style:normal;color:var(--mark)}
code.inline{
  font-family:var(--mono);font-size:.8125em;background:var(--band);
  border-radius:5px;padding:2px 5px;color:var(--ink);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:62px}
.nav .mark{font-size:1.1875rem;margin-right:auto;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:26px}
/* :not(.btn) so the nav's Add to Chrome keeps the button's own color — a bare
   `.nav-links a` outranks `.btn-primary` and would paint its label grey. */
.nav-links a:not(.btn){
  font-size:.9375rem;color:var(--ink-2);text-decoration:none;
  letter-spacing:-.008em;transition:color .2s ease;
}
.nav-links a:not(.btn):hover{color:var(--ink)}
/* The optional links drop before the nav would wrap. With four of them
   (Changelog joined the set) the header runs out of room at ~720px, not
   the 560px that fit three. */
@media (max-width:720px){.nav-links .opt{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.012em;
  text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s ease;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-sm{height:36px;padding:0 16px;font-size:.875rem}
.btn-ico{width:18px;height:18px;flex:none;display:block}
.btn-sm .btn-ico{width:16px;height:16px}

/* ---------- chapters ---------- */
/* Clears the 62px sticky nav so a jumped-to heading isn't tucked under it. */
.sec{padding-block:var(--chapter);scroll-margin-top:78px}
.sec-band{background:var(--band)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:44rem}
.sec-head .eyebrow{margin-bottom:-6px}

/* ---------- host manifest (landing + privacy) ---------- */
.manifest{
  border-top:1px solid var(--line);
  margin-top:clamp(36px,5vw,56px);
}
.hostrow{
  display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr) minmax(0,1fr);
  gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.hostrow .host{font-family:var(--mono);font-size:.8125rem;color:var(--ink);overflow-wrap:anywhere}
.hostrow .why{font-size:.875rem;color:var(--ink-2)}
.hostrow .what{font-size:.8125rem;color:var(--ink-3)}
.hostrow.head{padding-block:10px}
.hostrow.head > *{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:760px){
  .hostrow{grid-template-columns:1fr;gap:6px}
  .hostrow.head{display:none}
}

/* ---------- document pages (changelog, privacy) ---------- */
.doc-head{
  padding-block:clamp(52px,8vw,92px) clamp(30px,4vw,48px);
  display:flex;flex-direction:column;gap:16px;max-width:44rem;
}
.doc-head .display{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.doc{padding-bottom:clamp(72px,10vw,128px)}
.doc-prose{max-width:40rem;display:flex;flex-direction:column;gap:26px}
.doc-prose h2{
  font-size:1.375rem;letter-spacing:-.026em;line-height:1.25;
  margin-top:clamp(20px,3vw,32px);
}
.doc-prose p{margin:0;color:var(--ink-2);line-height:1.62}
.doc-prose ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:9px}
.doc-prose li{color:var(--ink-2);line-height:1.55}
.doc-prose strong{color:var(--ink);font-weight:600}
.doc-prose a{color:var(--accent);text-decoration:none}
.doc-prose a:hover{text-decoration:underline}
.doc-note{
  border-left:2px solid var(--accent);padding:2px 0 2px 18px;
  color:var(--ink-2);line-height:1.6;
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:44px 56px;background:var(--ground)}
.foot-top{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;margin-bottom:28px}
.foot-top .mark{font-size:1rem}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.foot-links a{font-size:.8125rem;color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.fine{font-size:.75rem;line-height:1.65;color:var(--ink-3);max-width:52rem;margin:0}
.fine + .fine{margin-top:12px}
.fine a{color:var(--ink-3)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.06s}
.rise.d2{transition-delay:.12s}
.rise.d3{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}