/* v110-messages.css — night build Oct 7–8 2026 (phase 1). Tokens only.
   The system messages (plan D1–D3): the message stack (ui/overlays.js syncToasts), the sheet frame of ui/modals.js and its confirm
   (ui/feedback.js confirmAction), the busy button (busy) and the field error (fieldError). Motion: 120–200 ms, ease-out (--ease), no bounce;
   nothing moves under reduced motion (the system setting or My account › Reduce motion). */

/* ---------- the message stack: bottom centre, newest on top (UX1-12), at most 3 ---------- */
#dp-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:800;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
body:has(.ask) #dp-toasts{bottom:156px}   /* on Ask the composer owns the bottom edge (as the old toast did) */
#dp-toasts .toast-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px}   /* night fix (Oct 8): ui/overlays.js prepends — the newest is drawn first, on top */
/* night fix (Oct 8, UX1-12): an open sheet or dialog owns the bottom edge (its buttons) — the stack moves to the top while it is open */
body:has(#overlays > .rs-layer,.hs-sheet,.stg-ov,.rp-sheet,.cw-scrim,.dg-scrim) #dp-toasts{top:16px;bottom:auto}
#dp-toasts .toast{position:relative;left:auto;bottom:auto;transform:none;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:min(440px,calc(100vw - 32px));max-width:none;min-height:44px;margin:0;padding:10px 8px 10px 14px;border-radius:var(--r-12);background:var(--surface-2);color:var(--text-1);box-shadow:var(--sh-high),inset 0 0 0 1px var(--line-strong);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-regular);z-index:auto}
#dp-toasts .toast-ic{flex:none;display:grid;place-items:center;height:20px;margin-top:2px}
#dp-toasts .is-success .toast-ic{color:var(--pos-ink)}
#dp-toasts .is-info .toast-ic{color:var(--info-ink)}
#dp-toasts .is-warning .toast-ic{color:var(--warn-ink)}
#dp-toasts .is-error .toast-ic{color:var(--neg-ink)}
#dp-toasts .toast-body{flex:1;min-width:0;padding:2px 0}
#dp-toasts .toast-t{margin:0;font-weight:var(--w-medium);text-wrap:pretty;overflow-wrap:anywhere}
#dp-toasts .toast-fix{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2);text-wrap:pretty}
#dp-toasts .toast-acts{flex:none;display:flex;align-items:center;gap:2px;margin-left:2px}
#dp-toasts .toast-act{margin:0;height:var(--h-sm);padding:0 10px;border-radius:var(--r-ctl);font:inherit;font-size:var(--t-body);font-weight:var(--w-semibold);color:var(--accent-text);background:transparent;white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out)}
#dp-toasts .toast-act:hover{background:var(--hover)}
#dp-toasts .toast-x{flex:none;width:var(--h-sm);height:var(--h-sm);display:grid;place-items:center;border-radius:var(--r-ctl);color:var(--text-3);background:transparent;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
#dp-toasts .toast-x:hover{background:var(--hover);color:var(--text-1)}
#dp-toasts .toast-acts,#dp-toasts .toast-x{margin-top:-4px;margin-bottom:-4px}   /* 28px buttons centred on the first 20px line */
#dp-toasts .toast.is-entering{animation:fb-toast-in var(--dur-2) var(--ease-out) both}
#dp-toasts .toast.is-leaving{animation:fb-toast-out var(--dur-1) var(--ease-in) both;pointer-events:none}
@keyframes fb-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fb-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.98)}}
@media (max-width:600px){
  #dp-toasts{left:16px;right:16px;bottom:16px;transform:none;width:auto;max-width:none}
  #dp-toasts .toast-list{align-items:stretch}
  /* a phone: the one action sits beside the ×, on the first line — a one-line toast stays one row (night fix, Oct 8: three toasts took 28% of the screen) */
  #dp-toasts .toast{width:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:8px;row-gap:2px}
  #dp-toasts .toast-ic{grid-column:1;grid-row:1}
  #dp-toasts .toast-body{grid-column:2;grid-row:1}
  #dp-toasts .toast-acts{grid-column:3;grid-row:1;margin:-4px 0}
  #dp-toasts .toast-x{grid-column:4;grid-row:1}
}
@media print{#dp-toasts{display:none}}

/* ---------- the sheet frame of ui/modals.js (it had lost its look) — it wears .rs-ov / .rs-sheet; here only what differs ---------- */
.fb-frame.is-static,.fb-frame.is-static > .rs-sheet{animation:none}   /* drawn again under an open sheet: no second entrance */
.fb-frame > .rs-sheet.lg{width:min(720px,100%)}
.fb-frame .btn.btn-primary{background:var(--brand);color:var(--brand-fg);border-color:transparent}
.fb-frame .btn.btn-primary:hover{background:var(--brand-h)}
.fb-frame .btn.btn-danger{background:var(--danger-fill);color:var(--on-fill);border-color:transparent}
.fb-frame .btn.btn-danger:hover{background:var(--danger-fill-h)}
.fb-frame .btn.btn-primary svg,.fb-frame .btn.btn-danger svg{color:inherit}
/* the bodies drawn in it (Changes › Create a finding, the plan move confirm) use the old form kit, which had lost its CSS too — inside the frame only */
.fb-frame .rs-bd{gap:12px}
.fb-frame .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fb-frame .field-l{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--text-2)}
.fb-frame .field-l.mb8{margin-bottom:6px}
.fb-frame .input,.fb-frame .select{width:100%;min-width:0;height:var(--h-in);padding:0 10px;border:1px solid var(--line-ctl);border-radius:var(--r-ctl);background:var(--surface-1);color:var(--text-1);font:inherit;font-size:var(--t-body)}
.fb-frame .input:hover,.fb-frame .select:hover{border-color:var(--line-ctl-h)}
.fb-frame .textarea{height:auto;min-height:88px;padding:8px 10px;line-height:var(--lh-body);resize:vertical}
.fb-frame .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fb-frame .ink2{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2)}
.fb-frame p.sm{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-3)}
.fb-frame .note,.fb-frame .answer{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-12);background:var(--fill-1);font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.fb-frame .note svg{flex:none;margin-top:2px}
.fb-frame .note-info svg{color:var(--info-ink)}
.fb-frame .note-warn svg{color:var(--warn-ink)}
.fb-frame .note-good svg{color:var(--pos-ink)}
.fb-frame .deliv{display:flex;flex-direction:column;gap:6px}
.fb-frame .deliv-i{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-2)}
.fb-frame .deliv-i > svg{flex:none;margin-top:3px;color:var(--pos-ink)}
@media (max-width:600px){.fb-frame .form-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- confirmAction(): question, consequence, the action named on its button ---------- */
.fb-ca .rs-hd{padding-bottom:4px}
.fb-ca .rs-hd h2{font-size:var(--t-t2);line-height:var(--lh-t2);letter-spacing:var(--ls-t2)}
.fb-ca-c{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2);text-wrap:pretty}
.fb-ca-d{display:block;margin-top:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--text-3)}
.fb-ca .rs-ft{border-top:0;padding-top:4px}
/* the shell's own confirm (Reset demo data) drew red words on its red fill (v89 fill + v91 colour) — its words are white, as the token says */
.hs-sh-f .btn.is-danger,.hs-sh-f .btn.is-danger svg{color:var(--on-fill)}
.btn.fb-danger{background:var(--danger-fill);color:var(--on-fill);border-color:transparent}
.btn.fb-danger:hover{background:var(--danger-fill-h)}
.btn.fb-danger svg{color:inherit}

