/* ─── TVM Review Plugin - Portal-matched Theme ───────────────────────────── */

:root {
  --bg:          #242424;
  --surface:     #2f2f2f;
  --surface-2:   #363636;
  --border:      #3d3d3d;
  --text:        #e5e5e5;
  --text-muted:  #888;
  --gold:        #e8a820;
  --gold-hover:  #d49a18;
  --gold-dim:    rgba(232, 168, 32, 0.12);
  --red:         #ff5252;
  --green:       #4caf50;
  --blue:        #4a9eff;
  --orange:      #ff9800;
  --yellow:      #f0c040;
  --radius:      8px;
  --font:        'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ─── Web-only "desktop window" framing ──────────────────────────────────
   The desktop app opens a 700x920 Electron window, so the layout below was
   never designed to stretch edge-to-edge across a wide browser tab. In the
   browser (see the .web-mode class added by renderer.js's IS_ELECTRON
   check), we center #app at that same width against a darker page
   background, so it reads as one focused "app window" instead of a
   thinly-stretched desktop layout. Below 700px (tablets/phones) it just
   fills the screen like a normal responsive page. */
body.web-mode {
  background: #161616;
  display: flex;
  justify-content: center;
}
body.web-mode #app {
  width: 700px;
  max-width: 100%;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border), 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
  gap: 6px;
  overflow: hidden;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Positioned ancestor for .footage-global-btn (see below), which is
     pulled out of the header-actions flex row and centered here instead. */
  position: relative;
}

.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.logo-img {
  width: 32px; height: 32px;
  border-radius: 6px; object-fit: cover; flex-shrink: 0;
}

.logo-text-group { display: flex; flex-direction: column; line-height: 1.1; }

.logo-name { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }

.logo-sub {
  font-size: 9px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}

.update-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}
#settings-btn { position: relative; }

.update-banner {
  background: var(--gold-dim);
  border: 1px solid rgba(232, 168, 32, 0.35);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.update-banner-title { font-size: 12px; font-weight: 700; color: var(--gold); }
.update-banner-notes { font-size: 11px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.update-banner-status { font-size: 10px; color: var(--text-muted); }

/* One-time "you're now on the new version" notice - see index.html and
   updater.js's checkJustUpdated(). Fixed to the top of the window so it's
   visible immediately on launch regardless of which view loads first. */
.update-applied-toast {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex; align-items: center; gap: 10px;
  background: rgba(76, 175, 80, 0.14);
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px; font-weight: 600; color: var(--green);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.update-applied-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--green); font-size: 15px; line-height: 1; padding: 0 2px;
}

.beta-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
}

/* ─── Views ───────────────────────────────────────────────────────────────── */

.view { display: none; flex: 1; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; }
.view.active { display: flex; }

/* ─── Setup ───────────────────────────────────────────────────────────────── */

#view-setup { position: relative; justify-content: center; align-items: stretch; padding: 20px 0; }

.setup-close-btn {
  position: absolute;
  top: 0; right: 0;
}

.app-version-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px;
}
.app-version {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 0.04em;
}
#check-updates-btn { font-size: 9px; }

.setup-title { font-size: 14px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 6px; }

.setup-sub {
  font-size: 11px; color: var(--text-muted);
  text-align: center; line-height: 1.6; margin-bottom: 18px;
}

/* ─── Form ────────────────────────────────────────────────────────────────── */

label {
  font-size: 10px; color: var(--text-muted); display: block;
  margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

input[type="password"],
input[type="text"],
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px; font-family: var(--font);
  padding: 6px 10px;
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s;
}

input[type="password"]::placeholder { color: var(--text-muted); }
input:focus, select:focus { border-color: var(--gold); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px; cursor: pointer;
}

select option { background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.field-hint { font-size: 10px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

.identity-status {
  font-size: 12px; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px;
}
.identity-status.verified { color: var(--green); border-color: rgba(76,175,80,0.35); }
.identity-status.error    { color: var(--red);   border-color: rgba(255,82,82,0.35); }

/* Small pill next to a field's label spelling out whether it must be
   filled in (required), can be skipped (optional), or isn't an input at
   all - just a live status readout (status/"automatic"). Added because
   editors were filling in every blank on the sign-in screen, including
   ones that were just informational. */
.field-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 10px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
}
.field-tag.required { color: var(--gold);       background: var(--gold-dim); }
.field-tag.optional { color: var(--text-muted); background: var(--surface-2); }
.field-tag.status   { color: var(--blue);       background: rgba(74,158,255,0.12); }

/* Separates the required sign-in fields (Name/PIN) from everything below
   that's optional or read-only, so the two groups don't read as one
   undifferentiated list of blanks to fill in. */
.setup-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 16px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.setup-divider::before, .setup-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ─── Environment check banner ────────────────────────────────────────────── */

.env-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(232, 168, 32, 0.1);
  border: 1px solid rgba(232, 168, 32, 0.35);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.env-banner-msg {
  font-size: 11px;
  line-height: 1.5;
  color: var(--gold);
  flex: 1;
}

.env-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.env-banner-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 10px; font-family: var(--font); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.env-banner-btn:hover { background: var(--gold-dim); }
.env-banner-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.env-banner-dismiss {
  border-color: var(--border);
  color: var(--text-muted);
  padding: 3px 8px;
  font-size: 13px; line-height: 1;
}
.env-banner-dismiss:hover { background: var(--surface-2); }

/* ─── Tab bar ─────────────────────────────────────────────────────────────── */

#tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  margin: 0 -2px;
  padding: 0 2px;
}

