/*
 * ORBITA interface refinement layer
 * Continuous color fields replace nested card borders while keeping every
 * existing component, route and interaction contract intact.
 */

:root {
  --orbita-refine-ink: #effff7;
  --orbita-refine-muted: rgba(220, 239, 235, 0.66);
  --orbita-refine-lime: #bfffd6;
  --orbita-refine-cyan: #7ee7ff;
  --orbita-refine-blue: #82a9ff;
  --orbita-refine-amber: #ffd68a;
  --orbita-refine-coral: #ff9e9a;
  --orbita-refine-focus: 0 0 0 2px rgba(126, 231, 255, 0.3), 0 0 28px rgba(126, 231, 255, 0.12);
  --orbita-refine-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Homepage: compact evidence cockpit + robot stage
   -------------------------------------------------------------------------- */

.orbita-experience-v4 .hero-stage.orbita-workbench-window {
  border: 0 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.055) !important;
  background:
    radial-gradient(circle at 78% 42%, rgba(75, 218, 255, 0.15), transparent 29%),
    radial-gradient(circle at 56% 88%, rgba(100, 255, 181, 0.11), transparent 30%),
    linear-gradient(145deg, rgba(8, 18, 24, 0.78), rgba(3, 8, 14, 0.48)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(142%);
  backdrop-filter: blur(34px) saturate(142%);
  border-radius: clamp(24px, 3vw, 42px) !important;
  isolation: isolate;
  overflow: hidden !important;
}

.orbita-experience-v4 .hero-stage.orbita-workbench-window::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(127, 210, 255, 0.1), transparent 24%) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.orbita-experience-v4 .hero-stage.orbita-workbench-window::after {
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(184, 255, 216, 0.12), transparent) !important;
  height: 1px !important;
  left: 8% !important;
  right: 8% !important;
  top: 46px !important;
  width: auto !important;
  opacity: 0.7 !important;
  pointer-events: none;
}

.orbita-experience-v4 .hero-stage .stage-toolbar {
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 0 !important;
  background: rgba(3, 9, 14, 0.18) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 12;
}

