/* Final Dark / Final Light, the only two themes visitors can pick (studio-redesign.js decides which
 * one a page shows; theme-switch.js wires the switch).
 *
 *   1. The Day · Night · Telemetry · Cloud · Cloud Dark switch in the header, on every page and in every theme.
 *   2. Final Light for every page but the homepage. The homepage has a hand-built Final Light
 *      (data-theme="light"); the other pages' light colours exist only in the Studio colour adapter,
 *      so Final Light there is that adapter (data-theme="studio") with data-final="light", retuned
 *      here to the homepage's look: the same ink and teal → navy accent, its blooms and grey bands,
 *      gradient headline accents and buttons, the light wordmark. Type comes from final-type.css. */

/* ── 1. Day · Night · Telemetry · Cloud · Cloud Dark switch ────────────────────────────────────
   A pill of five icon radios (sun, moon, signal trace, cloud, cloud and moon); the knob sits under
   the active one. The pick is drawn from <html>'s theme attributes (not aria-checked), so it is right
   before any script runs: Telemetry and Cloud are their data-final, Cloud Dark is Cloud with
   data-cloud="dark", Night is data-theme="dark" (or the Midnight preview), everything else is Day. */
.theme-switch { position: relative; display: inline-flex; }
.dn-toggle {
  --dn-track: #EEF2F7; --dn-line: rgba(11, 22, 34, .16); --dn-line-hover: #0E7490;
  --dn-knob: #FFFFFF; --dn-knob-line: rgba(11, 22, 34, .10);
  --dn-knob-shadow: 0 1px 2px rgba(11, 22, 34, .18), 0 4px 10px -4px rgba(11, 22, 34, .28);
  --dn-on: #B45309; --dn-off: #5B6878; --dn-hover: #0B1622; --dn-focus: #0E7490;
  position: relative; display: inline-flex; align-items: center;
  --dn-step: 28px;   /* one option's width; the knob moves in these steps */
  box-sizing: border-box; width: calc(var(--dn-step) * 5 + 8px); height: 32px; padding: 0 3px; margin: 0; flex: none;
  border: 1px solid var(--dn-line); border-radius: 999px; background: var(--dn-track);
  transition: border-color .2s ease, background-color .25s ease;
}
.dn-toggle:hover { border-color: var(--dn-line-hover); }
/* Since 2026-10-17 Telemetry is the only theme offered to visitors (studio-redesign.js OFFERED), so the switch is
   hidden, not removed: its markup stays on every page and the other themes still open with ?theme=<name>.
   To offer a theme again, add it to OFFERED and delete this rule. Telemetry's colour picker (.dn-accent) is hidden
   too since 2026-10-19: studio-redesign.js (ACCENT_PICKER false) no longer lets theme-switch.js add it. */
