/*
  67-popups.css — v46.5 the shared pop-ups (design/shared Recovery, Confirm,
  Alerts, Log, Suggest, Deleted, Desktop). Sheets reuse 63's bottom sheet
  (.sh-sheet); a confirm or a notice is a centred card (.pp-card).
*/

#modal .pp-sheet button, #modal .pp-card button { font: inherit; }
.pp-sheet { gap: 12px; }
#modal .pp-body { margin: 0; font-size: 15px; line-height: 1.45; color: #3d2f1d; }
#modal .pp-note { margin: 0; font-size: 13px; line-height: 1.4; color: #5c4a30; }
#modal .pp-foot { margin: 0; font-size: 13px; line-height: 1.4; color: #5c4a30; }
.pp-count { font-size: 14px; color: #5c4a30; }
.pp-disc { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #e8dbb6; color: #845c0f; }
.pp-disc.is-danger { background: #f3d6cf; color: #a33a2a; }
.pp-disc.is-warn { background: #b4652a; color: #fbf7ec; }
.pp-disc.is-ok { background: #845c0f; color: #fbf7ec; }
.pp-watch-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-watch-text b { font-size: 15px; line-height: 1.3; color: #231a10; }
.pp-watch-text small { font-size: 13px; line-height: 1.35; color: #5c4a30; }

/* Buttons */
#modal button.pp-btn { flex: 1 1 0; min-height: 50px !important; padding: 0 14px; border-radius: 14px; border: 1px solid #b9a77f; background: #fbf7ec; box-shadow: none; color: #231a10; font-size: 16px; font-weight: 700; cursor: pointer; }
#modal button.pp-btn.is-primary { border-color: #c18a2a; background: #c18a2a; color: #1f1712; }
#modal button.pp-btn.is-danger { border-color: #d9a296; background: #fbf7ec; color: #a33a2a; }
#modal button.pp-btn.is-wide { width: 100%; flex: none; }
#modal button.pp-btn.is-small { flex: none; min-height: 44px !important; padding: 0 16px; font-size: 15px; }
.pp-actions { display: flex; gap: 10px; }
#modal button.pp-link { min-height: 36px !important; padding: 0 2px; border: 0; background: none; box-shadow: none; color: #845c0f; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* The card (Confirm, notices) */
.pp-card { display: flex; flex-direction: column; gap: 12px; color: #231a10; }
.pp-card .pp-disc { width: 48px; height: 48px; }
#modal .pp-card .pp-title { margin: 2px 0 0; font-size: 22px; font-weight: 700; color: #231a10; }
.pp-card .pp-actions { flex-direction: column; }
.pp-notice .pp-actions { flex-direction: row; }
#modal:has(.pp-card) .modal-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#modal:has(.pp-card) { padding: 20px; border-radius: 20px; background: #f4ecd8; }

/* Things to watch */
.pp-watches { display: flex; flex-direction: column; gap: 8px; }
.pp-watch { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; }
.pp-watch.is-danger { border-color: #e3b8ab; background: #f6e1db; }
#modal button.pp-watch-act { flex-shrink: 0; max-width: 84px; min-height: 44px !important; padding: 0 4px; border: 0; background: none; box-shadow: none; color: #845c0f; font-size: 14px; font-weight: 700; text-align: right; cursor: pointer; }
.pp-watch.is-danger .pp-watch-act { color: #8a2f20 !important; }

/* Lists (recovery, the log) */
.pp-list { overflow: hidden; border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; }
.pp-rec, .pp-log { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-top: 1px solid #ddd0ab; }
.pp-rec:first-child, .pp-log:first-child { border-top: 0; }
.pp-face { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: #d4b07a center top / cover; font-size: 13px; font-weight: 800; color: #231a10; }
.pp-undo { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1.5px solid #c18a2a; background: #fbf7ec; }
.pp-chips { display: flex; gap: 8px; }
#modal button.pp-chip { min-height: 40px !important; padding: 0 14px; border-radius: 999px; border: 1px solid #b9a77f; background: #fbf7ec; box-shadow: none; color: #231a10; font-size: 15px; font-weight: 600; cursor: pointer; }
#modal button.pp-chip.is-on { border-color: #845c0f; background: #845c0f; color: #fbf7ec; }

/* Suggestion box */
.pp-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #e8dbb6; }
#modal button.pp-seg { min-height: 44px !important; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: #5c4a30; font-size: 15px; font-weight: 600; cursor: pointer; }
#modal button.pp-seg.is-on { background: #fbf7ec; color: #231a10; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
#modal .pp-label { margin: 2px 0 -6px; font-size: 14px; font-weight: 700; color: #3d2f1d; }
#modal textarea.pp-input { width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; border: 1px solid #b9a77f; background: #fbf7ec; box-shadow: none; color: #231a10; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; resize: vertical; }
.pp-device { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #efe4c3; font-size: 13px; color: #5c4a30; }
.pp-device .cx-icon { flex-shrink: 0; color: #845c0f; }

@layer editor-pilot {
  @media (max-width: 699px) {
    .modal-backdrop.active:has(> #modal .pp-card) { align-items: center !important; padding: 16px !important; }
    #modal:has(.pp-card) { width: 100% !important; max-width: 420px !important; margin: auto !important; border-radius: 20px !important; }
  }
}

/* Desktop (design/shared/Desktop): a sheet is a centred dialog */
@media (min-width: 700px) {
  #modal:has(.pp-card) { max-width: 420px; }
  #modal:has(.pp-sheet) { max-width: 480px; }
}
#modal:has(.pp-card)::before { display: none !important; }

/* The toast: the parchment card (Alex's pick, board A of the toasts canvas) */
#toast.tst { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); transform: none; z-index: 90; display: none; align-items: center; gap: 12px; max-width: none; padding: 12px 6px 14px 12px; overflow: hidden; border-radius: 16px; border: 1px solid #ddd0ab; background: #f4ecd8; box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25); color: #231a10; text-align: left; pointer-events: auto; font-family: inherit; }
#toast.tst.active { display: flex; }
#toast.tst.is-warn { border-color: #d9b46a; background: #f6e8c8; }
#toast.tst.is-error { border-color: #e3b8ab; background: #f6e1db; }
.tst-disc { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: #e8dbb6; background-size: cover; background-position: top center; color: #845c0f; font-size: 17px; font-weight: 800; }
.tst-disc.is-face { color: #1f1712; }
#toast.is-saved .tst-disc { background: #e4ecd4; color: #2f6b3f; }
#toast.is-warn .tst-disc { background: #f3d9a4; color: #8a5a10; }
#toast.is-error .tst-disc { background: #efc9bf; color: #8a2f20; }
.tst-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tst-text b { font-size: 15px; font-weight: 700; line-height: 1.3; color: #231a10; }
.tst-text small { font-size: 13px; line-height: 1.35; color: #5c4a30; }
#toast.tst button.tst-act { flex-shrink: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #c18a2a; box-shadow: none; color: #1f1712; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; pointer-events: auto; }
#toast.tst.is-error button.tst-act { border: 1px solid #c98a7b; background: none; color: #8a2f20; }
#toast.tst button.tst-x { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 0; border-radius: 12px; background: none; box-shadow: none; color: #6e5b40; cursor: pointer; }
.tst-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #c18a2a; transform-origin: left; animation: tst-time linear forwards; }
#toast.is-error .tst-bar { background: #a33a2a; }
@keyframes tst-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .tst-bar { animation: none; transform: scaleX(.5); } }
/* Desktop (shared/Desktop): bottom-left, beside the sidebar */
@media (min-width: 900px) { #toast.tst { left: 344px; right: auto; bottom: 24px; width: 400px; } }

/* The sweep (IMPLEMENTATION "Every screen has a board"): the dialogs that
   predate their boards take the family look — a flat parchment head with a
   plain ✕, brass for the main action, outlined cream for the rest, outlined
   red for a delete, no teal. Codex editors keep their own (31, 50, 88). */
#modal:not(.codex-editor) { background: #f4ecd8; }
#modal:not(.codex-editor) .modal-head { background: #f4ecd8; border-bottom: 1px solid #ddd0ab; }
#modal:not(.codex-editor) .modal-head h2 { font-family: inherit; font-size: 19px; font-weight: 700; color: #231a10; }
#modal:not(.codex-editor) .modal-head .x:not(.ed-cancel) { border: 0; background: none; color: #6e5b40; }
#modal:not(.codex-editor) .modal-back { border-color: #ddd0ab; background: none; color: #845c0f; }
#modal:not(.codex-editor) .button { white-space: nowrap; }
#modal:not(.codex-editor) .button:not(.primary):not(.danger) { border: 1px solid #b9a77f; background: #fbf7ec; color: #231a10; }
#modal:not(.codex-editor) .button.danger { border: 1px solid #d9a296; background: #fbf7ec; color: #a33a2a; }
#modal:not(.codex-editor) .button.primary { border-color: #c18a2a; background: #c18a2a; color: #1f1712; }
#modal :focus-visible { outline-color: #845c0f; }
#modal.codex-editor .form-actions .button.secondary { border: 1px solid #b9a77f; background: #fbf7ec; color: #231a10; }