/* States — empty / error / stale layout around the shared shells.
 *
 * Base `.empty-note`, `.form-error` and `.banner` look lives in styles.css;
 * this file only adds rules styles.css does not already have. Colour, type,
 * spacing, radius and motion come only from tokens.css custom properties.
 * No hex, rgb(), hsl() or named colour literal lives here (transparent,
 * currentColor and inherit are allowed).
 */

.empty-note.has-action,
.form-error.has-retry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.empty-note.has-action {
  justify-content: center;
}

.form-error.has-retry {
  justify-content: flex-start;
}

.banner-since {
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  opacity: 0.85;
  margin-left: var(--space-1);
}

/* ---- phone (MOBILE_PLAN.md P6 / §2.9 / §2.10) -----------------------------
   State actions stack full-width with the --hit-min targets (pattern 2), and
   the state lines ride the --fs-table scale (13px under the phone override).
   Long "last loaded" strings wrap instead of widening the page (§2.11). */

@media (max-width: 767.98px) {
  .empty-note.has-action,
  .form-error.has-retry {
    flex-direction: column;
    align-items: stretch;
  }

  .empty-note.has-action .empty-note-action,
  .form-error.has-retry .retry-btn {
    width: 100%;
    min-height: var(--hit-min);
  }

  .empty-note,
  .form-error {
    font-size: var(--fs-table);
  }

  .banner-since {
    overflow-wrap: anywhere;
  }
}