.orbita-experience-v4 .hero-stage .stage-grid-mesh {
  border: 0 !important;
  background-color: transparent !important;
  -webkit-mask-image: radial-gradient(ellipse at 64% 52%, #000 8%, rgba(0, 0, 0, 0.82) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse at 64% 52%, #000 8%, rgba(0, 0, 0, 0.82) 46%, transparent 78%);
  opacity: 0.34 !important;
}

.orbita-experience-v4 .hero-stage .mission-surface {
  border: 0 !important;
  box-shadow: inset 3px 0 0 var(--surface-accent, rgba(126, 231, 255, 0.82)) !important;
  border-radius: 18px !important;
  padding: 14px 15px 13px 17px !important;
  background:
    linear-gradient(100deg, var(--surface-wash, rgba(126, 231, 255, 0.13)), rgba(3, 11, 17, 0.3) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  overflow: hidden;
}

.orbita-experience-v4 .hero-stage .mission-surface.surface-a {
  --surface-accent: rgba(158, 255, 196, 0.92);
  --surface-wash: rgba(65, 231, 146, 0.17);
}

.orbita-experience-v4 .hero-stage .mission-surface.surface-b {
  --surface-accent: rgba(126, 231, 255, 0.94);
  --surface-wash: rgba(66, 168, 255, 0.17);
}

.orbita-experience-v4 .hero-stage .mission-surface.surface-c {
  --surface-accent: rgba(255, 211, 126, 0.94);
  --surface-wash: rgba(255, 177, 72, 0.15);
}

.orbita-experience-v4 .hero-stage .mission-surface h3,
.orbita-experience-v4 .hero-stage .mission-surface h4 {
  margin: 0 0 5px !important;
  font-size: clamp(0.81rem, 1vw, 0.95rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

.orbita-experience-v4 .hero-stage .mission-surface p {
  margin: 0 !important;
  font-size: clamp(0.66rem, 0.78vw, 0.76rem) !important;
  line-height: 1.48 !important;
  color: rgba(225, 241, 239, 0.68) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.orbita-experience-v4 .hero-stage .mission-surface .eyebrow,
.orbita-experience-v4 .hero-stage .mission-surface small,
.orbita-experience-v4 .hero-stage .mission-surface .surface-kicker {
  color: var(--surface-accent, var(--orbita-refine-cyan)) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
}

@media (min-width: 1100px) {
  .orbita-experience-v4 .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(468px, 0.86fr) !important;
    gap: clamp(38px, 4.5vw, 72px) !important;
  }

  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    height: 468px !important;
    min-height: 0 !important;
    align-self: center;
  }

  .orbita-experience-v4 .hero-stage .stage-grid-mesh {
    inset: 46px -5% 0 35% !important;
    width: auto !important;
    height: auto !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface {
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(42%, 226px) !important;
    height: 104px !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface.surface-a {
    top: 67px !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface.surface-b {
    top: 181px !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface.surface-c {
    top: 295px !important;
  }

  .orbita-experience-v4 .hero-stage .robot {
    left: 42% !important;
    right: 0 !important;
    top: 54px !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
}

@media (min-width: 680px) and (max-width: 1099px) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    height: clamp(450px, 54vw, 500px) !important;
    min-height: 0 !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface {
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(39%, 240px) !important;
    height: 100px !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface.surface-a { top: 66px !important; }
  .orbita-experience-v4 .hero-stage .mission-surface.surface-b { top: 176px !important; }
  .orbita-experience-v4 .hero-stage .mission-surface.surface-c { top: 286px !important; }
  .orbita-experience-v4 .hero-stage .stage-grid-mesh { inset: 46px -4% 0 31% !important; }
}

@media (max-width: 679px) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    height: 424px !important;
    min-height: 0 !important;
    border-radius: 26px !important;
  }

  .orbita-experience-v4 .hero-stage .stage-toolbar {
    min-height: 42px !important;
    padding-inline: 13px !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface {
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(51% - 10px) !important;
    height: 92px !important;
    min-height: 0 !important;
    padding: 11px 10px 10px 13px !important;
    border-radius: 15px !important;
    transform: none !important;
  }

  .orbita-experience-v4 .hero-stage .mission-surface.surface-a { top: 56px !important; }
  .orbita-experience-v4 .hero-stage .mission-surface.surface-b { top: 157px !important; }
  .orbita-experience-v4 .hero-stage .mission-surface.surface-c { top: 258px !important; }
  .orbita-experience-v4 .hero-stage .mission-surface p { -webkit-line-clamp: 2; font-size: 0.62rem !important; }
  .orbita-experience-v4 .hero-stage .stage-grid-mesh { inset: 42px -20% 0 30% !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    animation: orbita-stage-breathe 12s ease-in-out infinite alternate;
  }

  @keyframes orbita-stage-breathe {
    from { background-position: 0% 42%, 30% 100%, 0 0; }
    to { background-position: 7% 38%, 24% 94%, 0 0; }
  }
}

/* --------------------------------------------------------------------------
   ORBITA admin: continuous, color-zoned editing canvas
   -------------------------------------------------------------------------- */

.studio {
  background:
    radial-gradient(circle at 14% 8%, rgba(63, 227, 164, 0.11), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(72, 155, 255, 0.12), transparent 31%),
    #05090d !important;
  color: var(--orbita-refine-ink);
}

.studio .glass,
.studio .sidebar.glass,
.studio .topbar.glass,
.studio .manager.glass,
.studio .document-center.glass,
.studio .assets.glass {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.studio .sidebar.glass {
  background:
    radial-gradient(circle at 20% 10%, rgba(82, 255, 183, 0.16), transparent 28%),
    linear-gradient(168deg, rgba(10, 30, 29, 0.94), rgba(6, 14, 21, 0.92) 58%, rgba(9, 17, 27, 0.9)) !important;
  border-radius: 30px !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
}

.studio .topbar.glass {
  background: linear-gradient(100deg, rgba(18, 31, 36, 0.72), rgba(9, 17, 26, 0.46)) !important;
  border-radius: 24px !important;
  -webkit-backdrop-filter: blur(28px) saturate(138%);
  backdrop-filter: blur(28px) saturate(138%);
  min-height: 72px !important;
  padding-block: 12px !important;
}

.studio .manager.glass,
.studio .document-center.glass,
.studio .assets.glass {
  background:
    radial-gradient(circle at 76% 12%, rgba(81, 164, 255, 0.09), transparent 25%),
    linear-gradient(145deg, rgba(11, 21, 28, 0.84), rgba(5, 11, 17, 0.8)) !important;
  border-radius: 28px !important;
  overflow: hidden;
}

.studio .master {
  border: 0 !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(75, 218, 255, 0.11), transparent 28%),
    linear-gradient(180deg, rgba(8, 25, 31, 0.7), rgba(7, 16, 23, 0.42)) !important;
  box-shadow: none !important;
}

.studio .detail {
  border: 0 !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(157, 255, 197, 0.085), transparent 26%),
    linear-gradient(135deg, rgba(8, 17, 24, 0.55), rgba(8, 14, 21, 0.24)) !important;
  box-shadow: none !important;
}

.studio .sidebar button,
.studio .sidebar a,
.studio .master button,
.studio .master a {
  border-color: transparent !important;
  box-shadow: none !important;
}

.studio .sidebar button:hover,
.studio .sidebar a:hover,
.studio .master button:hover,
.studio .master a:hover {
  background: rgba(126, 231, 255, 0.08) !important;
}

.studio .sidebar .active,
.studio .sidebar .is-active,
.studio .sidebar [aria-current="page"],
.studio .master .active,
.studio .master .is-active,
.studio .master [aria-selected="true"] {
  border: 0 !important;
  background: linear-gradient(100deg, rgba(164, 255, 200, 0.16), rgba(92, 180, 255, 0.08)) !important;
  color: #f3fff8 !important;
  box-shadow: inset 3px 0 0 rgba(178, 255, 208, 0.92) !important;
}

.studio input,
.studio textarea,
.studio select,
.studio [contenteditable="true"] {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(3, 12, 18, 0.62) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045) !important;
}

.studio input:focus,
.studio textarea:focus,
.studio select:focus,
.studio [contenteditable="true"]:focus {
  box-shadow: var(--orbita-refine-focus) !important;
}

.studio .eu-button-primary,
.studio .primary,
.studio button[type="submit"] {
  border: 0 !important;
  background: linear-gradient(115deg, #c8ffda, #88efbb) !important;
  color: #06130c !important;
  box-shadow: 0 12px 32px rgba(113, 255, 174, 0.13) !important;
}

.studio .eu-button-primary:hover,
.studio .primary:hover,
.studio button[type="submit"]:hover {
  background: linear-gradient(115deg, #ddffe8, #9affc6) !important;
  color: #020a06 !important;
}

.studio .voice-hero {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border: 0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(126, 231, 255, 0.2), transparent 28%),
    radial-gradient(circle at 58% 100%, rgba(174, 255, 205, 0.12), transparent 30%),
    linear-gradient(130deg, rgba(13, 35, 39, 0.94), rgba(7, 16, 28, 0.9)) !important;
  box-shadow: none !important;
}

.studio .voice-hero h1,
.studio .voice-hero h2 {
  max-width: 13ch;
  margin-bottom: 12px !important;
  font-size: clamp(2rem, 3.5vw, 3.15rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.052em !important;
}

.studio .voice-hero p {
  max-width: 58ch;
  color: rgba(225, 241, 239, 0.67) !important;
  line-height: 1.62 !important;
}

.studio .voice-global,
.studio .voice-profile,
.studio .voice-vad,
.studio .voice-profile-grid,
.studio .lab-section,
.studio .settings-card,
.studio .editor-panel {
  border: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(145deg, rgba(19, 37, 41, 0.7), rgba(7, 16, 24, 0.5)) !important;
}

.studio .voice-global {
  background: linear-gradient(100deg, rgba(78, 220, 160, 0.13), rgba(20, 48, 58, 0.48)) !important;
}

.studio .voice-vad {
  background:
    radial-gradient(circle at 94% 4%, rgba(255, 201, 119, 0.1), transparent 24%),
    linear-gradient(145deg, rgba(29, 34, 35, 0.68), rgba(8, 17, 23, 0.48)) !important;
}

.studio .auth-card {
  border: 0 !important;
  background: linear-gradient(145deg, rgba(15, 31, 35, 0.92), rgba(6, 13, 21, 0.88)) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34) !important;
}

@media (min-width: 1024px) {
  .studio {
    grid-template-columns: 244px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .studio .sidebar.glass {
    margin: 0 !important;
    width: auto !important;
    height: calc(100vh - 24px) !important;
  }

  .studio .workspace {
    min-width: 0;
    gap: 10px !important;
  }

  .studio .topbar.glass {
    margin: 0 !important;
  }

  .studio .manager.glass {
    margin: 0 !important;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 2fr) !important;
  }

  .studio .voice-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(230px, 0.9fr) !important;
  }
}

@media (max-width: 1023px) {
  .studio .voice-hero h1,
  .studio .voice-hero h2 {
    max-width: 16ch;
  }
}

/* --------------------------------------------------------------------------
   Intelligence studio: provider color fields instead of nested panels
   -------------------------------------------------------------------------- */

.oi-shell {
  background:
    radial-gradient(circle at 8% 5%, rgba(87, 255, 184, 0.1), transparent 24%),
    radial-gradient(circle at 92% 13%, rgba(73, 154, 255, 0.11), transparent 27%),
    #05090d !important;
  color: var(--orbita-refine-ink);
}

.oi-shell .oi-topbar {
  border: 0 !important;
  background: rgba(7, 15, 21, 0.64) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
}

.oi-shell .oi-sidebar {
  border: 0 !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(94, 255, 185, 0.14), transparent 26%),
    linear-gradient(175deg, rgba(9, 29, 28, 0.96), rgba(6, 14, 22, 0.94) 56%, rgba(10, 16, 27, 0.94)) !important;
  box-shadow: none !important;
}

.oi-shell .oi-main {
  background:
    radial-gradient(circle at 82% 7%, rgba(103, 183, 255, 0.075), transparent 23%),
    linear-gradient(140deg, rgba(7, 14, 20, 0.76), rgba(5, 10, 16, 0.42)) !important;
}

.oi-shell .oi-nav button,
.oi-shell .oi-nav a {
  border: 0 !important;
  box-shadow: none !important;
}

.oi-shell .oi-nav button:hover,
.oi-shell .oi-nav a:hover {
  background: rgba(126, 231, 255, 0.075) !important;
}

.oi-shell .oi-nav .active,
.oi-shell .oi-nav .is-active,
.oi-shell .oi-nav [aria-current="page"] {
  border: 0 !important;
  background: linear-gradient(100deg, rgba(164, 255, 200, 0.16), rgba(83, 178, 255, 0.075)) !important;
  box-shadow: inset 3px 0 0 rgba(186, 255, 214, 0.92) !important;
}

.oi-shell .orc-status article,
.oi-shell .orc-group,
.oi-shell .orc-audit {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.oi-shell .orc-status article {
  background: linear-gradient(135deg, rgba(52, 190, 132, 0.13), rgba(10, 28, 33, 0.58)) !important;
  border-radius: 18px !important;
}

.oi-shell .orc-status article:nth-child(2) {
  background: linear-gradient(135deg, rgba(76, 159, 255, 0.14), rgba(10, 25, 40, 0.58)) !important;
}

.oi-shell .orc-status article:nth-child(3) {
  background: linear-gradient(135deg, rgba(255, 188, 92, 0.13), rgba(36, 25, 16, 0.55)) !important;
}

.oi-shell .orc-group {
  --orc-accent-rgb: 95, 226, 168;
  --orc-accent: rgb(var(--orc-accent-rgb));
  margin-bottom: 14px !important;
  border-radius: 26px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 2%, rgba(var(--orc-accent-rgb), 0.16), transparent 24%),
    linear-gradient(145deg, rgba(var(--orc-accent-rgb), 0.07), rgba(8, 17, 24, 0.66) 52%, rgba(5, 12, 18, 0.72)) !important;
}

.oi-shell .orc-group:nth-of-type(2) { --orc-accent-rgb: 92, 158, 255; }
.oi-shell .orc-group:nth-of-type(3) { --orc-accent-rgb: 255, 192, 103; }
.oi-shell .orc-group:nth-of-type(4) { --orc-accent-rgb: 81, 221, 244; }
.oi-shell .orc-group:nth-of-type(5) { --orc-accent-rgb: 255, 132, 151; }
.oi-shell .orc-group:nth-of-type(6) { --orc-accent-rgb: 75, 222, 186; }
.oi-shell .orc-group:nth-of-type(7) { --orc-accent-rgb: 183, 255, 134; }

.oi-shell .orc-group > header,
.oi-shell .orc-group .orc-group-head,
.oi-shell .orc-group .orc-fields,
.oi-shell .orc-group .orc-field {
  border: 0 !important;
  box-shadow: none !important;
}

.oi-shell .orc-group > header,
.oi-shell .orc-group .orc-group-head {
  padding: 20px 22px 13px !important;
  background: transparent !important;
}

.oi-shell .orc-group > header::before,
.oi-shell .orc-group .orc-group-head::before {
  background: var(--orc-accent) !important;
  box-shadow: 0 0 22px rgba(var(--orc-accent-rgb), 0.36) !important;
}

.oi-shell .orc-group .orc-fields {
  gap: 2px !important;
  padding: 0 10px 10px !important;
  background: transparent !important;
}

.oi-shell .orc-group .orc-field {
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(2, 10, 16, 0.34) !important;
}

.oi-shell .orc-group .orc-field:hover {
  background: rgba(var(--orc-accent-rgb), 0.055) !important;
}

.oi-shell .orc-group input,
.oi-shell .orc-group textarea,
.oi-shell .orc-group select {
  border: 0 !important;
  outline: 0 !important;
  background: rgba(1, 8, 13, 0.68) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045) !important;
}

.oi-shell .orc-group input:focus,
.oi-shell .orc-group textarea:focus,
.oi-shell .orc-group select:focus {
  box-shadow: 0 0 0 2px rgba(var(--orc-accent-rgb), 0.3), 0 0 28px rgba(var(--orc-accent-rgb), 0.11) !important;
}

.oi-shell .orc-group button,
.oi-shell .orc-group .orc-action {
  border: 0 !important;
  background: rgba(var(--orc-accent-rgb), 0.13) !important;
  color: rgb(var(--orc-accent-rgb)) !important;
  box-shadow: none !important;
}

.oi-shell .orc-group button:hover,
.oi-shell .orc-group .orc-action:hover {
  background: rgba(var(--orc-accent-rgb), 0.22) !important;
  color: #f5fff9 !important;
}

.oi-shell .orc-audit {
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(90, 118, 159, 0.1), rgba(7, 15, 22, 0.66)) !important;
}

.oi-shell .oi-primary,
.oi-shell button[type="submit"] {
  border: 0 !important;
  background: linear-gradient(115deg, #c9ffdb, #8cf0bc) !important;
  color: #05130b !important;
  box-shadow: 0 14px 36px rgba(102, 255, 166, 0.12) !important;
}

@media (min-width: 1000px) {
  .oi-shell {
    grid-template-columns: 252px minmax(0, 1fr) !important;
  }

  .oi-shell .oi-main {
    padding-inline: clamp(30px, 4vw, 58px) !important;
  }
}

@media (max-width: 999px) {
  .oi-shell .orc-group .orc-fields {
    gap: 4px !important;
  }
}

@media (max-width: 680px) {
  .oi-shell .orc-group {
    border-radius: 20px !important;
  }

  .oi-shell .orc-group > header,
  .oi-shell .orc-group .orc-group-head {
    padding: 17px 16px 11px !important;
  }

  .oi-shell .orc-group .orc-field {
    padding: 14px 12px !important;
  }
}

/* Mobile navigation is a single intentional control surface, not compressed
   desktop navigation. The wrapper uses display:contents above the breakpoint. */
.mobile-nav-surface {
  display: contents;
}

@media (max-width: 679px) {
  body.orbita-experience-v4 .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 7px 8px 7px 12px !important;
    overflow: visible !important;
  }

  body.orbita-experience-v4 .site-header .brand {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
  }

  body.orbita-experience-v4 .site-header .brand > span:last-child {
    min-width: 0;
  }

  body.orbita-experience-v4 .site-header .brand b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.orbita-experience-v4 .menu-button {
    display: inline-flex !important;
    min-width: 62px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: linear-gradient(115deg, rgba(191, 255, 214, .15), rgba(91, 180, 255, .1)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  }

  body.orbita-experience-v4 .mobile-nav-surface {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 0;
    border-radius: 22px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 88% 0%, rgba(108, 207, 255, .13), transparent 34%),
      linear-gradient(145deg, rgba(10, 25, 31, .97), rgba(4, 11, 18, .96));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .065);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
    backdrop-filter: blur(30px) saturate(145%);
    transform: translateY(-8px) scale(.985);
    transform-origin: 50% 0;
    transition: opacity .2s ease, transform .28s var(--orbita-refine-ease), visibility .2s;
  }

  body.orbita-experience-v4 .site-header.menu-open .mobile-nav-surface {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  body.orbita-experience-v4 .mobile-nav-surface #siteNav {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px !important;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.orbita-experience-v4 .mobile-nav-surface #siteNav a {
    display: flex;
    min-height: 46px;
    align-items: center;
    border-radius: 13px;
    padding: 0 13px;
    color: rgba(230, 244, 241, .8);
    background: rgba(3, 12, 18, .34);
  }

  body.orbita-experience-v4 .mobile-nav-surface #siteNav a:hover,
  body.orbita-experience-v4 .mobile-nav-surface #siteNav a:focus-visible {
    color: #f4fff9;
    background: linear-gradient(100deg, rgba(157, 255, 197, .13), rgba(88, 180, 255, .075));
    outline: 0;
  }

  body.orbita-experience-v4 .mobile-nav-surface .header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px !important;
    width: 100%;
    padding-top: 9px;
    border-top: 1px solid rgba(143, 221, 240, .1);
  }

  body.orbita-experience-v4 .mobile-nav-surface .header-actions > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.orbita-experience-v4 .mobile-nav-surface .system-state {
    grid-column: 1 / -1;
    min-height: 34px;
    color: rgba(199, 230, 221, .64);
  }

  body.mobile-menu-open .robot-three-canvas {
    opacity: .2 !important;
  }

  body.mobile-menu-open .three-robot-status,
  body.mobile-menu-open .three-robot-hit-target {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.has-three-robot .three-robot-hit-target,
  body.has-three-robot .three-robot-status {
    --robot-x: var(--orbita-runtime-robot-x, 84vw) !important;
    --robot-y: var(--orbita-runtime-robot-y, 82vh) !important;
  }
}