/* Was plain uppercase text with just a thin underline on the active one -
   Michael (2026-09-09): "make the tabs look more like tabs to help them
   stand out a little better". Now a real raised-tab look: each one gets
   its own bordered/filled box with rounded top corners, sitting flush on
   top of #tab-bar's bottom border; the active tab's own bottom edge is
   painted in the app background color so it visually punches through that
   border and reads as "attached to" the panel open below it - the classic
   folder-tab illusion - instead of just being a color change. */
.tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  position: relative;
}

.tab:hover { color: var(--text); background: var(--surface-2); }

.tab.active {
  color: var(--gold);
  background: var(--gold-dim);
  border-color: rgba(232, 168, 32, 0.4);
  box-shadow: inset 0 2px 0 var(--gold);
}
.tab.active::after {
  /* Sits exactly on #tab-bar's 1px bottom border and repaints it in the
     app background color, so the active tab reads as continuous with the
     panel below rather than separated from it by that border. */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--bg);
}

.queue-tab-badge {
  display: inline-block;
  margin-left: 5px;
  background: var(--gold);
  color: #1a1a1a;
  font-size: 9px; font-weight: 700;
  border-radius: 999px;
  padding: 0 5px;
  line-height: 14px;
  min-width: 14px;
  text-align: center;
  vertical-align: middle;
}

/* ─── Panels (sub-views within view-main) ─────────────────────────────────── */

.panel {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-height: 0;
}

.panel.active { display: flex; }

/* Uploads panel now stacks six sections (Portal + Client Assets + Transcript
   + Review Export + 4K + queue hint), so it scrolls at the default window
   size in normal use, not just as a shrunk-window safety net. padding-right
   keeps card edges from sitting under the scrollbar. */
#panel-submit {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 8px;
}

/* ─── Comment counter ─────────────────────────────────────────────────────── */

.comment-counter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-shrink: 0; min-height: 14px;
}

.comment-counter {
  font-size: 11px; color: var(--text-muted);
  text-align: left; flex-shrink: 0;
}

.resolve-all-row {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; cursor: pointer;
}

.resolve-all-count {
  /* Was font-family: monospace - looked out of place since this label
     ("resolve all (N)", "current round only") is plain text, not numeric/
     code-like data (unlike the timecode/filename labels elsewhere that
     intentionally stay monospace). Match the rest of the page's font. */
  font-size: 10px; font-family: var(--font); letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* ─── Toggle switch (per-comment resolve + resolve-all) ──────────────────── */

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0; padding: 0;
}

.toggle-track {
  position: relative;
  width: 28px; height: 16px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.15s, background 0.15s;
}

.toggle input:checked + .toggle-track {
  background: rgba(76, 175, 80, 0.18);
  border-color: var(--green);
}
.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(12px);
  background: var(--green);
}
.toggle input:focus-visible + .toggle-track { border-color: var(--gold); }
.toggle input:disabled + .toggle-track { opacity: 0.5; cursor: not-allowed; }

/* ─── Comment list ────────────────────────────────────────────────────────── */

.comment-list {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding-right: 6px;
}

.comment-item {
  display: flex; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.comment-item:last-child { border-bottom: none; }
.comment-item:hover { background: rgba(255,255,255,0.03); }
.comment-item:hover .comment-tc { color: #f0c040; }

/* Resolved/unresolved - gold left border while still open (no background
   tint here; that read as orange/brown against the dark surface), green
   tint + dimmed once resolved (this combo was the one that actually looked
   right). See styleCommentItem() in renderer.js, which toggles these two
   classes on every comment-item. */
.comment-item.unresolved { border-left: 3px solid var(--gold); }
.comment-item.resolved   { background: rgba(76, 175, 80, 0.07); border-left: 3px solid #555; opacity: 0.55; }

/* #comment-list-qualified so this always outranks .resolved/.unresolved
   above on specificity, regardless of source order - the "currently
   selected/playing" highlight should win over the static resolved state. */
#comment-list .comment-item.active {
  background: rgba(232, 168, 32, 0.08);
  border-left: 2px solid var(--gold);
  padding-left: 8px;
}
.comment-item.active .comment-tc { color: #f0c040; }

/* A comment created after the editor's last visit to this project's
   Comments tab (see c.isNew/commentsSeenAt in loadComments(), renderer.js).
   Blue to match the existing Projects-card "new comments" flag
   (.project-card-newcomment-flag) rather than reusing gold, which already
   means "unresolved" here - a comment can be both at once and needs to
   read as one clear signal, not two competing colors. Beats
   .unresolved/.resolved on source order below since both are equally
   specific (two classes each). */
.comment-item.comment-new {
  background: rgba(74, 158, 255, 0.08);
  border-left: 3px solid var(--blue);
}
.comment-item.comment-new.resolved { opacity: 0.85; }

.comment-new-badge {
  display: inline-flex; align-items: center;
  background: rgba(74, 158, 255, 0.15);
  color: var(--blue);
  border: 1px solid rgba(74, 158, 255, 0.4);
  font-size: 8px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 4px; border-radius: 3px;
  white-space: nowrap;
}

.comment-left {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  flex-shrink: 0;
  /* Fixed instead of content-based - the label under the toggle switches
     between "resolved" and "unresolved" (different widths), which was
     reflowing this column and shoving the comment text over every time it
     changed. Wide enough for "UNRESOLVED" and a full timecode, whichever's
     wider, so neither ever wraps or resizes this column. */
  width: 68px;
}

.resolve-toggle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}

.resolve-toggle-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}

.comment-tc {
  font-size: 10px; font-family: monospace; color: var(--gold);
  font-weight: 600; flex-shrink: 0; padding-top: 2px; letter-spacing: 0.02em;
}

.comment-text {
  font-size: 11px; color: var(--text); line-height: 1.5;
  word-break: break-word; display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 0;
}

/* A URL pasted into a comment/reply/field note - see linkifyHtml() in
   renderer.js. Underlined + blue like a normal link so it reads as
   clickable inside otherwise plain comment text; break-word keeps a long
   pasted link from blowing out the comment column's width. */
.comment-link {
  color: var(--blue); text-decoration: underline; word-break: break-all;
  cursor: pointer;
}
.comment-link:hover { color: var(--gold); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  border: none; border-radius: var(--radius);
  font-size: 13px; font-family: var(--font); font-weight: 600;
  cursor: pointer; padding: 7px 14px; text-align: center;
  transition: background 0.15s, opacity 0.15s; width: 100%;
}

.btn-primary { background: var(--gold); color: #1a1a1a; }
.btn-primary:hover:not(:disabled) { background: var(--gold-hover); }
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }

/* Same size/weight as .btn-primary (full-width, same padding/radius) but a
   neutral color - for actions that need to be just as obvious/clickable as
   the primary action without visually competing with it (e.g. "Fix Footage
   Access" next to "Sign In"). */
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Company-wide shared asset library link (Project Files drawer, download
   half) - a plain external-open action, not a list item, so it gets a
   little breathing room below it before the project's own file list. */
.btn-library-link {
  border-color: rgba(232, 168, 32, 0.4);
  color: var(--gold);
  margin-bottom: 8px;
}
.btn-library-link:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-dim); }

