/* ─────────────────────────────────────────────────────────────────
   FieldWatch AI — API Reference (Scalar) custom theme
   Brand source-of-truth: fieldwatch-landing/css/style.css. Mirrors the
   same near-black + teal + nebula-glow look so the docs site reads
   like the same product surface as fieldwatch.earth.
   ───────────────────────────────────────────────────────────────── */

:root {
    --fw-primary: #2A99A8;
    --fw-primary-soft: rgba(42, 153, 168, 0.16);
    --fw-primary-glow: rgba(42, 153, 168, 0.07);
    --fw-bg: #020309;
    --fw-bg-soft: #050815;
    --fw-bg-elev: rgba(4, 9, 20, 0.84);
    --fw-text: #f5f5f7;
    --fw-text-soft: #D3D8E1;
    --fw-text-muted: rgba(255, 255, 255, 0.55);
    --fw-border: rgba(255, 255, 255, 0.08);
    --fw-border-soft: rgba(255, 255, 255, 0.04);
    --fw-border-teal: rgba(42, 153, 168, 0.35);
    --fw-success: #00C853;
    --fw-warn: #fbbf24;
    --fw-danger: #ff4d6d;
    --fw-frame-radius: 18px;
    --fw-topnav-height: 56px;
    --fw-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --fw-sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--fw-sans);
    color: var(--fw-text);
    background: var(--fw-bg);
}

html { scroll-behavior: smooth; }

body {
    position: relative;
    overflow-x: hidden;
}

/* Solid space backdrop. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #010208;
    z-index: -3;
}

/* Nebula glow — same recipe as fieldwatch-landing. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 25%, var(--fw-primary-glow), transparent 40%),
        radial-gradient(ellipse at 85% 75%, rgba(30, 50, 120, 0.06), transparent 40%),
        radial-gradient(ellipse at 50% 10%, rgba(80, 60, 140, 0.04), transparent 35%);
    z-index: -2;
    pointer-events: none;
}

a { color: inherit; }

::selection { background: var(--fw-primary-soft); color: var(--fw-text); }

/* ─────────────────────────────────────────────────────────────────
   Top nav — sticky, glassmorphic, mirrors landing.
   ───────────────────────────────────────────────────────────────── */
.fw-topnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--fw-topnav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--fw-bg-elev);
    border-bottom: 1px solid rgba(42, 153, 168, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.fw-topnav .fw-logo {
    font-weight: 700;
    text-decoration: none;
    color: var(--fw-text);
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center;
    transition: text-shadow 200ms ease;
}

.fw-topnav .fw-logo:hover {
    text-shadow: 0 0 18px rgba(42, 153, 168, 0.5);
}

.fw-topnav .fw-logo .fw-logo-accent {
    color: var(--fw-primary);
    margin-left: 4px;
}

.fw-topnav .fw-logo-tag {
    margin-left: 14px;
    padding: 3px 10px;
    border: 1px solid rgba(42, 153, 168, 0.4);
    border-radius: 999px;
    font-size: 10px;
    color: var(--fw-primary);
    letter-spacing: 0.22em;
}

.fw-topnav nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.fw-topnav nav a {
    position: relative;
    color: var(--fw-text-soft);
    text-decoration: none;
    transition: color 160ms ease;
}

.fw-topnav nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--fw-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
}

.fw-topnav nav a:hover {
    color: var(--fw-primary);
}

.fw-topnav nav a:hover::after { transform: scaleX(1); }

.fw-env-tag {
    padding: 5px 10px;
    border: 1px solid var(--fw-border);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fw-text-muted);
    font-family: var(--fw-mono);
}

/* ─────────────────────────────────────────────────────────────────
   Hero — drifting starfield + aurora gradient + flanking HUD panels.
   ───────────────────────────────────────────────────────────────── */
.fw-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 32px 120px;
    min-height: calc(100vh - var(--fw-topnav-height));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Starfield: two drifting layers of randomly-placed dots. */
.fw-starfield {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.fw-star-layer {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(1px 1px at 10% 15%,  rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 25% 42%,  rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 47% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 62% 35%,  rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 78% 22%,  rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 68%,  rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 35% 82%,  rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 55% 72%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 72% 88%,  rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 92% 78%,  rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 5%  92%,  rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 30% 5%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 50% 50%,  rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 82% 12%,  rgba(255,255,255,0.6), transparent);
    animation: fw-drift-stars 120s linear infinite;
}

.fw-star-layer:nth-child(2) {
    opacity: 0.55;
    animation-duration: 200s;
    animation-direction: reverse;
    background-image:
        radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 38% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 58% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 75% 68%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 22% 85%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 85% 32%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 48% 78%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 32% 55%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90% 90%, rgba(255,255,255,0.5), transparent);
}

