/* =========================================================================
   Canonical component: Card (Requirement 3.8)

   `.tkc-card` owns the raised surface and nothing else: background, border,
   radius, shadow, internal padding. Every visual unit that reads as a card --
   session tile, link tile, speaker row, collapsible section -- carries this
   class and adds layout only (grid placement, gap, order). A composition file
   may not declare `background`, `border`, `border-radius`, `box-shadow`, or
   `padding`; that restriction is what makes two different tiles match within a
   CSS pixel structurally rather than by hand-tuned values (Requirement 5.5).

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirements 3.6, 9.5). The two exceptions are keywords, not values: `thin`
   names the hairline border width and `0` carries no design decision -- there
   is no border-width token, and inventing one would put a fourth number family
   outside the caps of Requirement 3.12.

   Hover elevation lives here rather than in the compositions for the same
   reason the padding does: a tile that wanted a raised hover state would
   otherwise have to declare `box-shadow` itself.
   ========================================================================= */

.tkc-card {
  background-color: var(--tkc-color-surface);
  border: thin solid var(--tkc-color-border);
  border-radius: var(--tkc-radius-md);
  box-shadow: var(--tkc-shadow-sm);
  padding: var(--tkc-space-5);
  color: var(--tkc-color-text);
  transition:
    border-color var(--tkc-motion-fast) ease,
    box-shadow var(--tkc-motion-fast) ease;
}

/* `:focus-within` so a card reached by keyboard lifts exactly as far as one
   reached by pointer; the focus ring itself belongs to the focused control. */
.tkc-card:hover,
.tkc-card:focus-within {
  border-color: var(--tkc-color-accent);
  box-shadow: var(--tkc-shadow-md);
}

/* -------------------------------------------------------------------------
   Reduced motion (Requirement 3.10)

   Zero duration, and the element is already in its final visible state: the
   hover rule above changes only color and shadow, both of which apply
   immediately with no transition. Nothing is hidden waiting to be revealed.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tkc-card {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}