/*
 * Styling for the "Project Saved!" filament reminder.
 *
 * Every colour is a theme token (--panel, --text, --accent, --warn, --line ...), which is what makes
 * this work in both the dark and light themes without a second ruleset: body.light redefines the same
 * variables. Hardcoding even one hex here would look correct in whichever theme it was written in and
 * wrong in the other.
 */

.pfrBackdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;              /* above the app chrome; below nothing that matters more than this */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 8, 14, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  /* RESTING STATE IS VISIBLE, and the entrance is an animation layered on top. The reverse -- start
     at opacity 0 and transition to 1 -- reads fine and is a trap: transitions AND rAF are frozen in a
     hidden or background tab, so the dialog would never finish appearing there. It would sit at
     opacity 0, invisible, with a full-screen backdrop still swallowing every click on the page. An
     element that fails to animate must fail to its FINAL state, never its initial one. */
  opacity: 1;
  animation: pfrFadeIn .2s ease;
}
.pfrBackdrop.is-closing { opacity: 0; transition: opacity .18s ease; }
@keyframes pfrFadeIn { from { opacity: 0; } to { opacity: 1; } }

.pfrCard {
  position: relative;
  overflow: hidden;
  width: min(480px, 100%);
  box-sizing: border-box;
  padding: 30px 28px 22px;
  text-align: center;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  /* Same rule as the backdrop: the resting transform is the FINAL one, and the entrance animates
     toward it, so a frozen tab leaves a correctly-placed card rather than an offset ghost. */
  transform: none;
  animation: pfrRise .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pfrRise { from { transform: translateY(10px) scale(.98); } to { transform: none; } }

/* Soft accent wash behind the tick. Decorative only, so it must never eat a click. */
.pfrGlow {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 260px;
  height: 160px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--good) 26%, transparent), transparent);
}

.pfrIcon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  color: var(--good);
  border-radius: 50%;
  background: color-mix(in srgb, var(--good) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 40%, transparent);
}
.pfrIcon svg { width: 28px; height: 28px; }

.pfrTitle { margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 700; }
.pfrName {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  /* A long project name must not widen the dialog. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reminder itself, in warning ink -- the ONE thing on this card that is not congratulation. */
.pfrNote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
}
.pfrNoteIcon { flex: 0 0 auto; color: var(--warn); line-height: 0; margin-top: 1px; }
.pfrNoteIcon svg { width: 18px; height: 18px; }
.pfrNoteText { font-size: 13.5px; line-height: 1.45; }

.pfrBody {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}

.pfrActions { display: flex; gap: 10px; justify-content: flex-end; }
.pfrBtn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: filter .15s ease, background .15s ease;
}
.pfrBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pfrBtn--ghost { background: transparent; color: var(--text); }
.pfrBtn--ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.pfrBtn--primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #000));
  border-color: transparent;
  color: #fff;
}
.pfrBtn--primary:hover { filter: brightness(1.07); }

.pfrMute {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
}
.pfrMute input { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .pfrBackdrop, .pfrCard { animation: none; transition: none; }
}