/* Toasts (v1.18): flat Relay console chips, bottom left, in the top layer so they sit above open dialogs.
   Dark teal with parchment text in both modes (the header's own colours, which already pass contrast), a 4 px bar for the kind, 6 px radius, no blur.
   Motion only inside prefers-reduced-motion: no-preference (translate and opacity on the toast, 180 ms, the module easing). */
.toast-region { position: fixed; inset: auto auto 52px 16px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; width: min(380px, calc(100vw - 32px)); max-width: none; height: auto; display: none; flex-direction: column; gap: 8px; pointer-events: none; z-index: 60; }
.toast-region:popover-open, .toast-region[style*="display: block"] { display: flex !important; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 6px 6px 14px; background: #202D2C; color: #EDE4CB; border: 1px solid rgb(237 228 203 / .34); border-left: 4px solid var(--tk, #AFC48B); border-radius: 6px; box-shadow: none; font: 600 13.5px/1.35 var(--font-display, system-ui, sans-serif); }
body[data-mode=dark] .toast { background: #0E1514; }
.toast[data-kind=ok] { --tk: #AFC48B; } .toast[data-kind=info] { --tk: #6BB6B0; } .toast[data-kind=warn] { --tk: #E8BB56; } .toast[data-kind=error] { --tk: #E8896A; }
.toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast button { min-height: 36px; min-width: 36px; padding: 0 12px; background: transparent; color: #EDE4CB; border: 1px solid rgb(237 228 203 / .34); border-radius: 5px; font: 700 12.5px/1 var(--font-display, system-ui, sans-serif); cursor: pointer; }
.toast button:hover { background: rgb(237 228 203 / .12); border-color: #EDE4CB; }
.toast button:focus-visible { outline: 2px solid #E8BB56; outline-offset: 2px; }
.toast .toast-act { background: #E8BB56; color: #202D2C; border-color: #B58B1F; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.toast .toast-act:hover { background: #F2C968; }
.toast .toast-x { padding: 0; font-size: 20px; line-height: 1; border-color: transparent; }
@media (max-width: 560px) { .toast-region { inset: auto 12px 12px 12px; width: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in var(--m, 180ms) var(--m-ease, cubic-bezier(.2, .7, .2, 1)) both; }
  @keyframes toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
}
body.calm .toast { animation: none !important; }
@media print { .toast-region { display: none !important; } }

/* What Undo or Redo just changed: the desks that differ get a brass outline for 1.5 s (static, so it is also the reduced-motion version); the pulse is extra and only where motion is allowed. */
.desk.changed { outline: 3px solid #E8BB56; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .desk.changed { animation: desk-changed 1.5s var(--m-ease, cubic-bezier(.2, .7, .2, 1)) both; }
  @keyframes desk-changed { 0% { outline-color: rgb(232 187 86 / 0); outline-offset: 10px; } 18% { outline-color: #E8BB56; outline-offset: 3px; } 80% { outline-color: #E8BB56; } 100% { outline-color: rgb(232 187 86 / 0); } }
}
body.calm .desk.changed { animation: none !important; }