/* NOVA TV 777 — Avid Media Composer aesthetic on broadcast furniture.
   MANTRA_MANIFEST/modules/design-language.md
   Colour carries state. Nothing goes off screen. Measured at 390px. */

:root {
  /* Avid greys */
  --mc-black:  #0C0C0D;
  --mc-deep:   #131315;
  --mc-panel:  #1C1C1F;
  --mc-raise:  #26262A;
  --mc-edge:   #34343A;
  --mc-hi:     #46464E;
  --mc-well:   #08080A;

  --ink:       #D8D5CE;
  --ink-dim:   #8C8880;
  --ink-faint: #5D5A54;

  --amber:     #E8A64B;
  --amber-hi:  #FBBF24;
  --green:     #46A758;
  --red:       #EF4444;
  --tally:     #FF2A2A;

  /* SMPTE colour bars. Seven of them, which is the whole point. */
  --b1: #C0C0C0;  --b2: #C0C000;  --b3: #00C0C0;  --b4: #00C000;
  --b5: #C000C0;  --b6: #C00000;  --b7: #2020C0;

  --b1v: #FFFFFF; --b2v: #FFFF00; --b3v: #00FFFF; --b4v: #00FF00;
  --b5v: #FF00FF; --b6v: #FF0000; --b7v: #2828FF;

  --maxw: 1120px;
  --gap: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--mc-black); }

body {
  margin: 0; background: var(--mc-black); color: var(--ink);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px; line-height: 1.6; overflow-wrap: break-word;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 12px; }
.mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

/* ══ SMPTE LEADER ══════════════════════════════════════ */
.leader { position: fixed; inset: 0; z-index: 999; background: #000;
          display: flex; align-items: center; justify-content: center; }
.leader.gone { display: none; }

.leader-num {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: min(58vw, 58vh); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; transition: opacity .08s linear;
}
.leader.barring .leader-num { opacity: 0; }

.leader-bars { position: absolute; inset: 0; display: flex; opacity: 0;
               transition: opacity .1s linear; }
.leader.barring .leader-bars, .leader.collapsing .leader-bars { opacity: 1; }
.leader-bars .lb {
  flex: 1 1 0; height: 100%; transform: scaleX(0); transform-origin: center;
  display: flex; align-items: center; justify-content: center; min-width: 0;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.leader.barring .leader-bars .lb, .leader.collapsing .leader-bars .lb { transform: scaleX(1); }
.leader-bars .lb:nth-child(1){background:var(--b1v)} .leader-bars .lb:nth-child(2){background:var(--b2v)}
.leader-bars .lb:nth-child(3){background:var(--b3v)} .leader-bars .lb:nth-child(4){background:var(--b4v)}
.leader-bars .lb:nth-child(5){background:var(--b5v)} .leader-bars .lb:nth-child(6){background:var(--b6v)}
.leader-bars .lb:nth-child(7){background:var(--b7v)}
.leader-bars .lb b {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: min(11vw, 15vh); color: rgba(0,0,0,.6); line-height: 1;
  transition: opacity .16s linear;
}
.leader-bars .lb:nth-child(6) b, .leader-bars .lb:nth-child(7) b { color: rgba(255,255,255,.78); }

/* the collapse: full-screen bars squeeze down into the spine strip */
.leader.collapsing { align-items: flex-start; background: transparent; }
.leader.collapsing .leader-bars { height: 7px; transition: height .6s cubic-bezier(.6,0,.2,1); }
.leader.collapsing .leader-bars .lb b { opacity: 0; }
.leader.fading { opacity: 0; transition: opacity .28s linear; pointer-events: none; }

.leader-skip {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.45);
  padding: 9px 14px; border-radius: 2px; cursor: pointer;
}

/* ══ SPINE ═════════════════════════════════════════════ */
.spine { display: flex; height: 7px; width: 100%; }
.spine i { flex: 1 1 0; }
.spine i:nth-child(1){background:var(--b1)} .spine i:nth-child(2){background:var(--b2)}
.spine i:nth-child(3){background:var(--b3)} .spine i:nth-child(4){background:var(--b4)}
.spine i:nth-child(5){background:var(--b5)} .spine i:nth-child(6){background:var(--b6)}
.spine i:nth-child(7){background:var(--b7)}



