/* camera-capture.css — the upload dialog's "Take photo" row and camera sheet (plan
   2026-10-22-document-capture-and-formats Step 14; spec §6.2, §6.3, §6.11; camera-session.js).
   Every selector is .du-camera-* or .du-cam-*; colours are theme tokens only (light and dark, tokens.css).
   The sheet sits inside #upload-modal (.cem-overlay, z-index 10000), so the confirm dialog (10001) and
   toasts (10002) stay above it. Targets are at least 48 px. Under 768 px the sheet is full screen with
   safe-area insets; prefers-reduced-motion turns the shutter flash off. */

/* ===== ENTRY ROW (after #duDropZone, outside it) ===== */
.du-camera-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
}
.du-camera-row[hidden] { display: none; }
.du-camera-btn { gap: 8px; min-height: 48px; }
.du-camera-btn svg { flex-shrink: 0; }
.du-camera-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.du-camera-reason { color: var(--text-light); font-size: 0.82rem; }

/* ===== SHEET ===== */
.du-cam-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}
.du-cam-sheet [hidden] { display: none !important; }
.du-cam-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.du-cam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.du-cam-title { margin: 0; font-size: var(--text-size-lg); font-weight: 600; }
.du-cam-close {
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.du-cam-close:hover { color: var(--text); }
.du-cam-text, .du-cam-status, .du-cam-summary { margin: 0; color: var(--text-light); font-size: 0.85rem; }
.du-cam-error { margin: 0; color: var(--error); font-size: 0.85rem; }

/* ===== VIEWFINDER + SHUTTER FLASH ===== */
.du-cam-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--overlay);
}
.du-cam-video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.du-cam-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  opacity: 0;
  pointer-events: none;
}
.du-cam-stage.du-cam-flash::after { animation: du-cam-flash 0.25s ease-out; }
@keyframes du-cam-flash {
  from { opacity: 0.8; }
  to { opacity: 0; }
}

/* ===== REVIEW: name, size, notes ===== */
.du-cam-review { display: flex; flex-direction: column; gap: 6px; }
.du-cam-label { font-size: 0.85rem; font-weight: 600; }
.du-cam-name { display: flex; align-items: center; gap: 4px; }
.du-cam-name-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
}
.du-cam-name-input:read-only { background: var(--bg-subtle); }
.du-cam-suffix { color: var(--text-light); }

/* ===== STRIP: 64 px thumbnails; each remove button's hit area is 48 px ===== */
.du-cam-strip {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 12px 12px 4px 0;
  overflow-x: auto;
  list-style: none;
}
.du-cam-page { position: relative; flex: 0 0 auto; }
.du-cam-thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.du-cam-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.du-cam-remove::before { content: ''; position: absolute; inset: -12px; }
.du-cam-remove:hover { color: var(--error); }
.du-cam-remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== ACTIONS ===== */
.du-cam-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.du-cam-actions button { min-height: 48px; }
.du-cam-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.du-cam-shutter {
  width: 64px;
  height: 64px;
  margin-right: auto;
  border: 4px solid var(--primary);
  border-radius: 50%;
  background: var(--bg-surface);
  cursor: pointer;
}

/* ===== PHONES: full-screen sheet with safe-area insets ===== */
@media (max-width: 768px) {
  .du-cam-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  }
  .du-cam-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
  .du-cam-video { max-height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .du-cam-stage.du-cam-flash::after { animation: none; }
}