/* ============================================================================
 * Card — .ui-card  (a filled surface one step off the page: edged in both themes)
 * Rows: .ui-card__row  /  headers: .ui-card__title / .ui-card__sub
 * ========================================================================== */

/* The surface is the step; the line makes it legible. Both themes edge the card with
   --card-edge: the hairline in dark, --level-line in light. Light also casts --elev-rest,
   a faint short shadow. Dark casts nothing. Decided on #730.
   why: docs/foundations.md#elevation */
.ui-card {
  --ui-card-ground: var(--surface); /* the ground a scrolling row inside covers its edge with; a tint repeats it below */
  background: var(--surface);
  border: 1px solid var(--card-edge);
  box-shadow: var(--elev-rest);
  border-radius: var(--radius-xl);
  /* Was `var(--space-6) 26px`; 26 is off the scale and broke the column's text edge.
     why: docs/foundations.md#spacing-and-rhythm */
  padding: var(--space-6);
  position: relative;
}

/* A table wider than its card scrolls INSIDE the card instead of bleeding past
   the rounded corners / clipping its last column. Clipping to the card's
   border-box also keeps zebra stripes from escaping the radius. */
.ui-card:has(> .ui-table) { overflow-x: auto; }
/* Which makes the card a keyboard stop whenever no cell holds a control, so it
   answered with the native outline. It is a scroll region, so it takes --ring-scroll:
   the band drawn inward, inside the card's 24px padding and clear of the table.
   --elev-rest is left alone: the band is an outline, not a layer of the shadow list.
   why: docs/foundations.md#the-focus-ring */
.ui-card:has(> .ui-table):focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }

/* Vertical stacks space cards with the container's gap — see .ui-card-stack.
   (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */
.ui-card-stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* A padding modifier moves the vertical rhythm and keeps the text edge, so cards of
   different padding line up in one column. --pad-lg is the centred landing card, never
   stacked with plain ones, and keeps its own inset.
   why: docs/foundations.md#spacing-and-rhythm */
.ui-card--pad-sm { padding: var(--space-5) var(--space-6); }
.ui-card--pad-lg { padding: var(--space-8) var(--space-10); }

/* A card framing one content-width block ends where the block ends — a 359px table sat in
   a 1232px card (#504) — and is capped, so a wider block still fills the room and scrolls.
   why: docs/foundations.md#spacing-and-rhythm */
.ui-card--fit { width: fit-content; max-width: 100%; }

/* An accent-tinted card, e.g. a highlighted plan / success surface. It draws no accent
   ring: the tint carries the signal and the edge is the plain card edge. #295
   The strength is --card-tint, per theme: light mixes down from white, so a tint that
   works in dark sinks a light card below the page. The accent card keeps the plain
   edge. why: docs/foundations.md#elevation */
.ui-card--accent {
  --ui-card-ground: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
  background: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
}
.ui-card--live {
  --ui-card-ground: color-mix(in srgb, var(--green) var(--card-tint), var(--surface));
  background: color-mix(in srgb, var(--green) var(--card-tint), var(--surface));
  border-color: color-mix(in srgb, var(--green) 22%, transparent);
}

/* Interactive card (link / button semantics) */
.ui-card--interactive {
  cursor: pointer;
  /* Written as a <button>, the card would take the browser's frame, centred text and
     `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the family
     longhand. .ui-card states the background, the border and its rung, so a
     `border: 0` here would only delete the edge dark draws. #251 */
  text-align: left;
  font: inherit;
  transition: transform var(--dur-fast) var(--ease);
}
/* The lift alone: the card's own rung is what says it is raised, and hover is not a
   change of level. why: docs/foundations.md#elevation */
.ui-card--interactive:hover { transform: translateY(-2px); }
.ui-card--interactive:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-card--interactive .ui-card__sub:last-child { margin-bottom: 0; }

/* card() emits the title as an h2, so the text face is named here rather than
   left to the element. why: docs/foundations.md#labels-and-titles */
.ui-card__title {
  color: var(--strong);
  font-family: var(--font-sans);
  /* rank: card-title */
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  display: flex;
  align-items: center;
  gap: 10px;
  /* Title to description: the step, not the 5px it was. why: docs/foundations.md#spacing-and-rhythm */
  margin: 0 0 var(--space-2);
}
/* The title of a card that supports its neighbour, such as a document beside the
   data read from it. The size, weight and rank stay the card title's.
   why: docs/foundations.md#text-ink */
.ui-card__title--muted { /* muted-ink: chrome — a supporting card ranks below its neighbour; the title is also the card's accessible name */ color: var(--muted); }
.ui-card__sub {
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}
/* Setting rows: label + control, divided by a hairline */
.ui-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 2px;
}
/* A choice that does not fit beside its label drops under it whole, never into a column. */
.ui-card__row:has(> .ui-seg) { flex-wrap: wrap; }
.ui-card__row:has(> .ui-seg) > :first-child { flex: 1 1 10rem; min-width: 0; }
.ui-card__row > .ui-seg { flex: none; flex-wrap: nowrap; }
.ui-card__row > .ui-seg button { white-space: nowrap; }
@media (max-width: 560px) {
  .ui-card__row { flex-direction: column; align-items: flex-start; }
  .ui-card__row > :first-child { width: 100%; }
  .ui-card__row:has(> .ui-seg) > :first-child { flex: none; }
}
/* The Theme choice needs 195px and the narrowest settings row gives it 160. Its pills
   give up inline padding as the viewport narrows. Other choices keep their tap width. */
@media (max-width: 560px) {
  .ui-card__row--tight-choice > .ui-seg:not(.ui-seg--sm):not(.ui-seg--underline) button {
    padding-inline: clamp(var(--space-1), calc(var(--space-3) - (360px - 100vw) * 0.3), var(--space-3));
  }
}
.ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
.ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
.ui-card__row .hint { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }

/* Icon chip that leads a card header */
.ui-card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--glow-purple); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */
  color: var(--accent);
  flex: none;
}
.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }