/* pb-messages.css: tokens + toast + banner + field error + confirm sheet + shared close button + shared modal panel.
   Dark mode follows html[data-pb-theme="dark"] (no prefers-color-scheme branch, like the plugins).
   Spec: PLANS/2026-10-26_MESSAGE_SYSTEM_SPEC.md sections 1 and 5. */

:root {
  /* kinds */
  --pbm-error: #a4262c;
  --pbm-error-on: #fff;
  --pbm-done-bg: #775973;
  --pbm-info-bg: #4a2f3d;
  --pbm-toast-text: #fff;
  --pbm-toast-border: transparent;
  --pbm-ink: #4a2f3d;
  --pbm-plum: #775973;
  --pbm-banner-done-bg: #f3edf3;  --pbm-banner-done-bd: #e0d0df;  --pbm-banner-done-tx: #4a2f3d;  --pbm-banner-done-ic: #775973;
  --pbm-banner-info-bg: #efe8ef;  --pbm-banner-info-bd: #dfd2df;  --pbm-banner-info-tx: #4a2f3d;  --pbm-banner-info-ic: #775973;
  --pbm-banner-head-bg: #fbf3dc;  --pbm-banner-head-bd: #e6cf8f;  --pbm-banner-head-tx: #6b4a00;  --pbm-banner-head-ic: #8a5a00;
  --pbm-banner-err-bg:  #f8eeee;  --pbm-banner-err-bd:  #e6c2c4;  --pbm-banner-err-tx:  #a4262c;  --pbm-banner-err-ic:  #a4262c;
  --pbm-field-error: #a4262c;
  /* shared modal background (Cam, 26 Oct 2026: yes to one background) */
  --pbm-modal-bg: #fff;
  --pbm-modal-border: transparent;
  --pbm-modal-radius: 18px;
  --pbm-modal-sheet-radius: 20px;
  --pbm-modal-shadow: 0 16px 48px rgba(0, 0, 0, .2);
  --pbm-scrim: rgba(25, 28, 32, .5);
  --pbm-scrim-blur: 3px;
  --pbm-modal-title: #4a2f3d;
  --pbm-modal-text: #2b2b2b;
  --pbm-modal-muted: #6e6570;
  --pbm-modal-line: #e0e0e0;
  /* shared close button, option C (Cam, 26 Oct 2026) */
  --pbm-close-size: 32px;
  --pbm-close-icon: 14px;
  --pbm-close-stroke: 1.5;
  --pbm-close-border: #d6cbd2;
  --pbm-close-color: #5d5560;
  --pbm-close-hover-border: #775973;
  --pbm-close-hover-bg: #f6f1f5;
  --pbm-close-focus: #775973;
  --pbm-close-hit: 6px;           /* ::after offset from the 30 px padding box: 6 + 1 border = 7 each side -> 44 x 44 tap target */
  /* layering */
  --pbm-z-toast: 2147483000;
  --pbm-z-modal: 2147482000;
}
html[data-pb-theme="dark"] {
  --pbm-toast-border: rgba(255, 255, 255, .18);
  --pbm-info-bg: #533c50;
  --pbm-banner-done-bg: #3c3642;  --pbm-banner-done-bd: #3c3642;  --pbm-banner-done-tx: #f4f1f4;  --pbm-banner-done-ic: #dcbcd8;
  --pbm-banner-info-bg: #3d3c45;  --pbm-banner-info-bd: #645b69;  --pbm-banner-info-tx: #f4f1f4;  --pbm-banner-info-ic: #dcbcd8;
  --pbm-banner-head-bg: #413c2d;  --pbm-banner-head-bd: #78612d;  --pbm-banner-head-tx: #f0cf7a;  --pbm-banner-head-ic: #e0a82e;
  --pbm-banner-err-bg:  #3f272d;  --pbm-banner-err-bd:  #64262c;  --pbm-banner-err-tx:  #d29296;  --pbm-banner-err-ic:  #d29296;
  --pbm-field-error: #d29296;
  --pbm-modal-bg: #23272d;
  --pbm-modal-border: #313840;
  --pbm-modal-shadow: none;
  --pbm-scrim: rgba(0, 0, 0, .55);
  --pbm-modal-title: #f4f1f4;
  --pbm-modal-text: #f4f1f4;
  --pbm-modal-muted: #b7b0b6;
  --pbm-modal-line: #3c444e;
  --pbm-close-border: #4a525c;
  --pbm-close-color: #cfc8cd;
  --pbm-close-hover-border: #dcbcd8;
  --pbm-close-hover-bg: rgba(220, 188, 216, .1);
  --pbm-close-focus: #dcbcd8;
}

