/* Owner-shell extras for the working product: auth, empty states, real thumbs. */

/* real video thumbnails sit inside the draft's gradient thumbs */
.thumb-img, .cut-thumb .thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cut-thumb { position: relative; overflow: hidden; }

.signout { margin-left: auto; opacity: 0.7; }
.signout:hover { opacity: 1; }

.notif-empty {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--text-3);
}

.empty-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 26px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-panel);
  color: var(--text-2);
  font-size: 14px;
  max-width: 520px;
}

.rail-ellip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-save { display: flex; justify-content: flex-end; padding-bottom: 30px; }
.set-grid-extra { margin-top: 18px; }
.set-solo { max-width: 720px; }

.pw-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 360px; }
.pw-actions { display: flex; gap: 10px; }
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--text-3);
  border-radius: var(--r-chip);
  transition: color var(--d-3f) var(--ease-cut);
}
.pw-eye:hover { color: var(--text); }
.pw-eye .ic-eye-off { display: none; }
.pw-eye.on .ic-eye { display: none; }
.pw-eye.on .ic-eye-off { display: block; }
.watch-mail { font-family: var(--f-mono); font-size: 10.5px; color: var(--text-3); }
.rail .client-logo { display: block; height: 28px; max-width: 140px; object-fit: contain; object-position: left; }
.chip-count { border-style: dashed; }

/* cut upload dropzone — drop a video on the project page to start a cut.
   Big in the empty state, a slim target once cuts exist. */
.cut-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-panel);
  background: var(--bg-2);
  color: var(--text-3);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d-3f) var(--ease-cut),
              background var(--d-3f) var(--ease-cut),
              color var(--d-3f) var(--ease-cut);
}
.cut-dropzone:hover { border-color: var(--sky-strong); color: var(--text-2); }
.cut-dropzone:hover svg,
.cut-dropzone.drag svg { color: var(--sky-ink); }
.cut-dropzone.drag {
  border-style: solid;
  border-color: var(--sky-strong);
  background: var(--sky-dim);
  color: var(--text);
}
.cut-dropzone-t { font-weight: 500; font-size: 14px; color: var(--text-2); }
.cut-dropzone-s { font-size: 11px; }
.cut-dropzone-lg { margin-top: 0; padding: 46px 20px; gap: 8px; }
.cut-dropzone-lg svg { width: 26px; height: 26px; }

/* share links — the whole pill is the tap target */
.link-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  text-align: left;
  color: var(--text-3);
  transition: border-color var(--d-3f) var(--ease-cut), background var(--d-3f) var(--ease-cut);
}
.link-pill:hover { border-color: var(--sky-strong); color: var(--sky-ink); }
.link-pill:active { background: var(--sky-dim); }
.link-pill-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.link-pill-k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-pill-url {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--sky-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-pill svg { flex: 0 0 auto; }

/* the whole-project link rides in the page head — project scope, project header */
.proj-head { flex-wrap: wrap; }
.link-pill-head {
  width: 300px; /* the rail column — the pill shares its left edge with the cards below */
  margin-top: 0;
  margin-left: auto;
  align-self: center;
}

/* each cut carries its own client link — an icon that copies on tap. The cut
   name is a stretched link, so the whole row still opens the review room;
   everything in .cut-side sits above that overlay on one line. */
.cut-row { position: relative; }
.cut-open::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-panel);
}
.cut-side {
  position: relative;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
}
.cut-link { width: 32px; height: 32px; color: var(--text-3); }
.cut-link:hover { border-color: var(--sky-strong); color: var(--sky-ink); }
.cut-link:active { background: var(--sky-dim); }

/* no client details and nobody watching — the cuts take the full width */
.proj-solo { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .link-pill-head { width: 100%; max-width: none; min-width: 0; margin-left: 0; margin-top: 4px; }
}

.k-short { display: none; }
.tabbar { display: none; }
/* mode-mini shows at every width — the review room taught users to look for
   this icon in the top bar; the app must answer in the same place */
html[data-mode="suite"] .mode-mini .ic-day { display: none; }
html[data-mode="daylight"] .mode-mini .ic-suite { display: none; }

