/* ---- 16j. Donation wall + public / tribute blocks (PARITY B11) -----------
 * Owned by batch B11 (blocks — public / tribute). Holds the reference's
 * typography utilities (the `@utility text-*` faces from the old app.css,
 * which the Tailwind bundle cannot generate — they are custom app utilities,
 * not Tailwind utilities) plus the small bespoke structure the blocks need.
 * The panel frame itself is the shared `block-panel` (B03); everything inside
 * uses the reference's own Tailwind classes verbatim. */

/* ── The reference's typography faces (app.css `@utility text-*`) ─────────
   Mapped onto the app's --ta-* tokens. These are app-wide, not donation-
   specific; they live here because B11 owns this file and no other batch has
   ported them yet. Same values as the reference so diffstyles matches. */

.text-headline {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.text-label {
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}

.text-caption {
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 400;
}

.text-mono-label {
  font-family: var(--ta-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ta-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Family people: the selected person's details grid ────────────────────
   A static read-only stand-in for the reference's RecordDetails (which is
   editable + lazy-materialises). Label / value rows, the same quiet cadence
   as the record-detail grid. */

.family-details {
  display: grid;
  gap: 0.75rem;
}

.family-detail-row {
  display: grid;
  gap: 0.15rem;
}

.family-detail-value {
  font-weight: 500;
  color: var(--ta-text);
}

/* ── Donation wall: nothing bespoke is needed — the total panel and the
   gift rows are pure reference Tailwind classes (font-mono text-3xl total,
   divide-y rows). The old hand-rolled `.donation-card` grid is retired in
   favour of the reference Panel composition. ─────────────────────────────── */

/* ── Inline lucide icons inside a `size-*` wrapper span ───────────────────
   The reference applies the `size-*` classes to the SVG itself; our
   `lucide()` helper renders a fixed 24×24 SVG, so it is wrapped and the SVG
   is sized to its wrapper (the house `.stat-icon` pattern). */
.b11-icon {
  display: inline-flex;
}

.b11-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Tribute wall: the panel owns its own box ─────────────────────────────
   The reference's tribute wall is a `glass-card` whose children carry all the
   padding (header `px-5 py-4`, list `px-4 py-5`), so the card itself must be
   padding-free — the same element+class pattern as `block-panel`. */
.tribute-wall.glass-card {
  padding: 0;
}

/* ── Plain buttons: the reference's preflight face ────────────────────────
   `buttons.css` gives EVERY button an opinionated face (0.5rem 1rem padding,
   0.92rem/600 font, sm radius, centred content). The reference's buttons are
   plain — Tailwind preflight gives them no box and the font inherits — with
   the utility classes doing the work. Restore that for the B11 blocks'
   non-`.btn` buttons (scoped per block so rows that DO size themselves keep
   their utilities). Colour/background/gap are left alone — the base rule and
   the (now unlayered) utilities already resolve those. */
.public-pages button {
  padding: 0;
  border: 0;
  border-radius: 0;
  justify-content: inherit;
  white-space: normal;
}

.family-people .w-36 button {
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  justify-content: normal;
  white-space: normal;
}

.tribute-wall button {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  justify-content: inherit;
  white-space: normal;
}

/* The selected person row's accent wash. The reference's `--accent` is a
   light neutral (oklch(0.955 0.008 262)); our tailwind theme maps `--color-
   accent` to the blue `--ta-accent-soft`, so `bg-accent` would tint blue.
   Restore the reference value for the row (and its hover) — raised in the
   report as a tailwind-theme mapping consideration. */
.family-people .w-36 button.bg-accent {
  background-color: oklch(0.955 0.008 262);
}

.family-people .w-36 button:hover {
  background-color: color-mix(in oklab, oklch(0.955 0.008 262) 60%, transparent);
}

/* The primary star reads dark, like the reference's `--accent-foreground`
   (`oklch(0.36 0.09 262)` at the utility's 70%); our theme maps that token to
   the blue `--ta-accent-hover`. The reference star is a bare block SVG too. */
.family-people .text-accent-foreground\/70 {
  display: block;
  color: oklch(0.36 0.09 262 / 0.7);
}

/* ── Wall rows inherit the body cadence ───────────────────────────────────
   `base.css` gives every `li` line-height 1.55; the reference's rows inherit
   the body's 1.5 (Tailwind preflight zeroes li line-height). Scoped here so
   the entry rows and their bare text inherit 1.5 like the reference. */
.tribute-wall li,
.donation-wall li,
.family-people li {
  line-height: 1.5;
}

/* ── `glass-tile` inside a panel reads opaque, not translucent ────────────
   The reference's foundation makes a nested tile give up its glassy chrome
   (`app.css`: `.glass-card :is(…, .glass-tile, …) { background: var(--background);
   box-shadow: none }`) — a white circle on a white panel. Our `vitrine.css`
   only handles nested glass-cards, so the tribute/family avatars (message
   entries, the client ring) would float translucent over the panel. Mirror the
   reference here (scoped to these blocks); the foundation rule belongs in
   `vitrine.css` — raised in the B11 report. */
.tribute-wall .glass-tile,
.family-people .glass-tile {
  background: var(--ta-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}