/* =============================================================================
   A4 - card, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 0 colour literal(s) -> on-accent, 0 rgb-channel
   tint(s) -> colour-mix, 0 hand-authored dark override(s) removed, 0 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Card Component
   ============================================================================ */

.s-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  word-wrap: break-word;
  background-color: var(--s-card-bg);
  color: var(--s-card-color);
  background-clip: border-box;
  border: var(--s-border-width) solid var(--s-card-border-color);
  border-radius: var(--s-card-border-radius);
  box-shadow: var(--s-card-box-shadow);
  transition: var(--s-transition-shadow), var(--s-transition-transform);
}

.s-card > hr {
  margin-inline: 0;
}

/* Card hover effect */
.s-card-hover:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--s-card-border-color));
  transform: translateY(-2px);
}

.s-card-hover {
  cursor: pointer;
}

/* Card Header */
.s-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-card-padding);
  padding-inline: var(--s-card-padding);
  border-block-end: var(--s-border-width) solid var(--s-border-color);
  border-start-start-radius: var(--s-card-border-radius);
  border-start-end-radius: var(--s-card-border-radius);
}

.s-card-header:first-child {
  border-start-start-radius: calc(var(--s-card-border-radius) - var(--s-border-width));
  border-start-end-radius: calc(var(--s-card-border-radius) - var(--s-border-width));
}

.s-card-header-borderless {
  border-block-end: 0;
}

/* Card Body */
.s-card-body {
  flex: 1 1 auto;
  padding: var(--s-card-padding);
  color: var(--s-card-color);
}

/* Card Footer */
.s-card-footer {
  padding-block: var(--s-card-padding);
  padding-inline: var(--s-card-padding);
  border-block-start: var(--s-border-width) solid var(--s-border-color);
  border-end-start-radius: var(--s-card-border-radius);
  border-end-end-radius: var(--s-card-border-radius);
}

.s-card-footer:last-child {
  border-end-start-radius: calc(var(--s-card-border-radius) - var(--s-border-width));
  border-end-end-radius: calc(var(--s-card-border-radius) - var(--s-border-width));
}

.s-card-footer-borderless {
  border-block-start: 0;
}

/* Card Title */
.s-card-title {
  margin-block-end: 0.5rem;
  font-size: var(--s-h5-font-size);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-heading-color);
}

/* Card Subtitle */
.s-card-subtitle {
  margin-block-start: -0.25rem;
  margin-block-end: 0.5rem;
  font-size: var(--s-font-size-sm);
  color: var(--s-muted-color);
}

/* Card Text */
.s-card-text:last-child {
  margin-block-end: 0;
}

/* Card Image */
.s-card-img,
.s-card-img-top,
.s-card-img-bottom {
  inline-size: 100%;
}

.s-card-img-top {
  border-start-start-radius: var(--s-card-border-radius);
  border-start-end-radius: var(--s-card-border-radius);
}

.s-card-img-bottom {
  border-end-start-radius: var(--s-card-border-radius);
  border-end-end-radius: var(--s-card-border-radius);
}

/* Card with actions in header */
.s-card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-gap-2);
}

/* Card padding sizes */
.s-card-sm .s-card-header,
.s-card-sm .s-card-body,
.s-card-sm .s-card-footer {
  padding: var(--s-card-padding-sm);
}

.s-card-lg .s-card-header,
.s-card-lg .s-card-body,
.s-card-lg .s-card-footer {
  padding: var(--s-card-padding-lg);
}

/* Card group */
.s-card-group {
  display: flex;
  flex-flow: row wrap;
  gap: var(--s-gap-6);
}

.s-card-group > .s-card {
  flex: 1 0 0%;
}

/* Card Statistics - for stats display */
.s-card-stats {
  display: flex;
  align-items: center;
  gap: var(--s-gap-4);
}

.s-card-stats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--s-border-radius);
  font-size: 1.25rem;
}

/* Colored top border cards */
.s-card-border-primary   { border-block-start: 3px solid var(--s-primary); }
.s-card-border-secondary { border-block-start: 3px solid var(--s-secondary); }
.s-card-border-success   { border-block-start: 3px solid var(--s-success); }
.s-card-border-danger    { border-block-start: 3px solid var(--s-danger); }
.s-card-border-warning   { border-block-start: 3px solid var(--s-warning); }
.s-card-border-info      { border-block-start: 3px solid var(--s-info); }

/* Card with shadow variants */
.s-card-shadow-none { box-shadow: none; }

/* .s-card-shadow-sm|md|lg removed. They existed only to put an elevation back
   under a bordered card, which is the thing the card deliberately does not do.
   A utility whose only purpose is to break the rule it sits beside is worse than
   no utility: it makes the inconsistency look sanctioned. */

/* A card a settings search opened the page at (A027-04): outlined for a moment so
   the eye finds it after the scroll. */
.s-card.s-card-found {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transition: outline-color 1s ease;
}

/* ============================================================================
   Refresh (October 2026): a quieter heading. The title kept a heading's margin
   inside the bar, so every panel opened with a 62px band; it now sits on one
   line with its tools, and a panel may say what it is about with a coloured top
   edge (Tone) and fold away (Collapsible).
   ============================================================================ */
.s-card-header { min-block-size: 46px; padding-block: 10px; gap: 12px; }
.s-card-header .s-card-title {
  margin: 0; font-size: var(--ui); font-weight: 650; color: var(--ink);
  letter-spacing: -.005em;
}
.s-card-header-content { display: flex; align-items: center; gap: 10px; min-inline-size: 0; flex-wrap: wrap; }
.s-card-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.s-card[data-tone] { border-block-start-width: 3px; }
.s-card[data-tone="accent"] { border-block-start-color: var(--accent); }
.s-card[data-tone="pos"] { border-block-start-color: var(--pos); }
.s-card[data-tone="warn"] { border-block-start-color: var(--warn); }
.s-card[data-tone="neg"] { border-block-start-color: var(--neg); }
.s-card[data-tone="info"] { border-block-start-color: var(--info); }

.s-card-fold {
  display: grid; place-items: center; inline-size: 28px; block-size: 28px;
  border: 0; border-radius: var(--r1); background: none; color: var(--ink-3); cursor: pointer;
}
.s-card-fold:hover { background: var(--surface-2); color: var(--ink); }
.s-card-fold:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.s-card-fold .icon { transition: transform var(--dur) var(--ease); }
.s-card.is-folded .s-card-fold .icon { transform: rotate(-90deg); }
:root[dir="rtl"] .s-card.is-folded .s-card-fold .icon { transform: rotate(90deg); }
.s-card.is-folded > .s-card-header { border-block-end: 0; }