#theme-toggle.dn-toggle { display: none; }
.dn-opt {
  position: relative; z-index: 1; display: inline-grid; place-items: center; flex: none;
  width: var(--dn-step); height: 30px; padding: 0; margin: 0; border: 0; border-radius: 999px;
  background: none; color: var(--dn-off); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s ease;
}
.dn-opt:hover { color: var(--dn-hover); }
.dn-opt:focus-visible { outline: 2px solid var(--dn-focus); outline-offset: 1px; }
.dn-knob {
  position: absolute; top: 3px; left: calc(var(--dn-step) / 2 - 9px); width: 24px; height: 24px; border-radius: 999px;
  background: var(--dn-knob); border: 1px solid var(--dn-knob-line); box-sizing: border-box;
  box-shadow: var(--dn-knob-shadow); pointer-events: none;
  transition: transform .28s cubic-bezier(.3, .7, .2, 1.15), background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dn-ico { position: relative; width: 14px; height: 14px; flex: none; transition: transform .35s ease; }
.dn-sun { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.dn-sun circle { fill: currentColor; stroke: none; }
.dn-moon { fill: currentColor; }
.dn-tele { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dn-cloud, .dn-cloudnight { fill: currentColor; }
html:not([data-theme="dark"]):not([data-premium="midnight"]):not([data-final="telemetry"]):not([data-final="cloud"]) .dn-opt[data-theme-pick="light"] { color: var(--dn-on); }

html[data-theme="dark"] .dn-toggle,
html[data-premium="midnight"] .dn-toggle {
  --dn-track: rgba(255, 255, 255, .05); --dn-line: rgba(255, 255, 255, .16); --dn-line-hover: rgba(0, 240, 255, .55);
  --dn-knob: #1A2130; --dn-knob-line: rgba(0, 240, 255, .38);
  --dn-knob-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 12px -2px rgba(0, 240, 255, .45);
  --dn-on: #7DEBFF; --dn-off: #8B95A5; --dn-hover: #FFFFFF; --dn-focus: #00F0FF;
}
html[data-theme="dark"] .dn-knob,
html[data-premium="midnight"] .dn-knob { transform: translateX(var(--dn-step)); }
html[data-theme="dark"] .dn-sun,
html[data-premium="midnight"] .dn-sun { transform: rotate(-45deg); }
html[data-theme="dark"] .dn-opt[data-theme-pick="dark"],
html[data-premium="midnight"] .dn-opt[data-theme-pick="dark"] { color: var(--dn-on); }

html[data-final="telemetry"] :is(.dn-toggle, .dn-accent) {
  --dn-track: #111316; --dn-line: #353B44; --dn-line-hover: var(--tm-accent, #FFB020);
  --dn-knob: #1D2026; --dn-knob-line: rgb(var(--tm-accent-rgb, 255 176 32) / .55);
  --dn-knob-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 10px -3px rgb(var(--tm-accent-rgb, 255 176 32) / .5);
  --dn-on: var(--tm-accent, #FFB020); --dn-off: #858D99; --dn-hover: #ECEEF1; --dn-focus: var(--tm-accent, #FFB020);
}
html[data-final="telemetry"] .dn-knob { transform: translateX(calc(var(--dn-step) * 2)); }
html[data-final="telemetry"] .dn-sun { transform: rotate(-45deg); }
html[data-final="telemetry"] .dn-opt[data-theme-pick="telemetry"] { color: var(--dn-on); }

html[data-final="cloud"] .dn-toggle {
  --dn-track: #FFFFFF; --dn-line: rgba(24, 27, 38, .12); --dn-line-hover: #0A84FF;
  --dn-knob: #EEF4FF; --dn-knob-line: rgba(10, 132, 255, .28);
  --dn-knob-shadow: 0 1px 2px rgba(56, 62, 82, .14), 0 6px 14px -6px rgba(10, 132, 255, .45);
  --dn-on: #0A6FE0; --dn-off: #6F7280; --dn-hover: #090A0D; --dn-focus: #0071E3;
}
html[data-final="cloud"] .dn-knob { transform: translateX(calc(var(--dn-step) * 3)); }
html[data-final="cloud"]:not([data-cloud="dark"]) .dn-opt[data-theme-pick="cloud"] { color: var(--dn-on); }

html[data-final="cloud"][data-cloud="dark"] .dn-toggle {
  --dn-track: #232426; --dn-line: rgba(255, 255, 255, .14); --dn-line-hover: #4DA3FF;
  --dn-knob: #3F4146; --dn-knob-line: rgba(156, 203, 255, .35);
  --dn-knob-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 14px -6px rgba(10, 132, 255, .55);
  --dn-on: #9CCBFF; --dn-off: #B4B7C0; --dn-hover: #FFFFFF; --dn-focus: #4DA3FF;
}
html[data-final="cloud"][data-cloud="dark"] .dn-knob { transform: translateX(calc(var(--dn-step) * 4)); }
/* Between 1280px (where the full header row appears) and 1535px the row is tight, and on phones the
   switch shares the bar with the logo and the menu button: there the five options sit a little closer. */
@media (min-width: 1280px) and (max-width: 1535px), (max-width: 420px) {
  .dn-toggle { --dn-step: 24px; }
}
html[data-final="cloud"][data-cloud="dark"] .dn-opt[data-theme-pick="cloud-dark"] { color: var(--dn-on); }
/* Telemetry's colour picker, beside the switch (theme-switch.js adds it): a round swatch of the
   current signal colour that opens the platform colour picker. Shown only while Telemetry is on. */
.dn-accent {
  display: none; position: relative; align-items: center; justify-content: center; flex: none;
  box-sizing: border-box; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 999px;
  border: 1px solid var(--dn-line); background: var(--dn-track); cursor: pointer;
  transition: border-color .2s ease;
}
html[data-final="telemetry"] .dn-accent { display: inline-flex; }
.dn-accent:hover { border-color: var(--dn-line-hover); }
.dn-accent:focus-within { outline: 2px solid var(--dn-focus); outline-offset: 2px; }
.dn-accent input {
  -webkit-appearance: none; appearance: none; display: block; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 10px -2px rgb(var(--tm-accent-rgb, 255 176 32) / .7);
}
.dn-accent input:focus { outline: none; }
.dn-accent input::-webkit-color-swatch-wrapper { padding: 0; }
.dn-accent input::-webkit-color-swatch { border: 0; border-radius: 999px; }
.dn-accent input::-moz-color-swatch { border: 0; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .dn-toggle, .dn-knob, .dn-ico, .dn-opt, .dn-accent { transition: none; }
}
/* While the switch flips the theme (studio-redesign.js sets this for two frames), the page's own
   colour transitions pause so the new theme lands at once; only the switch itself animates. */
html[data-theme-switching] *:not(.dn-toggle):not(.dn-knob):not(.dn-ico):not(.dn-opt),
html[data-theme-switching] *::before,
html[data-theme-switching] *::after { transition: none !important; }

/* ── 1a. Mobile menus (every theme): a long menu scrolls inside the fixed 80px header instead of running
   off the bottom of a short phone, where its last links (Login, Book a Demo) could not be reached. */
nav#header #mobile-menu, nav.site #mmenu { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }

/* ── 1b. Header Login button ───────────────────────────────────────────────────────────────────
   Header actions read switch · Book a Demo · Login, Login last. Book a Demo is the filled gradient
   pill; Login is its outlined partner at the same height. Both live in the menu below 1024px.
   :is(nav#header, nav.site) covers both header variants and outranks their own link colours. */
:is(nav#header, nav.site) .hdr-login {
  display: none; align-items: center; justify-content: center; white-space: nowrap; box-sizing: border-box;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
  color: #0B1622; background-color: #FFFFFF; border: 1px solid rgba(11, 22, 34, .2);
  box-shadow: 0 1px 2px rgba(11, 22, 34, .06), 0 6px 16px -10px rgba(11, 22, 34, .35);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
:is(nav#header, nav.site) .hdr-login:hover { color: #0C6A84; border-color: #0C6A84; transform: translateY(-1px); }
:is(nav#header, nav.site) .hdr-login:focus-visible { outline: 2px solid #0C6A84; outline-offset: 3px; }
@media (min-width: 1024px) {
  :is(nav#header, nav.site) .hdr-login { display: inline-flex; }
}
/* The legal pages' Book a Demo is a few px taller; Login matches whatever height the row has. */
nav.site .hdr-login { height: auto; min-height: 40px; align-self: stretch; }
html[data-theme="dark"] :is(nav#header, nav.site) .hdr-login,
html[data-premium="midnight"] :is(nav#header, nav.site) .hdr-login {
  color: #FFFFFF; background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] :is(nav#header, nav.site) .hdr-login:hover,
html[data-premium="midnight"] :is(nav#header, nav.site) .hdr-login:hover {
  color: #FFFFFF; background-color: rgba(255, 255, 255, .12); border-color: rgba(0, 240, 255, .6);
}
html[data-theme="dark"] :is(nav#header, nav.site) .hdr-login:focus-visible { outline-color: #00F0FF; }
/* Cloud: a white key with a hairline, like the theme's secondary buttons. */
html[data-final="cloud"] :is(nav#header, nav.site) .hdr-login {
  color: #090A0D; background-color: #FFFFFF; border-color: rgba(24, 27, 38, .12); border-radius: 14px;
  box-shadow: 0 8px 22px -10px rgba(70, 72, 105, .35);
}
html[data-final="cloud"] :is(nav#header, nav.site) .hdr-login:hover { color: #0060C4; border-color: rgba(0, 96, 196, .4); }
html[data-final="cloud"] :is(nav#header, nav.site) .hdr-login:focus-visible { outline-color: #0071E3; }
/* Cloud Dark: the same key in charcoal. */
html[data-final="cloud"][data-cloud="dark"] :is(nav#header, nav.site) .hdr-login {
  color: #FFFFFF; background-color: #36383D; border-color: rgba(255, 255, 255, .12); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
}
html[data-final="cloud"][data-cloud="dark"] :is(nav#header, nav.site) .hdr-login:hover { color: #FFFFFF; border-color: rgba(156, 203, 255, .55); }
html[data-final="cloud"][data-cloud="dark"] :is(nav#header, nav.site) .hdr-login:focus-visible { outline-color: #4DA3FF; }
/* Telemetry: a hairline console key, amber on hover. */
html[data-final="telemetry"] :is(nav#header, nav.site) .hdr-login {
  color: #ECEEF1; background-color: #111316; border-color: #353B44; border-radius: 6px; box-shadow: none;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
html[data-final="telemetry"] :is(nav#header, nav.site) .hdr-login:hover { color: var(--tm-accent, #FFB020); background-color: #16191D; border-color: var(--tm-accent, #FFB020); }
html[data-final="telemetry"] :is(nav#header, nav.site) .hdr-login:focus-visible { outline-color: var(--tm-accent, #FFB020); }
@media (prefers-reduced-motion: reduce) {
  :is(nav#header, nav.site) .hdr-login { transition: none; }
  :is(nav#header, nav.site) .hdr-login:hover { transform: none; }
}

/* ── 2. Final Light (every page but the homepage) ─────────────────────────────────────────── */
/* Palette: the homepage's Final Light values in the adapter's tone slots. Every text tone is AA on
   white, on the grey band and on its own 12% wash (tests/final-theme.test.js). */
html[data-theme="studio"][data-final="light"] {
  --st-paper: #ffffff;  --studio-rgb-paper: 255 255 255;
  --st-soft: #f7f9fb;   --studio-rgb-soft: 247 249 251;
  --st-sky: #fbfcfd;    --studio-rgb-sky: 251 252 253;
  --st-ink: #0b1622;    --studio-rgb-ink: 11 22 34;
  --st-text: #1f2b3a;   --studio-rgb-text: 31 43 58;
  --st-mid: #2e3b4a;    --studio-rgb-mid: 46 59 74;
  --st-muted: #4a5a6b;  --studio-rgb-muted: 74 90 107;
  --st-line: #e1e5ea;   --studio-rgb-line: 225 229 234;
  --st-line2: #cdd3da;  --studio-rgb-line2: 205 211 218;
  --st-blue: #0c6a84;   --studio-rgb-blue: 12 106 132;   /* the homepage teal one step deeper: AA on the grey band too */
  --st-blue2: #1e40af;  --studio-rgb-blue2: 30 64 175;
  --st-hover: #155e75;  --studio-rgb-hover: 21 94 117;
  --st-focus: #155e75;  --studio-rgb-focus: 21 94 117;
  --st-control: #7a8a9c; --studio-rgb-control: 122 138 156;
  --st-green: #036b4e;  --studio-rgb-green: 3 107 78;
  --st-red: #b42318;    --studio-rgb-red: 180 35 24;
  --st-amber: #92400e;  --studio-rgb-amber: 146 64 14;
  --st-onAccent: #ffffff; --studio-rgb-onAccent: 255 255 255;
  --st-band: #eef2f7;
  --fl-page: #fbfcfd;
  --fl-grad: linear-gradient(90deg, #0e7490 0%, #1e40af 100%);
  --fl-grad-hover: linear-gradient(90deg, #155e75 0%, #1e3a8a 100%);
  --fl-band-line: rgba(11, 22, 34, .12);
}

/* Ground: the homepage's off-white with its two soft blooms (teal top-left, violet right), fixed
   like the homepage's. Paper sections let them through; grey bands stay solid. */
html[data-theme="studio"][data-final="light"][data-studio-page] { background-color: var(--fl-page) !important; }
html[data-theme="studio"][data-final="light"][data-studio-page] body {
  background-color: var(--fl-page) !important;
  background-image:
    radial-gradient(62% 46% at 12% 6%, rgba(14, 116, 144, .07), transparent 62%),
    radial-gradient(56% 42% at 88% 34%, rgba(91, 33, 182, .06), transparent 62%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
html[data-theme="studio"][data-final="light"][data-studio-page] main:not(#main-content),
html[data-theme="studio"][data-final="light"][data-studio-page] [data-st-band="paper"] {
  background-color: transparent !important;
}
html[data-theme="studio"][data-final="light"][data-studio-page] [data-st-band="tone"] {
  border-top: 1px solid var(--fl-band-line); border-bottom: 1px solid var(--fl-band-line);
}

/* Header: translucent paper like the homepage's light header. */
html[data-theme="studio"][data-final="light"][data-studio-page] nav#header.site-glass {
  background-color: rgb(251 252 253 / .82) !important;
}

/* Wordmark: the Final Dark logo with dark "Air" lettering, as on the homepage. */
html[data-theme="studio"][data-final="light"] img[src$="airllm_logo_dark.svg"],
html[data-theme="studio"][data-final="light"] img[src$="airllm_logo_light.svg"] { content: url('images/airllm_logo_light.svg'); }

/* Headline accents: Dark's gradient half of a heading is teal → navy, as on the homepage
   (Studio paints it as one flat colour). */
html[data-theme="studio"][data-final="light"][data-studio-page] :is(h1, h2, h3) :is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]),
html[data-theme="studio"][data-final="light"][data-studio-page] :is(h1, h2, h3):is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]) {
  background-image: var(--fl-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #0e7490 !important;
}

/* Primary actions: the homepage's teal → navy gradient pill fill. */
html[data-theme="studio"][data-final="light"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta, .btn-primary, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]) {
  background-color: #0e7490 !important; background-image: var(--fl-grad) !important;
  border-color: transparent !important; color: #ffffff !important;
}
html[data-theme="studio"][data-final="light"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta, .btn-primary, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]) * {
  color: #ffffff !important;
}
html[data-theme="studio"][data-final="light"][data-studio-page] :is(a, button):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta, .btn-primary, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]):hover {
  background-image: var(--fl-grad-hover) !important;
}