/* KitFire Music Studio — midnight console.
   S283 reskin on Chris's ruling: the tungsten black/orange/brown desk goes;
   deep blue takes the room. Condensed gothic labels and mono numbers stay —
   they're the house voice. Legacy var names (--amber, --hot, --amber-d) are
   kept as aliases so login.html and any missed corner recolors with the rest. */

:root {
  --ground:   #0A101F;
  --panel:    #111B32;
  --panel-2:  #16223D;
  --edge:     #23335C;
  --edge-hi:  #31456F;
  --ink:      #EAF1FF;
  --ink-soft: #A9BBDD;
  --ink-dim:  #6B7FA6;

  --accent:   #4D8AFF;          /* electric blue — the working color */
  --accent-2: #5EE6FF;          /* cyan — the gradient's far end */
  --accent-d: #14264D;          /* dim blue field behind accented things */
  --on-accent:#071022;          /* text ON an accent surface */
  --danger:   #FF6B7A;
  --good:     #4ADE9C;

  /* legacy aliases — old names, new palette */
  --amber:    var(--accent);
  --amber-d:  var(--accent-d);
  --hot:      var(--danger);

  --glow:     0 4px 20px rgba(77, 138, 255, .30);
  --grad:     linear-gradient(135deg, var(--accent), var(--accent-2));

  --gothic: "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "SF Mono", ui-monospace, monospace;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* The tab system's load-bearing rule. The [hidden] attribute's UA display:none
   is overridden by ANY author display rule — .desk{display:grid} and
   .transport{display:flex} were beating it, so every tab's workspace rendered
   stacked on one page and the tabs only appeared to work. (S283, found when
   Chris said the tabs "don't really do anything". He was right, literally.) */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* the room: near-black blue with two soft studio lights, not flat black */
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(77, 138, 255, .16), transparent 60%),
    radial-gradient(50rem 36rem at -10% 110%, rgba(94, 230, 255, .10), transparent 55%),
    var(--ground);
  background-attachment: fixed;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--edge-hi); }

::selection { background: rgba(77, 138, 255, .35); }

/* ---------------- topbar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.4rem;
  background: rgba(17, 27, 50, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.mark {
  font-family: var(--gothic); font-size: .82rem; letter-spacing: .06em;
  background: var(--grad); color: var(--on-accent);
  padding: .2rem .42rem; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(77, 138, 255, .35);
}
.brandname {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .13em; font-size: .84rem;
  background: linear-gradient(90deg, var(--ink), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.engine { display: flex; align-items: center; gap: .8rem; font-size: .76rem; color: var(--ink-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); }
.dot.on { background: var(--good); box-shadow: 0 0 8px rgba(74, 222, 156, .8); animation: pulse 2.6s ease-in-out infinite; }
.dot.off { background: var(--danger); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 156, .5); }
  50%      { box-shadow: 0 0 12px rgba(74, 222, 156, .95); }
}
.vram { display: flex; align-items: center; gap: .5rem; }
.vram-bar {
  width: 84px; height: 6px; background: var(--accent-d);
  border: 1px solid var(--edge); border-radius: 3px; overflow: hidden;
}
.vram-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s; }
.vram-bar i.high { background: linear-gradient(135deg, var(--danger), #FF9E6B); }

/* ---------------- tabs ---------------- */
.tabs {
  display: flex; gap: .3rem; padding: .75rem 1.4rem 0;
  max-width: 96rem; margin: 0 auto; border-bottom: 1px solid var(--edge);
}
.tabs button {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .11em;
  font-size: .72rem; background: transparent; color: var(--ink-dim);
  border: 1px solid transparent; border-bottom: none;
  padding: .55rem 1.1rem; cursor: pointer; border-radius: 6px 6px 0 0;
  margin-bottom: -1px; transition: color .15s;
}
.tabs button:hover { color: var(--ink-soft); }
.tabs button.on {
  color: var(--accent-2); background: var(--panel);
  border-color: var(--edge); border-bottom: 1px solid var(--panel);
  box-shadow: inset 0 2px 0 var(--accent);
}

