/* Cutlist — review-room dark UI.
   Dark is functional here: video must read true against neutral surroundings.
   Reds/oranges are reserved for action presets (semantic), so UI accent is
   an instrument teal; the internal-tier badge is violet. Timecodes are mono. */

:root {
  --bg: #10141c;
  --surface: #171c26;
  --surface-2: #1f2531;
  --surface-3: #28303f;
  --line: #2b3444;
  --line-strong: #3d4960;
  --text: #eef2f8;
  --muted: #97a2b6;
  --faint: #67738c;
  --accent: #6ea8ff;
  --accent-dim: #35517e;
  --internal: #9d8cff;
  --danger: #e5484d;
  --ok: #57c76f;
  --warn: #f0883e;
  --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, "Helvetica Neue", BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------ shell */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.brand {
  font: 700 13px/1 var(--mono); letter-spacing: 0.18em;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
.brand .tick {
  width: 3px; height: 16px; background: var(--accent);
  transform: skewX(-18deg); border-radius: 1px;
}
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; }

.page { max-width: 1060px; margin: 0 auto; padding: 32px 20px 80px; }

/* ------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0b1424; font-weight: 600; }
.btn.primary:hover { background: #8cbaff; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); }
.btn.accent {
  border-color: var(--accent); color: var(--accent);
  background: rgba(110,168,255,0.08);
}
.btn.accent:hover { background: rgba(110,168,255,0.18); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* project / client link rows in settings */
.link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.link-row:last-child { border-bottom: none; }
.link-row .link-role {
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); width: 74px; flex: none;
}
.link-row .link-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--faint); font-size: 11px;
}

/* ------------------------------------------------ client watch page */
/* Client-facing pages use a neutral, modern face — Helvetica — rather than
   the technical mono of the review tool. */
.watch-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
  font-family: "Helvetica Neue", Helvetica, Arial, var(--sans);
  letter-spacing: 0.01em;
}
.watch-head { padding: 26px 32px 6px; display: flex; justify-content: center; }
.watch-brand { display: inline-flex; align-items: baseline; gap: 12px; }
.watch-logo { height: 52px; width: auto; display: block; }
.watch-main {
  flex: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 14px 24px 40px; display: flex; flex-direction: column;
}
.watch-titles { text-align: center; margin-bottom: 14px; }
.watch-sub { color: var(--muted); font-size: 16px; margin-top: 2px; font-weight: 400; }
.watch-sub b { color: var(--text); font-weight: 600; }

/* Player: ALWAYS shows the complete frame — never cropped. The <video> keeps its
   own aspect ratio and scales to fit; letterbox/pillarbox fills any gap with black. */
