/* ===========================================================================
   Edge design system
   ---------------------------------------------------------------------------
   Extracted from the landing page (getedge-landing-v2/variant-c2.html), which
   is the visual authority. Every colour is declared as a token on bare :root
   first, so the complete light palette exists before any conditional block.
   Dark redefines tokens only, twice: once for the system preference and once
   for an explicit data-theme="dark".

   Pages adopt the system by linking this file, linking theme.js, and using the
   components below. There are no page-specific rules in here.

   Sections
     1.  Tokens: colour (light)
     2.  Tokens: colour (dark, system preference)
     3.  Tokens: colour (dark, explicit)
     4.  Tokens: type, space, radius, border, shadow, motion
     5.  Reset and base
     6.  Layout: shell and page frame
     7.  Typography and prose
     8.  Links
     9.  Code and pre
     10. Tables
     11. Cards and panels
     12. Buttons
     13. Chips
     14. Metadata rows, fact lists, hop lists, definition lists
     15. Notes and callouts
     16. Navigation bar and brand
     17. Theme control
     18. Sticky sidebar navigation
     19. Footer
     20. Utilities
     21. Reduced motion
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Tokens: colour (light)
   The complete palette. Nothing below this block introduces a new colour name.
   ------------------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* brand */
  --edge-blue:          #154cff;
  --edge-blue-strong:   #083adf;
  --edge-blue-quiet:    #2350bf;
  --edge-blue-tint:     #e8efff;
  --edge-blue-tint-2:   #dfe9ff;

  /* ink */
  --ink:                #101114;
  --ink-2:              #1b2434;
  --ink-3:              #3f4a60;
  --muted:              #596170;
  --muted-2:            #526079;
  --faint:              #526079;

  /* ground */
  --paper:              #ffffff;
  --soft:               #f7f9fc;
  --sky:                #ecf3ff;
  --sky-strong:         #dfe9ff;

  /* lines */
  --line:               #e3e6ec;
  --line-soft:          rgba(33, 62, 116, .11);
  --line-strong:        #cfdaea;

  /* card */
  --card-bg:            rgba(255, 255, 255, .90);
  --card-edge:          rgba(201, 215, 241, .60);
  --card-shadow:        0 10px 30px rgba(28, 58, 112, .07);
  --card-shadow-lift:   0 18px 44px rgba(28, 58, 112, .12);

  /* primary action: the black button */
  --cta-bg:             #0b0d12;
  --cta-fg:             #ffffff;
  --cta-bg-hover:       #262c39;
  --cta-ring:           rgba(11, 13, 18, .20);

  /* secondary action: the quiet blue button */
  --quiet-bg:           rgba(21, 76, 255, .06);
  --quiet-bg-hover:     rgba(21, 76, 255, .12);
  --quiet-edge:         rgba(21, 76, 255, .16);
  --quiet-fg:           #154cff;

  /* navigation */
  --nav-link:           #3f4a60;
  --nav-link-hover:     #0c0f16;

  /* theme control */
  --switch-track:       #f7f9fc;
  --switch-knob:        #e3e6ec;
  --switch-knob-shadow: rgba(17, 19, 24, .18);
  --switch-fg:          #8a94a5;
  --switch-fg-hover:    #34425a;
  --switch-fg-on:       #172136;

  /* footer */
  --footer-bg:          #f4f8ff;
  --footer-sky-top:     #dfecff;
  --footer-sky-bottom:  rgba(244, 248, 255, 0);
  --footer-head:        #526079;
  --footer-link:        #42506a;
  --footer-line:        #4d5b74;

  /* code */
  --code-bg:            #ecf3ff;
  --code-fg:            #154cff;
  --pre-bg:             #f7f9fc;
  --pre-fg:             #1b2434;

  /* sidebar */
  --side-bg:            transparent;
  --side-rail:          #e3e6ec;
  --side-link:          #596170;
  --side-link-hover:    #101114;
  --side-on:            #154cff;
  --side-on-bg:         #ecf3ff;

  /* misc */
  --selection-bg:       #d5e0ff;
  --focus-ring:         #154cff;
}


