/**
 * @file dialog.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The look of every dialog on the site: one <dialog class="dlg"> with three parts.
 *   A header (.dlg-head) is the section slab at the dialog's size, holding the title and, when the
 *   dialog wants one, the X. The body (.dlg-body) is the only part that scrolls, and a headline
 *   inside it wears the page's own shapes from poster.css (.poster-section-title at the dialog's
 *   smaller size, .poster-label, .poster-row). A footer (.dlg-foot) holds the actions: the action
 *   link, and one loud slab.
 *   On a desktop the dialog floats in the middle in a 3px ink frame with a 12px sun shadow. On a
 *   phone (560px and narrower) it is a sheet at the bottom edge, as wide as the screen, growing with
 *   its content up to the full height; the header and footer stay put while the body scrolls, the
 *   footer clears the home indicator, and with interactive-widget=resizes-content in the viewport
 *   the on-screen keyboard shortens the sheet instead of covering the footer.
 *   Behaviour is public/js/dialog.js; the Preact component is components/Modal.js. The app catalog
 *   gets this file copied into its page at build time (scripts/build-app-catalog.ts).
 * @structure frame · header and X · body · footer and its actions · sizes · phone
 * @version-history
 *   v1.4.0 — 2026-09-24 — The frame, corner, shadow, title case and footer rule read the theme's shape
 *     values (theme.css --shape-*), today's values (a move).
 *   v1.3.0 — 2026-09-24 — The footer's actions are the library's action link, loud action and its
 *     danger tone (Jouni's decision "Dialog actions"); the rules that redrew the classic button
 *     classes here are gone.
 *   v1.2.0 — 2026-09-24 — Moved from css/dialog.css to css/components/ (it is a catalogued part now),
 *     with the confirm question's text from theme.css (UI consolidation, a move).
 *   v1.1.0 — 2026-09-13 — The footer's start holds more than one action in a row (the app catalog's
 *     source editor has two copy words there).
 *   v1.0.0 — 2026-09-13 — Initial (wish "Yksi dialogikomponentti kaikille dialogeille").
 */

/* The confirm question's text (ConfirmDialog in components/Modal.js), formerly in theme.css. */
.modal-confirm-message { color: var(--text-dim); margin: 0 0 1.25rem; line-height: 1.5; }

/* ── The frame ─────────────────────────────────────────────────────────────────────────────── */
dialog.dlg {
  box-sizing: border-box;
  width: min(var(--dlg-width, 560px), calc(100vw - 48px));
  max-width: none; min-width: 0;
  max-height: calc(100dvh - 48px);
  margin: auto; padding: 0;
  border: var(--shape-frame-heavy) solid var(--shape-frame-colour); border-radius: var(--shape-corner-dialog);
  background: var(--bg); color: var(--text);
  box-shadow: var(--shape-shadow-dialog);
  font-family: var(--font-body);
  overflow: hidden;
}
dialog.dlg[open] { display: flex; flex-direction: column; }
dialog.dlg::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── The header: the slab, the title, the X ────────────────────────────────────────────────── */
dialog.dlg .dlg-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 0; padding: .55rem .55rem .5rem 1rem;
  background: var(--text); color: var(--bg);
  border: 0; border-bottom: 6px solid var(--sun);
}
dialog.dlg .dlg-title {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; background: none; border: 0;
  font-family: var(--font-poster); font-weight: var(--font-poster-weight);
  font-size: var(--dlg-title-size, 1.4rem); line-height: var(--font-poster-leading);
  letter-spacing: var(--font-poster-tracking); text-transform: var(--shape-case-heading);
  color: inherit; overflow-wrap: anywhere;
}
/* The X: a 26px square framed in the header's own colour, inside a 44px press area. */
dialog.dlg .dlg-close {
  flex: none; position: relative; width: 44px; height: 44px; margin: -4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; cursor: pointer; opacity: 1;
}
dialog.dlg .dlg-close::before {
  content: ''; position: absolute; width: 26px; height: 26px; box-sizing: border-box;
  border: 2px solid currentColor;
}
dialog.dlg .dlg-close svg { position: relative; display: block; }
dialog.dlg .dlg-close:hover::before, dialog.dlg .dlg-close:focus-visible::before { background: var(--bg); }
dialog.dlg .dlg-close:hover, dialog.dlg .dlg-close:focus-visible { color: var(--text); outline: none; }
dialog.dlg .dlg-close:hover svg, dialog.dlg .dlg-close:focus-visible svg { color: var(--text); }
/* A dialog without a title keeps its X in the corner, over the body. */
dialog.dlg > .dlg-close { position: absolute; top: 8px; right: 8px; margin: 0; color: var(--text); z-index: 1; }
dialog.dlg > .dlg-close:hover::before, dialog.dlg > .dlg-close:focus-visible::before { background: var(--text); }
dialog.dlg > .dlg-close:hover svg, dialog.dlg > .dlg-close:focus-visible svg { color: var(--bg); }