.watch-frame {
  background: #000; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.watch-frame.landscape { aspect-ratio: 16 / 9; }
.watch-frame.portrait  { aspect-ratio: 16 / 9; }          /* keep frame tidy… */
.watch-frame.portrait video { height: 100%; width: auto; max-width: 100%; }  /* …video sits upright, pillarboxed */
.watch-frame.landscape video { width: 100%; height: 100%; }
.watch-frame video { object-fit: contain; background: #000; display: block; }

/* title + now-playing BELOW the video, left-aligned (Vimeo/YouTube style) */
.np-block { text-align: left; margin: 16px 2px 0; }
.np-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 5px;
}
.np-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 22px;
}
.gcard {
  display: flex; flex-direction: column; gap: 0; text-align: left; padding: 0;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 16px; overflow: hidden;
  font-family: inherit; transition: border-color 140ms, transform 120ms;
}
.gcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.gcard.sel { border-color: var(--accent); }
.gcard .gthumb {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #05070c;
  display: grid; place-items: center; overflow: hidden;
}
.gcard .gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .gthumb.portrait img { width: auto; height: 100%; object-fit: contain; } /* vertical poster: full frame */
.gcard .gthumb .gscrub {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.gcard .gthumb.portrait .gscrub { object-fit: contain; }
/* play overlay + darkening so cards read as playable */
.gcard .gthumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  transition: background 140ms;
}
.gcard:hover .gthumb::before { background: rgba(0,0,0,0.28); }
.gcard .gplay {
  position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1.5px solid rgba(255,255,255,0.85);
  display: grid; place-items: center; transition: transform 140ms, background 140ms;
}
.gcard .gplay::after {
  content: ""; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.gcard:hover .gplay { transform: scale(1.08); background: var(--accent); }
.gcard:hover .gplay::after { border-left-color: #0b1424; }
.gcard.sel .gplay { background: var(--accent); border-color: var(--accent); }
.gcard.sel .gplay::after { border-left-color: #0b1424; }
.gcard .gtitle { font-size: 16px; font-weight: 600; padding: 12px 14px 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard.sel .gtitle { color: var(--accent); }
.gcard .gmeta { color: var(--faint); font-size: 13.5px; padding: 0 14px 12px; }

/* desktop: fit within viewport but NEVER crop — the frame caps its height and
   the aspect-ratio keeps the whole video visible; page may scroll if truly tall. */
@media (min-width: 900px) {
  .watch-frame { max-height: 58vh; margin: 0 auto; }
  .watch-frame.landscape { width: auto; height: 58vh; aspect-ratio: 16/9; max-width: 100%; }
  .watch-frame.portrait  { width: auto; height: 58vh; aspect-ratio: 9/16; max-width: 100%; }
  .watch-frame.portrait video { width: 100%; height: 100%; }
  .np-block { max-width: 1120px; width: 100%; margin-left: auto; margin-right: auto; }
}
/* phone: contained; gallery is a horizontal snap strip; active card snaps into view */
@media (max-width: 899px) {
  .watch-head { padding: 20px 20px 0; }
  .watch-logo { height: 44px; }
  .np-title { font-size: 21px; }
  .watch-frame.landscape { aspect-ratio: 16/9; }
  .watch-frame.portrait  { aspect-ratio: 9/16; max-height: 60vh; margin: 0 auto; width: auto; }
  .watch-frame.portrait video { height: 100%; width: 100%; }
  .gallery {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; gap: 12px;
    margin: 18px -22px 0; padding: 2px 22px 12px;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; }
}
.watch-card {
  margin: auto; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 40px 44px;
  font-family: "Helvetica Neue", Helvetica, Arial, var(--sans);
}
.watch-card .watch-logo { margin: 0 auto; }

/* ------------------------------------------------ brand in the app chrome */
.brand-logo { height: 18px; width: auto; display: block; }
.auth-card .brand-logo { height: 24px; margin: 0 auto; }

/* ------------------------------------------------ new-project kind picker */
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.kind-opt {
  text-align: left; padding: 13px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: flex; flex-direction: column; gap: 5px;
}
.kind-opt strong { font-size: 13.5px; }
.kind-opt span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.kind-opt.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(110,168,255,0.06); }

/* ------------------------------------------------ screening admin rows */
.screen-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
}
.screen-row .grow { flex: 1; min-width: 0; }
.screen-thumb {
  width: 40px; height: 40px; flex: none; border-radius: 9px;
  display: grid; place-items: center; background: #000;
  color: rgba(255,255,255,0.85); font-size: 12px;
  border: 1px solid var(--line-strong);
}
.screen-thumb:hover { color: var(--accent); border-color: var(--accent); }
.screen-title { font-weight: 600; font-size: 14px; }
.screen-meta { color: var(--faint); font-size: 12px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.input, textarea.input {
  width: 100%; padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.input:focus { border-color: var(--accent); outline: none; }
textarea.input { resize: vertical; min-height: 60px; }
select.input { appearance: none; }
label.field { display: block; margin-bottom: 14px; }
label.field .lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }

.tc { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.07em; text-transform: uppercase;
  /* All-caps ink sits above the baseline with empty descender space beneath it,
     so symmetric padding reads as "the text is too high in the pill". A hair
     more above than below puts the letterforms on the optical centre. */
  padding: 5px 8px 4px; border-radius: 4px;
  /* The letter-spacing above adds a trailing gap after the last character,
     which pulls the text visibly left of centre in a fixed-width pill. */
  text-indent: 0.07em;
}
.badge.internal { color: var(--internal); background: rgba(157,140,255,0.12); border: 1px solid rgba(157,140,255,0.35); }
.badge.role { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.badge.status-in_review { color: var(--accent); background: rgba(110,168,255,0.1); border: 1px solid rgba(110,168,255,0.3); }
.badge.status-changes_requested { color: var(--warn); background: rgba(240,136,62,0.1); border: 1px solid rgba(240,136,62,0.3); }
.badge.status-approved { color: var(--ok); background: rgba(87,199,111,0.1); border: 1px solid rgba(87,199,111,0.3); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--line-strong);
  padding: 10px 18px; border-radius: 10px; font-size: 13px; z-index: 100;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.toast.error { border-color: var(--danger); }

/* ------------------------------------------------ auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  width: 380px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 34px 32px;
}
.auth-card .brand { justify-content: center; margin-bottom: 6px; font-size: 15px; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.form-error { color: var(--danger); font-size: 13px; margin: 10px 0 0; min-height: 18px; }

/* ------------------------------------------------ dashboard */
.dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.dash-head h1 { font: 600 20px/1.2 var(--sans); flex: 1; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.proj-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px; text-align: left;
  display: block; width: 100%; transition: border-color 120ms;
}
.proj-card:hover { border-color: var(--accent-dim); }
.proj-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.proj-card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.empty {
  border: 1px dashed var(--line-strong); border-radius: 12px;
  padding: 46px 20px; text-align: center; color: var(--muted);
}

/* ------------------------------------------------ modal / panel */
.overlay {
  position: fixed; inset: 0; background: rgba(6,8,11,0.7);
  z-index: 50; display: grid; place-items: center; padding: 20px;
}
.modal {
  width: 460px; max-width: 100%; max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 26px;
}
.modal h2 { font-size: 16px; margin-bottom: 18px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.member-row, .preset-row, .version-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.member-row:last-child, .preset-row:last-child, .version-row:last-child { border-bottom: none; }
.member-row .grow, .preset-row .grow, .version-row .grow { flex: 1; min-width: 0; }
.member-row .name { font-weight: 500; }
.member-row .email { color: var(--muted); font-size: 12px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.invite-out {
  margin-top: 12px; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11.5px; word-break: break-all;
}
.section-label {
  font: 600 11px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); margin: 22px 0 10px;
}
.section-label:first-child { margin-top: 0; }

/* ------------------------------------------------ review layout */
.review {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 0; height: calc(100vh - 52px);
}
.player-col { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px; overflow-y: auto; }
.notes-col {
  border-left: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
@media (max-width: 980px) {
  .review { grid-template-columns: 1fr; height: auto; }
  .notes-col { border-left: none; border-top: 1px solid var(--line); max-height: none; }
}

.video-frame {
  background: #000; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  display: grid; place-items: center; position: relative;
}
.video-frame video { width: 100%; max-height: 56vh; display: block; background: #000; }

/* control bar */
.controls {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px 6px;
}
.controls .timedisp { font-family: var(--mono); font-size: 13px; color: var(--text); }
.controls .timedisp .dur { color: var(--faint); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(110,168,255,0.1); }
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.kbd-hint { color: var(--faint); font-size: 11.5px; font-family: var(--mono); }

/* --------- the timeline: scrubber + note rail (signature element) */
.timeline-wrap { user-select: none; margin-top: 4px; }
.scrubber {
  position: relative; height: 30px; cursor: pointer;
  border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.scrubber .buffered { position: absolute; top: 0; bottom: 0; left: 0; background: var(--surface-3); }
.scrubber .played { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(110,168,255,0.18); }
.scrubber.range-mode { cursor: crosshair; box-shadow: 0 0 0 1px var(--accent); }
.playhead {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--accent); z-index: 5; pointer-events: none;
}
.playhead::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--accent);
}
.range-select {
  position: absolute; top: 0; bottom: 0;
  background: rgba(110,168,255,0.25);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
  z-index: 4; pointer-events: none;
}
.note-rail { position: relative; height: 46px; margin-top: 6px; }
.rail-track {
  position: absolute; inset: 0;
  border-radius: 6px; background: var(--surface);
  border: 1px dashed var(--line);
}
.rail-range {
  position: absolute; top: 6px; height: 16px; border-radius: 4px;
  opacity: 0.85; min-width: 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
}
.rail-range:hover, .rail-range.hot { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); z-index: 3; }
.rail-range.resolved { opacity: 0.3; }
.rail-point {
  position: absolute; top: 27px; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.3);
}
.rail-point:hover, .rail-point.hot { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); z-index: 3; }
.rail-point.resolved { opacity: 0.3; }

/* range composer popover */
.composer {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 16px;
}
.composer .times { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.composer .times input {
  width: 88px; text-align: center; font-family: var(--mono); font-size: 12.5px;
  padding: 6px 4px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px;
}
.composer .times .arrow { color: var(--faint); }
.preset-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.quickpick-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* dashboard: pending invitations queue */
.invite-queue { display: flex; flex-direction: column; gap: 10px; }
.invite-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--accent-dim);
  border-radius: 12px; padding: 14px 16px;
}
.invite-title { font-weight: 600; font-size: 15px; }
.invite-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.chip.selected { border-color: var(--chip-color, var(--accent)); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--chip-color, var(--accent)); }
.composer .foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.composer .foot .spacer { flex: 1; }
.vis-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.vis-toggle input { accent-color: var(--internal); }

