/* ══════════════════════════════════════════════════════════════════════════
   SOURCE-NEXUS PLATE — chrome
   Every surface is a typed SE token, measured off the real product captures in
   PNG CLEANER/source-nexus/screenshots/. Nothing here is approximated, which
   is the whole point: a generated surface lands near the token and reads as
   blotchy, a typed one is flat by construction.
   ══════════════════════════════════════════════════════════════════════════ */
.np-root{
  --ground:#262C31;   /* card ground                        */
  --panel:#31373E;    /* window / plugin body, --se-frame    */
  --raised:#3B4148;   /* rows, chips, buttons               */
  --recess:#22282C;   /* meter tracks and wells             */
  --hair:rgba(126,164,176,.18);
  --green:#A7E163;
  --rec:#E5484D;
  --ink:#E8EEF1;
  --ink-dim:#93A2A9;
  position:relative; width:100%; overflow:hidden;
}
/* authored at 1024 and scaled by JS, so ONE geometry serves a 352px card
   socket and a full-bleed hero */
.np-card{position:absolute;left:0;top:0;width:1024px;height:1024px;transform-origin:0 0;
  background:var(--ground);font-family:Roboto,system-ui,sans-serif;color:var(--ink)}
.np-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 50% 34%, rgba(126,164,176,.07), transparent 70%)}

.np-panel{position:absolute;left:67px;top:48px;width:890px;height:927px;
  background:var(--panel);border:1px solid var(--hair);border-radius:20px;overflow:hidden}

/* ── header ───────────────────────────────────────────────────────────── */
.np-head{position:absolute;left:0;right:0;top:0;height:64px;display:flex;align-items:center;
  justify-content:space-between;padding:0 24px}
