/* Dialogs, toasts and bands (the literary page, 2026-10-26): the end dialog, the skip dialog, the
   warnings, Reconnecting and Resume (the way in's wizard is way.css's). A dialog is a sky page with
   one faint outline and 4px corners, in Alegreya, over the page darkened; nothing in one moves
   (no entrance, no backdrop blur). The ochre bands keep their ochre. */

/* ---------- Dialogs ---------- */
dialog {
  padding: 0; border: 1px solid var(--faint); border-radius: var(--r); color: var(--ink); background: var(--sky);
  font-family: var(--font); box-shadow: none;
}
/* The sky at 80% (a literal: a backdrop inherits no custom property). */
dialog::backdrop { background: #0b1126cc; }
dialog:focus { outline: none; }

/* The end dialog: a small sky page, its question and two answers. */
#end-dialog { width: min(440px, calc(100% - 32px)); padding: 32px; }
#end-dialog p { margin: 0; font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 32px); line-height: 1.2; }
#end-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
#end-dialog .actions button { min-height: 48px; padding: 0 20px; }

/* Skip mode's modal (`?skip=`, 2026-10-11): the end dialog's panel, over a lighter backdrop so
   the scene drawn behind it reads. */
#skip-dialog { width: min(480px, calc(100% - 32px)); padding: 32px; }
#skip-dialog::backdrop { background: #0b112680; }
#skip-dialog #skip-title { margin: 0; font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 32px); line-height: 1.2; }
#skip-dialog .note { margin: 14px 0 0; color: var(--soft); }
#skip-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 28px; }
#skip-dialog .actions button { min-height: 48px; padding: 0 20px; }

/* A phone: the dialogs' padding tightens. */
@media (max-width: 680px) {
  #end-dialog, #skip-dialog { padding: 26px 22px; }
}

/* ---------- Toasts ---------- */
/* The warnings (mic, voice): centred over the map page under End Crossing, never over the text
   page (the literary page, 2026-10-26; over the whole map before). */
.toasts {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: 72px;
  width: min(480px, calc(100% - 32px)); display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
@media (max-width: 899px) { .toasts { top: 52px; } }
/* A small sky page with the one faint outline, solid: it floats over the map. */
.toast {
  margin: 0; max-width: 34em; padding: 10px 14px; border: 1px solid var(--faint); border-radius: var(--r);
  background: var(--sky); color: var(--ink); font-size: 18px; line-height: 1.4;
}
/* The way in's wizard says its own trouble on its page (2026-10-10): under a modal the toasts sit
   dimmed and unreadable, so they wait for play. */
body:has(#wizard[open]) .toasts { display: none; }

/* ---------- Banners ---------- */
/* Reconnecting: the ochre band along the viewport's top, above everything, a modal's backdrop
   included: a manual popover, in the top layer, raised again after a dialog opens (app.ts's
   `showReconnecting`). Its `display` is left to the popover's own rules. */
#reconnecting {
  position: fixed; inset: 0 0 auto; z-index: 20; width: auto; height: auto; margin: 0; overflow: visible;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border: 0; text-align: center;
  background: var(--here); color: var(--y-ink); font-family: var(--font); font-weight: 500; font-size: 17px;
}
#reconnecting::backdrop { background: none; }
/* Tap to Resume Sound: ochre, centred at the text page's foot over the writing line, clear of Send
   (centred by its margins, since a pressed button's transform would undo a translate), ringed in
   the dark ink. */
#resume {
  position: fixed; z-index: 10; left: 0; right: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  width: fit-content; max-width: calc(100% - 32px); min-height: 56px; margin: 0 auto; padding: 0 28px; font-size: 18px; font-weight: 500;
  background: var(--here); color: var(--y-ink); box-shadow: 0 0 0 2px var(--y-ink);
}
@media (max-width: 899px) { #resume { right: 0; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }