/* ══════════════════════════════════════════════════════════════════════════
   SOURCE-NEXUS HERO — the plate, graduated
   ══════════════════════════════════════════════════════════════════════════
   Scoped to #page-source-nexus. Structure borrowed from the Source-Connect
   hero (overflow-hidden hero, a readability scrim over the field, a window
   that FLOATS rather than a filled panel, one parallax plane) — the field's
   idea and the window's contents are Nexus's own.
   ══════════════════════════════════════════════════════════════════════════ */

#page-source-nexus .hero{position:relative;overflow:hidden}   /* the tilted plane overhangs */

/* the field sits behind everything, bled past the hero box so the tilt never
   shows an edge */
/* the two field implementations share one box, so an A/B is a class swap and
   not a layout change */
#page-source-nexus .hero-field.js-nxvideo{
  position:absolute;left:-6%;top:-8%;width:112%;height:116%;
  z-index:0;pointer-events:none;opacity:.62;object-fit:cover;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
          mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  /* a video cannot be "stopped" by CSS; the hero script pauses it */
  #page-source-nexus .hero-field.js-nxvideo{transform:none!important}
}
/* the NLE field shares the same box as the other two — an A/B is a class
   swap, never a layout change. It carries slightly MORE opacity than the
   routing field: real frames at background weight go muddy before line art
   does, and the frame divisions are what has to survive. */
#page-source-nexus .hero-field.js-nxnle{
  position:absolute;left:-6%;top:-8%;width:112%;height:116%;
  z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
          mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  #page-source-nexus .hero-field.js-nxnle{transform:none!important}
}
#page-source-nexus .hero-field.js-nxfield{
  position:absolute;left:-6%;top:-8%;width:112%;height:116%;
  z-index:0;pointer-events:none;opacity:.62;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
          mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);
  will-change:transform;
}
/* the headline has to stay readable over a moving field — the same device the
   home page and the Source-Connect hero use */
#page-source-nexus .hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--se-bg-rgb),.94),rgba(var(--se-bg-rgb),.55) 42%,rgba(var(--se-bg-rgb),0) 64%);
}
#page-source-nexus .hero .wrap{position:relative;z-index:3}

/* THE WINDOW. Floats on the hero wash — not a filled panel — so the background
   reads around and behind it, exactly as .sc-hero does. */
#page-source-nexus .nx-hero{
  position:relative;display:block;isolation:isolate;
  border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--se-border-teal-rgb),.16),0 30px 70px rgba(0,0,0,.45);
  will-change:transform;
}
/* the host IS the .np-root - the plate adds that class itself, so the tokens
   are always in scope no matter what the mount point is called */
#page-source-nexus .nx-hero .np-card::before{display:none}  /* the hero has its own wash */

/* the plate's own ground is dropped: the window should show the PANEL only, so
   the hero background is what surrounds it */
#page-source-nexus .nx-hero .np-card{background:transparent}
#page-source-nexus .nx-hero .np-panel{left:0;top:0;width:1024px;height:1024px;
  border:0;border-radius:0}

@media (prefers-reduced-motion: reduce){
  #page-source-nexus .hero-field.js-nxfield,
  #page-source-nexus .nx-hero{transform:none!important}
}

/* ── the hero re-lays the plate's interior ───────────────────────────────
   The plate is authored at 1024x1024 for a SQUARE image socket, where the
   panel is 890x927 inset in the card. The hero stretches that panel to the
   full 1024 (above), but the children keep their socket coordinates — tiles
   `left:20;width:850` and a section ending at 927 — so 154px of panel was
   dead on the right and 97px dead along the bottom. Ross saw both.

   So the hero restates the interior geometry for ITS panel. Only here: the
   static card export still measures byte-identical, which is the whole reason
   the plate keeps one authored geometry.

   The cameras gain the width: two 1fr columns inside a 24px gutter make each
   slot ~439 wide, and the rows grow 237 -> 277 so the feed keeps something
   near the clips' own 1142:720 rather than cropping harder to fill. */
#page-source-nexus .nx-hero .np-tiles{
  left:24px;right:24px;width:auto;top:64px;height:auto;
  grid-template-columns:1fr 1fr;grid-template-rows:277px 277px;
}
/* DECK MODE supersedes the block above — .np-tiles is not even built. Kept so
   `?deck=0` style experiments and the 2x2 arrangement still lay out correctly
   in the hero panel. */
/* the SLOT takes the new width; the meter keeps its own, or a wider tile just
   grows the gutter beside the bar and the camera never gains anything */
#page-source-nexus .nx-hero .np-slot{flex:1 1 auto;width:auto;height:auto}
#page-source-nexus .nx-hero .np-vubox{flex:0 0 41px}

