/* photo_dialog.css -- the look of photo_dialog.js. Tokens from theme.css
   with fallbacks, so it also stands on its own. */
.photo-dialog { border: 1px solid var(--border, #ccc); border-radius: 14px; padding: 1.25rem;
  width: min(26rem, calc(100vw - 2rem)); background: var(--surface, #fff); color: var(--fg, #111);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.photo-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.pd-title { margin: 0 0 .25rem; font-size: 1.25rem; }
.pd-hint { margin: 0 0 .75rem; color: var(--fg-muted, #666); }
.pd-hint[hidden] { display: none; }
.pd-zone { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.5rem 1rem;
  border: 2px dashed var(--border-strong, #999); border-radius: 12px; background: var(--surface-2, #f6f6f6);
  text-align: center; }
.pd-zone-over { border-color: var(--accent, #3b6ea5); background: var(--accent-soft, #dbe8ff); }
.pd-zone-icon { font-size: 2rem; }
.pd-zone-text { font-weight: 600; }
.pd-zone-sub { font-size: .9em; color: var(--fg-muted, #666); }
.pd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pd-actions .btn { min-height: 44px; }
.pd-paste[hidden] { display: none; }
.pd-problem { margin: .5rem 0 0; min-height: 1.2em; color: var(--danger, #b00020); }
@media (hover: none) { .pd-zone-sub { display: none; } }