/* ---------------------------------------------------------------------------
   2. Tokens: colour (dark, system preference)
   Guarded so an explicit light choice always wins.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --edge-blue:          #6d91ff;
    --edge-blue-strong:   #7697f0;
    --edge-blue-quiet:    #638bee;
    --edge-blue-tint:     #131b2d;
    --edge-blue-tint-2:   #151e33;

    --ink:                #ecedee;
    --ink-2:              #dde0e6;
    --ink-3:              #b3bac9;
    --muted:              #9a9da4;
    --muted-2:            #a3afc3;
    --faint:              #a3afc3;

    --paper:              #161616;
    --soft:               #151921;
    --sky:                #121b2b;
    --sky-strong:         #151e33;

    --line:               #27292f;
    --line-soft:          rgba(178, 200, 236, .13);
    --line-strong:        #2a333f;

    --card-bg:            rgba(19, 23, 30, .88);
    --card-edge:          rgba(62, 73, 91, .62);
    --card-shadow:        0 10px 30px rgba(0, 0, 0, .42);
    --card-shadow-lift:   0 18px 44px rgba(0, 0, 0, .52);

    --cta-bg:             #f2f5fb;
    --cta-fg:             #090b10;
    --cta-bg-hover:       #cdd6e6;
    --cta-ring:           rgba(0, 0, 0, .55);

    --quiet-bg:           rgba(102, 142, 255, .13);
    --quiet-bg-hover:     rgba(102, 142, 255, .22);
    --quiet-edge:         rgba(120, 158, 255, .24);
    --quiet-fg:           #90acff;

    --nav-link:           #b3bac9;
    --nav-link-hover:     #ecedf0;

    --switch-track:       #151921;
    --switch-knob:        #27292f;
    --switch-knob-shadow: rgba(0, 0, 0, .38);
    --switch-fg:          #767f90;
    --switch-fg-hover:    #cacfd7;
    --switch-fg-on:       #dce0e8;

    --footer-bg:          #0c1017;
    --footer-sky-top:     #161f30;
    --footer-sky-bottom:  rgba(12, 16, 23, 0);
    --footer-head:        #a3afc3;
    --footer-link:        #abb5c6;
    --footer-line:        #a3acbd;

    --code-bg:            #121b2b;
    --code-fg:            #90acff;
    --pre-bg:             #151921;
    --pre-fg:             #dde0e6;

    --side-bg:            transparent;
    --side-rail:          #27292f;
    --side-link:          #9a9da4;
    --side-link-hover:    #ecedee;
    --side-on:            #6d91ff;
    --side-on-bg:         #121b2b;

    --selection-bg:       #18203a;
    --focus-ring:         #6d91ff;
  }
}


/* ---------------------------------------------------------------------------
   3. Tokens: colour (dark, explicit)
   The same redefinition, so the toggle wins in both directions.
   ------------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --edge-blue:          #6d91ff;
  --edge-blue-strong:   #7697f0;
  --edge-blue-quiet:    #638bee;
  --edge-blue-tint:     #131b2d;
  --edge-blue-tint-2:   #151e33;

  --ink:                #ecedee;
  --ink-2:              #dde0e6;
  --ink-3:              #b3bac9;
  --muted:              #9a9da4;
  --muted-2:            #a3afc3;
  --faint:              #a3afc3;

  --paper:              #161616;
  --soft:               #151921;
  --sky:                #121b2b;
  --sky-strong:         #151e33;

  --line:               #27292f;
  --line-soft:          rgba(178, 200, 236, .13);
  --line-strong:        #2a333f;

  --card-bg:            rgba(19, 23, 30, .88);
  --card-edge:          rgba(62, 73, 91, .62);
  --card-shadow:        0 10px 30px rgba(0, 0, 0, .42);
  --card-shadow-lift:   0 18px 44px rgba(0, 0, 0, .52);

  --cta-bg:             #f2f5fb;
  --cta-fg:             #090b10;
  --cta-bg-hover:       #cdd6e6;
  --cta-ring:           rgba(0, 0, 0, .55);

  --quiet-bg:           rgba(102, 142, 255, .13);
  --quiet-bg-hover:     rgba(102, 142, 255, .22);
  --quiet-edge:         rgba(120, 158, 255, .24);
  --quiet-fg:           #90acff;

  --nav-link:           #b3bac9;
  --nav-link-hover:     #ecedf0;

  --switch-track:       #151921;
  --switch-knob:        #27292f;
  --switch-knob-shadow: rgba(0, 0, 0, .38);
  --switch-fg:          #767f90;
  --switch-fg-hover:    #cacfd7;
  --switch-fg-on:       #dce0e8;

  --footer-bg:          #0c1017;
  --footer-sky-top:     #161f30;
  --footer-sky-bottom:  rgba(12, 16, 23, 0);
  --footer-head:        #a3afc3;
  --footer-link:        #abb5c6;
  --footer-line:        #a3acbd;

  --code-bg:            #121b2b;
  --code-fg:            #90acff;
  --pre-bg:             #151921;
  --pre-fg:             #dde0e6;

  --side-bg:            transparent;
  --side-rail:          #27292f;
  --side-link:          #9a9da4;
  --side-link-hover:    #ecedee;
  --side-on:            #6d91ff;
  --side-on-bg:         #121b2b;

  --selection-bg:       #18203a;
  --focus-ring:         #6d91ff;
}


/* ---------------------------------------------------------------------------
   4. Tokens: type, space, radius, border, shadow, motion
   Not colour, so these live once on :root and never change per theme.
   ------------------------------------------------------------------------ */
