/* Telemetry — the third visitor theme (Day · Night · Telemetry): an operations console in the dark.
 *
 * Every page keeps its own DOM, words and scripts. Telemetry is the Studio colour adapter
 * (data-theme="studio": studio-theme.css + studio-redesign.css) with data-final="telemetry" on <html>
 * (studio-redesign.js sets it) and this file on top. The adapter recolours every colour the pages
 * declare into the --st-* tone slots, so section 1 is the whole palette; the rest is a design layer —
 * ground, header, buttons, surfaces, icons, labels, footer — that may change geometry, like premium.css.
 * studio-icons.js tags the structure styled here (data-st-band / -card / -tile / -pill / -ico /
 * -surface). Subtrees marked data-st-own (aircode.html, air-router.html) draw Telemetry themselves.
 * Type comes from final-type.css (Sora, Manrope, JetBrains Mono).
 *
 * Every rule is scoped to html[data-final="telemetry"] (tests/telemetry-theme.test.js). */

/* ── 1. Palette (consumed by the Studio adapter; AA-checked in the test) ───────────────────────── */
html[data-theme="studio"][data-final="telemetry"] {
  color-scheme: dark;
  /* The signal colour, amber by default. A visitor can pick their own with the header colour picker:
     studio-redesign.js then sets these same properties on <html> (inline, so they win) from that one
     colour, and every rule below follows. */
  --tm-accent: #ffb020;    --tm-accent-rgb: 255 176 32;
  --tm-accent-2: #ffcb5c;  --tm-accent-2-rgb: 255 203 92;    /* its lighter key */
  --tm-accent-hi: #ffc34d; --tm-accent-hi-rgb: 255 195 77;   /* hover */
  --tm-accent-ink: #1a1100; --tm-accent-ink-rgb: 26 17 0;    /* labels on a filled accent */
  --st-paper: #0b0c0e;  --studio-rgb-paper: 11 12 14;
  --st-soft: #111316;   --studio-rgb-soft: 17 19 22;
  --st-sky: #16191d;    --studio-rgb-sky: 22 25 29;
  --st-ink: #eceef1;    --studio-rgb-ink: 236 238 241;
  --st-text: #d3d7dd;   --studio-rgb-text: 211 215 221;
  --st-mid: #b7bdc6;    --studio-rgb-mid: 183 189 198;
  --st-muted: #9aa2ae;  --studio-rgb-muted: 154 162 174;
  --st-line: #22262c;   --studio-rgb-line: 34 38 44;
  --st-line2: #353b44;  --studio-rgb-line2: 53 59 68;
  --st-blue: var(--tm-accent);     --studio-rgb-blue: var(--tm-accent-rgb);      /* the signal */
  --st-blue2: var(--tm-accent-2);  --studio-rgb-blue2: var(--tm-accent-2-rgb);   /* its lighter key, where Dark had violet: one signal */
  --st-hover: var(--tm-accent-hi); --studio-rgb-hover: var(--tm-accent-hi-rgb);
  --st-focus: var(--tm-accent);    --studio-rgb-focus: var(--tm-accent-rgb);
  --st-control: #6b7380; --studio-rgb-control: 107 115 128;
  --st-green: #4ade80;  --studio-rgb-green: 74 222 128;
  --st-red: #f87171;    --studio-rgb-red: 248 113 113;
  --st-amber: #fb923c;  --studio-rgb-amber: 251 146 60;
  --st-onAccent: var(--tm-accent-ink); --studio-rgb-onAccent: var(--tm-accent-ink-rgb);
  --st-band: #0e1013;
  /* Pages paint their designed-dark panels (terminals, code, contrast bands) with --invert; the
     adapter points it at ink, which is light here. */
  --invert: #08090b; --invert-2: #0f1114; --invert-ink: #eceef1; --invert-mid: #b7bdc6; --invert-mute: #858d99; --invert-line: #22262c;
}