/* Shared geometry contract consumed by site-three.js. Values are unitless so
   the renderer can convert the stage-local declaration into viewport space. */
.orbita-experience-v4 .hero-stage.orbita-workbench-window {
  --orbita-hero-evidence-end: 0.46;
  --orbita-hero-evidence-end-percent: 46%;
  --orbita-hero-robot-anchor-x: 0.78;
  --orbita-hero-robot-anchor-y: 0.56;
  --orbita-hero-robot-scale: 0.40;
}

body.has-three-robot .three-robot-hit-target[data-route="hero"],
body.has-three-robot .three-robot-status[data-route="hero"] {
  --robot-x: var(--orbita-hero-screen-x, 86vw);
  --robot-y: var(--orbita-hero-screen-y, 56vh);
}

body.has-three-robot .three-robot-hit-target[data-route="hero"] {
  --robot-hit-width: 212px;
  --robot-hit-height: 306px;
}

@media (min-width: 1100px) {
  .orbita-experience-v4 .hero-stage .mission-surface {
    width: min(calc(var(--orbita-hero-evidence-end-percent, 46%) - 14px), 204px) !important;
  }
}

@media (min-width: 680px) and (max-width: 1099px) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    --orbita-hero-evidence-end: 0.43;
    --orbita-hero-evidence-end-percent: 43%;
    --orbita-hero-robot-anchor-x: 0.76;
    --orbita-hero-robot-anchor-y: 0.58;
    --orbita-hero-robot-scale: 0.34;
  }

  .orbita-experience-v4 .hero-stage .mission-surface {
    width: min(calc(var(--orbita-hero-evidence-end-percent, 43%) - 14px), 220px) !important;
  }
}

