/* ─── DH #520 · Progressive Notes (pn-) ─────────────────────────────────
   The Notes tab at Cue Room's choice budget. Composes on tokens.css (incl.
   the browser density standard) + cue-filter-bar.css. Everything here is
   namespaced pn- or scoped under .ns-wrap.pn so the mobile notes view,
   Cue Room, and every other ns-/nt- consumer is untouched. */

/* band entrance — bands arrive when their subject exists */
.pn-enter { animation: pnIn .24s ease; }
@keyframes pnIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pn-enter { animation: none; } }

/* toolbar: select-all */
.pn-selall {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--fg-mute); font-family: var(--ui);
  cursor: pointer; user-select: none;
}

/* toolbar: dashed PT link affordance (the transport band's collapsed form) */
.pn-ptlink {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  border-radius: var(--r-2); border: 1px dashed var(--line-strong); background: transparent;
  color: var(--fg-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.pn-ptlink:hover { color: var(--fg-mute); border-color: var(--fg-dim); }
.pn-ptlink .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--fg-dim); flex-shrink: 0; }

/* transport band: stems chip */
.pn-stemtog {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--r-2); border: 1px solid transparent; background: transparent;
  color: var(--fg-dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; cursor: pointer;
}
.pn-stemtog:hover { color: var(--fg-mute); }
.pn-stemtog.on { color: var(--fg-mute); border-color: var(--line); background: var(--bg-sub); }

/* coverage marker — #516-compatible: a BAR, never a dot */
.pn-cov { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pn-cov .bar { width: 14px; height: 4px; border-radius: 1px; flex-shrink: 0; }
.pn-cov .lab {
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-cov.none { color: var(--fg-faint); font-family: var(--mono); font-size: 9px; }

/* drawer: quiet band row (COST when configured) + activity line */
.ns-drawer .pn-band {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.ns-drawer .pn-band > div { margin-top: 0 !important; flex: 1; }
.pn-activity {
  display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--fg-dim);
}

/* composer category chips — the project's own note_categories */
.pn-compchip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-2); border: 1px solid var(--line-soft); background: transparent;
  color: var(--fg-mute); font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  cursor: pointer; opacity: .75;
}
.pn-compchip .bar { width: 3px; height: 12px; border-radius: 1px; }
.pn-compchip:hover { opacity: 1; }
.pn-compchip.on { border-color: var(--line-strong); background: var(--bg-sub); color: var(--fg-strong); opacity: 1; }
.pn-compchip.more { border-style: dashed; color: var(--fg-dim); }

/* ── density — the browser density standard, scoped to the redesigned page ── */
.ns-wrap.pn .ns-toolbar { height: var(--d-toolbar, 38px); flex: 0 0 var(--d-toolbar, 38px); }
.ns-wrap.pn .ns-sortbtn { height: var(--d-ctl, 26px); }
.ns-wrap.pn .ns-row { min-height: var(--d-row, 30px); padding: var(--d-pad-y, 6px) 14px; }
.ns-wrap.pn .ns-tc { font-size: var(--t-num, 9.5px); }
.ns-wrap.pn .ns-body { font-size: var(--t-row, 11px); }
.ns-wrap.pn .ns-ph { font-size: var(--t-tc-lg, 13px); min-width: 92px; }
.ns-wrap.pn .ns-dr-tc { font-size: 15px; }
.ns-wrap.pn .ns-dr-head { padding: 11px 14px 9px; }
.ns-wrap.pn .ns-dr-body { padding: 11px 14px; }
.ns-wrap.pn .ns-thread { padding: 12px 14px; gap: 12px; }
.ns-wrap.pn .ns-composer { padding: 9px 12px; }
.ns-wrap.pn .ns-seg button { padding: 4px 10px; }
.ns-wrap.pn .ns-dr-txt { font-size: 12.5px; line-height: 1.45; padding: 8px 10px; }

/* coverage column — only when the data exists (wrap gets .has-cov) */
.ns-wrap.pn.has-cov .ns-colhead,
.ns-wrap.pn.has-cov .ns-row {
  grid-template-columns: 22px 26px 90px 104px minmax(0, 1fr) 100px 84px 72px;
}

/* ─── #5393 · the CUE POPUP ────────────────────────────────────────────────
   FOUNDER 2026-08-04: J "opens new popup window covering middle of screen and
   pauses video". Writing a note moved out of the right-hand drawer and onto a
   scrim over the sheet — see NsDraftModal in notes.jsx for why.

   The scrim is DARK BUT NOT OPAQUE on purpose: the dashed draft row is still in
   the list underneath (the founder chose to keep it) and it should stay legible,
   because it is the only thing on screen saying where the note will land. */
.ns-cuemodal-scrim {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 10, .58);
  animation: nsCueScrim .12s ease;
}
@keyframes nsCueScrim { from { opacity: 0; } to { opacity: 1; } }

.ns-cuemodal {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: var(--bg-panel, #16181b);
  border: 1px solid var(--line-strong, #3a3d43);
  border-radius: var(--r-panel, 8px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  animation: nsCuePop .14s cubic-bezier(.2, .8, .3, 1);
}
@keyframes nsCuePop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ns-cuemodal-scrim, .ns-cuemodal { animation: none; }
}

.ns-cuemodal-head {
  display: flex; align-items: center; gap: 4px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line, #2a2d31);
}
.ns-cuemodal-body { padding: 13px 14px; overflow: auto; }
/* The timecode is the loudest thing in the popup — it is the one value J filled
   in for you, and the one you are most likely to correct. */
.ns-cuemodal-body .ns-dr-tc { font-size: 19px; color: var(--fg-strong, #e8eaed); }
.ns-cuemodal-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-top: 1px solid var(--line, #2a2d31);
}