/* Shared full-screen-overlay shape across five modal-style components:
.unsaved-changes-modal (article_editor/article_unsaved_changes.css),
.toc-modal (article_toc/article_toc_modal.css), .tool-lightbox
(../tool/tool_lightbox.css), .messageboard-modal
(messageboard/messageboard_modal.css), .event-calendar-modal
(event/event_calendar.css).

Only genuinely-identical declarations are lifted here:

- position:fixed + inset:0 are identical across all five modal shells.
- z-index is NOT shared: .unsaved-changes-modal deliberately uses 3000 (it
  can pop up while an editor panel at 2010/2000 is already open), the other
  four use 1000 -- stays a per-file override.
- display is NOT shared: .unsaved-changes-modal/.toc-modal/.tool-lightbox
  default to display:flex and hide via a plain [hidden] rule, while
  .messageboard-modal/.event-calendar-modal default to display:none and
  reveal via :not([hidden]) -- two different (functionally equivalent)
  patterns, so left alone rather than forced into one.
- The color-mix(...) translucent backdrop background IS identical in value
  everywhere it appears, but not always on the same element:
  .tool-lightbox/.messageboard-modal/.event-calendar-modal set it directly
  on the modal shell itself, while .unsaved-changes-modal/.toc-modal use a
  separate absolutely-positioned backdrop child instead
  (.unsaved-changes-backdrop / .toc-modal-backdrop). Grouped below exactly
  as each file already uses it -- adding the background to the modal shells
  that use a backdrop child too would double up the translucent layer and
  change how dark the backdrop actually renders. */
.unsaved-changes-modal,
.toc-modal,
.tool-lightbox,
.messageboard-modal,
.event-calendar-modal {
  position: fixed;
  inset: 0;
}

.unsaved-changes-backdrop,
.toc-modal-backdrop,
.tool-lightbox,
.messageboard-modal,
.event-calendar-modal {
  background: color-mix(in srgb, var(--color-text) 88%, transparent);
}

/* body-scroll lock while open -- .unsaved-changes-modal has no equivalent
body.*-open rule in the original file (it's a short, always-in-viewport
confirm dialog, not something that needs to block page scroll), so it's
left out of this group rather than invented here. */
body.toc-modal-open,
body.tool-lightbox-open,
body.messageboard-modal-open,
body.event-calendar-modal-open {
  overflow: hidden;
}