/* The small modal windows (ui/confirmDialog.js, ui/inputDialog.js): compact, in the colours of the theme like the game windows (the Esprit theme restyles them through the same variables). */
.panel.confirm { width: min(280px, 92vw); padding: 0 0 8px; font-size: var(--fs-body); color: var(--gf-ink); background: var(--gf-paper); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--gf-frame), 0 0 0 2px var(--gf-frame-hi), 0 8px 22px rgba(0, 0, 0, 0.45); }
.panel.confirm .modal-head { margin: 0 0 6px; padding: 3px 4px 3px 10px; border-radius: 0; background: var(--gf-plate-dark); box-shadow: none; }
.panel.confirm .modal-head h3 { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--gf-title); text-shadow: none; }
.panel.confirm .modal-head .btn { min-height: 0; padding: 0 7px; font-size: var(--fs-small); line-height: 18px; border-radius: 4px; }
.panel.confirm .confirm-text { margin: 2px 10px 6px; line-height: 1.35; }
.panel.confirm .confirm-btns { margin: 8px 10px 0; }
.panel.confirm .confirm-btns .btn { padding: 2px 12px; font-size: var(--fs-body); }
.panel.confirm .in-row, .panel.confirm .in-count { margin: 0 10px; }
.panel.confirm .in-count { margin-top: 2px; }
.in-row { display: flex; align-items: center; gap: 6px; }
.in-field { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; font-size: calc(12.5px * var(--ui-text)); padding: 3px 6px; resize: none; color: var(--gf-ink); background: #fff; border: 1px solid var(--gf-tile-edge); border-radius: 3px; }
.in-field:focus { outline: 1px solid var(--gf-frame-hi); }