/* ==========================================================================
   Design tokens
   Values live here and are consumed by js/tailwind-config.js as
   rgb(var(--c-*) / <alpha-value>). Switching theme swaps this variable set and
   nothing else — there are no per-theme overrides further down this file.
   Colour channels are space-separated so Tailwind can inject the alpha.
   ========================================================================== */

:root {
  --c-surface: 15 19 28;
  --c-surface-bright: 53 57 67;
  --c-surface-container-lowest: 10 14 23;
  --c-surface-container-low: 24 27 37;
  --c-surface-container: 34 42 56;
  --c-surface-container-high: 42 49 64;
  --c-surface-container-highest: 49 53 63;

  --c-on-surface: 223 226 239;
  --c-on-surface-variant: 187 202 191;

  --c-primary: 78 222 163;
  --c-primary-fixed: 111 251 190;
  --c-primary-container: 16 185 129;
  --c-on-primary: 0 56 36;
  --c-on-primary-container: 0 66 43;

  --c-secondary: 76 215 246;
  --c-tertiary: 208 188 255;
  --c-error: 255 180 171;

  --c-outline: 134 148 138;
  --c-outline-variant: 60 74 66;

  --c-hairline: 51 59 73;
  --c-hairline-strong: 66 76 93;

  --c-code-surface: 11 15 25;

  --panel-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.65);
  --panel-highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --glow-primary: 78 222 163;
  --glow-secondary: 76 215 246;
  --glow-strength: 0.16;

  color-scheme: dark;
}