/* ---------------- shot list ---------------- */
.shot { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.shot .n {
  font-family: var(--mono); font-size: .78rem; color: var(--accent);
  padding-top: .55rem; min-width: 1.6rem; font-variant-numeric: tabular-nums;
}
.shot textarea { flex: 1; }
.shot .kill {
  background: transparent; border: 1px solid var(--edge); color: var(--ink-dim);
  border-radius: 6px; cursor: pointer; padding: .3rem .5rem; line-height: 1;
  font-size: .9rem; transition: border-color .15s, color .15s;
}
.shot .kill:hover { border-color: var(--danger); color: var(--danger); }

.estimate {
  margin-top: .9rem; padding: .6rem .8rem; border-radius: 6px;
  background: var(--accent-d); border: 1px solid var(--edge);
  font-family: var(--mono); font-size: .76rem; color: var(--ink-soft);
}
.estimate b { color: var(--accent-2); font-weight: 400; }
.estimate.long { border-color: var(--danger); }
.estimate.long b { color: var(--danger); }

.importer { margin-left: auto; }
.importer span {
  font-family: var(--gothic); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--edge); border-radius: 6px; padding: .25rem .6rem;
  transition: border-color .15s, color .15s;
}
.importer span:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- concepts ---------------- */
.concept {
  background: var(--panel-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: .9rem 1rem; margin-bottom: .7rem;
  transition: transform .15s, box-shadow .15s;
}
.concept:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(4, 10, 26, .5); }
.concept h3 {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 500; font-size: 1.02rem; margin: 0 0 .2rem;
}
.concept .strat {
  font-family: var(--mono); font-size: .66rem; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .06em;
}
.concept p { margin: .4rem 0 .7rem; color: var(--ink-soft); font-size: .92rem; }
.concept .acts { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------------- layout ---------------- */
.desk {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1rem; padding: 1rem 1.4rem; align-items: start;
  max-width: 96rem; margin: 0 auto;
}
/* Each tab is the whole page now, so each desk sets its own proportions:
   writing gets the room on the song desk, the shot list on the video desk. */
.desk[data-panel="song"]  { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.desk[data-panel="video"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#lyrics { min-height: 24rem; }
@media (max-width: 62rem) { .desk, .desk[data-panel] { grid-template-columns: minmax(0,1fr); } }

.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 3.5rem), var(--panel);
  border: 1px solid var(--edge);
  border-radius: 10px; padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 30px rgba(4, 9, 22, .35);
}
.panel.library { margin: 0 1.4rem 4rem; max-width: 96rem; }
@media (min-width: 96rem) { .panel.library { margin-inline: auto; } }

h2 {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 500; font-size: .74rem; color: var(--ink-dim);
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--edge);
  display: flex; align-items: baseline; gap: .6rem;
}
h2.spaced { margin-top: 1.6rem; }
h2 em { font-family: var(--body); font-size: .74rem; text-transform: none;
        letter-spacing: 0; color: var(--accent-2); font-style: italic; }
h2 .count { margin-left: auto; color: var(--ink-dim); font-size: .74rem; }

/* ---------------- starters ---------------- */
.panel.starters { grid-column: 1 / -1; }

.howto {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem;
  margin: 0 0 .9rem; padding: 0 0 0 1.2rem;
  font-size: .82rem; color: var(--ink-soft);
}
.howto li { padding-right: .5rem; }
.howto b { color: var(--ink); font-weight: 600; }
.howto code {
  font-family: var(--mono); font-size: .74rem;
  background: var(--panel-2); padding: .05rem .3rem; border-radius: 4px;
}

.starter-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem;
}
.starter {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--edge);
  border-radius: 8px; padding: .75rem .85rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.starter:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(4, 9, 22, .5); }
