/* Story Becomes · /kids/, the movie a parent or grandparent makes for a child (kids.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
   screening); every rule here is keyed on .funnel--kids, the page's body class, so /gift never sees 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 /kids copy. */

/* ---------- page: gift.css's .funnel--start page rules, for this page ---------- */
.funnel--kids .ftip { bottom: calc(var(--fcta-h, 6rem) + .75rem + env(safe-area-inset-bottom, 0px)); }
.funnel--kids .scr--kid .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--kids .scr__label { margin-bottom: .9rem; }
  .funnel--kids .q-sub { margin-top: .75rem; }
  .funnel--kids .q-body { margin-top: 1.25rem; }
  .funnel--kids .fcta { padding-top: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; }
  .funnel--kids .fcta .tag3d--xl { --fs: 1.5rem; }
}
@media (max-width: 991px) and (max-height: 600px) and (min-height: 501px) {
  .funnel--kids .fcta .tag3d--xl { --fs: 1.3rem; }
}

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

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

/* ---------- the fork: the two stacked kicker lines over the headline ---------- */
.funnel--kids .scr--fork .kicker { margin-bottom: 1rem; }
.funnel--kids .scr--fork .q-note { margin-top: .9rem; }

/* ---------- the birthday: month, day and year on one row ---------- */
.funnel--kids .bday-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: .75rem; max-width: 34rem; }
.funnel--kids .bday-row .field + .field { margin-top: 0; }
.funnel--kids .bday-row select.inp { font-size: 1.15rem; }

/* ---------- chips: groups under a label, the one picked's line, the tags inside a chip ---------- */
.funnel--kids .kgroup { max-width: 40rem; }
.funnel--kids .kgroup + .kgroup, .funnel--kids .kgroup + .link { margin-top: 1.25rem; }
.funnel--kids .kgroup .field__label { margin-bottom: .5rem; }
.funnel--kids .kgroup__line { margin-top: .6rem; color: var(--ink-2); }
.funnel--kids .kgroup__line[hidden] { display: none; }
.funnel--kids .dets + .link, .funnel--kids .dets + .t-body { margin-top: .75rem; }
.funnel--kids .kchip--case { text-transform: none; } /* a grade keeps its case: K, pre-K, 1st */
.funnel--kids .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; }
.funnel--kids .kchip__n { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: .45rem; padding: 0 .2rem; border-radius: 50%; background: #fff; color: #000; font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* "our pick" on an option: a small white tab on its top edge, so a two-column grid keeps its labels clear */
.funnel--kids .opt .opt__chip { position: absolute; right: .5rem; top: -.7rem; height: 1.3rem; font-size: .65rem; background: #fff; color: #000; }
.funnel--kids .opt .opt__txt { flex: 1 1 auto; }
/* the ideas that failed to load: the lines, then a quiet try again */
.funnel--kids .k-err { margin-bottom: 1.25rem; }

/* ---------- a short answer in its own words: the small boxed note (gift.css .det .inp), so a long example never runs off a phone ---------- */
.funnel--kids input.inp { text-overflow: ellipsis; } /* a long example on a phone ends in an ellipsis, never mid-word at the edge */
.funnel--kids textarea.inp--s { min-height: 4.75rem; font-size: 1.05rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; padding: .65rem .8rem; }

/* ---------- the people: a name (and an age) per tapped chip ---------- */
.funnel--kids .kpeople { display: grid; gap: 1rem; max-width: 34rem; }
.funnel--kids .kpeople:empty { display: none; }
.funnel--kids .kperson { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.funnel--kids .kperson .field + .field { margin-top: 0; }
.funnel--kids .kperson .field:only-child { grid-column: 1 / -1; }

/* ---------- the little things: a full kind says so instead of an add slot ---------- */
.funnel--kids .det__full { color: var(--ink-2); max-width: 28rem; }

/* ---------- the when screen's "No date yet" tick ---------- */
.funnel--kids .kdate-none { grid-template-columns: auto minmax(0, 1fr); margin-top: 1rem; padding: .65rem .9rem; max-width: 34rem; }

/* ---------- the offer: two equal cards (stacked on a phone), nothing picked until they tap ---------- */
.funnel--kids .kcards { display: grid; gap: 1.25rem; max-width: 52rem; }
@media (min-width: 768px) { .funnel--kids .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* side by side, the same height */
.funnel--kids .kcard {
  --xd: 0px; --xc: #000; position: relative; display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem 1rem 1.2rem; margin: 0 0 6px 6px;
  border: 1.5px solid #000; border-radius: 0 .6rem .6rem 0; background: #fff; color: #000; cursor: pointer;
  box-shadow: calc(var(--xd) * -.5) calc(var(--xd) * .5) 0 var(--xc), calc(var(--xd) * -1) var(--xd) 0 var(--xc);
  transition: --xd .25s var(--ease-snap);
}
.funnel--kids .kcard.is-on { --xd: 6px; border-width: 2px; }
@media (hover: hover) { .funnel--kids .kcard:not(.is-on):hover { --xd: 4px; } }
.funnel--kids .kcard__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; width: 100%; text-align: left; cursor: pointer; }
.funnel--kids .kcard__top::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-right: .1rem; align-self: center; border: 2px solid #000; border-radius: 50%; }
.funnel--kids .kcard__top[aria-pressed="true"]::before { background: #000; box-shadow: inset 0 0 0 3px #fff; }
.funnel--kids .kcard__top:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.funnel--kids .kcard__name { flex: 1 1 10rem; min-width: 0; font-weight: 600; font-size: clamp(1.15rem, 4.8vw, 1.5rem); line-height: 1.05; letter-spacing: -.05em; text-transform: lowercase; }
.funnel--kids .kcard__price { margin-left: auto; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel--kids .kcard__was { margin-right: .2rem; color: var(--ink-2); font-weight: 600; font-size: 1.05rem; }
.funnel--kids .kcard__tag { display: inline-block; margin-left: .45rem; padding: 0 .35rem; vertical-align: .2em; border: 1px solid #000; border-radius: 0 .3rem .3rem 0; font-size: .65rem; font-weight: 700; letter-spacing: 0; line-height: 1.2rem; text-transform: lowercase; }
.funnel--kids .kcard__why { margin: 0; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em; }
.funnel--kids .kcard .field__label { margin-bottom: -.35rem; }
.funnel--kids .krhythm { gap: .5rem; }
.funnel--kids .krhythm .opt { min-height: 3rem; padding: .6rem .75rem; cursor: pointer; }
.funnel--kids .krhythm .opt__label { font-size: 1rem; }
.funnel--kids .krhythm .opt__line { font-size: .8rem; line-height: 1.1rem; }
.funnel--kids .kbill p { font-size: .95rem; line-height: 1.35rem; }
.funnel--kids .kbill p + p { margin-top: .15rem; }
.funnel--kids .kterms { margin-top: 0; max-width: none; cursor: default; }
.funnel--kids .kcard .pkg__list { margin-top: 0; }
.funnel--kids .lineitem--then { color: var(--ink-2); font-size: .9rem; }

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

@media (prefers-reduced-motion: reduce) { .funnel--kids .kcard { transition: none; } }