/* Opening a dialog or clicking a control never adds an automatic frame. */
dialog:focus{outline:none}

/* Focus remains visible when the visitor deliberately navigates by keyboard. */
html.keyboard-navigation :is(button,a,input,[tabindex]):focus-visible{
 outline:2px solid currentColor;
 outline-offset:var(--space-4,4px);
}
html.keyboard-navigation .scene-3d:focus-visible{
 outline-offset:calc(-1 * var(--space-8,8px));
}
html.keyboard-navigation .calendar-day:focus-visible{outline-offset:-4px}
html.keyboard-navigation .switch-label input:focus-visible+.switch-track{
 outline:2px solid currentColor;
 outline-offset:4px;
}
/* One close button for every dialog: the round one from the share card. */
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close,
:is(#movie-dialog,#waiting-dialog,#calendar-dialog) .dialog-close{position:absolute;z-index:5;top:16px;right:16px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #82927d66;border-radius:50%;background:#163127;color:#f1e1bd;box-shadow:0 4px 16px #0003;transition:background .2s,transform .2s}
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close:hover,
:is(#movie-dialog,#waiting-dialog,#calendar-dialog) .dialog-close:hover{background:#254335}
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close svg,
:is(#movie-dialog,#waiting-dialog,#calendar-dialog) .dialog-close svg{width:20px;height:20px}
/* On the calendar page the close button hangs under the dialog (app.js places it). */
/* The dialog is centred in the screen minus a 72px strip at the bottom kept for the close button, so it can be taller. */
:is(#movie-dialog,#waiting-dialog,#calendar-dialog){inset-block:0 72px;max-height:calc(100svh - 104px)!important}
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close{position:fixed;right:auto;margin:0}
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close[popover]{inset:auto;margin:0;overflow:visible}
:is(#movie-dialog,#waiting-dialog,#calendar-dialog)>.close[popover]:not(:popover-open){display:none}
@media(max-width:600px){.waiting-postcard-play{padding:32px 24px 32px!important}.waiting-card-footer{align-items:end;gap:16px}}
@media(max-width:600px){.waiting-postcard-play{padding:24px 24px 24px!important}#waiting-feedback{scroll-margin-bottom:24px}}