/* Copyright Ayers Electronics Inc. All rights reserved. */
/* shared modal dialog chrome. */

/* ---- shared modal-dialog chrome: the cell-action dialog, MENU, Settings, Report ----
   One idiom, reused rather than four near-identical panels: a centered card over the same scrim
   the audio picker and X-Ray use, the white focus ring, real buttons stacked in one column. */
.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 17;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}
/* #nav and the Report an issue modal are top-level siblings of the guide/on-demand/settings .layer
   surface (z-index 20, MENU is reachable from it), not nested inside it - .modal-overlay's z:17
   is only high enough for #cellActions, nested inside #guide's own local stacking context. These
   two need to clear the .layer surface's z-index directly since they compete in the same (root)
   stacking context; the report opens over the Settings page, which lives in that surface. */
#nav,
#settingsReport {
  z-index: 35;
}
.dialog-card {
  position: relative;
  width: 380px;
  max-width: 90vw;
  max-height: 82vh;
  overflow: auto;
  text-align: center;
}
/* Over the scrim the card is its own panel, so the page behind never reads between its rows. */
.modal-overlay > .dialog-card {
  padding: 20px 24px;
  box-sizing: border-box;
  border-radius: var(--radius-card);
  background: var(--elevated);
}
/* Inside a fly-up the list fills the panel, which sizes itself to the viewport and is the one
   scroller: the card neither clips nor scrolls. */
.flyup .dialog-card {
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.dialog-title {
  font-size: var(--type-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 4px;
}
.dialog-meta {
  font-size: var(--type-label);
  color: var(--muted);
  margin-bottom: 14px;
}
.dialog-items {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}
.dialog-items > * + * {
  margin-top: 8px;
}
.dialog-items button {
  text-align: left;
}
.dialog-items button.current {
  color: var(--muted);
}
.dialog-hint {
  font-size: var(--type-micro);
  color: var(--muted);
  margin-top: 14px;
}