/* Shared media carousel, preview and detail dialogs. */
.myopal-detail-media { position: relative; aspect-ratio: 1; overflow: hidden; background: #eee6d8; }
.myopal-media-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.myopal-media-track::-webkit-scrollbar { display: none; }
.myopal-media-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.myopal-media-slide > a { display: block; width: 100%; height: 100%; }
.myopal-media-slide :is(img, video, iframe) { display: block; width: 100%; height: 100%; border: 0; }
.myopal-media-slide img { object-fit: cover; }
.myopal-media-slide video { background: #000; object-fit: contain; }
.myopal-video-load { position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #000; }
.myopal-video-load > span { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border: 1px solid #fff5; border-radius: 50%; background: #000a; color: #fff; }
.myopal-media-dots { position: absolute; inset: auto 4.75rem 0.375rem 4.75rem; display: flex; justify-content: center; overflow-x: auto; scrollbar-width: none; pointer-events: none; }
.myopal-media-dots button { flex: 0 0 1.125rem; min-height: 2.75rem; padding: 0; border: 0; background: none; pointer-events: auto; }
.myopal-media-dots button::after { content: ''; width: 0.3125rem; height: 0.3125rem; border-radius: 999px; background: #ffffff73; transition: width 250ms ease; box-shadow: 0 0 2px #0008; }
.myopal-media-dots button[aria-current] { flex-basis: 1.6875rem; }
.myopal-media-dots button[aria-current]::after { width: 1.3125rem; background: #d8b46a; }
.myopal-media-count { position: absolute; inset: auto 1.0625rem 0.875rem auto; padding: 0.125rem 0.5625rem; border-radius: 999px; color: #fff; background: #0006; font-size: 0.6875rem; pointer-events: none; }
.myopal-media-slide:has(video) .myopal-media-feedback { inset-block-end: 4rem; }
.myopal-detail-media:has(.myopal-media-slide.is-current video) .myopal-media-dots,
.myopal-detail-media:has(.myopal-media-slide.is-current iframe) .myopal-media-dots { inset-block-end: 3rem; }
.myopal-detail-media:has(.myopal-media-slide.is-current video) .myopal-media-count,
.myopal-detail-media:has(.myopal-media-slide.is-current iframe) .myopal-media-count { inset-block-end: 3.5rem; }
.myopal-media-empty { display: grid; place-items: center; height: 100%; color: #786b56; font-size: 0.875rem; }
.myopal-media-feedback { position: absolute; inset: auto 1rem 4rem; padding: 0.625rem; border-radius: 0.5rem; background: #17130de8; color: white; font-size: 0.75rem; text-align: center; }
.myopal-detail-dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: 40rem; max-height: calc(100dvh - 1rem); margin: auto auto 0; padding: 0.625rem 1.1875rem calc(1.3125rem + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0.9375rem 0.9375rem 0 0; background: #fffdf9; color: #5e5548; font-size: 0.78125rem; line-height: 1.72; overscroll-behavior: contain; }
.myopal-detail-dialog::backdrop { background: #0006; }
.myopal-detail-dialog-handle { width: 2.0625rem; height: 0.21875rem; margin: 0 auto 0.75rem; border-radius: 999px; background: #46392529; }
.myopal-detail-dialog h2 { padding-right: 4rem; margin-bottom: 0.9375rem; font-size: 1.0625rem; color: #211c15; }
.myopal-detail-dialog h3 { margin-block: 0.75rem 0.25rem; font-size: 0.78125rem; color: #8a6426; }
.myopal-detail-close { position: absolute; inset: 0.5rem 0.625rem auto auto; padding: 0.5rem; background: none; color: #75684f; font-size: 0.75rem; }

.myopal-detail-dialog input { margin-block: 0.5rem; font-size: 1rem; }
.myopal-image-preview { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); border: 0; background: #080808; color: white; }
.myopal-image-preview[open] { display: flex; flex-direction: column; }
.myopal-preview-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.125rem; flex-shrink: 0; }
.myopal-preview-tools :is(button, a) { min-height: 2.75rem; padding: 0.5rem 0.625rem; border: 0; color: white; background: none; font-size: 0.75rem; }
.myopal-preview-stage { display: grid; place-items: center; flex: 1; min-height: 0; overflow: auto; }
.myopal-preview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.myopal-image-preview > p { flex-shrink: 0; text-align: center; font-size: 0.8125rem; }
body:has(:is(.myopal-detail-dialog, .myopal-image-preview)[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .myopal-tone-marker, .myopal-media-dots button::after, .myopal-detail-tab-indicator, .myopal-detail-tabs.is-enhanced .myopal-detail-tab-track { transition: none; } }