:root {
  /* typefaces, with real fallback stacks */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;
  --font-hand: Caveat, "Segoe Script", "Bradley Hand", "Chalkboard SE", cursive;

  /* type scale */
  --t-3xs:     .68rem;   /* 10.9px, chip and micro metadata */
  --t-2xs:     .76rem;   /* 12.2px */
  --t-xs:      .82rem;   /* 13.1px */
  --t-sm:      .88rem;   /* 14.1px */
  --t-base:    1rem;     /* 16px, body */
  --t-lede:    1.06rem;
  --t-h3:      1rem;
  --t-h2:      1.16rem;
  --t-h1:      clamp(1.85rem, 4.6vw, 2.5rem);
  --t-display: clamp(2.3rem, 6vw, 4.1rem);

  /* leading and tracking */
  --lh-tight:   1.12;
  --lh-snug:    1.35;
  --lh-body:    1.65;
  --lh-code:    1.55;
  --tr-display: -.05em;
  --tr-h1:      -.03em;
  --tr-h2:      -.015em;
  --tr-brand:   -.04em;

  /* weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-brand:   650;
  --w-bold:    700;

  /* spacing rhythm */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  10px;
  --sp-4:  14px;
  --sp-5:  18px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  44px;
  --sp-9:  60px;
  --sp-10: 88px;

  /* radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   15px;
  --r-xl:   19px;
  --r-pill: 999px;

  /* borders */
  --bw:      1px;
  --bw-rule: 1.5px;

  /* measure and frame */
  --measure:     760px;
  --shell-max:   1140px;
  --shell-gutter: clamp(16px, 5vw, 44px);
  --side-w:      236px;

  /* motion */
  --ease:      cubic-bezier(.32, 1.14, .4, 1);
  --dur-fast:  .16s;
  --dur-base:  .22s;
  --dur-slow:  .36s;
}


/* ---------------------------------------------------------------------------
   5. Reset and base
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
svg { display: block; }

[hidden] { display: none !important; }

::selection { background: var(--selection-bg); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { -webkit-tap-highlight-color: transparent; }

:where(a, button, [tabindex], summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  border-top: var(--bw) solid var(--line);
  margin: var(--sp-8) 0;
}


/* ---------------------------------------------------------------------------
   6. Layout: shell and page frame
   .edge-shell is the wide frame the nav and footer sit in.
   .edge-prose is the reading measure.
   ------------------------------------------------------------------------ */
.edge-shell {
  width: min(var(--shell-max), 100%);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
}

.edge-prose {
  width: min(var(--measure), 100%);
  margin-inline: auto;
}

.edge-main {
  display: block;
  padding-block: var(--sp-8) var(--sp-10);
}