@keyframes fw-drift-stars {
    from { transform: translate(0, 0); }
    to   { transform: translate(-3%, -2%); }
}

/* Aurora — slow-drifting radial blobs that color the hero. */
.fw-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 40% 30% at 20% 30%, rgba(42, 153, 168, 0.18), transparent 60%),
        radial-gradient(ellipse 35% 25% at 80% 70%, rgba(70, 90, 200, 0.14), transparent 60%),
        radial-gradient(ellipse 30% 20% at 50% 90%, rgba(140, 80, 200, 0.10), transparent 60%);
    animation: fw-aurora-drift 24s ease-in-out infinite alternate;
    filter: blur(40px);
}

@keyframes fw-aurora-drift {
    0%   { transform: translate(-2%, -1%) scale(1.05); opacity: 0.9; }
    100% { transform: translate(2%, 1%) scale(1.1);  opacity: 1; }
}

/* HUD panels with corner-bracket decorations. */
.fw-hud {
    position: absolute;
    z-index: 4;
    padding: 14px 16px;
    background: rgba(4, 9, 20, 0.78);
    border: 1px solid rgba(42, 153, 168, 0.14);
    border-radius: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 220px;
    font-family: var(--fw-mono);
    font-size: 11px;
}

.fw-hud::before, .fw-hud::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.fw-hud::before {
    top: -1px;
    left: -1px;
    border-top: 1.5px solid rgba(42, 153, 168, 0.4);
    border-left: 1.5px solid rgba(42, 153, 168, 0.4);
}

.fw-hud::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 1.5px solid rgba(42, 153, 168, 0.4);
    border-right: 1.5px solid rgba(42, 153, 168, 0.4);
}

.fw-hud-left  { top: 90px; left: 32px; }
.fw-hud-right { top: 90px; right: 32px; }

.fw-hud-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fw-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fw-border-soft);
    margin-bottom: 10px;
}

.fw-console-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fw-success);
    box-shadow: 0 0 8px var(--fw-success);
    animation: fw-pulse 2.4s ease-in-out infinite;
}

@keyframes fw-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.fw-hud-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fw-hud-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.fw-hud-dim {
    color: var(--fw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.fw-hud-val {
    color: var(--fw-text);
    text-align: right;
}

.fw-hud-mono { font-family: var(--fw-mono); }
.fw-hud-ok   { color: var(--fw-success); }
.fw-hud-warn { color: var(--fw-warn); }
.fw-hud-bad  { color: var(--fw-danger); }

/* Hero copy. */
.fw-hero-inner {
    position: relative;
    z-index: 5;
    max-width: 880px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.fw-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.fw-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--fw-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--fw-border);
    background: rgba(4, 9, 20, 0.7);
    color: var(--fw-text-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fw-chip-live {
    border-color: rgba(0, 200, 83, 0.35);
    color: var(--fw-success);
}

.fw-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fw-success);
    box-shadow: 0 0 8px var(--fw-success);
    animation: fw-pulse 2s ease-in-out infinite;
}

.fw-chip-subtle {
    color: var(--fw-text-muted);
}

/* Shimmer headline — gradient sweep over text fill. */
.fw-hero-headline {
    margin: 0;
    font-size: clamp(40px, 7vw, 80px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: linear-gradient(
        90deg,
        var(--fw-text) 0%,
        var(--fw-text) 40%,
        var(--fw-primary) 50%,
        var(--fw-text) 60%,
        var(--fw-text) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fw-shimmer 6s ease-in-out infinite;
}

@keyframes fw-shimmer {
    0%, 100% { background-position: 100% center; }
    50%      { background-position: -100% center; }
}

.fw-hero-lead {
    max-width: 680px;
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--fw-text-soft);
}

.fw-hero-lead code {
    font-family: var(--fw-mono);
    font-size: 0.92em;
    color: var(--fw-primary);
    background: rgba(42, 153, 168, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

.fw-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.fw-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    border: 1px solid;
    font-family: var(--fw-sans);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    transition: all 200ms ease;
    cursor: pointer;
}

.fw-button-primary {
    background: rgba(42, 153, 168, 0.15);
    color: var(--fw-primary);
    border-color: var(--fw-primary);
    box-shadow: 0 0 12px rgba(42, 153, 168, 0.18), inset 0 0 12px rgba(42, 153, 168, 0.08);
}

.fw-button-primary:hover {
    background: rgba(42, 153, 168, 0.28);
    box-shadow: 0 0 24px rgba(42, 153, 168, 0.4), inset 0 0 18px rgba(42, 153, 168, 0.12);
    transform: translateY(-1px);
}

.fw-button-primary:hover .fw-button-arrow {
    transform: translateX(4px);
}

.fw-button-arrow {
    transition: transform 200ms ease;
}

.fw-button-secondary {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: var(--fw-text-soft);
}

.fw-button-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.07);
    color: var(--fw-text);
}

/* Terminal mockup. */
.fw-hero-terminal {
    width: 100%;
    max-width: 720px;
    margin-top: 28px;
    border-radius: 10px;
    border: 1px solid var(--fw-border);
    background: rgba(4, 9, 20, 0.85);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.fw-terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--fw-border-soft);
    background: rgba(255, 255, 255, 0.02);
}

