/* overlays.css: kit lane K3. Dialog fragments, confirm, lightbox, gallery grid, error state, buttons. */
.contents { display: contents; }

/* Modal fragment inside #dp-modal-body */
.modal-frag { display: block; }
.modal-title { font-size: var(--fs-4, 1.0625rem); margin: 0 0 var(--space-3); }
.modal-title:focus { outline: none; }
.modal-body { display: block; }
.shell-dialog[data-size="sm"] { --dialog-w: 24rem; }
.shell-dialog[data-size="md"] { --dialog-w: 34rem; }
.shell-dialog[data-size="lg"] { --dialog-w: 52rem; }
@media (min-width: 768px) {
  #dp-modal[data-size] { max-width: min(var(--dialog-w, 34rem), calc(100vw - 2rem)); }
  #dp-modal[data-size="drawer"] { margin: 0 0 0 auto; height: 100vh; max-height: none; max-width: min(28rem, 100vw); }
  #dp-modal[data-size="drawer"] .dialog-panel { height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; }
}

/* Confirm */
.confirm-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-4, 1.0625rem); margin: 0 0 var(--space-2); }
.confirm-danger .confirm-title .icon { color: var(--danger-ink); }
.confirm[data-permanent] .confirm-text { font-weight: 600; }
.confirm-text { margin: 0; color: var(--body); overflow-wrap: anywhere; }
.confirm-page { max-width: 28rem; margin: var(--space-6) auto; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Lightbox */
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.lightbox-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2); touch-action: pan-y; }
.lightbox-items { min-width: 0; text-align: center; }
.lightbox-item { margin: 0; }
.lightbox-item[hidden] { display: none; }
.lightbox-item img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-caption { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--fs-1); overflow-wrap: anywhere; }
.lightbox-nav { flex: none; }

/* Gallery grid */
.gallery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.gallery-item { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.gallery-thumb { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-caption { margin: 0; color: var(--ink-muted); overflow-wrap: anywhere; }
.gallery-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.gallery-rename { display: flex; gap: var(--space-1); flex: 1 1 100%; }
.gallery-rename .input { flex: 1; min-width: 0; }

/* Error state */
.error-state { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--danger-ink); background: var(--danger-bg); color: var(--danger-ink); border-radius: var(--radius-md); }
.error-state .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.error-state h3 { margin: 0 0 var(--space-1); }

/* Print buttons are hidden where the Capacitor shells cannot print (use the download link). */
html[data-shell="android"] [data-print], html[data-shell="ios"] [data-print] { display: none; }
[data-download][aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* R6 (SRR-05): lightbox parts and error-state text. */
.lightbox { display: grid; gap: var(--space-2); min-width: 0; }
.lightbox-count { font-variant-numeric: tabular-nums; }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.error-state-text { min-width: 0; }

/* Drawer (recalls, appointment view): the title on top, the body scrolls, the footer with the actions stays at the bottom with
   Close as its last button. The dialog is a full-height sheet on phones and a right-hand panel from 768px (rule above). */
#dp-modal[data-size="drawer"] .dialog-panel { height: 100%; max-height: none; overflow: hidden; }
#dp-modal[data-size="drawer"] .dialog-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#dp-modal[data-size="drawer"] .modal-frag, #dp-modal[data-size="drawer"] .modal-frag > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#dp-modal[data-size="drawer"] .modal-title { flex: none; margin: 0; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
#dp-modal[data-size="drawer"] .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
#dp-modal[data-size="drawer"] .dialog-actions { flex: none; flex-wrap: wrap; margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--surface); }
@keyframes drawer-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: no-preference) {
  #dp-modal[data-size="drawer"][open] .dialog-panel { animation: drawer-in 0.2s ease-out; }
}