/* FlameGuard's shared wizard components, copied verbatim. Do not hand-edit: re-run scripts/sync-flameguard.js. */

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/SectionEditor.css (source sha256 b19f17c92a01) ---- */
/* ============================================================
   Section Editor — Cleaned up styles
   Removed: evidence-section wrapper, original-notes (old yellow),
   editor-tips, old compliance-section/buttons/btn mobile styles.
   Added: field-notes-section, compliance-inline chips.
   ============================================================ */

/* ===== SECTION EDITOR ===== */
.section-editor {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Section Header - Compact inline layout */
.editor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.section-code-badge {
  background: var(--color-border-light);
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.editor-section-header h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.section-name-editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.section-name-editable::after {
  content: '\270E';
  font-size: 14px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  font-weight: normal;
}

.section-name-editable:hover {
  background: var(--color-border-light);
}

.section-name-editable:hover::after {
  opacity: 0.5;
}

.section-name-input {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-surface);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

/* Complete Toggle - Hidden by default (auto-completion) */
.complete-toggle,
.section-actions {
  display: none;
}

/* Compliance Chips - Inline in header */
.compliance-inline {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.compliance-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: transparent;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  white-space: nowrap;
}

.compliance-chip:hover:not(.active) {
  background: var(--color-border-light);
}

.compliance-chip.compliant.active {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

.compliance-chip.non-compliant.active {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

.compliance-chip.na.active {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
  color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

/* Field Notes (clean, read-only) */
.field-notes-section {
  background: var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  margin-top: var(--space-4);
}

.field-notes-header {
  margin-bottom: var(--space-3);
}

.field-notes-header label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.field-notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-note-item {
  background: var(--color-surface);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.field-note-text {
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  line-height: 1.5;
  font-style: italic;
}

/* Timescale Section */
.timescale-section {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: #fff8e1;
  border-radius: var(--radius-lg);
  border: 1px solid #ffe082;
}

.timescale-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  font-family: inherit;
  background: var(--color-surface);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.timescale-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
}

/* Remedial Rewrite Buttons Container */
.remedial-rewrite-buttons {
  display: flex;
  gap: var(--space-2);
}

/* Professional Rewrite Button */
.professional-rewrite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.professional-rewrite-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-surface);
}

.professional-rewrite-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Rewrite Spinner (inside button) */
.rewrite-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: rewrite-spin 0.7s linear infinite;
}

@keyframes rewrite-spin {
  to { transform: rotate(360deg); }
}

/* AI Suggestion Popup */
.ai-suggestion {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-border-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ai-text {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.ai-actions {
  display: flex;
  gap: var(--space-3);
}

.ai-accept-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.ai-accept-btn:hover {
  opacity: 0.9;
}

.ai-dismiss-btn {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.ai-dismiss-btn:hover {
  color: var(--color-text-primary);
}

/* Editor Field */
.editor-field {
  margin-bottom: var(--space-6);
}

.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.field-header label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.field-hint {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  margin-left: var(--space-1);
}

.editor-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-small);
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.editor-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
}

.editor-field textarea::placeholder {
  color: var(--color-text-muted);
}


/* Mobile Responsive */
@media (max-width: 600px) {
  .section-editor {
    max-width: 100%;
    padding: var(--space-4);
  }

  .editor-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .section-title-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    width: 100%;
  }

  .section-code-badge {
    padding: var(--space-1) var(--space-2);
    font-size: 11px;
  }

  .editor-section-header h2 {
    font-size: var(--font-size-body);
    margin: 0;
  }

  /* Compliance chips wrap below title on mobile */
  .compliance-inline {
    margin-left: 0;
    gap: var(--space-2);
  }

  .compliance-chip {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-caption);
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .timescale-section {
    padding: var(--space-3);
  }

  .timescale-select {
    min-height: 48px;
    font-size: 16px;
    padding: var(--space-3) var(--space-4);
  }

  .field-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .editor-field textarea {
    min-height: 120px;
    font-size: 16px;
    padding: var(--space-3);
  }

  .remedial-rewrite-buttons {
    flex-direction: column;
  }

  .professional-rewrite-btn {
    width: 100%;
    min-height: 44px;
  }

  .field-notes-section {
    padding: var(--space-3);
  }
}

/* ===== CONFIRMATION DIALOG (photo delete) ===== */
.cli-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.cli-dialog {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.cli-dialog-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

.cli-dialog-body {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin: 0 0 var(--space-5) 0;
}

.cli-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border-light);
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/ChecklistEditor.css (source sha256 bbf0d13b206c) ---- */
/* ============================================================
   Checklist Editor — Design Token Reskin
   Visual-only update: hardcoded colors, spacing, typography,
   border-radius, and transitions replaced with design tokens.
   No class names, selectors, or structure changed.
   ============================================================ */

.checklist-editor {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-4);
}

/* Header */
.checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: #f0f7ff;
  cursor: pointer;
  user-select: none;
  gap: var(--space-4);
}

.checklist-header:hover {
  background: #e0efff;
}

.checklist-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.checklist-icon {
  font-size: 10px;
  color: var(--color-primary);
}

.checklist-count {
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--font-size-caption);
  padding: 2px var(--space-2);
  border-radius: 9999px;
  font-weight: var(--font-weight-semibold);
}