@media (max-width: 760px) {
  .field-row { flex-direction: column; align-items: stretch; }
  .page-head { display: block; }
  .page-head .page-sub { margin-top: 6px; white-space: nowrap; }
  .sub-wait { display: none; } /* the stat chips already say it */

  /* topbar children overflowed the draft's phone rules — let them wrap.
     backdrop-filter would trap the fixed-position popover, so it goes solid. */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--top-h); padding: 10px 14px; gap: 10px; backdrop-filter: none; background: var(--bg); }
  .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .notif-wrap { margin-left: auto; }

  /* the tab bar takes over navigation — sidebar and topbar primary retire */
  .side { display: none; }
  .topbar > .btn-primary { display: none; }
  .main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: grid;
    /* one equal column per tab — editors have no action tab on most pages,
       so the bar must spread 4 or 5 tabs evenly, not leave a 5th slot empty */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .tab.on { color: var(--sky-ink); }
  .tab-ic {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px; height: 26px;
  }
  .tab-action .tab-ic {
    width: 40px; height: 40px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--sky-strong);
    color: var(--btn-primary-ink);
    box-shadow: var(--pop-shadow);
  }
  html[data-mode="suite"] .tab-action .tab-ic { background: var(--sky); color: #0C1114; }
  .tab-badge {
    position: absolute;
    top: -3px; right: -4px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--tally);
    color: #FFF;
    font-size: 9px;
    letter-spacing: 0;
  }

  /* the bell lives in the tab bar on phones; its popover rises from there */
  .topbar #bell { display: none; }
  .mode-mini { display: grid; margin-left: auto; }
  .notif-wrap { margin-left: 0; }
  .notif-pop {
    position: fixed;
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 12px; right: 12px;
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* verdict stats: one row of compact chips instead of three stacked tiles */
  .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .stat { padding: 10px 12px; gap: 9px; }
  .stat-n { font-size: 20px; }
  .stat-k { font-size: 11px; }
  .k-long { display: none; }
  .k-short {
    display: inline;
    font-family: var(--f-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 10px;
  }
}

/* ---------- auth ---------- */
.auth-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.auth-lockup .side-lockup-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.auth-h { font-family: var(--f-display); font-weight: 600; font-size: 22px; }
.auth-sub { font-size: 14px; color: var(--text-2); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.auth-form .btn { justify-content: center; margin-top: 4px; }
.auth-error { font-size: 13px; color: var(--tally-ink); }

/* --- team + tasks --- */
.rail-x { margin-left: auto; flex-shrink: 0; }
.rail-btn { margin-top: 10px; }
.rail-empty { color: var(--text-3); font-size: 13px; margin: 2px 0 0; }

/* card cog — manage a project from the dashboard, a cut from its row.
   The card link becomes a stretched overlay so the cog can sit on top. */
.proj-card { position: relative; overflow: visible; }
.proj-card .thumb { overflow: hidden; border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0; }
/* the overlay must beat the thumb (also positioned, later in source) or taps
   on the image select it instead of opening the project */
.proj-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-panel); }
.proj-name-row { display: flex; align-items: flex-start; gap: 8px; }
.proj-name-row .proj-name { flex: 1; min-width: 0; }
.card-drop, .cut-drop { position: relative; z-index: 2; }
.proj-name-row .card-drop { margin: -5px -6px -5px 0; }
.card-cog { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text-3); }
.card-cog:hover { color: var(--text); background: var(--bg-3); }
.proj-card:has(.drop-pop.open), .cut-row:has(.drop-pop.open) { z-index: 5; }
@media (max-width: 760px) {
  /* static so the cog's absolute box anchors to the row (= thumb top right),
     not to this chip line; the icon buttons stay above the stretched link
     through their own positioning */
  .cut-side { width: 100%; justify-content: flex-start; position: static; }
  /* the cog rides the thumbnail in its own small box, top right — the chip
     line below stays a single line no matter how long the verdict runs */
  .cut-drop { position: absolute; top: 20px; right: 20px; }
  .cut-side .card-cog {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(232, 240, 243, 0.22);
    border-radius: var(--r-chip);
    background: rgba(10, 14, 17, 0.72);
    color: #E8F0F3;
    backdrop-filter: blur(4px);
  }
  .cut-side .card-cog:hover { color: #FFF; background: rgba(10, 14, 17, 0.85); }
  /* the copy toast rises above the tab bar, where thumbs actually look */
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 46; }
}