html.light {
  --c-surface: 248 250 252;
  --c-surface-bright: 255 255 255;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 255 255 255;
  --c-surface-container: 255 255 255;
  --c-surface-container-high: 241 245 249;
  --c-surface-container-highest: 226 232 240;

  --c-on-surface: 15 23 42;
  --c-on-surface-variant: 71 85 105;

  --c-primary: 5 150 105;
  --c-primary-fixed: 4 120 87;
  --c-primary-container: 16 185 129;
  --c-on-primary: 255 255 255;
  --c-on-primary-container: 255 255 255;

  --c-secondary: 2 132 199;
  --c-tertiary: 124 58 237;
  --c-error: 185 28 28;

  --c-outline: 100 116 139;
  --c-outline-variant: 100 116 139;

  --c-hairline: 203 213 225;
  --c-hairline-strong: 176 186 201;

  --c-code-surface: 248 250 252;

  --panel-shadow: 0 6px 20px -8px rgb(15 23 42 / 0.12);
  --panel-highlight: none;
  --glow-primary: 16 185 129;
  --glow-secondary: 14 165 233;
  --glow-strength: 0.12;

  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

main > :first-child {
  margin-top: 0;
}

main > :last-child {
  margin-bottom: 0;
}

/* Transitions are scoped to elements that actually change state. The theme
   switch is handled separately on the root so the whole page crossfades once
   instead of every element animating on any class change. */
a,
button,
input,
textarea,
select,
.panel,
.tile,
.code-window {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

html.theme-switching,
html.theme-switching body,
html.theme-switching * {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

/* Standard content card. Replaces the utility pile
   `bg-surface-container-low rounded-xl border border-white/[0.04]` so card
   chrome is defined once instead of drifting per page. */
.panel {
  background-color: rgb(var(--c-surface-container));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.75rem;
  box-shadow: var(--panel-highlight), var(--panel-shadow);
}

/* The recommended option in a set of three. */
.panel-flagship {
  border-color: rgb(var(--c-primary-container));
  box-shadow:
    var(--panel-highlight),
    0 16px 40px -10px rgb(var(--c-primary-container) / 0.2);
}

/* Summary tile that closes a section — accented edge instead of a gradient. */
.panel-accent {
  border-left: 3px solid rgb(var(--c-primary));
}

/* Tile nested inside a panel. One step up the elevation scale, no outer
   border, so nesting never produces a double hairline. */
.tile {
  background-color: rgb(var(--c-surface-container-high));
  border-radius: 0.5rem;
}

/* Band that closes a page with links out. Only for blocks that contain
   actual calls to action. */
.cta-band {
  background-color: rgb(var(--c-surface-container));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.75rem;
  box-shadow: var(--panel-highlight), var(--panel-shadow);
}

/* Hero emphasis that stays readable if background-clip is unavailable, and
   uses the theme's contrast-safe primary/secondary/tertiary stops. */
.hero-accent {
  color: rgb(var(--c-primary));
  background-image: linear-gradient(
    to right,
    rgb(var(--c-primary)),
    rgb(var(--c-secondary)),
    rgb(var(--c-tertiary))
  );
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-accent {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.ambient-glow {
  background: radial-gradient(
    circle,
    rgb(var(--glow-primary) / var(--glow-strength)) 0%,
    rgb(var(--glow-secondary) / calc(var(--glow-strength) * 0.65)) 50%,
    transparent 80%
  );
}

/* ==========================================================================
   Code
   ========================================================================== */

/* Editor-style window with a title bar. Follows the theme — the syntax spans
   inside use ordinary text tokens. */
.code-window {
  background-color: rgb(var(--c-code-surface));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.75rem;
  overflow: hidden;
}

.code-window-bar,
.code-window-foot {
  background-color: rgb(var(--c-surface-container-high));
}

.code-window-bar {
  border-bottom: 1px solid rgb(var(--c-hairline));
}

.code-window-foot {
  border-top: 1px solid rgb(var(--c-hairline));
  gap: 1rem;
}

/* Bare snippet inside a panel, with no window chrome. */
.code-surface {
  background-color: rgb(var(--c-surface-container-high));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.5rem;
}

/* Status vocabularies and route lists must wrap rather than scroll out of the
   card — a clipped identifier reads as a rendering bug. */
.code-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Data display
   ========================================================================== */

.metric-bar {
  height: 0.5rem;
  border-radius: 9999px;
  overflow: hidden;
  background: rgb(var(--c-surface-container-highest));
}

.metric-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: rgb(var(--c-outline));
}

/* The posture under discussion in a given card. Every other bar stays neutral
   so bar length reads as magnitude, not as good or bad. */
.metric-bar > span.is-focus {
  background-color: rgb(var(--c-primary));
}

.k-ring {
  transform: rotate(-90deg);
}

/* ==========================================================================
   Controls
   ========================================================================== */

.view-tab {
  color: rgb(var(--c-on-surface-variant));
  background-color: transparent;
}

.view-tab[aria-pressed="true"] {
  background-color: rgb(var(--c-primary-container));
  color: rgb(var(--c-on-primary-container));
}

html.light .view-tab[aria-pressed="true"] {
  color: #ffffff;
}

.site-field {
  width: 100%;
  appearance: none;
  background-color: rgb(var(--c-code-surface));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  color: rgb(var(--c-on-surface));
  font-family: Geist, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.site-field::placeholder {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgb(var(--c-on-surface-variant));
}

.site-field:focus {
  outline: none;
  border-color: rgb(var(--c-secondary));
  box-shadow: none;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background-color: rgb(var(--c-code-surface));
  border: 1px solid rgb(var(--c-hairline));
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.search-field:focus-within {
  border-color: rgb(var(--c-secondary));
}

.search-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgb(var(--c-on-surface));
}

.search-field input::placeholder {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgb(var(--c-on-surface-variant));
}

.search-field input[type="search"]::-webkit-search-decoration,
.search-field input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

#theme-toggle .theme-toggle-glyph {
  transition: transform 0.2s ease;
}

#theme-toggle:hover .theme-toggle-glyph {
  transform: scale(1.1);
}

.h-captcha {
  min-height: 78px;
}

/* ==========================================================================
   Brand
   ========================================================================== */

.site-logo {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: middle;
  overflow: visible;
  line-height: 0;
  transition: transform 0.25s ease;
}

.site-logo img,
.site-logo svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  height: 3rem;
  max-width: none;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.site-logo-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.site-logo-sm img,
.site-logo-sm svg {
  width: 1.8rem;
  height: 1.8rem;
}

.site-beta {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border: 1px solid rgb(var(--c-secondary) / 0.25);
  border-radius: 0.25rem;
  background-color: rgb(var(--c-secondary) / 0.1);
  color: rgb(var(--c-secondary));
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-logo .logo-halo {
  stroke: rgb(var(--c-surface));
}

.site-logo .logo-halo-fill {
  fill: rgb(var(--c-surface));
}

.site-logo .logo-mark-light {
  display: none;
}

.site-logo .logo-mark-dark {
  display: inline;
}

html.light .site-logo .logo-mark-light {
  display: inline;
}

html.light .site-logo .logo-mark-dark {
  display: none;
}

.site-logo:hover,
a:hover .site-logo {
  transform: scale(1.08);
  animation: logo-glow 1.5s ease-in-out infinite;
}

@keyframes logo-glow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 4px rgb(var(--glow-primary) / 0.35))
      drop-shadow(0 0 10px rgb(var(--glow-secondary) / 0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgb(var(--glow-primary) / 0.9))
      drop-shadow(0 0 22px rgb(var(--glow-secondary) / 0.55));
  }
}

/* Icon font is loaded with display=block, but reserve the box anyway so a slow
   load cannot reflow a row of cards. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  min-width: 1em;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#theme-toggle-indicator {
  transform: translateX(1.5rem);
}
html.light #theme-toggle-indicator {
  transform: translateX(0);
}

#command-palette-backdrop[hidden],
#mobile-nav[hidden] {
  display: none;
}

nav[aria-label="Guide"] {
  scrollbar-width: none;
}
nav[aria-label="Guide"]::-webkit-scrollbar {
  display: none;
}