/* ── 2. Tokens of the layer itself ──────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="telemetry"] {
  --tm-bg: #0b0c0e; --tm-dot: rgb(236 238 241 / .06);
  --tm-band: #0e1013; --tm-panel: #111316; --tm-panel-2: #16191d; --tm-well: #08090b;
  --tm-line: #22262c; --tm-line-2: #2c3138; --tm-line-hi: #3d444e;
  --tm-amber: var(--tm-accent); --tm-amber-hi: var(--tm-accent-hi); --tm-amber-ink: var(--tm-accent-ink);
  --tm-amber-soft: rgb(var(--tm-accent-rgb) / .08); --tm-amber-line: rgb(var(--tm-accent-rgb) / .34);
  --tm-cyan: #5ccbf5; --tm-green: #4ade80; --tm-red: #f87171; --tm-orange: #fb923c;
  --tm-ink: #eceef1; --tm-mid: #b7bdc6; --tm-muted: #9aa2ae;
  --tm-mono: var(--ft-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --tm-r: 8px; --tm-r-sm: 6px;
  --st-band: var(--tm-band); --st-screen: var(--tm-band);
}

/* ── 3. Ground: charcoal with an instrument dot grid; bands are solid and ruled ─────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] {
  background-color: var(--tm-bg) !important;
  background-image: radial-gradient(var(--tm-dot) 1px, transparent 1.5px) !important;
  background-size: 24px 24px !important; background-position: 12px 12px !important;
  background-attachment: fixed !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] body,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] main:not(#main-content),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-band="paper"] {
  background-color: transparent !important; background-image: none !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-band="tone"] {
  background-color: var(--tm-band) !important; background-image: none !important;
  border-top: 1px solid var(--tm-line) !important; border-bottom: 1px solid var(--tm-line) !important;
  --st-screen: var(--tm-well);
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-band="paper"] + [data-st-band="paper"] { border-top: 1px solid var(--tm-line) !important; }

/* ── 4. Type: tight console headlines, amber signal accents, bracketed mono eyebrows ────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(main, section) :is(h1, h2):not([data-st-own] *) { letter-spacing: -.04em; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Dark's gradient half of a headline is one flat amber signal. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(h1, h2, h3, h4, p, span) :is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]):not([data-st-own] *),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(h1, h2, h3, h4):is(.bg-clip-text, .gradient-text, .grad, [class*="text-transparent"]):not([data-st-own] *) {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--tm-amber) !important;
}
/* Section eyebrows (the label right before a headline): [ MONO LABEL ], no box. Since the SEO pass (2026-10-20) a hero
   headline can also be .st-headline: the page's <h1> wraps its eyebrow pill and that headline (models, pricing, security). */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) {
  background: none !important; box-shadow: none !important; border-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important;
  gap: 8px !important; font-family: var(--tm-mono) !important; text-transform: uppercase; letter-spacing: .14em !important;
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--tm-amber) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) * { color: var(--tm-amber) !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline)) > :is(span:empty, i, svg) { display: none !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline))::before { content: "["; color: var(--tm-muted); letter-spacing: 0; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is([data-st-pill], .badge):has(+ :is(h1, h2, .st-headline))::after { content: "]"; color: var(--tm-muted); letter-spacing: 0; }

/* ── 5. Header: a dark console bar ruled by a hairline ──────────────────────────────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header, nav.site) {
  background-color: rgb(11 12 14 / .88) !important; background-image: none !important;
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--tm-line) !important; box-shadow: none !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] nav#header.site-glass.scrolled { box-shadow: 0 1px 0 var(--tm-line), 0 12px 30px -18px rgb(0 0 0 / .9) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt) { color: var(--tm-mid) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt):hover { color: var(--tm-ink) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header, nav.site) a[aria-current="page"]:not(.hdr-cta):not(.hdr-login) { color: var(--tm-amber) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header .site-dropdown > div, nav#header .site-dropdown > .site-glass, nav.site .dd-menu, nav.site [role="menu"]) {
  background-color: var(--tm-panel) !important; background-image: none !important; border: 1px solid var(--tm-line-2) !important;
  border-radius: var(--tm-r) !important; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .9) !important;
}
/* The colour picker joins the switch in the header row; between 1280px and 1535px the links sit a little
   closer so the row keeps its breathing room. */
@media (min-width: 1280px) and (max-width: 1535px) {
  html[data-theme="studio"][data-final="telemetry"][data-studio-page] nav#header > div > div[class*="xl:flex"][class*="gap-8"] { column-gap: 22px; }
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] nav#header .site-dropdown a:hover { background-color: var(--tm-panel-2) !important; color: var(--tm-amber) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) {
  background-color: var(--tm-bg) !important; border-top: 1px solid var(--tm-line) !important; box-shadow: 0 24px 40px -24px rgb(0 0 0 / .95) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) a:not(.site-grad):not(.hdr-cta):hover { color: var(--tm-amber) !important; }