/* ------------------------------------------------ notes sidebar */
.notes-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.notes-head .toprow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.notes-head h2 { font-size: 13px; font-weight: 600; flex: 1; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.seg {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden;
}
.seg button { padding: 5px 10px; font-size: 12px; color: var(--muted); }
.seg button.on { background: var(--surface-3); color: var(--text); }
.notes-list { flex: 1; overflow-y: auto; padding: 10px 12px 30px; }
.group-head {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 16px 4px 8px;
}
.group-head:first-child { margin-top: 4px; }
.group-head .count { color: var(--faint); }

.note-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--note-color, var(--line-strong));
  border-radius: 12px; padding: 11px 12px; margin-bottom: 9px;
  transition: border-color 120ms, box-shadow 120ms;
}
.note-card.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
.note-card.resolved { opacity: 0.55; }
.note-card .head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.note-card .tcbtn {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  background: rgba(110,168,255,0.08); border: 1px solid rgba(110,168,255,0.25);
  padding: 2px 7px; border-radius: 5px;
}
.note-card .tcbtn:hover { background: rgba(110,168,255,0.16); }
.note-card .action-tag {
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; color: #0e1116;
  background: var(--note-color, var(--muted));
}
.note-card .body { white-space: pre-wrap; word-wrap: break-word; margin-bottom: 7px; }
.note-card .meta { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 11.5px; flex-wrap: wrap; }
.note-card .meta .spacer { flex: 1; }
.note-card .meta button { color: var(--faint); font-size: 11.5px; }
.note-card .meta button:hover { color: var(--text); }
.note-card .meta .resolve { color: var(--muted); display: inline-flex; gap: 5px; align-items: center; }
.note-card .meta .resolve:hover { color: var(--ok); }
.note-card.resolved .meta .resolve { color: var(--ok); }

.replies { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 8px; }
.reply { display: flex; gap: 8px; margin-bottom: 7px; font-size: 12.5px; }
.reply .who { color: var(--muted); font-weight: 600; white-space: nowrap; }
.reply .del { color: var(--faint); visibility: hidden; }
.reply:hover .del { visibility: visible; }
.reply-input { display: flex; gap: 7px; margin-top: 4px; }
.reply-input input { flex: 1; padding: 6px 10px; font-size: 12.5px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 7px; }

.share-banner {
  margin: 10px 12px 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(157,140,255,0.08); border: 1px solid rgba(157,140,255,0.3);
  font-size: 12.5px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.share-banner .n { font-family: var(--mono); color: var(--internal); font-weight: 700; }

/* review topbar extras */
.review-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.review-top h1 { font-size: 16px; font-weight: 600; margin-right: 4px; }
.ver-select {
  font-family: var(--sans); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  padding: 6px 10px; border-radius: 8px;
}
.upload-progress { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.upload-progress .bar { height: 100%; background: var(--accent); width: 0%; transition: width 200ms; }
.drop-hint { color: var(--muted); font-size: 12.5px; }

/* ======================================================================
   Project Board (studio-admin only). Namespaced under .board-* so nothing
   collides with the review UI. Design tokens are shared with the rest of
   Cutlist, so the board reads as the same product — no visual seam.
   ====================================================================== */
.board-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.board-head h1 { flex: 1; margin: 0; }

.board-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.board-chip { border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 5px 13px; font-size: 13px; color: var(--muted); cursor: pointer; }
.board-chip:hover { border-color: var(--line-strong); color: var(--text); }
.board-chip[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--text); }
.board-count { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 5px; }

/* project · editor · sent · delivered · budget · net · status */
.board-ledger-head { display: grid; grid-template-columns: 1fr 96px 82px 82px 92px 92px 124px; gap: 12px;
  padding: 0 16px 8px; margin-top: 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--faint); border-bottom: 1px solid var(--line); }
.board-ledger-head .board-h-num { text-align: right; }
.board-ledger-head .board-h-st { text-align: center; }
@media (max-width: 720px) { .board-ledger-head { display: none; } }

