/* notes-page.css — v07zz279 — dedicated Production Notes page.
   Same cream design language as todo.css: 44px Bebas title, eyebrow,
   translucent white cards on the standard .view-page panel.
   🔒 EVERY selector is scoped under .notes-page — the bare .np-* names
   collide with the New Project / Import Shotlist modal headers in
   views-extras.css (.np-eyebrow / .np-title), and this file loads later
   so unscoped rules would restyle those modals app-wide. */

.notes-page { display: flex; flex-direction: column; gap: 18px; }

.notes-page .np-head { display: flex; flex-direction: column; gap: 4px; }
.notes-page .np-eyebrow { font-size: var(--fs-11); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-bold); }
.notes-page .np-title { font-family: var(--font-display); font-size: var(--fs-44); line-height: 0.95; color: var(--ink, var(--ink-umber)); letter-spacing: var(--track-01); }
.notes-page .np-subtitle { font-size: var(--fs-13); color: var(--ink-muted); min-height: 18px; }

/* ── compose ─────────────────────────────────────────────────────────── */
.notes-page .np-compose {
  display: flex; flex-direction: column; gap: 10px;
  background: color-mix(in srgb, var(--mix-light) 42%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent);
  border-radius: 13px; padding: 14px 16px;
}
.notes-page .np-compose-body {
  font: inherit; font-size: var(--fs-14); line-height: 1.5; color: var(--ink);
  background: color-mix(in srgb, var(--mix-light) 60%, transparent); border: 1px solid var(--card-border);
  border-radius: var(--r-9); padding: 10px 12px; resize: vertical; min-height: 56px;
}
.notes-page .np-compose-body:focus { outline: none; border-color: color-mix(in srgb, var(--olive) 60%, transparent); }
.notes-page .np-compose-row { display: flex; gap: 10px; align-items: center; }
.notes-page .np-compose-range {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-13); color: var(--ink);
  background: color-mix(in srgb, var(--mix-light) 60%, transparent); border: 1px solid var(--card-border);
  border-radius: var(--r-9); padding: 8px 12px;
}
.notes-page .np-compose-range:focus { outline: none; border-color: color-mix(in srgb, var(--olive) 60%, transparent); }
.notes-page .np-compose-save {
  font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-semi); padding: 9px 18px;
  border-radius: var(--r-9); border: 1px solid var(--leaf, var(--moss));
  background: var(--leaf, var(--moss)); color: var(--ink-cream); cursor: pointer;
  white-space: nowrap; transition: filter var(--dur-1) ease, opacity var(--dur-1) ease;
}
.notes-page .np-compose-save:hover { filter: brightness(1.08); }
.notes-page .np-compose-save:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ── filter bar — ONE fixed-height row; toggling never reflows the page ── */
.notes-page .np-filters { display: flex; align-items: center; gap: 12px; min-height: 38px; flex-wrap: wrap; }
.notes-page .np-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: color-mix(in srgb, var(--mix-light) 42%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent);
  border-radius: var(--r-panel);
}
.notes-page .np-seg-btn {
  font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink-muted);
  background: transparent; border: 0; border-radius: var(--r-sm); padding: 6px 14px;
  cursor: pointer; transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.notes-page .np-seg-btn:hover { color: var(--ink); }
.notes-page .np-seg-btn.is-active { background: var(--leaf, var(--moss)); color: var(--ink-cream); }
.notes-page .np-author {
  font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink);
  background: color-mix(in srgb, var(--mix-light) 42%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent);
  border-radius: var(--r-panel); padding: 8px 10px; cursor: pointer; max-width: 200px;
}
.notes-page .np-search {
  flex: 1; min-width: 160px; max-width: 320px; font: inherit; font-size: var(--fs-13);
  color: var(--ink); background: color-mix(in srgb, var(--mix-light) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent); border-radius: var(--r-panel); padding: 8px 12px;
}
.notes-page .np-search:focus { outline: none; border-color: color-mix(in srgb, var(--olive) 60%, transparent); background: color-mix(in srgb, var(--mix-light) 60%, transparent); }

