:root {
  --bg: #f4f5f7;
  --card: #fff;
  --border: #d8dde6;
  --text: #1a1d26;
  --muted: #5c6578;
  --accent: #1a5fb4;
  --accent2: #6f42c1;
  --ok: #2e7d32;
  --err: #c62828;
  --warn: #ed6c02;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
header {
  background: #111827;
  color: #fff;
  padding: 14px 24px;
}
header .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
header h1 { margin: 0; font-size: 1.15rem; font-weight: 600; }
header p { margin: 4px 0 0; opacity: 0.75; font-size: 0.85rem; }
header .header-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}
header .header-bell {
  margin: 0;
  width: 28px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
}
header .header-bell:hover,
header .header-bell:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  color: #fff;
  opacity: 0.85;
}
header .header-bell-icon {
  display: block;
}
header .header-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fff;
}
header .header-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #334155;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
header .header-display-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
header .header-menu {
  position: relative;
  flex: 0 0 auto;
}
header .header-hamburger {
  margin: 0;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header .header-hamburger:hover,
header .header-hamburger[aria-expanded="true"] {
  border-color: #fff;
}
header .header-hamburger-bars,
header .header-hamburger-bars::before,
header .header-hamburger-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
header .header-hamburger-bars {
  position: relative;
}
header .header-hamburger-bars::before,
header .header-hamburger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
header .header-hamburger-bars::before { top: -5px; }
header .header-hamburger-bars::after { top: 5px; }
header .header-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  padding: 10px;
  background: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
header .header-menu-panel[hidden] {
  display: none !important;
}
header .header-menu-panel .header-logout,
header .header-menu-panel .header-settings {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  text-align: left;
}
header .header-menu-panel .header-settings {
  margin-bottom: 0;
  font-weight: 500;
  opacity: 0.85;
}
header .header-menu-panel .header-logout:hover,
header .header-menu-panel .header-settings:hover {
  border-color: #fff;
  opacity: 1;
}

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tabs button {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}
.tabs button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tabs button.active.dojo {
  background: var(--accent2);
  border-color: var(--accent2);
}
.tabs button.active.harvest {
  background: #0f766e;
  border-color: #0f766e;
}
button.primary.harvest {
  background: #0f766e;
}
.harvest-results {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 420px;
  overflow: auto;
}
.harvest-results table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}
.harvest-results th,
.harvest-results td {
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}

.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.card .hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 14px;
}

label.field {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 10px 0 4px;
}
input[type="file"] {
  /* Hidden — triggered by dropzone / Choose Files button */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
input[type="text"],
select {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
}

/* ---- Drag & drop zones ---- */
.dropzone {
  border: 2px dashed #9aa6bc;
  border-radius: 12px;
  background: #f8fafc;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  margin: 8px 0 4px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
}
.dropzone:hover {
  border-color: var(--accent);
  background: #eef5fc;
}
.dropzone.dragover {
  border-color: var(--accent);
  background: #e3f2fd;
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.18);
}
.dropzone.dojo-zone:hover,
.dropzone.dojo-zone.dragover {
  border-color: var(--accent2);
  background: #f3eef9;
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.15);
}
.dropzone.has-files {
  border-style: solid;
  border-color: #7aa2d4;
  background: #f0f6fc;
}
.dropzone.dojo-zone.has-files {
  border-color: #a78bda;
  background: #f7f2fc;
}
.dropzone .dz-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.dropzone .dz-sub {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 420px;
}
.dropzone .dz-feedback {
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  min-height: 1.3em;
}
.dropzone.dojo-zone .dz-feedback {
  color: var(--accent2);
}
.dropzone .dz-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.dropzone .dz-actions button {
  pointer-events: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  margin-bottom: 8px;
}
.row .col { min-width: 160px; }