.board-proj { background: var(--surface); margin-top: 9px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.board-proj:hover { border-color: var(--line-strong); }
.board-proj.open { border-color: var(--accent-dim); }

.board-row { display: grid; grid-template-columns: 1fr 96px 82px 82px 92px 92px 124px; gap: 12px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; padding: 14px 16px; color: var(--text); cursor: pointer; }
.board-row:hover { background: var(--surface-2); }
.board-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.board-title { font-size: 16px; font-weight: 600; line-height: 1.25; display: flex; align-items: baseline; gap: 9px; }
.board-caret { color: var(--faint); font-size: 11px; transition: transform .18s ease; display: inline-block; }
.board-proj.open .board-caret { transform: rotate(90deg); }
.board-editor { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.board-editor.unassigned { color: var(--faint); }
.board-date { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.board-notsent { color: var(--faint); }

/* net — job profitability legible without opening the row. Budget shares the
   base style but stays normal weight so net is the figure that draws the eye. */
.board-net { font-family: var(--mono); font-size: 12.5px; font-weight: 600; text-align: right; }
.board-net.pos  { color: var(--ok); }
.board-net.neg  { color: var(--danger); }
.board-net.none { color: var(--faint); font-weight: 500; }
.board-net.bud  { color: var(--text); font-weight: 500; }

/* Status pills: solid fills with dark ink. The old translucent tints separated
   the states by hue alone, so in-progress green and in-review amber read as the
   same pill while scanning; lightness does the work now. Not-started stays a
   hollow outline on purpose — "nothing happened yet" shouldn't compete. */
.board-status { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 6px 11px;
  border-radius: 999px; border: 1px solid transparent; text-align: center;
  white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
.board-st-notstarted { color: var(--muted); background: transparent; border-color: var(--line-strong); }
.board-st-inprogress { color: #08240f; background: #5fd47c; }  /* green */
.board-st-inreview   { color: #3a2a00; background: #f5c542; }  /* amber */
.board-st-feedback   { color: #fff;    background: #e0553f; }  /* red   */
.board-st-done       { color: #05203f; background: #6ea8ff; }  /* blue  */

/* month groups — the header row that makes a long list navigable */
.board-mgroup { display: flex; align-items: center; gap: 11px; margin: 22px 0 2px; padding: 0 4px; }
.board-mgroup:first-child { margin-top: 14px; }
.board-mlabel { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text); }
.board-mcount { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.board-mline { flex: 1; height: 1px; background: var(--line); }
.board-mnet { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.board-mnet.pos { color: var(--ok); }
.board-mnet.neg { color: var(--danger); }

.board-detail { display: none; border-top: 1px solid var(--line); padding: 18px 16px 20px; background: var(--bg); }
.board-proj.open .board-detail { display: block; }
.board-cols { display: grid; grid-template-columns: 1fr 372px; gap: 22px; }
@media (max-width: 860px) { .board-cols { grid-template-columns: 1fr; } }

.board-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--faint);
  margin-bottom: 5px; display: block; }
.board-field { margin-bottom: 15px; }
.board-brief { white-space: pre-wrap; font-size: 14.5px; line-height: 1.62; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent-dim);
  padding: 13px 15px; border-radius: 8px; max-height: 290px; overflow: auto; }
.board-meta-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 15px; }
.board-runtime { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--text); }
.board-runtime.board-sm { font-size: 16px; padding-top: 5px; }
.board-link { color: var(--accent); word-break: break-all; font-size: 13.5px; text-decoration: none; }
.board-link:hover { text-decoration: underline; }
.board-sm2 { font-size: 14px; }
.board-missing { color: var(--faint); font-style: italic; font-size: 13.5px; }

.board-ctrls { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px; margin-top: 14px; }
.board-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.board-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .board-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .board-grid2, .board-grid3 { grid-template-columns: 1fr; } }
.board-f { display: block; margin-bottom: 12px; }
.board-f input[type=text], .board-f input[type=date], .board-f input[type=number],
.board-f select, .board-f textarea, .board-extra input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text); }
.board-f input:focus, .board-f select:focus, .board-f textarea:focus, .board-extra input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.board-f textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.board-notes { margin-top: 14px; }

/* additional costs — repeatable label + amount rows, empty by default */
.board-extras { margin-top: 4px; }
.board-extra { display: grid; grid-template-columns: 1fr 110px 34px; gap: 8px;
  align-items: center; margin-bottom: 8px; }
.board-extra .board-ex-a { font-family: var(--mono); text-align: right; }
.board-ex-x { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; line-height: 1;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2);
  color: var(--faint); font-size: 17px; cursor: pointer; }
.board-ex-x:hover { color: var(--danger); border-color: var(--danger); }
.board-ex-add { margin-top: 2px; }

/* the ledger — project total, every cost against it, then the net */
.board-ledger { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); padding: 12px 14px; }
.board-lg-line { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 4px 0; font-size: 13.5px; color: var(--text); }
.board-lg-amt { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.board-lg-cost { color: var(--muted); }
.board-lg-cost .board-lg-amt { font-weight: 500; }
.board-lg-rule { border-top: 1px solid var(--line-strong); margin: 8px 0; }
.board-lg-total .board-lg-amt { font-size: 14.5px; }
.board-lg-net { font-weight: 600; padding-top: 2px; }
.board-lg-net .board-lg-amt { font-size: 19px; }
.board-lg-net.pos, .board-lg-net.pos .board-lg-amt { color: var(--ok); }
.board-lg-net.neg, .board-lg-net.neg .board-lg-amt { color: var(--danger); }
.board-lg-unset { color: var(--muted); }
.board-lg-unset .board-lg-amt { font-size: 13px; font-weight: 500; color: var(--faint); font-family: var(--sans); }

.board-note-stamp { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 5px; }
.board-rowbtns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* handoff — the reason the board exists: one-tap forward to an editor */
.board-handoff { background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; }
.board-handoff::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(115deg, var(--surface-3) 0 13px, var(--surface) 13px 26px); }
.board-handoff h3 { font-size: 16px; font-weight: 600; margin: 12px 0 4px; color: var(--text); }
.board-hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.board-preview { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px; max-height: 190px; overflow: auto;
  white-space: pre-wrap; color: var(--muted); margin-bottom: 11px; user-select: text; }
.board-copy { width: 100%; justify-content: center; }
.board-ready { font-family: var(--mono); font-size: 11.5px; margin-top: 10px; text-align: center; }
.board-ready.ok { color: var(--ok); }
.board-ready.warn { color: var(--warn); }

/* ======================================================================
   Phone layout. The desktop grid is fine; the phone layout was the real
   work of revision 1 — the header overflowed, the chips built a tall wrap
   that pushed the list off-screen, the intake sheet was cut off, and every
   focused field force-zoomed Mobile Safari.
   ====================================================================== */
