/* Shared by exiledata.dev and docs.exiledata.dev (the docs build copies this file). Fonts load
   from exiledata.dev on both sites, so the docs reuse the copy cached on the landing page; the
   second src is the site's own copy, used if that request fails. */
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    url("https://exiledata.dev/assets/fonts/geist-latin-wght-normal.woff2")
      format("woff2-variations"),
    url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src:
    url("https://exiledata.dev/assets/fonts/geist-mono-latin-wght-normal.woff2")
      format("woff2-variations"),
    url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
}

/* Themes. With no data-theme attribute the page follows the OS ("System"); the switch sets
   data-theme="light" or "dark". Each color is light-dark(light, dark). The light theme is its own
   design rather than the dark palette flipped: surfaces are white and sit above a tinted page,
   lifted by a soft shadow, the same "raised is lighter" rule the dark theme follows. */
:root {
  color-scheme: light dark;

  /* Page, raised surfaces (cards, code, footer, inputs), controls and inline code. */
  --bg-0: light-dark(#f6f6f4, #0b0b0c);
  --bg-1: light-dark(#ffffff, #101012);
  --bg-2: light-dark(#efefec, #151518);
  --bg-3: light-dark(#e7e7e3, #1b1b1f);
  --bg-hover: light-dark(#e9e9e5, #202025);
  --bg-active: light-dark(#dfdfda, #26262c);

  /* Bars sitting on a surface: code block and frame title bars. */
  --chrome: light-dark(#fafaf8, #0b0b0c);
  --table-bg: light-dark(#ffffff, transparent);
  --table-head: light-dark(#fafaf8, #101012);

  --line-0: light-dark(#e6e5e0, #1c1c21);
  --line-1: light-dark(#dad9d3, #27272d);
  --line-2: light-dark(#c4c2bb, #35353d);

  --fg-0: light-dark(#141416, #f2f2f4);
  --fg-1: light-dark(#3c3c43, #b9b9c1);
  --fg-2: light-dark(#62626a, #80808a);
  --fg-3: light-dark(#8f8f97, #56565f);

  --focus: light-dark(#3558d6, #7f9dff);
  --ok: light-dark(#1a7f47, #67d38a);
  --err: light-dark(#c2362c, #ef6a62);

  --primary: light-dark(#141416, #f2f2f4);
  --primary-fg: light-dark(#ffffff, #0b0b0c);
  --primary-hover: light-dark(#2c2c31, #ffffff);

  --selection: light-dark(rgba(53, 88, 214, 0.16), rgba(127, 157, 255, 0.28));
  --shadow-soft: light-dark(rgba(20, 20, 30, 0.05), transparent);
  --shadow-pop:
    0 1px 2px var(--shadow-soft),
    0 12px 32px light-dark(rgba(20, 20, 30, 0.08), rgba(0, 0, 0, 0.55));

  --font-ui: "Geist Variable", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;

  --r-1: 3px;
  --r-2: 5px;

  --page-w: 960px;
  --gutter: 20px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

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

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

a:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 2px;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.label {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Title bar */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line-0);
  background: color-mix(in srgb, var(--bg-0) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--page-w);
  height: 48px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mark {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--fg-0);
}

.name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-0);
}

.thin {
  font-weight: 400;
  color: var(--fg-2);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav .text-link {
  padding: 0 10px;
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

.nav .text-link[aria-current] {
  color: var(--fg-0);
}

.nav .text-link:hover {
  color: var(--fg-0);
}

.nav .vr {
  width: 1px;
  height: 18px;
  margin: 0 10px 0 8px;
  background: var(--line-1);
}

/* Theme switch: System, Light, Dark. The active button is styled from the root attribute, so it
   is right before theme.js runs; the script keeps aria-pressed in step for assistive tech. */
.theme {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  padding: 2px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
}

.theme button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--fg-2);
  cursor: pointer;
  transition:
    background 80ms linear,
    color 80ms linear;
}

.theme button:hover {
  color: var(--fg-0);
}

.theme button:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 1px;
}

:root:not([data-theme]) .theme [data-theme-choice="system"],
:root[data-theme="light"] .theme [data-theme-choice="light"],
:root[data-theme="dark"] .theme [data-theme-choice="dark"] {
  background: var(--bg-2);
  color: var(--fg-0);
}

.theme svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Buttons */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-1);
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background 80ms linear,
    border-color 80ms linear,
    color 80ms linear;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--line-2);
  color: var(--fg-0);
}

.btn:active {
  background: var(--bg-active);
}

.btn.primary {
  background: var(--primary);
  color: var(--primary-fg);
  border-color: var(--primary);
  font-weight: 500;
}

.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-fg);
}

.btn.sm {
  height: 28px;
  padding: 0 11px;
}

.btn.lg {
  height: 36px;
  padding: 0 16px;
  font-size: var(--fs-md);
}

/* Footer */
.foot {
  border-top: 1px solid var(--line-0);
  background: var(--bg-1);
}

.foot-in {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 36px var(--gutter) 0;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 24px;
  padding-bottom: 32px;
}

.foot-brand p {
  max-width: 300px;
  margin: 10px 0 0;
  text-wrap: balance;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.foot-cols {
  display: flex;
  gap: 48px;
}

.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.foot-col a {
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

.foot-col a:hover {
  color: var(--fg-0);
}

.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--line-0);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.legal a {
  color: var(--fg-1);
}

.legal a:hover {
  color: var(--fg-0);
}

@media (max-width: 600px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }

  .nav .wide-only {
    display: none;
  }
}