/* Lock and Lay — the confirm window (#1102): the one box every "are you sure?" in the game uses (dialog() in ui.js and
   mobile.js). Drew, of "Wholesale 48 now?": "this needs to look way better". It speaks the cutting screen's and the
   top bar's language now: a coloured band and a round badge say what kind of question it is (green to go on, red for
   something final), the sums sit in a sunk list, and the buttons are slabs you press: quiet to back out, green to go
   on, red to do the final thing. Loaded after the other sheets on the computer and before mobile.css on the phone
   (where the box is a sheet from the bottom: only the inside is styled there). */
.dialog { --dg1: #58ad6f; --dg2: #3f9257; --dge: #2a6b3d; --dgt: #fff; position: relative; gap: 14px; }
.dialog.danger { --dg1: #f0624c; --dg2: #d8452f; --dge: #8f2617; }
body:not(.mobile) #modalBox2:has(> .dialog) { padding: 0; overflow: hidden auto; /* scrolls when taller than the screen (#1190): hidden cut off the Gem checkout's card form */ border: 1px solid var(--rule-2); border-radius: 18px; background: var(--paper); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 4px 0 rgba(0, 0, 0, .3); animation: dlgIn .24s cubic-bezier(.2, .9, .3, 1.15) both; }
body:not(.mobile) #modalBox2 > .dialog { padding: 24px 24px 20px; }
body:not(.mobile) #modalBox2 > .dialog::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--dg2), color-mix(in srgb, var(--dg1) 55%, #fff) 55%, var(--dg2)); }
@keyframes dlgIn { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
/* the head: a round badge and the title */
.dialog .dlg-head { display: flex; align-items: center; gap: 14px; }
.dialog .dlg-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #8bdb9f, #3d9456); color: #0a3317; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .4); }
.dialog .dlg-ico.danger { background: linear-gradient(180deg, #ffa08c, #d8452f); color: #4a0d04; border: 0; }
.dialog .dlg-ico svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .dialog .dlg-ico svg .f { fill: currentColor; stroke: none; }
.dialog .dlg-head h2 { margin: 0; font-size: 23px; line-height: 1.15; }
.dialog .dlg-body { font-size: 15px; line-height: 1.5; }
.dialog .dlg-body b { font-family: var(--sans); font-weight: 700; }
/* the sums: a sunk list */
.dialog .dlg-sum { margin: 2px 0 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14); overflow: hidden; }
.dialog .dlg-row { padding: 11px 14px; border-bottom: 0; } .dialog .dlg-row + .dlg-row { border-top: 1px solid var(--rule); }
.dialog .dlg-row b { font: 700 16px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.dialog .dlg-row.muted b { font: 400 12.5px/1.2 var(--sans); color: var(--ink-3); }
.dialog .dlg-note { font-size: 13px; color: var(--ink-2); }
/* the buttons: slabs. Quiet to back out; the one that goes on takes the window's colour */
#modalBox2 .dialog > .actions { margin-top: 6px !important; padding-top: 16px; border-top: 1px solid var(--rule); gap: 10px; }
#modalBox2 .dialog > .actions button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 11px; background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); color: var(--ink); font: 700 14.5px/1 var(--sans); letter-spacing: .01em; box-shadow: 0 4px 0 color-mix(in srgb, var(--paper-3) 55%, #000), inset 0 1px 0 rgba(255, 255, 255, .12); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
#modalBox2 .dialog > .actions button.primary { background: linear-gradient(180deg, #58ad6f, #3f9257); color: #fff; box-shadow: 0 4px 0 #2a6b3d, inset 0 1px 0 rgba(255, 255, 255, .25); }
#modalBox2 .dialog > .actions button.danger { background: linear-gradient(180deg, #f0624c, #d8452f); color: #fff; box-shadow: 0 4px 0 #8f2617, inset 0 1px 0 rgba(255, 255, 255, .25); }
:root #modalBox2 .dialog > .actions button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
:root #modalBox2 .dialog > .actions button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #58ad6f, #3f9257); color: #fff; }
:root #modalBox2 .dialog > .actions button.danger:hover:not(:disabled) { background: linear-gradient(180deg, #f0624c, #d8452f); color: #fff; }
:root #modalBox2 .dialog > .actions button:not(.primary):not(.danger):hover:not(:disabled) { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); color: var(--ink); }
#modalBox2 .dialog > .actions button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); filter: none; }
#modalBox2 .dialog > .actions button:disabled { opacity: .5; cursor: default; filter: saturate(.6); }
#modalBox2 .dialog > .actions button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
body.mobile #modalBox2 .dialog > .actions button { min-height: 46px; flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) { body:not(.mobile) #modalBox2:has(> .dialog) { animation: none; } #modalBox2 .dialog > .actions button { transition: none; } }