/* ============================================================================
 * 1235 SHARED·KEEPSAKELINE — one keepsake line: a leading mark and her fact.
 * ============================================================================
 * claims/card-1235.md. WHAT IT IS. One row of "Her firsts" or "Your logs" on the
 * phase report card (1237 HOME·PHASE-REPORT): a small round mark in the phase
 * colour, her fact, and — on a first — the week it happened at the right.
 *
 * TWO VARIANTS (signed pictures redraw-1..5, 2026-10-03):
 *   · first — the 22px pebble of the locked milestones card (604's marked
 *     shape: phase fill + the drop-shadow that says "met"), her first's name
 *     in 600, "Week N" right. e.g. ● First smile · Week 6.
 *   · log   — the small dot, her line in regular weight, no week.
 *     e.g. · About 7 feeds a day.
 * The variants share one anatomy on purpose — the two lists sit in ONE card and
 * must read as siblings. The variant is the one choice a consumer makes; that
 * is what makes this a COMPONENT, not a D-747 type.
 *
 * NOT 1060 SHARED·MILESTONEROW: that row is the YEAR LIST line — provenance
 * eyebrow, date, optional note, media-thumb slot. Five of its six slots are
 * absent here; the keepsake line names the first and its week and nothing else
 * (measured, 4003 assess C3).
 *
 * THE MARK'S COLOUR IS A CUSTOM PROPERTY (--ksl-mark, default --phase-1). The
 * host sets it once per card — the same composition 1006 SHARED·KIND TRIPLE
 * rules: three custom properties a block sets once, a type's grammar. The card
 * recipe sets it from the baby's phase; the line never reads the phase itself.
 *
 * 🔴 SaMD: the line states a RECORDED fact of hers — a first she ticked, a
 * plain count of her own logs. No prop exists for a norm, a percentile, a
 * comparison, or an adjective; the renderer renders only what the caller
 * passes. The "About" in a log line is Andrew's own hedge, kept verbatim from
 * the signed pictures — it hedges the arithmetic of her own records, it never
 * compares her to anyone.
 *
 * TOKENS ONLY. Pebble = --dim-24 (the signed drawing sits at 22px; the token
 * rung is 24 — the 4px grid has no 22; named in the build report). Dot =
 * --dim-12. Drop-shadow rgba carries the pmc precedent's token-exception.
 * ============================================================================
 * STATES (cards.json): first · first-long · first-summary · log · log-hours — the two variants (first-summary is a first with no week; the wrap option pins the mark to line one), both reachable from the
 * same markup the renderer emits.
 */

.ksl {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
/* the mark — phase colour arrives from the host's --ksl-mark */
.ksl-mark {
  width: var(--dim-12);
  height: var(--dim-12);
  flex: none;
  border-radius: var(--radius-round);
  background: var(--ksl-mark, var(--phase-1));
}
/* first variant: the pebble — 604's marked shape (fill + depth = state, D-404) */
.ksl.is-first .ksl-mark {
  width: var(--dim-24);
  height: var(--dim-24);
  filter: drop-shadow(0 2px 3px rgba(26, 58, 48, 0.18)); /* token-exception */
}
.ksl-t {
  font-family: var(--font-body);
  /* D-712's Inter-17 body; no role name in the scale (week-hero.css's own raised debt) */
  font-size: var(--size-17); /* token-exception */
  line-height: var(--leading-150);
  color: var(--text-primary);
}
.ksl.is-first .ksl-t {
  font-weight: var(--weight-600);
}
.ksl-w {
  margin-left: auto;
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-150);
  color: var(--ink-600);
}

/* wrap option — a summary line that may run to two lines: the mark pins to the
 * FIRST line rather than centring on the block (the dot sits a rung down so it
 * lands on the first line's x-height; the 24px pebble already fills a line) */
.ksl.is-wrap {
  align-items: flex-start;
} /* align-exception: .ksl — the mark pins to the FIRST line of a summary that wraps to two lines; centring it on the whole wrapped block would float it between the lines, which is the look this option exists to avoid */
.ksl.is-wrap .ksl-mark {
  margin-top: var(--space-4);
}
.ksl.is-wrap.is-first .ksl-mark {
  margin-top: 0;
}