@media (max-width: 679px) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window {
    --orbita-hero-evidence-end: 0.52;
    --orbita-hero-evidence-end-percent: 52%;
    --orbita-hero-robot-anchor-x: 0.78;
    --orbita-hero-robot-anchor-y: 0.84;
    --orbita-hero-robot-scale: 0.22;
  }


  .orbita-experience-v4 .hero-stage .mission-surface {
    width: calc(var(--orbita-hero-evidence-end-percent, 52%) - 10px) !important;
  }

  body.has-three-robot .three-robot-hit-target[data-route="hero"] {
    --robot-hit-width: 112px;
    --robot-hit-height: 164px;
  }

  body.has-three-robot .three-robot-status[data-route="hero"] {
    --robot-x: var(--orbita-hero-screen-x, 76vw);
    --robot-y: calc(var(--orbita-hero-screen-y, 84vh) - 6px);
    --robot-label-offset: 92px;
    --robot-status-shift: -50%;
  }
}

/* Remaining admin surfaces use color and spacing instead of repeated frames. */
.studio #overview article,
.studio #overview section,
.studio .record-card,
.studio .asset-card,
.studio .document-card,
.studio .infrastructure-card,
.studio .companion-lab-section,
.oi-shell .oi-main article,
.oi-shell .oi-main section {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.studio #overview article:nth-of-type(3n + 1),
.oi-shell .oi-main article:nth-of-type(3n + 1) {
  background: linear-gradient(140deg, rgba(92, 231, 167, .09), rgba(5, 14, 20, .5)) !important;
}

.studio #overview article:nth-of-type(3n + 2),
.oi-shell .oi-main article:nth-of-type(3n + 2) {
  background: linear-gradient(140deg, rgba(80, 164, 255, .095), rgba(5, 13, 22, .5)) !important;
}

.studio #overview article:nth-of-type(3n),
.oi-shell .oi-main article:nth-of-type(3n) {
  background: linear-gradient(140deg, rgba(255, 191, 105, .075), rgba(18, 14, 10, .46)) !important;
}

.studio .record-card {
  background: rgba(3, 12, 18, .28) !important;
}

.studio .record-card.active {
  background: linear-gradient(100deg, rgba(149, 255, 192, .15), rgba(78, 170, 255, .07)) !important;
  box-shadow: inset 3px 0 rgba(183, 255, 211, .9) !important;
}

@media (prefers-reduced-motion: reduce) {
  .orbita-experience-v4 .hero-stage.orbita-workbench-window,
  .studio *,
  .oi-shell * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile header coordinate reset: desktop centering transforms must not leak
   into the edge-anchored compact navigation surface. */
@media (max-width: 679px) {
  body.orbita-experience-v4 .site-header {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.orbita-experience-v4 .site-header .brand {
    min-width: 0;
    max-width: min(54vw, 13rem);
  }

  body.orbita-experience-v4 .site-header .mobile-nav-surface {
    left: 0;
    right: 0;
    width: 100%;
  }
}