/* ── list ────────────────────────────────────────────────────────────── */
.notes-page .np-list { display: flex; flex-direction: column; gap: 16px; }
.notes-page .np-empty { font-size: var(--fs-14); color: var(--ink-muted); font-style: italic; padding: 36px 12px; text-align: center; }
.notes-page .np-group { display: flex; flex-direction: column; gap: 8px; }
.notes-page .np-day {
  font-size: var(--fs-11); letter-spacing: var(--track-14); text-transform: uppercase;
  color: var(--ink-muted); font-weight: var(--fw-bold); padding: 6px 2px 2px;
}

.notes-page .np-note {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px; align-items: flex-start;
  background: color-mix(in srgb, var(--mix-light) 42%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent);
  border-radius: 13px; padding: 14px 16px;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-5) ease;
}
.notes-page .np-note.is-resolved { opacity: 0.62; }
.notes-page .np-note:hover { background: color-mix(in srgb, var(--mix-light) 58%, transparent); }
/* gold pulse when the panel / a notification lands the user on a note */
.notes-page .np-note--focus {
  border-color: var(--gold, var(--gold-5));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-5) 35%, transparent), 0 8px 24px color-mix(in srgb, var(--gold-5) 18%, transparent);
  animation: npFocusPulse 2.4s ease;
}
@keyframes npFocusPulse {
  0%   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-5) 50%, transparent),  0 8px 28px color-mix(in srgb, var(--gold-5) 30%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-5) 0%, transparent),  0 8px 24px color-mix(in srgb, var(--gold-5) 0%, transparent); }
}

.notes-page .np-note-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--ink-moss);
  font-size: var(--fs-14); font-weight: var(--fw-heavy); letter-spacing: var(--track-04);
}
.notes-page .np-note-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.notes-page .np-note-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.notes-page .np-note-author { font-size: var(--fs-13-5); font-weight: var(--fw-bold); color: var(--ink); }
.notes-page .np-note-role {
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
  color: var(--gold-7); background: color-mix(in srgb, var(--gold-8) 16%, transparent);
  border-radius: var(--r-xs); padding: 2px 7px;
}
.notes-page .np-note-time { font-size: var(--fs-11-5); color: var(--ink-soft); }
.notes-page .np-note-body { font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.notes-page .np-note-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notes-page .np-note-meta:empty { display: none; }
.notes-page .np-note-range {
  font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-bold);
  color: var(--ink-blue-14); background: color-mix(in srgb, var(--blue-15) 14%, transparent);
  border-radius: var(--r-xs); padding: 3px 8px;
}
.notes-page .np-note-resolvedby { font-size: var(--fs-11-5); color: var(--ink-soft); font-style: italic; }

.notes-page .np-note-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.notes-page .np-pill {
  font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-10); text-transform: uppercase;
  border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap;
}
.notes-page .np-pill--open { color: var(--gold-7); background: color-mix(in srgb, var(--gold-8) 18%, transparent); }
.notes-page .np-pill--resolved { color: var(--ink-moss); background: color-mix(in srgb, var(--olive) 18%, transparent); }
/* v07zz584 — one-click resolve straight on the row (Hugo). ✓ on open notes,
   ↩ re-open on resolved ones. Sits inline next to the status pill. */
.notes-page .np-quickresolve {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 26px; height: 26px; margin-left: 8px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--olive) 55%, transparent);
  background: color-mix(in srgb, var(--olive) 14%, transparent); color: var(--ink-moss);
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, transform 80ms ease;
}
.notes-page .np-quickresolve:hover { background: var(--olive); border-color: var(--moss); color: var(--white); transform: scale(1.06); }
.notes-page .np-quickresolve:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.notes-page .np-quickresolve svg { pointer-events: none; }
.notes-page .np-quickresolve--reopen {
  border-color: color-mix(in srgb, var(--tan-deep) 40%, transparent); background: color-mix(in srgb, var(--tan-deep) 10%, transparent); color: var(--ink-soft, color-mix(in srgb, var(--ink-taupe-3) 90%, var(--mix-light)));
}
.notes-page .np-quickresolve--reopen:hover { background: color-mix(in srgb, var(--tan-deep) 85%, transparent); border-color: color-mix(in srgb, var(--tan-deep) 90%, transparent); color: var(--white); }
.notes-page .np-resolve-btn {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi); padding: 6px 13px;
  border-radius: var(--r-sm); border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--mix-light) 60%, transparent); color: var(--ink); cursor: pointer;
  white-space: nowrap; transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.notes-page .np-resolve-btn:hover { background: var(--mix-light); border-color: color-mix(in srgb, var(--olive) 60%, transparent); }
