/* Read Them Well — pink pass
   Drop-in layer. Load LAST, after rtw-tokens.css, rtw-chrome.css, rtw-home.css.
   No markup changes required.

   Intent: blush stops being a footer-only accent and becomes the second brand
   color, appearing in every field of the page. Where blush and cherry touch,
   ink is oxblood (5.56:1 on blush) or cream (4.52:1 on cherry) — blush type on
   cherry is never used, only blush shapes. */

:root {
  --rtw-blush-soft: #FBE4E8;   /* pale pink ground for surfaces that hold body copy */
  --rtw-blush-line: #E0A4AE;   /* pink hairline that survives on cream and toned cream */
}

/* ---------- Header: pink rule under the sticky bar ---------- */

.rtw-header { border-bottom: 3px solid var(--rtw-blush); }
.rtw-header nav a:not(.rtw-btn):hover { color: var(--rtw-oxblood); }

/* ---------- Hero ---------- */

/* Kicker becomes a blush pill — first pink the eye lands on. */
.home-hero__kicker {
  align-self: flex-start;
  background: var(--rtw-blush);
  color: var(--rtw-oxblood);
  border-radius: var(--rtw-r-pill);
  padding: 7px 16px;
}

/* Pink scrawl under the cherry headline: the pink/red tension, above the fold. */
.home-hero__title .rtw-scrawl { background-image: url("assets/fun/scrawl-pink.svg"); }

/* Seal is stamped in pink on the kraft instead of red — an outline scallop at
   low opacity, so the jacket stays the loudest thing on the parcel. */