@media (max-width: 720px) {
  /* header — actions must fit on one line, no horizontal overflow */
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .who { max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn { flex: 0 0 auto; }
  .brand-logo { height: 16px; }

  .page { padding: 20px 16px 72px; }
  .board-head h1 { font-size: 21px; }

  /* filter chips: one horizontally-scrollable row bled to the screen edges.
     7+ chips used to wrap into a tall block. Scrollbar hidden — the partially
     visible next chip is the affordance. */
  .board-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 -16px 6px; padding: 2px 16px 4px;
  }
  .board-filters::-webkit-scrollbar { display: none; }
  .board-chip { flex: 0 0 auto; }

  /* three-line row: title across the top, editor + net stacked on the left,
     status spanning the right. Both dates and Budget live in the detail view —
     seven columns do not fit a phone, and net is the one figure worth a glance. */
  .board-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "t t" "e s" "n s";
    row-gap: 6px; padding: 15px;
  }
  .board-title { grid-area: t; font-size: 16.5px; }
  .board-editor { grid-area: e; }
  .board-net { grid-area: n; text-align: left; font-size: 13px; }
  .board-date, .board-net.bud { display: none; }
  .board-status { grid-area: s; justify-self: end; align-self: center; font-size: 10px; padding: 5px 10px; }

  /* month headers stay — they are how you navigate a long list on a phone */
  .board-mgroup { margin: 20px 0 2px; gap: 9px; }
  .board-mlabel { font-size: 11px; }

  /* detail — single column, roomier meta, brief capped so controls stay reachable */
  .board-detail { padding: 16px 15px 18px; }
  .board-cols { grid-template-columns: 1fr; gap: 16px; }
  .board-meta-strip { gap: 14px 26px; margin-bottom: 16px; }
  .board-brief { max-height: 220px; }

  /* the primary action on mobile — thumb-sized */
  .board-copy { padding: 14px 18px; font-size: 15px; }

  /* a label and an amount side by side are too cramped to type into */
  .board-extra { grid-template-columns: 1fr 34px; grid-template-areas: "l l" "a x"; row-gap: 6px; }
  .board-extra .board-ex-l { grid-area: l; }
  .board-extra .board-ex-a { grid-area: a; }
  .board-ex-x { grid-area: x; }

  /* intake sheet — full-width padding, buttons stretch to fill the row */
  .overlay { padding: 0; place-items: stretch; }
  .modal { width: 100%; max-width: 100%; max-height: 100vh; border: 0; border-radius: 0; padding: 20px 16px 32px; }
  .modal .board-btnrow { display: flex; gap: 8px; }
  .modal .board-btnrow .btn { flex: 1; justify-content: center; }
  .modal .board-btnrow .spacer { display: none; }
}

/* iOS zoom fix — Mobile Safari force-zooms the whole page when a focused field
   is under 16px. Do not lower this. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
  .board-f input, .board-f select, .board-f textarea, .board-extra input { padding: 11px 12px; }
  .board-f { margin-bottom: 14px; }
}

/* the net figure steps down so it never wraps on a small phone */
@media (max-width: 420px) {
  .board-lg-net .board-lg-amt { font-size: 17px; }
  .board-lg-line { font-size: 13px; }
  .board-grid2, .board-grid3 { gap: 10px; }
}

/* ============================================================ deliveries
   Admin side of the client-delivery feature. Uses the app's existing tokens
   so this section looks like the rest of the tool — the Smitty branding
   applies to the public /d/ page, not to the studio's own interface. */
.dlv-admin-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .dlv-admin-grid { grid-template-columns: 380px 1fr; align-items: start; } }

.dlv-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.dlv-panel h2 { font: 600 15px/1.2 var(--sans); margin-bottom: 14px; }

.dlv-drop {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; cursor: pointer;
  color: var(--muted); font-size: 13px; transition: border-color .15s, background .15s;
}
.dlv-drop:hover, .dlv-drop.over { border-color: var(--accent); background: var(--surface-2); }
.dlv-drop strong { color: var(--text); display: block; margin-bottom: 4px; font-weight: 600; }
.dlv-drop .picked { color: var(--accent); }

.dlv-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.dlv-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
.dlv-progress { margin-top: 14px; font-size: 12px; color: var(--muted); }

.dlv-result { margin-top: 14px; }
.dlv-result .invite-out { word-break: break-all; }

.dlv-list { display: flex; flex-direction: column; gap: 10px; }

/* One card, one shape. Every delivery stacks the same five bands top to bottom
   — title, client, status, stats, actions — so the eye can travel straight
   down the list instead of re-finding each control per card. */
.dlv-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.dlv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlv-title { font: 600 15px/1.3 var(--sans); margin: 0; }
.dlv-client { color: var(--muted); font-size: 13px; line-height: 1.3; }
/* Status badges get their own line under the title rather than floating in the
   middle of the card wherever the flex run happened to leave them. */
.dlv-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dlv-statline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); }
/* Each figure stays whole; the line wraps between stats, never inside one. */
.dlv-statline .tc { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.dlv-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line);
}
/* Pushes the destructive pair to the far end of the row on a wide card. */
.dlv-actions-gap { flex: 1 1 auto; min-width: 8px; }
.dlv-actions-end {
  display: flex; align-items: center; gap: 8px;
  padding-left: 12px; border-left: 1px solid var(--line-strong);
}
/* One button style throughout: .btn.small supplies it, and an action that
   cannot apply to this delivery is dimmed in place rather than removed, so
   nothing after it shifts position. */
.dlv-act[disabled] { opacity: .38; cursor: not-allowed; }
.dlv-act[disabled]:hover { background: var(--surface-2); border-color: var(--line); }

/* The two buttons that decide whether a client's files still exist. Affirmative
   first, escape second, both big enough to hit without care. */
.dlv-confirm-row { gap: 10px; }
.dlv-confirm-row .btn { min-height: 40px; padding: 0 18px; }

/* ---- deliveries on a phone ----------------------------------------------
   Uploading from a phone is a primary path here, not a courtesy: the studio
   shoots, then posts from the venue. So the form stays first and full size
   rather than being pushed under a long list. */