/* ---------------------------------------------------------------------------
   7. Typography and prose
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }

h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-brand);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-snug);
  margin: var(--sp-8) 0 var(--sp-3);
  scroll-margin-top: var(--sp-8);
}

h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-brand);
  line-height: var(--lh-snug);
  margin: var(--sp-6) 0 var(--sp-2);
  scroll-margin-top: var(--sp-8);
}

p { margin: 0 0 var(--sp-4); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 20px; }
li { margin-bottom: var(--sp-2); }

ol.flow { padding-left: 20px; }
ol.flow > li { margin-bottom: var(--sp-4); }

strong, b { font-weight: var(--w-semi); }
em { font-style: italic; }

.lede {
  color: var(--muted);
  font-size: var(--t-lede);
  line-height: 1.55;
  margin: 0 0 var(--sp-7);
  text-wrap: pretty;
}

.cap {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: calc(var(--sp-2) * -1) 0 var(--sp-6);
}

.display {
  font-size: var(--t-display);
  font-weight: var(--w-brand);
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  margin: 0;
}

.hand {
  font-family: var(--font-hand);
  font-weight: var(--w-medium);
  letter-spacing: .4px;
}


/* ---------------------------------------------------------------------------
   8. Links
   ------------------------------------------------------------------------ */
a { color: var(--edge-blue); }

.edge-prose a,
p a, li a, dd a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--edge-blue) 38%, transparent);
  transition: text-decoration-color var(--dur-fast);
}

.edge-prose a:hover,
p a:hover, li a:hover, dd a:hover { text-decoration-color: var(--edge-blue); }

a.plain { color: inherit; text-decoration: none; }


/* ---------------------------------------------------------------------------
   9. Code and pre
   ------------------------------------------------------------------------ */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-code);
  color: var(--pre-fg);
  background: var(--pre-bg);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin: 0 0 var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

p code, li code, dd code, dt code,
.facts code, .split code, .hops code, td code, th code {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

.code-line {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  overflow-x: auto;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   10. Tables
   Wrap a table in .table-scroll so narrow screens scroll the table, not the page.
   ------------------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--sp-5);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.table-scroll > table { border: 0; }

th, td {
  text-align: left;
  padding: 11px 15px;
  border-top: var(--bw) solid var(--line);
  vertical-align: top;
}

thead th {
  border-top: 0;
  font-weight: var(--w-semi);
  color: var(--ink-2);
  background: var(--soft);
  white-space: nowrap;
}

tbody tr:first-child td { border-top: var(--bw) solid var(--line); }
td { color: var(--muted); }
td:first-child { color: var(--ink); }


/* ---------------------------------------------------------------------------
   11. Cards and panels
   The landing's card: a near-white ground, a hairline edge, a diffuse shadow,
   a generous radius. No hard border, no heavy stroke.
   ------------------------------------------------------------------------ */
.edge-card {
  background: var(--card-bg);
  border: var(--bw) solid var(--card-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  padding: var(--sp-5) var(--sp-6);
}

.edge-card--lift { box-shadow: var(--card-shadow-lift); border-radius: var(--r-xl); }
.edge-card--flat { box-shadow: none; background: var(--soft); border-color: var(--line); }
.edge-card > :last-child { margin-bottom: 0; }

/* a soft panel: the quiet variant used for asides and the setup block */
.edge-panel {
  background: var(--soft);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 0 0 var(--sp-5);
}

.edge-panel > :last-child { margin-bottom: 0; }

.edge-panel .lbl {
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

/* the setup block: one label, one long command, an optional action beside it */
.setup-block { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-2); }
.setup-block .lbl { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.setup-block .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.setup-block > .code-line { width: 100%; }           /* on its own line */
.setup-block .row > .code-line { flex: 1 1 300px; min-width: 0; }  /* beside an action */
.setup-block .row > .edge-btn { flex: 0 0 auto; min-width: 132px; }

/* two or more panels side by side, stacking when narrow */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}

.split > section {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--soft);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}

.split h3 { margin: 0 0 var(--sp-2); }
.split > section > :last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   12. Buttons
   Two treatments carried from the landing page: a black primary and a quiet
   blue-tinted secondary. Both are token-driven and invert cleanly in dark.
   ------------------------------------------------------------------------ */
.edge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: -.1px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast),
              transform var(--dur-fast), border-color var(--dur-fast);
}