/* ---------- busy(): working → a check that draws ---------- */
.btn.fb-busy{cursor:progress}
.fb-spin{flex:none;width:13px;height:13px;border-radius:var(--r-full);border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:fb-spin var(--dur-spin) linear infinite}
.fb-check{flex:none}
.fb-check path{stroke-dasharray:1;stroke-dashoffset:0}
.fb-check:not(.is-still) path{animation:fb-draw var(--dur-3) var(--ease-out) both}
.btn .fb-check{color:inherit;width:14px;height:14px}
@keyframes fb-spin{to{transform:rotate(1turn)}}
@keyframes fb-draw{from{stroke-dashoffset:-1}to{stroke-dashoffset:0}}   /* night fix (Oct 8, I4): drawn from the short arm's tip, as a hand writes a check */

/* ---------- fieldError(): the message under the field ---------- */
.fb-err{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--neg-ink);text-wrap:pretty}
.fb-err svg{flex:none;margin-top:2px}
[aria-invalid="true"].fb-invalid{border-color:var(--neg-ink);box-shadow:inset 0 0 0 1px var(--neg-ink)}

/* ---------- reduced motion: no movement, the end state at once ---------- */
@media (prefers-reduced-motion:reduce){
  #dp-toasts .toast.is-entering,#dp-toasts .toast.is-leaving,.fb-check:not(.is-still) path{animation:none}
  .fb-spin{animation:none;border-right-color:currentColor;opacity:.45}
}
.reduce-motion #dp-toasts .toast.is-entering,.reduce-motion #dp-toasts .toast.is-leaving,.reduce-motion .fb-check:not(.is-still) path{animation:none}
.reduce-motion .fb-spin{animation:none;border-right-color:currentColor;opacity:.45}