.np-lbl{font-size:19px;font-weight:500;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.np-right{display:flex;align-items:center;gap:16px}
.np-dot{width:13px;height:13px;border-radius:50%;background:var(--rec)}
.np-tc{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;letter-spacing:.04em;
  /* tabular figures, or a counting clock jitters as digits change width */
  font-variant-numeric:tabular-nums;min-width:132px;display:inline-block;text-align:right}
.np-pill{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;letter-spacing:.06em;
  color:var(--green);border:1px solid var(--green);border-radius:999px;padding:7px 15px 6px}

/* ── feeds ────────────────────────────────────────────────────────────── */
.np-tiles{position:absolute;left:20px;top:64px;width:850px;height:494px;
  display:grid;grid-template-columns:417px 417px;grid-template-rows:237px 237px;gap:20px 16px}
.np-tile{position:relative;border-radius:10px;overflow:hidden;background:var(--recess);
  box-shadow:0 0 0 1px var(--hair);display:flex;align-items:stretch}
/* THE SLOT. An <img> or a <video> drops in here and is sized identically, so a
   still can become live footage without touching the layout. */
.np-slot{flex:none;width:376px;height:237px;background:#12171A;overflow:hidden}
.np-slot>img,.np-slot>video{width:100%;height:100%;object-fit:cover;display:block}
.np-chip{position:absolute;left:12px;bottom:12px;background:rgba(34,40,44,.86);
  border:1px solid var(--hair);border-radius:7px;padding:5px 12px 6px;
  font-size:17px;letter-spacing:.005em;color:var(--ink);backdrop-filter:blur(2px)}
.np-vubox{flex:1 1 auto;display:flex;align-items:center;justify-content:center;background:var(--recess)}
.np-vu{position:relative;width:14px;height:176px;border-radius:3px;background:#161B1F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
/* segments on the LIT portion only — an overlay across the whole meter turns
   the unlit track into a ladder */
/* the fill spans the whole track and is CLIPPED to the level (see the card
   set): a gradient painted on a SHORT fill squeezes the whole green->yellow
   ramp into it, so a meter at 20% shows yellow at its top and reads as nearly
   clipping. The ramp belongs to the scale, not to the level. */
.np-vu i{position:absolute;left:0;bottom:0;display:block;width:100%;height:100%;
  clip-path:inset(100% 0 0 0);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.9) 0 2px,rgba(0,0,0,0) 2px 9px),
    linear-gradient(0deg,#78B944 0%,#8FCB4A 42%,#A7E163 72%,#CFE455 88%,#EBD44C 100%)}

/* ── recording rows ───────────────────────────────────────────────────── */
.np-sect{position:absolute;left:0;right:0;top:582px;height:345px;
  border-top:1px solid var(--hair);padding:22px 24px 0}
.np-sect h2{font-size:19px;font-weight:500;letter-spacing:.14em;color:var(--ink-dim);
  text-transform:uppercase}
.np-rows{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.np-row{height:55px;background:var(--raised);border-radius:9px;display:flex;align-items:center;
  padding:0 20px;gap:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.np-armed{width:15px;height:15px;border-radius:50%;background:var(--rec);flex:none}
.np-nm{width:118px;flex:none;font-size:21px;letter-spacing:.005em}
/* min-width:0 or the canvas refuses to shrink and pushes the spec label out of
   the row — it did exactly that on the first build */
.np-row canvas{flex:1 1 auto;min-width:0;height:30px;display:block}
.np-spec{flex:none;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink-dim);
  letter-spacing:.03em;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   DECK MODE — screenshare + a presence column + the stream bus
   ══════════════════════════════════════════════════════════════════════════
   Ross picked this shape on 2026-09-16 over two alternatives. It is what a
   real review session looks like once somebody shares: the shared screen is
   the subject, the faces are presence beside it, and the thing being streamed
   gets its own readout along the bottom.

   Authored for a 1024x1024 panel — which is what the HERO gives the plate.
   The card socket never asks for deck, so its 890x927 panel is unaffected and
   still exports byte-identical.
   ══════════════════════════════════════════════════════════════════════════ */
.np-main{position:absolute;left:24px;right:24px;top:88px;height:612px;display:flex;gap:18px}

.np-share{flex:1 1 auto;position:relative;border-radius:12px;overflow:hidden;
  background:#0E1316;box-shadow:0 0 0 1px var(--hair);display:flex}
/* the track headers do not move — that is the whole reason this reads as a DAW
   playing rather than as a picture sliding */
.np-share-heads{flex:0 0 194px;height:100%;object-fit:cover;display:block;
  border-right:1px solid rgba(0,0,0,.55)}
.np-share-tl{flex:1 1 auto;position:relative;overflow:hidden}
/* authored width: [A][mirror(A)][A] = 1026 x 3. The loop is 2052 and the
   third segment is the overhang the 537px viewport needs past the wrap. */
.np-share-strip{position:absolute;left:0;top:0;height:100%;width:3078px;
  max-width:none;display:block;will-change:transform}
/* the playhead sits still and the session runs under it */
.np-share-ph{position:absolute;left:54%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(197,232,108,.15),rgba(197,232,108,.75) 12%,
                             rgba(197,232,108,.75) 88%,rgba(197,232,108,.15));
  box-shadow:0 0 9px rgba(197,232,108,.35)}
/* every product that shares a screen labels the source; without it this is
   just a picture sitting inside another picture */
.np-share-tag{position:absolute;left:14px;top:14px;
  font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.09em;
  color:var(--ink);background:rgba(18,23,26,.78);border:1px solid var(--hair);
  border-radius:6px;padding:5px 11px 4px;backdrop-filter:blur(2px)}

/* the presence column: four feeds, no names */
.np-col{flex:0 0 226px;display:grid;grid-template-rows:repeat(4,1fr);gap:14px}
.np-col .np-vubox{flex:0 0 26px}
/* the meter must scale with the tile — a 176px literal overflows a 142px tile */
.np-col .np-vu{height:72%}

/* ── the stream bus ───────────────────────────────────────────────────── */
.np-bus{position:absolute;left:24px;right:24px;top:724px;height:276px;
  background:var(--raised);border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  padding:20px 24px;display:flex;flex-direction:column}
.np-bus-head{display:flex;align-items:baseline;justify-content:space-between;
  flex:0 0 auto;padding-bottom:14px}
.np-bus-lbl{font-size:19px;font-weight:500;letter-spacing:.14em;
  color:var(--ink-dim);text-transform:uppercase}
.np-bus-spec{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;
  letter-spacing:.05em;color:var(--green)}
/* ── the wide meter ───────────────────────────────────────────────────
   Leads the bus; the waveform below keeps the rest of the height. */
.np-bus-meter{flex:0 0 auto;padding-bottom:16px}
.np-bus-mtrack{position:relative;height:26px;border-radius:5px;
  background:var(--recess);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden}
/* the same ladder as the tile VUs, laid on its side, so one instrument reads
   across the whole deck */
.np-bus-mfill{position:absolute;inset:0;clip-path:inset(0 100% 0 0);
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.9) 0 2px,rgba(0,0,0,0) 2px 11px),
    linear-gradient(90deg,#78B944 0%,#8FCB4A 46%,#A7E163 74%,#CFE455 89%,#EBD44C 100%)}
/* peak HOLD: the transient is the thing worth seeing, and a bar alone hides it */
.np-bus-peak{position:absolute;top:0;bottom:0;width:2px;left:0;
  background:#EDF6D6;box-shadow:0 0 7px rgba(237,246,214,.6)}
.np-bus-scale{position:relative;height:17px;margin-top:7px}
.np-bus-tick{position:absolute;top:0;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;
  color:var(--ink-dim);opacity:.65}

/* flex-basis 0 + min-height 0, NOT `flex:1 1 auto`. A <canvas> is a replaced
   element with an intrinsic 300x150, and RT.fit writes its `height` attribute
   from offsetHeight every resize — with an `auto` basis that feeds straight
   back into layout and the canvas grew to 464px inside a 276px bus. Taking the
   intrinsic size out of the basis breaks the loop. */
.np-bus-wave{flex:1 1 0;min-height:0;width:100%;display:block;
  background:var(--recess);border-radius:9px}
.np-bus-foot{flex:0 0 auto;display:flex;gap:44px;padding-top:14px}
.np-bus-stat{display:flex;align-items:baseline;gap:10px}
.np-bus-k{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.np-bus-v{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;
  /* tabular, or a counting readout jitters as digits change width */
  font-variant-numeric:tabular-nums;color:var(--ink);min-width:86px}