/* ══ FRAME STACK: the logo cut on the beat ═════════════
   Six of Baba's own variants, all in the DOM from the first frame and stacked
   in one fixed box — only opacity changes, so the monitor never reflows. The
   cut is driven by bass onsets in the anthem, floored at 300ms between cuts:
   music sits near 2 cuts a second, and the floor keeps a loud passage from
   pushing high-contrast full-colour frames past 3 flashes a second. */
.frames {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  --pulse: 1;
}
.frames img {
  position: absolute; width: 62%; max-width: 260px; height: auto;
  opacity: 0; border-radius: 2px;
  transform: scale(var(--pulse));
  /* No CSS transition. The spring integrates every animation frame, and a
     transition on top of that adds a second, slower easing that smears the
     attack and kills the overshoot. The physics IS the easing. */
}
.frames img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .frames img { transform: none; transition: none; }
}

/* ══ MENU BAR ══════════════════════════════════════════ */
.menubar { background: linear-gradient(180deg, var(--mc-raise), var(--mc-panel));
           border-bottom: 1px solid var(--mc-edge); }
.menubar-in { max-width: var(--maxw); margin: 0 auto; padding: 7px 12px;
              display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mb-logo { height: 30px; width: auto; display: block; cursor: pointer; flex: 0 0 auto; }
.mb-title { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em;
            color: var(--ink-faint); text-transform: uppercase; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.mb-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.menubar a { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em;
             color: var(--ink-dim); text-decoration: none; text-transform: uppercase; }
.menubar a:hover { color: var(--amber); }
@media (max-width: 640px) { .mb-title { display: none; } }

.langswitch { display: flex; border: 1px solid var(--mc-edge); border-radius: 2px; overflow: hidden; }
.langswitch button { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em;
  background: var(--mc-panel); color: var(--ink-faint); border: 0; padding: 5px 8px; cursor: pointer; }
.langswitch button[aria-pressed="true"] { background: var(--amber); color: #14100A; }

/* ══ PANELS ════════════════════════════════════════════ */
.panel { background: var(--mc-panel); border: 1px solid var(--mc-edge);
         border-top-color: var(--mc-hi); border-radius: 3px; margin: var(--gap) 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, var(--mc-raise), #1F1F23);
  border-bottom: 1px solid var(--mc-edge); padding: 6px 10px; border-radius: 2px 2px 0 0; }
.panel-name { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.panel-tag { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em;
  color: var(--ink-faint); text-transform: uppercase; white-space: nowrap; flex: 0 0 auto; }
.panel-body { padding: 14px; }

/* ══ MONITOR ROW ═══════════════════════════════════════ */
.monitors { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 760px) { .monitors { grid-template-columns: 1fr 1fr; } }
.monitor { display: flex; flex-direction: column; min-width: 0; }
/* Pure black, not --mc-well. The frame JPEGs are matted on #000, so a #08080A
   surround puts a hard vertical seam down each side of the logo. */
.mon-screen { background: #000; aspect-ratio: 16 / 9; position: relative;
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mon-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 9px; background: var(--mc-deep); border-top: 1px solid var(--mc-edge); }
.tc { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em;
      color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc.dim { color: var(--ink-faint); }
.tally { width: 9px; height: 9px; border-radius: 50%; background: #3A1010;
         border: 1px solid #521818; flex: 0 0 auto; }
.tally.on { background: var(--tally); border-color: #FF6A6A; }

.mon-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* .mon-art img removed: the frame stack owns its own sizing and opacity,
   and the old rule had equal specificity but later source order, so it won
   silently and left all six frames at opacity .9 stacked on top of each other. */
.mon-scrim { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 11px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.88)); }
.mon-l3-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(18px, 4.4vw, 26px); line-height: 1.05; text-transform: uppercase;
  color: #fff; display: block; overflow-wrap: anywhere; }
.mon-l3-sub { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--amber); text-transform: uppercase; display: block; margin-top: 3px; }

.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding: 0 6px; }
.cd-cell { text-align: center; min-width: 0; }
.cd-num { font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(28px, 8vw, 58px); line-height: 1; color: var(--amber-hi);
  font-variant-numeric: tabular-nums; }
.cd-lab { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.cd-slate { position: absolute; top: 0; left: 0; right: 0; padding: 7px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em;
  color: var(--ink-faint); text-transform: uppercase; }
.cd-slate span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ TRANSPORT ═════════════════════════════════════════ */
.transport { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px; background: var(--mc-deep); border-top: 1px solid var(--mc-edge); }
.mcbtn { background: linear-gradient(180deg, var(--mc-raise), #1A1A1D);
  border: 1px solid var(--mc-edge); border-top-color: var(--mc-hi); border-radius: 2px;
  color: var(--ink); cursor: pointer; width: 38px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; }
.mcbtn:hover { background: linear-gradient(180deg, var(--mc-hi), var(--mc-raise)); }
.mcbtn:active { background: #131315; }
.mcbtn svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.mcbtn.wide { width: auto; padding: 0 13px; gap: 7px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.mcbtn.play { width: 74px; height: 44px; color: var(--amber-hi); border-color: #5A431E; }
.mcbtn.play svg { width: 21px; height: 21px; }
.mcbtn.play.on { background: var(--amber); color: #14100A; border-color: var(--amber-hi); }
.mcbtn.inactive { opacity: .34; pointer-events: none; }

/* ══ SCRUB ═════════════════════════════════════════════ */
.scrub { padding: 0 10px 10px; background: var(--mc-deep); }
.wave { position: relative; height: 46px; width: 100%; background: var(--mc-well);
  border: 1px solid var(--mc-edge); border-radius: 2px; display: flex; align-items: flex-end;
  gap: 1px; padding: 4px 3px; cursor: pointer; overflow: hidden; }
.wave span { flex: 1 1 0; background: var(--mc-hi); border-radius: 1px 1px 0 0; min-width: 0; }
.wave span.played { background: var(--amber); }
.wave-cursor { position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--amber-hi); left: 0; pointer-events: none; }

/* ══ VU METERS ═════════════════════════════════════════ */
.vu-rack { display: flex; gap: 10px; align-items: flex-end; padding: 10px;
  background: var(--mc-deep); border-top: 1px solid var(--mc-edge); }
.vu-ch { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.vu-lab { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em;
  color: var(--ink-faint); }
.vu-track { width: 15px; height: 84px; background: var(--mc-well);
  border: 1px solid var(--mc-edge); border-radius: 1px; display: flex;
  flex-direction: column-reverse; gap: 1px; padding: 2px; overflow: hidden; }
.vu-seg { flex: 1 1 0; background: #16241A; border-radius: .5px; }
.vu-seg.lit-g { background: var(--green); }
.vu-seg.lit-a { background: var(--amber); }
.vu-seg.lit-r { background: var(--red); }
.vu-scale { display: flex; flex-direction: column-reverse; justify-content: space-between;
  height: 84px; font-family: "IBM Plex Mono", monospace; font-size: 8px;
  color: var(--ink-faint); padding: 2px 0; flex: 0 0 auto;
  /* the channel columns carry an L/R label under the track; match that offset
     so the dB marks line up with the segments and not with the letters */
  margin-bottom: 19px; }
.vu-meta { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex;
  flex-direction: column; justify-content: center; gap: 5px; }
.vu-meta-row { display: flex; justify-content: space-between; gap: 8px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .06em;
  color: var(--ink-faint); text-transform: uppercase; min-width: 0; }
.vu-meta-row b { color: var(--ink-dim); font-weight: 400; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ══ CTA STRIP ═════════════════════════════════════════ */
.cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: #201808; border-top: 1px solid #4A3714;
  border-bottom: 1px solid #4A3714; }
.cta-txt { flex: 1 1 180px; min-width: 0; }
.cta-h { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(16px, 3.8vw, 21px); line-height: 1.1; color: var(--amber-hi); display: block; }
.cta-d { font-size: 13px; color: var(--ink-dim); display: block; margin-top: 2px; }

/* ══ TIMELINE ══════════════════════════════════════════ */
.tlwrap { padding: 12px; background: var(--mc-well); }
.tl-ruler { display: none; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-bottom: 4px; }
.tl-ruler span { font-family: "IBM Plex Mono", monospace; font-size: 9px; color: var(--ink-faint);
  border-left: 1px solid var(--mc-edge); padding-left: 3px; min-width: 0; overflow: hidden; }
.tl-track { display: grid; grid-template-columns: 1fr; gap: 3px; }
.tl-head { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .12em;
  color: var(--ink-faint); text-transform: uppercase; margin: 10px 0 4px; }
.clip { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 10px; align-items: center;
  background: linear-gradient(180deg, #2E2A22, #201E19); border: 1px solid #4A422F;
  border-left: 3px solid var(--amber); border-radius: 2px; padding: 8px 10px; min-width: 0; }
.clip.free { background: repeating-linear-gradient(45deg,#141416,#141416 6px,#191A1C 6px,#191A1C 12px);
  border-color: var(--mc-edge); border-left-color: var(--mc-hi); }
.clip > * { min-width: 0; }
.clip-tc { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }
.clip-name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 16px; line-height: 1.15; display: block; overflow-wrap: anywhere; }
.clip.free .clip-name { color: var(--ink-faint); font-weight: 400; }
.clip-genre { font-size: 12px; color: var(--ink-faint); display: block; overflow-wrap: anywhere; }

@media (min-width: 780px) {
  .tl-ruler { display: grid; }
  .tl-track { grid-template-columns: repeat(12, 1fr); gap: 2px; }
  .clip { grid-template-columns: 1fr; gap: 2px; padding: 7px 6px;
          align-content: start; align-items: start; min-height: 78px; }
  .clip-tc { font-size: 10px; }
  .clip-name { font-size: 12px; }
  .clip-genre { font-size: 10px; line-height: 1.25; }
  .clip .pill { justify-self: start; }
}

/* ══ SONGS ════════════════════════════════════════════ */
.song-row { display: grid; grid-template-columns: clamp(96px, 30vw, 168px) minmax(0, 1fr);
  gap: 12px; padding: 12px; align-items: start; }
.song-row > * { min-width: 0; }
.song-art { aspect-ratio: 1 / 1; background: #000; border: 1px solid var(--mc-edge);
  border-radius: 2px; overflow: hidden; }
.song-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-body { display: flex; flex-direction: column; gap: 6px; }
.song-title { font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; font-size: clamp(17px, 4.4vw, 23px); line-height: 1.1;
  overflow-wrap: anywhere; }
.song-artist { font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  overflow-wrap: anywhere; }
.song-wave { position: relative; height: 40px; background: var(--mc-well);
  border: 1px solid var(--mc-edge); border-radius: 2px; display: flex;
  align-items: flex-end; gap: 1px; padding: 3px 3px; overflow: hidden; margin-top: 2px; }
.song-wave span { flex: 1 1 0; background: var(--mc-hi); border-radius: 1px 1px 0 0; min-width: 0; }
.song-wave span.played { background: var(--amber); }
.song-cursor { position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--amber-hi); left: 0; pointer-events: none; }
.song-foot { display: flex; align-items: center; gap: 10px; }
.song-foot .tc { font-size: 12px; }
.song-foot .song-rem { margin-left: auto; }
.song.is-playing { border-color: #5A431E; border-top-color: var(--amber); }

/* ══ PILLS ═════════════════════════════════════════════ */
.pill { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 2px; white-space: nowrap;
  background: var(--mc-raise); color: var(--ink-dim); display: inline-block; }
.pill.s-confirmed, .pill.s-done { background: var(--green); color: #06210C; }
.pill.s-held, .pill.s-active    { background: var(--amber); color: #14100A; }
.pill.s-open, .pill.s-waiting   { background: var(--mc-raise); color: var(--ink-faint); }
.pill.s-blocked                 { background: var(--red); color: #2A0606; }

/* ══ BIN ═══════════════════════════════════════════════ */
.bin { width: 100%; border-collapse: collapse; font-size: 14px; }
.bin th { text-align: left; font-family: "IBM Plex Mono", monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  padding: 6px 9px 6px 0; background: var(--mc-raise); border-bottom: 1px solid var(--mc-edge); }
.bin th:first-child, .bin td:first-child { padding-left: 9px; }
.bin td { padding: 9px 9px 9px 0; border-bottom: 1px solid var(--mc-edge); vertical-align: top; }
.bin tr:nth-child(even) td { background: #17171A; }
@media (max-width: 560px) { .bin .hide-s { display: none; } }

/* ══ LEDGER ════════════════════════════════════════════ */
.ledger { display: grid; grid-template-columns: 1fr; gap: 2px; }
.lrow { display: grid; grid-template-columns: 8px 46px minmax(0,1fr); gap: 12px; align-items: start;
  padding: 11px 10px; background: var(--mc-deep); border: 1px solid var(--mc-edge); border-radius: 2px; }
.lrow > * { min-width: 0; }
.lchip { width: 8px; align-self: stretch; border-radius: 1px; min-height: 34px; }
.lrow:nth-child(1) .lchip{background:var(--b1)} .lrow:nth-child(2) .lchip{background:var(--b2)}
.lrow:nth-child(3) .lchip{background:var(--b3)} .lrow:nth-child(4) .lchip{background:var(--b4)}
.lrow:nth-child(5) .lchip{background:var(--b5)} .lrow:nth-child(6) .lchip{background:var(--b6)}
.lrow:nth-child(7) .lchip{background:var(--b7)}
.lnum { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 27px;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lt { font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 16px; display: block; }
.ld { font-size: 14px; color: var(--ink-dim); display: block; overflow-wrap: anywhere; }

/* ══ STATS ═════════════════════════════════════════════ */
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4,1fr); } }
.stat { background: var(--mc-deep); border: 1px solid var(--mc-edge); padding: 12px 11px; min-width: 0; }
.stat-n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 32px;
  line-height: 1; color: var(--amber-hi); font-variant-numeric: tabular-nums; }
.stat-l { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

/* ══ TYPE ══════════════════════════════════════════════ */
h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(23px, 5.2vw, 33px); line-height: 1.08; margin: 0 0 10px; }
h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 18px; margin: 20px 0 6px; }
p { margin: 0 0 12px; }
.dek { color: var(--ink-dim); }
.small { font-size: 13px; color: var(--ink-dim); }

/* ══ STUDIO SVG ════════════════════════════════════════ */
.studio { width: 100%; height: auto; display: block; background: var(--mc-well);
  border: 1px solid var(--mc-edge); border-radius: 2px; }

/* ══ FORMS ═════════════════════════════════════════════ */
label { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; background: var(--mc-well); border: 1px solid var(--mc-edge);
  border-top-color: #0A0A0C; color: var(--ink); border-radius: 2px; padding: 9px 10px;
  font-family: "Barlow", sans-serif; font-size: 16px; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--amber); border-color: var(--amber); }

.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 11px 16px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--amber); background: var(--amber); color: #14100A;
  text-decoration: none; display: inline-block; }
.btn.ghost { background: transparent; color: var(--amber); }
.btn:hover { opacity: .86; }
.btn.inactive { opacity: .34; pointer-events: none; }

/* A mockup stays fully rendered and readable — the design language forbids
   things vanishing — but it cannot be typed in or pressed. Dimmed enough to
   read as inert, not so dim it cannot be read. */
.mockup { opacity: .5; pointer-events: none; user-select: none; }
.panel-tag.mock { color: #14100A; background: var(--amber); padding: 2px 7px;
  border-radius: 2px; letter-spacing: .14em; }

.gate { display: grid; gap: 8px; }
@media (min-width: 520px) { .gate { grid-template-columns: 1fr auto; align-items: end; } }
.gate label { margin-top: 0; }
.locked { opacity: .28; pointer-events: none; }

.foot { border-top: 1px solid var(--mc-edge); padding: 20px 0 40px; margin-top: var(--gap);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .06em;
  color: var(--ink-faint); line-height: 2; }
.foot a { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  .leader-bars .lb, .leader-bars, .leader-num, .leader { transition: none !important; }
}