/* "Download All" row (Project Files drawer, download half) - batch/parallel
   download of everything in the list, right below the shared-library link
   and above the per-file rows (which keep their own one-click "open signed
   link externally" download button). */
.project-files-download-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.project-files-download-all-status {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-icon {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-muted);
  padding: 8px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* Queue moved from the tab bar into the header (icon button, badge shows
   active-job count) - see header-queue-btn in index.html/renderer.js. */
#header-queue-btn { position: relative; }
#header-queue-btn.active {
  color: var(--gold); border-color: var(--gold); background: var(--gold-dim);
}
#header-queue-btn .queue-tab-badge {
  position: absolute;
  top: -5px; right: -5px;
  margin-left: 0;
}

/* Cross-drawer "Get Footage" progress pill - stays visible in the header
   regardless of which tab/project drawer is open, so closing the drawer a
   download was started from doesn't hide its speed/time-remaining (see
   updateGlobalFootageBadge in renderer.js). Wider than the other header
   icon buttons since it carries real text, not just a count. */
.footage-global-btn {
  /* Was a normal flex child of .header-actions - its text changes length on
     every progress tick (and it shows/hides entirely between batches),
     which kept shoving Refresh/Settings sideways every time ("bounces the
     buttons all over" per Michael, 2026-09-09). Taken out of the flex flow
     entirely and centered on the header bar instead, so nothing else ever
     moves regardless of its width or visibility.
     #header itself has padding-bottom:8px and no padding-top, so its own
     box (which top:50% measures against) is 8px taller than the actual
     logo/buttons row sitting flush at its top - centering against the
     whole box lands 4px too low (Michael, 2026-09-09: "isn't in line with
     all the other buttons... needs to move up higher to match"). The
     -4px below is exactly half that padding, so this now centers against
     the real button row instead of the padded box. */
  position: absolute;
  top: calc(50% - 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 50%;
  padding: 8px 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.footage-global-btn:hover { color: var(--text); }
.footage-global-badge {
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Actions row ─────────────────────────────────────────────────────────── */

#actions-row { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#import-btn { flex: 1; }

/* ─── Status ──────────────────────────────────────────────────────────────── */

#status-bar { flex-shrink: 0; }
#status-msg { font-size: 11px; color: var(--text-muted); }
#status-msg.error { color: var(--red); }

/* ─── Spin animation ──────────────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
#header-refresh-btn.spinning svg { animation: spin 0.7s linear infinite; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── Comment visual previews ─────────────────────────────────────────────── */

.c-visual {
  width: 100%; aspect-ratio: 16 / 9;
  background: #111; border-radius: 4px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border); flex-shrink: 0;
}

.pin-preview .pin-dot {
  position: absolute; width: 10px; height: 10px;
  background: var(--gold); border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.8);
}

.pin-preview::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 25% 25%;
}

.draw-preview svg { width: 100%; height: 100%; display: block; }

.draw-empty { display: flex; align-items: center; justify-content: center; }
.draw-empty span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.range-tc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; }
.tc-arrow { color: var(--text-muted); font-size: 9px; font-family: monospace; }
.range-tc::after {
  content: ''; display: block; width: 3px; flex: 1;
  background: var(--gold); opacity: 0.4; border-radius: 2px; min-height: 12px;
}

/* ─── Upload zone ─────────────────────────────────────────────────────────── */

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  flex-shrink: 0;
}

.upload-zone:hover {
  border-color: var(--gold);
  background: var(--surface-2);
}

.upload-zone.has-file {
  border-color: var(--gold);
  background: var(--gold-dim);
}

.upload-zone.uploading {
  /* Hidden, not just dimmed - while uploading, the progress bar/status
     below already says everything the drop zone would (filename, state),
     so keeping it on-screen just doubled the section's height for no
     reason. This is the single biggest space saver on the Submit tab. */
  display: none;
}

.upload-zone-label { font-size: 12px; color: var(--text); font-weight: 500; }
.upload-zone-sub   { font-size: 10px; color: var(--text-muted); }

/* Bigger and higher-contrast than the shared .upload-zone-sub caption style
   - this is the actual answer to "where did my footage go", not a small
   disclaimer line, so it shouldn't read as one. */