button.primary {
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
button.primary.dojo { background: var(--accent2); }
button.primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button.secondary {
  background: #eef1f6;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  margin-top: 8px;
}

/* Phase A1: locked Project setup while a project is active */
.project-setup.setup-locked {
  opacity: 0.78;
  position: relative;
}
.project-setup.setup-locked::after {
  content: "Setup locked for this project — use Start another project to change.";
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.project-setup.setup-locked input:disabled,
.project-setup.setup-locked select:disabled,
.project-setup.setup-locked textarea:disabled,
.project-setup.setup-locked button:disabled {
  background: #e8ebf0;
  color: #4a5160;
  cursor: not-allowed;
  opacity: 1;
}

/* Success / secondary-green (Start another project — not Start blue) */
button.success {
  margin-top: 14px;
  background: #2e7d32;
  color: #fff;
  border: 1px solid #256628;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
button.success:hover {
  background: #256628;
}
button.success:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Interstitial under Project setup: helper left, Start another right */
.setup-after-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 14px 0 8px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border);
}
.setup-after-hint {
  margin: 0 !important;
  flex: 1 1 180px;
  color: var(--muted);
  font-size: 0.85rem;
}
.setup-after-row .success {
  margin: 0;
  margin-left: auto;
  flex: 0 0 auto;
}
/* Primary Start / Add Photos alone under photo drop zone */
.photo-primary-action {
  margin-top: 12px;
}
.photo-primary-action .primary {
  margin-top: 0;
}
@media (max-width: 560px) {
  .setup-after-row {
    flex-direction: column;
    align-items: stretch;
  }
  .setup-after-row .success {
    margin-left: 0;
    width: 100%;
  }
}

.status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef2f8;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.status.error { background: #fdecea; color: var(--err); }
.status.ok { background: #e8f5e9; color: var(--ok); }

.progress-wrap {
  margin-top: 10px;
  height: 10px;
  background: #e3e7ef;
  border-radius: 999px;
  overflow: hidden;
  display: none;
}
.progress-wrap.on { display: block; }
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #4c8fe0);
  transition: width 0.25s ease;
}

/* Project setup (New Project form) */
.project-setup {
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}
.setup-heading {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.setup-hint {
  margin: 0 0 12px !important;
}
.req {
  color: var(--err);
  font-weight: 700;
}
.opt {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85em;
}
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.check-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.check-item input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
/* Structured addresses on New Project */
.address-block {
  margin: 0 0 12px;
  padding: 12px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.address-heading {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.address-row .col-state {
  min-width: 72px;
  max-width: 100px;
  flex: 0 0 90px;
}
.address-row .col-zip {
  min-width: 100px;
  max-width: 140px;
  flex: 0 0 120px;
}
#addAddressBtn {
  margin: 0 0 14px;
}
.address-diff-check {
  margin: 0 0 10px;
  display: inline-flex;
}
/* When additional addresses share primary city/state/ZIP — hide local fields */
.address-additional.same-city .addr-local-fields {
  display: none !important;
}
.state-select {
  width: 100%;
}
.photo-upload-block {
  margin: 8px 0 4px;
  padding-top: 4px;
}
.photo-upload-block[hidden] {
  display: none !important;
}
.hint.gate-locked {
  color: var(--warn);
  font-weight: 600;
}
/* Plain helper text where the photo area will appear (not a control) */
.hint.gate-placeholder {
  color: var(--muted);
  font-weight: 500;
  margin: 8px 0 4px;
  pointer-events: none;
  user-select: none;
}
.hint[hidden] {
  display: none !important;
}
#jobSubmit[hidden] {
  display: none !important;
}
.dropzone.disabled {
  cursor: not-allowed;
  border-style: dashed;
  border-color: #c5cad6;
  background: #f0f2f5;
}

/* Progress + cancel */
.progress-block { margin-top: 12px; }
.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
button.danger-ish {
  border-color: #f0b4b4;
  color: var(--err);
  background: #fff5f5;
}
button.danger-ish:hover { background: #fdecea; }

.inline-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 8px 8px 0 0 !important;
  font-weight: 600;
  font-size: 0.85rem;
}
.inline-label select {
  width: auto;
  max-width: none;
  margin: 0;
}

/* =========================================================================
   Working Review — shared visual system (New Job + Dojo)
   ========================================================================= */

.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 12px 0 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toolbar-actions .primary,
.toolbar-actions .secondary,
.toolbar-actions button {
  margin: 0 !important;
}
.toolbar-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.view-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.view-control select {
  width: auto;
  min-width: 160px;
  max-width: 260px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.view-control select:hover {
  border-color: #b0b8c7;
}
.view-control select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.12);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.chip-filter:hover {
  border-color: #c5cad6;
  background: #f0f3f8;
}
.chip-filter:has(input:checked) {
  border-color: #a8c0e0;
  background: #eef5fc;
  color: var(--accent);
}
.chip-filter input { width: auto; margin: 0; accent-color: var(--accent); }

.review-shell {
  margin-top: 4px;
}

.review-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4b5565;
  /* Counts: INCLUDED (N) / EXCLUDED (M) — always visible */
  font-variant-numeric: tabular-nums;
}
.review-count-summary {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #4b5565;
  background: #f0f3f7;
  border: 1px solid var(--border, #d8dde6);
  border-radius: 999px;
  white-space: nowrap;
  max-width: min(520px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-count-summary[hidden] {
  display: none !important;
}
.review-count-summary.p2-band-below,
.p2-soft-target.p2-band-below {
  border-color: #f0c36d;
  background: #fff8e8;
  color: #8a5a12;
}
.review-count-summary.p2-band-in,
.p2-soft-target.p2-band-in {
  border-color: #9cb89a;
  background: #eef6ee;
  color: #2e6b32;
}
.review-count-summary.p2-band-above,
.p2-soft-target.p2-band-above {
  border-color: #e07020;
  background: #fff6ed;
  color: #b45309;
}
.p2-soft-target {
  margin: 6px 0 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, #d8dde6);
  font-size: 0.82rem;
  line-height: 1.35;
}
.p2-soft-target[hidden] {
  display: none !important;
}
/* P2a suggestion chips on cards — guidance only */
.rv-p2-suggest {
  margin: 0 12px 6px;
  padding: 3px 8px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
}
.rv-p2-keep {
  background: #eef6ee;
  color: #2e6b32;
  border-color: #9cb89a;
}
.rv-p2-buffer {
  background: #eef5fc;
  color: #0b5ed7;
  border-color: #9ec5fe;
}
.rv-p2-exclude {
  background: #fff6ed;
  color: #b45309;
  border-color: #e07020;
}
.rv-p2-deficiency {
  background: #f5f0fa;
  color: #6f42c1;
  border-color: #c4b0e0;
}
.review-card.p2-suggest-exclude {
  opacity: 0.92;
}
.review-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.review-group-label.excluded-label {
  margin-top: 0;
  color: #8b93a3;
  flex: 1;
  min-width: 0;
}
/* Excluded folder header: label + independent sort (like two folders) */
.review-group-header.excluded-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 28px 0 10px;
}
.review-group-header .review-group-label {
  margin: 0;
  flex: 1 1 auto;
}
.review-group-sort {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8b93a3;
  flex: 0 0 auto;
}
.review-group-sort select {
  min-width: 160px;
  max-width: 220px;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  border: 1px solid #d5dae3;
  border-radius: 6px;
  background: #fff;
  color: #1a1f2c;
}
.review-group-label.excluded-label::after {
  background: #d8dde6;
  border-top: none;
  background-image: repeating-linear-gradient(
    90deg,
    #d8dde6 0,
    #d8dde6 4px,
    transparent 4px,
    transparent 8px
  );
  height: 1px;
}

/* Density-aware review grids */
.review-grid {
  display: grid;
  gap: 14px;
  margin-top: 0;
  align-items: stretch;
}
.review-grid.density-medium {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}
.review-grid.density-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.review-grid.density-xlarge {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.review-grid.excluded-grid {
  padding: 12px;
  border-radius: 10px;
  background: #f3f4f7;
  border: 1px dashed #c5cad6;
}

/* Review card — calm vertical stack (Section 9 order) */
.review-card {
  border: 1px solid #d5dae3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  user-select: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
}
/* After closing lightbox: land on this photo */
.review-card.rv-reveal-pulse {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
  z-index: 3;
  animation: rv-reveal-pulse 1s ease-out;
}
@keyframes rv-reveal-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 95, 180, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 95, 180, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 95, 180, 0);
    outline-color: transparent;
  }
}
.review-card:hover {
  border-color: #c0c7d4;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}
/* Selection — modern photo-log: border + tint + checkbox */
.review-card.selected {
  border: 2.5px solid #0b5ed7;
  background: #eef5fc;
  box-shadow:
    0 0 0 3px rgba(11, 94, 215, 0.18),
    0 2px 10px rgba(11, 94, 215, 0.1);
  z-index: 2;
}
.review-card.selected:hover {
  border-color: #0a58ca;
  background: #e6f0fb;
  box-shadow:
    0 0 0 3px rgba(11, 94, 215, 0.22),
    0 3px 12px rgba(11, 94, 215, 0.12);
}
/* Selected + flagged: blue outer ring for selection; keep even flag border on all sides */
.review-card.selected.flagged {
  /* border-color set by flag-* classes below — do not collapse to blue-only */
  box-shadow:
    0 0 0 3px rgba(11, 94, 215, 0.2),
    0 2px 10px rgba(11, 94, 215, 0.1);
}
.review-card.selected.excluded {
  background: #eef2f7;
  opacity: 0.95;
  filter: none;
}

/* Selection checkbox — right side of card top bar */
.rv-select-check {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: 1px solid #c5cad6;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rv-select-check:hover {
  border-color: #0b5ed7;
  background: #f3f8ff;
}
.rv-select-check:focus-visible {
  outline: 2px solid #0b5ed7;
  outline-offset: 1px;
}
.rv-select-box {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid #8b93a3;
  background: #fff;
  box-sizing: border-box;
  position: relative;
}
.rv-select-check.checked,
.review-card.selected .rv-select-check {
  background: #0b5ed7;
  border-color: #0b5ed7;
}
.rv-select-check.checked .rv-select-box,
.review-card.selected .rv-select-check .rv-select-box {
  border-color: #fff;
  background: #0b5ed7;
}
.rv-select-check.checked .rv-select-box::after,
.review-card.selected .rv-select-check .rv-select-box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Flagged cards — even hard border on all 4 sides (Master colors)
   No top-only ::before strip (that made the top look thicker/uneven).
   Priority when multi-flag: Red > Orange > Magenta > Cyan > Yellow */
.review-card.flagged {
  border-style: solid;
  border-width: 2.5px; /* same on top/right/bottom/left */
  border-color: #e07020; /* default orange (needs_user_input) */
  border-radius: 12px;
  box-sizing: border-box;
  /* Soft drop only — no extra outer ring that reads as uneven border */
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
.review-card.flagged::before {
  display: none !important; /* remove partial top bar */
}
/* poor_image_quality — Red */
.review-card.flagged.flag-red {
  border-color: #c62828;
}
/* needs_user_input — Orange */
.review-card.flagged.flag-orange {
  border-color: #e07020;
}
/* low_confidence — Magenta */
.review-card.flagged.flag-magenta {
  border-color: #c2185b;
}
/* multiple_section_possible — Cyan */
.review-card.flagged.flag-cyan {
  border-color: #00838f;
}
/* metadata_issue — Yellow */
.review-card.flagged.flag-yellow {
  border-color: #f9a825;
}

/* Selected + flagged: even flag border + outer blue selection ring */
.review-card.selected.flagged {
  border-width: 2.5px;
  border-style: solid;
  box-shadow:
    0 0 0 3px rgba(11, 94, 215, 0.2),
    0 2px 10px rgba(11, 94, 215, 0.1);
}
.review-card.selected.flagged.flag-red { border-color: #c62828; }
.review-card.selected.flagged.flag-orange { border-color: #e07020; }
.review-card.selected.flagged.flag-magenta { border-color: #c2185b; }
.review-card.selected.flagged.flag-cyan { border-color: #00838f; }
.review-card.selected.flagged.flag-yellow { border-color: #f9a825; }

/* Excluded: quiet grey treatment; separated group handles bulk separation */
.review-card.excluded {
  opacity: 0.72;
  filter: grayscale(0.45);
  border-color: #c8cdd6;
  border-style: solid;
  box-shadow: none;
  background: #fafbfc;
}
.review-card.excluded:hover {
  opacity: 0.85;
  box-shadow: none;
}
/* Excluded + flagged: keep even 4-side border (softer color), full rectangle */
.review-card.excluded.flagged {
  filter: grayscale(0.25);
  opacity: 0.9;
  border-width: 2.5px;
  border-style: solid;
  box-shadow: none;
}
.review-card.excluded.flagged.flag-red { border-color: #d27a7a; }
.review-card.excluded.flagged.flag-orange { border-color: #c4a27a; }
.review-card.excluded.flagged.flag-magenta { border-color: #c48aa5; }
.review-card.excluded.flagged.flag-cyan { border-color: #7aadb3; }
.review-card.excluded.flagged.flag-yellow { border-color: #d4c07a; }

/* 1. Top chrome: 3-column layout — switch LEFT | bulk CENTER | checkbox RIGHT
   Switch and checkbox stay anchored; bulk only fills the middle when selected. */
.rv-include-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid #eef0f4;
  background: #fafbfc;
  min-height: 32px;
  box-sizing: border-box;
  width: 100%;
}
/* Column 1 — always far left */
.rv-include-bar > .rv-switch,
.rv-include-bar > .rv-switch-compact {
  grid-column: 1;
  justify-self: start;
}

/* Column 2 — bulk actions only when selected (middle) */
.rv-include-bar > .rv-card-bulk {
  grid-column: 2;
  justify-self: stretch;
  min-width: 0;
}

/* Column 3 — always far right (even when bulk is absent) */
.rv-include-bar > .rv-select-check {
  grid-column: 3;
  justify-self: end;
}

/* Compact switch — force small size (do not grow) */
.review-card .rv-switch,
.review-card .rv-switch-compact {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  margin: 0;
  padding: 2px 7px 2px 3px !important;
  border: 1px solid #c5cad6;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  user-select: none;
}
.review-card .rv-switch-track {
  position: relative;
  width: 26px !important;
  height: 14px !important;
  border-radius: 999px;
  background: #c5cad6;
  flex-shrink: 0;
}
.review-card .rv-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.review-card .rv-switch-text {
  font-size: 0.65rem !important;
  font-weight: 700;
  min-width: 3.2em;
  line-height: 1.1;
}
.review-card .rv-switch.on {
  border-color: #8fcea0;
  background: #edf7ee;
}
.review-card .rv-switch.on .rv-switch-track { background: #2e9b4a; }
.review-card .rv-switch.on .rv-switch-knob { transform: translateX(12px); }
.review-card .rv-switch.on .rv-switch-text { color: #1b7a32; }
.review-card .rv-switch.off {
  border-color: #c5cad6;
  background: #f3f4f6;
}
.review-card .rv-switch.off .rv-switch-track { background: #9aa3b2; }
.review-card .rv-switch.off .rv-switch-text { color: #5c6578; }
.review-card .rv-switch:hover { border-color: #9aa6bc; }

/* Generic switch (lightbox) — slightly larger OK */
.rv-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 8px 3px 3px;
  border: 1px solid #c5cad6;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}
.rv-switch-track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #c5cad6;
  flex-shrink: 0;
}
.rv-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.rv-switch-text {
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 3.6em;
}
.rv-switch.on { border-color: #8fcea0; background: #edf7ee; }
.rv-switch.on .rv-switch-track { background: #2e9b4a; }
.rv-switch.on .rv-switch-knob { transform: translateX(12px); }
.rv-switch.on .rv-switch-text { color: #1b7a32; }
.rv-switch.off { border-color: #c5cad6; background: #f3f4f6; }
.rv-switch.off .rv-switch-track { background: #9aa3b2; }
.rv-switch.off .rv-switch-text { color: #5c6578; }

/* In-card bulk actions — ONLY on selected cards (rendered by JS); middle column */
.rv-card-bulk {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  margin: 0;
  width: 100%;
}
.rv-card-bulk-btn {
  margin: 0;
  padding: 4px 7px;
  border: 1px solid #d0d5de;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.rv-card-bulk-btn:hover {
  border-color: #9aa6bc;
  background: #f3f5f8;
}
.rv-card-bulk-btn.bulk-include {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.rv-card-bulk-btn.bulk-exclude {
  color: #4b5563;
  background: #f9fafb;
}
.rv-card-bulk-btn.bulk-download {
  color: #1e40af;
  border-color: #bfdbfe;
  background: #eff6ff;
}
.rv-card-bulk-btn.bulk-trash {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}
.rv-card-bulk-btn.bulk-clear {
  color: #6b7280;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.review-card.selected .rv-include-bar {
  background: #e8f1fc;
  border-bottom-color: #c5daf5;
}
.review-card.selected .rv-card-bulk {
  display: flex !important;
}

/* Selection checkbox stays a fixed anchor on the right */
.review-card .rv-select-check {
  flex-shrink: 0;
}

/* 2. Thumbnail (hold-to-reorder + double-click enlarge) */
.rv-thumb-wrap {
  position: relative;
  background: #e8ebf0;
  border-bottom: 1px solid #eef0f4;
  touch-action: none;
}
.rv-thumb-wrap.can-drag {
  cursor: grab;
}
.rv-thumb-wrap.drag-active,
body.rv-dragging .rv-thumb-wrap.can-drag {
  cursor: grabbing;
}
.rv-thumb {
  width: 100%;
  object-fit: cover;
  display: block;
  background: #e4e7ed;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.density-medium .rv-thumb { height: 148px; }
.density-large .rv-thumb { height: 188px; }
.density-xlarge .rv-thumb { height: 228px; }
.rv-thumb-wrap::after {
  content: "Click to enlarge · hold to reorder";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 10px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(transparent, rgba(15, 18, 28, 0.62));
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.rv-thumb-wrap:hover::after { opacity: 1; }
.rv-thumb-wrap:not(.can-drag) { cursor: zoom-in; }
body.rv-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}
body.rv-dragging * {
  cursor: grabbing !important;
}
/* Caption fields must remain selectable even during card reorder drag */
body.rv-dragging textarea,
body.rv-dragging input,
body.rv-dragging .rv-cap,
body.rv-dragging #lbCaption {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* Source cards stay as placeholders while ghost follows the cursor */
.review-card.drag-source {
  opacity: 0.35;
  filter: grayscale(0.2);
  transform: scale(0.98);
}
.review-card.dragging {
  /* primary source — same as drag-source when ghost is active */
  opacity: 0.35;
  filter: grayscale(0.2);
}
.review-card.drag-over {
  border-color: #0b5ed7 !important;
  box-shadow:
    0 0 0 3px rgba(11, 94, 215, 0.4),
    0 6px 16px rgba(11, 94, 215, 0.15) !important;
  transform: scale(1.02);
  background: #f0f7ff;
}

/* Floating drag ghost — lifts and follows cursor */
.rv-drag-ghost {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  width: 168px;
  filter: drop-shadow(0 12px 28px rgba(15, 18, 28, 0.35));
  transform: rotate(-2deg) scale(1.04);
  will-change: left, top;
  transition: none;
}
.rv-drag-ghost.multi {
  transform: rotate(-3deg) scale(1.05);
}
.rv-drag-ghost-layer {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #c5cad6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 0;
}
.rv-drag-ghost-face {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #0b5ed7;
  box-shadow: 0 4px 14px rgba(11, 94, 215, 0.25);
}
.rv-drag-ghost-face img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #e8ebf0;
}
.rv-drag-ghost-cap {
  padding: 6px 8px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a1d26;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
}
.rv-drag-ghost-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 5;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #0b5ed7;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(11, 94, 215, 0.45);
  border: 2px solid #fff;
}

/* 3. Filename (greyed, reference only) */
.rv-filename {
  padding: 8px 12px 0;
  color: #9aa3b2;
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  font-weight: 500;
}

/* 4. Cascading section dropdowns */
.rv-cascades {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 0;
}
.rv-cascades .rv-mid[style*="display: none"],
.rv-cascades select.rv-mid:disabled {
  display: none !important;
}
.rv-cascades select,
.review-card select {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 7px 9px;
  border: 1px solid #d5dae3;
  border-radius: 7px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rv-cascades select:hover {
  border-color: #b8c0ce;
}
.rv-cascades select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.12);
}

/* Prior physical section alternate (when user moves physical → 8.x via dropdowns) */
.alt-chip-prior {
  border-color: #c45c26 !important;
  background: #fff7f2 !important;
  color: #7a3410 !important;
}

/* 5. Caption — full intentional text box (all density modes inherit) */
/* Must override .review-card { user-select: none } so drag-select / Ctrl+C work */
.review-card .rv-cap,
.review-card textarea.rv-cap {
  display: block;
  box-sizing: border-box;
  /* calc + margin: never wider than card (fixes 100% + margin overbleed) */
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  align-self: center;
  margin: 10px 12px 14px;
  padding: 10px 12px;
  min-height: 64px;
  font-size: 0.82rem;
  line-height: 1.45;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  resize: vertical;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
/* Explicit density inheritance (medium / large / xlarge — no small option in UI) */
.review-grid.density-medium .review-card .rv-cap,
.review-grid.density-large .review-card .rv-cap,
.review-grid.density-xlarge .review-card .rv-cap {
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  margin: 10px 12px 14px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.review-card .rv-cap:hover {
  border-color: #b8c0ce;
}
.review-card .rv-cap:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.12);
}

/* Duplicate caption warning (Included only; does not block Save) */
.review-card.caption-dup {
  border-color: #e6b800;
  box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.28);
  background: #fffdf5;
}
.review-card.caption-dup .rv-cap,
.review-card .rv-cap.caption-dup {
  border-color: #e6b800 !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.22);
}
.rv-dup-badge {
  margin: 0 12px 8px;
  padding: 2px 8px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8a6d00;
  background: #fff3bf;
  border: 1px solid #e6c200;
  border-radius: 999px;
}
.rv-dup-badge[hidden] {
  display: none !important;
}

/* Lightbox caption — same dup warning + native spellcheck as grid .rv-cap */
#lbCaption.caption-dup,
.lightbox-edit #lbCaption.caption-dup {
  border-color: #e6b800 !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.22);
}
.lightbox-edit .lb-dup-badge,
#lbDupBadge {
  margin: 4px 0 8px;
  display: inline-block;
}

/* 6. Alternate chips */
.rv-alts {
  padding: 8px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 0;
}
.rv-alts:empty {
  display: none;
  padding: 0;
}
.rv-alts-label {
  width: 100%;
  margin-bottom: 1px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #8b93a3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.alt-chip {
  border: 1px solid #c5d4ea;
  background: #f3f7fc;
  color: #1a4f96;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.alt-chip:hover {
  background: #e3eef9;
  border-color: #7aa2d4;
  color: var(--accent);
}
.alt-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.alt-chip:active {
  background: #d6e6f6;
}

.rv-flag-row {
  margin: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.rv-flag-note {
  margin: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff6ed;
  color: #b45309;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid #f0d4b0;
}
.rv-flag-note.flag-red {
  background: #fdecea;
  color: #b71c1c;
  border-color: #f5c6c6;
}
.rv-flag-note.flag-orange {
  background: #fff6ed;
  color: #b45309;
  border-color: #f0d4b0;
}
.rv-flag-note.flag-magenta {
  background: #fce4ec;
  color: #ad1457;
  border-color: #f5c6d8;
}
.rv-flag-note.flag-cyan {
  background: #e0f7fa;
  color: #006064;
  border-color: #b2ebf2;
}
.rv-flag-note.flag-yellow {
  background: #fff8e1;
  color: #f57f17;
  border-color: #ffe082;
}
/* Clear / Confirm OK — only on flagged cards */
.rv-flag-clear-btn {
  align-self: flex-start;
  border: 1px solid #c4a574;
  background: #fffaf3;
  color: #8a5a12;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rv-flag-clear-btn:hover:not(:disabled) {
  background: #f5ead6;
  border-color: #a67c3d;
  color: #6b450d;
}
.rv-flag-clear-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Confirmed / cleared-waiting — same orange accent family as flag border (#e07020) */
.rv-flag-clear-btn.confirmed,
.rv-flag-clear-btn:disabled {
  cursor: default;
  opacity: 1;
  border-color: #e07020;
  background: #fff6ed;
  color: #b45309;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(224, 112, 32, 0.12);
}
.rv-flag-clear-btn.confirmed:hover,
.rv-flag-clear-btn:disabled:hover {
  background: #fff6ed;
  border-color: #e07020;
  color: #b45309;
}
/* Note chip when flags cleared / confirmed OK (no raw flag list) */
.rv-flag-note.flag-confirmed,
.rv-flag-note.flag-orange {
  background: #fff6ed;
  color: #b45309;
  border-color: #e07020;
}

/* Status inside review workspace */
#jobReviewStatus,
#dojoReviewStatus {
  margin-top: 10px;
  margin-bottom: 4px;
}
/* Hard gate: Save / Download blocked while any user-facing flags remain */
.flag-export-gate {
  margin: 6px 0 8px !important;
  color: var(--warn);
  font-weight: 600;
}
.flag-export-gate[hidden] {
  display: none !important;
}
#jobSaveBtn:disabled,
#dojoSaveBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rv-card-bulk-btn.bulk-download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Job complete success */
.job-complete {
  text-align: center;
  padding: 28px 16px 20px;
}
.job-complete-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e8f5e9;
  color: var(--ok);
  font-size: 2rem;
  font-weight: 700;
  line-height: 64px;
}
.job-complete h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--ok);
}
.job-complete-lead {
  font-size: 1rem;
  margin: 0 0 18px;
  color: var(--text);
}
.job-complete-hint { max-width: 420px; margin: 16px auto 8px; }
a.download-big,
button.download-big {
  display: inline-block;
  margin: 8px auto;
  background: var(--accent);
  color: #fff !important;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none !important;
  cursor: pointer;
}
a.download-big:hover { filter: brightness(1.05); }

/* Lightbox — enlarge + full edit */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 18, 28, 0.88);
  align-items: center;
  justify-content: center;
  padding: 24px 56px;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
/* Positions close on the working window corner (moves with centered panel) */
.lightbox-shell {
  position: relative;
  max-width: min(96vw, 1200px);
  width: 100%;
  max-height: 92vh;
  /* Let close sit slightly outside the panel edge without clipping */
  overflow: visible;
}
.lightbox-panel {
  position: relative;
  max-width: 100%;
  max-height: 92vh;
  width: 100%;
  background: #1b2030;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  cursor: default;
  overflow: auto;
}
.lightbox-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  min-height: 360px;
}
@media (max-width: 860px) {
  .lightbox-layout { grid-template-columns: 1fr; }
  .lightbox { padding: 12px; }
}
.lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1018;
  min-height: 280px;
  padding: 16px;
}
.lightbox-media img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  background: #111;
  box-sizing: border-box;
  /* Flag ring sits on the photo edges only (classes set on <img> in JS) */
  border: 5px solid transparent;
}
.lightbox-media img.flagged {
  border-style: solid;
  border-width: 5px;
  border-color: #e07020; /* default orange (needs_user_input) */
}
.lightbox-media img.flagged.flag-red { border-color: #c62828; }
.lightbox-media img.flagged.flag-orange { border-color: #e07020; }
.lightbox-media img.flagged.flag-magenta { border-color: #c2185b; }
.lightbox-media img.flagged.flag-cyan { border-color: #00838f; }
.lightbox-media img.flagged.flag-yellow { border-color: #f9a825; }
.lightbox-edit {
  padding: 20px 18px 22px;
  color: #e8eaef;
  overflow: auto;
  max-height: 88vh;
}
.lightbox-edit .field {
  color: #a8b0c0;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lightbox-edit select,
.lightbox-edit textarea {
  width: 100%;
  max-width: none;
  background: #fff;
  color: #111;
  border: 1px solid #c5cad6;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
.lightbox-edit select:focus,
.lightbox-edit textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.18);
}
.lightbox-edit textarea,
#lbCaption {
  min-height: 96px;
  resize: vertical;
  line-height: 1.4;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: text;
}
.lightbox-edit .rv-alts { padding: 10px 0 0; gap: 6px; }
.lightbox-edit .rv-alts-label { color: #8b93a3; }
.lightbox-edit .alt-chip {
  background: #2a3348;
  border-color: #4a5a78;
  color: #cfe0ff;
  border-radius: 8px;
  padding: 5px 10px;
}
.lightbox-edit .alt-chip:hover {
  background: #343f58;
  border-color: #6a7fa8;
}
.lb-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.lb-include-bar {
  border: 1px solid #d5dae3;
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px 10px;
  justify-content: flex-start;
}
.lb-include-bar .rv-switch {
  flex: 0 1 auto;
}
.lb-row .muted {
  color: #9aa3b2;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.lb-hint { margin-top: 14px; font-size: 0.78rem; color: #8b93a3; line-height: 1.4; }
/*
 * Modal dismiss — 45° outside panel top-right.
 * Invisible square hit box: bottom-left sits at panel top-right
 * (left: 100%; top: 0; translate so control sits up+right of the corner).
 * Not inside panel content, not viewport-fixed to browser chrome.
 */
.lightbox-close {
  position: absolute;
  left: 100%;
  top: 0;
  right: auto;
  bottom: auto;
  /* 4px diagonal gap outside the corner (still ~45°) */
  transform: translate(4px, calc(-100% - 4px));
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover {
  background: #f0f0f0;
  border-color: #fff;
}
.lightbox-close:focus-visible {
  outline: 2px solid #7eb6ff;
  outline-offset: 3px;
}
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10060;
  width: 48px;
  height: 64px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.lightbox-nav:hover { background: #fff; }
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }
@media (max-width: 860px) {
  /* Same diagonal geometry; slightly less gap so control stays on-screen */
  .lightbox-close {
    left: 100%;
    top: 0;
    transform: translate(2px, calc(-100% - 2px));
  }
}

.actions { margin-top: 12px; }
.muted { color: var(--muted); font-size: 0.85rem; }
.dropzone .dz-feedback.warn { color: var(--warn); }
.dropzone .dz-feedback.err { color: var(--err); }

table.dojo, table.history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.dojo th, table.dojo td,
table.history th, table.history td {
  border-bottom: 1px solid var(--border);
  padding: 8px 6px;
  text-align: left;
}
table.dojo th, table.history th {
  color: var(--muted);
  font-weight: 600;
  cursor: default;
}
table.history tr.clickable {
  cursor: pointer;
}
table.history tr.clickable:hover {
  background: #eef5fc;
}
table.history tr.archived {
  color: #9aa3b2;
  background: #f3f4f6;
  cursor: not-allowed;
}
table.history tr.archived td {
  opacity: 0.75;
}
.history-month {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.history-month summary {
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  background: #f0f3f8;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-month summary::-webkit-details-marker { display: none; }
.history-month summary::before {
  content: "▸ ";
  color: var(--muted);
}
.history-month[open] summary::before {
  content: "▾ ";
}
.history-month .month-count {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.85rem;
}
.badge-archived {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e5e7eb;
  color: #6b7280;
  margin-left: 6px;
}

/* ---- Research R1 checklist (God-only, job-repo keep-files) ---- */
.research-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}
.research-line {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafbfc;
}
.research-line-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.research-line-label {
  font-weight: 600;
  font-size: 0.92rem;
}
.research-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.research-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f6;
  color: var(--muted);
}
.research-chip.attached {
  background: #e8f5e9;
  color: var(--ok);
}
.research-chip.confirmed {
  background: #e3f2fd;
  color: var(--accent);
}
.research-chip.rerouted {
  background: #fff3e0;
  color: #b45309;
}
.research-chip.wrong_file {
  background: #fdecea;
  color: var(--err);
}
.research-line-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.research-files {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
}
.research-files li {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.research-files a {
  color: var(--accent);
}
/* Desktop GOLD (locked): filename + Attached + Confirm / Reroute / Wrong file
   on one row; Attach / Confirm OK stay on the next row. Do not pull line
   actions onto the file row at any desktop width. */
.research-file-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.research-file-actions button {
  margin-top: 0;
  margin-right: 0;
  padding: 4px 8px;
  font-size: 0.78rem;
}
.research-line-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}
.research-line-actions button.secondary,
.research-line-actions button.primary {
  margin-top: 0;
  margin-right: 0;
  padding: 6px 12px;
  font-size: 0.85rem;
}
/* Phone: Confirm / Reroute / Wrong file are the MAIN primary row.
   Attach / Confirm OK must not sit above those three. */
@media (max-width: 720px) {
  .research-files li {
    flex-wrap: wrap;
  }
  .research-file-actions {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .research-file-actions button,
  .research-file-actions button.secondary,
  .research-file-actions button.primary {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.9rem;
    background: var(--accent);
    color: #fff;
    border: none;
    font-weight: 600;
  }
}
/* Desktop GOLD lock: keep the three on the file row; leave Attach /
   Confirm OK on the row below (column controls — no row merge). */
@media (min-width: 721px) {
  .research-line-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .research-files li {
    flex-wrap: nowrap;
  }
  .research-file-actions {
    flex: 0 0 auto;
  }
}
.research-export-row {
  margin-top: 4px;
}
.research-export-row a.download-big {
  margin-left: 0;
}

/* ==========================================================================
 * UX sins layout (MERGE 32 / 5051728 / tip 900802f — local/MVP, not Alpha).
 * Gravity / order / collapse only. Same tokens. No German-car paint.
 * Law: docs/MASTER.md + docs/TRACK_A_UX_SINS.md + docs/ux-sins-layout/README.md
 * ========================================================================== */

/* Sin 1 — two columns; Additional Addresses / Property Types collapsed under address */
.setup-required-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 28px;
  align-items: start;
}
.setup-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.setup-required-grid input[type="text"],
.setup-required-grid select {
  max-width: none;
  width: 100%;
}
.setup-col > .col > .field:first-child {
  margin-top: 0;
}
.setup-required-grid .address-row {
  width: 100%;
  margin-bottom: 0;
  gap: 10px 12px;
}
.setup-required-grid .address-row .col {
  flex: 1 1 0;
  min-width: 0;
}
.setup-required-grid .address-row .col-state {
  flex: 0 1 90px;
  max-width: 110px;
}
.setup-required-grid .address-row .col-zip {
  flex: 0 1 120px;
  max-width: 140px;
}
@media (max-width: 720px) {
  .setup-required-grid {
    grid-template-columns: 1fr;
  }
}
#panelJob #projectSetup > .setup-hint {
  margin-bottom: 8px !important;
}
#panelJob #projectSetup {
  margin-bottom: 10px;
  padding: 10px 12px 12px;
}

/* Same accordion row as .history-month: hide native marker; label left, chevron right */
.addl-addresses {
  margin: 14px 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.addl-addresses > summary {
  box-sizing: border-box;
  height: 36px; /* Street input: 8+8 pad + ~20px type + 1px borders */
  padding: 0 10px;
  font-size: 0.9rem;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
  background: #f0f3f8;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}
.addl-addresses > summary::-webkit-details-marker { display: none; }
.addl-addresses > summary::marker { content: none; }
.addl-addresses > summary::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background-color: var(--text);
  /* 20×20 stroke chevron — same visual weight as the 700 label, not a tiny glyph */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 7.2 L10 12.8 L15 7.2'/></svg>") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 7.2 L10 12.8 L15 7.2'/></svg>") center / 20px 20px no-repeat;
  transform: rotate(-90deg);
}
.addl-addresses[open] > summary::after {
  transform: rotate(0deg);
}
.addl-addresses[open] > summary {
  border-bottom: 1px solid var(--border);
}
.addl-addresses[open] {
  padding-bottom: 10px;
}
.addl-addresses > #additionalAddressesContainer,
.addl-addresses > #addAddressBtn,
.addl-addresses > .field,
.addl-addresses > .checkbox-grid {
  margin-left: 12px;
  margin-right: 12px;
}
.addl-addresses input[type="text"] {
  max-width: none;
  width: 100%;
}
.addl-addresses #addAddressBtn {
  margin: 0 0 12px;
}
.addl-addresses .address-block {
  margin-bottom: 8px;
  padding: 10px 10px 8px;
}
.addl-addresses .checkbox-grid {
  margin-bottom: 4px;
}

/* Vision lives on the MVP photo-drop / Start strip only. Alpha never renders it. */
html[data-quantis-build="alpha"] .mvp-only,
html[data-quantis-build="alpha"] #mvpVisionStrip {
  display: none !important;
}
.photo-primary-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.mvp-vision-strip {
  display: flex;
  align-items: center;
  gap: 8px 10px;
}
.mvp-vision-strip .field {
  margin: 0;
  white-space: nowrap;
}
.mvp-vision-strip select {
  margin: 0;
  width: auto;
  min-width: 160px;
  max-width: 240px;
}

#panelJob #uploadGateHint,
#panelJob .photo-upload-block {
  margin-top: 8px;
}

/* WR toolbar — one horizontal action row; Density + Included sort on the right. */
#jobReviewToolbar.review-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}
#jobReviewToolbar .toolbar-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: min-content;
  align-items: center;
  gap: 8px;
}
#jobReviewToolbar .toolbar-actions button {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none;
  white-space: nowrap;
}
#jobReviewToolbar .toolbar-view {
  flex: 0 0 auto;
  margin-left: auto;
  flex-wrap: nowrap;
  align-items: center;
}
#jobReviewToolbar .view-control {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#jobReviewToolbar .view-control select {
  min-width: 0;
  max-width: 200px;
  width: auto;
}

/* REVIEW — gold identity bar (sticky). Start New Project on the right, forest green. */
.wr-identity-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 10px 24px;
  background: #c9a227;
  color: #1a1d26;
  border: none;
  border-bottom: 1px solid #a6861c;
}
.wr-identity-bar[hidden] {
  display: none !important;
}
.wr-identity-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.4;
  color: #1a1d26;
}
.wr-identity-bar .wr-identity-snp,
.wr-identity-bar button.success.wr-identity-snp {
  margin: 0;
  flex: 0 0 auto;
  background: #2e7d32;
  color: #fff;
  border: 1px solid #256628;
  padding: 8px 14px;
  white-space: nowrap;
}
.wr-identity-bar .wr-identity-snp:hover,
.wr-identity-bar button.success.wr-identity-snp:hover {
  background: #256628;
  color: #fff;
}

/* Sin 2 + 3 — park unused cards; Start another is never on WR chrome */
#panelJob[data-surface="review"] #jobSetupCard,
#panelJob[data-surface="review"] #jobHistoryCard,
#panelJob[data-surface="review"] #jobCompletePanel,
#panelJob[data-surface="review"] #jobResearchCard {
  display: none !important;
}

#panelJob[data-surface="complete"] #jobSetupCard,
#panelJob[data-surface="complete"] #jobReviewWorkspace,
#panelJob[data-surface="complete"] #jobResearchCard {
  display: none !important;
}

/* Locked-setup leftover copy does not apply while setup is parked */
#panelJob[data-surface="review"] .project-setup.setup-locked::after,
#panelJob[data-surface="complete"] .project-setup.setup-locked::after {
  content: none;
}

/* Sin 3 — After Save is a thin ZIP / Done bar, not a full card under unused setup */
#panelJob[data-surface="complete"] .job-complete {
  text-align: left;
  padding: 12px 4px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
#panelJob[data-surface="complete"] .job-complete-icon,
#panelJob[data-surface="complete"] .job-complete h2 {
  display: none;
}
#panelJob[data-surface="complete"] .job-complete-lead {
  margin: 0;
  flex: 1 1 180px;
  font-size: 0.95rem;
}
#panelJob[data-surface="complete"] .job-complete .download-big,
#panelJob[data-surface="complete"] .job-complete a.download-big {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.95rem;
}
#panelJob[data-surface="complete"] .job-complete .actions {
  margin: 0;
}
#panelJob[data-surface="complete"] .job-complete-hint {
  flex: 1 1 100%;
  max-width: none;
  margin: 0;
  font-size: 0.8rem;
}

#jobHistoryCard .setup-after-row {
  margin-top: 14px;
  padding-top: 10px;
}
/* display:flex on .setup-after-row would otherwise override [hidden] */
#jobStartAnotherBar[hidden] {
  display: none !important;
}