/* ─────────────────────────────────────────────────────────────────────────
   c-table — a reusable vertical ledger of rows (promoted from .site-ledger).
   A <ul> of .c-table__row, each an engraved-groove divider. Unlike the landing
   ledger this DROPS white-space:nowrap so long content (inbox items) wraps.
   Birren idiom, existing tokens only. No inline style (strict CSP).
   ───────────────────────────────────────────────────────────────────────── */

.c-table {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-table__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-3);
  /* engraved groove divider (bezel light/shadow), like the landing ledger */
  box-shadow:
    inset 0 -2px 0 0 var(--c-bezel-shadow),
    inset 0 -1px 0 0 var(--c-bezel-light);
}

.c-table__row:last-child {
  box-shadow: none;
}

.c-table__cell {
  flex: 1 1 auto;
  min-width: 0; /* allow long content to wrap instead of overflowing */
}

.c-table__value {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  /* Theme-aware emphasis, not raw phosphor-cyan: this is plain ledger text on
     paper, not a screen surface — cyan-on-cream is a light-mode WCAG fail (§B). */
  color: var(--color-text-emphasis);
}

.c-table__meta {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* Trailing per-row control slot (the D3 seam). Dormant until the web write-paths
   land — _action_row only renders it when a caller passes a `control:` local.
   A future one-tap done/nudge/activate control must stay a ≥44px touch target. */
.c-table__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-touch, 44px);
  min-height: var(--space-touch, 44px);
}

/* The one-click soft-remove "×" — a BARE light-lime glyph on the chassis, no button
   chrome (the heavy c-button look read as clunky and the dark glyph was invisible). It
   sits quietly at ~55% until hovered/focused. The wrapping button_to <form> is
   display:contents so the <button> is the direct flex child of its .c-table__action /
   o-cluster slot (which supplies the ≥44px touch target). Reused by the inbox row ×. */
.c-row-remove-form { display: contents; }

.c-row-remove {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-touch, 44px);
  min-height: var(--space-touch, 44px);

  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-ok);
  opacity: 0.55;
  transition: opacity var(--dur-instant) var(--ease-snap),
              transform var(--dur-instant) var(--ease-snap);
}

.c-row-remove:hover {
  opacity: 1;
  transform: scale(1.12);
}

.c-row-remove:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}