/* ---- тосты + модалки (вместо alert/confirm/prompt) ---- */
/* тосты — над окнами (#modalWrap 210): ошибка, случившаяся при открытом окне, не прячется под затемнением */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 220; display: flex;
  flex-direction: column; gap: 8px; max-width: 360px; }
/* телефон: над нижней панелью разделов и во всю ширину (16px от краёв) */
@media (max-width: 820px) {
  #toasts { left: 16px; right: 16px; max-width: none; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
.toast { background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--text);
  box-shadow: var(--shadow); animation: toastIn .22s ease; display: flex; gap: 9px; align-items: flex-start; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
.toast .tx { flex: 1; line-height: 1.4; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
#modalWrap { position: fixed; inset: 0; z-index: 210; display: none; align-items: center;
  justify-content: center; background: var(--scrim); backdrop-filter: blur(2px); padding: 20px; }
#modalWrap.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; max-width: 420px; width: 100%; box-shadow: var(--shadow); }
.modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.modal .mmsg { color: var(--text); font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.modal input { margin-top: 12px; }
.modal .mact { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal.wide { max-width: 580px; }
.modal label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
.modal textarea, .modal select { width: 100%; }
.modal .mrow { display: flex; gap: 10px; }
.modal .mrow > div { flex: 1; }

/* ---- несохранённые правки (unsaved.js): полоска внизу редактора, вопрос при уходе, черновик ---- */
/* на компьютере — по центру колонки редактора (--us-cx/--us-max ставит unsavedPlace), над панелью выделенных напоминаний */
.us-bar { position: fixed; z-index: 60; bottom: 18px; left: var(--us-cx, calc(50% + 116px)); transform: translateX(-50%);
  width: max-content; max-width: min(var(--us-max, 640px), calc(100vw - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--glass-strong); box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border-2));
  animation: usIn .18s cubic-bezier(.2, .8, .3, 1) backwards; }
.us-bar[hidden] { display: none; }
.us-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.us-t { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.us-acts { display: flex; gap: 6px; flex: none; margin-left: auto; }
.us-acts button { display: inline-flex; align-items: center; padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.us-acts .us-undo { background: transparent; border-color: transparent; color: var(--text-dim); }
.us-acts .us-undo:hover { color: var(--text); background: var(--panel-3); border-color: transparent; }
.us-kbd { margin-left: 8px; padding: 1px 6px; border-radius: 6px; font: 600 11px "IBM Plex Mono", ui-monospace, monospace;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent); color: inherit; }
.us-bar.busy button { opacity: .6; cursor: progress; }
.us-bar.ok { border-color: color-mix(in srgb, var(--pos) 45%, var(--border-2)); }
.us-bar.ok .us-dot { background: var(--pos); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pos) 18%, transparent); }
.us-bar.ok .us-t { color: var(--pos-text); }
.us-bar.ok .us-acts { display: none; }
/* место под полоской: низ формы и тосты не прячутся */
body.us-on #content { padding-bottom: 84px; }
body.us-on #toasts { bottom: 84px; }
body.us-on:has(.dt-bulk:not([hidden])) .us-bar { bottom: calc(var(--dt-bulk-h, 50px) + 28px); }
body.us-on:has(.dt-bulk:not([hidden])) #toasts { bottom: calc(var(--dt-bulk-h, 50px) + 94px); }
@keyframes usIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes usInM { from { opacity: 0; transform: translateY(10px); } }

/* «Сохранить изменения?» */
.modal.us-ask-box .mact { flex-wrap: wrap; }

/* «Есть несохранённый черновик от 14:32» — над формой */
.us-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px 12px 10px 14px;
  border-radius: 12px; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.us-draft span { flex: 1 1 200px; min-width: 0; font-weight: 600; }
.us-draft button { padding: 6px 12px; font-size: 13px; }
.us-draft .us-del { background: transparent; border-color: transparent; color: var(--text-dim); }
.us-draft .us-del:hover { color: var(--text); background: var(--panel-3); border-color: transparent; }

@media (hover: none), (pointer: coarse) {
  .us-kbd { display: none; }
  .us-acts button, .us-draft button { min-height: 40px; }
}
/* телефон: на всю ширину над нижней панелью разделов; панель выделенных напоминаний — ещё ниже */
@media (max-width: 820px) {
  .us-bar { left: 12px; right: 12px; transform: none; width: auto; max-width: none; gap: 8px; padding: 8px 8px 8px 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)); animation-name: usInM; }
  .us-t { font-size: 13px; }
  .us-acts button { padding: 7px 12px; }
  .us-kbd { display: none; }
  body.us-on #content { padding-bottom: calc(76px + 64px + env(safe-area-inset-bottom, 0px)); }
  body.us-on #toasts { bottom: calc(74px + 64px + env(safe-area-inset-bottom, 0px)); }
  body.us-on:has(.dt-bulk:not([hidden])) .us-bar { bottom: calc(74px + var(--dt-bulk-h, 56px) + 8px + env(safe-area-inset-bottom, 0px)); }
  body.us-on:has(.dt-bulk:not([hidden])) #toasts { bottom: calc(74px + var(--dt-bulk-h, 56px) + 72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .modal.us-ask-box .mact { flex-direction: column-reverse; align-items: stretch; }
  .modal.us-ask-box .mact button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .us-bar { animation: none; } }