.notes-page .np-resolve-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* narrow screens: stack the side rail under the note body */
@media (max-width: 720px) {
  .notes-page .np-note { grid-template-columns: 36px minmax(0, 1fr); }
  .notes-page .np-note-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: var(--fs-12); }
  .notes-page .np-note-side { grid-column: 2; flex-direction: row; align-items: center; }
  .notes-page .np-filters { gap: 8px; }
  .notes-page .np-search { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v07zz369 — full note-browser: kind chips, the columnar table, and the
   click-to-open image + note detail modal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── kind filter chips ──────────────────────────────────────────────────── */
.notes-page .np-kindbar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: -4px; }
.notes-page .np-kind-chip {
  font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink-muted);
  background: color-mix(in srgb, var(--mix-light) 42%, transparent); border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.notes-page .np-kind-chip:hover { color: var(--ink); border-color: var(--chip-tint, color-mix(in srgb, var(--olive) 60%, transparent)); }
.notes-page .np-kind-chip.is-active {
  color: var(--chip-tint, var(--note-chip-all)); border-color: var(--chip-tint, var(--moss));
  background: color-mix(in oklch, var(--chip-tint, var(--moss)) 14%, var(--note-chip-base));
  font-weight: var(--fw-bold);
}
.notes-page .np-kind-count {
  font-size: var(--fs-11); font-weight: var(--fw-heavy); min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: var(--r-9);
  background: color-mix(in srgb, var(--tan-deep) 16%, transparent); color: inherit;
}

/* ── columnar table ─────────────────────────────────────────────────────── */
.notes-page .np-table-wrap { overflow-x: auto; }
.notes-page .np-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.notes-page .np-table thead th {
  text-align: left; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-10);
  text-transform: uppercase; color: var(--ink-muted); padding: 0 14px 4px; white-space: nowrap;
}
.notes-page .np-row { cursor: pointer; transition: filter var(--dur-1) ease; }
.notes-page .np-row > td {
  background: color-mix(in srgb, var(--mix-light) 44%, transparent); border-top: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent); padding: 12px 14px; vertical-align: middle;
}
.notes-page .np-row > td:first-child { border-left: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent); border-radius: 12px 0 0 12px; }
.notes-page .np-row > td:last-child  { border-right: 1px solid color-mix(in srgb, var(--card-border) 38%, transparent); border-radius: 0 12px 12px 0; }
.notes-page .np-row:hover > td { background: color-mix(in srgb, var(--mix-light) 64%, transparent); }
.notes-page .np-row.is-resolved { opacity: 0.6; }
.notes-page .np-col-img { width: 70px; }
.notes-page .np-col-time, .notes-page .np-col-src, .notes-page .np-col-status { white-space: nowrap; }
.notes-page .np-col-time { font-size: var(--fs-12); color: var(--ink-soft); }
.notes-page .np-thumb {
  width: 56px; height: 56px; border-radius: var(--r-9); overflow: hidden; flex: 0 0 auto;
  background: color-mix(in oklch, var(--kind-tint, var(--grey-5)) 18%, var(--note-thumb-base));
  display: grid; place-items: center; box-shadow: inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--tan-deep) 14%, transparent);
}
.notes-page .np-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notes-page .np-thumb-ph { font-size: var(--fs-18); font-weight: var(--fw-heavy); color: var(--kind-tint, var(--ink-grey-5)); }
.notes-page .np-row-body {
  font-size: var(--fs-14); line-height: 1.45; color: var(--ink); margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notes-page .np-row-byline { display: flex; align-items: center; gap: 8px; }
.notes-page .np-row-author { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-muted); }
.notes-page .np-belong-name {
  display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; font-size: var(--fs-12-5); color: var(--ink); margin-left: 7px;
}
.notes-page .np-col-note { min-width: 280px; }
/* v966 — My-notes mode: the replies to each of my notes, nested under it. */
.np-replies { margin: 6px 0 2px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--card-border) 55%, transparent); display: flex; flex-direction: column; gap: 5px; }
.np-reply { display: flex; flex-direction: column; gap: 1px; }
.np-reply-who { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-02); color: var(--ink-taupe-3); }
.np-reply-body { font-size: var(--fs-12); line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* shared tags (rendered both in the table AND inside the portaled modal) */
.np-kindtag {
  display: inline-block; font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-06);
  text-transform: uppercase; border: 1px solid; border-radius: var(--r-xs); padding: 2px 7px;
  background: color-mix(in srgb, var(--mix-light) 55%, transparent); vertical-align: middle;
}
.np-srctag {
  display: inline-block; font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-03);
  border: 1px solid; border-radius: var(--r-xs); padding: 2px 8px; background: color-mix(in srgb, var(--mix-light) 40%, transparent);
}
/* v963 — chips that OPEN something: the kind/name chip opens the shot or asset
   modal, the source chip opens the review deck in a new tab. Same look as the
   static chips plus a pointer + hover lift, so nothing shifts (#20). */