/* assign team — search the roster, tick editors on. Built for 100+ names. */
.dlg-sub { font-size: 13px; color: var(--text-2); margin: -6px 0 12px; }
.team-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: var(--text-3);
  margin-bottom: 4px;
}
.team-search:focus-within { border-color: var(--sky-strong); }
.team-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.team-list { max-height: min(300px, 45vh); overflow-y: auto; margin-bottom: 6px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; cursor: pointer; }
.team-row + .team-row { border-top: 1px solid var(--line); }
.team-name { font-size: 14px; font-weight: 500; }
.team-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-id .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-mail {
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-none { padding: 14px 2px; font-size: 13px; color: var(--text-3); }
.team-check { position: relative; margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; }
.team-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.team-check-ui {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: transparent;
  pointer-events: none;
  transition: background var(--d-3f) var(--ease-cut), border-color var(--d-3f) var(--ease-cut);
}
.team-check input:checked + .team-check-ui {
  background: var(--sky-strong);
  border-color: var(--sky-strong);
  color: var(--btn-primary-ink);
}
html[data-mode="suite"] .team-check input:checked + .team-check-ui { background: var(--sky); border-color: var(--sky); color: #0C1114; }
.team-check input:focus-visible + .team-check-ui { outline: 2px solid var(--sky-strong); outline-offset: 2px; }
.dlg .dlg-actions .btn { text-decoration: none; }
@media (max-width: 760px) {
  .team-search input { font-size: 16px; } /* or iOS zooms */
  .link-pill-head { margin-top: 10px; }
}
.task-row { align-items: center; }
.task-row .act-body { min-width: 0; }
.task-acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.task-due { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }
.task-due.over { color: var(--text); font-weight: 600; }
.chip-rush { border: 1px solid var(--line-2); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.task-sec { margin: 26px 0 10px; }
.task-sec h2 { font-size: 15px; margin: 0; }
.task-sec .sec-sub { color: var(--text-3); font-size: 13px; margin: 2px 0 0; }
.task-done { opacity: .6; }
.task-row .act-meta { display: block; }
@media (max-width: 760px) {
  .page-head .page-sub { white-space: normal; } /* long subs wrap, never clip */
  .task-row { flex-wrap: wrap; row-gap: 6px; }
  .task-row .act-body { flex: 1 1 calc(100% - 45px); }
  .task-row .chip-rush, .task-row .task-due, .task-row .task-acts { margin-left: 45px; }
  .task-row .chip-rush ~ .task-due, .task-row .chip-rush ~ .task-acts,
  .task-row .task-due ~ .task-acts { margin-left: 0; }
  .task-row .task-acts { justify-content: flex-start; }
}
.field textarea {
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg);
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
}
.field textarea:focus { border-color: var(--sky-strong); }
@media (max-width: 760px) {
  .dlg .field input, .dlg .field select, .dlg .field textarea { font-size: 16px; } /* or iOS zooms */
}
.auth-alt { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.auth-alt a { color: var(--sky-ink); }
.plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plan-row:last-of-type { border-bottom: 0; }
.plan-row > span:first-child { color: var(--text-3); }
.plan-val { text-align: right; }
.plan-mono { font-family: var(--f-mono); font-size: 13px; }
.legal { max-width: 640px; margin: 0 auto; padding: 48px 22px 64px; }
.legal .auth-h { margin-top: 26px; }
.legal-updated { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); margin: 4px 0 8px; }
.legal h2 { font-size: 16px; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 14px; line-height: 1.65; color: var(--text-2); }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 6px 0; }
.legal a { color: var(--sky-ink); }
.legal-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-legal { margin-top: 26px; font-size: 12px; }
.auth-legal a { color: var(--text-3); }
.auth-legal a:hover { color: var(--text-2); }

/* ---------- project page as a folder ---------- */

/* cut-list header: count on the left, the Rows | Grid switch on the right */
.cut-list { position: relative; }  /* #dropSep anchors to the list */
.cut-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.cut-list-count {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--bg-2);
}
.view-opt {
  padding: 4px 11px;
  border: 0;
  border-radius: calc(var(--r-chip) - 1px);
  background: transparent;
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--d-3f) var(--ease-cut), color var(--d-3f) var(--ease-cut);
}
.view-opt:hover { color: var(--text-2); }
.view-opt[aria-pressed="true"] { background: var(--sky-dim); color: var(--sky-ink); }

/* the drag grip rides a small rail on the left of each row; the row itself
   lifts on touch long-press, so the grip is the mouse (and express-touch) lane */
.cut-list:not(.is-grid) .cut-row { padding-left: 34px; }
.cut-row { -webkit-touch-callout: none; }  /* long-press lifts; no iOS link preview */
.cut-grip {
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: grab;
  opacity: 0.45;
  touch-action: none;
  transition: opacity var(--d-3f) var(--ease-cut), color var(--d-3f) var(--ease-cut);
}
.cut-grip:hover { opacity: 1; color: var(--text-2); }
.cut-grip:active { cursor: grabbing; }
.cut-row.dragging {
  z-index: 6;
  opacity: 0.92;
  border-color: var(--sky-strong);
  box-shadow: var(--pop-shadow);
  transition: none;  /* the transform must track the pointer, not ease after it */
}
.cut-row.dragging.drop-ghost { opacity: 0.3; }  /* over a stack — let its hint read */
.cut-row.settling { z-index: 6; }  /* gliding into place rides above its neighbors */
body.cg-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* the insertion separator — one Sky bar that marks where the cut will land */
#dropSep {
  position: absolute;
  z-index: 5;
  background: var(--sky-strong);
  border-radius: 0;
  pointer-events: none;
}
#dropSep.sep-h { height: 2px; }
#dropSep.sep-v { width: 2px; }

