/* ===========================================================================
   Edge site chrome: the header and the footer every page shares
   ---------------------------------------------------------------------------
   The markup lives in tools/chrome/ and is stamped into pages between
   <!-- edge:chrome:header --> and <!-- edge:chrome:footer --> markers by
   tools/stamp_chrome.py. This file styles it, and nothing else.

   The chrome lands on pages built by five different generations of tooling,
   each with its own stylesheet and its own meaning for names like nav, footer,
   .brand, --muted or --ink. So this file assumes nothing about the page:

     - Every rule is scoped under #edge-header or #edge-footer. An id outranks
       the class and element selectors the host pages use.
     - Inside the chrome, every element (except SVG, whose artwork lives in
       presentation attributes) is first reset with `all: revert`, so a host
       rule such as `nav{justify-content:space-between}` or `footer{padding}`
       cannot reach in. The component rules below then restyle it.
     - Colours are private tokens (--ch-*), light first, redefined for dark
       under prefers-color-scheme and under every explicit dark switch the
       site uses: data-theme="dark" (theme.js) and html.dark (the app pages,
       which record an explicit light choice as data-appearance="light").

   Values are edge-2.css sections 16, 17 and 19 plus the shared header block
   the docs and pricing pages carried inline, so a page that already uses
   edge-2.css renders identically with or without this file.
   ========================================================================= */

#edge-header,
#edge-footer {
  --ch-blue:          #154cff;
  --ch-blue-quiet:    #2350bf;
  --ch-ink:           #101114;
  --ch-line:          #e3e6ec;
  --ch-line-soft:     rgba(33, 62, 116, .11);
  --ch-nav-link:      #3f4a60;
  --ch-nav-hover:     #0c0f16;
  --ch-sw-track:      #f7f9fc;
  --ch-sw-knob:       #e3e6ec;
  --ch-sw-shadow:     rgba(17, 19, 24, .18);
  --ch-sw-fg:         #8a94a5;
  --ch-sw-fg-hover:   #34425a;
  --ch-sw-fg-on:      #172136;
  --ch-foot-bg:       #f4f8ff;
  --ch-sky:#dfecff;--ch-cloud:#fff;--ch-cloud-2:#e1edfd;--ch-cloud-3:#eaf3ff;
  --ch-foot-head:     #526079;
  --ch-foot-link:     #42506a;
  --ch-foot-line:     #4d5b74;
  --ch-focus:         #154cff;
  --ch-font: Inter, "Edge Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-appearance="light"]) #edge-header,
  :root:not([data-theme="light"]):not([data-appearance="light"]) #edge-footer {
    --ch-blue:        #6d91ff;
    --ch-blue-quiet:  #638bee;
    --ch-ink:         #ecedee;
    --ch-line:        #27292f;
    --ch-line-soft:   rgba(178, 200, 236, .13);
    --ch-nav-link:    #b3bac9;
    --ch-nav-hover:   #ecedf0;
    --ch-sw-track:    #151921;
    --ch-sw-knob:     #27292f;
    --ch-sw-shadow:   rgba(0, 0, 0, .38);
    --ch-sw-fg:       #767f90;
    --ch-sw-fg-hover: #cacfd7;
    --ch-sw-fg-on:    #dce0e8;
    --ch-foot-bg:     #0c1017;
  --ch-sky:#161f30;--ch-cloud:#2b3543;--ch-cloud-2:#222b38;--ch-cloud-3:#27303d;
    --ch-foot-head:   #a3afc3;
    --ch-foot-link:   #abb5c6;
    --ch-foot-line:   #a3acbd;
    --ch-focus:       #6d91ff;
  }
}

:root[data-theme="dark"] #edge-header,
:root[data-theme="dark"] #edge-footer,
:root.dark #edge-header,
:root.dark #edge-footer {
  --ch-blue:        #6d91ff;
  --ch-blue-quiet:  #638bee;
  --ch-ink:         #ecedee;
  --ch-line:        #27292f;
  --ch-line-soft:   rgba(178, 200, 236, .13);
  --ch-nav-link:    #b3bac9;
  --ch-nav-hover:   #ecedf0;
  --ch-sw-track:    #151921;
  --ch-sw-knob:     #27292f;
  --ch-sw-shadow:   rgba(0, 0, 0, .38);
  --ch-sw-fg:       #767f90;
  --ch-sw-fg-hover: #cacfd7;
  --ch-sw-fg-on:    #dce0e8;
  --ch-foot-bg:     #0c1017;
  --ch-sky:#161f30;--ch-cloud:#2b3543;--ch-cloud-2:#222b38;--ch-cloud-3:#27303d;
  --ch-foot-head:   #a3afc3;
  --ch-foot-link:   #abb5c6;
  --ch-foot-line:   #a3acbd;
  --ch-focus:       #6d91ff;
}

