/* Shared feedback parts: toast, success dialog, spinner. Used by the server pages (pn_page.html) and the player (woodshed.html).
   Only colour variables both use: --bg --panel --line --text --dim --accent --mute, and --ok or --good for green. */
#toasts{position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px;
        padding:0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events:none}
#toasts:empty{display:none}
.toast{pointer-events:auto; box-sizing:border-box; width:100%; max-width:560px; min-height:48px; display:flex; align-items:center; gap:12px;
       padding:10px 12px 10px 14px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-left:5px solid var(--ok, var(--good, #7FC48A));
       border-radius:10px; box-shadow:0 10px 30px -8px rgba(0,0,0,.7); font:600 15px/1.35 system-ui, sans-serif; animation:toast-in .2s ease-out}
.toast.err{border-left-color:var(--mute)}
.toast .t-msg{flex:1; min-width:0; overflow-wrap:anywhere}
.toast .t-btn{flex:none; width:auto; min-height:44px; margin:0; padding:0 14px; font:700 14px/1 system-ui, sans-serif; color:var(--text); background:transparent;
              border:1px solid var(--line); border-radius:8px; cursor:pointer}
.toast .t-btn.go{background:var(--accent); border-color:var(--accent); color:#1a1206}
.toast .t-x{padding:0 12px}
/* the server draws a toast with no script at all: it also goes away by itself after 4 s (errors never do) */
.toast.auto{animation:toast-in .2s ease-out, toast-out .3s ease-in 4s forwards}
@keyframes toast-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes toast-out{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .toast{animation:none} .toast.auto{animation:toast-out 0s 4s forwards} }

dialog.success-dlg{box-sizing:border-box; width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; padding:26px 20px 20px; text-align:center;
                   color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px -10px rgba(0,0,0,.8)}
dialog.success-dlg::backdrop{background:rgba(0,0,0,.65)}
/* with no script the dialog is just open (not modal): centre it and dim the page behind it */
dialog.success-dlg[open]:not(:modal){position:fixed; inset:0; margin:auto; height:fit-content; z-index:95; box-shadow:0 0 0 100vmax rgba(0,0,0,.65)}
.success-dlg .check{display:grid; place-items:center; width:72px; height:72px; margin:0 auto 14px; border-radius:50%; background:var(--ok, var(--good, #7FC48A)); color:#0d1a0f}
.success-dlg .check svg{width:40px; height:40px}
.success-dlg h2{margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--text)}
.success-dlg p{margin:0 0 14px; font-size:16px; line-height:1.45; color:var(--dim)}
.success-dlg ul.details{margin:0 0 16px; padding:0; list-style:none; text-align:left; font-size:15px; color:var(--text)}
.success-dlg ul.details li{padding:9px 0; border-top:1px solid var(--line); overflow-wrap:anywhere}
.success-dlg .addr{margin:0 0 14px; padding:12px; font:700 17px/1.3 system-ui, sans-serif; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; overflow-wrap:anywhere; user-select:all}
.success-dlg .acts{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.success-dlg .dlg-btn{box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:0; padding:0 16px; font:700 17px/1 system-ui, sans-serif;
                      color:#1a1206; background:var(--accent); border:1px solid var(--accent); border-radius:10px; text-decoration:none; cursor:pointer}
.success-dlg .dlg-btn.sec{color:var(--text); background:transparent; border-color:var(--line)}
.success-dlg [hidden]{display:none}
.mt-spin{display:inline-block; width:22px; height:22px; flex:none; border-radius:50%; border:3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:mt-spin .8s linear infinite}
@keyframes mt-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .mt-spin{animation-duration:2.4s} }

.mt-working{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
            color:var(--text); background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(4px); font:600 18px/1.35 system-ui, sans-serif}
.mt-working[hidden]{display:none}
.mt-working .sub{font-weight:400; font-size:15px; color:var(--dim)}
.mt-spin.big{width:56px; height:56px; border-width:6px}

/* inline field errors: the message sits under its field; the field gets a red border */
.field-err{margin:6px 0 0; color:var(--mute, #E1685C); font-size:14px; line-height:1.4}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--mute, #E1685C); box-shadow:0 0 0 1px var(--mute, #E1685C)}