/* The original Final Dark wordmark (Studio swaps in its light-paper version). */
html[data-theme="studio"][data-final="telemetry"] img[src$="airllm_logo_dark.svg"],
html[data-theme="studio"][data-final="telemetry"] img[src$="airllm_logo_light.svg"] { content: url('images/airllm_logo_dark.svg'); }

/* ── 6. Buttons: square-shouldered console keys in mono ─────────────────────────────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta,
  .bg-primary, .bg-primaryHover, .bg-accent, .bg-accent-main, .bg-accent-hover, .bg-accent-blue, .bg-accent-cyan, .bg-accent-purple,
  .bg-brand-cyan, .bg-brand-blue, .bg-brand-violet, .bg-electric-blue, .bg-electric-cyan, .bg-electric-purple,
  .bg-blue-500, .bg-blue-600, .bg-cyan-500, .bg-purple-500, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] .hub-note .btn {
  background-color: var(--tm-amber) !important; background-image: none !important;
  border-color: var(--tm-amber) !important; color: var(--tm-amber-ink) !important;
  border-radius: var(--tm-r-sm) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 0 0 1px rgb(0 0 0 / .4), 0 10px 24px -14px rgb(var(--tm-accent-rgb) / .7) !important;
  font-family: var(--tm-mono) !important; font-weight: 600 !important; letter-spacing: .01em !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button, input[type="submit"]):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta,
  .bg-primary, .bg-primaryHover, .bg-accent, .bg-accent-main, .bg-accent-hover, .bg-accent-blue, .bg-accent-cyan, .bg-accent-purple,
  .bg-brand-cyan, .bg-brand-blue, .bg-brand-violet, .bg-electric-blue, .bg-electric-cyan, .bg-electric-purple,
  .bg-blue-500, .bg-blue-600, .bg-cyan-500, .bg-purple-500, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]) *,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] .hub-note .btn * { color: var(--tm-amber-ink) !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.bg-btn-gradient, .bg-button-glow, .bg-accent-gradient, .site-grad, .hdr-cta, .bg-primary, .bg-primaryHover,
  .bg-accent-main, .bg-accent-blue, .bg-electric-blue, .bg-green-500, .bg-green-400, .bg-white, .btn-primary, .cta, [class*="bg-gradient-to-"]):not(.bg-clip-text):not([class*="text-transparent"]):hover {
  background-color: var(--tm-amber-hi) !important; border-color: var(--tm-amber-hi) !important; transform: translateY(-1px);
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button).bg-surface[class*="border"] {
  background-color: var(--tm-panel) !important; background-image: none !important;
  border-color: var(--tm-line-hi) !important; color: var(--tm-ink) !important; border-radius: var(--tm-r-sm) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--tm-mono) !important; font-weight: 600 !important; letter-spacing: .01em !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost) *,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]) * { color: inherit !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost):hover,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]):hover,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button).bg-surface[class*="border"]:hover {
  background-color: var(--tm-panel-2) !important; border-color: var(--tm-amber) !important; color: var(--tm-amber) !important;
}
/* Selected tabs and toggles: amber, like the active key on a panel. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.pricing-toggle-active, .os-tab.active, .pill-on),
html[data-theme="studio"][data-final="telemetry"][data-studio-page] .tabstrip a.on {
  background-color: var(--tm-amber) !important; background-image: none !important; border-color: var(--tm-amber) !important; color: var(--tm-amber-ink) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button):is(.pricing-toggle-active, .os-tab.active, .pill-on) *,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] .tabstrip a.on * { color: var(--tm-amber-ink) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(a, button).os-tab:not(.active) { background-color: var(--tm-panel) !important; border-color: var(--tm-line-hi) !important; color: var(--tm-mid) !important; }
/* Solid accent badges ("Most Popular") read as amber keys too. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(.bg-btn-gradient, .bg-accent-blue, .bg-cyan):not(.bg-clip-text):not(a):not(button) {
  background-color: var(--tm-amber) !important; background-image: none !important; color: var(--tm-amber-ink) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(.bg-btn-gradient, .bg-accent-blue, .bg-cyan):not(.bg-clip-text):not(a):not(button) * { color: var(--tm-amber-ink) !important; }

/* ── 7. Surfaces: instrument panels — flat charcoal, hairline, 8px shoulders ───────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-card][data-st-card][data-st-card],
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(div, article, li, section, aside, details):is(.glass-panel, .glass-card, .glass, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass, .doc, .toc, .tblwrap):not(.rounded-full):not([data-st-own] *) {
  background-color: var(--tm-panel) !important; background-image: none !important;
  border-color: var(--tm-line) !important; border-radius: var(--tm-r) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; --gg: transparent !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-card][data-st-card][data-st-card]:not([data-st-card-border]) { border-color: var(--tm-line) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-card][data-st-card][data-st-card]:hover,
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(div, article, li, section, aside, details):is(.glass-panel, .glass-card, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass):not(.rounded-full):not([data-st-own] *):hover {
  border-color: var(--tm-line-hi) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 18px 40px -28px rgb(0 0 0 / .95) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-card][data-st-card][data-st-card-border] { border-color: var(--tm-amber) !important; box-shadow: 0 0 0 1px var(--tm-amber-line), inset 0 1px 0 rgb(255 255 255 / .05) !important; }
/* Product screens (architecture maps, dashboards, chat mockups): a recessed instrument well with
   its own finer dot grid, so the cards inside read as UI on a display. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-surface="screen"] {
  background-color: var(--st-screen) !important;
  background-image: radial-gradient(rgb(236 238 241 / .05) 1px, transparent 1.4px) !important; background-size: 16px 16px !important;
  border-color: var(--tm-line-2) !important; border-radius: var(--tm-r) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .03), 0 30px 60px -36px rgb(0 0 0 / .95) !important;
}
/* Dark's hairlines on everything else follow the console's line colour. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(main, section, footer) [class*="border-white"]:not([data-st-own] *) { border-color: var(--tm-line) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl)[class*="border"]:is([class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="p-8"]):not([data-st-own] *) { border-color: var(--tm-line) !important; }

/* ── 8. Icons, tiles and labels — one amber signal; green, red and orange keep their meaning ── */
html[data-theme="studio"][data-final="telemetry"] :is([data-st-ico], [data-st-tile], [data-st-pill], [data-st-card]) { --tm-c: var(--tm-accent-rgb); --tm-cx: var(--tm-accent); }
html[data-theme="studio"][data-final="telemetry"] :is([data-st-ico="green"], [data-st-tile="green"], [data-st-pill="green"], [data-st-card="green"]) { --tm-c: 74 222 128; --tm-cx: #4ade80; }
html[data-theme="studio"][data-final="telemetry"] :is([data-st-ico="red"], [data-st-tile="red"], [data-st-pill="red"], [data-st-card="red"]) { --tm-c: 248 113 113; --tm-cx: #f87171; }
html[data-theme="studio"][data-final="telemetry"] :is([data-st-ico="orange"], [data-st-tile="orange"], [data-st-pill="orange"], [data-st-card="orange"]) { --tm-c: 251 146 60; --tm-cx: #fb923c; }
html[data-theme="studio"][data-final="telemetry"] :is([data-st-ico], [data-st-tile], [data-st-pill]):is([data-st-ico="github"], [data-st-ico="apple"], [data-st-ico="twitter"], [data-st-ico="linkedin"], [data-st-ico="discord"], [data-st-ico="windows"], [data-st-ico="microsoft"], [data-st-ico="google"], [data-st-ico="slack"], [data-st-ico="aws"], [data-st-ico="facebook"], [data-st-ico="npm"], [data-st-ico="confluence"], [data-st-tile="github"], [data-st-tile="apple"]) { --tm-c: 236 238 241; --tm-cx: #eceef1; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] i[data-st-ico]::before {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--tm-cx) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] i[data-st-ico] { color: var(--tm-cx) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] svg[data-st-ico] :is(path, circle, rect, polygon) { fill: var(--tm-cx) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-tile][data-st-tile][data-st-tile][data-st-tile] {
  background-color: rgb(var(--tm-c) / .07) !important; background-image: none !important;
  border-color: transparent !important; border-radius: var(--tm-r-sm) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--tm-c) / .3) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-tile] :is(svg[data-st-ico], i[data-st-ico]) { filter: none !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-pill] {
  background-color: rgb(var(--tm-c) / .07) !important; background-image: none !important;
  border-color: rgb(var(--tm-c) / .34) !important; color: var(--tm-cx) !important; box-shadow: none !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-pill] :not([data-st-ico], [data-st-ico] *) { color: var(--tm-cx) !important; -webkit-text-fill-color: currentColor; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] [data-st-pill] > :is(span, div):empty { background-color: var(--tm-cx) !important; background-image: none !important; box-shadow: 0 0 6px rgb(var(--tm-c) / .7) !important; }

/* ── 9. Code, forms, tables ─────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(pre, .code-block):not([data-st-own] *) { background-color: var(--tm-well) !important; border-color: var(--tm-line) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :not(pre) > code:not([data-st-own] *) { background-color: var(--tm-panel-2) !important; border-color: var(--tm-line-2) !important; color: var(--tm-ink) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([data-st-own] *) {
  background-color: var(--tm-well) !important; color: var(--tm-ink) !important; border-color: var(--tm-line-hi) !important; border-radius: var(--tm-r-sm) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(input, select, textarea):not([data-st-own] *):focus { border-color: var(--tm-amber) !important; box-shadow: 0 0 0 3px rgb(var(--tm-accent-rgb) / .18) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(input, textarea)::placeholder { color: var(--tm-muted) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--tm-amber); }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] table:not([data-st-own] *) th { font-family: var(--tm-mono); letter-spacing: .06em; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] :is(td, th):not([data-st-own] *) { border-color: var(--tm-line) !important; }

/* ── 10. Footer: the console's base plate ───────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer {
  background-color: var(--tm-well) !important; background-image: none !important; border-top: 1px solid var(--tm-line) !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer :is(h3, h4) {
  font-family: var(--tm-mono) !important; font-size: 11.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--tm-muted) !important; font-weight: 600 !important;
}
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer a:not([aria-label]) { color: var(--tm-mid) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer a:not([aria-label]):hover { color: var(--tm-amber) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer [class*="border-t"] { border-color: var(--tm-line) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer .text-emerald-400 { color: var(--tm-green) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer .text-emerald-400::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--tm-green); box-shadow: 0 0 0 0 rgb(74 222 128 / .6); animation: tm-led 2.2s ease-out infinite;
}
@keyframes tm-led { 0% { box-shadow: 0 0 0 0 rgb(74 222 128 / .55); } 100% { box-shadow: 0 0 0 8px rgb(74 222 128 / 0); } }

/* ── 11. Shared widgets ─────────────────────────────────────────────────────────────────────── */
/* Alina: the support widget's own colour contract, in console colours. */
html[data-theme="studio"][data-final="telemetry"] .alina-root[data-ctx="public"] {
  --a-surface: var(--tm-panel); --a-raised: var(--tm-panel-2); --a-raised2: #1b1f24;
  --a-line: var(--tm-line-2); --a-line2: var(--tm-line-hi); --a-codebg: var(--tm-well);
  --a-shadow: 0 30px 70px -20px rgb(0 0 0 / .9), 0 4px 14px -6px rgb(0 0 0 / .7);
}
/* Scrollbars on charcoal. */
html:where([data-theme="studio"][data-final="telemetry"]) ::-webkit-scrollbar-track { background-color: var(--tm-bg); }
html:where([data-theme="studio"][data-final="telemetry"]) ::-webkit-scrollbar-thumb { background-color: #2c3138; }
html:where([data-theme="studio"][data-final="telemetry"]) ::-webkit-scrollbar-thumb:hover { background-color: #4a515c; }
html[data-theme="studio"][data-final="telemetry"] ::selection { background-color: var(--tm-amber); color: var(--tm-amber-ink); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="studio"][data-final="telemetry"][data-studio-page] footer .text-emerald-400::before { animation: none; }
}

/* ── 12. Page specifics (literal light-paper colours in tailwind/studio-fixes/) ─────────────── */
/* developer-sdk: the tool cards' mono subtitles and the cost chart's "direct" trace. */
html[data-theme="studio"][data-final="telemetry"][data-studio-page="developer-sdk"] #tool-cards-grid p.font-mono.opacity-70 { color: var(--tm-amber) !important; opacity: .9 !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page="developer-sdk"] #tool-cards-grid p.font-mono.opacity-70.text-green-400 { color: var(--tm-green) !important; }
html[data-theme="studio"][data-final="telemetry"][data-studio-page="developer-sdk"] #costSavingsPlotly .scatterlayer .trace:first-child .js-line { stroke: var(--tm-red) !important; }