.np-kindtag--link, .np-srctag--link {
  cursor: pointer; font-family: inherit; line-height: inherit;
  transition: background var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.np-kindtag--link:hover, .np-srctag--link:hover {
  background: color-mix(in srgb, var(--mix-light) 90%, transparent);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--nav-active) 45%, transparent);
}
.notes-page .np-belong-name--link {
  background: none; border: none; padding: 0; font: inherit; text-align: left;
  cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--umber-2) 28%, transparent);
  text-underline-offset: 2px;
}
.notes-page .np-belong-name--link:hover { text-decoration-color: color-mix(in srgb, var(--umber-2) 75%, transparent); }
.np-row-role {
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
  color: var(--gold-7); background: color-mix(in srgb, var(--gold-8) 16%, transparent); border-radius: var(--r-xs); padding: 2px 7px;
}

/* ── image + note detail modal (portaled into #modal-root) ──────────────── */
.ndm-backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--shade-9) 62%, transparent); backdrop-filter: blur(var(--blur-scrim-3));
  z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.ndm-panel {
  /* v07zz376 — flex so the media column sizes to the IMAGE: the modal takes the
     image's own aspect ratio + shows it big, instead of squashing a wide image
     small into a fixed box. The note panel is a fixed 340px beside it. */
  position: relative; display: flex; align-items: stretch;
  max-width: 96vw; max-height: 92vh; background: var(--paper, var(--ink-on-accent));
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.42);
}
.ndm-panel.no-img .ndm-media { display: none; }
.ndm-panel.no-img .ndm-side { flex: 0 0 auto; width: min(520px, 90vw); }
.ndm-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px;
  border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--shade-9) 55%, transparent); color: var(--white); transition: background var(--dur-1) ease;
}
.ndm-close:hover { background: color-mix(in srgb, var(--shade-9) 80%, transparent); }
.ndm-media {
  flex: 0 1 auto; min-width: 0;
  background: var(--shade-50); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ndm-media img { max-width: 70vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; display: block; }
/* prev/next note arrows — fixed at the screen edges, above the backdrop (4000). */
.ndm-nav {
  position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; display: grid; place-items: center; z-index: var(--z-dialog-close); cursor: pointer;
  background: color-mix(in srgb, var(--shade-5) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--hi) 40%, transparent); color: color-mix(in srgb, var(--ink-hi) 92%, transparent);
  transition: background var(--dur-2) ease, transform var(--dur-2) ease, border-color var(--dur-2) ease;
}
.ndm-nav--prev { left: 22px; }
.ndm-nav--next { right: 22px; }
.ndm-nav:hover { background: color-mix(in srgb, var(--leaf) 90%, transparent); border-color: color-mix(in srgb, var(--hi) 80%, transparent); transform: translateY(-50%) scale(1.06); }
.ndm-counter { font-size: var(--fs-11); color: var(--ink-soft); margin-top: 6px; text-align: center; letter-spacing: var(--track-02); }
.ndm-media-ph { color: color-mix(in srgb, var(--white) 45%, transparent); font-size: var(--fs-14); font-style: italic; }
.ndm-side { flex: 0 0 340px; padding: 26px 24px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.ndm-kindrow { display: flex; gap: 8px; }
.ndm-entity { font-size: var(--fs-18); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1.2; }
.ndm-version { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink-blue-14); }
/* v722 — jump straight to the version the note was written on. Same quiet-utility look as
   the shot-context header buttons; deliberately not the loudest thing in the panel. */
