/* ProNick UI: the popup, the toast and the unsaved-changes bar, once, for every page.
 *
 * Every class is `pnui-`: the giveaway page already owns `.pn-modal`, and a
 * site-wide rule under that name would have restyled its confirm dialog.
 *
 * Restraint is the design: one neutral surface, neutral secondary buttons, and
 * exactly one accent per popup - on its primary action, blue to save, red only
 * when the primary action destroys something. The first version stacked a
 * blue-to-violet top line, a yellow icon tile, a red button and a blue one in
 * one small box, and it read as noise rather than as a question.
 *
 * Drawn above everything a template draws (the mobile toolbar is 1002, a
 * template's own popup and toast 1010). Colours are literal on purpose - the
 * templates disagree on their variable names (--surface-solid, --pn-surface,
 * --surface) and one of them is a 60%-opacity card colour: a popup that fell
 * back to it would read as disabled. `pnselect.css` learned the same lesson.
 */

.pnui-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 16, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: pnui-fade .16s ease-out;
}

.pnui-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  color: #e8ebf5;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: start;
  background: #151a2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: pnui-rise .18s ease-out;
}
.pnui-modal.md { width: min(640px, 100%); }
.pnui-modal.lg { width: min(900px, 100%); }

.pnui-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 12px;
}
.pnui-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: .95rem;
  color: #c9d0e6;
  background: rgba(255, 255, 255, 0.06);
}
/* Yellow is the one colour a warning keeps: it is what says "careful" before a word is read. */
.pnui-icon.warn { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.pnui-icon.bad { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.pnui-title {
  margin: 2px 0 4px;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.pnui-sub { margin: 0; color: #9aa2bd; font-size: .87rem; line-height: 1.55; }
.pnui-x {
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a92ad;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.pnui-x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.pnui-x:focus-visible, .pnui-btn:focus-visible { outline: 2px solid #5b84ff; outline-offset: 2px; }

.pnui-body { padding: 4px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
.pnui-body:empty { display: none; }

.pnui-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pnui-foot .pnui-spacer { flex: 1 1 auto; }

.pnui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: #e8ebf5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, opacity .15s;
}
.pnui-btn:hover { background: rgba(255, 255, 255, 0.1); }
.pnui-btn.primary { color: #fff; background: #3b6cff; border-color: #3b6cff; }
.pnui-btn.primary:hover { background: #4f7bff; border-color: #4f7bff; }
.pnui-btn.danger { color: #fff; background: #c9444b; border-color: #c9444b; }
.pnui-btn.danger:hover { background: #d4545b; border-color: #d4545b; }
.pnui-btn[disabled] { opacity: .6; cursor: progress; }
.pnui-btn.busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pnui-spin .7s linear infinite;
}

/* ---- the unsaved-changes bar ------------------------------------------------ */
.pnui-dirtybar {
  position: fixed;
  inset-inline: 0;
  bottom: 18px;
  z-index: 1015;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  pointer-events: none;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .26s ease, opacity .2s ease;
}
.pnui-dirtybar.show { transform: none; opacity: 1; }
.pnui-dirtybar-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 600px;
  width: 100%;
  padding: 10px 10px 10px 18px;
  color: #e8ebf5;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: .9rem;
  background: #151a2c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.85);
}
.pnui-dirtybar-inner .pnui-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16);
  animation: pnui-pulse 1.8s ease-in-out infinite;
}
.pnui-dirtybar-inner span { flex: 1 1 auto; min-width: 0; }
.pnui-dirtybar.nudge .pnui-dirtybar-inner { animation: pnui-nudge .45s ease; }
body.pnui-dirty { padding-bottom: 92px !important; }

/* ---- toast ------------------------------------------------------------------ */
.pnui-toasts {
  position: fixed;
  top: 20px;
  inset-inline-end: 20px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.pnui-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  color: #e8ebf5;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 500;
  background: #151a2c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.8);
  animation: pnui-rise .18s ease-out;
}
.pnui-toast::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #34c77b; }
.pnui-toast.bad::before { background: #e5535a; }

@keyframes pnui-fade { from { opacity: 0; } }
@keyframes pnui-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pnui-spin { to { transform: rotate(360deg); } }
@keyframes pnui-pulse { 50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0.04); } }
@keyframes pnui-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes pnui-sheet { from { transform: translateY(40px); opacity: 0; } }

@media (max-width: 600px) {
  .pnui-backdrop { align-items: flex-end; padding: 0; }
  .pnui-modal, .pnui-modal.md, .pnui-modal.lg {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    animation-name: pnui-sheet;
  }
  .pnui-foot .pnui-btn { flex: 1 1 auto; }
  .pnui-foot .pnui-spacer { display: none; }
  .pnui-dirtybar { bottom: 10px; }
  .pnui-dirtybar-inner { font-size: .86rem; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pnui-backdrop, .pnui-modal, .pnui-toast, .pnui-dirtybar, .pnui-dirtybar-inner, .pnui-dot {
    animation: none !important;
    transition: none !important;
  }
}