/* Questions List */
.checklist-questions {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checklist-question {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.question-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.question-number {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  min-width: 1.25rem;
}

.question-text {
  flex: 1;
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.ai-badge {
  background: linear-gradient(135deg, #3b82f6, #8B5CF6);
  color: var(--color-surface);
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Answer Row */
.answer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.answer-buttons-inline {
  display: flex;
  gap: var(--space-2);
}

.answer-btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 44px;
  min-height: 44px;
}

.answer-btn-small:hover:not(:disabled) {
  border-color: var(--btn-color, #6b7280);
  background: color-mix(in srgb, var(--btn-color, #6b7280) 5%, white);
}

.answer-btn-small.selected {
  font-weight: var(--font-weight-semibold);
}

.answer-btn-small:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.note-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.note-btn:hover:not(:disabled) {
  background: var(--color-border-light);
}

.note-btn.has-note {
  background: #FEF3C7;
  border-color: #FCD34D;
}

.note-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Note Editor */
.note-editor {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.note-editor textarea {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  resize: vertical;
  font-family: inherit;
}

.note-editor textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.15);
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: 6px;
}

.btn-cancel,
.btn-save {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-cancel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.btn-cancel:hover {
  background: var(--color-border-light);
}

.btn-save {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-surface);
}

.btn-save:hover {
  background: var(--color-primary-light);
}

/* Question Note Display */
.question-note {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: #FEF9E7;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  color: #92400E;
  font-style: italic;
}

/* Mobile */
@media (max-width: 640px) {
  .checklist-header {
    padding: 10px var(--space-3);
  }

  .checklist-questions {
    padding: 6px;
  }

  .checklist-question {
    padding: 10px;
  }

  .answer-buttons-inline {
    flex-wrap: wrap;
  }

  .answer-btn-small {
    min-width: 32px;
    padding: var(--space-1) 6px;
    font-size: 10px;
  }

  .question-text {
    font-size: var(--font-size-caption);
  }
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/modalShell.css (source sha256 95a8d07c8407) ---- */
/* The photo/checklist popup SHELL — overlay, card, header, close.
   Lives in its own file because every component that MOUNTS this modal must
   carry the chrome into its own route chunk: Vite splits CSS per lazy route,
   and when these rules lived only in SectionRow.css the Preview page (which
   never imports SectionRow) rendered the picker as an UNSTYLED inline div at
   the foot of the document — DOM-present, invisible, "the button is dead"
   (Chad, 27-08; it only worked after visiting R&A first in the same session,
   whose CSS injection lingered). Import this from EVERY component that renders
   the .sr-photo-modal shell. */

/* Doubled class so this wins over .cli-overlay regardless of stylesheet load
   order. Same z as the dialog family; the gallery's lightbox is a descendant,
   so it stacks above the popup's content within this context. */
.cli-overlay.sr-photo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 24px;
}
.sr-photo-modal {
  width: min(960px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.sr-photo-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
}
.sr-photo-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-photo-modal-count { font-size: 12px; color: #64748b; flex: 1; }
.sr-photo-modal-close {
  flex: none;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #1e3a5f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.sr-photo-modal-close:hover { background: #16324f; }
.sr-photo-modal-body { padding: 14px 16px; overflow-y: auto; }

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/SectionRow.css (source sha256 38cf357b6004) ---- */
/* SectionRow — one wide editable grid row per report section.
   Column template comes from --rap-cols set on .report-actions-page so the
   sticky header in ReportActionsPage.css always lines up with the rows. */

.sr-row-wrap {
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: visible;
  transition: box-shadow 0.15s ease;
}

.sr-row-wrap:hover {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.sr-not-assessed {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 3px 4px;
  margin-bottom: 4px;
}

.sr-grid {
  display: grid;
  grid-template-columns: var(--rap-cols, 172px minmax(140px, 1fr) 84px minmax(220px, 1.5fr) 92px minmax(280px, 2.2fr));
  gap: 0;
  align-items: start;
}

.sr-cell {
  padding: 14px 10px;
  min-width: 0;
}

/* ── 1. Section identity ── */
.sr-cell-id {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 14px;
}

.sr-code {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  background: rgba(30, 58, 95, 0.08); /* NOT --color-primary-light — that token is a dark navy */
  border-radius: 4px;
  padding: 2px 7px;
}

.sr-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  cursor: pointer;
  line-height: 1.3;
  word-break: break-word;
}

.sr-name:hover {
  color: var(--color-primary, #1E3A5F);
  text-decoration: underline dotted;
}

.sr-name-input {
  width: 100%;
  font-size: 13px;
}

/* Draft custom row — in-row section picker / naming */
.sr-draft-select {
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 8px;
  border: 1.5px solid var(--color-primary, #1E3A5F);
  border-radius: 8px;
  background: #fff;
  color: var(--color-text, #1e293b);
  cursor: pointer;
}

.sr-create-section-btn {
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #1E3A5F);
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}

.sr-create-section-btn:hover {
  filter: brightness(1.12);
}

/* Code badge + delete button on one line */
.sr-id-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sr-delete-section-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
}

.sr-delete-section-btn:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* ── 2. Field notes ── */
.sr-notes-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.sr-note-item {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-secondary, #475569);
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: 6px;
  padding: 6px 8px;
}

/* Editable field notes (capture mode) */
.sr-note-editable { padding: 0; background: transparent; }
.sr-note-view {
  padding: 8px 9px;
  background: var(--color-bg-subtle, #f8fafc);
  border: 1px solid #e8edf3;
  border-radius: 8px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
/* Clear hover so it's obvious the note is interactive (edit / move / delete) */
.sr-note-view:hover {
  border-color: #1E3A5F;
  background: #fff;
  box-shadow: 0 1px 6px rgba(30, 58, 95, 0.12);
}
.sr-note-text {
  display: block;
  cursor: text;
  font-size: 13px;
  line-height: 1.4;
  color: #1e293b;
}
.sr-note-text:hover { color: #0f172a; }

/* Always-visible action row under each note */
.sr-note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}
.sr-note-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 8px;
  min-height: 44px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-note-act:hover { color: #1E3A5F; border-color: #1E3A5F; background: #eef2f8; }
.sr-note-act.active { color: #1E3A5F; border-color: #1E3A5F; background: #e0e9f6; }
.sr-note-act-del { margin-left: auto; padding: 3px 7px; }
.sr-note-act-del:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.sr-note-edit textarea {
  width: 100%;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.45;
  padding: 6px 8px;
  border: 1px solid var(--color-primary, #1E3A5F);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.sr-note-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.sr-note-edit-actions .btn-save,
.sr-note-edit-actions .btn-cancel {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.sr-note-edit-actions .btn-save { background: #1E3A5F; color: #fff; border: none; }
.sr-note-edit-actions .btn-cancel { background: #fff; border: 1px solid #cbd5e1; }

/* Re-assign a note's section (confirm/change the AI sort) */
.sr-note-move {
  margin-top: 6px;
  padding: 9px 10px;
  background: #eef2f8;
  border: 1px solid #c7d7ef;
  border-radius: 8px;
}
.sr-note-move-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #1E3A5F;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.sr-note-move-row { display: flex; align-items: center; gap: 6px; }
.sr-note-move-select {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border: 1px solid #1E3A5F;
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
}
.sr-note-move-cancel {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
}
.sr-note-move-cancel:hover { background: #f1f5f9; }

.sr-empty {
  display: block;
  text-align: center;
  color: var(--color-border, #cbd5e1);
  font-size: 13px;
  padding-top: 8px;
}

/* ── 3/5. Compact chips (photos, checklist) — centered in their columns ── */
.sr-cell-photos,
.sr-cell-checklist {
  display: flex;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary, #64748b);
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.sr-chip:hover {
  border-color: var(--color-primary, #1E3A5F);
  color: var(--color-primary, #1E3A5F);
}

.sr-chip.has-content {
  color: var(--color-primary, #1E3A5F);
  background: rgba(30, 58, 95, 0.08);
  border-color: transparent;
}

.sr-chip.complete {
  color: #15803d;
  background: #f0fdf4;
}

.sr-chip.open,
.sr-chip.open:hover {
  background: var(--color-primary, #1E3A5F);
  border-color: var(--color-primary, #1E3A5F);
  color: #fff;
}

.sr-chip svg {
  flex-shrink: 0;
}

.sr-chip-count {
  font-variant-numeric: tabular-nums;
}

.sr-chip-second {
  margin-left: 2px;
}

.sr-chip-chev {
  opacity: 0.55;
  margin-left: -1px;
}

/* Upload progress, shown next to the photos it belongs to */
.sr-photo-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #1E3A5F);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sr-photo-spinner {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(30, 58, 95, 0.18);
  border-top-color: var(--color-primary, #1E3A5F);
  border-radius: 50%;
  animation: sr-photo-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes sr-photo-spin {
  to { transform: rotate(360deg); }
}

/* ── 4/6. Textareas + AI buttons ── */
.sr-textarea {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  /* Auto-grows with content (JS); high cap so normal assessments never scroll.
     overflow-y is hidden by default and only flipped to auto by autoResize() if
     content exceeds the cap — prevents a 1px-rounding scrollbar. */
  resize: none;
  min-height: 96px;
  max-height: 800px;
  overflow-y: hidden;
  font-family: inherit;
  color: var(--color-text, #1e293b);
  background: #fff;
}

.sr-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #1E3A5F);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.12);
}

.sr-textarea::placeholder {
  color: var(--color-text-muted, #94a3b8);
  font-size: 12px;
}

.sr-rewrite-btn {
  margin-top: 7px;
  font-size: 11px;
  padding: 5px 10px;
}

.sr-remedial-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sr-remedial-buttons .sr-rewrite-btn {
  margin-top: 7px;
}

/* ── 7. Priority — solid colour pill matching the P1-P4 palette ── */
.sr-cell-priority {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  padding-right: 6px;
}

.sr-priority-select {
  width: 100%;
  max-width: 120px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 7px 22px 7px 8px;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 5px;
  background-color: #fff;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.sr-priority-select.set {
  color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sr-priority-select option {
  color: var(--color-text, #1e293b);
  background: #fff;
  font-weight: 600;
}

.sr-priority-time {
  font-size: 11px;
  color: var(--color-text-muted, #94a3b8);
  text-align: center;
}

/* ── Priority column summary (read-only; per-action priority lives in each action) ── */
.sr-priority-summary {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  padding: 5px 8px;
  border: 1.5px solid transparent;
  border-radius: 5px;
}

/* ── Multiple actions per section (Remedial Action cell) ── */
.sr-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.sr-action-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--color-border-light, #f1f5f9);
  border-radius: 8px;
  background: var(--color-bg-subtle, #f8fafc);
}
.sr-action-text {
  width: 100%;
}
.sr-action-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sr-action-priority {
  flex: 1;
  max-width: 150px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 22px 6px 8px;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 5px;
  background-color: #fff;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sr-action-priority.set {
  color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sr-action-priority option { color: var(--color-text, #1e293b); background: #fff; font-weight: 600; }
.sr-action-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted, #94a3b8);
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-action-remove:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
.sr-action-rewrite,
.sr-action-photos {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 30px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-action-rewrite:hover:not(:disabled) { background: var(--color-bg-subtle, #f8fafc); border-color: var(--color-primary, #1E3A5F); }
.sr-action-rewrite:disabled { opacity: 0.5; cursor: not-allowed; }

/* Speak an action (14-10): the small recorder's "Speak it" at the row's 30px
   height; while recording, its strip takes a line of its own. */
.sr-action-dictate { display: inline-flex; flex-shrink: 0; }
.sr-action-dictate.is-recording { flex: 1 1 100%; order: 10; }
.sr-action-meta .vr-row { margin-top: 0; gap: 8px; flex-wrap: nowrap; }
.sr-action-meta .vr-pill { min-height: 30px; padding: 4px 10px; gap: 6px; font-size: 12px; }
.sr-action-meta .vr-pill svg { width: 15px; height: 15px; }
.sr-action-meta .vr-limit { font-size: 11.5px; }
.sr-action-meta .vr-strip { margin-top: 4px; }
.sr-action-transcribing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  white-space: nowrap;
}
.sr-add-action-btn {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  background: #fff;
  border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: 6px;
  padding: 6px 12px;
  min-height: 34px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-add-action-btn:hover { background: var(--color-bg-subtle, #f8fafc); border-color: var(--color-primary, #1E3A5F); }

/* Capture step: add a note straight to this section (opens Quick Note with the
   section preselected). Same dashed family as + Add action. */
.sr-add-note-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  background: #fff;
  border: 1px dashed var(--color-border, #cbd5e1);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-add-note-btn:hover { background: var(--color-bg-subtle, #f8fafc); border-color: var(--color-primary, #1E3A5F); }
/* The Quicktext popup trigger on the capture row: same family as "+ Add note",
   filled navy so it reads as the section's one "add saved wording" control. */
.sr-qt-btn {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, #1E3A5F);
  border: 1px solid var(--color-primary, #1E3A5F);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sr-qt-btn:hover { background: #16324f; }
.sr-add-note-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sr-qt-count {
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.22);
  text-align: center;
}
/* What the section holds, in one quiet line under the buttons. */
.sr-qt-held { margin-top: 6px; font-size: 11.5px; color: #64748b; line-height: 1.4; }

/* "Create action from observation" chooser: when a section holds several
   observations, the button opens this small menu to pick which one the action
   answers. The row is overflow visible, so the absolute menu is never clipped. */
.sr-genpick { position: relative; display: inline-block; }
.sr-genpick-chev { margin-left: 5px; vertical-align: -2px; }
.sr-genpick-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 330px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  padding: 6px;
  z-index: 40;
}
.sr-genpick-head {
  padding: 6px 8px 5px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.sr-genpick-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text, #1e293b);
  cursor: pointer;
}
.sr-genpick-item:hover { background: #f1f5f9; }
/* The blank-row entry sits after the observations, visibly its own thing */
.sr-genpick-item-new {
  border-top: 1px solid #E2E8F0;
  border-radius: 0 0 7px 7px;
  margin-top: 2px;
  font-weight: 600;
}
.sr-genpick-num {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary, #1E3A5F);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.sr-genpick-label { flex: 1; min-width: 0; }

/* ── Compliance (stacked under the section name) ── */
.sr-id-compliance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
  max-width: 132px;
}

.sr-comp-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: 11px;
  padding: 5px 4px;
  min-height: 44px;
}

/* Soft nudge when a Compliant section still carries a remedial action / checklist "No" */
.sr-compliance-nudge {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding: 7px 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #92400e;
}
.sr-compliance-nudge-text { font-weight: 600; }
.sr-compliance-nudge-btn {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fff;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 5px 10px;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.sr-compliance-nudge-btn:hover { background: #fef3c7; }

/* ── Expansions (photos / checklist) ── */
.sr-expansion {
  border-top: 1px solid var(--color-border-light, #f1f5f9);
  padding: 14px 16px;
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: 0 0 10px 10px;
}

.sr-checklist {
  background: #fff;
  border-radius: 8px;
  padding: 4px 12px;
}

/* Always-open checklist on the capture page */
.sr-expansion-capture {
  background: #fff;
}
.sr-cl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #1E3A5F;
}
.sr-cl-header-title { font-size: 13px; font-weight: 700; }
.sr-cl-header-count {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
}
.sr-cl-header-count.complete { color: #15803d; background: #dcfce7; }

/* ── Mobile / tablet: stack into cards ── */
@media (max-width: 1280px) {
  .sr-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 14-10: the desktop grid's `start` kept each card part at its own
       width (half the page on a tablet); stacked, they fill the card */
    align-items: stretch;
  }

  .sr-cell {
    border-top: 1px solid var(--color-border-light, #f1f5f9);
    padding: 10px 14px;
  }

  .sr-cell-id {
    border-top: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-subtle, #f8fafc);
    border-radius: 10px 10px 0 0;
  }

  .sr-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #94a3b8);
    margin-bottom: 6px;
  }

  .sr-cell-photos,
  .sr-cell-checklist {
    display: block;
  }

  .sr-cell-priority {
    display: block;
  }

  .sr-priority-select {
    max-width: 180px;
  }

  .sr-empty {
    text-align: left;
    padding-top: 0;
  }

  .sr-cell-id {
    flex-wrap: wrap;
  }

  .sr-id-compliance {
    flex-direction: row;
    width: auto;
    max-width: none;
    margin-top: 0;
    margin-left: auto;
  }

  .sr-comp-chip {
    width: auto;
    padding: 5px 10px;
  }
}

/* ── Capture mode: Trail of Records (justifications) ── */
.sr-justify-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.cl-justify-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.cl-obs-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 12px;
  color: #7f1d1d;
}
.cl-obs-prompt .btn-save,
.cl-obs-prompt .btn-cancel {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.cl-obs-prompt .btn-save { background: #1E3A5F; color: #fff; border: none; }
.cl-obs-prompt .btn-cancel { background: #fff; border: 1px solid #cbd5e1; }

.cl-reason-saved {
  margin-top: 6px;
  padding: 6px 10px;
  background: #f1f5f9;
  border-left: 3px solid #1E3A5F;
  border-radius: 4px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
}

.cl-add-reason-btn {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1E3A5F;
  background: transparent;
  border: 1px dashed #c7d7ef;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.cl-add-reason-btn:hover { background: #eef2f8; border-color: #1E3A5F; }

/* ── Yes-answer justification ──────────────────────────────────────────────
   Green accent, to read as an assurance rather than the navy ToR reason
   (which records an omission). Same footprint otherwise. */
.cl-just-saved {
  margin: 6px 0 4px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #3F4A56;
}

.cl-just-label {
  font-size: 12px;
  font-weight: 700;
  color: #1E3A5F;
}

.cl-just-actions {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}

.cl-just-link {
  font-size: 11px;
  font-weight: 600;
  color: #1E3A5F;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.cl-just-link:hover { color: #16304f; }
.cl-just-editor .cl-just-link-danger { margin-right: auto; }
.cl-just-link-danger { color: #b91c1c; }
.cl-just-link-danger:hover { color: #7f1d1d; }

.cl-just-hidden {
  margin: 6px 0 4px 14px;
  font-size: 11px;
  font-style: italic;
  color: #94a3b8;
}

/* Honest server-save failure line: the text is kept, the claim is precise. */
.cl-just-error {
  margin: 6px 0 4px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-just-error .cl-just-link { color: #92400e; }
.cl-just-error .cl-just-link:hover { color: #78350f; }

.cl-add-just-btn {
  margin: 6px 0 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #1E3A5F;
  background: transparent;
  border: 1px dashed #c7d7ef;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.cl-add-just-btn:hover { background: #eef2f8; border-color: #1E3A5F; }

.cl-just-editor .btn-reset-default {
  margin-right: auto;
  font-size: 11px;
  font-weight: 600;
  color: #1E3A5F;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.cl-just-editor .btn-reset-default:hover { color: #16304f; }

/* "No" answer auto field-note popup (Edit / Remove / Keep) */
.cl-nonote-dialog { max-width: 460px; }
.cl-nonote-text {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
  margin-bottom: 4px;
}
/* "Skip and Add field note wait..." while recording (14-10) */
.cl-nonote-wait { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted, #5E6B7E); }
/* Clean footer: Skip on the left, primary Add on the right */
.cl-nonote-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.cl-nonote-skip {
  margin-right: auto;
  background: none;
  border: 1px solid #e2e8f0;
  color: #64748b;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cl-nonote-skip:hover:not(:disabled) { background: #f8fafc; }
.cl-nonote-add {
  background: #1E3A5F;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cl-nonote-add:hover:not(:disabled) { background: #16314f; }
.cl-nonote-add:disabled, .cl-nonote-skip:disabled { opacity: 0.5; cursor: not-allowed; }

/* Continue gate jump: briefly highlight the first unanswered question */
.checklist-question {
  scroll-margin-top: 120px;
  border-radius: 8px;
}
.checklist-question.clq-flash {
  animation: clqFlash 2s ease;
}
@keyframes clqFlash {
  0%   { background: #fef9c3; box-shadow: 0 0 0 3px #fde047; }
  70%  { background: #fef9c3; box-shadow: 0 0 0 3px #fde047; }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}

/* ── "For information purposes only" ───────────────────────────────────────
   Generic standards text, not a finding. Muted and clearly labelled so it can
   never be mistaken for an observation about this building. */
.sr-guidance {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.sr-guidance-label {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

.sr-guidance-text {
  background: #fbfcfd;
  color: #4A5568;
}

.sr-guidance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.sr-guidance-remove {
  font-size: 10px;
  font-weight: 600;
  color: #b91c1c;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.sr-guidance-remove:hover { color: #7f1d1d; }

/* A brief flash on the box that just received Quicktext. These fields hold
   hundreds of words, so without it an inserted paragraph is indistinguishable
   from nothing happening. */
.sr-just-inserted {
  animation: sr-inserted-flash 1.2s ease-out;
}
@keyframes sr-inserted-flash {
  0%   { box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.28); }
  100% { box-shadow: 0 0 0 3px rgba(30, 58, 95, 0); }
}

/* Guidance notes: one pill per note, expanding into its own editor. A single
   shared textarea ran several notes together into one wall. */
.sr-guidance-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.sr-gnote {
  border: 1px solid #DDE4EC;
  border-radius: 11px;
  background: #EEF2F6;
  overflow: hidden;
}
.sr-gnote-open { background: #fff; border-color: #CBD5E1; border-radius: 8px; }
.sr-gnote-head { display: flex; align-items: center; }
.sr-gnote-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 4px 5px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #33465C;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.sr-gnote-toggle svg { flex: none; color: #64748b; }
.sr-gnote-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-gnote-open .sr-gnote-title { white-space: normal; }
.sr-gnote-x {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  line-height: 20px;
  font-size: 15px;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.sr-gnote-x:hover { color: #b91c1c; background: #fee2e2; }
.sr-gnote-body { padding: 0 9px 8px; display: flex; flex-direction: column; gap: 6px; }
.sr-gnote-title-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #33465C;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
}
.sr-gnote-text { min-height: 60px; }
.sr-gnote-draft { margin-bottom: 6px; }
.sr-gnote-draft .sr-gnote-body { padding-top: 8px; }
.sr-gnote-draft-actions { display: flex; gap: 6px; }
.sr-gnote-draft-add {
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: #1e3a5f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.sr-gnote-draft-add:disabled { background: #cbd5e1; cursor: default; }
.sr-gnote-draft-cancel {
  padding: 4px 10px;
  font-size: 11.5px;
  color: #64748b;
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  cursor: pointer;
}
.sr-gnote-write {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  background: transparent;
  border: 1px dashed #CBD5E1;
  border-radius: 11px;
  cursor: pointer;
}
.sr-gnote-write:hover { color: #1e3a5f; border-color: #94a3b8; }
.sr-gnote.sr-just-inserted { outline: 2px solid #93C5FD; outline-offset: 1px; }

/* Open pill: the title is edited in place in the header (shown once, not as a
   static copy above an input), so the toggle collapses to its chevron. */
.sr-gnote-open .sr-gnote-toggle { flex: none; padding-right: 2px; }
.sr-gnote-head .sr-gnote-title-input { flex: 1; min-width: 0; margin: 4px 0; }
.sr-gnote-tools { display: flex; justify-content: flex-end; }
.sr-gnote-polish {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sr-gnote-polish:hover:not(:disabled) { color: #1e3a5f; border-color: #CBD5E1; }
.sr-gnote-polish:disabled { color: #94A3B8; cursor: default; }
/* The per-box "Create action" is the box's lead action: filled navy (Chad,
   17-08), matching the section-level Create action from observation. */
.sr-box-create-action {
  background: #1E3A5F;
  border-color: #1E3A5F;
  color: #fff;
}
.sr-box-create-action:hover:not(:disabled) { background: #2D5F8A; border-color: #2D5F8A; color: #fff; }
.sr-box-create-action:disabled { background: #F1F5F9; border-color: #E2E8F0; color: #94A3B8; }
.sr-gnote-save-lib {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
  cursor: pointer;
}
.sr-gnote-save-lib input { margin: 0; }

/* Done: the biggest thing in the open note, because closing must be the easiest
   action. Everything is saved as they type; this only folds the pill shut. */
.sr-gnote-tools { align-items: center; gap: 8px; }
.sr-gnote-done {
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #1e3a5f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.sr-gnote-done:hover { background: #16324f; }

/* Photo popup (Report & Actions). The inline panel pushed every later row down
   and its tiles were tiny; the popup gives photos real size for free. */
/* The popup SHELL (.cli-overlay.sr-photo-modal-overlay, .sr-photo-modal*)
   moved to modalShell.css so every mounting component carries it into its own
   route chunk (the Preview chunk was missing it entirely). SectionRow.jsx
   imports modalShell.css. */

/* Room to actually SEE the photos: fixed ~170px tiles, centred as a group —
   auto-fill with 1fr left a couple of photos hugging the left edge of a wide
   popup with dead space beside them. */
.sr-photo-modal-body .photos-grid {
  /* auto-FIT, not auto-fill: fill keeps its empty tracks, so two photos sat in
     the first two slots of a centred five-track group and still hugged left. */
  grid-template-columns: repeat(auto-fit, 170px);
  justify-content: center;
}

/* Checklist autofill in progress for a manually filed note. Only ever shown
   online, while the server is actually reading the note. */
.sr-cl-filling {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1E3A5F;
}

/* Create action from observation: same family as + Add action, spinner while
   the AI writes. */
.sr-gen-remedial { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
/* Filled navy on purpose (Chad, 17-08): this is the button that turns an
   observation into an action, and it was reading as greyed-out furniture. */
.sr-gen-remedial {
  background: #1E3A5F;
  border-color: #1E3A5F;
  color: #fff;
}
.sr-gen-remedial:hover:not(:disabled) { background: #2D5F8A; border-color: #2D5F8A; color: #fff; }
.sr-gen-remedial .sr-genpick-chev { color: #fff; }
.sr-gen-remedial:disabled { opacity: 0.5; cursor: default; }

/* Checklist popup: same host as the photo modal, narrowed for reading text.
   The panel keeps its own light card styling inside the white modal body. */
.sr-photo-modal.sr-checklist-modal { width: min(780px, 100%); }
.sr-checklist-modal .sr-photo-modal-body { padding: 14px 18px 18px; }
.sr-checklist-modal .sr-checklist { background: transparent; padding: 0; }

/* One BOX per observation, always open. The main write-up sits above; each of
   these is a further observation, with its own Create action and Remove. */
.sr-obs-box {
  border: 1px solid #DDE4EC;
  border-radius: 8px;
  background: #F8FAFC;
  padding: 7px 8px 6px;
  margin-bottom: 6px;
}
.sr-obs-box-title { font-size: 11.5px; font-weight: 700; color: #33465C; margin: 0 0 4px 2px; }
.sr-obs-box .sr-textarea { background: #fff; }
.sr-obs-box-tools { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.sr-obs-box-remove {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  cursor: pointer;
}
.sr-obs-box-remove:hover { color: #b91c1c; border-color: #FCA5A5; }
.sr-obs-box.sr-just-inserted { outline: 2px solid #93C5FD; outline-offset: 1px; }

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/EvidenceGallery.css (source sha256 60a8f3dce248) ---- */
/* Evidence Gallery — Design Token Reskin */
.evidence-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.evidence-empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-size: 14px;
}

.evidence-empty .add-photo-container {
  margin-top: var(--space-3);
}

.add-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  background: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.add-photo-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.add-photo-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.add-photo-tile {
  border: 2px dashed var(--color-border);
  background: var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.add-photo-tile:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-primary-faded);
}

.add-photo-tile:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.add-photo-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
  font-size: 11px;
}

.add-photo-tile:hover:not(:disabled) .add-photo-content {
  color: var(--color-accent);
}

.gallery-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  text-align: center;
}

/* Tabular figures so the tile does not jitter as the count goes 9 -> 10. */
.gallery-progress-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.add-icon {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.spinner-tiny {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-surface);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Photos Grid */
.photos-section {
  margin-bottom: var(--space-2);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2);
}

.photo-item {
  aspect-ratio: 1;
  position: relative;
  border: none;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-border);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.photo-item:hover img {
  /* brightness only — rotation is inline style via JS */
  filter: brightness(1.02);
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal);
}

.photo-overlay span {
  font-size: 20px;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--transition-normal);
}

.photo-item:hover .photo-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.photo-item:hover .photo-overlay span {
  opacity: 1;
  transform: scale(1);
}

/* Photo item wrapper (for positioning delete button + caption) */
.photo-item-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* 13-10: never wider than its column, whatever the photo's name */
  min-width: 0;
}

.photo-item-wrapper .photo-item {
  width: 100%;
  aspect-ratio: 1;
}

/* Photo delete button */
.photo-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
  line-height: 1;
}

.photo-item-wrapper:hover .photo-delete-btn {
  opacity: 1;
}

.photo-delete-btn:hover {
  background: var(--color-error);
}

/* Photo rotate button */
.photo-item-wrapper .photo-rotate-btn {
  position: absolute;
  bottom: 28px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
  line-height: 1;
}

.photo-item-wrapper:hover .photo-rotate-btn {
  opacity: 1;
}

.photo-item-wrapper .photo-rotate-btn:hover {
  background: var(--color-primary);
}

@media (hover: none) {
  .photo-delete-btn,
  .photo-item-wrapper .photo-rotate-btn {
    opacity: 1;
  }
}

/* Voice Notes */
.voice-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voice-note-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.play-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.play-btn:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

.play-btn.playing {
  background: var(--color-success);
  animation: pulse-play 1s infinite;
}

@keyframes pulse-play {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
  }
}

.voice-info {
  flex: 1;
  min-width: 0;
}

.voice-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  line-height: 1;
}

.voice-delete-btn:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}

.voice-duration {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.voice-transcription {
  margin: 6px 0 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-5);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-surface);
  font-size: 24px;
  cursor: pointer;
  padding: var(--space-2);
  opacity: 0.8;
  transition: opacity var(--transition-normal);
}

.close-btn:hover {
  opacity: 1;
}

/* Rotate the photo from the lightbox (mirrors close button, top-left) */
.lightbox-rotate-btn {
  position: absolute;
  top: -44px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-surface, #fff);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.lightbox-rotate-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-actions {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Name a photo from the lightbox (works in capture + report views) */
/* 14-10: a locked report's photo name, read only */
.lightbox-name-text {
  flex: 1 1 100%;
  margin: 0;
  font-size: 14px;
  color: #fff;
  overflow-wrap: anywhere;
}
/* The read-only tile is a div, not a button: same look */
div.photo-item { display: block; }
div.photo-item:focus-visible { outline: 2px solid var(--color-primary, #1E3A5F); outline-offset: 2px; }

.lightbox-name {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lightbox-name label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.lightbox-name input {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}
.lightbox-name input::placeholder { color: rgba(255, 255, 255, 0.5); }
.lightbox-name input:focus { border-color: #fff; background: rgba(255, 255, 255, 0.18); }

.image-caption-text {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-surface);
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.lightbox-delete-btn {
  padding: 8px 16px;
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.lightbox-delete-btn:hover {
  background: #b91c1c;
}

.image-caption {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.image-caption p {
  margin: 0;
  color: var(--color-surface);
  font-size: 14px;
  line-height: 1.5;
}

/* Evidence photo captions */
.evidence-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* 13-10: the name sits in its own box so a long one ends in "..." (the
   caption is a flex row, and text-overflow never reaches a bare text run) */
.evidence-caption-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-caption::after {
  content: '\270E';
  font-size: 9px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.evidence-caption:hover {
  background: var(--color-border-light);
  color: var(--color-text-primary);
}

.evidence-caption:hover::after {
  opacity: 0.6;
}

.evidence-caption-input {
  width: 100%;
  font-size: 10px;
  text-align: center;
  padding: 1px 3px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .photos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lightbox-content {
    max-width: 100%;
  }

  .close-btn {
    top: -50px;
    right: -5px;
  }
}

/* ── Compact variant — always-visible inline thumbnails on the Assessment (capture) page ── */
.evidence-gallery-compact .photos-section { margin: 0; }
.evidence-gallery-compact .photos-grid {
  /* Exactly three, not auto-fill. The photos column is a fixed width, so auto-fill
     resolved to two and left a ragged right edge. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  align-items: start;
}
/* Every wrapper the same height, so one tile can never nudge its neighbours. */
.evidence-gallery-compact .photo-item-wrapper { gap: 3px; align-self: start; }
/* Inline name under each compact thumbnail — rename without opening the photo */
.evidence-caption-compact {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: 9px;
  line-height: 1.25;
  padding: 0 2px;
  text-align: center;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.evidence-caption-compact::after { content: none; }
.evidence-caption-compact.is-empty { color: #94a3b8; }
.evidence-caption-compact:hover { color: #1E3A5F; text-decoration: underline; }
.evidence-caption-input-compact {
  width: 100%;
  box-sizing: border-box;
  font-size: 9px;
  padding: 1px 3px;
}
/* Controls in opposite top corners (delete top-right, rotate top-left), shrunk so
   they never overlap. Keep them visible (no hover on touch). */
.evidence-gallery-compact .photo-delete-btn,
.evidence-gallery-compact .photo-item-wrapper .photo-rotate-btn {
  opacity: 0.95;
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.evidence-gallery-compact .photo-delete-btn {
  top: 3px;
  right: 3px;
  bottom: auto;
  left: auto;
}
.evidence-gallery-compact .photo-item-wrapper .photo-rotate-btn {
  top: 3px;
  left: 3px;
  bottom: auto;
  right: auto;
}
/* Add tile: keep the "+", drop the wordy label so it fits a small square */
.evidence-gallery-compact .add-photo-content span:last-child { display: none; }
.evidence-gallery-compact .add-photo-content .add-icon { display: inline; font-size: 18px; }
.evidence-empty-compact { padding: 0; width: 100%; }
.evidence-empty-compact .add-photo-container { width: 100%; }
/* Keep the orange accent add-photo button (sized for the compact column),
   both in the empty state and below the thumbnails when photos exist. */
.evidence-empty-compact .add-photo-btn,
.evidence-gallery-compact .add-photo-btn.evidence-compact-add {
  justify-content: center;
  width: 100%;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 600;
}
.evidence-gallery-compact .add-photo-btn.evidence-compact-add { margin-top: 7px; }

/* Camera + Gallery pair (09-2026). Camera is navy, Gallery keeps the orange
   accent it always had, so the old "+ Photo" is still the colour people know. */
.add-photo-pair { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.add-photo-btn.add-photo-camera { background: var(--color-primary, #1E3A5F); }
.add-photo-btn.add-photo-camera:hover:not(:disabled) { background: #2D5F8A; }
.add-photo-btn svg { flex: none; }
.add-icon-svg { color: var(--color-primary, #1E3A5F); }
.add-photo-error { margin: var(--space-2) 0 0; font-size: 13px; color: #991B1B; }
/* Compact (the Assessment row's photo column): the pair shares the column. */
.evidence-empty-compact .add-photo-pair,
.evidence-gallery-compact .add-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.evidence-empty-compact .add-photo-pair .add-photo-btn,
.evidence-gallery-compact .add-photo-pair .add-photo-btn {
  justify-content: center;
  width: 100%;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
}
.evidence-gallery-compact .add-photo-pair.evidence-compact-add { margin-top: 7px; }

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/AIContentBadge.css (source sha256 7f7a161c6f26) ---- */
/* AI Content Badge — Clean style */

.ai-content-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.ai-content-badge .ai-icon {
  font-size: var(--font-size-caption);
}

.ai-content-badge .ai-label {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/RiskMatrix.css (source sha256 6311dc4684bb) ---- */
/* ============================================================
   Risk Matrix — Design Token Reskin
   All hardcoded colors, spacing, typography, border-radius,
   and transitions replaced with CSS custom property tokens.
   ============================================================ */

/* Risk Matrix */
.risk-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Risk Selector */
.risk-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 3x3 / 5x5 switch */
.matrix-switch {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.matrix-switch-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.matrix-switch-btn:last-child {
  border-right: none;
}

.matrix-switch-btn:hover {
  background: var(--color-primary-faded);
}

.matrix-switch-btn.selected {
  background: var(--color-primary);
  color: white;
}

.matrix-switch-hint {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.risk-selector label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.option-buttons {
  display: flex;
  gap: var(--space-3);
}

.option-btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.option-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-faded);
}

.option-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-faded);
}

.option-label {
  display: block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.option-desc {
  display: block;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

/* Matrix Grid */
.matrix-grid {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.matrix-header {
  display: flex;
  background: var(--color-border-light);
}

.matrix-corner {
  width: 80px;
  padding: var(--space-3);
  flex-shrink: 0;
}

.matrix-col-header {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.matrix-row {
  display: flex;
  border-top: 1px solid var(--color-border);
}

.matrix-row-header {
  width: 80px;
  padding: var(--space-3);
  background: var(--color-border-light);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.matrix-cell {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.matrix-cell:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Read-only (13-10): a locked report's matrix, nothing to pick */
.matrix-cell--readonly {
  cursor: default;
}

.matrix-cell--readonly:hover {
  opacity: 1;
  transform: none;
}

.matrix-cell.selected {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.2);
}

.cell-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Risk Result */
.risk-result {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid;
}

.risk-badge {
  padding: var(--space-2) var(--space-5);
  border-radius: 20px;
  color: white;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.risk-description {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
}

/* Risk Prompt */
.risk-prompt {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .option-buttons {
    flex-direction: column;
  }

  .option-btn {
    text-align: center;
  }

  .matrix-corner,
  .matrix-row-header {
    width: 52px;
    font-size: 10px;
    padding: var(--space-2);
  }

  .matrix-col-header {
    font-size: 10px;
    padding: var(--space-3) var(--space-1);
  }

  .matrix-cell {
    padding: var(--space-3) 2px;
  }

  .cell-label {
    font-size: 9px;
  }

  /* 5x5: six columns on a phone need every pixel */
  .matrix-grid--5x5 .matrix-col-header,
  .matrix-grid--5x5 .cell-label {
    font-size: 8px;
  }

  .matrix-grid--5x5 .matrix-corner,
  .matrix-grid--5x5 .matrix-row-header {
    width: 44px;
    font-size: 8px;
  }

  .risk-result {
    flex-direction: column;
    text-align: center;
  }
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/recorder/recorder.css (source sha256 b1b3bd766a89) ---- */
/* One recorder for every spoken note (14-10, the recorder lab's version A).
   Red only while recording; amber only for "N seconds left"; navy Done, red
   text Discard; the mic is the only icon. */

.vr { width: 100%; }
.vr-grow { flex: 1; }
.vr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* Ready: "Speak it" with the limit beside it */
.vr-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 15px; border-radius: 8px;
  border: 1px solid var(--color-primary, #1E3A5F); background: #eef2f8; color: var(--color-primary, #1E3A5F);
  cursor: pointer;
}
.vr-pill:hover:not(:disabled) { background: #e0e9f6; }
.vr-pill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Recording: the parts */
.vr-rec { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #B91C1C; white-space: nowrap; }
.vr-dot {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--color-error, #DC2626); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
  animation: vr-pulse 1.4s ease-in-out infinite;
}
@keyframes vr-pulse { 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.05); } }
.vr-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--color-text-primary, #1A1A2E); }
.vr-time.is-big { display: block; font-size: 40px; letter-spacing: -0.5px; line-height: 1.1; margin: 6px 0 2px; }
.vr-limit { font-size: 12.5px; color: var(--color-text-muted, #5E6B7E); white-space: nowrap; }
.vr-limit.is-warn { color: #B45309; font-weight: 700; }
.vr-level { display: inline-flex; align-items: center; gap: 3px; }
.vr-level span { display: block; width: 4px; border-radius: 2px; background: var(--color-primary, #1E3A5F); transition: height 90ms linear; }

/* The small recorder's strip, in place of the "Speak it" row */
.vr-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px;
  padding: 8px 6px 8px 12px; border: 1px solid var(--color-border, #E2E8F0); border-radius: 10px; background: #fff;
}
/* Never clipped: in a narrow box Done and Discard move to the next line
   together, on the right */
.vr-strip-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.vr-strip .vr-btn-done { padding: 8px 14px; }
.vr-strip .vr-btn-discard { padding: 8px 8px; }
.vr-strip.is-compact { padding: 10px 12px; }

/* Buttons */
.vr-btn-done {
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--color-primary, #1E3A5F); border: 1px solid var(--color-primary, #1E3A5F); border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
.vr-btn-done:hover { background: #16304f; }
.vr-btn-discard {
  font: inherit; font-size: 14px; font-weight: 600; color: #B91C1C;
  background: none; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.vr-btn-discard:hover { background: #FEF2F2; }
.vr-btn-start {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font: inherit; font-size: 16px; font-weight: 600; color: #fff;
  background: var(--color-primary, #1E3A5F); border: none; border-radius: 10px; padding: 14px 18px; cursor: pointer;
}
.vr-btn-start:hover:not(:disabled) { background: #16304f; }
.vr-btn-start:disabled { opacity: 0.5; cursor: not-allowed; }
.vr-link { font: inherit; font-weight: 600; color: var(--color-primary, #1E3A5F); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }
.vr button:focus-visible { outline: 3px solid rgba(30, 58, 95, 0.35); outline-offset: 2px; }

/* Phone: Site Walk's Start recording fills the sheet, as the lab draws it */
.vr-large .mob-btn.vr-start { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; }

/* Phone: Done and Discard as big buttons side by side */
.vr-mob-row { display: flex; gap: 10px; margin-top: 12px; }
.vr-mob-row .mob-btn { flex: 1; margin: 0; }

/* The large recorder (Site Walk) */
.vr-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--color-border, #E2E8F0); border-radius: 12px; padding: 18px; background: #fff;
}
.vr-card-actions { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; }
.vr-card-actions .vr-btn-done { flex: 1; padding: 11px 16px; }
.vr-note { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted, #5E6B7E); text-align: center; }
.vr-note.is-left { text-align: left; }

/* Writing it up */
.vr-writing { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-primary, #1E3A5F); }
.vr-spin {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 3px solid #c7d7ef; border-top-color: var(--color-primary, #1E3A5F);
  animation: vr-turn 0.8s linear infinite;
}
@keyframes vr-turn { to { transform: rotate(360deg); } }

/* Messages, in words on screen */
.vr-msg { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.45; text-align: left; }
.vr-msg svg { flex: none; margin-top: 1px; }
.vr-msg.is-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.vr-msg.is-error .vr-link { color: #991B1B; }
.vr-msg.is-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: var(--color-primary, #1E3A5F); }

@media (prefers-reduced-motion: reduce) {
  .vr-dot, .vr-spin { animation: none; }
  .vr-level span { transition: none; }
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/PhotoCapture.css (source sha256 c9f29a6e75ad) ---- */
/* Photo Capture — Design Token Reskin */
.photo-capture {
  padding: var(--space-4);
}

.photo-capture.disabled {
  opacity: 0.6;
}

.capture-buttons {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.capture-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.capture-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-primary-faded);
}

.capture-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #1E3A5F);
}
.btn-icon svg { width: 26px; height: 26px; }

.btn-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.capture-error {
  padding: var(--space-2) var(--space-3);
  background: #FEE2E2;
  color: #991B1B;
  border-radius: 6px;
  font-size: var(--font-size-small);
  margin-bottom: var(--space-3);
}

.capture-hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}

.max-reached {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: var(--space-5);
}

/* ── Live camera modal (getUserMedia) ── */
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.camera-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.camera-cancel {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  min-width: 72px;
  text-align: left;
}

.camera-shutter {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px #fff inset;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.camera-shutter:active:not(:disabled) {
  transform: scale(0.92);
}

.camera-shutter:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Balances the Cancel button so the shutter stays centred */
.camera-spacer {
  min-width: 72px;
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/BuildingPhotos.css (source sha256 dea977926d05) ---- */
/* ============================================================
   Building Photos — Design Token Reskin
   Uses design tokens + shared component classes
   ============================================================ */

.building-photos {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-border-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.photos-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.photos-header h4 {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.photos-hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  font-style: italic;
}

.photos-error {
  background: #FEE2E2;
  color: #991B1B;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  margin-bottom: var(--space-3);
}

.photos-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  padding: var(--space-5);
  justify-content: center;
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.photo-item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

.photo-item.is-main {
  border: 3px solid var(--color-accent);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 6px;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.photo-item:hover .photo-overlay {
  opacity: 1;
}

.photo-action {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-size-small);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.photo-action.main-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-muted);
}

.photo-action.main-btn:hover,
.photo-action.main-btn.active {
  background: var(--color-accent);
  color: #FFFFFF;
}

.photo-action.rotate-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-muted);
  font-size: 16px;
}

.photo-action.rotate-btn:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

.photo-action.delete-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-muted);
}

.photo-action.delete-btn:hover {
  background: var(--color-error);
  color: #FFFFFF;
}

.main-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(217, 119, 6, 0.95), rgba(217, 119, 6, 0.8));
  color: #FFFFFF;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  padding: var(--space-1);
  text-transform: uppercase;
}

.photo-upload-btn {
  aspect-ratio: 1;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  padding: var(--space-2);
  text-align: center;
}

.photo-upload-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-faded);
  color: var(--color-primary);
}

.photo-upload-btn .upload-icon {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.photo-upload-btn span:last-child {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

/* Selected but not yet stored. Dimmed so it reads as in-progress rather than done. */
.photo-item.is-pending {
  opacity: 0.55;
  filter: saturate(0.7);
}

.photo-caption.is-pending-caption {
  color: var(--color-text-muted);
  font-style: italic;
  cursor: default;
}

.upload-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

/* Tabular figures so the tile does not jitter as the count goes 9 -> 10. */
.upload-progress-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

.photos-empty-hint {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  margin: var(--space-3) 0 0;
  font-style: italic;
}

.spinner-small {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Photo caption */
.photo-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.photo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.photo-caption::after {
  content: '\270E';
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.photo-caption:hover {
  background: var(--color-border-light);
  color: var(--color-text-primary);
}

.photo-caption:hover::after {
  opacity: 0.6;
}

.photo-caption-input {
  width: 100%;
  font-size: 11px;
  text-align: center;
  padding: 2px 4px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 480px) {
  .photos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .photo-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.3);
  }
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/BuildingPhotoGrid.css (source sha256 79c81c5ebbc1) ---- */
/* BuildingPhotoGrid: additions on top of BuildingPhotos.css.
   The bpc- prefix is kept from BuildingPhotoCapture.css, which this file
   replaces (the mobile wizard's stylesheet matches on that prefix), so every
   rule from that file lives here unchanged. Every host of the grid loads this
   file. No transitions or keyframes: nothing on this grid may flash. */

.bpc-hint {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted, #5E6B7E);
}

.bpc-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bpc-add-row .photo-capture { flex: 1; min-width: 0; }

/* Camera + Gallery in the app's own button language (Chad: the emoji were
   "a bit tacky"; PhotoCapture now draws lucide line icons itself). Scoped to
   this component only: the Quick Note keeps its own compact pills. --ms is
   the mobile text-scale factor; on desktop it is undefined and 1 applies. */
.bpc-add-row .capture-buttons { display: flex; flex-direction: row; gap: 10px; width: 100%; margin: 0; }
.bpc-add-row .capture-btn {
  flex: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: calc(15px * var(--ms, 1));
  font-weight: 800;
  box-shadow: none;
  cursor: pointer;
}
.bpc-add-row .camera-btn {
  background: var(--color-primary, #1E3A5F);
  border: 1.5px solid var(--color-primary, #1E3A5F);
  color: #fff;
}
.bpc-add-row .camera-btn:hover:not(:disabled),
.bpc-add-row .camera-btn:active { background: #2D5F8A; border-color: #2D5F8A; }
.bpc-add-row .gallery-btn {
  background: #fff;
  border: 1.5px solid var(--color-primary, #1E3A5F);
  color: var(--color-primary, #1E3A5F);
}
.bpc-add-row .gallery-btn:hover:not(:disabled),
.bpc-add-row .gallery-btn:active { background: #EEF3F8; }
.bpc-add-row .capture-btn .btn-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  color: inherit;
}
.bpc-add-row .capture-btn .btn-icon svg { width: 20px; height: 20px; }
.bpc-add-row .btn-label { font-size: inherit; font-weight: inherit; color: inherit; }
.bpc-saving {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted, #5E6B7E);
}
/* Grid safety in every host: content must never widen a track. The grid is
   positioned so the drag-and-drop overlay can cover it. */
.bpc .photos-grid {
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.bpc .photo-wrapper { min-width: 0; }

.bpc-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  opacity: 0.5;
}

.bpc-pending-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  right: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #7C4A0B;
  background: rgba(254, 243, 226, 0.92);
  border-radius: 6px;
  padding: 2px 4px;
  pointer-events: none;
}

.bpc-caption {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

/* Minimal delete confirm: never a native confirm() (it wedges automation and
   reads badly on phones). */
.bpc-confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 400);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  padding: 20px;
}
.bpc-confirm-box {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  max-width: 340px;
  width: 100%;
}
.bpc-confirm-box p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Why "Yes, remove it" is closed right now (upload on the wire, no signal). */
.bpc-confirm-box .bpc-confirm-note {
  margin: -6px 0 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #7C4A0B;
}
.bpc-confirm-row { display: flex; gap: 10px; }
.bpc-btn {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary, #1E3A5F);
  cursor: pointer;
}
.bpc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bpc-btn-danger {
  border-color: #FECACA;
  color: #B91C1C;
}

/* ── Status line ─────────────────────────────────────────────────────────────
   The same look as the Setup details autosave line (.save-status and .btn-link
   in ClientBuildingSelector.css), copied here and scoped to the grid so the
   building page, which never loads that stylesheet, renders it identically. */
.building-photos .save-status {
  font-size: 13px;
  color: var(--color-text-muted);
  min-height: 22px;
  line-height: 22px;
  margin: 0 0 var(--space-3);
}

.building-photos .save-status.is-warning {
  background: #FEF3C7;
  color: #92400E;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  line-height: 1.4;
}

.building-photos .btn-link {
  background: none;
  border: none;
  color: var(--color-primary-light);
  font-family: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
  padding: var(--space-1) 0;
  text-decoration: underline;
}

.building-photos .btn-link:hover {
  color: var(--color-primary);
}

.building-photos .save-status .btn-link {
  min-height: 32px;
  color: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: inherit;
  padding: 0 var(--space-1);
}

/* ── Add tile ────────────────────────────────────────────────────────────────
   A real button (keyboard reachable, 96px target) wearing the old tile's look
   from BuildingPhotos.css. */
.bpc .photo-upload-btn {
  width: 100%;
  min-height: 96px;
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
.bpc .photo-upload-btn:disabled {
  cursor: default;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.bpc-file-input { display: none; }

.bpc-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(25, 118, 210, 0.08);
  border: 2px dashed #1976d2;
  border-radius: 8px;
  pointer-events: none;
}
.bpc-drop-overlay span:first-child { font-size: 28px; }
.bpc-drop-overlay span:last-child {
  color: #1976d2;
  font-weight: 600;
  font-size: 14px;
}

/* ── Per-tile upload state ───────────────────────────────────────────────── */
.bpc .photo-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* A failed photo is not in progress, so it is not dimmed like a pending one. */
.bpc .photo-item.is-failed {
  opacity: 1;
  filter: none;
}
.bpc-pending-badge.is-failed {
  color: #991B1B;
  background: rgba(254, 226, 226, 0.94);
}
.bpc-caption:disabled {
  cursor: default;
  opacity: 0.7;
}
.bpc-tile-actions {
  display: flex;
  gap: 6px;
}
.bpc-tile-actions .bpc-btn {
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  font-size: 0.82rem;
}
.bpc-fail-reason {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #991B1B;
  text-align: center;
}

/* ── Touch ───────────────────────────────────────────────────────────────────
   No hover on a phone, so the actions are always visible and 40px. */
@media (hover: none) {
  .bpc .photo-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.3);
  }
  .bpc .photo-action {
    width: 40px;
    height: 40px;
  }
  .bpc .photo-item:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Phones: two per row. Three overlay buttons need the width, and minmax(0, 1fr)
   stops a long caption blowing the track past the viewport. */
@media (max-width: 480px) {
  .bpc .photos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .bpc .photo-action {
    width: 40px;
    height: 40px;
  }
}

/* The building locked by a BAFE SP205 report (13-10): one plain line in
   place of the add controls */
.bpc-lock {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #92400E;
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/BuildingNotesList.css (source sha256 3e6da9c7a280) ---- */
/* Building notes list + editor. Own prefix (bnl-) and own file: it mounts on
   the Assessment step, the phone wizard and Preview (separate lazy routes). */

.bnl { display: flex; flex-direction: column; gap: 12px; }
.bnl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bnl-item {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
}
.bnl-text { margin: 0; font-size: 14px; line-height: 1.5; color: #0f172a; white-space: pre-wrap; overflow-wrap: anywhere; }
.bnl-item-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bnl-spacer { flex: 1; }
.bnl-pending { font-size: 12px; color: #92400E; }
.bnl-empty { margin: 0; font-size: 14px; color: #64748B; }
.bnl-hint { font-size: 13px; color: #64748B; }
.bnl-msg { margin: 0; font-size: 13px; color: #92400E; }

.bnl-link {
  background: none; border: none; padding: 4px 2px; min-height: 32px;
  font: inherit; font-size: 13px; font-weight: 600; color: #1E3A5F;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.bnl-link.is-danger { color: #B91C1C; }

.bnl-editor { display: flex; flex-direction: column; gap: 8px; }
.bnl-textarea {
  width: 100%; box-sizing: border-box;
  min-height: 84px; resize: vertical;
  padding: 10px 12px;
  font: inherit; font-size: 15px; line-height: 1.5; color: #0f172a;
  border: 1px solid #CBD5E1; border-radius: 8px; background: #fff;
}
.bnl-textarea:focus { outline: 2px solid #1E3A5F; outline-offset: 1px; border-color: #1E3A5F; }
.bnl-editor-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bnl-btn {
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 40px; padding: 8px 18px;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
}
.bnl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bnl-btn-primary { background: #1E3A5F; color: #fff; border-color: #1E3A5F; }
.bnl-btn-primary:hover:not(:disabled) { background: #16324f; }
.bnl-btn-quiet { background: #fff; color: #1E3A5F; border-color: #CBD5E1; }

@media (max-width: 767px) {
  .bnl-textarea { font-size: 16px; } /* no iOS zoom on focus */
  .bnl-btn { min-height: 46px; }
  .bnl-link { min-height: 44px; }
}

/* Compact (Preview): one bullet line per note, small icon buttons. */
.bnl-compact { gap: 8px; }
.bnl-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bnl-bullet { padding: 6px 0; border-top: 1px solid #EEF2F7; }
.bnl-bullet:first-child { border-top: none; }
.bnl-bullet-row { display: flex; align-items: flex-start; gap: 10px; }
.bnl-dot { flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: #1E3A5F; }
.bnl-bullet-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.5; color: #0f172a; white-space: pre-wrap; overflow-wrap: anywhere; }
.bnl-icons, .bnl-confirm { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.bnl-confirm { gap: 8px; }
.bnl-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: transparent;
  color: #64748B; cursor: pointer;
}
.bnl-icon:hover { background: #F1F5F9; color: #1E3A5F; }
.bnl-icon.is-danger:hover { background: #FEF2F2; color: #B91C1C; }
.bnl-compact .bnl-editor { margin-top: 4px; }

@media (max-width: 767px) {
  .bnl-icon { width: 44px; height: 44px; }
}

/* ---- COPIED FROM FlameGuard: flameguard-frontend/src/components/wizard/WizardBottomNav.css (source sha256 00a2a51b479d) ---- */
/* ============================================================
   Wizard Bottom Nav — Design Token Reskin
   Uses design tokens + shared component classes
   ============================================================ */

.wizard-bottom-nav {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  margin-top: auto;
}

.wizard-bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}

.wbn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  min-height: 44px;
}

.wbn-back {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border);
}

.wbn-back:hover {
  background: var(--color-border-light);
  border-color: var(--color-primary-light);
  color: var(--color-text-primary);
}

.wbn-next {
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 26px;
  min-height: 48px;
  box-shadow: 0 3px 12px rgba(30, 58, 95, 0.28);
  letter-spacing: 0.01em;
}

.wbn-next:hover:not(:disabled) {
  background: var(--color-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(30, 58, 95, 0.4);
}

.wbn-next:active:not(:disabled) {
  transform: translateY(0);
}

.wbn-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.wbn-arrow {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.wbn-next .wbn-arrow {
  font-size: 20px;
}

.wbn-phase {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.wbn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: wbn-spin 0.8s linear infinite;
}

@keyframes wbn-spin {
  to { transform: rotate(360deg); }
}

/* Inline variant - never fixed, stays in document flow */
.wizard-bottom-nav.wbn-inline {
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 600px) {
  .wizard-bottom-nav:not(.wbn-inline) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  }

  .wbn-phase {
    display: none;
  }

  .wbn-back {
    padding: 10px var(--space-4);
    font-size: var(--font-size-small);
  }

  .wbn-next {
    padding: 12px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
  }
}