/* Studio Night: the one Gully Studio theme, straight from the GullyStudio brand kit (sites/_shared/studio-brand,
   CLAUDE_INTEGRATION_PROMPT.md section 6). Navy #06121F ground, #07121F cards, Studio blue #1E8BFF accent, cyan
   #19D3FF highlight, green #2EE68A success, silver #E8EEF5 text, muted #8FA6C2, the studio gradient, Montserrat
   800 headings / 600 labels. The kit logo is made for dark grounds only, so every Gully Studio surface is dark.
   Used by gullystudio.xyz (studio-page.mjs), dev.gullystudio.xyz incl. /console, docs.gullystudio.xyz and the
   studio admin (gully/gullystudio-admin). Loaded LAST, after design/terminal tokens + components (the landing and the
   product switcher) and sites/_studio/studio.css (the portals). Replaces studio-light.css + studio-terminal.css.
   Source: gully-ops sites/_studio/studio-night.css (written by kit.mjs writeStudioNight). Text pairs are WCAG AA. */

html[data-product="studio"] {
  /* ---- GullyStudio kit ---- */
  --gs-navy: #06121F; --gs-navy-2: #07121F; --gs-blue: #1E8BFF; --gs-blue-deep: #1E6FFF; --gs-cyan: #19D3FF;
  --gs-green: #2EE68A; --gs-silver: #E8EEF5; --gs-muted: #8FA6C2;
  --gs-studio-gradient: linear-gradient(180deg, #19D3FF 0%, #1E6FFF 100%);
  --gs-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ---- derived (navy steps, all text on them >= 4.5:1) ---- */
  --gs-raise: #0A1830; --gs-raise-2: #0D1C30; --gs-hover: #102240;
  --gs-text-2: #C9D5E3; --gs-faint: #7D93B0; --gs-link: #5AB0FF;
  --line: #13243B; --line2: #1C324F; --surface: var(--gs-raise); --grid: #0D1C30; --down: #FF8A80; --warn: #FFC857;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ---- Gully Terminal tokens (landing, product switcher, chart kit) on the kit ---- */
  --t-bg: var(--gs-navy); --t-surface: var(--gs-navy-2); --t-surface-2: var(--gs-raise);
  --t-line: var(--line); --t-line-strong: var(--line2); --t-grid: rgba(143, 166, 194, .09);
  --t-text: var(--gs-silver); --t-muted: var(--gs-muted); --t-faint: var(--gs-faint);
  --t-up: var(--gs-green); --t-down: var(--down); --t-warn: var(--warn); --t-idle: var(--gs-faint);
  --t-accent: var(--gs-blue); --t-accent-2: var(--gs-cyan); --t-on-accent: var(--gs-navy);
  --t-cyan: var(--gs-cyan); --t-blue: var(--gs-blue);
  --t-accent-soft: rgba(30, 139, 255, .14); --t-accent-line: rgba(30, 139, 255, .45);
  --t-s1: var(--gs-cyan); --t-s2: var(--gs-blue); --t-s3: var(--gs-muted); --t-s4: var(--gs-text-2); --t-s5: #2B4466;
  --t-font-sans: var(--gs-font); --t-font-label: var(--gs-font); --t-font-mono: var(--mono);
  --t-topbar-h: 72px; --t-r: 10px; --t-r-sm: 6px;

  /* ---- names the landing and the mascot card read ---- */
  --sl-bg: var(--gs-navy); --sl-surface: var(--gs-raise); --sl-surface-2: var(--gs-raise-2); --sl-hover: var(--gs-hover);
  --sl-border: var(--line); --sl-border-strong: var(--line2); --sl-divider: #0F1F35; --sl-night: var(--gs-navy-2);
  --sl-text: var(--gs-silver); --sl-text-2: var(--gs-text-2); --sl-muted: var(--gs-muted);
  --sl-accent: var(--gs-blue); --sl-on-accent: var(--gs-navy); --sl-accent-soft: rgba(30, 139, 255, .14);
  --sl-link: var(--gs-link); --sl-link-hover: #8CC7FF;
  --sl-ok: var(--gs-green); --sl-warn: var(--warn); --sl-danger: var(--down);
  --sl-s1: var(--gs-cyan); --sl-s2: var(--gs-blue); --sl-s5: #2B4466;
  --sl-font: var(--gs-font); --sl-font-mono: var(--mono);
  --sl-r-sm: 8px; --sl-r: 10px; --sl-r-md: 12px; --sl-r-lg: 14px; --sl-r-xl: 20px; --sl-r-pill: 999px;
  --sl-ease: cubic-bezier(.2, .8, .2, 1); --sl-dur: 160ms;
  color-scheme: dark;
  background: var(--gs-navy);
}
html[data-product="studio"] body { background: var(--gs-navy); color: var(--gs-silver); font-family: var(--gs-font); }
[data-product="studio"] h1, [data-product="studio"] h2, [data-product="studio"] h3, [data-product="studio"] h4 { font-family: var(--gs-font); font-weight: 800; letter-spacing: -.02em; }
[data-product="studio"] em.g, [data-product="studio"] .t-h1 em, [data-product="studio"] .ph h1 em {
  font-style: normal; background: var(--gs-studio-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-product="studio"] a { color: inherit; }
[data-product="studio"] :focus-visible { outline: 2px solid var(--gs-cyan); outline-offset: 2px; }
[data-product="studio"] code, [data-product="studio"] kbd, [data-product="studio"] pre { font-family: var(--mono); }

/* labels: Montserrat 600, kit muted; the accent label in cyan */
[data-product="studio"] .lab, [data-product="studio"] .t-label, [data-product="studio"] .t-footer h4, [data-product="studio"] th, [data-product="studio"] .k {
  font-family: var(--gs-font) !important; font-weight: 600 !important; color: var(--gs-muted); letter-spacing: .04em;
}
[data-product="studio"] .lab.cy, [data-product="studio"] .t-label--accent { color: var(--gs-cyan) !important; }
[data-product="studio"] .lab .ic, [data-product="studio"] .t-label .t-ic { color: var(--gs-cyan); }
[data-product="studio"] .t-eyebrow { font-family: var(--gs-font) !important; font-weight: 600; color: var(--gs-cyan); background: rgba(25, 211, 255, .08); border: 1px solid rgba(25, 211, 255, .25); border-radius: 999px; padding: 4px 12px; align-self: flex-start; }
[data-product="studio"] .t-kpi-s, [data-product="studio"] .t-panel-foot, [data-product="studio"] .muted { color: var(--gs-muted); }

/* ---- logo: the kit PNG byte for byte, 2070:593, on the kit navy (header 207x59 = 1/10 scale) ---- */
.gs-tile { display: inline-flex; align-items: center; flex: none; background: var(--gs-navy, #06121F); border-radius: 8px; line-height: 0; padding: 0; }
.gs-tile img, .logo .gs-tile img, .nav .logo .gs-tile img { display: block; width: 207px !important; height: auto !important; aspect-ratio: 2070 / 593; max-width: none; border-radius: 0 !important; }
a:focus-visible > .gs-tile { outline: 2px solid var(--gs-cyan); outline-offset: 3px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .ptag { font: 600 12px/1 var(--gs-font) !important; letter-spacing: .04em !important; text-transform: none !important; color: var(--gs-cyan) !important; background: rgba(25, 211, 255, .08) !important; border: 1px solid rgba(25, 211, 255, .25) !important; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav .gs-tile img { width: 166px !important; } }
@media (max-width: 480px) { .nav .logo .ptag { display: none; } .gs-tile img, .logo .gs-tile img, .nav .logo .gs-tile img { width: 166px !important; } }

/* ---- header (portals): 72 px, navy glass ---- */
[data-product="studio"] .nav { background: rgba(6, 18, 31, .9) !important; border-bottom: 1px solid var(--line) !important; }
[data-product="studio"] .nav .wrap { height: 72px; }
[data-product="studio"] .mnav { background: var(--gs-navy) !important; border-bottom: 1px solid var(--line); }
[data-product="studio"] .nav .t-switch { margin-left: 6px; }
@media (max-width: 1199px) { [data-product="studio"] .nav .t-switch > summary span { display: none; } }
@media (max-width: 420px) { [data-product="studio"] .nav .t-switch { display: none; } }
@media (min-width: 1024px) and (max-width: 1600px) { [data-product="studio"] .nl a { padding: 0 8px; gap: 6px; font-size: 13px; } [data-product="studio"] .nl { gap: 0; } }

/* ---- navigation icons (owner rule): Lucide, 20 px, stroke 1.75, muted; Studio blue on the current item ---- */
[data-product="studio"] :is(.nl, .mnav, .t-nav, .t-menu-panel, .sg, .c-side, .foot ul) :is(.ic, .t-ic) {
  width: 20px !important; height: 20px !important; stroke-width: 1.75 !important; color: var(--gs-muted);
}
[data-product="studio"] :is(.nl, .mnav, .t-nav, .t-menu-panel, .sg, .c-side-links) a:is([aria-current], :hover) :is(.ic, .t-ic),
[data-product="studio"] .c-side [role="tab"]:is([aria-selected="true"], :hover) .ic { color: var(--gs-blue) !important; }
[data-product="studio"] :is(.nl, .mnav) a { color: var(--gs-muted); }
[data-product="studio"] :is(.nl, .mnav) a:is(:hover, [aria-current]) { color: var(--gs-silver); background: var(--gs-raise); }
[data-product="studio"] .nl a[aria-current] { box-shadow: inset 0 -2px 0 var(--gs-blue); }
/* the inline menu needs the room of a 1280 px screen with Open Console + Sign in with Gully ID beside it; below that the
   menu button opens the drawer, which carries both actions first (labels always kept) */
@media (min-width: 1024px) and (max-width: 1279px) {
  [data-product="studio"] .nl { display: none !important; }
  [data-product="studio"] .mbtn { display: inline-flex !important; }
  [data-product="studio"] .mnav:not([hidden]) { display: block !important; }
}
@media (max-width: 1799px) { [data-product="studio"] .nav .t-switch > summary span { display: none; } [data-product="studio"] .nav .pill { display: none !important; } }
@media (max-width: 1599px) { [data-product="studio"] .nav .logo .ptag { display: none; } }

/* ---- header call to action: Open Console (primary) + Sign in with Gully ID ---- */
.gs-cta { display: inline-flex; align-items: center; gap: 8px; }
.gs-cta .gs-signin { display: none; }
@media (min-width: 1600px) { .gs-cta .gs-signin { display: inline-flex; } }
@media (max-width: 560px) { [data-product="studio"] .nav .gs-cta .btn.pri { display: inline-flex !important; padding: 0 12px; } .gs-cta .gs-lg { display: none; } }
.mnav .gs-mcta { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.mnav .gs-mcta .btn { flex: 1 1 160px; }

/* ---- buttons: kit pills, Studio blue with navy text (5.4:1), quiet outlines ---- */
[data-product="studio"] .btn.pri, [data-product="studio"] .t-btn--primary { background: var(--gs-blue) !important; border-color: var(--gs-blue) !important; color: var(--gs-navy) !important; }
[data-product="studio"] .btn.pri .ic, [data-product="studio"] .t-btn--primary .t-ic { color: var(--gs-navy) !important; }
[data-product="studio"] .btn.pri:hover, [data-product="studio"] .t-btn--primary:hover { background: #4AA2FF !important; border-color: #4AA2FF !important; }
[data-product="studio"] .t-btn { border-radius: 999px; font-family: var(--gs-font); font-weight: 600; }
[data-product="studio"] .t-btn:not(.t-btn--primary) { background: transparent; color: var(--gs-silver); border-color: var(--line2); }
[data-product="studio"] .t-btn:not(.t-btn--primary):hover { border-color: var(--gs-blue); color: var(--gs-silver); }
[data-product="studio"] .t-btn--secondary { border-color: var(--gs-blue) !important; }

/* ---- tabs, segmented controls, steppers ---- */
[data-product="studio"] .tabs [role="tab"][aria-selected="true"], [data-product="studio"] .t-seg [aria-pressed="true"], [data-product="studio"] .t-seg [aria-selected="true"] {
  background: rgba(30, 139, 255, .16) !important; color: var(--gs-silver) !important; border-color: var(--gs-blue) !important;
}
[data-product="studio"] .tabs [role="tab"][aria-selected="true"] .ic { color: var(--gs-blue); }

/* ---- panels, cards, tiles ---- */
[data-product="studio"] :is(.t-panel, .t-kpi, .term, .card, .lc, .stats .tile, .callout, .tbl) { background: var(--gs-navy-2); border-color: var(--line) !important; }
[data-product="studio"] .t-kpis { background: transparent; border-color: var(--line); }
[data-product="studio"] .t-panel-head, [data-product="studio"] .term .th { background: var(--gs-raise); border-bottom-color: var(--line); }
[data-product="studio"] .card:hover, [data-product="studio"] .stats .tile:hover { border-color: var(--gs-blue) !important; }
[data-product="studio"] .cmd, [data-product="studio"] .code, [data-product="studio"] pre { background: var(--gs-raise); border-color: var(--line); color: var(--gs-silver); }
[data-product="studio"] .tag, [data-product="studio"] .t-tag { font-family: var(--gs-font); font-weight: 600; }
[data-product="studio"] .pill, [data-product="studio"] .t-pill { font-family: var(--gs-font); }
[data-product="studio"] .pill.live .dot, [data-product="studio"] .pill.ok .dot { background: var(--gs-green); }
[data-product="studio"] .badge { font-family: var(--gs-font) !important; color: var(--gs-cyan); background: rgba(25, 211, 255, .08); border-color: rgba(25, 211, 255, .25); }

/* ---- charts: cyan line over a blue fade (studio.js, chart-kit) ---- */
[data-product="studio"] .ln { stroke: var(--gs-cyan) !important; stroke-width: 1.75 !important; }
[data-product="studio"] .at { fill: var(--gs-faint) !important; font-family: var(--mono) !important; }
[data-product="studio"] .spark .l { stroke: var(--gs-cyan) !important; }

/* ---- ticker + switcher (landing) ---- */
[data-product="studio"] .t-topbar { background: rgba(6, 18, 31, .9); border-bottom: 1px solid var(--line); }
[data-product="studio"] .t-ticker { background: var(--gs-navy-2); border-bottom: 1px solid var(--line); }
[data-product="studio"] .t-ticker-lb { color: var(--gs-cyan); }
[data-product="studio"] .t-switch > summary { color: var(--gs-text-2); border-color: var(--line2); border-radius: 999px; font-family: var(--gs-font); }
[data-product="studio"] .t-switch-menu { background: var(--gs-navy-2); border-color: var(--line2); }

/* ---- forms (console) ---- */
[data-product="studio"] .c-in, [data-product="studio"] select.c-in { background-color: var(--gs-navy) !important; color: var(--gs-silver) !important; border-color: var(--line2) !important; border-radius: 8px !important; }
[data-product="studio"] select.c-in option { background: var(--gs-navy-2); color: var(--gs-silver); }

/* ---- footer + Powered by Gully Labs (kit dark badge, byte-exact) ---- */
[data-product="studio"] .foot, [data-product="studio"] .t-footer { background: var(--gs-navy) !important; border-top: 1px solid var(--line) !important; color: var(--gs-muted); }
[data-product="studio"] .foot a, [data-product="studio"] .t-footer a { color: var(--gs-text-2); }
[data-product="studio"] .foot a:hover, [data-product="studio"] .t-footer a:hover { color: var(--gs-silver); }
[data-product="studio"] .foot .fb .tag { color: var(--gs-muted); }
[data-product="studio"] .badge-gl img, [data-product="studio"] .t-badge img { width: 127px !important; height: 32px !important; }

/* ---- Gully Studio mascot card (kit art has its own navy ground) ---- */
.sl-mascot { margin: 0; position: relative; min-height: 220px; border-radius: 20px; overflow: hidden; background: var(--gs-navy-2); border: 1px solid var(--line); isolation: isolate; }
.sl-mascot > img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; display: block; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); transform-origin: 60% 100%; animation: gs-idle 5s ease-in-out infinite; }
.sl-mascot:hover > img { animation-play-state: paused; }
.sl-mascot .sl-say { position: absolute; left: 14px; top: 14px; max-width: 220px; background: var(--gs-silver); color: var(--gs-navy); border-radius: 14px 14px 14px 4px; padding: 9px 11px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sl-mascot .sl-say-2 { display: none; }
.sl-mascot:hover .sl-say-1, .sl-mascot:focus-within .sl-say-1 { display: none; }
.sl-mascot:hover .sl-say-2, .sl-mascot:focus-within .sl-say-2 { display: inline; }
.sl-mascot .sl-float { position: absolute; left: 14px; bottom: 14px; background: rgba(7, 18, 31, .92); border: 1px solid var(--line2); color: var(--gs-silver); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sl-mascot .sl-float span { color: var(--gs-muted); }
.sl-mascot .sl-float b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-bob { animation: sl-bob 3.2s ease-in-out infinite; }
@keyframes gs-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes sl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Gully Ads card ---- */
.gs-promo { display: flex; flex-direction: column; gap: 10px; }
.gs-promo p { color: var(--gs-text-2); font-size: 13.5px; margin: 0; }
.gs-promo .ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.gs-promo .gs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: s; }
.gs-promo .gs-steps li { counter-increment: s; display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--gs-text-2); }
.gs-promo .gs-steps li::before { content: counter(s); flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gs-blue); color: var(--gs-navy); font: 700 11px/1 var(--gs-font); }

/* ---- Studio Console: sidebar with icons ---- */
.c-mascot { min-height: 230px; }
.c-mascot .sl-say { max-width: min(300px, 60%); }
.c-shell { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1024px) { .c-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; } }
.c-side { background: var(--gs-navy-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 1024px) { .c-side { position: sticky; top: 88px; } }
.c-side-h { margin: 8px 8px 4px; font: 600 11.5px/1.2 var(--gs-font); letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); }
.c-side .tabs { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.c-side .tabs [role="tab"], .c-side-links a { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 0 !important; border-radius: 8px; background: transparent; color: var(--gs-muted); font: 600 14px var(--gs-font); text-decoration: none; text-align: left; cursor: pointer; }
.c-side .tabs [role="tab"]:hover, .c-side-links a:hover { background: var(--gs-raise) !important; color: var(--gs-silver); }
.c-side .tabs [role="tab"][aria-selected="true"] { background: rgba(30, 139, 255, .14) !important; color: var(--gs-silver) !important; box-shadow: inset 3px 0 0 var(--gs-blue); }
.c-side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.c-side hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; width: auto; }
/* panels beside the sidebar: two columns only when there is room for the keys table */
@media (max-width: 1599px) { .c-panels .grid2 { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 1023px) {
  .c-side { flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .c-side-h, .c-side hr, .c-side-links { display: none; }
  .c-side .tabs { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .c-side .tabs [role="tab"] { width: auto; flex: none; }
  .c-side .tabs [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--gs-blue); }
}

@media (prefers-reduced-motion: reduce) { .sl-mascot > img, .sl-bob { animation: none !important; } }

/* ---- docs drawer: the two console actions on top (desktop has them in the header) ---- */
html[data-product="studio"] { --top: 73px; }
.side .gs-side-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gs-mcta .gully-signin { flex: 1 1 200px; justify-content: center; }