/* Story Becomes · /books/, a book's big ideas made into a short movie (books.js). Loaded after gift.css, whose
   components it uses as they are (the header, the screen, the CTA bar, options, chips, fields, photo rows, the
   marquee, looks, the offer card, the screening); every rule here is keyed on .funnel--books, 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 /books copy. */

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

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

/* ---------- the kickers: the two stacked lines over a headline (fork, book on an ad's entry, mode, face, message) ---------- */
.funnel--books .kicker { margin-bottom: 1rem; }
.funnel--books .q-note p + p { margin-top: .15rem; }

/* ---------- the book list: a chip per book, its title, then its author on a small line of its own ---------- */
.funnel--books .bchips { gap: .5rem; max-width: 40rem; }
.funnel--books .bchip { flex-direction: column; align-items: flex-start; height: auto; min-height: 2.75rem; padding-top: .4rem; padding-bottom: .4rem; text-align: left; line-height: 1.15; }
.funnel--books .bchip__by { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 500; opacity: .7; }

/* ---------- the title card on the reader screen: the book, then "made for" and the reader's name in lights ---------- */
.funnel--books .bcard__book { font-family: "Anton", "Impact", "Arial Narrow", sans-serif; font-size: clamp(1.25rem, 6vw, 1.9rem); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.funnel--books .bcard__for { margin-top: .75rem; }

/* ---------- options: "our pick" as a small white tab on the top edge (kids.css's), a price kept clear of it ---------- */
.funnel--books .opt .opt__chip { position: absolute; right: .5rem; top: -.7rem; height: 1.3rem; font-size: .65rem; background: #fff; color: #000; }
.funnel--books .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--books input.inp { text-overflow: ellipsis; }
.funnel--books 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 life screen's place photos: the label above the rows ---------- */
.funnel--books #srecs > .field__label { margin-bottom: .5rem; }

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