/* ============================================================================
 * 1234 SHARED·PORTRAITLINE — one of her Portrait lines, with its week.
 * ============================================================================
 * claims/card-1234.md. WHAT IT IS. One row of "From her portrait" on the phase
 * report card (1237 HOME·PHASE-REPORT, the closing card of a phase): the
 * question she was asked and the answer she gave, or — when the row is her own
 * words — the label "Your notes" and what she said, verbatim. The week she
 * answered sits at the right of the first line.
 *
 * TWO VARIANTS, ONE ANATOMY (signed pictures redraw-1..5, 2026-10-03):
 *   · answer — label = the question stem (13px, ink-600), content = her answer
 *     (17px/600, ink). e.g. "How does Caïa usually fall asleep at bedtime?" /
 *     "Rocked or held" · Week 4.
 *   · words  — label = "Your notes", content = her free text set in the
 *     display face (17px/400, ink, the keepsake's one Fraunces line), wrapped
 *     in quotes by the renderer. e.g. "She only sleeps if I hold her, and I
 *     do." · Week 7.
 * The anatomy is shared on purpose: the two sit in ONE list and must read as
 * siblings. The variant is the only choice a consumer makes — that is what
 * makes this a COMPONENT, not a D-747 type.
 *
 * NOT 1067 SHARED·QUESTIONROW: that row is a tool ASKING a question with an
 * answer CONTROL in its slot — a form. This row is a RECORD of what she
 * already answered — no control, no slot, a week meta. Different job.
 *
 * NOT 414 SHARED·PULLQUOTE: the words variant is deliberately NOT the pale
 * display quote — "readable ink, not pale teal italic" (v3 fix 3, carried into
 * the signed pictures). No --kind-ink, no italic, no left rule.
 *
 * 🔴 SaMD: the row states what SHE said and when she said it. There is no prop
 * for a typical answer, a norm, or a verdict; the renderer renders only what
 * the caller passes. Portrait is her own words — never generated, never
 * summarised (D-396, D-629).
 *
 * TOKENS ONLY. Spacing on the 4px grid. The week ink is --ink-600 (D-740:
 * secondary text; --ink-400 never carries text).
 * ============================================================================
 * STATES (cards.json): answer · words · quote — the three variants, all reachable
 * from the same markup the renderer emits (quote also carries the clamp option).
 */

.pvl {
  margin: 0;
}
/* first line: the label and its week, baseline-aligned, week holds right */
.pvl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
} /* align-exception: .pvl-top — the week holds to the FIRST line of the question; a long question wraps to several lines, so the week is deliberately baseline-aligned to line one, not box-centred against the whole wrapped block */
.pvl-q {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-150);
  color: var(--ink-600);
}
.pvl-w {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-150);
  color: var(--ink-600);
}
/* the content under the label — full width, so a long answer keeps the week's
 * column clear (the signed pictures wrap answers under the question) */
.pvl-a {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  /* D-712's Inter-17 body; no role name in the scale */
  font-size: var(--size-17); /* token-exception */
  line-height: var(--leading-150);
  font-weight: var(--weight-600);
  color: var(--text-primary);
}
/* words variant: her own text in the display face, regular weight, ink — the
 * keepsake's one Fraunces line (signed pictures; NOT the 414 pullquote) */
.pvl.is-words .pvl-a {
  font-family: var(--font-display);
  font-weight: var(--weight-400);
  line-height: var(--leading-135);
}

/* quote variant (Andrew, 2026-10-04, "keepsake highlights", look A): her one
 * answer set large in the display face, curly quotes added by the renderer, a
 * small teal opening mark (teal-700 — teal-600 is 4.23:1 as text, below the 4.5
 * floor), no box. The question/"Your notes" stays the small grey line above. */
.pvl.is-quote .pvl-top {
  margin-bottom: var(--space-8);
}
.pvl.is-quote .pvl-a {
  margin: 0;
  font-family: var(--font-display);
  /* the card title's own size; no 24 role in the scale (modulehead's raised debt) */
  font-size: var(--size-24); /* token-exception */
  line-height: var(--leading-135);
  font-weight: var(--weight-400);
  color: var(--text-primary);
}
.pvl.is-quote .pvl-qo {
  color: var(--teal-700);
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.12em;
}
/* PROVISIONAL cap — four lines then an ellipsis; the full text stays in the DOM */
.pvl.is-quote.is-clamp .pvl-a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}