/* head 64 + tiles 574 + a 24 breath = 662; the rest of the panel is the
   recording section, which now reaches the bottom edge instead of stopping
   97px short of it */
#page-source-nexus .nx-hero .np-sect{top:662px;height:362px}

/* 124: opt-in ISO short. No selectors apply to the ordinary Nexus hero. */
#page-source-nexus .nx-iso-hero .hero-field { display:none!important }
#page-source-nexus .nx-iso-hero::after { display:none }
#page-source-nexus .nx-iso-hero .nx-iso-column { opacity:1; transform:none }
#page-source-nexus .nx-iso { background:#101c24; color:#edf4f5; border:1px solid #45616d; border-radius:16px; box-shadow:0 20px 60px #0005; will-change:auto; }
.nx-iso-head { padding:18px 20px 12px; display:flex; flex-direction:column; gap:5px }
.nx-iso-head>span { font-size:15px; font-weight:700; letter-spacing:.1em }
.nx-iso-head small { font-size:12px; color:#bbccd3 }
.nx-iso-map { padding:8px 12px }
.nx-iso-drawing { position:relative; padding:0 28px }
.nx-iso-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.nx-iso-wires path { fill:none; stroke:#89a6b1; stroke-width:2; stroke-dasharray:5 4; opacity:.55 }
.nx-iso-wires path[data-route=take] { stroke:#b4e777 }
.nx-iso-wires path[data-route=playback] { stroke:#f3d078 }
.nx-iso-wires path[data-route=comms],.nx-iso-wires path[data-route=return] { stroke:#8ed0f5 }
.nx-iso-wires path[data-active=true] { opacity:1; stroke-width:3 }
.nx-iso-cue { fill:#edf4f5; stroke:#101c24; stroke-width:2 }
.nx-iso-node { position:relative; border:1px solid #49626e; border-radius:9px; padding:12px 10px; background:#1b2d38; display:flex; flex-direction:column; gap:4px; text-align:center }
.nx-iso-node[data-active=true] { border-color:#e4eff3 }
.nx-iso-node b { font-size:17px; line-height:1.2 }
.nx-iso-node span { font-size:14px; line-height:1.25 }
.nx-iso-node small { font-size:11px; line-height:1.3; color:#bacbd3 }
.nx-iso-leg { position:relative; min-height:44px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; font-weight:700; letter-spacing:.025em }
.nx-iso-take { color:#b4e777 }.nx-iso-playback { color:#f3d078 }.nx-iso-comms { color:#8ed0f5 }
.nx-iso-footer { border-top:1px solid #45616d; padding:12px 16px; display:flex; align-items:center; gap:12px }
.nx-iso-caption { flex:1; min-height:3em; font-size:14px; line-height:1.5; margin:0 }
.nx-iso-control { font:inherit; font-size:13px; color:#edf4f5; background:#263e4b; border:1px solid #8ca7b4; border-radius:6px; min-width:65px; min-height:44px; cursor:pointer }
.nx-iso-control:focus-visible { outline:3px solid #f3d078; outline-offset:3px }
.nx-iso-control[hidden] { display:none }
.nx-iso-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.nx-iso-fallback { background:#101c24; padding:20px; color:#edf4f5; text-align:center }
.nx-iso-fallback img { width:100%; max-height:320px; object-fit:contain }
@media(max-width:1020px) {
  #page-source-nexus .nx-iso-hero .wrap { grid-template-columns:minmax(0,1fr); gap:24px }
  #page-source-nexus .nx-iso-hero .nx-iso-column { grid-row:1 }
  #page-source-nexus .nx-iso-hero { padding-top:24px }
  #page-source-nexus .nx-iso-hero .nx-iso { max-width:540px; margin:auto }
}
@media(max-width:374px) {
  .nx-iso-head { padding:12px }
  .nx-iso-map { padding:8px 6px }
  .nx-iso-drawing { padding:0 22px }
  .nx-iso-node { padding:10px 5px }
  .nx-iso-node b { font-size:16px }
  .nx-iso-node span { font-size:14px }
  .nx-iso-node small { font-size:10px }
  .nx-iso-leg { font-size:14px; letter-spacing:0 }
  .nx-iso-footer { padding:10px; gap:8px }
}

@media(max-width:374px) {
  html.story-iso-booth .header-in { height:auto; min-height:84px }
  html.story-iso-booth .header-actions { flex-direction:column; gap:0 }
  html.story-iso-booth .main-nav { top:100% }
  html.story-iso-booth .site-header.nav-open .main-nav { max-height:calc(100dvh - 85px) }
}