.fw-terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.fw-terminal-dot-r { background: #ff5f56; }
.fw-terminal-dot-y { background: #ffbd2e; }
.fw-terminal-dot-g { background: #27c93f; }

.fw-terminal-title {
    margin-left: 12px;
    font-family: var(--fw-mono);
    font-size: 11px;
    color: var(--fw-text-muted);
    letter-spacing: 0.06em;
}

.fw-terminal-body {
    margin: 0;
    padding: 18px 20px;
    font-family: var(--fw-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--fw-text-soft);
    text-align: left;
    min-height: 130px;
    white-space: pre-wrap;
    word-break: break-word;
}

.fw-terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--fw-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: fw-blink 1s steps(1) infinite;
}

@keyframes fw-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Scroll indicator (rotated, on left edge). */
.fw-scroll-indicator {
    position: absolute;
    left: 28px;
    bottom: 80px;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fw-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fw-text-muted);
    z-index: 4;
    animation: fw-scroll-bob 2.2s ease-in-out infinite;
}

@keyframes fw-scroll-bob {
    0%, 100% { transform: rotate(-90deg) translateX(0); }
    50%      { transform: rotate(-90deg) translateX(6px); }
}

.fw-scroll-arrow {
    color: var(--fw-primary);
}

/* ─────────────────────────────────────────────────────────────────
   Section chrome — kicker / heading / lead, used by surfaces + quickstart.
   ───────────────────────────────────────────────────────────────── */
.fw-section {
    position: relative;
    padding: 96px 32px;
}

.fw-section-inner {
    max-width: 1120px;
    margin: 0 auto;
}

.fw-kicker {
    margin: 0 0 12px;
    font-family: var(--fw-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fw-primary);
}

.fw-section-heading {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.fw-section-lead {
    max-width: 680px;
    margin: 0 0 48px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--fw-text-soft);
}

.fw-section-lead code {
    font-family: var(--fw-mono);
    font-size: 0.88em;
    color: var(--fw-primary);
    background: rgba(42, 153, 168, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Card grid. */
.fw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.fw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid var(--fw-border);
    background: linear-gradient(180deg, rgba(5, 8, 21, 0.9), rgba(5, 8, 21, 0.6));
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    overflow: hidden;
}

.fw-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(42, 153, 168, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}

.fw-card:hover {
    transform: translateY(-3px);
    border-color: rgba(42, 153, 168, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(42, 153, 168, 0.2);
}

.fw-card:hover::before { opacity: 1; }

.fw-card-corner {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
    border-top: 1.5px solid rgba(42, 153, 168, 0.5);
    border-right: 1.5px solid rgba(42, 153, 168, 0.5);
}

.fw-card-icon {
    font-size: 28px;
    color: var(--fw-primary);
    line-height: 1;
}

.fw-card-title {
    margin: 6px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fw-card-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fw-text-soft);
    flex-grow: 1;
}

.fw-card-cta {
    font-family: var(--fw-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fw-primary);
    margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   Quickstart — language tabs + branded code block.
   ───────────────────────────────────────────────────────────────── */
.fw-section-quickstart {
    background: linear-gradient(180deg, transparent, rgba(5, 8, 21, 0.4), transparent);
}

.fw-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(5, 8, 21, 0.7);
    border: 1px solid var(--fw-border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.fw-tab {
    padding: 8px 16px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--fw-text-muted);
    font-family: var(--fw-sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 160ms ease;
}

.fw-tab:hover {
    color: var(--fw-text);
}

.fw-tab-active {
    background: rgba(42, 153, 168, 0.16);
    color: var(--fw-primary);
}

.fw-codeblock {
    border-radius: 10px;
    border: 1px solid var(--fw-border);
    background: rgba(4, 9, 20, 0.85);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.fw-codeblock pre {
    margin: 0;
    padding: 22px 24px;
    font-family: var(--fw-mono);
    font-size: 13.5px;
    line-height: 1.7;
    overflow-x: auto;
}

.fw-codeblock code {
    color: var(--fw-text-soft);
    font-family: inherit;
}

/* Hand-rolled syntax tokens for the quickstart blocks. */
.fw-tk-comment { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.fw-tk-cmd     { color: var(--fw-primary); font-weight: 700; }
.fw-tk-flag    { color: #fbbf24; }
.fw-tk-str     { color: #34d399; }
.fw-tk-kw      { color: #c084fc; font-weight: 500; }
.fw-tk-fn      { color: #60a5fa; }

.fw-section-foot {
    margin-top: 18px;
    font-size: 13px;
    color: var(--fw-text-muted);
}

.fw-section-foot a {
    color: var(--fw-primary);
}

/* ─────────────────────────────────────────────────────────────────
   Reference bar — sticky pill that pins right under the topnav with
   the "// FULL API REFERENCE" label centered on a glowing line. The
   Scalar sidebar is offset to start exactly where this bar ends, so
   the bar's bottom edge is the sidebar's top edge at every scroll
   position. Variable below is reused by the sidebar override so a
   height tweak propagates correctly.
   ───────────────────────────────────────────────────────────────── */
:root {
    --fw-refbar-height: 38px;
}

.fw-reference-bar {
    position: sticky;
    top: var(--fw-topnav-height);
    z-index: 900; /* below topnav (1000), above Scalar's sidebar */
    height: var(--fw-refbar-height);
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fw-bg);
    /* The glowing line is the bottom border. */
    border-bottom: 1px solid transparent;
    background-image:
        linear-gradient(var(--fw-bg), var(--fw-bg)),
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(42, 153, 168, 0.4) 50%,
            transparent 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.fw-reference-bar-label {
    font-family: var(--fw-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fw-primary);
    background: var(--fw-bg);
    padding: 0 16px;
    /* Pull the label down so its baseline sits ON the bottom border
       (the glowing line), giving the "label punching through line"
       look. */
    transform: translateY(50%);
    position: relative;
    z-index: 1;
}

#scalar {
    min-height: calc(100vh - var(--fw-topnav-height) - var(--fw-refbar-height));
}

/* ─────────────────────────────────────────────────────────────────
   Scalar overrides — map Scalar's CSS variables onto our brand.
   ───────────────────────────────────────────────────────────────── */
.scalar-app, .dark-mode {
    --scalar-font: var(--fw-sans);
    --scalar-font-code: var(--fw-mono);

    --scalar-background-1: var(--fw-bg);
    --scalar-background-2: var(--fw-bg-soft);
    --scalar-background-3: #0a1224;
    --scalar-background-accent: var(--fw-primary-soft);

    --scalar-color-1: var(--fw-text);
    --scalar-color-2: var(--fw-text-soft);
    --scalar-color-3: var(--fw-text-muted);
    --scalar-color-accent: var(--fw-primary);
    --scalar-color-disabled: rgba(255, 255, 255, 0.25);
    --scalar-color-ghost: rgba(255, 255, 255, 0.45);

    --scalar-border-color: var(--fw-border);

    --scalar-color-green: #34d399;
    --scalar-color-red: var(--fw-danger);
    --scalar-color-yellow: var(--fw-warn);
    --scalar-color-blue: #60a5fa;
    --scalar-color-orange: #fb923c;
    --scalar-color-purple: #c084fc;

    --scalar-button-1: var(--fw-primary);
    --scalar-button-1-color: #001216;
    --scalar-button-1-hover: #34b3c2;

    --scalar-link-color: var(--fw-primary);
    --scalar-link-color-dark: var(--fw-primary);
    --scalar-link-visited: var(--fw-primary);

    --scalar-radius: 8px;
    --scalar-radius-lg: 14px;
    --scalar-radius-xl: var(--fw-frame-radius);

    --scalar-sidebar-background-1: var(--fw-bg-soft);
    --scalar-sidebar-item-hover-background: rgba(42, 153, 168, 0.08);
    --scalar-sidebar-item-active-background: rgba(42, 153, 168, 0.14);
    --scalar-sidebar-color-1: var(--fw-text);
    --scalar-sidebar-color-2: var(--fw-text-soft);
    --scalar-sidebar-color-active: var(--fw-primary);
    --scalar-sidebar-search-background: var(--fw-bg);
    --scalar-sidebar-search-border-color: var(--fw-border);
    --scalar-sidebar-search-color: var(--fw-text-muted);
    --scalar-sidebar-border-color: var(--fw-border);
}

/* Sidebar offset — Scalar's sidebar is `position: sticky; top: 0; height: 100dvh`.
   Push it under our sticky topnav AND the reference bar so the bar's
   glowing bottom-line is flush with the sidebar's top edge. */
.scalar-app .t-doc__sidebar,
.scalar-app aside.t-doc__sidebar,
.scalar-app .references-sidebar,
.scalar-app .sidebar {
    top: calc(var(--fw-topnav-height) + var(--fw-refbar-height)) !important;
    height: calc(100dvh - var(--fw-topnav-height) - var(--fw-refbar-height)) !important;
    max-height: calc(100dvh - var(--fw-topnav-height) - var(--fw-refbar-height)) !important;
}

.scalar-app .http-method,
.scalar-app .request-method {
    letter-spacing: 0.04em;
    font-weight: 700;
}

.scalar-app pre, .scalar-app code {
    font-family: var(--fw-mono);
}

.scalar-app .references-footer { display: none; }

/* ─────────────────────────────────────────────────────────────────
   Footer — multi-column with brand + dev + status, mirrors landing.
   ───────────────────────────────────────────────────────────────── */
.fw-footer {
    position: relative;
    padding: 60px 32px 24px;
    border-top: 1px solid var(--fw-border-soft);
    background: rgba(2, 3, 9, 0.85);
    backdrop-filter: blur(8px);
}

.fw-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--fw-border-soft);
}

.fw-footer-brand .fw-logo {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fw-footer-brand p {
    margin: 12px 0 0;
    font-family: var(--fw-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fw-text-muted);
}

.fw-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.fw-footer-col-title {
    margin: 0 0 14px;
    font-family: var(--fw-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fw-primary);
}

.fw-footer-cols a {
    display: block;
    padding: 5px 0;
    color: var(--fw-text-soft);
    text-decoration: none;
    font-size: 14px;
    transition: color 160ms ease;
}

.fw-footer-cols a:hover {
    color: var(--fw-primary);
}

.fw-footer-bottom {
    max-width: 1120px;
    margin: 24px auto 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--fw-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fw-text-muted);
}

.fw-footer-bottom a {
    color: var(--fw-primary);
    text-decoration: none;
}

.fw-footer-bottom a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   Responsive — kill HUD panels + scroll indicator on narrow screens,
   stack the footer.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .fw-hud, .fw-scroll-indicator { display: none; }
}

@media (max-width: 720px) {
    .fw-topnav { padding: 0 16px; }
    .fw-topnav nav { gap: 14px; }
    .fw-topnav nav a, .fw-env-tag { display: none; }
    .fw-topnav nav a:first-child, .fw-topnav nav a:last-child { display: inline; }

    .fw-hero { padding: 60px 20px 100px; }
    .fw-section { padding: 72px 20px; }
    .fw-section-divider { padding: 36px 20px 0; }

    .fw-hero-headline { font-size: 36px; }
    .fw-hero-lead { font-size: 16px; }

    .fw-footer-inner { grid-template-columns: 1fr; gap: 36px; }
    .fw-footer-cols { grid-template-columns: repeat(2, 1fr); }
    .fw-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Respect motion-reduced prefs. */
@media (prefers-reduced-motion: reduce) {
    .fw-star-layer, .fw-aurora, .fw-scroll-indicator,
    .fw-hero-headline, .fw-console-dot, .fw-chip-dot,
    .fw-terminal-cursor {
        animation: none !important;
    }
}