@font-face {
  font-family: "Edge Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/edge-inter.woff2") format("woff2");
}


/* ---- isolation from the host page ------------------------------------ */

#edge-header,
#edge-footer,
#edge-header :not(svg, svg *),
#edge-footer :not(svg, svg *) {
  all: revert;
  box-sizing: border-box;
}

#edge-header :is(a, button):focus-visible,
#edge-footer :is(a, button):focus-visible {
  outline: 2px solid var(--ch-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

#edge-header svg,
#edge-footer svg {
  display: block;
  max-width: 100%;
}


/* ---- shell ----------------------------------------------------------- */

#edge-header.edge-shell,
#edge-footer .edge-shell {
  display: block;
  width: min(1140px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 44px);
}


/* ---- header ---------------------------------------------------------- */

#edge-header.edge-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  position: relative;
  z-index: 30;
  margin-block: 0;
  background: transparent;
  font-family: var(--ch-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ch-ink);
  -webkit-font-smoothing: antialiased;
}

#edge-header .edge-brand,
#edge-footer .edge-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ch-font);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.65;
  color: var(--ch-ink);
  text-decoration: none;
  flex: 0 0 auto;
}

#edge-header .edge-brand:hover { color: var(--ch-ink); }

#edge-header .edge-brand svg,
#edge-footer .edge-brand svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

#edge-header .edge-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#edge-header .edge-nav-links > a {
  font-family: var(--ch-font);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ch-nav-link);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}

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

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

@media (max-width: 640px) {
  #edge-header.edge-nav { gap: 10px; min-height: 62px; }
  #edge-header .edge-nav-links { gap: 10px; }
  #edge-header .edge-nav-links > a { font-size: .76rem; padding: 5px 0; }
  #edge-header .edge-brand { font-size: 18px; }
}

@media (max-width: 620px) {
  #edge-header.edge-nav { flex-wrap: wrap; height: auto; row-gap: 8px; padding-block: 12px; }
  #edge-header .edge-nav-links { flex-wrap: wrap; row-gap: 6px; column-gap: 14px; justify-content: flex-start; }
  #edge-header .edge-nav-links > a { font-size: 12px; }
}


/* ---- theme control --------------------------------------------------- */
/* Two drivers share this markup: theme.js stamps data-mode on the group and
   aria-pressed on [data-theme-set] buttons; the app pages set aria-pressed on
   their own [data-theme] buttons. The knob position reads either. */

#edge-header .theme-switch {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  margin: 0;
  border-radius: 999px;
  background: var(--ch-sw-track);
  border: 1px solid var(--ch-line);
  flex: 0 0 auto;
  overflow: hidden;
}

#edge-header .theme-switch::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ch-sw-knob);
  box-shadow: 0 1px 2px var(--ch-sw-shadow);
  transform: translateX(var(--ch-knob, 27px));
  transition: transform .36s cubic-bezier(.32, 1.14, .4, 1);
}

#edge-header .theme-switch[data-mode="light"],
#edge-header .theme-switch:has(> [data-theme="light"][aria-pressed="true"]) { --ch-knob: 0px; }
#edge-header .theme-switch[data-mode="system"],
#edge-header .theme-switch:has(> [data-theme="system"][aria-pressed="true"]) { --ch-knob: 27px; }
#edge-header .theme-switch[data-mode="dark"],
#edge-header .theme-switch:has(> [data-theme="night"][aria-pressed="true"]) { --ch-knob: 54px; }

#edge-header .theme-switch button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ch-sw-fg);
  opacity: .68;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: width .18s ease, margin .18s ease, padding .18s ease, opacity .12s ease, color .15s ease;
}

