/* Story Becomes · /remember/, the film from someone who passed (remember.js). Loaded after gift.css, whose
   components it uses as they are (the header, the screen, the CTA bar, options, chips, fields, photo rows, looks, the
   card, the screening); every rule here is keyed on .funnel--remember, the page's body class, so /gift and /kids never
   see one. The colour and type tokens are style.css's :root ones (tools/test/brand-tokens.test.mjs): none is
   redefined here. No sticky reel on this page, so gift.css's reel-space rules (keyed on .funnel--start) have no copy. */

/* ---------- page: gift.css's .funnel--start page rules, for this page ---------- */
.funnel--remember .ftip { bottom: calc(var(--fcta-h, 6rem) + .75rem + env(safe-area-inset-bottom, 0px)); }
.funnel--remember .scr--who .q-sub { font-size: .95rem; line-height: 1.4; max-width: 30rem; }
/* short phones: a tighter screen and CTA bar, so the question starts above the fold */
@media (max-width: 991px) and (max-height: 760px) and (min-height: 501px) {
  .funnel--remember .scr__label { margin-bottom: .9rem; }
  .funnel--remember .q-sub { margin-top: .75rem; }
  .funnel--remember .q-body { margin-top: 1.25rem; }
  .funnel--remember .fcta { padding-top: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; }
  .funnel--remember .fcta .tag3d--xl { --fs: 1.5rem; }
}
@media (max-width: 991px) and (max-height: 600px) and (min-height: 501px) {
  .funnel--remember .fcta .tag3d--xl { --fs: 1.3rem; }
}

/* ---------- the header count: on an optional screen, "optional" sits on its own line on a phone (remember.js updateChrome) ---------- */
.funnel--remember .fhead__count { text-align: right; line-height: 1.1; }
.funnel--remember .fhead__opt { color: var(--ink-3); }
@media (max-width: 767px) { .funnel--remember .fhead__opt { display: block; } .funnel--remember .fhead__dot { display: none; } }

/* ---------- the CTA bar's quiet way on: "skip to my free first look" under the button of each optional screen ---------- */
.funnel--remember .fcta__skip { align-self: flex-start; min-height: 2rem; }

/* ---------- the fork: the two stacked kicker lines over the headline, the two notes under the options ---------- */
.funnel--remember .scr--fork .kicker { margin-bottom: 1rem; }
.funnel--remember .scr--fork .q-note { margin-top: .9rem; }
.funnel--remember .scr--fork .q-note p + p { margin-top: .2rem; }

/* ---------- the first card: gift.css's marquee, quiet. No bulbs and no flicker: this is a film from someone, not a premiere ---------- */
.funnel--remember .marquee::before { display: none; }
.funnel--remember .marquee__now { letter-spacing: .2em; text-transform: lowercase; }
.funnel--remember .marquee__name.is-lit { animation: none; }

/* ---------- the quiet optional links (how to say the name, the pronouns, the years, another day): one per line ---------- */
.funnel--remember .q-body > button.link { display: table; text-align: left; }

/* ---------- born and passed, side by side ---------- */
.funnel--remember .years-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 34rem; }
.funnel--remember .years-row .field + .field { margin-top: 0; }

/* ---------- chips: groups under a label ---------- */
.funnel--remember .kgroup { max-width: 40rem; }
.funnel--remember .kgroup + .kgroup { margin-top: 1.25rem; }
.funnel--remember .kgroup .field__label { margin-bottom: .5rem; }
.funnel--remember .dets + .link, .funnel--remember .dets + .t-body { margin-top: .75rem; }
.funnel--remember .kchip__tag { margin-left: .45rem; padding: 0 .35rem; border: 1px solid currentColor; border-radius: 0 .3rem .3rem 0; font-size: .7rem; line-height: 1.2rem; }
/* "our pick" on a look stays gift.css's; on an option, a small white tab on its top edge */
.funnel--remember .opt .opt__chip { position: absolute; right: .5rem; top: -.7rem; height: 1.3rem; font-size: .65rem; background: #fff; color: #000; }
.funnel--remember .opt .opt__txt { flex: 1 1 auto; }

/* ---------- a short answer in its own words: the small boxed note, so a long example never runs off a phone ---------- */
.funnel--remember input.inp { text-overflow: ellipsis; }
.funnel--remember textarea.inp--s { min-height: 4.75rem; font-size: 1.05rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; padding: .65rem .8rem; }

/* ---------- a photo row's own label over it (the memory, the things, the listener) ---------- */
.funnel--remember .rowlabel { margin-bottom: .5rem; }

/* ---------- the faith question: the segmented yes or no under its link ---------- */
.funnel--remember .seg--faith button { text-transform: none; }

/* ---------- their voice: the recordings picked, one row each, the running total, the folded help ---------- */
.funnel--remember .tvoice { max-width: 40rem; }
.funnel--remember .tvoice__files { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.funnel--remember .tvoice__file { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .65rem .9rem; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; }
.funnel--remember .tvoice__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.funnel--remember .tvoice__total { color: var(--ink-2); margin-bottom: 1rem; }
.funnel--remember .tvoice__pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.funnel--remember .tvoice__pick:focus-within { outline: 2px solid #000; outline-offset: 3px; }
.funnel--remember .tvoice__help { color: var(--ink-2); max-width: 34rem; }
.funnel--remember .tvoice__err { max-width: 34rem; }

/* ---------- the film screen: the line before the hand-off to the account ---------- */
.funnel--remember .handoff { color: var(--ink-2); max-width: 34rem; }