/* ==========================================================================
   app/achievements.css: the unlock toast and the set-complete card (wf13)
   Concept: notes/inbox/assets/2026-10-07-achievement-unlock-popup-concept.png.
   Top-right under the header on desktop, full width under the header on a phone.
   No backdrop: it never covers the seat a player is typing into for long and it
   never takes focus.
   ========================================================================== */
.ach-toasts {
  position: fixed; z-index: 80; pointer-events: none;
  top: calc(var(--header-h, 64px) + 12px); right: 16px;
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px;
}
.ach-toast {
  --ach-glow: 255, 138, 61;
  pointer-events: auto; position: relative;
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 40px 14px 14px;
  border-radius: var(--r-md); border: 1px solid rgba(var(--ach-glow), .85);
  background: linear-gradient(180deg, rgba(var(--ach-glow), .08), rgba(var(--ach-glow), 0) 70%), var(--page-deep);
  box-shadow: 0 0 0 1px rgba(var(--ach-glow), .12), 0 0 22px rgba(var(--ach-glow), .28), 0 12px 32px rgba(0, 0, 0, .5);
  color: var(--text);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.ach-toast.is-in { opacity: 1; transform: none; }
.ach-toast.is-out { opacity: 0; transform: translateY(-6px); }

.ach-toast-ic {
  flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--history-card); color: var(--history-primary);
  border: 1px solid rgba(var(--ach-glow), .35);
}
.ach-toast-ic .i { width: 32px; height: 32px; }
.ach-toast-ic[data-tone="gold"]   { color: var(--gold-strong); background: var(--gold-bg); }
.ach-toast-ic[data-tone="green"]  { color: var(--green-soft); background: var(--green-bg); border-color: var(--green-line); }
.ach-toast-ic[data-tone="blue"]   { color: var(--reruns-primary); background: var(--reruns-bg); border-color: rgba(59, 130, 246, .4); }
.ach-toast-ic[data-tone="steel"]  { color: var(--silver); background: var(--surface-2); border-color: var(--border); }

.ach-toast-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-toast-eye {
  font: 700 var(--fs-micro)/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--history-primary);
}
.ach-toast-name { font: 700 var(--fs-md)/1.2 var(--font-ui); color: var(--text); }
.ach-toast-line { font: 400 var(--fs-sm)/1.4 var(--font-ui); color: var(--text-2); }

.ach-toast-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-2); cursor: pointer;
}
.ach-toast-x:hover { color: var(--text); background: var(--surface-2); }
.ach-toast-x .i { width: 16px; height: 16px; }

/* The set card: same frame, a little more to say. */
.ach-set-fact {
  margin-top: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface);
  font: 400 var(--fs-sm)/1.45 var(--font-ui); color: var(--text-2);
}
.ach-set-fact b {
  display: block; margin-bottom: 2px; font: 700 var(--fs-micro)/1.2 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.ach-set-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ach-set-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--gold-line); background: var(--gold-bg); color: var(--gold);
  font: 600 var(--fs-xs)/1.3 var(--font-ui);
}
.ach-set-chip .i { width: 12px; height: 12px; }
.ach-set-acts { margin-top: 8px; }
.ach-set-go {
  display: inline-flex; align-items: center; gap: 6px; color: var(--history-primary);
  font: 700 var(--fs-sm)/1.2 var(--font-ui); text-decoration: none;
}
.ach-set-go:hover { text-decoration: underline; }
.ach-set-go .i { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .ach-toasts { left: 12px; right: 12px; width: auto; top: calc(var(--header-h, 56px) + 8px); }
  .ach-toast-ic { flex-basis: 48px; width: 48px; height: 48px; }
  .ach-toast-ic .i { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ach-toast { transition: none; transform: none; }
}

/* ---- the catalogue on /achievements: secret tiles and groups -------------- */
.pg-achievements .ach-tile.is-secret:not(.is-on) .ach-desc { font-style: italic; }
.pg-achievements .ach-tile.is-secret:not(.is-on) .ach-ic { color: #4B4D55; }
.pg-achievements .ach-line { font: italic 400 var(--fs-xs)/1.4 var(--font-ui); color: var(--text-2); }
.pg-achievements .ach-gap { margin: 6px 0 0; color: var(--text-muted); font: 400 var(--fs-xs)/1.5 var(--font-ui); }

/* ---- "First discovered by" on a record's full screen ---------------------- */
.ach-firstby {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--gold-line); background: var(--gold-bg);
  font: 500 var(--fs-sm)/1.4 var(--font-ui); color: var(--text);
}
.ach-firstby .i { flex: 0 0 18px; width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
.ach-firstby b {
  display: block; font: 700 var(--fs-micro)/1.3 var(--font-ui); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.ach-firstby i { font-style: normal; color: var(--text-2); }
.ach-firstby.is-open { border-color: var(--border); background: var(--surface); }
.ach-firstby.is-open .i, .ach-firstby.is-open b { color: var(--text-2); }