/* session-guard.js's corner card -- "Trust this device?" after a login on a
   browser that hasn't been asked before. Styled like a game achievement
   pop-up (per explicit request: "like the Steam trophy popover"): a small
   white card that slides up into the bottom-right corner, sits above the
   page without blocking it, and slides away on its own (a thin bar shows
   the time left). */
.sg-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  width: 340px;
  max-width: calc(100vw - 32px);
  display: flex;
  gap: 12px;
  padding: 14px 14px 16px;
  border-radius: var(--vds-radius-md);
  /* White mode (explicit request) -- was the dark achievement look:
     background: var(--vds-neutral-900); color: var(--vds-text-on-dark); */
  background: var(--vds-white);
  color: var(--vds-text-primary);
  border: 1px solid var(--vds-border);
  font-family: var(--vds-font-sans);
  box-shadow: var(--vds-shadow-lg);
  overflow: hidden;
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}

.sg-toast.is-in {
  transform: translateY(0);
  opacity: 1;
}

.sg-toast-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--vds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vds-neutral-100);
  color: var(--vds-text-primary);
}

.sg-toast.is-done .sg-toast-icon {
  background: var(--vds-success);
  color: var(--vds-white);
}

.sg-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sg-toast-title {
  font-size: 14px;
  font-weight: var(--vds-weight-bold);
  line-height: 1.3;
}

.sg-toast-text {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--vds-text-secondary);
}

.sg-toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sg-toast-btn {
  padding: 5px 12px;
  border-radius: var(--vds-radius-md);
  font: var(--vds-weight-semibold) 12.5px/1.2 var(--vds-font-sans);
  cursor: pointer;
}

.sg-toast-btn--primary {
  border: none;
  background: var(--vds-action);
  color: var(--vds-text-on-dark);
}

.sg-toast-btn--ghost {
  border: 1px solid var(--vds-border);
  background: transparent;
  color: var(--vds-text-primary);
}

.sg-toast-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.sg-toast-btn:focus-visible {
  outline: 2px solid var(--vds-accent);
  outline-offset: 2px;
}

/* Time left before the card slides away on its own. */
.sg-toast-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--vds-green-500);
  transform-origin: left center;
  animation: sg-toast-timer linear forwards;
}

.sg-toast:hover .sg-toast-timer,
.sg-toast:focus-within .sg-toast-timer {
  animation-play-state: paused;
}

@keyframes sg-toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ---- "Is this you?" modal (session-guard.js showPrompt) ----------------
   Sits on the shared .sw-modal--sm shell; these rules only arrange what's
   inside it: header (icon + question), a details grid, a note, answers. */
.auth-prompt {
  gap: 0;
  animation: sg-prompt-in 0.2s ease;
}

.auth-prompt-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.auth-prompt-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--vds-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vds-warning-soft);
  color: var(--vds-warning);
}

.auth-prompt.is-ok .auth-prompt-icon {
  background: var(--vds-success-soft);
  color: var(--vds-success);
}

.auth-prompt.is-blocked .auth-prompt-icon {
  background: var(--vds-danger-soft);
  color: var(--vds-danger);
}

.auth-prompt-title {
  font: var(--vds-weight-bold) 17px/1.3 var(--vds-font-sans);
  color: var(--vds-text-primary);
}

.auth-prompt-sub {
  margin-top: 2px;
  font: 400 13.5px/1.45 var(--vds-font-sans);
  color: var(--vds-text-secondary);
}

.auth-prompt-details {
  margin: 0 0 14px;
  padding: 4px 14px;
  border: 1px solid var(--vds-border);
  border-radius: var(--vds-radius-md);
  background: var(--vds-surface);
}

.auth-prompt-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  padding: 8px 0;
  font: 400 13px/1.4 var(--vds-font-sans);
}

.auth-prompt-row + .auth-prompt-row {
  border-top: 1px solid var(--vds-border);
}

.auth-prompt-row dt {
  color: var(--vds-text-tertiary);
}

.auth-prompt-row dd {
  margin: 0;
  color: var(--vds-text-primary);
  font-weight: var(--vds-weight-medium);
  overflow-wrap: anywhere;
}

.auth-prompt-note {
  margin: 0 0 20px;
  font: 400 12.5px/1.5 var(--vds-font-sans);
  color: var(--vds-text-secondary);
}

.auth-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* The "no" answer reads as the risky one: outlined, in the danger colour. */
.auth-prompt-btn-no {
  background: var(--vds-white);
  color: var(--vds-danger);
  box-shadow: inset 0 0 0 1px var(--vds-danger);
}

.auth-prompt-btn-no:hover:not(:disabled) {
  background: var(--vds-danger-soft);
}

@media (max-width: 480px) {
  .auth-prompt-actions {
    flex-direction: column-reverse;
  }
  .auth-prompt-actions .sw-btn {
    width: 100%;
    justify-content: center;
  }
  .auth-prompt-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@keyframes sg-prompt-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-prompt {
    animation: none;
  }
  .sg-toast {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .sg-toast-timer {
    animation: none;
    display: none;
  }
}