/* Feedback surfaces: confirm dialog, undo toast, loading skeleton, error card,
   sync banner, install card. Tokens only, so light and dark both work. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Confirm dialog (native <dialog>) ------------------------------------ */
.confirm-dialog {
  margin: auto; /* the global reset zeroes it; showModal() centres via auto margins */
  width: min(92vw, 26rem);
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: var(--overlay); }
.confirm-dialog__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.confirm-dialog__title { margin: 0; font-size: var(--text-lg); line-height: 1.3; overflow-wrap: anywhere; }
.confirm-dialog__message { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
@media (max-width: 480px) {
  .confirm-dialog__actions { flex-direction: column-reverse; }
  .confirm-dialog__actions .btn { width: 100%; }
}

/* ---- Undo toast ----------------------------------------------------------- */
.undo-toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(92vw, 26rem);
  pointer-events: none;
}
@media (max-width: 760px) {
  /* Sit above the fixed mobile tab bar. */
  .undo-toast-region { bottom: calc(var(--tabbar-h) + var(--space-3) + env(safe-area-inset-bottom, 0px)); }
}
.undo-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
}
.undo-toast__btn {
  flex: none;
  min-height: 36px;
  padding: 0 var(--space-3);
  font: inherit;
  font-weight: 700;
  color: var(--accent-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.undo-toast__btn:hover { background: var(--accent-soft); }
.undo-toast__btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: no-preference) {
  .undo-toast { animation: toast-in 160ms ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---- Loading skeleton ------------------------------------------------------ */
.skeleton-view { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.skeleton {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.skeleton--eyebrow { width: 5rem; height: 0.7rem; }
.skeleton--heading { width: 55%; height: 1.75rem; margin-bottom: var(--space-2); }
.skeleton--title { width: 40%; height: 1.1rem; }
.skeleton--line { height: 0.8rem; max-width: 100%; }
.skeleton-card { display: flex; flex-direction: column; gap: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
  }
  @keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

/* ---- Error card -------------------------------------------------------------- */
.error-card { margin-top: var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.error-card__title { margin: 0; font-size: var(--text-xl); }
.error-card__text { margin: 0; color: var(--text-muted); max-width: 30rem; }
.error-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ---- Sync failure banner (inside #sync-status) --------------------------------- */
.sync-banner {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid;
  border-radius: var(--radius);
}
.sync-banner__text { flex: 1 1 14rem; min-width: 0; font-weight: 500; }
.sync-banner__text a { color: inherit; font-weight: 700; }
.sync-banner__actions { display: flex; gap: var(--space-2); }
.sync-status .sync-banner .btn { min-height: 34px; }
.sync-banner--server { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger); }
.sync-banner--reauth,
.sync-banner--offline,
.sync-banner--rate_limited { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning); }
.sync-banner .btn-ghost { color: inherit; }

/* ---- Install card ---------------------------------------------------------------- */
.install-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.install-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 14rem; min-width: 0; }
.install-card__body span { color: var(--text-muted); }
.install-card__actions { display: flex; gap: var(--space-2); }
.install-card__share { vertical-align: text-bottom; color: var(--accent-text); }
.install-card.ios-install-hint { color: var(--text); background: var(--accent-soft); border-color: var(--border-strong); }

/* ---- Accessibility helpers --------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-3); top: -4rem; z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-contrast);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }
h1[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}