.ndm-openshot {
  align-self: flex-start; margin-top: 8px;
  font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-bold);
  padding: 5px 12px; border-radius: var(--r-round); cursor: pointer;
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 55%, transparent);
  color: var(--ink-forest-2);
}
.ndm-openshot:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
.ndm-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ndm-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--ink-moss); font-size: var(--fs-11); font-weight: var(--fw-heavy);
}
.ndm-author { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--ink); }
.ndm-time { font-size: var(--fs-11-5); color: var(--ink-soft); margin-left: auto; }
.ndm-body {
  font-size: var(--fs-15); line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word;
  background: color-mix(in srgb, var(--mix-light) 55%, transparent); border: 1px solid var(--card-border); border-radius: var(--r-panel); padding: 12px 14px;
}
.ndm-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.ndm-resolvedby { font-size: var(--fs-12); color: var(--ink-soft); font-style: italic; }
.ndm-resolve {
  font: inherit; font-size: var(--fs-12-5); font-weight: var(--fw-semi); padding: 7px 15px; margin-left: auto;
  border-radius: var(--r-sm); border: 1px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 70%, transparent);
  color: var(--ink); cursor: pointer; transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.ndm-resolve:hover { background: var(--mix-light); border-color: color-mix(in srgb, var(--olive) 60%, transparent); }
.ndm-resolve:disabled { opacity: 0.5; cursor: not-allowed; }
.ndm-panel .np-pill {
  font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-10); text-transform: uppercase;
  border-radius: var(--r-pill); padding: 4px 11px; white-space: nowrap;
}
.ndm-panel .np-pill--open { color: var(--gold-7); background: color-mix(in srgb, var(--gold-8) 18%, transparent); }
.ndm-panel .np-pill--resolved { color: var(--ink-moss); background: color-mix(in srgb, var(--olive) 18%, transparent); }

@media (max-width: 760px) {
  .ndm-panel { flex-direction: column; width: 92vw; max-height: 94vh; }
  .ndm-panel.no-img .ndm-side { width: auto; }
  .ndm-media { flex: 0 0 auto; max-height: 40vh; min-height: 180px; }
  .ndm-media img { max-width: 100%; max-height: 40vh; }
  .ndm-side { flex: 1 1 auto; }
  .ndm-nav { width: 38px; height: 38px; }
  .ndm-nav--prev { left: 8px; }
  .ndm-nav--next { right: 8px; }
  .notes-page .np-col-belong, .notes-page .np-col-src { display: none; }
}

/* ─── v07zz603 — edit-review rows: timecode + Gemini-detected shot chip ───── */
.np-belong-extra { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.np-tc { font-size: var(--fs-10-5); font-weight: var(--fw-bold); color: var(--ink-blue-16); opacity: 0.85; font-family: var(--font-mono); }
.np-shot-chip {
  font: inherit; display: inline-block; font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-06);
  text-transform: uppercase; border: 1px solid var(--tan-deep); color: var(--ink-tan-deep); border-radius: var(--r-xs);
  padding: 2px 7px; background: color-mix(in srgb, var(--mix-light) 55%, transparent); cursor: pointer; vertical-align: middle;
}
.np-shot-chip:hover { background: color-mix(in srgb, var(--tan-deep) 14%, transparent); }

