/* Generated from site/src/styles/components/dialog.css by wordpress/tools/sync-theme-assets.mjs – edit the source, not this copy. */
/*
 * Native dialogs (Stage timings; the Announcement module uses the same
 * look): white panel on a dark backdrop, close button top right.
 * Without JavaScript or invoker support the timings image is shown in the
 * page instead (html:not(.js)).
 * WordPress: enqueued with templates that have a dialog.
 */
.timings-dialog {
  width: min(94vw, 860px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: var(--white);
  overflow: auto;
}
.timings-dialog::backdrop { background: rgb(0 0 0 / 0.7); }
.timings-inner { position: relative; padding: 48px 20px 20px; }
.timings-inner img { width: 100%; }

.dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: var(--red);
  color: var(--white);
  cursor: pointer;
}
.dialog-close .icon { width: 22px; height: 22px; }

html:not(.js) .timings-dialog { display: block; position: static; width: auto; max-height: none; margin: 0 auto 40px; }
html:not(.js) .dialog-close { display: none; }

/* Announcement (Site settings → Announcement): the same panel, narrower,
   title in the display face, optional image and button. Never shown
   without JavaScript (it is opened by announcement.js). */
.announcement {
  width: min(92vw, 560px);
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: var(--white);
  overflow: auto;
}
.announcement::backdrop { background: rgb(0 0 0 / 0.7); }
.announcement-inner { position: relative; padding: 52px 28px 28px; }
.announcement-title { margin: 0 0 14px; color: var(--red); font-family: var(--display); font-size: var(--h-date); font-weight: 400; line-height: 1.1; letter-spacing: 0; }
.announcement-image { width: 100%; margin: 0 0 16px; }
.announcement .prose > :last-child { margin-bottom: 0; }
.announcement .button-row { margin: 22px 0 0; }
.announcement .button { font-size: 28px; }