#footage-folder-display {
  font-size: 13px; color: var(--text); font-weight: 500;
  margin-bottom: 10px;
}
#footage-folder-display a { font-size: 13px; }

/* ─── Upload progress ─────────────────────────────────────────────────────── */

.progress-bg {
  height: 5px; background: var(--surface-2);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}

.progress-fill {
  height: 100%; background: var(--gold);
  border-radius: 3px; transition: width 0.35s ease;
}

.progress-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted);
  font-family: monospace;
}

.progress-eta-row {
  display: flex; justify-content: flex-end;
  margin-top: 2px;
}

.progress-eta {
  font-size: 10px; color: var(--text-muted);
  font-family: monospace; letter-spacing: 0.02em;
}

/* ─── Upload error ────────────────────────────────────────────────────────── */

.upload-error-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255, 82, 82, 0.08);
  border: 1px solid rgba(255, 82, 82, 0.3);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 11px; color: var(--red);
  flex-shrink: 0;
}

.retry-btn {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 10px; font-family: var(--font); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.retry-btn:hover { background: var(--gold-dim); }

/* ─── Upload done ─────────────────────────────────────────────────────────── */

.upload-done-box {
  display: flex; flex-direction: row;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(76, 175, 80, 0.06);
  border: 1px solid rgba(76, 175, 80, 0.25);
  border-radius: var(--radius);
  text-align: left; flex-shrink: 0;
}

.done-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(76, 175, 80, 0.12);
  border: 2px solid rgba(76, 175, 80, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--green);
  flex-shrink: 0;
}

.done-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.done-title { font-size: 12px; font-weight: 600; color: var(--text); }
.done-filename { font-size: 10px; color: var(--text-muted); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-done-box .btn { width: auto; flex-shrink: 0; padding: 6px 12px; font-size: 12px; }

/* ─── Progress actions (Pause / Resume / Cancel) ──────────────────────────── */

.progress-actions {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}

.pause-btn,
.resume-btn,
.cancel-btn {
  flex: 1;
  display: block;
  background: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 12px; font-family: var(--font); font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background 0.15s;
}

.pause-btn {
  border: 1px solid var(--border);
  color: var(--text);
}
.pause-btn:hover { background: var(--surface-2); }

.resume-btn {
  border: 1px solid var(--gold);
  color: var(--gold);
}
.resume-btn:hover { background: var(--gold-dim); }

.cancel-btn {
  border: 1px solid rgba(255, 82, 82, 0.35);
  color: var(--red);
}
.cancel-btn:hover { background: rgba(255, 82, 82, 0.08); }

/* ─── Section labels + divider ────────────────────────────────────────────── */

.upload-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 4px; margin-top: 4px;
}

.upload-section-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0 12px;
}

/* 4K used to get its own navy accent (.btn-4k / .progress-fill-4k) - dropped
   so every upload button/progress bar in this tab looks the same (gold,
   matching Submit for Review). progress-fill-4k class is still added in JS
   (see renderer.js enqueueUpload rendering) but no longer does anything;
   left harmless rather than touching that logic. */

/* ─── Thumbnails tab ──────────────────────────────────────────────────────── */

.thumb-ideas-box {
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0 10px;
}
.thumb-ideas-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.thumb-ideas-text {
  font-size: 11px; line-height: 1.5; color: #ddd; white-space: pre-wrap;
}
.thumb-style-box {
  background: #1f1f1f;
  border-color: var(--border);
}
.thumb-style-box .thumb-ideas-label { color: #9fc7e8; }

.thumb-progress-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  font-size: 11px; color: var(--text-muted); padding: 10px 0;
}
.thumb-cancel-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.thumb-cancel-btn:hover {
  border-color: #d97070;
  color: #d97070;
}

.thumb-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.thumb-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
  display: flex; flex-direction: column;
}
.thumb-card img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  background: #111;
}
.thumb-card-label {
  font-size: 9px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 6px 8px 2px;
}
.thumb-card-actions {
  display: flex; gap: 6px; padding: 4px 8px 8px;
}
.thumb-card-actions button {
  flex: 1; font-size: 10px; padding: 5px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: #222; color: #ddd; cursor: pointer;
}
.thumb-card-actions button:hover { border-color: var(--gold); color: var(--gold); }

/* ─── Transcript upload (Submit tab) ──────────────────────────────────────── */
/* .transcript-zone now just rides on .upload-zone for its base look (same
   background/border/radius/hover/has-file as Review + 4K) - "make them the
   same" - kept only as a JS hook, no styling of its own left. */
.transcript-status {
  font-size: 10px; color: var(--text-muted); margin-top: 2px; min-height: 12px;
}
.transcript-status:empty { margin-top: 0; min-height: 0; }
.transcript-status.error { color: var(--red); }
.transcript-status.ok    { color: var(--green); }

/* ─── Submit tab - Download/Upload groups ─────────────────────────────────── */
/* Wraps Get Footage + Project Files (download half) under one "Download"
   label, and Raw Footage Upload Portal + Project Files (upload half) +
   Transcript/Review/4K under one "Upload" label - see index.html
   #submit-group-download / #submit-group-upload. Purely visual grouping;
   the collapsible sections nested inside need no changes. */
.submit-group {
  display: flex;
  flex-direction: column;
}
.submit-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 6px;
}

/* ─── Submit tab - uniform section cards ──────────────────────────────────── */
/* Transcript / Review Export / 4K Final all share this same card treatment
   (border, padding, spacing) so they read as three equal-weight sections
   rather than the old unevenly-divided stack. */