.starter.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 2px 14px rgba(77, 138, 255, .25); }
.st-genre {
  font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent-2);
  background: var(--accent-d); border-radius: 999px; padding: .1rem .5rem;
}
.st-name {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .05em;
  font-size: .95rem; color: var(--ink);
}
.st-blurb { font-size: .74rem; color: var(--ink-dim); line-height: 1.4; }

/* the "now press this" nudge after a starter loads */
.go.nudge { animation: nudge 1.2s ease-in-out 2; }
@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 138, 255, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(77, 138, 255, .35); }
}

/* ---------------- songwriter ---------------- */
.writer {
  background: var(--accent-d); border: 1px solid var(--edge-hi);
  border-radius: 8px; padding: .8rem .9rem; margin-bottom: 1rem;
}
.writer-row { display: flex; gap: .5rem; margin-bottom: .45rem; }
.writer-row input { flex: 1; }
.write {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; background: var(--grad); color: var(--on-accent);
  border: 0; border-radius: 6px; padding: 0 1.1rem; cursor: pointer; white-space: nowrap;
  transition: box-shadow .15s, filter .15s;
}
.write:hover { filter: brightness(1.08); box-shadow: var(--glow); }
.write:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none; }
.writer .hint { margin-top: .45rem; }
.writer .hint.err { color: var(--danger); }
.writer .hint.ok { color: var(--good); }

/* ---------------- fields ---------------- */
.field { display: block; margin-bottom: .85rem; }
.field.grow { flex: 1; margin-bottom: 0; }
.lbl {
  display: block; font-family: var(--gothic); text-transform: uppercase;
  letter-spacing: .11em; font-size: .62rem; color: var(--ink-dim); margin-bottom: .32rem;
}
.lbl b { color: var(--accent-2); font-weight: 400; }
.lbl-row { display: flex; align-items: center; justify-content: space-between; }

input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%; background: rgba(7, 12, 26, .75); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 6px;
  padding: .5rem .6rem; font-family: var(--mono); font-size: .82rem; line-height: 1.6;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77, 138, 255, .22);
}

input[type=range] {
  width: 100%; accent-color: var(--accent); background: transparent; margin: .3rem 0 0;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
@media (max-width: 30rem) { .grid2 { grid-template-columns: 1fr; } }

.hint { font-size: .74rem; color: var(--ink-dim); margin: .45rem 0 0; }
.hint code {
  font-family: var(--mono); font-size: .7rem;
  background: var(--panel-2); padding: .1rem .3rem; border-radius: 4px; color: var(--ink-soft);
}

/* ---------------- chips ---------------- */
.chiprow { display: flex; flex-wrap: wrap; gap: .32rem; margin-bottom: .5rem; }
.chiprow button {
  font-family: var(--gothic); font-size: .68rem; letter-spacing: .04em;
  background: var(--panel-2); color: var(--ink-soft);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: .24rem .6rem; cursor: pointer; transition: .15s;
}
.chiprow button:hover { border-color: var(--accent); color: var(--accent-2); }
.chiprow button.on {
  background: var(--grad); border-color: transparent; color: var(--on-accent);
  box-shadow: 0 2px 10px rgba(77, 138, 255, .3);
}
.sub { margin-bottom: .8rem; }

.toggle { display: inline-flex; align-items: center; gap: .35rem;
          font-family: var(--gothic); font-size: .64rem; text-transform: uppercase;
          letter-spacing: .1em; color: var(--ink-dim); cursor: pointer; }
.toggle input { accent-color: var(--accent); }

details.adv { margin-top: 1.1rem; border-top: 1px solid var(--edge); padding-top: .8rem; }
details.adv summary {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--ink-dim); cursor: pointer; margin-bottom: .7rem;
}
details.adv summary:hover { color: var(--accent-2); }

.seedrow { display: flex; align-items: flex-end; gap: .6rem; margin-top: .3rem; }
.seedlock { padding-bottom: .5rem; }
.ghost {
  background: transparent; color: var(--ink-soft); border: 1px solid var(--edge);
  border-radius: 6px; padding: .45rem .7rem; cursor: pointer;
  font-family: var(--gothic); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  transition: border-color .15s, color .15s;
}
.ghost:hover { border-color: var(--accent); color: var(--accent-2); }

