/* ==========================================================================
   .tp-card — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   The general-purpose panel: a dashboard tile, a record summary, a form
   section, the container a chart and its exact-value table share.

   Variants   --elevated  --interactive  --compact  --flush
   Elements   __header  __title  __subtitle  __actions  __body  __footer  __metric
   States     :hover  :active  :focus-visible  (interactive variant only)

   The card's edge is border-subtle rather than border-default on purpose: a
   card is a grouping, not a control, so WCAG 1.4.11's 3:1 boundary requirement
   does not apply to it. Anything inside the card that IS a control carries
   border-default and is asserted at 3:1 against every surface, including this
   one.
   ========================================================================== */

.tp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  border-radius: var(--tp-radius-lg);
  background-color: var(--tp-color-surface-raised);
  color: var(--tp-color-text-primary);
}

/* --------------------------------------------------------------------------
   Elements
   -------------------------------------------------------------------------- */

.tp-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tp-space-3);
  padding: var(--tp-space-5) var(--tp-space-6);
  border-bottom: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
}

.tp-card__title {
  min-width: 0;
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-lg);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
  overflow-wrap: break-word;
}

.tp-card__subtitle {
  margin-top: var(--tp-space-1);
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
  line-height: var(--tp-leading-normal);
}

.tp-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-2);
}

.tp-card__body {
  padding: var(--tp-space-6);
  min-width: 0;
  /* Fills the remaining height so a row of cards has aligned footers. */
  flex: 1 1 auto;
}

.tp-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-3);
  padding: var(--tp-space-4) var(--tp-space-6);
  border-top: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle);
  background-color: var(--tp-color-surface-sunken);
  border-end-start-radius: var(--tp-radius-lg);
  border-end-end-radius: var(--tp-radius-lg);
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
}

/* A single headline figure. Tabular figures, because these are compared across
   a row of tiles, and a figure is never rendered without the label that says
   what it counts (UX principle: honesty of data). */
.tp-card__metric {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-1);
}

.tp-card__metric-value {
  color: var(--tp-color-text-primary);
  font-size: var(--tp-text-3xl);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
  font-variant-numeric: tabular-nums;
}

.tp-card__metric-label {
  color: var(--tp-color-text-secondary);
  font-size: var(--tp-text-sm);
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.tp-card--elevated {
  border-color: transparent;
  box-shadow: var(--tp-shadow-md);
}

.tp-card--compact .tp-card__header {
  padding: var(--tp-space-3) var(--tp-space-4);
}

.tp-card--compact .tp-card__body {
  padding: var(--tp-space-4);
}

.tp-card--compact .tp-card__footer {
  padding: var(--tp-space-3) var(--tp-space-4);
}

/* For a card whose body is a full-bleed table or chart. */
.tp-card--flush .tp-card__body {
  padding: 0;
}

/* A card that is itself a link or button. The whole card is one target, so it
   must carry one accessible name — the template puts the link around the
   title and stretches its hit area, rather than nesting controls. */
.tp-card--interactive {
  cursor: pointer;
  transition:
    border-color var(--tp-motion-duration-fast) var(--tp-motion-ease-standard),
    background-color var(--tp-motion-duration-fast) var(--tp-motion-ease-standard);
}

.tp-card--interactive:hover {
  border-color: var(--tp-color-border-default);
  background-color: var(--tp-color-surface-sunken);
}

.tp-card--interactive:active {
  background-color: var(--tp-color-accent-subtle);
}

.tp-card--interactive:focus-within {
  /* The ring belongs to the control inside; the card echoes it so the
     relationship between the two is visible. */
  border-color: var(--tp-color-border-focus);
}

.tp-card--interactive:focus-visible {
  position: relative;
  z-index: var(--tp-z-dropdown);
}

/* --------------------------------------------------------------------------
   Disabled — a card representing an inert record (a soft-deleted observation,
   a superseded report). Marked with aria-disabled in the template, never by
   removing it from the DOM: a record the user can no longer act on is still a
   record they must be able to read.
   -------------------------------------------------------------------------- */

.tp-card[aria-disabled="true"] {
  opacity: var(--tp-opacity-disabled);
  cursor: not-allowed;
}