.submit-section {
  border: 1px solid var(--border);
  border-left: 3px solid rgba(232, 168, 32, 0.45);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.submit-section .upload-section-label {
  margin: 0;
}

/* Collapsible header - shared by all Uploads-tab sections, including the
   JS-built Client Assets one. Toggling is one delegated click listener in
   renderer.js (see initSubmitSectionCollapsing). */
.submit-section-header {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.submit-section-header .upload-section-label { flex: 1; min-width: 0; }
.submit-section-status {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 45%; flex-shrink: 1;
}
.submit-section-status.has-data { color: var(--green); }
.submit-section-chevron {
  flex-shrink: 0; color: var(--text-muted);
  transition: transform 0.15s ease;
}
.submit-section.collapsed .submit-section-chevron { transform: rotate(-90deg); }
.submit-section.collapsed .submit-section-body { display: none; }
.submit-section.collapsed { gap: 0; }

.existing-info {
  font-size: 10px;
  color: var(--text-muted);
  background: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.4;
}
.existing-info strong { color: #ccc; font-weight: 600; }

/* Used when #review-existing renders a full-size button (the "Last upload:
   <filename> - Go to Review Page" button) instead of a plain text status -
   strips the box framing so the button isn't sitting inside another box. */
.existing-info.existing-info-plain {
  background: none; border: none; padding: 0;
}
.existing-upload-btn {
  font-size: 12px;
  white-space: normal;
  line-height: 1.3;
}

.field-optional { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

.thumb-source-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; color: var(--text-muted);
  background: #1f1f1f; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; margin: 4px 0;
}
.thumb-choose-file-btn {
  font-size: 10px; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--border); background: #222; color: #ddd; cursor: pointer;
}
.thumb-choose-file-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ─── Queue tab ────────────────────────────────────────────────────────────── */

.queue-hint {
  font-size: 10px; color: var(--text-muted); line-height: 1.5;
  padding: 2px 2px 0; flex-shrink: 0;
}
.queue-hint strong { color: #ccc; }

#panel-queue {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 8px;
}

.queue-header-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.queue-header-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.btn-icon-text {
  background: none; border: none; color: var(--text-muted);
  font-size: 10px; font-family: var(--font); font-weight: 600;
  cursor: pointer; padding: 2px 4px;
}
.btn-icon-text:hover { color: var(--gold); }
.btn-icon-text:disabled { opacity: 0.4; cursor: default; }
.btn-icon-text:disabled:hover { color: var(--text-muted); }

.queue-empty {
  font-size: 11px; color: var(--text-muted);
  text-align: center; padding: 20px 8px;
}

.queue-list {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

.queue-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px;
  flex-shrink: 0;
}

.queue-item-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}

.queue-item-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

.queue-badge {
  font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}
.queue-badge.review { background: rgba(255,255,255,0.08); color: #bbb; }
.queue-badge.fourk  { background: rgba(45,106,160,0.25); color: #a8d4f5; }

.queue-project {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-account {
  font-size: 9px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-filename {
  font-size: 10px; color: var(--text-muted); font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.queue-remove-btn {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.queue-remove-btn:hover { color: var(--red); }

.queue-waiting {
  font-size: 10px; color: var(--text-muted); font-style: italic;
}

/* ─── Inline confirmation toast (anchored to a specific button) ───────────── */

.inline-toast {
  position: fixed;
  z-index: 9999;
  background: var(--gold);
  color: #1a1a1a;
  font-size: 11px; font-weight: 600; font-family: var(--font);
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.inline-toast.show { opacity: 1; transform: translateY(0); }

/* ─── Projects tab ─────────────────────────────────────────────────────────── */

.projects-toolbar {
  display: flex; gap: 6px; flex-shrink: 0;
}
.projects-search { flex: 1.4; min-width: 0; }
#projects-status-filter { flex: 1; min-width: 0; }
#projects-sort { flex: 1; min-width: 0; }

.projects-list {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 6px;
}

/* Status-group headers, grouping the list "most done first" - see
   PROJECT_STATUS_GROUP_ORDER / renderProjectsList() in renderer.js. */
.projects-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 2px;
  flex-shrink: 0;
}
.projects-group-header:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.projects-group-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.projects-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.projects-group-count {
  font-size: 10px; color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: auto;
}

.projects-empty {
  font-size: 11px; color: var(--text-muted);
  text-align: center; padding: 24px 8px;
}

/* ─── Calendar tab ────────────────────────────────────────────────────────── */

.calendar-toolbar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.calendar-month-label {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--text);
}

.calendar-legend {
  display: flex; gap: 14px; flex-shrink: 0;
  font-size: 10px; color: var(--text-muted);
  padding: 0 2px;
}
.calendar-legend-item { display: flex; align-items: center; gap: 5px; }
.calendar-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.calendar-dot-review, .calendar-entry-review {
  background: var(--gold);
}
.calendar-dot-publish, .calendar-entry-publish {
  background: var(--blue);
}

.calendar-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; flex-shrink: 0;
}
.calendar-weekday {
  text-align: center; font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding-bottom: 2px;
}

.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: 6px;
}

.calendar-day {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 60px;
  background: var(--surface);
  overflow: hidden;
}
.calendar-day.other-month {
  background: none; border-color: transparent;
}
.calendar-day.other-month .calendar-day-number { color: #555; }
.calendar-day.today {
  border-color: var(--gold);
  background: var(--gold-dim);
}

.calendar-day-number {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  flex-shrink: 0;
}
.calendar-day.today .calendar-day-number { color: var(--gold); }

.calendar-entry {
  display: block; width: 100%;
  background: none; border: none; padding: 1px 3px;
  border-radius: 3px;
  font: inherit; font-size: 9px; text-align: left;
  color: var(--text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 0;
}
.calendar-entry-review { background: var(--gold-dim); border-left: 2px solid var(--gold); }
.calendar-entry-publish { background: rgba(74, 158, 255, 0.12); border-left: 2px solid var(--blue); }
.calendar-entry:hover { filter: brightness(1.25); }

.calendar-entry-more {
  font-size: 9px; color: var(--text-muted); padding: 0 3px; flex-shrink: 0;
}

.calendar-loading {
  grid-column: 1 / -1;
  text-align: center; font-size: 11px; color: var(--text-muted);
  padding: 24px 8px;
}

.project-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.project-card:hover { border-color: var(--gold); background: var(--surface-2); }

.project-card-top {
  display: flex; align-items: center; gap: 8px;
}
.project-card-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  flex: 1;
}
.project-card-account {
  font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.project-card-fieldnote-flag {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(232, 168, 32, 0.35);
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}

/* Same shape as the field-note flag above, but blue rather than gold so
   the two are distinguishable at a glance ("new client/internal comments"
   vs. "field notes from the shoot") - see markCommentsSeen/
   state.newCommentCounts in renderer.js. */
.project-card-newcomment-flag {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(74, 158, 255, 0.12);
  color: var(--blue);
  border: 1px solid rgba(74, 158, 255, 0.35);
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}

.status-badge {
  font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}

/* Same colored-pill look as .status-badge, but an actual <select> so a
   project's status can be changed right from the Projects list card
   (buildCardStatusSelect() in renderer.js) instead of requiring the
   drawer. Overrides the app-wide select{} rule (100% width, bordered box,
   dark arrow) since this needs to stay pill-sized and inline. */
/* Wraps the status <select> + its arrow icon (see buildCardStatusSelect())
   so the arrow can sit absolutely-positioned on top of the select rather
   than depending on <select>'s background-image support, which Michael
   (2026-09-09) found just wasn't rendering at all - "no arrow is visible."
   Michael also asked for the pill/arrow combo to read clearly as
   changeable at a glance, not just be a plain badge. */
.project-card-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.project-card-status-select {
  width: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 999px;
  padding: 3px 20px 3px 8px;
  /* Cancels the app-wide select{} rule's own gray background-image arrow -
     this one has its own separate arrow element instead (see
     .project-card-status-arrow), so without this it'd double up. */
  background-image: none;
  transition: border-color 0.15s, filter 0.15s;
}
.project-card-status-select:hover { border-color: rgba(255, 255, 255, 0.45); filter: brightness(1.12); }
.project-card-status-select:focus { box-shadow: 0 0 0 1px var(--gold); border-color: var(--gold); }
.project-card-status-arrow {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  opacity: 0.9;
}
.project-card-status-arrow svg { display: block; }
.project-card-status-savestate { flex-shrink: 0; }

/* Bigger variant of the same pill for the drawer header, where it sits
   next to the project name instead of in a compact card row. */
.project-drawer-header-meta .project-card-status-select {
  font-size: 10px; padding: 5px 24px 5px 12px;
}
.project-drawer-header-meta .project-card-status-arrow { right: 9px; }
.project-drawer-header-meta .project-card-status-arrow svg { width: 8px; height: 5px; }

.project-card-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.project-card-meta-item {
  font-size: 10px; color: var(--text-muted);
  display: flex; gap: 4px; align-items: baseline;
}
.project-card-meta-item strong { color: #ccc; font-weight: 600; }
.project-card-meta-item .meta-rel { font-weight: 600; }

.project-card-notneeded { opacity: 0.55; font-style: italic; }

/* ─── Project detail drawer ────────────────────────────────────────────────── */

/* .project-drawer is also a .panel (see base .panel rule above), so it
   already gets display:none/flex via .active, flex:1, and overflow:hidden -
   it lives inside view-main exactly like Comments/Submit/Queue/Projects do,
   which keeps the real header/logo above it untouched and visible whether
   the drawer is open or not. Only the footer Back button (below) is new -
   deliberately placed at the bottom of the panel rather than as a small
   icon crowding the title, so it's an obvious, deliberate action rather
   than something easy to misclick right next to the app logo. */
.project-drawer { gap: 16px; }

.project-drawer-header {
  position: relative;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding: 6px 0 16px;
  flex-shrink: 0;
}
/* Editor chip + the same colored status <select> used on Projects cards
   (buildCardStatusSelect) - Michael (2026-09-15): "project status should
   be at the top and easy to change right away" / "assigned editor can go
   at the top with the project name in the header". Reuses
   .project-card-status-* styles as-is (generic pill, not card-scoped). */
.project-drawer-header-meta {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.project-drawer-editor-chip {
  font-size: 10px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.project-drawer-header-date {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 10px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
  margin-left: auto;
}
.project-drawer-header-date-label {
  color: var(--text-muted); font-size: 8px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.project-drawer-header-date-val { color: var(--text); font-weight: 700; }
.project-drawer-header-date-rel { font-weight: 700; }
.project-drawer-header-date-rel.date-past  { color: var(--red); }
.project-drawer-header-date-rel.date-soon  { color: var(--yellow); }
.project-drawer-header-date-rel.date-later { color: var(--green); }
.project-drawer-title-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.project-drawer-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-drawer-subtitle {
  font-size: 10px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.project-drawer-body {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex; flex-direction: column; gap: 22px;
  padding-right: 8px;
}

/* Quick Links row (Upload / Review) - top of the project drawer, above
   Field Notes. Two buttons side by side rather than the default full-width
   .btn stack. */
.drawer-quicklinks-row { display: flex; gap: 8px; flex-shrink: 0; }
.btn-drawer-link {
  width: auto; flex: 1;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-drawer-link:hover { border-color: var(--gold); color: var(--gold); }
.btn-drawer-link-primary { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }
.btn-drawer-link-primary:hover { background: var(--gold-hover); color: #1a1a1a; }

.drawer-section {
  display: flex; flex-direction: column; gap: 10px;
}
.drawer-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  padding: 1px 0 1px 8px;
}

/* Field Notes gets top billing and its own visual treatment - a left
   accent bar and tinted card - so it reads as "read this first" rather
   than blending into the rest of the drawer's read-only info. */
.drawer-section-highlight {
  background: linear-gradient(135deg, rgba(232, 168, 32, 0.26) 0%, rgba(232, 168, 32, 0.20) 12%, rgba(232, 168, 32, 0.02) 45%, rgba(232, 168, 32, 0) 70%);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(232, 168, 32, 0.45);
  border-radius: 6px;
  padding: 14px 16px;
}

/* Neutral boxed-card version of the same treatment, no gold tint - used
   to frame "At a glance" as one unit. */
.drawer-section-boxed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.drawer-section-label-highlight { color: var(--gold); border-left: none; padding-left: 0; }
.drawer-section-count {
  background: var(--gold);
  color: #1a1a1a;
  font-size: 9px; font-weight: 700;
  border-radius: 999px;
  padding: 0 6px;
  line-height: 15px;
  min-width: 15px;
  text-align: center;
}

.drawer-readonly-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 18px;
}
.drawer-readonly-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-readonly-item .ro-label {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.drawer-readonly-item .ro-value {
  font-size: 12px; color: var(--text);
  overflow-wrap: break-word;
}
.drawer-readonly-item .ro-value.muted { color: var(--text-muted); font-style: italic; }
.drawer-readonly-item .ro-rel {
  font-size: 10px; font-weight: 600; margin-top: 1px;
}
.ro-rel.date-past,  .meta-rel.date-past  { color: var(--red); }
.ro-rel.date-soon,  .meta-rel.date-soon  { color: var(--yellow); }
.ro-rel.date-later, .meta-rel.date-later { color: var(--green); }

/* Client Comments in the "At a glance" grid is a real link straight to
   the Comments tab when there's something to see, not just a count -
   Michael (2026-09-15): "the 'see comments page' should be linked". */
.drawer-comments-link {
  font-size: 12px; color: var(--blue); font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; font-family: var(--font);
}
.drawer-comments-link:hover { text-decoration: underline; }

/* "<- Project Details" back-link at the top of the Comments and
   Upload/Download tabs - Michael (2026-09-15): "give the comments page a
   link back to the project details page (also the upload download
   should have the same link)". */
.panel-project-link-row { display: flex; margin: -2px 0 2px; }
.panel-project-link-btn {
  font-size: 11px; color: var(--gold); font-weight: 600;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font);
}
.panel-project-link-btn:hover { text-decoration: underline; }

/* Collapsible Master Summary / Notes sections - open/closed state persists
   per project (see DRAWER_SECTIONS_PREFS_PATH, renderer.js). Michael
   (2026-09-15): "master summary should be dropdown" / "i guess put all
   the notes in it's own drawer". */
.drawer-accordion { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.drawer-accordion-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: none; cursor: pointer;
  padding: 12px 16px; text-align: left; color: var(--text);
  font-family: var(--font);
}
.drawer-accordion-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.drawer-accordion-preview {
  font-size: 10px; color: var(--text-muted); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-accordion-chevron {
  color: var(--text-muted); flex-shrink: 0;
  transform: rotate(-90deg); transition: transform 0.15s ease;
}
.drawer-accordion.open .drawer-accordion-chevron { transform: rotate(0deg); }
.drawer-accordion-body { display: none; padding: 11px; border-top: 1px solid var(--border); }
.drawer-accordion.open .drawer-accordion-body { display: flex; flex-direction: column; gap: 10px; }

.drawer-field-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 3px;
}
.drawer-field-savestate {
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; color: var(--text-muted);
  opacity: 0; transition: opacity 0.2s ease;
  white-space: nowrap;
}
.drawer-field-savestate.show { opacity: 1; }
.drawer-field-savestate.saving { color: var(--gold); }
.drawer-field-savestate.saved  { color: var(--green); }
.drawer-field-savestate.err    { color: var(--red); }

textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px; font-family: var(--font); line-height: 1.5;
  padding: 8px 10px;
  outline: none; resize: vertical;
  min-height: 56px;
  transition: border-color 0.15s;
}
textarea:focus { border-color: var(--gold); }
textarea::placeholder { color: var(--text-muted); }
textarea.drawer-textarea-sm { min-height: 40px; }

.drawer-fieldnotes-list {
  display: flex; flex-direction: column; gap: 6px;
}
.drawer-fieldnote {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 3px;
}
.drawer-fieldnote-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.drawer-fieldnote-type {
  font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
}
.drawer-fieldnote-date {
  font-size: 9px; color: var(--text-muted); flex-shrink: 0;
}
.drawer-fieldnote-text { font-size: 11px; color: var(--text); line-height: 1.5; }
.drawer-fieldnote-loggedby { font-size: 9px; color: var(--text-muted); margin-top: 2px; font-style: italic; }

.drawer-loading, .drawer-empty-sm {
  font-size: 11px; color: var(--text-muted); font-style: italic;
  padding: 4px 0;
}

/* ─── Client Assets (drawer) ─────────────────────────────────────────────── */

.drawer-assets-list {
  display: flex; flex-direction: column; gap: 6px;
}
.drawer-asset-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px;
}
.drawer-asset-icon { color: var(--text-muted); flex-shrink: 0; display: flex; }
.drawer-asset-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.drawer-asset-name {
  font-size: 11px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-asset-meta { font-size: 9px; color: var(--text-muted); }
.drawer-asset-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.drawer-asset-name-row .drawer-asset-name { flex: 1; min-width: 0; }

/* CLIENT/EDITOR badge on each Project Files row - asset.category tags which
   one; entries saved before this existed have no category and default to
   CLIENT (see buildProjectFilesList() in renderer.js). */
.asset-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 3px; padding: 1px 4px; flex-shrink: 0;
}
.asset-badge-client {
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.asset-badge-editor {
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(232, 168, 32, 0.4);
}

.drawer-asset-health { font-weight: 600; }
.drawer-asset-health.health-complete { color: var(--green); }
.drawer-asset-health.health-failed { color: var(--red); }
.drawer-asset-health.health-stale { color: var(--orange); }
.drawer-asset-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-asset-action {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-muted); cursor: pointer;
  padding: 4px 6px; display: flex; align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.btn-asset-action:hover { border-color: var(--gold); color: var(--gold); }
.btn-asset-action.danger:hover { border-color: var(--red); color: var(--red); }
.btn-asset-action:disabled { opacity: 0.4; cursor: not-allowed; }

.drawer-asset-upload-status {
  font-size: 10px; color: var(--text-muted);
}
.drawer-asset-upload-status.err { color: var(--red); }
.drawer-asset-upload-status.ok  { color: var(--green); }

/* ─── Get Footage (download drawer) - deliberately its OWN layout rather
   than reusing .drawer-asset-item: that row was built for an icon + one
   line of text + a small icon button, and squeezes/overlaps once you add
   a file-count/size line, a NEW badge, a status line, AND a text button.
   This stacks info on top and status+button on their own row below, so
   nothing has to fight the Download button for horizontal space. ────── */
.footage-item {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 9px;
}
.footage-item-top { display: flex; align-items: center; gap: 8px; }
.footage-item-icon { color: var(--text-muted); flex-shrink: 0; display: flex; }
.footage-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.footage-item-name {
  font-size: 11px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footage-item-meta { font-size: 9px; color: var(--text-muted); }
.footage-item-meta .drawer-asset-health { margin-left: 4px; }
/* Status line and action buttons are now separate full-width rows
   (used to share one row via .footage-item-bottom) - crammed next to a
   button, the aggregate progress text had almost no room and could
   truncate to nothing once Pause/Cancel joined Download on the same row.
   :empty collapses the status row to zero height when there's nothing to
   show yet (most items, most of the time), so this doesn't add a blank
   gap under every un-downloaded item in the list. */
.footage-item-status {
  font-size: 10px; color: var(--text-muted); padding-left: 24px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footage-item-status:empty { display: none; }
.footage-item-actions {
  display: flex; align-items: center; gap: 6px; padding-left: 24px;
}
/* .btn's base rule is width:100% (built for a single full-width button,
   e.g. the old lone Download button) - inside a flex row with 2-3 buttons
   that made every button's flex-basis 100% of the row, so anything after
   the first one got pushed off the edge of the card entirely (this is
   exactly what pushed Cancel out of view once Pause/Resume was also on
   the row). width:auto here is the same override .upload-done-box .btn
   already uses elsewhere in this file for the same reason. */
.footage-item-actions .btn { width: auto; flex-shrink: 0; }
.footage-item-actions .footage-cancel-btn {
  border-color: rgba(255, 82, 82, 0.35); color: var(--red);
}
.footage-item-actions .footage-cancel-btn:hover { background: rgba(255, 82, 82, 0.08); }

/* Per-file download queue - hidden until Download is clicked, populated
   fresh each run by downloadFootageBatch(). Scrollable rather than
   growing the card, since a batch can be 100+ files. */
.footage-item-queue {
  max-height: 150px; overflow-y: auto;
  margin-top: 4px; padding: 6px 0 0 24px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.footage-queue-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 9px; color: var(--text-muted);
}
.footage-queue-row-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footage-queue-row-status { flex-shrink: 0; }
.footage-queue-row-cancelled { opacity: 0.55; }
.footage-queue-row-active .footage-queue-row-name,
.footage-queue-row-active .footage-queue-row-status { color: var(--text); }
.footage-queue-row-done .footage-queue-row-status { color: var(--green); }
.footage-queue-row-failed .footage-queue-row-status { color: var(--red); }

/* "Select files…" picker - lets an editor download a subset of a batch
   instead of the whole job. Toggle link matches the existing gold
   "Change" folder link style; tree rows reuse the same 9-11px scale as
   the download queue rows above them. */
.footage-picker-toggle {
  font-size: 9px; color: var(--gold); text-decoration: underline;
  cursor: pointer; padding-left: 24px; margin-top: -2px;
  display: inline-block;
}
.footage-item-picker {
  margin-top: 4px; padding: 6px 0 0 24px;
  border-top: 1px solid var(--border);
}
.footage-picker-loading { font-size: 10px; color: var(--text-muted); }
.footage-picker-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.footage-picker-toolbar a { font-size: 9px; color: var(--gold); text-decoration: underline; cursor: pointer; }
.footage-picker-summary { font-size: 9px; color: var(--text-muted); margin-left: auto; }
.footage-picker-tree {
  max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 6px;
}
.footage-picker-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text); cursor: pointer;
}
.footage-picker-row input[type="checkbox"] { flex-shrink: 0; }
.footage-picker-folder { color: var(--text-muted); font-weight: 500; }
.footage-picker-download-btn { width: auto; }
/* "Force redownload" checkbox (see downloadFootageBatch's forceSet) - set
   off from the plain file rows above it since it changes what a click on
   Download Selected actually does, not just which files it includes. */
.footage-picker-force-row {
  color: var(--orange);
  margin: 2px 0 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}