/* SHARED·FEEDROW (439) — one row in a chronology of logged feeds/sleeps. Copy-first port off
 * logger-surface.css's own `.fd` block — class names unchanged for check 65. Owns
 * `.fd`/`.fd .t`/`.fd .ic`/`.fd .b`/`.fd .w`/`.fd .m`/`.fd .rx`/`.fd .wk`/`.fd.pend`/`.pend-add`/
 * `.fd .algt`. Does NOT own `.k-solid`/`.k-breast`/`.k-bottle`/`.k-nappy` — 1006 SHARED·
 * KINDTRIPLE's territory (not yet built); `.fd .ic` renders those class names with no colour
 * attached until 1006 lands (see feedrow.render.js's own header note).
 *
 * `.fd.pend`/`.pend-add`/`.fd .wk` are ported (the family genuinely owns these rules) but have
 * NO BUILT STATE in this card — dead code, zero live callers, see the render.js header for why.
 * `.fd .algt` is bottle.js's own allergen-tag modifier on a row inside `.fd` (the food-tag
 * eyebrow style, shared with `.algt` itself elsewhere) — ported for the same reason: the rule
 * exists and is grep-confirmed genuinely part of this family, not invented.
 *
 * Font-size role tokens: 15->--text-body-sm, 13->--text-caption, 12->--text-meta, all exact.
 */
.fd { display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) 0; border-top: var(--radius-2) solid var(--border-hairline); }
/* ⚠️ RULED 2026-08-30 (Andrew: "align middle both the icon and the time on the left hand
 * side", narrowed to "keep the righthand side the same" for the WITH-META row specifically —
 * the left-hand pair centres against .b's height there; .b/.w/.m's own internal spacing is
 * untouched. Verified by comparing .b's computed bounding rect before/after that fix —
 * identical, not eyeballed.
 * ⚠️ SECOND ROUND (Andrew: "plain one wrong... all elements should be aligned along the
 * horizontal axis"): the with-meta fix alone left the PLAIN (single-line) row misaligned —
 * .b was never centred, only .t/.ic were, so on a row where the 32px icon is taller than one
 * line of text, .b's own text sat above centre while the icon and time sat on it. Plain has no
 * two-line spacing to protect, so here .b centres too — :has() scopes it to exactly the plain
 * case, leaving the with-meta row's own ruling untouched. */
.fd .t { font-family: var(--font-label); font-size: var(--text-meta); color: var(--text-secondary);
  width: var(--dim-40); flex: 0 0 auto; align-self: center; }
.fd .ic { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
  display: grid; place-items: center; flex: 0 0 auto; align-self: center; }
.fd .ic svg { width: var(--dim-16); height: var(--dim-16); }
.fd .b { flex: 1; min-width: 0; }
.fd .b:not(:has(.m)) { align-self: center; }
.fd .w { display: block; font-size: var(--text-body-sm); font-weight: var(--weight-600); }
.fd .m { display: block; font-size: var(--text-caption); color: var(--text-secondary);
  line-height: var(--leading-145); margin-top: var(--space-4); }
.fd .rx { width: var(--dim-32); height: var(--dim-32); border-radius: var(--radius-round);
  background: var(--gold-200); color: var(--gold-800);
  display: grid; place-items: center; flex: 0 0 auto; }
.fd .rx svg { width: var(--dim-16); height: var(--dim-16); }
/* DEAD CODE, ported honestly — no built state renders these two. */
.fd .wk { flex: none; font-family: var(--font-label); font-size: var(--text-meta);
  color: var(--text-secondary); }
.fd.pend { border: var(--radius-2) dashed var(--border-hairline);
  border-radius: var(--radius-control); background: none; }
.pend-add { flex: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: var(--weight-600);
  color: var(--accent-hover); padding: 0 var(--space-8); }
.pend-add:focus-visible { outline: var(--radius-2) solid var(--accent); outline-offset: var(--radius-2); }
.fd .algt { display: block; }