/* Card
 *
 * A surface that groups related content. Three uses in this product:
 *   .card            content panel
 *   .card--auth      the narrow centred panel for sign-in / sign-up
 *   .card__empty     the empty state, which is part of the card, not an afterthought
 *
 * A whole card is never a link or a button. Put the control inside it — a
 * clickable div is unreachable by keyboard and unnameable by assistive tech.
 */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  padding: var(--space-5);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  /* Depth comes mostly from the surface token; the shadow is a hint, not a lift. */
  box-shadow: var(--shadow-sm);
}

/* The auth panel. max-inline-size, never a fixed width — it must still work at
 * 320px and when the browser font size is raised.
 *
 * BACKLOG (STORY-038): SSO is deferred, not rejected. When Apple, Google, and
 * Microsoft sign-in arrive, three provider buttons and a divider sit ABOVE the
 * email form inside this card. Do not tighten this to fit only the current
 * content — vertical room and the gap rhythm need to survive that addition
 * without a redesign. Provider brand buttons are also taller than ours and
 * their assets frequently fail contrast, so verify rather than assume. */
.card--auth {
  max-inline-size: 26rem;
  margin-inline: auto;
  padding: var(--space-6);
  gap: var(--space-5);
}

/* Flat variant for lists of cards, where many shadows become noise. */
.card--flat {
  box-shadow: none;
  background-color: var(--color-surface);
}

/* ---- structure --------------------------------------------------------- */

.card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.card--auth .card__title {
  font-size: var(--text-2xl);
}

.card__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  /* Keeps prose readable when the card is wide. */
  max-inline-size: var(--measure);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

/* Pushes the primary action to the end of the row — inline-start/end so it
 * flips correctly under RTL. */
.card__footer--end {
  justify-content: flex-end;
}

/* ---- empty state ------------------------------------------------------- */

/* Authored with the component, not invented later in three different places.
 * An empty state says what is missing and offers the action that fixes it. */
.card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-7);
  padding-inline: var(--space-5);
  text-align: center;
}

.card__empty-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.card__empty-body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  max-inline-size: 34ch;
}

/* ---- loading ----------------------------------------------------------- */

/* Skeleton rows. aria-hidden on the shapes; the container carries aria-busy
 * so a screen reader hears "busy" rather than reading decorative bars. */
.card__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card__skeleton-line {
  block-size: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  animation: card-pulse 1.4s ease-in-out infinite;
}
.card__skeleton-line:nth-child(2) { inline-size: 80%; }
.card__skeleton-line:nth-child(3) { inline-size: 60%; }

@keyframes card-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .card__skeleton-line { animation: none; opacity: 0.6; }
}

/* ---- grid -------------------------------------------------------------- */

/* Responsive by default. Never a fixed column count — content decides. */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}