/* Round 3 audit fix (moderate): shared styling for public/shared/modal.js
   (window.stModal's themed <dialog>/toast), extracted out of base.css and
   editor.css - both previously hand-duplicated this ~120-line block
   byte-for-byte (base.css:2259-2380, editor.css:3039-3148 before this
   file existed), since editor.css deliberately never loads base.css (see
   its own file header) and modal.js appends its <dialog>/toast as a
   sibling of .editor2/.studio-home, outside either page family's own
   token scope. Every custom property below therefore needs its own
   literal fallback (never inherits from --st-* wherever it's loaded), so
   this file is safe to <link> from EITHER page family without adjustment -
   the fallback values are base.css's own dark-theme tokens, which match
   both themes' actual color values today. */
.st-modal {
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--st-text, #e8edf2);
  width: min(420px, 92vw);
  max-width: 92vw;
}
.st-modal::backdrop { background: rgba(4, 6, 8, 0.62); }
.st-modal-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--st-panel, #14181d);
  border: 2px solid var(--st-line, #232a33);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6);
}
.st-modal-title {
  margin: 0;
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--st-text, #e8edf2);
}
.st-modal-title[hidden] { display: none; }
.st-modal-message {
  margin: 0;
  color: var(--st-text-dim, #8b96a3);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.st-modal-input {
  background: var(--st-stage, #0a0d10);
  border: 1px solid var(--st-line, #232a33);
  color: var(--st-text, #e8edf2);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.st-modal-input:focus { outline: none; border-color: var(--st-accent, #ff5c39); }
.st-modal-input[hidden] { display: none; }
.st-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.st-modal-cancel[hidden] { display: none; }
@keyframes st-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes st-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.st-modal[open] { animation: st-modal-in 0.16s ease-out; }
.st-modal[open]::backdrop { animation: st-modal-backdrop-in 0.16s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .st-modal[open], .st-modal[open]::backdrop { animation: none; }
}
/* Non-blocking toast (window.stModal.toast) - "Layer removed - Undo" and
   similar routine-action feedback, where a blocking confirm/alert dialog
   would be overkill for something the user does dozens of times a session. */
.st-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--st-panel, #14181d);
  border: 2px solid var(--st-line, #232a33);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6);
  animation: st-modal-in 0.16s ease-out;
}
.st-toast[hidden] { display: none; }
.st-toast-message {
  color: var(--st-text, #e8edf2);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
}
.st-toast-action {
  background: none;
  border: none;
  color: var(--st-accent, #ff5c39);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.st-toast-action[hidden] { display: none; }
.st-toast-action:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .st-toast { animation: none; }
}