/* ---------- shared close button (option C: Compact) ----------
   Markup: <button type="button" class="pbm-close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
   Looks 32 px; the ::after pseudo-element makes the tap target 44 x 44. */
.pbm-close {
  box-sizing: border-box; flex: 0 0 auto; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pbm-close-size); height: var(--pbm-close-size); min-width: 0; min-height: 0;
  margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--pbm-close-border); background: transparent; color: var(--pbm-close-color);
  font: inherit; line-height: 1; cursor: pointer; box-shadow: none;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.pbm-close::after { content: ""; position: absolute; inset: calc(-1px - var(--pbm-close-hit)); }
.pbm-close svg {
  display: block; width: var(--pbm-close-icon); height: var(--pbm-close-icon);
  fill: none; stroke: currentColor; stroke-width: var(--pbm-close-stroke); stroke-linecap: round; pointer-events: none;
}
.pbm-close:hover { border-color: var(--pbm-close-hover-border); background: var(--pbm-close-hover-bg); color: var(--pbm-close-color); }
.pbm-close:focus { outline: none; }
.pbm-close:focus-visible { outline: 2px solid var(--pbm-close-focus); outline-offset: 2px; }

/* ---------- shared modal panel + scrim ----------
   <div class="pbm-scrim"><div class="pbm-panel" role="dialog" aria-modal="true" aria-labelledby="..."> ... </div></div>
   Header row: <div class="pbm-panel__head"><div><h2 class="pbm-panel__title">..</h2><p class="pbm-panel__sub">..</p></div> [close button] </div> */