/* ---------------- transport ---------------- */
.transport {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .8rem 1.4rem;
  background: rgba(17, 27, 50, .85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge-hi); border-radius: 10px;
  max-width: 96rem; margin: 1rem auto 1.2rem;
  box-shadow: 0 -6px 26px rgba(4, 9, 22, .45);
}
.takes { display: flex; align-items: center; gap: .5rem; }
.takes .lbl { margin: 0; }
.segmented { display: flex; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
.segmented button {
  background: var(--panel-2); color: var(--ink-soft); border: 0;
  padding: .35rem .7rem; cursor: pointer; font-family: var(--mono); font-size: .8rem;
  border-right: 1px solid var(--edge); transition: background .15s, color .15s;
}
.segmented button:last-child { border-right: 0; }
.segmented button.on { background: var(--grad); color: var(--on-accent); }

.go {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .14em;
  font-size: .86rem; background: var(--grad); color: var(--on-accent);
  border: 0; border-radius: 6px; padding: .7rem 2.2rem; cursor: pointer;
  transition: box-shadow .15s, filter .15s;
}
.go:hover { filter: brightness(1.08); box-shadow: var(--glow); }
.go:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none; }
.status { font-size: .78rem; color: var(--ink-soft); flex: 1; }
.status.err { color: var(--danger); }

/* ---------------- library ---------------- */
.tracks { display: flex; flex-direction: column; gap: .7rem; }
.track {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: .5rem 1.2rem; align-items: center;
  background: var(--panel-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: .8rem 1rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.track:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(4, 9, 22, .5); }
.track.pending { border-left-color: var(--ink-dim); opacity: .8; }
.track.failed { border-left-color: var(--danger); }
.track h3 {
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 500; font-size: 1.02rem; margin: 0 0 .15rem;
}
.track .meta { font-family: var(--mono); font-size: .7rem; color: var(--ink-dim); margin: 0 0 .5rem; }
.track audio { width: 100%; max-width: 26rem; display: block; }
.track .side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.track .num { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }
.track .num b { color: var(--accent-2); font-weight: 400; }
.track a.dl {
  font-family: var(--gothic); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--edge); border-radius: 6px; padding: .22rem .55rem;
  transition: border-color .15s, color .15s;
}
.track a.dl:hover { border-color: var(--accent); color: var(--accent-2); }

.track .kill-job {
  background: none; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink-dim); cursor: pointer; font-size: .95rem;
  line-height: 1; padding: .25rem .5rem; transition: border-color .15s, color .15s;
}
.track .kill-job:hover { border-color: var(--danger); color: var(--danger); }
.empty { color: var(--ink-dim); font-size: .85rem; padding: 1rem 0; }

/* ---------------- player + visualizer ---------------- */
/* A song card's player is one round button and the EQ — the audio element is
   real but chromeless; seek and time live in the now-playing bar. */
.player { display: flex; align-items: center; gap: .7rem; max-width: 26rem; }
.player audio { display: none; }

.play-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad); color: var(--on-accent); border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(77, 138, 255, .3);
  transition: box-shadow .15s, filter .15s, transform .15s;
}
.play-btn:hover { filter: brightness(1.08); box-shadow: var(--glow); transform: scale(1.05); }
.play-btn svg { width: 16px; height: 16px; fill: var(--on-accent); }

.track canvas.viz {
  flex: 1; min-width: 0; height: 48px; display: block;
  border-radius: 6px;
  background: rgba(7, 12, 26, .55);
  border: 1px solid transparent;
  opacity: .35; transition: opacity .3s, border-color .3s;
}
.track canvas.viz.live {
  opacity: 1; border-color: var(--edge);
  box-shadow: inset 0 0 18px rgba(77, 138, 255, .10);
}

