/* TalonLab homepage v4.1 — single master scene canvas.
   The room artwork, exterior and live UI all share one coordinate system. */

.scene-canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--scene-w,100vw);
  height:var(--scene-h,100vh);
  transform:translate(-50%,-50%);
  overflow:visible;
  z-index:0;
}
.lab-stage,.scene-ui{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.lab-stage{
  z-index:0;
  overflow:hidden;
  background:#010302;
  pointer-events:none;
}
.scene-ui{
  z-index:30;
  pointer-events:none;
}
.scene-ui a,.scene-ui button,.scene-ui .screen-frame{pointer-events:auto}

/* Slow clock-style exterior motion for a rotating-gravity station.
   The lab remains fixed; only the outside celestial view rotates. */
.exterior-stack,.exterior-fallback,.exterior-panorama{display:none!important}
.exterior-orbit{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#010403;
  filter:brightness(.80) saturate(.93) contrast(1.025);
}
.exterior-orbit-image{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  transform:translate(-50%,-50%) scale(1.48) rotate(0deg);
  transform-origin:center center;
  animation:talonOrbitalClock 1800s linear infinite;
  will-change:transform;
}
@keyframes talonOrbitalClock{
  from{transform:translate(-50%,-50%) scale(1.48) rotate(0deg)}
  to{transform:translate(-50%,-50%) scale(1.48) rotate(360deg)}
}

/* New high-resolution room master. */
.detailed-room-shell{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center!important;
  opacity:1!important;
  filter:saturate(.98) contrast(1.055) brightness(.99)!important;
  animation:none!important;
  transform:none!important;
  image-rendering:auto;
}
.console-art{display:none!important}

/* Top chrome stays attached to the viewport, not the cropped room canvas. */
.lab-topbar{
  position:absolute;
  z-index:80;
  top:0;left:0;right:0;
  height:58px;
  background:linear-gradient(180deg,rgba(1,4,2,.82),rgba(1,4,2,.24) 66%,transparent);
  border-bottom:0;
}
.lab-shell::after{
  z-index:25;
  background:
    radial-gradient(ellipse at 50% 44%,transparent 0 37%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,rgba(0,0,0,.06),transparent 18%,transparent 78%,rgba(0,0,0,.23));
}

/* Central display: coordinates are taken directly from the new room artwork. */
.screen-rig{
  position:absolute!important;
  z-index:40!important;
  left:29.58%!important;
  top:18.23%!important;
  width:40.90%!important;
  height:35.20%!important;
  transform:none!important;
  display:block!important;
  pointer-events:none;
}
.screen-frame{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  clip-path:none!important;
  border:0!important;
  border-radius:2px;
  background:rgba(2,9,6,.975)!important;
  box-shadow:inset 0 0 44px rgba(22,119,64,.075),0 4px 16px rgba(0,0,0,.34)!important;
}
.screen-frame::before,.screen-frame::after{display:none!important}
.screen-header{
  height:14%!important;
  min-height:34px!important;
  padding:6px 12px 5px!important;
  border:0!important;
  border-bottom:1px solid rgba(70,238,145,.12)!important;
  background:linear-gradient(180deg,rgba(5,21,12,.97),rgba(3,12,7,.92))!important;
}
.screen-viewport{
  height:78%!important;
  border:0!important;
  background:
    radial-gradient(circle at 72% 17%,rgba(35,178,94,.055),transparent 29%),
    linear-gradient(180deg,rgba(4,17,9,.985),rgba(2,9,6,.995))!important;
}
.screen-footer{
  height:8%!important;
  min-height:18px!important;
  padding:0 11px!important;
  border:0!important;
  border-top:1px solid rgba(70,238,145,.1)!important;
  background:rgba(2,9,6,.98)!important;
}
.screen-code{font-size:clamp(5px,.42vw,8px)!important}
.screen-header strong{font-size:clamp(12px,.96vw,18px)!important}
.screen-health{font-size:clamp(5px,.38vw,7px)!important}
.screen-section{
  min-height:100%!important;
  padding:clamp(16px,2.25vh,30px) clamp(20px,2.05vw,39px)!important;
}
.screen-eyebrow,.screen-section-head span{font-size:clamp(6px,.42vw,8px)!important}
.screen-intro h1{
  max-width:98%!important;
  margin:8px 0 10px!important;
  font-size:clamp(31px,2.6vw,52px)!important;
  line-height:.94!important;
}
.screen-lede{font-size:clamp(9px,.72vw,14px)!important;line-height:1.55!important}
.screen-status-grid{gap:7px!important;margin-top:14px!important}
.screen-status-grid article{padding:8px 9px!important}
.screen-status-grid span,.screen-status-grid small{font-size:clamp(5px,.32vw,6px)!important}
.screen-status-grid strong{font-size:clamp(8px,.58vw,11px)!important}
.screen-section-head{margin-bottom:12px!important}
.screen-section-head h2{font-size:clamp(19px,1.7vw,33px)!important}
.project-grid{gap:7px!important}
.project-card{min-height:88px!important;padding:10px!important}
.project-card h3{font-size:clamp(10px,.8vw,15px)!important}
.project-card p{font-size:clamp(7px,.49vw,9px)!important}
.project-card em{font-size:6px!important}
.station-map{height:88%!important;min-height:165px!important}
.diagnostic-grid{gap:6px!important}
.diagnostic-grid div{padding:9px!important;font-size:6px!important}

/* The HTML controls overlay the physical control bank below the monitor. */
.console-deck{
  position:absolute!important;
  left:50%!important;
  top:106%!important;
  width:126%!important;
  height:18%!important;
  min-height:44px!important;
  margin:0!important;
  padding:6px 8% 5px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  background:rgba(2,8,5,.16)!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  backdrop-filter:blur(.6px);
  pointer-events:auto;
}
.console-deck button{
  height:34px!important;
  min-width:0!important;
  flex:1 1 0!important;
  padding:0 7px!important;
  background:linear-gradient(180deg,rgba(8,20,12,.74),rgba(3,9,5,.86))!important;
  border:1px solid rgba(70,238,145,.14)!important;
  color:#81988a!important;
  font-size:clamp(5px,.4vw,7px)!important;
}
.console-deck button.active{
  color:var(--mint)!important;
  background:rgba(4,18,9,.82)!important;
  border-color:rgba(70,238,145,.66)!important;
  box-shadow:inset 0 0 14px rgba(70,238,145,.07),0 0 10px rgba(70,238,145,.05)!important;
}
.console-deck .console-reset{color:#b8906c!important;border-color:rgba(215,153,85,.22)!important}
.console-dial,.deck-label{display:none!important}

/* Side navigation is mounted over the physical side monitors. */
.room-nav{
  position:absolute!important;
  z-index:42!important;
  top:21.6%!important;
  width:12.15%!important;
  max-width:none!important;
  padding:4px!important;
  gap:3px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  pointer-events:auto;
}
.room-nav-left{left:2.15%!important}
.room-nav-right{right:2.15%!important}
.nav-label{
  padding:0 5px 4px!important;
  font-size:5px!important;
  opacity:.62;
  text-shadow:0 2px 6px #000;
}
.room-nav a{
  grid-template-columns:18px 1fr!important;
  min-height:36px!important;
  gap:1px 4px!important;
  padding:6px!important;
  clip-path:none!important;
  background:linear-gradient(90deg,rgba(2,9,5,.60),rgba(3,13,7,.34))!important;
  border:1px solid rgba(70,238,145,.10)!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.3)!important;
  backdrop-filter:blur(1.2px);
}
.room-nav a:hover,.room-nav a:focus-visible{
  transform:translateY(-1px)!important;
  background:linear-gradient(90deg,rgba(5,25,13,.87),rgba(4,19,10,.7))!important;
  border-color:rgba(70,238,145,.44)!important;
}
.room-nav b{font-size:5px!important}
.room-nav span:not(.nav-label){font-size:clamp(7px,.51vw,10px)!important}
.room-nav em{font-size:clamp(4px,.31vw,6px)!important}
.room-caption{z-index:35!important}

/* Route transition remains intentionally short. */
.room-nav a.route-active{
  border-color:rgba(70,238,145,.72)!important;
  color:#dfffea!important;
  box-shadow:inset 0 0 22px rgba(70,238,145,.08),0 0 16px rgba(70,238,145,.09)!important;
}
.lab-stage,.screen-rig,.room-nav,.room-caption{transition:opacity .24s ease,filter .24s ease}
.lab-shell.lab-leaving .screen-rig,
.lab-shell.lab-leaving .room-nav:not(:has(.route-active)),
.lab-shell.lab-leaving .room-caption{opacity:.28;filter:blur(.8px)}
.lab-shell.lab-leaving .lab-stage{filter:brightness(.72)}

/* Portrait/tablet interim: use the isolated high-res console as the physical object. */
@media (orientation:portrait) and (min-width:701px){
  .scene-canvas{width:100vw!important;height:100vh!important}
  .detailed-room-shell{opacity:.24!important;filter:brightness(.44) saturate(.75)!important;object-fit:cover!important}
  .console-art{
    display:block!important;
    position:absolute!important;
    z-index:4!important;
    left:50%!important;
    top:10%!important;
    width:126%!important;
    height:auto!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
  }
  .screen-rig{left:5.3%!important;top:18.4%!important;width:89.4%!important;height:35%!important}
  .room-nav{top:auto!important;bottom:3.5%!important;width:35%!important}
  .room-nav-left{left:4%!important}.room-nav-right{right:4%!important}
  .room-nav a:nth-of-type(n+3){display:none}
  .screen-status-grid{grid-template-columns:1fr 1fr!important}
  .screen-status-grid article:nth-child(3){display:none}
}

/* Phone: handheld-terminal interpretation, not a miniature room. */
@media (max-width:700px){
  .scene-canvas{width:100vw!important;height:100dvh!important;transform:translate(-50%,-50%)}
  .detailed-room-shell{opacity:.16!important;filter:brightness(.34) saturate(.66)!important;object-fit:cover!important}
  .console-art{
    display:block!important;
    position:absolute!important;
    z-index:4!important;
    left:50%!important;
    top:12%!important;
    width:155%!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
  }
  .screen-rig{left:3%!important;top:20%!important;width:94%!important;height:43%!important}
  .screen-header{height:13%!important}
  .screen-viewport{height:79%!important}
  .screen-footer{height:8%!important}
  .screen-intro h1{font-size:clamp(27px,8vw,40px)!important}
  .screen-lede{font-size:10px!important}
  .screen-status-grid{grid-template-columns:1fr!important}
  .screen-status-grid article:nth-child(n+2){display:none}
  .project-grid{grid-template-columns:1fr!important}
  .project-card{min-height:95px!important}
  .project-card p{font-size:9px!important}
  .station-map{min-height:220px!important}
  .diagnostic-grid{grid-template-columns:1fr!important}
  .console-deck{top:104%!important;width:100%!important;height:54px!important;padding-inline:3%!important}
  .console-deck button{height:32px!important;font-size:6px!important}
  .room-nav{top:auto!important;bottom:8px!important;width:auto!important;height:auto!important;padding:0!important;display:flex!important;flex-direction:row!important;gap:5px!important}
  .room-nav-left{left:8px!important}.room-nav-right{right:8px!important}
  .room-nav a{width:46px!important;height:38px!important;min-height:0!important;padding:4px!important}
  .room-nav a span:not(.nav-label),.room-nav a em{display:none!important}
  .room-nav a b{grid-row:auto!important;font-size:7px!important}
  .nav-label{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .exterior-orbit-image{animation:none;transform:translate(-50%,-50%) scale(1.48)}
  .lab-stage,.screen-rig,.room-nav,.room-caption{transition:none}
}


/* --- Perspective alignment refinement — 19 Sep 2026 --- */
/* Keep the room artwork fixed; make the live overlay planes match the hardware. */
@media (orientation:landscape) and (min-width:701px){

  .room-nav{
    transform-style:preserve-3d;
  }

  .room-nav-left{
    transform:perspective(1500px) rotateY(10deg) skewY(-.55deg);
    transform-origin:left center;
  }

  .room-nav-right{
    transform:perspective(1500px) rotateY(-10deg) skewY(.55deg);
    transform-origin:right center;
  }

  .room-nav a{
    min-height:37px!important;
    clip-path:polygon(2.5% 0,100% 2%,97.5% 100%,0 98%)!important;
  }

  /* The text remains easy to read while the panel plane carries the perspective. */
  .room-nav-left .nav-label,
  .room-nav-left a b,
  .room-nav-left a span:not(.nav-label),
  .room-nav-left a em{
    transform:skewX(4deg);
    transform-origin:left center;
  }

  .room-nav-right .nav-label,
  .room-nav-right a b,
  .room-nav-right a span:not(.nav-label),
  .room-nav-right a em{
    transform:skewX(-4deg);
    transform-origin:right center;
  }

  /* Match the shallow perspective of the physical control bank below the monitor. */
  .console-deck{
    top:105.25%!important;
    width:127%!important;
    height:18.5%!important;
    padding:6px 8.5% 6px!important;
    gap:6px!important;
    transform:
      translateX(-50%)
      perspective(1500px)
      rotateX(13deg)!important;
    transform-origin:center top!important;
    clip-path:polygon(2% 0,98% 0,96.5% 100%,3.5% 100%)!important;
    background:rgba(2,8,5,.09)!important;
  }

  .console-deck button{
    position:relative;
    height:34px!important;
    overflow:hidden;
    clip-path:polygon(2.5% 0,97.5% 0,100% 100%,0 100%)!important;
    transform:skewX(-4.25deg);
    transform-origin:center;
  }

  .console-deck button:nth-of-type(4),
  .console-deck button:nth-of-type(5){
    transform:skewX(4.25deg);
  }

  .console-deck button i,
  .console-deck .button-label{
    display:inline-block;
  }

  .console-deck button i,
  .console-deck button:nth-of-type(-n+3) .button-label{
    transform:skewX(4.25deg);
  }

  .console-deck button:nth-of-type(n+4) .button-label{
    transform:skewX(-4.25deg);
  }

  .console-deck .button-label{
    white-space:nowrap;
    transform-origin:center;
  }
}


/* Observation window: let the rotating orbit fill more of the exterior opening,
   retaining the slow rotation while revealing far more of the actual scene. */
@media (orientation:landscape) and (min-width:701px){
  .exterior-orbit-image{
    left:50%;
    top:33%;
    width:74%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:center;
    transform:translate(-50%,-50%) rotate(0deg);
    animation:talonOrbitalWindowFitted 1800s linear infinite;
  }
}
@keyframes talonOrbitalWindowFitted{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media (orientation:landscape) and (min-width:701px) and (prefers-reduced-motion:reduce){
  .exterior-orbit-image{
    animation:none;
    transform:translate(-50%,-50%) rotate(0deg);
  }
}