/* ─── v901 — the note's real media + inline reply ─────────────────────────── */
.ndm-media video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--shade-37); }
.np-thumb { position: relative; }
.np-thumb-play {
  position: absolute; right: 4px; bottom: 4px; z-index: 2; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 8px; line-height: 1; padding-left: 1px;
  background: color-mix(in srgb, var(--shade-37) 78%, transparent); color: color-mix(in srgb, var(--ink-hi) 93%, var(--mix-dark));
}
.ndm-reply { display: flex; gap: 6px; align-items: flex-end; margin: 10px 0 2px; }
.ndm-reply-box {
  flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: var(--fs-12); line-height: 1.45;
  padding: 7px 9px; border-radius: var(--r-sm); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); background: color-mix(in srgb, var(--cream-25) 90%, transparent);
}
.ndm-reply-box:focus { outline: none; border-color: color-mix(in srgb, var(--leaf) 80%, transparent); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--leaf) 18%, transparent); }
.ndm-reply-send {
  flex: 0 0 auto; font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-bold); cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-sm); min-width: 86px;
  border: 1px solid color-mix(in srgb, var(--olive-11) 75%, transparent); background: color-mix(in srgb, var(--leaf) 90%, transparent); color: color-mix(in srgb, var(--olive-7) 30%, var(--mix-dark));
}
.ndm-reply-send:hover { background: var(--leaf); }
.ndm-reply-send:disabled { opacity: 0.55; cursor: default; }

/* ─── v919 — ↩ Replies to me ─────────────────────────────────────────────── */
.np-replies-btn {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-bold);
  padding: 6px 13px; border-radius: var(--r-round); cursor: pointer;
  border: 1px solid var(--line-soft-4); background: transparent; color: inherit;
  white-space: nowrap;
}
.np-replies-btn.is-active {
  background: color-mix(in srgb, var(--olive) 16%, transparent);
  border-color: var(--olive);
}
.np-orig {
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 2px; padding: 6px 10px;
  border-left: 3px solid color-mix(in srgb, var(--olive) 55%, transparent);
  background: color-mix(in srgb, var(--olive) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.np-orig-tag {
  font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: 0.07em; text-transform: uppercase;
  opacity: 0.7;
}
.np-orig-body {
  font-size: var(--fs-12); line-height: 1.4; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* v973 — STATUS column: the shot's status PILL is always visible; the shot
   list's quick-action buttons fade in on row hover, exactly like the shot list.
   Their width is reserved at all times so hovering never shifts the row. */
.notes-page .np-col-stage { width: 1%; white-space: nowrap; padding-right: 14px; vertical-align: middle; }
.np-stage-wrap { display: inline-flex; align-items: center; gap: 10px; }
/* the pill, inline and compact — same family as the shot row's */
.np-stage-wrap .shot-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 9px;
  border: 1px solid; border-radius: var(--r-round);
  font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: 0.07em;
  white-space: nowrap; flex: 0 0 auto;
}
.np-stage-wrap .shot-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
/* buttons: hidden but SPACE RESERVED, revealed when the row is hovered */
.notes-page .np-col-stage .shot-quick-actions {
  display: inline-flex;
  gap: 4px;
  grid-column: auto;
  grid-row: auto;
  opacity: 0;
  pointer-events: none;
  /* v973 — NO transition here on purpose. The shot list fades its bar in, but a
     transition on a row that is scrolled out of view can be left mid-flight and
     then pins the computed opacity at 0, overriding even an inline style. An
     instant swap cannot get stuck. */
  transition: none;
}
.notes-page .np-row:hover .np-col-stage .shot-quick-actions,
.notes-page .np-col-stage .shot-quick-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.notes-page .np-col-stage .sqa-btn { width: 24px; height: 24px; flex: 0 0 auto; }
/* the retake button only exists in this column — amber when the flag is on */
.sqa-btn.sqa-retake.is-active { color: var(--st-retake-2-ink); border-color: color-mix(in srgb, var(--st-retake-2) 80%, transparent); background: color-mix(in srgb, var(--st-retake-2) 16%, transparent); }