/* ===========================================================================
   Edge design tokens (GENERATED: do not edit)
   ---------------------------------------------------------------------------
   Written by tools/design_rules.py from assets/edge-2.css: sections 1-4 (colour
   tokens for light, dark by system preference and dark by explicit choice;
   type, space, radius and motion) and section 18 (the sticky sidebar). Link it
   before a page stylesheet that has its own component classes, then build that
   stylesheet from these tokens only. Edit edge-2.css and run
   `tools/design_rules.py tokens write`.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   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-pixel: "Edge Pixel", ui-monospace, monospace;
  --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;
}


/* ---------------------------------------------------------------------------
   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; }
}