/* Overlays: modals, side panels, toast, sticky unsaved-changes bar.
   Layers (tokens): panel scrim 40, modal 50, modal over a panel 60, toast 90. */

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px;
  background: var(--bg-overlay);
}
.modal-scrim.is-top { z-index: var(--z-modal-top); }
.modal {
  width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px 24px;
  border: 1px solid var(--border-default); border-radius: var(--r-xl); background: var(--bg-card);
  box-shadow: var(--shadow-modal);
}
.modal--420 { width: 420px; }
.modal--440 { width: 440px; }
.modal--460 { width: 460px; }
.modal--520 { width: 520px; }
.modal--620 { width: 620px; }
.modal__head { display: flex; align-items: center; gap: 12px; }
.modal__title { font-size: var(--fs-modal); font-weight: 600; }
.modal__head .icon-btn { margin-left: auto; }
.modal__desc { margin-top: 6px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.modal__body { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* ---------- Side panel ---------- */
.panel-scrim { position: fixed; inset: 0; z-index: var(--z-panel); background: var(--bg-scrim); }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 600px; max-width: 100%; display: flex; flex-direction: column;
  border-left: 1px solid var(--border-default); background: var(--bg-panel); box-shadow: var(--shadow-panel);
}
.panel--440 { width: 440px; }
.panel--520 { width: 520px; }
.panel--600 { width: 600px; }
.panel__head {
  display: flex; align-items: center; gap: 12px; flex: none; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle);
}
.panel--440 .panel__head { gap: 10px; padding: 18px 20px; }
.panel__head > .icon-btn { margin-left: auto; }
.panel__title { font-size: var(--fs-h2); font-weight: 600; }
.panel__sub { color: var(--text-tertiary); font-size: var(--fs-small); }
.panel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 20px 24px 32px; }
.panel--440 .panel__body { gap: 12px; padding: 20px; }
.panel__foot { flex: none; padding: 14px 20px; border-top: 1px solid var(--border-subtle); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 48px); padding: 12px 16px;
  border: 1px solid var(--border-default); border-radius: var(--r-lg); background: var(--bg-hover);
  color: var(--text-primary); font-size: var(--fs-body); box-shadow: var(--shadow-dropdown);
}
.toast__icon { color: var(--accent); }
.toast--error .toast__icon { color: var(--danger); }

/* ---------- Unsaved changes bar (Settings) ---------- */
.unsaved {
  position: sticky; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--accent-line-35); border-radius: var(--r-lg); background: var(--bg-unsaved);
  box-shadow: var(--shadow-bar);
}
.unsaved__text { font-size: var(--fs-body); }
.unsaved .btn--ghost { margin-left: auto; padding: 0 12px; }