/* Card: <section class="sv-card"> or collapsible <details class="sv-card sv-card--collapsible">. */

.sv-card {
  container-type: inline-size;
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-surface);
  box-shadow: var(--sv-shadow-sm);
}

.sv-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2) var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-4);
  border-bottom: 1px solid var(--sv-color-border);
}
.sv-card__title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  margin: 0;
  font-size: var(--sv-text-lg);
}
.sv-card__title .sv-icon { color: var(--sv-color-text-muted); }
.sv-card__subtitle {
  margin: 0;
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
}
.sv-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2);
  margin-inline-start: auto;
}

.sv-card__body { padding: var(--sv-space-4); }
.sv-card__body > * + * { margin-top: var(--sv-space-4); }
.sv-card__body--flush { padding: 0; }
.sv-card__body--flush > .sv-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

.sv-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sv-space-2);
  padding: var(--sv-space-3) var(--sv-space-4);
  border-top: 1px solid var(--sv-color-border);
  border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg);
  background: var(--sv-color-surface-muted);
}

@container (min-width: 40rem) {
  .sv-card__header,
  .sv-card__body,
  .sv-card__footer { padding-inline: var(--sv-space-5); }
}

/* Variants. */
.sv-card--muted { background: var(--sv-color-surface-muted); box-shadow: none; }
.sv-card--flat { box-shadow: none; }
.sv-card--accent { border-top: 3px solid var(--sv-color-primary); }
.sv-card--danger { border-color: var(--sv-error-border); }
.sv-card--danger > .sv-card__header { background: var(--sv-error-bg); color: var(--sv-error-fg); border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; }
.sv-card--review { border-color: var(--sv-review-border); box-shadow: inset 4px 0 0 var(--sv-review-border), var(--sv-shadow-sm); }
.sv-card.is-highlighted { box-shadow: 0 0 0 3px var(--sv-color-focus); }

/* Collapsible card: <details> with <summary> as header. */
details.sv-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2) var(--sv-space-4);
  min-height: 3rem;
  padding: var(--sv-space-3) var(--sv-space-4);
  border-radius: var(--sv-radius-lg);
  cursor: pointer;
  list-style: none;
  font-weight: var(--sv-weight-semibold);
}
details.sv-card > summary::-webkit-details-marker { display: none; }
details.sv-card > summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.15rem 0.25rem;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--sv-duration-fast) var(--sv-ease);
}
details.sv-card[open] > summary::before { transform: rotate(45deg); }
details.sv-card[open] > summary {
  border-bottom: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
}
details.sv-card > summary:hover { background: var(--sv-color-surface-muted); }
details.sv-card > summary .sv-card__actions { margin-inline-start: auto; }