.edge-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* primary: the black button */
.edge-btn--primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: 0 6px 16px var(--cta-ring);
}
.edge-btn--primary:hover { background: var(--cta-bg-hover); color: var(--cta-fg); transform: translateY(-1px); }
.edge-btn--primary:active { transform: none; }

/* secondary: the quiet blue button */
.edge-btn--quiet {
  background: var(--quiet-bg);
  color: var(--quiet-fg);
  border: var(--bw) solid var(--quiet-edge);
  font-weight: var(--w-medium);
}
.edge-btn--quiet:hover { background: var(--quiet-bg-hover); color: var(--quiet-fg); }

/* tertiary: a hairline button that carries no fill */
.edge-btn--ghost {
  background: transparent;
  color: var(--ink-3);
  border: var(--bw) solid var(--line);
  font-weight: var(--w-medium);
}
.edge-btn--ghost:hover { color: var(--ink); border-color: var(--line-strong); }

.edge-btn--sm { min-height: 36px; padding: 0 13px; font-size: var(--t-2xs); border-radius: var(--r-sm); }

/* a button that swaps its label in place, with no size jump */
.edge-btn[data-swap] { display: grid; place-items: center; }
.edge-btn[data-swap] > .btn-state {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: opacity var(--dur-base) ease;
}
.edge-btn[data-swap] > .btn-done { opacity: 0; visibility: hidden; }
.edge-btn[data-swap].is-done > .btn-idle { opacity: 0; visibility: hidden; }
.edge-btn[data-swap].is-done > .btn-done { opacity: 1; visibility: visible; }
.edge-btn[data-swap].is-done { cursor: default; }


/* ---------------------------------------------------------------------------
   13. Chips
   Metadata, not marketing. A hairline, a tiny label, an optional small icon.
   Never a mono all-caps micro-label.
   ------------------------------------------------------------------------ */
.edge-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.edge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: var(--bw) solid var(--line-soft);
  border-radius: 7px;
  background: transparent;
  color: var(--muted-2);
  font-size: var(--t-3xs);
  font-weight: var(--w-regular);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}

.edge-chip svg { width: 11px; height: 11px; opacity: .85; flex: 0 0 auto; }

.edge-chip--on {
  background: var(--sky);
  border-color: transparent;
  color: var(--edge-blue);
  font-weight: var(--w-semi);
}

.edge-chip--link:hover { border-color: var(--edge-blue); color: var(--edge-blue); }


/* ---------------------------------------------------------------------------
   14. Metadata rows, fact lists, hop lists, definition lists
   ------------------------------------------------------------------------ */
.edge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--muted);
}

/* a key/value list that reads as one object */
.facts {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  margin: 0 0 var(--sp-5);
  overflow: hidden;
}

.facts .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  padding: 11px 15px;
  border-top: var(--bw) solid var(--line);
}

.facts .row:first-child { border-top: 0; }
.facts .k { flex: 1 1 210px; min-width: 0; font-size: var(--t-sm); }
.facts .v { flex: 1 1 260px; min-width: 0; color: var(--muted); font-size: var(--t-sm); }

/* modifiers, so a page picks a shape rather than restating the component */
.facts--mono-v .v { font-family: var(--font-mono); font-size: var(--t-xs); align-self: center; }
.facts--mono-k .k { font-family: var(--font-mono); font-size: var(--t-xs); overflow-wrap: anywhere; }
.facts--tight .v { flex: 0 1 auto; }

/* a sequence of stops, each with a name and what happens there */
.hops {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.hops li { margin: 0; padding: 14px 16px; border-top: var(--bw) solid var(--line); }
.hops li:first-child { border-top: 0; }
.hops .who { display: block; font-weight: var(--w-semi); margin-bottom: 2px; }
.hops .what { color: var(--muted); font-size: var(--t-sm); }

/* term and gloss */
dl { margin: 0 0 var(--sp-5); }
dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink);
  margin-top: var(--sp-5);
  overflow-wrap: anywhere;
}
dd { margin: var(--sp-1) 0 0; color: var(--muted); }


/* ---------------------------------------------------------------------------
   15. Notes and callouts
   ------------------------------------------------------------------------ */