/* ── The body: the only part that scrolls ─────────────────────────────────────────────────── */
dialog.dlg .dlg-body {
  flex: 1 1 auto; min-height: 0; margin: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4rem 1.5rem 1.5rem;
  /* A section headline inside a dialog is the page's slab, a size smaller. */
  --poster-section-size: 1.15rem;
}
dialog.dlg .dlg-body > :first-child { margin-top: 0; }
dialog.dlg .dlg-body > :last-child { margin-bottom: 0; }
dialog.dlg > .dlg-close + .dlg-body { padding-right: 3.5rem; }
dialog.dlg .dlg-body .poster-section-title { margin-bottom: 1rem; }
dialog.dlg .dlg-body .poster-section + .poster-section { margin-top: 2rem; }
dialog.dlg .dlg-body .poster-section { margin-top: 0; }
/* The question a confirm dialog asks is running text, in ink. */
dialog.dlg .modal-confirm-message { color: var(--text); margin: 0; font-size: var(--text-md); line-height: 1.55; }

/* ── The footer: the actions ───────────────────────────────────────────────────────────────── */
dialog.dlg .dlg-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .8rem 1.4rem; margin: 0; padding: .9rem 1.5rem 1rem;
  border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour); background: var(--bg);
  /* The site's body line (page-base.css), set here so the actions stand the same on a page whose
     body sets another one (the app catalog). */
  line-height: 1.6;
}
/* Something that belongs on the footer's other end (a side door like "Change password…"); two or
   more of them keep the footer's own spacing. */
dialog.dlg .dlg-foot .dlg-foot-start { margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
/* The actions are the library's own (Jouni's decision "Dialog actions", 2026-09-24): a way out or a
   side door is the action link (poster.css .poster-action), the dialog's one "do it" is the loud
   action (.poster-slab.poster-slab--control) and one that deletes is its danger tone
   (.poster-slab--danger). The footer gives them their place and nothing else: an action link keeps
   its own line under the words, and its press area is 44px high around them. */
dialog.dlg .dlg-foot .poster-action { position: relative; }
dialog.dlg .dlg-foot .poster-action::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* The focus a dialog opens with (Cancel, on a destructive question) is a coral outline, not a grey box. */
dialog.dlg .dlg-foot :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Sizes ─────────────────────────────────────────────────────────────────────────────────── */
dialog.dlg.dlg--sm { --dlg-width: 440px; }
dialog.dlg.dlg--md { --dlg-width: 560px; }
dialog.dlg.dlg--lg { --dlg-width: 840px; }
dialog.dlg.dlg--xl { --dlg-width: 1080px; }

/* ── Phone: a sheet at the bottom edge ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  dialog.dlg {
    width: 100vw; max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    margin: auto 0 0; border-width: 3px 0 0; box-shadow: 0 -6px 0 var(--sun);
    --dlg-title-size: 1.2rem;
  }
  dialog.dlg .dlg-head { padding: .45rem .35rem .4rem .8rem; }
  dialog.dlg .dlg-body { padding: 1.1rem 1rem 1.2rem; }
  dialog.dlg .dlg-foot { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); gap: .6rem 1.2rem; }
  /* The loud action takes the row, so it is the easy one to reach with a thumb. */
  dialog.dlg .dlg-foot .poster-slab { flex: 1 1 auto; }
}

/* The page behind: a modal dialog makes it inert, and the body's overscroll-behavior keeps a scroll
   in the dialog from running on into it. The SPA's window never scrolls (theme.css html { overflow:
   clip }); a page whose document scrolls locks it itself (the app catalog does, in its own sheet). */