.rtw-parcel__seal {
  top: 6%;
  left: 3%;
  width: min(112px, 22%);
}
.rtw-parcel__seal .rtw-seal__mono { font-size: clamp(10px, 1vw, 13px); }
.rtw-parcel__seal::before {
  background-image: url("assets/fun/scallop-outline-red.svg");
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.rtw-parcel__seal .rtw-seal__mono { color: var(--rtw-oxblood); opacity: 0.75; }

/* ---------- Every empty cover slot reads pink ---------- */

.rtw-cover {
  background: repeating-linear-gradient(135deg, #FFFDFA 0 10px, var(--rtw-blush-soft) 10px 20px);
}
.rtw-cover--filled { background: var(--rtw-surface); }

/* Months two and three are wrapped parcels, not empty slots. The stripe is for
   a cover we do not have yet; kraft is a cover we are deliberately not showing,
   and that distinction is the whole point of the shelf. Restated here because
   the shorthand above lands later in the cascade than the token layer's wrap.
   Kept at one class of specificity so `--filled` still wins when art arrives. */
.rtw-cover--wrapped {
  background-color: var(--rtw-kraft);
  background-image: var(--rtw-kraft-image);
  background-size: cover;
  background-position: center;
}

.rtw-cover__slot { color: #B4707D; }

/* ---------- Sign-up callout: pale pink card on the cream/cherry seam ---------- */

#alpha-list.rtw-callout { background: var(--rtw-blush-soft); }
.alpha-head h2 { color: var(--rtw-oxblood); }
.alpha-head p { color: var(--rtw-body); }
#alpha-list .rtw-label-field { color: var(--rtw-oxblood); }
#alpha-list .rtw-input { background: var(--rtw-surface); border-color: #EDC8CE; }
#alpha-list .rtw-input:focus { border-color: var(--rtw-cherry); }
#alpha-list .rtw-small { color: #8A5B5F; }

/* ---------- How it works (cherry field): blush shapes on red ---------- */

.rtw-field--cherry .rtw-step-no {
  background: var(--rtw-blush);
  border-color: var(--rtw-blush);
  color: var(--rtw-oxblood);
}
.rtw-row--ruled { border-top-color: #F2A0AE80; }
.rtw-btn--on-cherry { background: var(--rtw-blush); }
.rtw-btn--on-cherry,
.rtw-btn--on-cherry:hover { color: var(--rtw-oxblood); }
.rtw-btn--on-cherry:hover { background: var(--rtw-cream-ink); }

/* ---------- Shelf examples (toned field) ---------- */

#examples > h2::after {
  content: "";
  display: block;
  width: min(320px, 68%);
  height: 17px;
  margin-top: 12px;
  background: url("assets/fun/scrawl-pink.svg") left center / 100% 17px no-repeat;
}

.rtw-tab { border-color: var(--rtw-blush-line); }
.rtw-tab:hover { border-color: var(--rtw-oxblood); color: var(--rtw-oxblood); }
.rtw-tab[aria-selected="true"],
.rtw-tab.is-active {
  background: var(--rtw-blush);
  border-color: var(--rtw-blush);
  color: var(--rtw-oxblood);
}

.rtw-chip { border-color: var(--rtw-blush-line); color: var(--rtw-oxblood); }

/* Month one gets a blush sticker instead of cherry lettering. */
.shelf-month__label--first {
  align-self: flex-start;
  background: var(--rtw-blush);
  color: var(--rtw-oxblood);
  border-radius: var(--rtw-r-pill);
  padding: 4px 13px;
}

/* ---------- Closing CTA + footer ---------- */

/* The blush card already lands here; the pill goes cherry so red sits inside
   pink once, the mirror of the pink-on-red steps above. */
.closing-cta .rtw-btn--oxblood { background: var(--rtw-cherry); }
.closing-cta .rtw-btn--oxblood:hover { background: var(--rtw-oxblood); }

.site-footer__scrawl { background-image: url("assets/fun/scrawl-pink.svg"); }

/* ============================================================
   READER INTAKE (reader.html)
   Same rules: pink grounds and pink shapes, oxblood ink on top.
   The thread stays white — it is the reading surface — and pink
   arrives on everything around it: rail, user bubbles, avatars,
   answered prompts, the send key, and the payoff shelf.
   ============================================================ */

.rtw-progress__dot.is-done { background: var(--rtw-blush); }

/* Tilda's mark stays the red seal on every message. */

/* The gifter's own words come back on pale pink instead of toned cream. */
.rtw-msg--user .rtw-msg__body { background: var(--rtw-blush-soft); }

/* Prompt cards: pink stroke on the live question only; answered ones fall back
   to the beige stroke the token layer gives them. */
.rtw-prompt:not(.rtw-prompt--answered) { border-color: var(--rtw-blush-line); }
.rtw-prompt__count { color: var(--rtw-oxblood); }

/* Selection stays cherry-outlined; the confirming badge goes pink. */
.rtw-option[aria-pressed="true"]::after {
  background: var(--rtw-blush);
  color: var(--rtw-oxblood);
}

/* Thinking pill: pale pink, cherry dots. */
.rtw-thinking { background: var(--rtw-blush-soft); }
.rtw-thinking .rtw-small { color: var(--rtw-oxblood); }
.rtw-thinking__dots span { background: var(--rtw-cherry); }

/* Send key */
.rtw-send { background: var(--rtw-blush); color: var(--rtw-oxblood); }
.rtw-send:hover { background: var(--rtw-cherry); color: #FFFFFF; }

/* Tilda's notes rail and the "why this one" cards keep their cream and beige
   grounds — pale pink is lost against the toned field. */

/* Draft shelf */
.draft-shelf .rtw-scrawl { background-image: url("assets/fun/scrawl-pink.svg"); }
.rtw-shelf__month--first {
  /* .rtw-shelf__book is a subgrid, so this element is a grid item: align-self
     would control the block axis and leave the pill full-width. */
  justify-self: start;
  background: var(--rtw-blush);
  color: var(--rtw-oxblood);
  border-radius: var(--rtw-r-pill);
  padding: 4px 13px;
}
.rtw-checkout-row { border-top-color: #DDBBBF; }

/* Swap panel */
.rtw-swap-panel__note { background: var(--rtw-blush-soft); }
.rtw-alt { border-color: var(--rtw-blush-line); }
.rtw-alt:hover { border-color: var(--rtw-cherry); }
.rtw-close { border-color: var(--rtw-blush-line); }
.rtw-close:hover { border-color: var(--rtw-oxblood); color: var(--rtw-oxblood); }