.note {
  border-left: 3px solid var(--edge-blue);
  background: var(--soft);
  padding: 12px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 0 0 var(--sp-5);
}

.note > :last-child { margin-bottom: 0; }
.hint { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--sp-8); }


/* ---------------------------------------------------------------------------
   16. Navigation bar and brand
   ------------------------------------------------------------------------ */
.edge-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 72px;
  position: relative;
  z-index: 8;
}

.edge-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 20px;
  font-weight: var(--w-brand);
  letter-spacing: var(--tr-brand);
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}

.edge-brand svg { width: 28px; height: 28px; flex: 0 0 auto; }
.edge-brand:hover { color: var(--ink); }

.edge-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}

.edge-nav-links > a {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--nav-link);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: var(--bw-rule) solid transparent;
  white-space: nowrap;
}

.edge-nav-links > a:hover {
  color: var(--nav-link-hover);
  border-bottom-color: var(--nav-link-hover);
}

.edge-nav-links > a[aria-current="page"] {
  color: var(--nav-link-hover);
  border-bottom-color: var(--edge-blue);
}

@media (max-width: 640px) {
  .edge-nav { gap: var(--sp-3); min-height: 62px; }
  .edge-nav-links { gap: var(--sp-3); }
  .edge-nav-links > a { font-size: var(--t-2xs); padding: 5px 0; }
  .edge-brand { font-size: 18px; }
  .edge-brand svg { width: 24px; height: 24px; }
}


/* ---------------------------------------------------------------------------
   17. Theme control
   Three states, one indicator that travels between them. The knob is driven by
   data-mode on the group, which theme.js stamps.
   ------------------------------------------------------------------------ */
.theme-switch {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--switch-track);
  border: var(--bw) solid var(--line);
  flex: 0 0 auto;
}

.theme-switch::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--switch-knob);
  box-shadow: 0 1px 2px var(--switch-knob-shadow);
  transform: translateX(var(--theme-knob, 27px));
  transition: transform var(--dur-slow) var(--ease);
}

.theme-switch[data-mode="light"]  { --theme-knob: 0px; }
.theme-switch[data-mode="system"] { --theme-knob: 27px; }
.theme-switch[data-mode="dark"]   { --theme-knob: 54px; }

.theme-switch button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--r-pill);
  color: var(--switch-fg);
  opacity: .68;
  transition: color var(--dur-base) ease, opacity var(--dur-base) ease;
}

.theme-switch button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width var(--dur-base) ease, transform var(--dur-slow) var(--ease);
}

.theme-switch button:hover { opacity: 1; color: var(--switch-fg-hover); }
.theme-switch button[aria-pressed="true"] { color: var(--switch-fg-on); opacity: 1; }
.theme-switch button[aria-pressed="true"] svg { stroke-width: 2.1; transform: scale(1.06); }

/* narrow: one button that cycles the three states */
@media (max-width: 560px) {
  .theme-switch { padding: 0; border: 0; background: none; }
  .theme-switch::before { display: none; }
  .theme-switch button { width: 28px; height: 28px; }
  .theme-switch button svg { width: 15px; height: 15px; }
  .theme-switch button[aria-pressed="false"] { display: none; }
  .theme-switch button[aria-pressed="true"] { color: var(--switch-fg-hover); }
}


/* ---------------------------------------------------------------------------
   18. Sticky sidebar navigation
   A two-column frame: a sticky rail of links on the left, content on the right.
   Below 960px the rail stops being sticky and becomes a compact disclosure at
   the top of the page, so it never eats the viewport on a phone.
   ------------------------------------------------------------------------ */
.docs-layout {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-block: var(--sp-7) var(--sp-10);
}

.docs-side {
  position: sticky;
  top: var(--sp-6);
  max-height: calc(100vh - var(--sp-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--side-bg);
  min-width: 0;
}

.docs-side > summary { display: none; }

.side-group + .side-group { margin-top: var(--sp-6); }

.side-title {
  font-size: var(--t-2xs);
  font-weight: var(--w-semi);
  color: var(--footer-head);
  letter-spacing: 0;
  margin: 0 0 var(--sp-3);
  padding-left: 11px;
}

.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin: 0; }