@media (max-width: 899px) {
  .dlv-panel { order: -1; }
  /* Below 16px iOS Safari zooms the whole page when a field takes focus, and
     the layout never comes back without a pinch. */
  .dlv-panel .input, .dlv-panel select.input, .dlv-panel input[type="text"] {
    font-size: 16px; min-height: 44px;
  }
  .dlv-panel .btn { min-height: 44px; }
  .dlv-drop { padding: 26px 16px; font-size: 14px; }
  .dlv-kind-opt { min-height: 44px; }
  /* Progress has to be readable at arm's length, mid-upload, outdoors. */
  .dlv-progress { font-size: 14px; }
  .dlv-bar { height: 10px; margin-top: 10px; }
}
@media (max-width: 720px) {
  .dlv-list-head { flex-wrap: wrap; gap: 10px; }
  .dlv-brandfilter { margin-left: 0; width: 100%; }
  .dlv-brandfilter-opt { flex: 1 1 0; min-height: 40px; }

  /* 44px is the smallest target that is reliably hit with a thumb. */
  .dlv-act { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .dlv-actions { gap: 10px; }
  .dlv-actions-gap { display: none; }
  /* Its own full-width row under a divider, so Delete can never come to rest
     beside Copy however the buttons above it happen to wrap. */
  .dlv-actions-end {
    flex: 1 0 100%; padding-left: 0; padding-top: 10px; margin-top: 2px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .dlv-actions-end .dlv-act { flex: 1 1 0; }

  .dlv-confirm-row { flex-direction: column; }
  .dlv-confirm-row .btn { width: 100%; min-height: 46px; }
}
.badge.dlv-ready { color: var(--ok); background: rgba(87,199,111,0.1); border: 1px solid rgba(87,199,111,0.3); }
.badge.dlv-expired { color: var(--faint); background: var(--surface-2); border: 1px solid var(--line); }
.badge.dlv-revoked { color: var(--danger); background: rgba(229,72,77,0.1); border: 1px solid rgba(229,72,77,0.3); }
/* Deader than expired — the row is a record, not a link that can be revived. */
.badge.dlv-cleaned { color: var(--faint); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.badge.dlv-processing { color: var(--warn); background: rgba(240,136,62,0.1); border: 1px solid rgba(240,136,62,0.3); }

/* delivery analytics detail */
.dlv-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 26px;
}
.dlv-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.dlv-stat .k { display: block; color: var(--faint); font-size: 11px; margin-bottom: 6px; }
.dlv-stat .v { font: 600 18px/1.2 var(--sans); }

.dlv-events { display: flex; flex-direction: column; gap: 6px; }
.dlv-event {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px;
}
.dlv-event .when { color: var(--muted); min-width: 130px; font-family: var(--mono); font-size: 12px; }
.dlv-event .who { color: var(--text); }
.dlv-event .rep { color: var(--faint); margin-left: auto; font-family: var(--mono); font-size: 11.5px; }

/* Per-host accent. The studio UI is one app wearing whichever identity the
   hostname implies; only the accent and its contrast colour change. */
:root[data-brand="smitty"] {
  --accent: #EE1C25;
  --accent-dim: #7a1418;
}
:root[data-brand="smitty"] .btn.primary { color: #fff; }
:root[data-brand="smitty"] .btn.primary:hover { background: #ff2d36; }
:root[data-brand="alvan"] {
  --accent: #F2F0EC;
  --accent-dim: #5c5b58;
}
:root[data-brand="alvan"] .btn.primary { color: #0A0A0A; }
:root[data-brand="alvan"] .btn.primary:hover { background: #ffffff; }

/* view-only deliveries + the checkbox on the new-delivery form */
.badge.dlv-viewonly {
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-strong);
}
.dlv-check {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  cursor: pointer; line-height: 1.45;
}
.dlv-check input { margin-top: 2px; flex: none; width: 15px; height: 15px; accent-color: var(--accent); }
.dlv-check b { display: block; font-size: 13px; font-weight: 600; }
.dlv-check small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

/* cross-link to the other studio's host (review side, studio admins only) */
.btn.brand-cross {
  border-color: #EE1C25; color: #EE1C25; background: transparent;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn.brand-cross:hover { background: rgba(238, 28, 37, 0.12); color: #ff3f47; }

/* resumable upload */
.dlv-resume { display: block; margin-top: 6px; color: var(--warn); font-size: 12px; line-height: 1.45; }

/* download-access state + studio actions on the delivery timeline */
.dlv-access-state {
  margin: -14px 0 22px; color: var(--muted); font-size: 13px;
}
.dlv-access-state b { color: var(--text); font-weight: 600; }
.dlv-event-access { border-left: 2px solid var(--accent-dim); }
.btn.accent { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------- delivery: gallery mode
 * The Film / Photo gallery switch on the New delivery panel, and the preview
 * strip of what has been picked. */
.dlv-kind {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--panel-2, rgba(255,255,255,.04));
  border: 1px solid var(--line); border-radius: 8px; padding: 4px;
}
.dlv-kind-opt {
  flex: 1; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
}
.dlv-kind-opt:hover { color: var(--text); }
.dlv-kind-opt.is-on { background: var(--accent); color: #fff; }
.dlv-kind-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dlv-picks { margin-top: 12px; }
.dlv-picks-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; margin-bottom: 8px;
}
.dlv-picks-head span { color: var(--muted); }
.dlv-picks-head .btn { margin-left: auto; }

.dlv-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 4px;
}
.dlv-pick-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 4px; display: block; background: var(--panel-2, #222);
}
/* A photo this browser could not decode still has to occupy its slot, or the
 * count above the grid and the tiles below it disagree. */
.dlv-pick-blank, .dlv-pick-more {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: 4px;
  background: var(--panel-2, rgba(255,255,255,.06));
  border: 1px dashed var(--line);
  font-size: 10px; color: var(--muted); font-weight: 600;
}
.dlv-pick-more { border-style: solid; }

/* ===================================================== manage a delivery */
/* The admin's view inside a delivery: a grid of what is in it, and the
   controls to change it. Deliberately plainer than the client page — this is
   a work surface, not a presentation. */
.mg-refusal {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 20px;
  color: var(--text);
}
.mg-fields { display: grid; gap: 10px; max-width: 520px; margin-bottom: 26px; }
.mg-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mg-filter { max-width: 280px; }
.mg-count { color: var(--muted); font-size: 13px; margin-right: auto; }
.mg-note { margin: 0 0 14px; }

.mg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.mg-tile {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.mg-tile.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mg-tile.is-drag { opacity: 0.4; }
.mg-shot { position: relative; aspect-ratio: 4 / 3; background: var(--bg); }
.mg-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-noshot {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--faint); font-size: 12px;
}
/* Tapping the photo opens it full size; this checkbox selects it. The
   checkbox is always visible rather than revealed on hover, because the page
   is used on a tablet, where there is no hover to reveal it with. Its target
   is 34px square — a finger, not a cursor. */
.mg-open {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; background: transparent; border: 0; cursor: zoom-in;
}
.mg-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-zoom {
  position: absolute; right: 6px; bottom: 6px;
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; font-size: 13px;
  color: #fff; background: rgba(6, 9, 14, 0.62);
  opacity: 0; transition: opacity 120ms ease;
}
.mg-tile:hover .mg-zoom, .mg-open:focus-visible .mg-zoom { opacity: 1; }
@media (hover: none) { .mg-zoom { opacity: 1; } }
.mg-pick {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px;
  background: transparent; border: 0; cursor: pointer; z-index: 1;
}
.mg-pick::after {
  content: ''; position: absolute; top: 8px; left: 8px;
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid #fff; background: rgba(0, 0, 0, 0.45);
}
.mg-tile.is-sel .mg-pick::after {
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface);
}

/* Always visible, on every device. The number here is the number the client
   reads in their lightbox, and it is the thing being matched against "remove
   333" — it cannot live behind a hover. */
.mg-cap {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 7px;
  padding: 7px 8px; border-top: 1px solid var(--line);
}
.mg-num {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  min-width: 30px; padding: 3px 6px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 13px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* A photo the client cannot see yet has no number in their gallery, and says
   so rather than borrowing one that belongs to a different photo. */
.mg-num.is-none { color: var(--faint); font-weight: 400; }
.mg-name {
  grid-column: 2; grid-row: 1;
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-meta {
  grid-column: 2; grid-row: 2; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mg-tools {
  display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--line);
  align-items: center;
}
.mg-move, .mg-drop {
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--muted); border-radius: 6px; cursor: pointer;
  font-size: 12px; padding: 3px 7px;
}
.mg-move:hover, .mg-drop:hover { border-color: var(--accent); color: var(--accent); }
.mg-drop { margin-left: auto; }
.mg-drop:hover { border-color: var(--danger); color: var(--danger); }

.mg-confirm-list {
  margin: 0 0 12px; padding-left: 18px; max-height: 180px; overflow: auto;
  color: var(--muted); font-size: 13px;
}
.mg-replacing {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
.mg-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; }
/* `display` on the element outranks the user-agent's [hidden] rule, so without
   this the idle progress bar shows on every visit, announcing "Working…" at a
   page that is doing nothing. */
.mg-progress[hidden] { display: none; }
.mg-progress .dlv-bar { flex: 1; }

/* ---------------------------------------------- deliveries: brand labelling
 * Both studios share one Deliveries list, so every row says whose it is and
 * the list can be narrowed to one brand. Colours are each brand's own accent
 * (brand.js) — nothing new invented here. */
.dlv-list-head {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 10px; flex-wrap: wrap;
}
.dlv-list-head .section-label { margin: 0 !important; }

.dlv-brandfilter {
  /* align-items: stretch so each pill is exactly as tall as the track it sits
     in — the active one used to be a short filled box floating inside a taller
     container, which read as misaligned rather than selected. */
  display: flex; align-items: stretch; gap: 4px; margin-left: auto;
  background: var(--panel-2, rgba(255,255,255,.04));
  border: 1px solid var(--line); border-radius: 8px; padding: 4px;
}
.dlv-brandfilter-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 12px; border: 0; border-radius: 6px; line-height: 1;
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
}
.dlv-brandfilter-opt:hover { color: var(--text); }
.dlv-brandfilter-opt.is-on { background: var(--accent); color: #fff; }
.dlv-brandfilter-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dlv-brandfilter-opt .n { opacity: .65; font-variant-numeric: tabular-nums; }

/* The chip reads as an identity, not a status, so it is outlined rather than
 * filled — a filled pill here competes with the state badge beside it. */
.badge.dlv-brand {
  font-size: 10px; letter-spacing: .04em; font-weight: 700;
  /* Was 1px top and bottom, which is what made SMITTY and LUPICTION sit high
     against the state badge beside them. Same vertical rhythm as .badge now;
     only the radius still distinguishes an identity chip from a status one. */
  padding: 5px 9px 4px; border-radius: 999px;
  background: transparent; border: 1px solid currentColor;
}
.badge.dlv-brand[data-brand="lupiction"] { color: #6ea8ff; }
.badge.dlv-brand[data-brand="smitty"]    { color: #EE1C25; }
.badge.dlv-brand[data-brand="alvan"]     { color: #F2F0EC; }

/* ---- the expanded photo (admin only) ----------------------------------- */
/* Full-size review of one photo without leaving the grid: the studio is
   answering "is this the one the client means?", and only the photo itself
   answers it. Selecting and removing live in here too, because the workflow is
   look, confirm, remove — closing the view to act on what you just looked at
   is the step worth removing. */
.mg-box {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 9, 14, 0.94);
  display: grid; grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "bar bar bar" "prev stage next";
  /* The stage must FILL its row, not shrink to the image: with centred items
     the figure's height comes from the photo, so the photo's own max-height
     resolves against itself and a tall portrait runs off the bottom of the
     screen. The arrows centre themselves instead. */
  align-items: stretch;
}
body.mg-locked { overflow: hidden; }
.mg-box-bar {
  grid-area: bar; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mg-box-num {
  font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.mg-box-name { font-size: 13px; color: var(--text); }
.mg-box-meta { font-size: 12px; color: var(--muted); }
.mg-box-bar .grow { flex: 1; }
.mg-box-stage {
  grid-area: stage; margin: 0; padding: 14px;
  /* Flex, not grid: inside a grid whose row is auto-sized, the photo's
     max-height:100% resolves against a row sized by the photo itself, which
     constrains nothing — a tall portrait then runs off the bottom of the
     screen at full resolution. A flex container has a definite height to
     measure against. */
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0; overflow: hidden;
}
.mg-box-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
.mg-box-nav {
  align-self: center;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 34px; line-height: 1; padding: 10px 16px; opacity: 0.65;
}
.mg-box-nav:hover { opacity: 1; }
.mg-box-nav.prev { grid-area: prev; }
.mg-box-nav.next { grid-area: next; }
/* On a phone the arrows sit under the photo, where a thumb can reach them,
   rather than pinned to screen edges a one-handed grip cannot. */
@media (max-width: 560px) {
  .mg-box {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "bar bar" "stage stage" "prev next";
    grid-template-rows: auto 1fr auto;
  }
  .mg-box-nav { font-size: 28px; padding: 14px; background: var(--surface-2); margin: 6px; border-radius: 8px; }
}

/* A quiet flag: another live delivery looks like this one. Deliberately not
   red — a legitimate "… - Full" companion is common, and the studio is the one
   who knows which link the client has. */
.badge.dlv-dupe { background: rgba(224, 168, 76, 0.14); color: #e0a84c; border-color: rgba(224, 168, 76, 0.4); }
/* Used where an action is about to affect someone who is mid-use. */
.dlv-warn {
  background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.35);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px;
  font-size: 13px; color: var(--text);
}
.mg-alias { margin-bottom: 26px; }
.mg-alias-list { list-style: none; margin: 0 0 6px; padding: 0; }
.mg-alias-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}

/* ---------------- clients (admin) ---------------- */
.cl-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-2);
}
.cl-initials {
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
/* The mockups switch reads as one line: a checkbox and its label, not a
   stacked form field like the inputs around it. */
.mk-switch { display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; margin: 4px 0 2px; }
.mk-switch input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }

/* Instagram data-access warning. Amber by default, red once it has lapsed —
   there is no email here, so this banner is the only warning that exists. */
.ig-banner {
  border: 1px solid var(--warn, #C98F0A); border-left-width: 3px;
  background: var(--surface-2); border-radius: 12px;
  padding: 12px 15px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.55;
  color: var(--muted); max-width: 60rem;
}
.ig-banner b { color: var(--text, var(--ink)); }
.ig-banner code { font-family: var(--mono); font-size: 12.5px; }
.ig-banner.bad { border-color: var(--danger, #e5484d); }

/* Reel covers on the manage grid */
.mg-kind { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mg-kind.is-cover { color: var(--accent); font-weight: 600; }
.mg-cover { display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.mg-cover select { font-size: 12px; padding: 4px 6px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); max-width: 100%; }

/* Client dialog: hand-filled Instagram profile */
.cl-counts .field { flex: 1; min-width: 0; }
.cl-posts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 8px; }
.cl-posts:empty { display: none; }
.cl-post { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; background: var(--surface-2) center / cover; }
.cl-post .cl-rm { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 20px; padding: 0; z-index: 1; }
/* The whole tile is the pin toggle. */
.cl-post .cl-pin { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 4px;
  display: flex; align-items: flex-end; justify-content: space-between; color: #fff; cursor: pointer; }
.cl-post .cl-pin b { margin: 3px; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #0b1424;
  font-size: 11px; font-weight: 700; }
.cl-post .cl-pin i { margin: 3px 4px; font-style: normal; font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.8); margin-left: auto; }
.cl-post.is-pinned { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Manage grid: videos and covers */
.mg-kind.is-orphan { color: var(--danger, #e5484d); font-weight: 600; }
.mg-shot { position: relative; }
.mg-vbadge { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 11px; font-weight: 600; border-radius: 5px; padding: 2px 6px; pointer-events: none; }

/* Client picker (New delivery, Manage, mockups prompt) */
.cpk { position: relative; }
.cpk-chosen { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface-2); }
.cpk-chosen .btn { margin-left: auto; }
.cpk-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface);
  border: 1px solid var(--line-strong, var(--line)); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-height: 280px; overflow: auto; padding: 4px; }
.cpk-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px;
  border-radius: 6px; color: var(--text); }
.cpk-opt:hover, .cpk-opt:focus-visible { background: var(--surface-2); }
.cpk-new { color: var(--accent); font-weight: 600; }
.cpk .cl-avatar { width: 24px; height: 24px; font-size: 10px; }

/* Mockups switch: "Mockups: Off ⟶ On" */
.dlv-mock { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; font-size: 13px; }
.mk-tog { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mk-tog .mk-lbl { color: var(--muted); }
.mk-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-track { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-3, #3a3f4b); position: relative;
  transition: background .15s; }
.mk-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.mk-tog input:checked + .mk-track { background: var(--ok, #3bb273); }
.mk-tog input:checked + .mk-track::after { transform: translateX(14px); }
.mk-tog input:focus-visible + .mk-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-state { min-width: 22px; }
.mk-preview { font-weight: 600; }
/* hidden must win over the picker's own display rules */
.cpk [hidden] { display: none !important; }
#dlvClientPicker + .drop-hint { display: block; margin: 6px 0 12px; }
.mg-fields > .btn { justify-self: start; }
/* A light accent (Alvan Washington) needs dark text on the selected filter. */
:root[data-brand="alvan"] .dlv-brandfilter-opt.is-on { color: #0A0A0A; }

.mg-box-stage video { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
.mg-box-stage [hidden] { display: none; }

/* Reel cover pairs on the manage grid */
.mg-pair { display: grid; gap: 6px; margin-top: 6px; padding: 7px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-size: 12px; color: var(--text); }
.mg-pair b { font-weight: 600; word-break: break-all; }
.mg-pair .btn { justify-self: start; }
.mg-pair select { font-size: 12px; padding: 3px 5px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.mg-cover-inset { position: absolute; right: 6px; top: 6px; width: 30%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 4px; border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }

/* Which platforms a delivery's mockups show */
.mk-plats { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mk-plat { display: inline-flex; cursor: pointer; }
.mk-plat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-plat span { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  text-decoration: line-through; }
.mk-plat input:checked + span { color: var(--text); border-color: var(--accent); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mk-plat input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }