/* --- misc ------------------------------------------------------------------ */

.muted {
  color: var(--muted);
  font-size: 14px;
}

.desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desc.wrap {
  white-space: normal;
  overflow: visible;
}

.empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}

.notice {
  padding: 12px 14px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border: var(--border-w) solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
}

.banner button {
  min-height: 32px;
  width: 32px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--danger);
  box-shadow: none;
}

.banner button:hover:not(:disabled) {
  background: transparent;
  text-decoration: underline;
}

.error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
}

/* A page's errors: a toast at the foot of the screen, over the content, so
   the page under it never moves. Above the top bar and the drawer, below
   the dialogs and popovers of the top layer. */
.toast-zone {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: min(460px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 16px;
  border: var(--border-w) solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  box-shadow: var(--menu-shadow);
  pointer-events: auto;
  animation: toast-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast button.toast-close {
  flex-shrink: 0;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.toast button.toast-close:hover:not(:disabled) {
  background: var(--chip);
  color: var(--ink);
}

/* A newer build is there: the same toast, at the top under the bar, where
   it stays until taken or put away — out of the way of the error toasts at
   the foot. */
.update-zone {
  position: fixed;
  left: 50%;
  top: calc(76px + env(safe-area-inset-top, 0px));
  z-index: 80;
  width: min(460px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast.update-toast {
  border-left-color: var(--accent);
}

.toast button.update-take {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 14px;
  font-size: 14px;
}

/* A list changed under the person looking at it (see motion.rs, `reflow`):
   a new row eases in, and one whose content changed is lit for a moment in
   the accent's wash. Moves and removals are played by the script. */
[data-key].row-entered {
  animation: row-entered 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-key].row-updated {
  animation: row-updated 1100ms ease-out;
}

@keyframes row-entered {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes row-updated {
  from {
    background-color: var(--accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-key].row-entered,
  [data-key].row-updated {
    animation: none;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: var(--border-w) solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deck-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.toggle input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--accent);
}