#edge-header .theme-switch button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#edge-header .theme-switch button:hover { opacity: 1; color: var(--ch-sw-fg-hover); }
#edge-header .theme-switch button[aria-pressed="true"] { color: var(--ch-sw-fg-on); opacity: 1; }
#edge-header .theme-switch button[aria-pressed="true"] svg { stroke-width: 2.1; }

/* Collapsed at rest to the active mode, expanded on hover or focus. */
#edge-header .theme-switch:not(:hover):not(:focus-within) button:not([aria-pressed="true"]) {
  width: 0; min-width: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden;
}
#edge-header .theme-switch:not(:hover):not(:focus-within)::before { opacity: 0; }

@media (hover: none) {
  #edge-header .theme-switch:not(:hover):not(:focus-within) button:not([aria-pressed="true"]) {
    width: 26px !important; min-width: 26px !important; opacity: 1; pointer-events: auto;
  }
  #edge-header .theme-switch:not(:hover):not(:focus-within)::before { opacity: 1; }
}

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


}


/* ---- footer ---------------------------------------------------------- */

#edge-footer.edge-footer {
  display: block;
  position: relative;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ch-line);
  background: var(--ch-foot-bg);
  padding: 0 0 38px;
  overflow: hidden;
  font-family: var(--ch-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ch-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

#edge-footer .footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 96px;
}

#edge-footer .footer-lead { display: block; max-width: 330px; }
#edge-footer .footer-lead .edge-brand { font-size: 19px; }

#edge-footer .footer-line {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.3px;
  color: var(--ch-foot-line);
  margin: 14px 0 0;
}

#edge-footer .footer-line a {
  color: var(--ch-blue);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ch-blue) 38%, transparent);
}
#edge-footer .footer-line a:hover { text-decoration-color: var(--ch-blue); }

#edge-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
  flex: 1;
  margin: 0;
  padding: 0;
}

#edge-footer .footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 100px;
}

#edge-footer .footer-col h2 {
  display: block;
  font-family: var(--ch-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;
  color: var(--ch-foot-head);
  margin: 0 0 3px;
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
}

#edge-footer .footer-col a,
#edge-footer .footer-col button {
  font-family: var(--ch-font);
  font-size: .82rem;
  font-weight: 400;
  color: var(--ch-foot-link);
  line-height: 1.3;
  text-decoration: none;
}
#edge-footer .footer-col a:hover,
#edge-footer .footer-col button:hover { color: var(--ch-blue); }

#edge-footer .footer-col button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

/* "Privacy choices" reopens the consent bar. It only exists where a consent
   bar exists, so a page without analytics never shows a dead button. */
#edge-footer [data-action="analytics"] { display: none; }
body:has(#analytics-consent) #edge-footer [data-action="analytics"] { display: inline; }

@media (max-width: 860px) {
  #edge-footer .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 800px) {
  #edge-footer .footer-inner { flex-direction: column; gap: 32px; padding-top: 88px; }
  #edge-footer .footer-nav { justify-content: flex-start; flex: 0 1 auto; width: 100%; }
}

@media (max-width: 520px) {
  #edge-footer .footer-col { min-width: 92px; gap: 7px; }
  #edge-footer.edge-footer { padding-bottom: 32px; }
}

@media (max-width: 480px) {
  #edge-footer .footer-nav { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #edge-header *, #edge-header *::before { transition: none !important; }
}

/* The landing page's pixel sky and three-column footer. */
#edge-footer .footer-sky{display:block;position:absolute;inset:0 0 auto;height:122px;background:linear-gradient(var(--ch-sky),transparent);pointer-events:none}
#edge-footer .footer-clouds{display:block;width:100%;height:122px}
#edge-footer .footer-setup{display:inline-block;margin-top:13px;font:12px/1.65 var(--ch-font);color:var(--ch-blue-quiet);text-decoration:none;border-bottom:1px solid var(--ch-line);padding-bottom:3px}
#edge-footer .footer-col a,#edge-footer .footer-col button{font-size:13px}
@media(max-width:520px){#edge-footer .footer-inner{padding-top:78px;gap:28px}#edge-footer .footer-nav{gap:26px}#edge-footer .footer-col a,#edge-footer .footer-col button{font-size:12px}}