/* dialog.css — the modal <dialog class="dialog"> (js/shared/app.js opens it from any
 * [data-dialog] button; the player page holds the ban, unban and unban-pick dialogs). Loaded on
 * every page after base.css. */

/* dialogs (1.7.0, operator 09.10.2026: ban and unban "im Spieleroverview mit einem Popup"):
   <dialog class="dialog"> on the player page, opened as a modal by app.js from any
   [data-dialog] button. One dialog = one action; the surface and frame of a card with the
   bans edge, the one shadow of floating layers (with the hover panel), 560 px at most and
   never wider than the window minus the page gutter; the backdrop dims the page so the dialog
   is the only thing to act on. padding 0 on the dialog itself: a click that lands ON the
   dialog element (not in .dialog-body) is a click on the backdrop, and closes it.
   dialog:not([open]) is said explicitly for engines that do not know the element (they would
   render its content inline); with scripts off the dialog never opens — the buttons lead to
   /ban and /unban, the pages with the same forms. */
dialog:not([open]) { display: none; }
dialog.dialog {
  --k: var(--k-bans);
  width: calc(100vw - 32px); max-width: 560px; max-height: calc(100vh - 32px); overflow: auto;
  margin: auto; padding: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: var(--edge) solid var(--k); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
dialog.dialog::backdrop { background: rgba(0, 0, 0, .55); }
:root[data-theme="light"] dialog.dialog::backdrop { background: rgba(27, 32, 39, .35); }
.dialog-body { padding: var(--s4); }
.dialog-body h2 { margin-bottom: var(--s3); overflow-wrap: anywhere; }
.dialog-body .reason-form input[type=text] { flex-basis: 100%; margin: 0 0 var(--s2); }
.dialog-body p.dim { font-size: var(--fs-12); line-height: var(--lh-12); }