/* ============================================
   Toast + confirm dialog — matches the paper/ink palette in common.css.
   Loaded after common.css so custom-cursor rules at the end of common.css
   still win.
   ============================================ */

#tb-toast-host{
  position:fixed;
  top:80px;right:22px;
  z-index:300;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
  max-width:min(420px, 92vw);
}

.tb-toast{
  pointer-events:auto;
  padding:12px 16px;
  background:var(--paper);
  border:1px solid var(--ink);
  color:var(--ink);
  font-family:"JetBrains Mono",monospace;
  font-size:12px;letter-spacing:.04em;
  box-shadow:0 10px 28px rgba(26,26,26,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  transform:translateX(16px);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
  cursor:pointer;
  line-height:1.45;
  word-break:break-word;
}
.tb-toast.on{transform:translateX(0);opacity:1}
.tb-toast-ok{
  border-left:3px solid #2e7a4a;
}
.tb-toast-err{
  border-left:3px solid #c0392b;
  background:#fdeceb;
}
.tb-toast-info{
  border-left:3px solid var(--amber);
}

/* ===== Confirm dialog ===== */
.tb-confirm-bg{
  position:fixed;inset:0;
  background:rgba(26,26,26,.3);
  backdrop-filter:blur(8px);
  z-index:310;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
}
.tb-confirm{
  background:var(--paper);border:1px solid var(--ink);
  padding:32px 32px 28px;
  width:420px;max-width:92vw;
  box-shadow:0 20px 50px rgba(26,26,26,.28);
}
.tb-confirm h3{
  font-family:"Instrument Serif",serif;
  font-size:26px;font-weight:400;letter-spacing:-0.01em;
  margin:0 0 10px;
}
.tb-confirm p{
  font-family:"Instrument Serif",serif;
  font-size:17px;line-height:1.5;color:var(--ink-2);
  margin:0 0 22px;
}
.tb-confirm .actions{
  display:flex;justify-content:flex-end;gap:10px;
}

@media (prefers-reduced-motion: reduce){
  .tb-toast{transition:none !important}
}