.pbm-scrim {
  position: fixed; inset: 0; z-index: var(--pbm-z-modal);
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: var(--pbm-scrim); -webkit-backdrop-filter: blur(var(--pbm-scrim-blur)); backdrop-filter: blur(var(--pbm-scrim-blur));
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pbm-panel {
  box-sizing: border-box; position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px; border-radius: var(--pbm-modal-radius);
  background: var(--pbm-modal-bg); border: 1px solid var(--pbm-modal-border); box-shadow: var(--pbm-modal-shadow);
  color: var(--pbm-modal-text); font-size: 14px; line-height: 1.45;
}
.pbm-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pbm-panel__title { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font: 600 19px/1.25 "Fraunces", Georgia, serif; color: var(--pbm-modal-title); }
.pbm-panel__sub { margin: 3px 0 0; font-size: 13px; color: var(--pbm-modal-muted); }
.pbm-panel__body { margin: 0; font-size: 13.5px; color: var(--pbm-modal-muted); }
.pbm-panel__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 600px) {
  .pbm-scrim--sheet { align-items: flex-end; padding: 0; }
  .pbm-scrim--sheet .pbm-panel {
    max-width: none; border-radius: var(--pbm-modal-sheet-radius) var(--pbm-modal-sheet-radius) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- buttons used by confirm / notice ---------- */
.pbm-btn {
  box-sizing: border-box; min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  font: 600 13px/1 "Manrope", system-ui, sans-serif; border: 1px solid var(--pbm-modal-line);
  background: transparent; color: var(--pbm-modal-text);
}
.pbm-btn--primary { background: var(--pbm-plum); border-color: var(--pbm-plum); color: #fff; }
.pbm-btn--danger { background: var(--pbm-error); border-color: var(--pbm-error); color: var(--pbm-error-on); }
html[data-pb-theme="dark"] .pbm-btn--primary { background: #dcbcd8; border-color: #dcbcd8; color: #23272d; }
.pbm-btn:focus-visible { outline: 2px solid var(--pbm-close-focus); outline-offset: 2px; }
/* Every state keeps its own text colour: the theme paints button:hover / button:focus pale pink with white text,
   so each state is pinned here at higher specificity. Secondary gets a tint only; primary and danger keep their fill. */
.pbm-btn.pbm-btn, .pbm-btn.pbm-btn:hover, .pbm-btn.pbm-btn:focus, .pbm-btn.pbm-btn:active { color: var(--pbm-modal-text); }
.pbm-btn.pbm-btn:hover, .pbm-btn.pbm-btn:focus, .pbm-btn.pbm-btn:active { background: var(--pbm-close-hover-bg); border-color: var(--pbm-close-hover-border); }
.pbm-btn.pbm-btn--primary, .pbm-btn.pbm-btn--primary:hover, .pbm-btn.pbm-btn--primary:focus, .pbm-btn.pbm-btn--primary:active { background: var(--pbm-plum); border-color: var(--pbm-plum); color: #fff; }
.pbm-btn.pbm-btn--danger, .pbm-btn.pbm-btn--danger:hover, .pbm-btn.pbm-btn--danger:focus, .pbm-btn.pbm-btn--danger:active { background: var(--pbm-error); border-color: var(--pbm-error); color: var(--pbm-error-on); }
html[data-pb-theme="dark"] .pbm-btn.pbm-btn--primary, html[data-pb-theme="dark"] .pbm-btn.pbm-btn--primary:hover, html[data-pb-theme="dark"] .pbm-btn.pbm-btn--primary:focus, html[data-pb-theme="dark"] .pbm-btn.pbm-btn--primary:active { background: #dcbcd8; border-color: #dcbcd8; color: #23272d; }
.pbm-btn.pbm-btn:hover, .pbm-btn.pbm-btn--primary:hover, .pbm-btn.pbm-btn--danger:hover { box-shadow: none; }
.pbm-btn.pbm-btn:focus, .pbm-btn.pbm-btn:active { box-shadow: none; }

/* ---------- toast ---------- */
.pbm-toasts {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--pbm-z-toast);
  bottom: 24px; width: min(92vw, 420px); display: flex; flex-direction: column; align-items: stretch; pointer-events: none;
}
@media (max-width: 900px) {
  .pbm-toasts { bottom: calc(var(--m-dock-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); }
}
.pbm-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 44px;
  padding: 10px 14px; border-radius: 12px; color: var(--pbm-toast-text); border: 1px solid var(--pbm-toast-border);
  font: 600 13.5px/1.35 "Manrope", system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  animation: pbm-in .2s ease both;
}
.pbm-toast--done { background: var(--pbm-done-bg); }
.pbm-toast--info { background: var(--pbm-info-bg); }
.pbm-toast--error { background: var(--pbm-error); }
.pbm-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pbm-toast__icon { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pbm-toast__btn {
  flex: 0 0 auto; min-height: 44px; margin: -10px -6px -10px 0; padding: 0 10px; background: none; border: 0; cursor: pointer;
  color: inherit; font: 700 13px "Manrope", system-ui, sans-serif; text-decoration: underline;
}
.pbm-toast__btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
@keyframes pbm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pbm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- banner / inline ---------- */
.pbm-banner {
  display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bd); background: var(--bg); color: var(--tx); font: 500 13.5px/1.4 "Manrope", system-ui, sans-serif;
}
.pbm-banner__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--ic); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pbm-banner__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pbm-banner--done     { --bg: var(--pbm-banner-done-bg); --bd: var(--pbm-banner-done-bd); --tx: var(--pbm-banner-done-tx); --ic: var(--pbm-banner-done-ic); }
.pbm-banner--info     { --bg: var(--pbm-banner-info-bg); --bd: var(--pbm-banner-info-bd); --tx: var(--pbm-banner-info-tx); --ic: var(--pbm-banner-info-ic); }
.pbm-banner--headsup  { --bg: var(--pbm-banner-head-bg); --bd: var(--pbm-banner-head-bd); --tx: var(--pbm-banner-head-tx); --ic: var(--pbm-banner-head-ic); }
.pbm-banner--error    { --bg: var(--pbm-banner-err-bg);  --bd: var(--pbm-banner-err-bd);  --tx: var(--pbm-banner-err-tx);  --ic: var(--pbm-banner-err-ic); }
input.pbm-invalid, textarea.pbm-invalid, select.pbm-invalid { border-color: var(--pbm-field-error) !important; }

/* ---------- empty state ---------- */
.pbm-empty { text-align: center; padding: 28px 16px; font-family: "Manrope", system-ui, sans-serif; }
.pbm-empty__icon { width: 48px; height: 48px; fill: none; stroke: var(--pbm-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-pb-theme="dark"] .pbm-empty__icon { stroke: #dcbcd8; }
.pbm-empty__title { margin: 8px 0 0; font: 600 18px/1.3 "Fraunces", Georgia, serif; color: var(--pbm-modal-title); }
.pbm-empty__hint { margin: 4px 0 0; font-size: 14px; color: var(--pbm-modal-muted); }
.pbm-empty .pbm-btn { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pbm-toast { animation: pbm-fade .15s ease both; }
  .pbm-close { transition: none; }
}