.side-list a {
  display: block;
  padding: 6px 11px;
  border-left: 2px solid var(--side-rail);
  color: var(--side-link);
  font-size: var(--t-xs);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.side-list a:hover { color: var(--side-link-hover); border-left-color: var(--muted); }

/* the page you are on: a blue rail and blue text, no fill */
.side-list a[aria-current] {
  color: var(--side-on);
  border-left-color: var(--side-on);
  font-weight: var(--w-medium);
}

/* the section you are in: the same marker plus a quiet fill, so the two
   markers read as parent and child rather than as one heavy block */
.side-sections a[aria-current] {
  background: var(--side-on-bg);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* the in-page section list, one level in */
.side-sections { margin-top: 2px; }
.side-sections a { padding-left: 20px; font-size: var(--t-2xs); }
.side-sections .lvl-3 a { padding-left: 30px; color: var(--faint); }
.side-sections .lvl-3 a:hover { color: var(--side-link-hover); }

.side-out {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-5);
  margin-left: 11px;
  font-size: var(--t-2xs);
  color: var(--muted);
  text-decoration: none;
}
.side-out:hover { color: var(--edge-blue); }

@media (max-width: 960px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding-block: var(--sp-6) var(--sp-9);
  }

  .docs-side {
    position: static;
    max-height: none;
    overflow: visible;
    border: var(--bw) solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
    padding: 0;
  }

  .docs-side > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 12px 15px;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }

  .docs-side > summary::-webkit-details-marker { display: none; }

  .docs-side > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur-base) ease;
    flex: 0 0 auto;
  }

  .docs-side[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }

  .side-inner { padding: 0 15px 15px; }
  .side-title { padding-left: 9px; }
  .side-out { margin-left: 9px; }
}


/* ---------------------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------------------ */
.edge-footer {
  position: relative;
  border-top: var(--bw) solid var(--line);
  background: var(--footer-bg);
  padding: 0 0 var(--sp-8);
  overflow: hidden;
}

/* edge: flat footer */
.edge-footer::before{display:none}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-8);
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--sp-9);
}

.footer-lead { max-width: 330px; }
.footer-lead .edge-brand { font-size: 19px; }
.footer-lead .edge-brand svg { width: 26px; height: 26px; }

.footer-line {
  font-size: var(--t-sm);
  line-height: 1.45;
  letter-spacing: -.3px;
  color: var(--footer-line);
  margin: var(--sp-4) 0 0;
}

.footer-setup {
  display: inline-block;
  margin-top: 13px;
  font-size: var(--t-2xs);
  color: var(--edge-blue-quiet);
  border-bottom: var(--bw) solid var(--line-soft);
  padding-bottom: 3px;
  text-decoration: none;
}
.footer-setup:hover { border-color: var(--edge-blue); color: var(--edge-blue); }

.footer-nav {
  display: flex;
  gap: clamp(26px, 5vw, 68px);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 100px; }

.footer-col h2 {
  font-size: var(--t-2xs);
  font-weight: var(--w-semi);
  color: var(--footer-head);
  margin: 0 0 3px;
  letter-spacing: 0;
}

.footer-col a { font-size: var(--t-xs); color: var(--footer-link); line-height: 1.3; text-decoration: none; }
.footer-col a:hover { color: var(--edge-blue); }

@media (max-width: 800px) {
  .footer-inner { flex-direction: column; gap: var(--sp-7); padding-top: var(--sp-8); }
  .footer-nav { gap: var(--sp-7); justify-content: flex-start; flex: 0 1 auto; }
}

@media (max-width: 520px) {
  .footer-nav { gap: var(--sp-6); }
  .footer-col { min-width: 92px; gap: 7px; }
  .edge-footer { padding-bottom: var(--sp-7); }
}


/* ---------------------------------------------------------------------------
   20. Utilities
   ------------------------------------------------------------------------ */
.muted   { color: var(--muted); }
.mono    { font-family: var(--font-mono); }
.nowrap  { white-space: nowrap; }
.stack-0 > :last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ---------------------------------------------------------------------------
   21. Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  html { scroll-behavior: auto !important; }
  .edge-btn--primary:hover { transform: none; }
}