/* hovering deep over another cut while dragging = its stack is the target */
.cut-row.merge-hot { border-color: var(--sky-strong); }
.cut-row.merge-hot::after {
  content: 'Release to add on top';
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: var(--r-panel);
  background: rgba(10, 14, 17, 0.62);  /* dark room over the footage, both modes */
  color: #8FD9F2;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the version count is now a button that opens the stack */
.ver-btn {
  position: relative;  /* stays clickable above the stretched row link */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ver-btn-n {
  padding: 3px 7px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-chip);
  font-size: 10.5px;
  color: var(--text-3);
  transition: border-color var(--d-3f) var(--ease-cut), color var(--d-3f) var(--ease-cut);
}
.ver-btn:hover .ver-btn-n { border-color: var(--sky-strong); color: var(--sky-ink); }
.ver-btn:hover .chip-live { border-color: var(--sky-strong); }
.ver-x { display: none; }  /* rows spell it out; grid abbreviates to ×N */

/* grid view: cards, thumb on top, chips + cog in a footer row */
.cut-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.cut-list.is-grid .cut-list-head,
.cut-list.is-grid .cut-dropzone { grid-column: 1 / -1; }
.cut-list.is-grid .cut-row {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0 0 12px;
}
.cut-list.is-grid .cut-thumb {
  width: 100%;
  border-radius: calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0;
}
.cut-list.is-grid .cut-info { padding: 12px 12px 0; }
.cut-list.is-grid .cut-side {
  position: static;  /* the cog's absolute box anchors to the card, not this row */
  padding: 10px 12px 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;  /* the footer holds one line — chips compact instead */
  gap: 6px;
  min-width: 0;
  overflow: hidden;   /* transient extras (proxy chips) clip at the card edge */
}
.cut-list.is-grid .cut-link { width: 28px; height: 28px; min-width: 28px; }
.cut-list.is-grid .ver-btn { flex: none; }
.cut-list.is-grid .ver-word { display: none; }
.cut-list.is-grid .ver-x { display: inline; }
.cut-list.is-grid .cut-side .status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the cog rides the thumb, top right — mirrors the grip on the left */
.cut-list.is-grid .cut-drop { position: absolute; top: 6px; right: 6px; }
.cut-list.is-grid .cut-side .card-cog {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-chip);
  background: rgba(10, 14, 17, 0.62);
  color: #E8F0F3;
  backdrop-filter: blur(4px);
}
.cut-list.is-grid .cut-side .card-cog:hover { color: #FFF; background: rgba(10, 14, 17, 0.85); }
.cut-list.is-grid .cut-grip {
  top: 6px;
  bottom: auto;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-chip);
  background: rgba(10, 14, 17, 0.62);
  color: #E8F0F3;
  opacity: 1;
  backdrop-filter: blur(4px);
}

/* the version modal — one stack, paginated */
.dlg-versions { width: min(500px, 100%); }
.ver-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
.ver-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--bg);
}
.ver-thumb {
  position: relative;
  width: 58px;
  min-width: 58px;
  height: 33px;
  border-radius: var(--r-chip);
  overflow: hidden;
  background: #0A0E11;  /* the footage gets the dark room, both modes */
}
.ver-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ver-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.ver-live {
  padding: 2px 5px;
  border-radius: var(--r-chip);
  background: var(--sky-dim);
  color: var(--sky-ink);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ver-body { min-width: 0; }
.ver-note { margin: 0; font-size: 13.5px; color: var(--text); }
.ver-note-mute { color: var(--text-3); font-style: italic; }
.ver-meta { margin: 4px 0 0; font-size: 11px; color: var(--text-3); }
.ver-tags { margin: 5px 0 0; }
.ver-tag {
  padding: 2px 6px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-chip);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-3);
}
.ver-tag-warn { color: var(--tally-ink); border-color: var(--tally); }
.ver-del { width: 30px; height: 30px; color: var(--text-3); }
.ver-del:hover { color: var(--tally-ink); border-color: var(--tally); }
.ver-only { align-self: center; font-family: var(--f-mono); font-size: 10px; color: var(--text-3); }
.ver-promote {
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--text-2);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--d-3f) var(--ease-cut), color var(--d-3f) var(--ease-cut);
}
.ver-promote:hover { border-color: var(--sky-strong); color: var(--sky-ink); }
.ver-loading { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--text-3); }
.ver-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 6px 0 2px;
}
.ver-page { min-width: 54px; text-align: center; font-size: 12px; color: var(--text-3); }
@media (max-width: 760px) {
  .ver-thumb { display: none; }  /* the phone keeps the stack tight */
}

/* the branded confirm — one question, one honest consequence line */
.dlg-confirm { width: min(400px, 100%); }
.confirm-body { margin: -4px 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.btn-primary.btn-danger {
  border: 1px solid var(--tally);
  background: var(--tally-dim);
  color: var(--tally-ink);
}
.btn-primary.btn-danger:hover { background: var(--tally); color: var(--bg); }