/* clarity badge — the articulation QA verdict, worn on the card */
.clarity { border: 1px solid var(--edge); border-radius: 999px; padding: .14rem .55rem; }
.clarity.good { color: var(--good); border-color: rgba(74, 222, 156, .45); }
.clarity.ok   { color: var(--accent-2); border-color: rgba(94, 230, 255, .4); }
.clarity.bad  { color: var(--danger); border-color: rgba(255, 107, 122, .45); }

.score-job {
  font-family: var(--gothic); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft); background: none; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 6px; padding: .22rem .55rem;
  transition: border-color .15s, color .15s;
}
.score-job:hover { border-color: var(--accent); color: var(--accent-2); }
.score-job:disabled { cursor: default; color: var(--ink-dim); border-color: var(--edge); }

/* ---------------- the rack ---------------- */
.rack-card h3 { font-size: 1.2rem; letter-spacing: .05em; }
.rack-blurb { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .7rem; max-width: 34rem; }
.rack-clar { color: var(--good); }
.rack-buy { min-width: 14rem; gap: .5rem; }
.rack-buy a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  width: 100%; text-decoration: none; border-radius: 8px; padding: .55rem .8rem;
  font-family: var(--gothic); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; transition: .15s;
}
.rack-buy .rack-std { border: 1px solid var(--edge-hi); color: var(--ink); background: var(--panel); }
.rack-buy .rack-std:hover { border-color: var(--accent); }
.rack-buy .rack-exc { background: var(--grad); color: var(--on-accent); }
.rack-buy .rack-exc:hover { filter: brightness(1.07); box-shadow: var(--glow); }
@media (max-width: 40rem) {
  .rack-buy { min-width: 0; width: 100%; flex-direction: column; }
}

/* ---------------- now playing bar ---------------- */
.nowbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: .8rem; z-index: 30;
  width: min(96rem, calc(100vw - 2.8rem));
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .9rem;
  background: rgba(17, 27, 50, .92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--edge-hi); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(3, 7, 18, .6);
  animation: nb-rise .25s ease-out;
}
@keyframes nb-rise {
  from { transform: translate(-50%, .8rem); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
.nb-play {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: box-shadow .15s, filter .15s;
}
.nb-play:hover { filter: brightness(1.08); box-shadow: var(--glow); }
.nb-play svg { width: 14px; height: 14px; fill: var(--on-accent); }
.nb-info { display: flex; flex-direction: column; min-width: 9rem; max-width: 18rem; }
.nb-label {
  font-family: var(--gothic); font-size: .56rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-dim);
}
.nb-title {
  font-family: var(--gothic); font-size: .92rem; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nowbar #nbSeek { flex: 1; margin: 0; }
.nb-time { font-size: .74rem; color: var(--ink-soft); flex: none; }

/* while the bar is up, the sticky transport and the page bottom clear it */
body.playing { padding-bottom: 4.6rem; }
body.playing .transport { bottom: 4.6rem; }

@media (max-width: 40rem) {
  .nb-info { min-width: 5rem; }
  .nb-time { display: none; }

  /* phone topbar: one row. The dot still tells the engine story; the meter and
     its caption are desk detail. */
  .vram, #engineText { display: none; }
  .topbar { padding: .55rem .9rem; }
  .desk, .panel.library { padding-inline: .9rem; }
  .transport { flex-wrap: wrap; gap: .7rem; margin-inline: .9rem; }
  .transport .go { flex: 1; padding: .7rem 0; }
  .transport .status { flex-basis: 100%; order: 3; }
}

@media (max-width: 40rem) {
  .track { grid-template-columns: minmax(0,1fr); }
  .track .side { align-items: flex-start; flex-direction: row; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* No prefers-reduced-motion kill switch, deliberately: Chris runs Windows with
   reduced motion ON system-wide, and his standing ruling (memory: S-era,
   marketing surfaces) is that the polish should still show. The motion here is
   all sub-300ms transitions and one soft pulse — nothing vestibular. */