/* LoveBlossom garden: the flower first (shapes in templates/_flora_defs.html,
   markup from _flower.py), then the garden screens (.garden, .plot, .moment)
   below. Everything here is prefixed: .flower, .fl-*, .pal-*, .fmn-open.
   Petals keep their hue in dark mode; only the ink line (now a moonlight rim)
   and the full-bloom glow change. No color-mix() (iOS 15). */

/* ------------------------------------------------------- flower: tokens */
:root {
  --fl-stem: var(--stem, #5E9F64);
  --fl-stem-d: #4F8B56;
  --fl-leaf-a: var(--leaf-a, #7DBB78);
  --fl-leaf-b: var(--leaf-b, #B5DB9C);
  --fl-leaf-d: var(--vein, #4E8A55);
  --fl-vein: var(--vein, #4E8A55);
  --fl-coty-a: #97C987;
  --fl-coty-b: #CFE8B6;
  --fl-sepal-a: #5A9A60;
  --fl-sepal-b: #8CC47E;
  --fl-soil: var(--soil, #8A5A44);
  --fl-soil-rim: var(--soil-rim, #A87458);
  --fl-crack: rgba(64, 34, 24, .55);
  --fl-shadow: rgba(59, 31, 51, .08);
  --fl-thorn: #B4785A;
  --fl-line-art: var(--line-art, rgba(74, 35, 56, .60));
  --fl-glow-o: .3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fl-stem: var(--stem, #6FBF7E);
    --fl-stem-d: #4F9A5E;
    --fl-leaf-a: var(--leaf-a, #5FA26A);
    --fl-leaf-b: var(--leaf-b, #8FCB8A);
    --fl-coty-a: #6FAE6E;
    --fl-coty-b: #A6D597;
    --fl-sepal-a: #4F925C;
    --fl-sepal-b: #79B979;
    --fl-soil: var(--soil, #3A2520);
    --fl-soil-rim: var(--soil-rim, #5A3A30);
    --fl-crack: rgba(0, 0, 0, .5);
    --fl-shadow: rgba(0, 0, 0, .28);
    --fl-thorn: #A0705A;
    --fl-line-art: var(--line-art, rgba(255, 240, 246, .35));
    --fl-glow-o: .55;
  }
}

/* -------------------------------------------------------- flower: sizes */
.flower {
  position: relative;
  display: inline-block;
  flex: none;
  vertical-align: middle;
  line-height: 0;
  max-width: 100%;
}
.flower > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* The plant layer sways from the stem base; the ground stays still and clipped. */
.flower > .fl-plant { transform-origin: 50% 89%; }
.flower > .fl-ground { overflow: hidden; }
.flower--hero { width: 13.75rem; aspect-ratio: 5 / 6; }
.flower--garden,
.flower--pressed { width: 6.25rem; aspect-ratio: 5 / 6; }
.flower--mini { width: 2.25rem; height: 2.25rem; }
.flower--mini > svg { overflow: hidden; }
@supports not (aspect-ratio: 1 / 1) {
  .flower--hero { height: 16.5rem; }
  .flower--garden, .flower--pressed { height: 7.5rem; }
}
/* Hero alone has the ink line (a moonlight rim in dark mode), veins and highlights. */
.flower--hero {
  --fl-ink: var(--fl-line-art);
  --fl-lnk: var(--fl-line-art);
  --fl-ph: rgba(255, 255, 255, .6);
}
/* Smaller sizes have no ink: each petal's own shade pools at its edge, as
   watercolour does, so pale palettes keep their shape on paper. Re-resolved on
   planter flowers, which wear their own palette. */
.flower--garden, .flower--garden .fl-done,
.flower--pressed, .flower--pressed .fl-done,
.flower--mini {
  --fl-ink: var(--fl-ps);
  --fl-inko: .55;
  --fl-inkw: 1;
  --fl-inkw-t: .8;
}
.flower--mini { --fl-inkw: 1.6; --fl-inkw-t: 1.2; }
@media (prefers-contrast: more) {
  .flower--hero { --fl-inkw: 2.4; --fl-inkw-t: 1.8; }
}
/* Pressed on the book cover: laid at -8 degrees under two strips of paper tape. */
.flower--pressed { transform: rotate(-8deg); }
.flower--pressed > .fl-plant { opacity: .9; }
.flower--pressed::before,
.flower--pressed::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 42%;
  height: 11%;
  background: rgba(232, 218, 190, .8);
  box-shadow: 0 1px 1px rgba(59, 31, 51, .06);
}
/* Tape across the stem (data-stage says where the plant is in its frame). */
.flower--pressed::before { left: 28%; top: 75%; transform: rotate(10deg); }
.flower--pressed::after { left: 30%; top: 57%; transform: rotate(-14deg); }
.flower--pressed[data-stage="seedling"]::before { top: 80%; }
.flower--pressed[data-stage="seedling"]::after,
.flower--pressed[data-stage="sprout"]::after { display: none; }

/* ----------------------------------------------- flower: palettes */
.pal-blush { --fl-pf: url(#lg-blush); --fl-pa: #F49AB6; --fl-pb: #FCD3DF; --fl-ps: #D9608A; --fl-pc: #F2C24B; }
.pal-coral { --fl-pf: url(#lg-coral); --fl-pa: #FF9A84; --fl-pb: #FFD2C4; --fl-ps: #E5634E; --fl-pc: #F2C24B; }
.pal-ruby { --fl-pf: url(#lg-ruby); --fl-pa: #E2557A; --fl-pb: #F79AB0; --fl-ps: #A9244F; --fl-pc: #F2C24B; }
.pal-lilac { --fl-pf: url(#lg-lilac); --fl-pa: #D7A3E6; --fl-pb: #F1D9F7; --fl-ps: #A86CC0; --fl-pc: #F2C24B; }
.pal-sunshine { --fl-pf: url(#lg-sunshine); --fl-pa: #FFC83D; --fl-pb: #FFE9A3; --fl-ps: #E39B12; --fl-pc: #7A4A1E; }
.pal-apricot { --fl-pf: url(#lg-apricot); --fl-pa: #FFAE7A; --fl-pb: #FFDCC2; --fl-ps: #E9824A; --fl-pc: #7A4A1E; }
.pal-lemon { --fl-pf: url(#lg-lemon); --fl-pa: #FFF3C4; --fl-pb: #FFFCEE; --fl-ps: #E8C95A; --fl-pc: #C98A1C; }
.pal-poppy { --fl-pf: url(#lg-poppy); --fl-pa: #FF7A6B; --fl-pb: #FFC2B8; --fl-ps: #D9483C; --fl-pc: #5A2E1A; }
.pal-periwinkle { --fl-pf: url(#lg-periwinkle); --fl-pa: #8FA8F5; --fl-pb: #C9D6FF; --fl-ps: #6A82D6; --fl-pc: #FFD45C; }
.pal-lavender { --fl-pf: url(#lg-lavender); --fl-pa: #B79BEA; --fl-pb: #E3D6FA; --fl-ps: #8E6FCB; --fl-pc: #FFD45C; }
.pal-sky { --fl-pf: url(#lg-sky); --fl-pa: #7FC4EC; --fl-pb: #CBE9FA; --fl-ps: #4E9FD0; --fl-pc: #FFD45C; }
.pal-hydrangea { --fl-pf: url(#lg-hydrangea); --fl-pa: #F2A7C8; --fl-pb: #FCDDEB; --fl-ps: #D27AA2; --fl-pc: #FFD45C; }

/* Gradient stops, per palette and theme (petals keep their hue in the dark). */
#lg-blush .s-a { stop-color: #F49AB6; } #lg-blush .s-b { stop-color: #FCD3DF; }
#lg-coral .s-a { stop-color: #FF9A84; } #lg-coral .s-b { stop-color: #FFD2C4; }
#lg-ruby .s-a { stop-color: #E2557A; } #lg-ruby .s-b { stop-color: #F79AB0; }
#lg-lilac .s-a { stop-color: #D7A3E6; } #lg-lilac .s-b { stop-color: #F1D9F7; }
#lg-sunshine .s-a { stop-color: #FFC83D; } #lg-sunshine .s-b { stop-color: #FFE9A3; }
#lg-apricot .s-a { stop-color: #FFAE7A; } #lg-apricot .s-b { stop-color: #FFDCC2; }
#lg-lemon .s-a { stop-color: #FFF3C4; } #lg-lemon .s-b { stop-color: #FFFCEE; }
#lg-poppy .s-a { stop-color: #FF7A6B; } #lg-poppy .s-b { stop-color: #FFC2B8; }
#lg-periwinkle .s-a { stop-color: #8FA8F5; } #lg-periwinkle .s-b { stop-color: #C9D6FF; }
#lg-lavender .s-a { stop-color: #B79BEA; } #lg-lavender .s-b { stop-color: #E3D6FA; }
#lg-sky .s-a { stop-color: #7FC4EC; } #lg-sky .s-b { stop-color: #CBE9FA; }
#lg-hydrangea .s-a { stop-color: #F2A7C8; } #lg-hydrangea .s-b { stop-color: #FCDDEB; }
#lg-fmn-pink .s-a { stop-color: #F4A9C4; } #lg-fmn-pink .s-b { stop-color: #FBD5E3; }
#lg-leaf .s-a { stop-color: var(--fl-leaf-a); } #lg-leaf .s-b { stop-color: var(--fl-leaf-b); }
#lg-coty .s-a { stop-color: var(--fl-coty-a); } #lg-coty .s-b { stop-color: var(--fl-coty-b); }
#lg-sepal .s-a { stop-color: var(--fl-sepal-a); } #lg-sepal .s-b { stop-color: var(--fl-sepal-b); }
#lg-gbud .s-a { stop-color: var(--fl-sepal-a); } #lg-gbud .s-b { stop-color: var(--fl-coty-b); }
#rg-pool-romantic stop { stop-color: var(--rose, #C8326B); }
#rg-pool-platonic stop { stop-color: var(--honey, #F2B33D); }
#rg-pool-familial stop { stop-color: var(--peri, #8FA2F2); }

/* ------------------------------------------------- flower: drawn parts */
.fl-st { fill: none; stroke: var(--fl-stem); stroke-linecap: round; }
.fl-sth { fill: none; stroke: var(--fl-leaf-b); stroke-width: 1.5; stroke-linecap: round; opacity: .75; }
.fl-thk { fill: none; stroke: var(--fl-stem-d); stroke-linecap: round; }
.fl-br { fill: none; stroke: var(--fl-stem); stroke-linecap: round; }
.fl-crack { fill: none; stroke: var(--fl-crack); stroke-width: 1.1; stroke-linecap: round; }
.fl-halo { fill: url(#rg-halo); opacity: .45; }
@media (prefers-color-scheme: dark) {
  .fl-halo { opacity: .2; }
}
.fl-seeds { fill: none; stroke: var(--fl-pb); stroke-width: 1.9; stroke-linecap: round; opacity: .9; }
.fl-pollen { fill: none; stroke: #FFD45C; stroke-width: 2.2; stroke-linecap: round; }
.fl-glow { fill: #FFE9A0; opacity: var(--fl-glow-o); }
/* Forget-me-nots open pink and turn blue: the blue layer fades in over the pink. */
.fl-pk { --fl-pf: url(#lg-fmn-pink); }
.fl-floret .fl-bl { opacity: 0; }
.fl-floret.fmn-open .fl-bl { opacity: 1; }
.fl-floret:has(> .fl-open:not(.fl-pending)) .fl-bl { opacity: 1; }

/* Ground: a soil mound with a lit rim, a drawn shadow, grass and the light pool. */
.fl-soil { fill: var(--fl-soil); }
.fl-rim { fill: var(--fl-soil-rim); }
.fl-shadow { fill: var(--fl-shadow); }
.fl-grass { fill: none; stroke: var(--fl-leaf-a); stroke-width: 1.25; stroke-linecap: round; }
.fl-speck { fill: none; stroke: var(--fl-soil-rim); stroke-width: 1.7; stroke-linecap: round; }

/* ---------------------------------------------- flower: growth states */
/* bloom.js grows a pending part by swapping .fl-pending for .fl-growing (600 ms).
   Only the inner .fl-grow moves; its origin is the part's base. */
.fl-pending { opacity: 0; }
.fl-growing > .fl-grow { animation: fl-fade 150ms ease-out both; }
.fl-floret .fl-bl { transition: opacity 150ms ease-out; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .fl-growing.fl-k-petal > .fl-grow { animation: fl-open 420ms var(--ease-pop) both; }
  html:not(.calm) .fl-growing.fl-k-leaf > .fl-grow { animation: fl-unfurl 450ms var(--ease-pop) both; }
  html:not(.calm) .fl-growing.fl-k-bud > .fl-grow { animation: fl-swell 500ms var(--ease-pop) both; }
  html:not(.calm) .fl-growing.fl-k-dot > .fl-grow { animation: fl-pop 200ms var(--ease-pop) both; }
  html:not(.calm) .fl-growing.fl-k-stem > .fl-grow { animation: none; }
  html:not(.calm) .fl-growing.fl-k-stem path {
    stroke-dasharray: 1;
    animation: fl-draw 360ms var(--ease-out) both;
  }
  html:not(.calm) .fl-floret .fl-bl { transition: opacity 600ms ease-in-out; }
}
@keyframes fl-fade { from { opacity: 0; } }
@keyframes fl-open { from { transform: rotate(-25deg) scale(.3); opacity: 0; } }
@keyframes fl-unfurl { from { transform: rotate(-40deg) scale(0); } }
@keyframes fl-swell { from { transform: scale(.6); opacity: .3; } }
@keyframes fl-pop { from { transform: scale(0); } }
@keyframes fl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------- garden screens below */
/* Everything below is the garden screens' (templates/home.html, bond.html, landing.html,
   person_new.html, _header_flower.html, _bloom_moment.html; motion in static/js/bloom.js).
   Prefixes: .hdr-flower, .bond-hero, .bond-* (the rest of the bond page), .moment, .garden,
   .sky, .plot, .stake, .signal, .landing-*, .planting. Every movement sits in the
   prefers-reduced-motion: no-preference blocks, scoped to html:not(.calm). */

/* ------------------------------------------------------- the frame's empty top */
/* A garden or hero frame (5:6) keeps room for the plant to grow, so a young plant fills only
   its bottom. Plots, the hero and the bloom day hide that empty sky. The page puts data-crop
   (the stage) on the flower's box, with --lp (petals into the growing flower) and --g (1 once
   a flower is finished). --env is how much of the frame stands above the plant, measured in
   WebKit over every kind, 8 seeds and every petal count (a lower envelope, so no plant ever
   rises above it); a finished flower's planter keeps it at .28 or less. --air leaves a little
   sky. Nothing is clipped: the frame simply overlaps upward. */
[data-crop] { --env: .16; --crop: max(0, min(var(--env), 1 - .72 * var(--g, 0)) - var(--air, .04)); }
[data-crop="seedling"] { --env: calc(.786 - .038 * var(--lp, 0)); }
[data-crop="sprout"] { --env: calc(.772 - .0247 * var(--lp, 8)); }
[data-crop="bud"] { --env: .26; }

/* ---------------------------------------------------------- header flower */
/* Sizes are capped in px so that at the largest text the back link beside it keeps its words. */
.hdr-flower {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: min(.3125rem, 5px);
  min-height: var(--tap);
  padding: 0 min(.625rem, 10px) 0 min(.375rem, 6px);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hdr-flower:active { background: var(--sunken); }
.hdr-flower .flower--mini { width: min(2.25rem, 42px); height: min(2.25rem, 42px); transform-origin: 50% 100%; }
/* "27 petals" in small type (ux-35). At large text (a root of 22px or more) the flower stands
   alone: the count shrinks to nothing (the 999 makes the size jump from full to 0 at that
   line) and the link's aria-label still says the petals. */
.hdr-flower__count {
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
  max-width: calc(clamp(0px, (22px - 1rem) * 999, 1px) * 999);
  margin-left: clamp(-5px, (1rem - 22px) * -999, 0px);   /* and takes the link's gap with it */
  overflow: hidden;
  font-weight: 700;
  font-size: min(.875rem, 15px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.hdr-flower__num {
  display: inline-block;
  min-width: 1.5ch;
  text-align: right;
  padding: .125rem .125rem;
  border-radius: 6px;
  font-family: var(--font-story);
  font-weight: 700;
  font-size: 1.1875em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.hdr-flower__word { font-family: var(--font-ui); color: var(--muted); letter-spacing: .01em; }
.hdr-flower__ripple {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border: 2px solid var(--kind);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
/* Calm and reduced motion: a count changes with a 400 ms flash instead of sliding. */
[data-petal-count].is-flash { animation: hdr-count-flash 400ms ease-out; }
@keyframes hdr-count-flash { from { background-color: var(--rose-soft); } to { background-color: transparent; } }

/* Petals in flight (bloom.js builds them), the '+3 petals' tag and the bloom banner. */
.hdr-flower__token {
  position: fixed;
  z-index: 56;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.4375rem;
  margin: -.72rem 0 0 -.625rem;
  pointer-events: none;
  --fl-ink: var(--fl-ps);
  --fl-inko: .5;
  --fl-inkw: 1.4;
}
.hdr-flower__token-in, .bond-hero__drift-in { position: relative; display: block; width: 100%; height: 100%; }
.hdr-flower__token svg, .bond-hero__drift svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hdr-flower__token-tag {
  position: absolute;
  left: 100%;
  top: -.5rem;
  padding: .125rem .375rem;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--rose-text);
  box-shadow: var(--e1);
  font: 700 .875rem/1.1 var(--font-ui);
  white-space: nowrap;
}
.hdr-flower__plus {
  position: fixed;
  z-index: 56;
  padding: .25rem .625rem;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--rose-text);
  box-shadow: var(--e1);
  font: 700 .9375rem/1.2 var(--font-ui);
  white-space: nowrap;
  pointer-events: none;
}
.hdr-flower__banner {
  position: fixed;
  z-index: 57;
  right: .75rem;
  top: calc(env(safe-area-inset-top) + var(--header-h) + .5rem);
  max-width: calc(100% - 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.hdr-flower__banner.is-shown { opacity: 1; pointer-events: auto; }
.hdr-flower__pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .375rem 1.125rem .375rem .75rem;
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--e2);
  font-family: var(--font-story);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.hdr-flower__pill .mark { width: 1.5rem; height: 1.5rem; color: var(--rose); --mark-accent: var(--honey); --mark-accent-o: 1; }
/* In the header bar (bloom.js sets its box over the back link): it fits the bar's height, its
   words may take two lines at large text, and it never reaches the header's own buttons. */
.hdr-flower__banner--bar { right: auto; max-width: none; display: flex; align-items: center; }
.hdr-flower__banner--bar .hdr-flower__pill {
  max-width: 100%; min-height: min(var(--tap), 44px); gap: min(.375rem, 6px);
  padding: min(.25rem, 4px) min(.875rem, 14px) min(.25rem, 4px) min(.5rem, 8px);
  font-size: min(1.0625rem, 20px); line-height: 1.1; overflow-wrap: normal;
}
.hdr-flower__banner--bar .hdr-flower__pill .mark { width: min(1.375rem, 24px); height: min(1.375rem, 24px); flex: none; }
.hdr-flower__banner--bar .hdr-flower__pill > span { min-width: 0; }
.hdr-flower__banner--bar.is-tight .hdr-flower__pill .mark { display: none; }

/* --------------------------------------------------------------- bond hero */
/* Vertical room stops growing at a little over its 17px size, so at large text the next step
   comes sooner (ux-14: the guest hub at a 35px root shows its Next-up button on the first screen). */
.page-bond .wrap { padding-top: min(1.25rem, 24px); gap: min(1.125rem, 22px); }
.bond-hero { container: bondhero / inline-size; }
.bond-hero__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  text-align: center;
}
.bond-hero__words { display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: 0; max-width: 100%; }
.bond-hero__flower {
  --air: .1;
  position: relative;
  width: min(13.75rem, 100%);
  margin: .25rem 0 -.125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* The frame's empty top rises out of the hero (see data-crop), and the light pool fades out
   where the frame is cut, so the page opens on the plant rather than on air. Taps land on
   the box, never on the invisible part above it. */
.bond-hero__flower .flower { display: block; width: 100%; margin-top: calc(var(--crop, 0) * -120%); pointer-events: none; }
.bond-hero__flower .fl-ground {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--crop, 0) * 100%), #000 calc((var(--crop, 0) + var(--air)) * 100%));
  mask-image: linear-gradient(to bottom, transparent calc(var(--crop, 0) * 100%), #000 calc((var(--crop, 0) + var(--air)) * 100%));
}
.bond-hero__title { margin-top: .125rem; font-size: 2rem; outline: none; max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
.bond-hero__stage { font-weight: 700; font-size: .9375rem; letter-spacing: .02em; color: var(--muted); }
.bond-hero__stage .num { display: inline-block; color: var(--ink); font-size: 1.0625rem; letter-spacing: 0; }
.bond-hero__vine { width: 100%; max-width: 17rem; margin-top: .125rem; }
.bond-hero__vine .vine__label { text-align: center; }
.bond-hero__weeks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .375rem .625rem;
  margin-top: .25rem;
  font-weight: 700;
  font-size: .9375rem;
}
.bond-hero__weeks .chip .mark { color: var(--honey-text); --mark-accent: var(--honey); --mark-accent-o: .7; }
.bond-hero__learned { max-width: 22rem; margin-top: .125rem; font-family: var(--font-story); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.bond-hero__drift {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1.15rem;
  margin: -.575rem 0 0 -.5rem;
  pointer-events: none;
}
.bond-hero__puff {
  position: absolute;
  z-index: 2;
  width: 1.375rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--soil-rim);
  pointer-events: none;
}
/* The compact hero (ux-14), always for guests and for everyone at large text: the hero is a
   container, and a column of 18rem or less (the same line as html.nocq-18, which stands in
   for Safari without container queries) turns it compact. A small flower beside the name and
   the stage and nothing else, so what's new and the next step come sooner. The flower's frame
   is px-capped, so large text gives the room to the words. */
.bond-hero--compact .bond-hero__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: min(.875rem, 14px);
  text-align: left;
}
.bond-hero--compact .bond-hero__flower { width: min(5.75rem, 92px); margin: 0; }
.bond-hero--compact .bond-hero__words { align-items: flex-start; gap: .125rem; }
.bond-hero--compact .bond-hero__title { margin: 0; font-size: 1.625rem; line-height: 1.15; }
.bond-hero--compact .bond-hero__vine,
.bond-hero--compact .bond-hero__weeks,
.bond-hero--compact .bond-hero__learned { display: none; }
/* A small flower beside the name has no sky to light: cut by the frame's mask, its light pool
   would be a band of haze above the plant, so it goes (as on Home's plots). */
.bond-hero--compact .fl-pool { display: none; }
@container bondhero (max-width: 18rem) {
  .bond-hero__in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: min(.875rem, 14px);
    text-align: left;
  }
  .bond-hero .bond-hero__in { column-gap: min(.625rem, 10px); }
  .bond-hero .bond-hero__flower { width: min(3.75rem, 60px); margin: 0; }
  .bond-hero .bond-hero__words { align-items: flex-start; gap: .125rem; }
  .bond-hero .bond-hero__title { margin: 0; font-size: 1.25rem; line-height: 1.15; }
  .bond-hero .bond-hero__stage { font-size: .875rem; line-height: 1.3; letter-spacing: 0; }
  .bond-hero .bond-hero__stage .num { font-size: .9375rem; }
  .bond-hero__vine, .bond-hero__weeks, .bond-hero__learned { display: none; }
  .bond-hero .fl-pool { display: none; }
}
html.nocq-18 .bond-hero__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: min(.875rem, 14px);
  text-align: left;
}
html.nocq-18 .bond-hero .bond-hero__in { column-gap: min(.625rem, 10px); }
html.nocq-18 .bond-hero .bond-hero__flower { width: min(3.75rem, 60px); margin: 0; }
html.nocq-18 .bond-hero .bond-hero__words { align-items: flex-start; gap: .125rem; }
html.nocq-18 .bond-hero .bond-hero__title { margin: 0; font-size: 1.25rem; line-height: 1.15; }
html.nocq-18 .bond-hero .bond-hero__stage { font-size: .875rem; line-height: 1.3; letter-spacing: 0; }
html.nocq-18 .bond-hero .bond-hero__stage .num { font-size: .9375rem; }
html.nocq-18 .bond-hero__vine, html.nocq-18 .bond-hero__weeks, html.nocq-18 .bond-hero__learned { display: none; }
html.nocq-18 .bond-hero .fl-pool { display: none; }

/* What's new since the last visit (ux-14): one line, names and counts only. */
.bond-news { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem min(.875rem, 15px); border-radius: 14px; background: var(--kind-soft); color: var(--ink); font-weight: 700; font-size: .9375rem; line-height: 1.4; overflow-wrap: break-word; }
.bond-news > .mark { flex: none; margin-top: .0625rem; color: var(--kind-text); --mark-accent: var(--honey); --mark-accent-o: .9; }
/* At large text (a container of 15rem or less; html.nocq-15 without container queries) the
   sparkle steps aside: the words take the whole line. */
.bond-news { container-type: inline-size; }
@container (max-width: 15rem) { .bond-news > .mark { display: none; } }
html.nocq-15 .bond-news > .mark { display: none; }
/* One-time notices at the top: joined (ux-12), removed after a report (f-12). */
.bond-notice { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.bond-notice > .mark { flex: none; margin-top: .0625rem; color: var(--leaf-text); --mark-accent: var(--leaf); --mark-accent-o: .4; }

/* ---------------------------------------------------------------- next up */
.bond-next { container: bondnext / inline-size; display: flex; flex-direction: column; gap: min(1rem, 18px); padding-top: calc(min(1.125rem, 20px) + 6px); padding-bottom: min(1.25rem, 22px); }
.bond-next__head { display: flex; align-items: flex-start; gap: .5rem .875rem; }
.bond-next__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3125rem; padding-top: .25rem; }
.bond-next__title { font-size: 1.5rem; line-height: 1.15; }
.bond-next__sub { font-size: 1.0625rem; color: var(--ink); }
.bond-next__speak { margin-top: .25rem; }
.bond-next__art {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--kind-soft);
  color: var(--kind-text);
  --mark-accent: var(--rose);
  --mark-accent-o: .9;
}
.bond-next__art .mark { width: 2.125rem; height: 2.125rem; }
.bond-next__art--their_bouquet { transform: rotate(-4deg); }
.bond-next__seeds { margin-top: -.375rem; }
/* With Read it to me on, the speaker takes the drawing's place. At large text (16rem or less
   inside the card, a container; html.nocq-18 without container queries) the drawing steps
   aside and Read it to me becomes its own row under the words (ux-16, ux-39). */
html.can-speak.speak-on .bond-next__speak ~ .bond-next__art { display: none; }
@container bondnext (max-width: 16rem) {
  .bond-next__head { flex-direction: column; align-items: stretch; }
  .bond-next__art { display: none; }
  .bond-next__title { font-size: 1.25rem; }
  html.can-speak.speak-on .bond-next__speak { display: flex; width: 100%; height: auto; min-height: var(--tap); gap: .5rem; margin: 0; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
  .bond-next__speak .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}
html.nocq-18 .bond-next__head { flex-direction: column; align-items: stretch; }
html.nocq-18 .bond-next__art { display: none; }
html.nocq-18 .bond-next__title { font-size: 1.25rem; }
html.nocq-18.can-speak.speak-on .bond-next__speak { display: flex; width: 100%; height: auto; min-height: var(--tap); gap: .5rem; margin: 0; padding: .375rem min(1.25rem, 21px); border-radius: 1.75rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-align: center; }
html.nocq-18 .bond-next__speak .speak-btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }

/* -------------------------------------------------------- the calmer list */
.bond-list { display: flex; flex-direction: column; gap: .625rem; }
.bond-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .625rem min(.875rem, 15px);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-tile);
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.bond-row > .mark { flex: none; width: 1.5rem; height: 1.5rem; color: var(--kind-text); --mark-accent: var(--kind); --mark-accent-o: .45; }
.bond-row--warm > .mark { color: var(--rose); --mark-accent: var(--rose); --mark-accent-o: .3; }
.bond-row__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.bond-row__go { flex: none; display: inline-flex; color: var(--muted); }
.bond-row__go .mark { transform: scaleX(-1); }
.bond-row__go--share .mark { transform: none; }
a.bond-row:active, button.bond-row:active { background: var(--sunken); }
/* A row that is a button (Stuck? Ask Craig for help) looks like the links around it. */
button.bond-row { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
button.bond-row:focus-visible, a.bond-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bond-row--help > .mark { color: var(--peri-text); --mark-accent: var(--rose); --mark-accent-o: .8; }
/* A setting with its own button (Ava calls you Dad · Change). Large text: the button drops
   under the words instead of squeezing them. */
.bond-row--setting { flex-wrap: wrap; row-gap: 0; padding-right: .375rem; }
/* The same line as the notifications row above it (alerts.css): at a 28px root the words stay
   beside the mark, and only Change drops under them. */
.bond-row--setting > .bond-row__text { flex: 1 1 8rem; }
.bond-row__btn { flex: none; min-height: var(--tap); margin-left: auto; padding: 0 .625rem; }

/* "3 of Dad's pages fade soon" (f-3): a calm heads-up with two equal choices. */
.bond-fade { display: flex; flex-direction: column; gap: .625rem; padding: .875rem 1rem .5rem; border: var(--hair) solid var(--hairline); border-radius: var(--r-tile); background: var(--card); }
.bond-fade__title { display: flex; align-items: flex-start; gap: .625rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.bond-fade__title > .mark { flex: none; width: 1.5rem; height: 1.5rem; margin-top: -.0625rem; color: var(--kind-text); --mark-accent: var(--rose); --mark-accent-o: .55; }
.bond-fade__actions { display: flex; flex-direction: column; gap: .5rem; }
.bond-fade__actions > .btn { width: 100%; }
.bond-fade__later { align-self: center; width: auto !important; }

/* Our book: a small cloth-bound cover with a debossed rule and a spine. */
.bond-book {
  --cloth: var(--cloth-romantic);
  position: relative;
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 4.75rem;
  padding: .875rem 1rem .875rem 1.625rem;
  border-radius: 5px 14px 14px 5px;
  background-color: var(--cloth);
  background-image: var(--grain);
  background-size: 128px 128px;
  color: var(--cloth-title);
  text-decoration: none;
  box-shadow: inset 0 0 0 7px var(--cloth), inset 0 0 0 8px rgba(0, 0, 0, .28), inset 0 0 0 9px rgba(255, 255, 255, .12), var(--e1);
}
.bond-book::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: .75rem;
  border-radius: 5px 0 0 5px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .14);
}
.bond-book--platonic { --cloth: var(--cloth-platonic); }
.bond-book--familial { --cloth: var(--cloth-familial); }
.bond-book__cover {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid rgba(247, 232, 216, .5);
  border-radius: 50%;
  color: var(--cloth-title);
  --mark-accent: var(--gold-a);
  --mark-accent-o: .9;
}
.bond-book__cover .mark { width: 1.75rem; height: 1.75rem; }
.bond-book__words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
/* Whole words at large text (ux-35): "Our book" and "3 pages · 0 kept" never split mid-word. */
.bond-book__title, .bond-book__meta { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
.bond-book__title { font-family: var(--font-story); font-weight: 650; font-size: 1.25rem; line-height: 1.2; }
.bond-book__meta { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.bond-book .bond-row__go { color: var(--cloth-title); }
.bond-book:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Rows and the book are containers: at large text (15rem or less; html.nocq-15 without
   container queries) the round cover, a row's leading mark and the trailing arrows step
   aside, so the words keep whole lines ("Pick Craig’s next / question", not three short
   ones) instead of splitting mid-word. */
.bond-book, .bond-row { container-type: inline-size; }
@container (max-width: 15rem) {
  .bond-book__cover, .bond-row__go, .bond-row > .mark { display: none; }
}
html.nocq-15 .bond-book__cover, html.nocq-15 .bond-row__go, html.nocq-15 .bond-row > .mark { display: none; }

.bond-note { display: flex; align-items: flex-start; gap: .625rem; padding: .375rem .25rem; color: var(--ink); line-height: 1.45; }
.bond-note > .mark { flex: none; margin-top: .0625rem; color: var(--leaf-text); --mark-accent: var(--leaf); --mark-accent-o: .35; }
.bond-note--quiet { color: var(--muted); }
.bond-note--quiet > .mark { color: var(--muted); }
.bond-note--gold { padding: .75rem 1rem; border-radius: 14px; background: var(--honey-soft); }
.bond-note--gold > .mark { color: var(--honey-text); --mark-accent: var(--gold-b); --mark-accent-o: .9; }

/* Only the viewer sees this block (f-14): Questions for you, Playful · Mix · Go deeper, topics
   set aside, a guest's smart follow-ups, and "Sam doesn't see this." with What Sam sees. */
.bond-private { display: flex; flex-direction: column; gap: .5rem; padding: .875rem min(.875rem, 15px) .375rem; border-radius: 14px; background: var(--sunken); }
.bond-private__title { font-size: 1.125rem; }
.bond-private__vibe { background: var(--paper); }
.bond-private__note { font-size: .9375rem; line-height: 1.4; }
.bond-private__line { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25rem; line-height: 1.4; }
.bond-private__topic { display: inline-flex; align-items: center; gap: .125rem; }
.bond-private__btn { min-height: var(--tap); padding: 0 .5rem; }
.bond-private__who { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25rem; margin-top: -.125rem; padding-top: .25rem; border-top: var(--hair) dashed var(--hairline); font-size: .875rem; font-weight: 700; color: var(--muted); }
.bond-private__who { column-gap: .625rem; }
.bond-private__who .bond-private__btn { padding-left: 0; padding-right: 0; font-size: .9375rem; }   /* flush when it wraps */
.bond-private__ai > .mark { color: var(--peri-text); --mark-accent: var(--peri); --mark-accent-o: .5; margin-right: .125rem; }

.bond-invite { display: flex; flex-direction: column; gap: .75rem; }
.bond-invite__links { font-weight: 700; }
.bond-invite__new { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25rem; }

/* The guest's cards: keep this page handy, your own garden, sign in. */
.bond-handy { display: flex; flex-direction: column; gap: .625rem; }
.bond-handy__steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bond-handy__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border-radius: 12px;
  background: var(--sunken);
  color: var(--peri-text);
  font-weight: 700;
  font-size: .9375rem;
}
.bond-handy__key .mark { width: 1.375rem; height: 1.375rem; }
.bond-handy__key--add { color: var(--ink); }
.bond-handy__then { position: relative; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--muted); opacity: .6; }
.bond-handy__then::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: rotate(45deg);
}
.bond-join { display: flex; flex-direction: column; gap: .625rem; }
.bond-join__title { font-size: 1.35rem; }
.bond-join--first .btn > span { min-width: 0; }
.bond-signin { text-align: center; color: var(--muted); }
.bond-signin a { font-weight: 700; }

.bond-leave { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: var(--hair) solid var(--hairline); }
.bond-leave__btn { color: var(--muted); text-decoration-color: var(--hairline); }
/* In the leave sheet: what the other person sees (ux-18), and Block and leave (f-12). */
.bond-leave__sees { display: flex; flex-wrap: wrap; align-items: center; column-gap: .625rem; }
.bond-leave__link { min-height: var(--tap); padding: 0; font-size: 1rem; }
.bond-leave__block-note { margin-top: -.25rem; text-align: center; }
/* What this flower calls you: the sheet's field (f-7). */
.bond-name-form { display: flex; flex-direction: column; gap: .75rem; }

/* --------------------------------------------------------------- bloom days */
html.moment-open, html.moment-open body { overflow: hidden; }
.moment--full {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
/* The paper scrim: solid paper, so nothing of the page behind (its title, its pink button)
   ghosts through around the flower and Lovely!. A blur can't be counted on: the still picture
   (calm, reduced motion) fades the whole overlay in, which leaves the blur nothing to blur. */
.moment__scrim { position: fixed; inset: 0; background-color: var(--paper); background-image: var(--grain); background-size: 128px 128px; }
.moment__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(.875rem, 14px);   /* pictures and gaps don't grow with text, so at large text the words get the room */
  width: 100%;
  max-width: 26rem;
  min-height: 100%;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 1.25rem) max(1.25rem, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 1.5rem) max(1.25rem, env(safe-area-inset-left));
  text-align: center;
}
/* The flower takes what the label, packet and button leave; only the plant's own height
   counts, since the frame's empty top is cut (data-crop). */
/* Centred by auto margins, not justify-content, so a stage taller than the screen (large
   text) scrolls from its top instead of losing its top. */
.moment__stage > :first-child { margin-top: auto; }
.moment__stage > :last-child { margin-bottom: auto; }
.moment__flower { --air: .06; position: relative; flex: none; width: min(15rem, 62vw); width: min(15rem, 62vw, max(min(8rem, 150px), calc((100vh - 27rem) * .833 / (1 - var(--crop, 0))))); }
@supports (height: 100dvh) {
  .moment__flower { width: min(15rem, 62vw, max(min(8rem, 150px), calc((100dvh - 27rem) * .833 / (1 - var(--crop, 0))))); }
}
.moment__fly { position: relative; margin-top: calc(var(--crop, 0) * -120%); }
.moment__fly .flower--hero { display: block; width: 100%; }
.moment__pollen { position: absolute; left: var(--hx, 50%); top: var(--hy, 30%); width: 0; height: 0; pointer-events: none; }
.moment__pollen i {
  position: absolute;
  left: -.21875rem;
  top: -.21875rem;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: var(--kind);
  opacity: 0;
}
.moment__pollen i:nth-child(3n) { background: var(--honey); }
/* The specimen label: a herbarium tag pinned under the flower. */
.moment__label {
  position: relative;
  width: 100%;
  max-width: 21rem;
  padding: 1.125rem 1.25rem 1.125rem;
  border-radius: 4px;
  background-color: var(--card);
  background-image: var(--grain);
  background-size: 128px 128px;
  box-shadow: var(--e2);
  outline: 1px solid var(--hairline);
  outline-offset: -7px;
}
.moment__label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.4375rem;
  width: .875rem;
  height: .875rem;
  margin-left: -.4375rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%), var(--kind);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.moment__name { font-family: var(--font-story); font-weight: 650; font-size: min(2.25rem, 11vw); line-height: 1.1; letter-spacing: -.01em; }
.moment__meta { margin-top: .3125rem; font-weight: 700; font-size: .875rem; letter-spacing: .03em; color: var(--muted); }
.moment__meta [data-moment-date] { white-space: nowrap; }
.moment__line { margin-top: .75rem; padding-top: .75rem; border-top: var(--hair) solid var(--hairline); font-family: var(--font-story); font-weight: 500; font-size: 1.25rem; line-height: 1.35; text-wrap: balance; }
.moment__packet {
  display: flex;
  align-items: center;
  gap: min(.875rem, 14px);
  width: 100%;
  max-width: 21rem;
  padding: .75rem min(1rem, 16px);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-tile);
  background: var(--card);
  box-shadow: var(--e1);
  text-align: left;
  font-weight: 700;
  line-height: 1.35;
}
.moment__packet-art { flex: none; width: min(2.375rem, 40px); height: min(3.1667rem, 53px); transform: rotate(-5deg); --packet: var(--kind-soft); color: var(--kind-text); --mark-accent: var(--honey); --mark-accent-o: 1; }
.moment__packet-words { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }   /* "A new seed packet: / Someday · 9 questions" */
.moment__go { min-width: min(12rem, 100%); }
/* When the stage is taller than the screen (several packets on a small phone), Lovely! stays
   on the bottom edge while the rest scrolls under it: it is the one way out. It rests on a
   band of paper with a soft top edge, so the words scroll under paper, never under the
   button. At large text (ux-32) it simply follows the words instead: pinned, it would cover
   most of what there is to read. The stage is a container for that. */
.moment--full .moment__stage { container: momentstage / inline-size; }
.moment__foot { display: flex; justify-content: center; width: 100%; }
.moment--full .moment__foot {
  position: sticky; bottom: 0; z-index: 1;
  margin-top: calc(-1 * min(.875rem, 14px));   /* the fade sits in the stage's gap: no new space */
  padding: 1rem 0 calc(env(safe-area-inset-bottom) + .75rem);
  /* the scrim's own paper and grain, faded in over its top 1rem */
  background-color: var(--paper); background-image: var(--grain); background-size: 128px 128px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1rem);
  mask-image: linear-gradient(to bottom, transparent, #000 1rem);
}
.moment--full .moment__stage { padding-bottom: .75rem; }   /* the foot carries the safe area now */
/* Also at large text: the day gets its own line under the names instead of a stray " · Oct 22"
   starting the second line, and the seed packet stands above its words so they keep the
   card's whole width. */
@container momentstage (max-width: 17.5rem) {
  .moment--full .moment__foot { position: static; margin-top: 0; padding: .25rem 0 calc(env(safe-area-inset-bottom) + .75rem); background: none; -webkit-mask-image: none; mask-image: none; }
  .moment__meta .moment__sep { display: none; }
  .moment__meta [data-moment-date] { display: block; }
  .moment__packet { flex-direction: column; gap: .5rem; text-align: center; }
}
html.nocq-18 .moment--full .moment__foot { position: static; margin-top: 0; padding: .25rem 0 calc(env(safe-area-inset-bottom) + .75rem); background: none; -webkit-mask-image: none; mask-image: none; }
html.nocq-18 .moment--full .moment__meta .moment__sep { display: none; }
html.nocq-18 .moment--full .moment__meta [data-moment-date] { display: block; }
html.nocq-18 .moment--full .moment__packet { flex-direction: column; gap: .5rem; text-align: center; }

/* The small card a later flower's in-between stage gets, at the top of the bond page. */
/* At large text (16rem or less inside it; html.nocq-18 without container queries) the round
   flower and the packet mark step aside so the words keep whole lines, and the day takes its
   own line. */
.moment--banner { container: momentbanner / inline-size; display: flex; align-items: center; gap: min(.875rem, 14px); padding: .875rem min(1rem, 17px); border-color: transparent; background: var(--kind-soft); }
.moment__mini { flex: none; display: inline-flex; align-items: center; justify-content: center; width: min(3.25rem, 56px); height: min(3.25rem, 56px); border-radius: 50%; background: var(--card); box-shadow: var(--e1); }
.moment__mini .flower--mini { width: min(2.5rem, 42px); height: min(2.5rem, 42px); }
.moment__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.moment--banner .moment__line { margin: 0; padding: 0; border: 0; font-weight: 600; font-size: 1.1875rem; }
.moment--banner .moment__meta { margin-top: .125rem; color: var(--ink); font-weight: 500; letter-spacing: 0; }
.moment__packet-line { display: flex; align-items: flex-start; gap: .5rem; margin-top: .375rem; font-weight: 700; font-size: .9375rem; }
.moment__packet-line .mark { flex: none; margin-top: .0625rem; color: var(--kind-text); }
.moment__packet-line > span { min-width: 0; }
@container momentbanner (max-width: 16rem) {
  .moment__mini, .moment__packet-line .mark, .moment__meta .moment__sep { display: none; }
  .moment__meta [data-moment-date] { display: block; }
}
html.nocq-18 .moment--banner .moment__mini,
html.nocq-18 .moment--banner .moment__packet-line .mark,
html.nocq-18 .moment--banner .moment__meta .moment__sep { display: none; }
html.nocq-18 .moment--banner .moment__meta [data-moment-date] { display: block; }

/* ----------------------------------------------------------- Home: garden */
.page-home .wrap { gap: 1.5rem; }
.garden { position: relative; display: flex; flex-direction: column; margin: 0; }
/* The sky band follows the phone's clock (bloom.js sets the class); dark mode is the night garden. */
.garden > .sky {
  --sky-a: var(--sky-day);
  --sky-b: var(--sky-day);
  position: absolute;
  z-index: 0;
  top: -1.25rem;
  left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
  height: 17rem;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 46%, rgba(251, 245, 238, 0) 100%);
}
.garden.sky--dawn > .sky { --sky-a: var(--sky-dawn); --sky-b: var(--sky-dawn); }
.garden.sky--dusk > .sky { --sky-a: var(--sky-dusk-a); --sky-b: var(--sky-dusk-b); }
.garden.sky--eve > .sky { --sky-a: var(--sky-eve); --sky-b: var(--sky-eve); }
.sky__orb { position: absolute; top: .5rem; right: max(1rem, env(safe-area-inset-right)); width: 3.5rem; height: 3.5rem; overflow: visible; }
.sky__clouds { position: absolute; top: .875rem; left: max(.75rem, env(safe-area-inset-left)); width: 10rem; height: 3.75rem; }
.sky__stars { position: absolute; left: 0; top: 0; width: 100%; height: 62%; }
.sky__sun, .sky__moon, .sky__stars, .sky__clouds { display: none; }
.sky__sun circle { fill: #FFE3A0; }
.sky__sun .sky__glow { opacity: .4; }
.sky--dawn .sky__sun circle { fill: #FFC9A6; }
.sky--dusk .sky__sun circle { fill: #FFB28E; }
.sky--dusk .sky__sun .sky__glow { opacity: .5; }
.sky__clouds path { fill: rgba(255, 255, 255, .8); }
.sky--dusk .sky__clouds path { fill: rgba(255, 244, 238, .7); }
.sky__moon { fill: #FFFFFF; opacity: .95; }
.sky__stars path { fill: none; stroke: var(--star); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sky--day .sky__sun, .sky--dawn .sky__sun, .sky--dusk .sky__sun { display: inline; }
.sky--day .sky__clouds, .sky--dawn .sky__clouds, .sky--dusk .sky__clouds { display: block; }
.sky--eve .sky__moon, .sky--night .sky__moon { display: inline; }
.sky--night .sky__stars { display: block; }
.garden__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .3125rem; padding: 2.5rem 0 .75rem; }
.garden__greet { font-size: 2.125rem; line-height: 1.1; max-width: 15em; }
.garden__sub { font-weight: 700; font-size: .9375rem; letter-spacing: .02em; color: var(--ink); }

/* The garden: each flower stands in its own small soil bed, with a fringe of grass and a
   wooden stake pushed in front of it. --fw and --fh are the drawn flower's frame (5:6); the
   soil line sits .145 of the frame above its foot. Where subgrid works, each plot spans two
   rows of the bed (flowers, then stakes): a row is as tall as its tallest plant, every bed
   in it shares one soil line, and the frame's empty top is cut (data-crop). Older Safari
   keeps whole frames, which line up by themselves. */
.garden__bed { position: relative; z-index: 1; padding: .25rem 0 .5rem; }
.garden__plots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.25rem .75rem;
}
.garden__cell { display: flex; justify-content: center; min-width: 0; }
.plot {
  --fw: 8rem;
  --fh: 9.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.plot__flower { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; }
.plot__flower .flower { display: block; flex: none; width: var(--fw); max-width: 100%; pointer-events: none; }
/* The bed under the flower and the grass along its back edge. */
.plot__flower::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: .125rem;
  right: .125rem;
  bottom: calc(var(--fh) * .145 - 1.75rem);
  height: 1.75rem;
  border-radius: 50% 50% .875rem .875rem / .75rem .75rem .875rem .875rem;
  background-color: var(--soil);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 236, 214, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 70%, rgba(40, 18, 10, .25) 0 1.1px, transparent 1.6px);
  background-size: 23px 17px, 31px 23px;
  box-shadow: inset 0 3px 0 rgba(255, 236, 214, .14), inset 0 -8px 12px -8px rgba(0, 0, 0, .35), 0 2px 0 rgba(59, 31, 51, .06);
}
.plot__flower::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1.5rem;
  right: 1.5rem;
  bottom: calc(var(--fh) * .145 - .3rem);
  height: .75rem;
  background: var(--leaf-a);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M1 12c1-4 1-7 0-10 2 3 3 6 3 10zM6 12c1-3 3-6 5-7-1 3-1 5-1 7zM13 12c0-4 1-7 3-9-1 4-1 6 0 9zM20 12c1-3 1-6 0-8 2 2 3 5 3 8zM27 12c1-4 3-6 5-7-1 3-2 5-1 7zM35 12c0-3 0-6-1-9 2 3 4 6 4 9zM42 12c1-3 3-5 5-6-2 2-2 4-2 6zM49 12c0-3 1-5 2-7 0 3 1 5 1 7zM55 12c1-2 2-4 4-5-1 2-1 3-1 5z'/%3E%3C/svg%3E") 0 100% / 3.75rem .75rem repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M1 12c1-4 1-7 0-10 2 3 3 6 3 10zM6 12c1-3 3-6 5-7-1 3-1 5-1 7zM13 12c0-4 1-7 3-9-1 4-1 6 0 9zM20 12c1-3 1-6 0-8 2 2 3 5 3 8zM27 12c1-4 3-6 5-7-1 3-2 5-1 7zM35 12c0-3 0-6-1-9 2 3 4 6 4 9zM42 12c1-3 3-5 5-6-2 2-2 4-2 6zM49 12c0-3 1-5 2-7 0 3 1 5 1 7zM55 12c1-2 2-4 4-5-1 2-1 3-1 5z'/%3E%3C/svg%3E") 0 100% / 3.75rem .75rem repeat-x;
}
/* The light pool belongs to the bond page's hero; here the sky is enough. */
.plot .fl-pool { display: none; }
@supports (grid-template-rows: subgrid) {
  .garden__plots { row-gap: 0; }
  .garden__cell, .garden__cell > .plot { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .garden__cell { padding-bottom: 1.25rem; }
  .garden__cell > .plot { justify-items: center; }
  .plot__flower { align-self: end; }
  .plot__flower .flower { margin-top: calc(var(--crop, 0) * -1.2 * min(var(--fw), 100%)); }
  .stake { align-self: start; }
}
/* The stake: a small wooden sign with an end-grain line along its top. */
.stake {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .0625rem;
  width: auto;
  min-width: min(8.25rem, 100%);
  max-width: calc(100% - 1.5rem);
  margin-top: -.25rem;
  padding: .4375rem .5rem .5rem;
  border-radius: 5px;
  background-color: var(--stake);
  background-image: linear-gradient(to bottom, rgba(92, 58, 32, .16) 0, rgba(92, 58, 32, .16) 4px, rgba(92, 58, 32, 0) 4px);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 0 rgba(43, 24, 14, .22), 0 8px 14px -8px rgba(43, 24, 14, .55);
  transform: rotate(-1.2deg);
}
.garden__cell:nth-child(3n+2) .stake { transform: rotate(.9deg); }
.garden__cell:nth-child(3n) .stake { transform: rotate(-.4deg); }
/* Names break only between words, never mid-word (ux-2); a single very long word still wraps
   inside the stake's max-width rather than running out of it. */
.stake__name { max-width: 100%; font-family: var(--font-story); font-weight: 600; font-size: 1.125rem; line-height: 1.2; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
/* A name with a word over 10 letters ("Bartholomew-Alexander") steps down a size, so its long
   word fits the stake and a hyphenated one breaks after its hyphen, never before it. */
.stake__name--long { font-size: .9375rem; }
.stake__stage { display: inline-flex; align-items: center; gap: .3125rem; font-weight: 700; font-size: .875rem; letter-spacing: .02em; line-height: 1.3; }
.stake__stage .mark { width: 1.375em; height: 1.375em; color: var(--kind-text); --mark-accent: var(--kind); --mark-accent-o: .6; }
.stake__note { font-size: .9375rem; line-height: 1.4; }
.stake__note--quiet { margin-top: .125rem; font-weight: 700; font-size: .875rem; }
.signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  width: 100%;
  margin-top: .3125rem;
  padding-top: .3125rem;
  border-top: 1.5px dashed rgba(92, 58, 32, .28);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.25;
  text-align: left;
}
.signal + .signal { margin-top: 0; padding-top: .1875rem; border-top: 0; }
.signal > span { text-wrap: balance; }
.signal .mark { flex: none; width: 1.5rem; height: 1.5rem; }
.signal--mail .mark { color: var(--ink); --mark-accent: var(--rose); --mark-accent-o: 1; transform: rotate(-4deg); }
.signal--results .mark { color: var(--ink); --mark-accent: var(--leaf); --mark-accent-o: .9; }
.signal--ask .mark { color: var(--ink); --mark-accent: var(--peri); --mark-accent-o: .9; transform: rotate(4deg); }
.signal--invite .mark { color: var(--ink); --mark-accent: var(--rose); --mark-accent-o: .85; transform: rotate(-10deg); }
.signal--left .mark { color: var(--ink); --mark-accent: var(--honey); --mark-accent-o: .6; transform: rotate(35deg); }
.signal--replied .mark { color: var(--ink); --mark-accent: var(--rose); --mark-accent-o: .75; }
.signal--turn .mark { color: var(--ink); --mark-accent: var(--leaf); --mark-accent-o: .85; transform: rotate(-3deg); }
.plot:focus-visible .stake { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink), 0 8px 14px -8px rgba(43, 24, 14, .55); }

/* No flowers yet: a bare bed with a seed packet on a stick. */
.plot--empty { --fw: 8rem; --fh: 6rem; max-width: 20rem; margin: 0 auto; }
.plot__flower--bare { height: var(--fh); }
.plot--empty .plot__flower::before { bottom: -.5rem; }
.plot--empty .plot__flower::after { bottom: .95rem; }
.plot__flower--bare svg { position: absolute; display: block; overflow: visible; }
.plot__mound { left: 50%; bottom: 0; width: var(--fw); height: auto; margin-left: calc(var(--fw) / -2); }
.plot__soil { fill: var(--soil); }
.plot__rim { fill: rgba(255, 236, 214, .2); }
.plot__stick { fill: none; stroke: #C9A77A; stroke-width: 2.5; stroke-linecap: round; }
.plot__packet {
  left: 50%;
  top: 0;
  width: 2.875rem;
  height: 5.127rem;
  margin-left: -1.4375rem;
  transform: rotate(-6deg);
  --packet: var(--rose-soft);
  --packet-window: var(--card);
  color: var(--rose);
  --mark-accent: var(--honey);
  --mark-accent-o: 1;
  filter: drop-shadow(0 3px 3px rgba(43, 24, 14, .22));
}
.stake--wide { width: 100%; max-width: 18rem; padding: .75rem 1rem .875rem; gap: .25rem; margin-top: .25rem; transform: none; }
.stake--wide .stake__name { font-size: 1.375rem; }

/* The night garden's fireflies glow twice, then rest. */
.garden__fireflies { display: none; }
.garden__actions { display: flex; flex-direction: column; gap: .625rem; }

@media (prefers-color-scheme: dark) {
  /* The sky follows the clock in the dark too (ux-35): dawn, day and dusk are the same hours
     dimmed (the -dk tokens in app.css), and the evening is the night garden (sky--night: moon,
     stars and the fireflies). */
  .garden > .sky { --sky-a: var(--sky-day-dk); --sky-b: var(--sky-day-dk); background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 46%, rgba(27, 18, 25, 0) 100%); }
  .garden.sky--dawn > .sky { --sky-a: var(--sky-dawn-dk); --sky-b: var(--sky-dawn-dk); }
  .garden.sky--dusk > .sky { --sky-a: var(--sky-dusk-dk); --sky-b: var(--night-b); }
  .garden.sky--eve > .sky, .garden.sky--night > .sky { --sky-a: var(--night-a); --sky-b: var(--night-b); background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 48%, rgba(27, 18, 25, 0) 100%); }
  .sky__sun circle { fill: #CDB684; }
  .sky__sun .sky__glow { opacity: .16; }
  .sky--dawn .sky__sun circle { fill: #C99A86; }
  .sky--dusk .sky__sun circle { fill: #C98674; }
  .sky--dusk .sky__sun .sky__glow { opacity: .2; }
  .sky__clouds path, .sky--dusk .sky__clouds path { fill: rgba(255, 240, 246, .1); }
  .garden.sky--eve > .sky .sky__sun, .garden.sky--eve > .sky .sky__clouds,
  .garden.sky--night > .sky .sky__sun, .garden.sky--night > .sky .sky__clouds { display: none; }
  .garden.sky--eve > .sky .sky__moon, .garden.sky--night > .sky .sky__moon { display: inline; }
  .garden.sky--eve > .sky .sky__stars, .garden.sky--night > .sky .sky__stars { display: block; }
  .sky__moon { fill: var(--moon); opacity: 1; }
  .sky__stars path:nth-child(1) { opacity: .85; }
  .sky__stars path:nth-child(2) { opacity: .45; }
  .sky__stars path:nth-child(3) { opacity: .6; }
  .garden.sky--eve .garden__fireflies,
  .garden.sky--night .garden__fireflies { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: -1rem; height: 9rem; pointer-events: none; }
  .garden__fireflies i { position: absolute; width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 6px 2px rgba(249, 226, 125, .45); opacity: .45; }
  .garden__fireflies i:nth-child(1) { left: 9%; top: 22%; }
  .garden__fireflies i:nth-child(2) { left: 46%; top: 8%; }
  .garden__fireflies i:nth-child(3) { left: 58%; top: 64%; }
  .garden__fireflies i:nth-child(4) { left: 91%; top: 38%; }
  .plot__flower::before { box-shadow: inset 0 3px 0 rgba(255, 236, 214, .07), inset 0 -8px 12px -8px rgba(0, 0, 0, .5); }
  .stake { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) 4px, rgba(0, 0, 0, 0) 4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 0 rgba(0, 0, 0, .45), 0 8px 14px -8px rgba(0, 0, 0, .8); }
  .signal { border-top-color: rgba(255, 240, 246, .22); }
  .plot__rim { fill: rgba(255, 236, 214, .1); }
  .plot__stick { stroke: #7A5E44; }
  .bond-book { box-shadow: inset 0 0 0 7px var(--cloth), inset 0 0 0 8px rgba(0, 0, 0, .35), inset 0 0 0 9px rgba(255, 255, 255, .10), var(--e1); }
}

/* ------------------------------------------------------------- the landing */
.page-landing .wrap { gap: 1.5rem; }
.landing-left { display: flex; align-items: center; gap: .5rem; }
.landing-left .mark { color: var(--leaf-text); }
.landing-hero { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-top: .75rem; text-align: center; }
.landing-hero .display { max-width: 11em; }
.landing-hero .lead { max-width: 22rem; }
.garden--landing { margin: -.25rem 0 0; }
.garden__bed--landing {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 0;
  padding-bottom: 1.25rem;
  background: none;
  box-shadow: none;
}
.garden__bed--landing::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(min(6.75rem, 29vw) * 1.2 * .86 - .5rem);
  left: 1.5rem;
  right: 1.5rem;
  height: .75rem;
  background: var(--leaf-a);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M1 12c1-4 1-7 0-10 2 3 3 6 3 10zM6 12c1-3 3-6 5-7-1 3-1 5-1 7zM13 12c0-4 1-7 3-9-1 4-1 6 0 9zM20 12c1-3 1-6 0-8 2 2 3 5 3 8zM27 12c1-4 3-6 5-7-1 3-2 5-1 7zM35 12c0-3 0-6-1-9 2 3 4 6 4 9zM42 12c1-3 3-5 5-6-2 2-2 4-2 6zM49 12c0-3 1-5 2-7 0 3 1 5 1 7zM55 12c1-2 2-4 4-5-1 2-1 3-1 5z'/%3E%3C/svg%3E") 0 100% / 3.75rem .75rem repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M1 12c1-4 1-7 0-10 2 3 3 6 3 10zM6 12c1-3 3-6 5-7-1 3-1 5-1 7zM13 12c0-4 1-7 3-9-1 4-1 6 0 9zM20 12c1-3 1-6 0-8 2 2 3 5 3 8zM27 12c1-4 3-6 5-7-1 3-2 5-1 7zM35 12c0-3 0-6-1-9 2 3 4 6 4 9zM42 12c1-3 3-5 5-6-2 2-2 4-2 6zM49 12c0-3 1-5 2-7 0 3 1 5 1 7zM55 12c1-2 2-4 4-5-1 2-1 3-1 5z'/%3E%3C/svg%3E") 0 100% / 3.75rem .75rem repeat-x;
}
.landing-flower { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; max-width: 9rem; }
.landing-flower::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1px;
  right: -1px;
  top: calc(min(6.75rem, 29vw) * 1.2 * .86);
  bottom: -1.25rem;
  background-color: var(--soil);
  background-image: radial-gradient(circle at 30% 40%, rgba(255, 236, 214, .16) 0 1px, transparent 1.5px);
  background-size: 37px 29px;
}
.landing-flower:first-child::before { border-radius: 18px 0 0 18px; }
.landing-flower:last-child::before { border-radius: 0 18px 18px 0; }
.landing-flower .flower { width: min(6.75rem, 29vw); }
.landing-flower__name {
  position: relative;
  max-width: 100%;
  margin-top: .25rem;
  padding: .3125rem min(.75rem, 2.6vw) .375rem;
  border-radius: 6px;
  background: var(--stake);
  color: var(--ink);
  font-weight: 700;
  font-size: min(.9375rem, 4.4vw);
  line-height: 1.2;
  box-shadow: inset 0 -3px 0 rgba(92, 58, 32, .13), 0 2px 0 rgba(43, 24, 14, .28);
}
html.lb-grow [data-landing-bed] .fl-part:not([data-at="0"]):not(.is-up) { opacity: 0; }
.landing-cta { display: flex; flex-direction: column; gap: .625rem; }
.landing-how { display: flex; flex-direction: column; gap: 1.125rem; padding: .25rem 0; }
.landing-how__step { display: flex; align-items: flex-start; gap: .875rem; }
.landing-how__step h3 { font-size: 1.25rem; margin-bottom: .125rem; }
.landing-how__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose-text);
  --mark-accent: var(--honey);
  --mark-accent-o: .9;
}
.landing-how__mark .mark { width: 1.75rem; height: 1.75rem; }
.landing-promise { display: flex; flex-direction: column; gap: .75rem; }
.landing-promise a { font-weight: 700; }

/* --------------------------------------------------------------- planting */
.planting { display: flex; flex-direction: column; gap: 1.5rem; }
.planting__title { font-size: 2rem; }
.planting fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.planting__legend { padding: 0; font-weight: 700; font-size: .9375rem; }
.planting__group { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.planting__group-name { display: inline-flex; align-items: center; gap: .375rem; color: var(--kind-text); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.planting__group-name .mark { --mark-accent: var(--kind); --mark-accent-o: .5; }
.planting__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .5rem; }
.planting__grid > * { min-width: 0; }
.planting__role-card > span { min-width: 0; }
.planting__role { position: relative; display: flex; }
.planting__role input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.planting__role-card {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .5rem .75rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--sunken);
  font-weight: 700;
  line-height: 1.25;
}
.planting__role-card .mark { flex: none; width: 1.625rem; height: 1.625rem; color: var(--kind-text); --mark-accent: var(--kind); --mark-accent-o: .55; }
.planting__role input:checked + .planting__role-card { background: var(--kind-soft); border-color: var(--kind); box-shadow: var(--e1); }
.planting__role input:focus-visible + .planting__role-card { outline: 3px solid var(--ink); outline-offset: 2px; }
.planting__help { margin-top: .625rem; font-size: .875rem; color: var(--muted); }
.planting__preview { display: flex; justify-content: center; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
.planting__specimen { --pw: min(6.25rem, 28vw); display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.planting__specimen .flower { width: var(--pw); margin-top: calc(var(--crop, 0) * -1.2 * var(--pw)); }
.planting.is-live[data-kind="romantic"] .planting__specimen,
.planting.is-live[data-kind="platonic"] .planting__specimen,
.planting.is-live[data-kind="familial"] .planting__specimen { --pw: 8.75rem; }
.planting.is-live[data-kind="romantic"] .planting__species,
.planting.is-live[data-kind="platonic"] .planting__species,
.planting.is-live[data-kind="familial"] .planting__species { display: none; }
.planting__species { font-weight: 700; font-size: .875rem; color: var(--muted); text-align: center; }
.planting__caption { margin-top: .375rem; text-align: center; font-family: var(--font-story); font-size: 1.125rem; line-height: 1.35; }
/* "Surprise me" on its own row (it is preselected), then the kind's four colours in a row. */
.planting__colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.75rem), 1fr)); gap: .25rem; margin-top: .875rem; }
.planting__set { display: contents; }
.planting__swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: var(--tap); min-height: var(--tap); padding: .375rem .125rem; border-radius: var(--r-tile); cursor: pointer; }
.planting__swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.planting__dot {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--fl-pb) 0, var(--fl-pa) 58%, var(--fl-ps) 100%);
  box-shadow: inset 0 0 0 1px rgba(59, 31, 51, .1);
}
.planting__dot--surprise { background: conic-gradient(#F49AB6 0 25%, #FFC83D 0 50%, #8FA8F5 0 75%, #FF9A84 0); }
.planting[data-kind="romantic"] .planting__dot--surprise { background: conic-gradient(#F49AB6 0 25%, #FF9A84 0 50%, #E2557A 0 75%, #D7A3E6 0); }
.planting[data-kind="platonic"] .planting__dot--surprise { background: conic-gradient(#FFC83D 0 25%, #FFAE7A 0 50%, #FFF3C4 0 75%, #FF7A6B 0); }
.planting[data-kind="familial"] .planting__dot--surprise { background: conic-gradient(#8FA8F5 0 25%, #B79BEA 0 50%, #7FC4EC 0 75%, #F2A7C8 0); }
.planting__swatch-name { font-weight: 700; font-size: .875rem; line-height: 1.2; text-align: center; }
.planting__swatch--surprise { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: .625rem; justify-self: center; padding: .25rem 1rem .25rem .375rem; }
.planting__swatch input:checked ~ .planting__dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink); }
.planting__swatch input:focus-visible ~ .planting__dot { outline: 3px solid var(--ink); outline-offset: 5px; }

/* "Is Leo 13 or older?" (ux-4) and "What does Ava call you?" (f-7), under the roles. */
.planting__ask { display: flex; flex-direction: column; gap: .625rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.planting__ask-q { font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.25; overflow-wrap: break-word; }
.planting__ask .planting__ask-q { margin-bottom: .625rem; }   /* a legend sits outside the gap */
.planting__yesno { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .5rem; }
.planting__pick { position: relative; display: flex; }
.planting__pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.planting__pick span {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-lg);
  padding: .5rem .75rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--sunken);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-align: center;
}
.planting__pick input:checked + span { background: var(--kind-soft); border-color: var(--kind); box-shadow: var(--e1); }
.planting__pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.planting__ask { --kind: var(--peri); --kind-soft: var(--peri-soft); --kind-text: var(--peri-text); }   /* family questions */
.planting__call-field > span { font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.25; overflow-wrap: break-word; }
.planting__chips { gap: .5rem; }
/* The chips are the design system's (a pressed one turns rose); these are just tap-sized. */
.planting__chip { min-height: 2.5rem; padding: .25rem 1rem; font-size: 1rem; }
.planting__chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Two questions this flower could bring, with the typed name (ux-45). */
.planting__samples { display: flex; flex-direction: column; gap: .375rem; margin-top: 1.125rem; padding: .875rem 1rem; border-radius: var(--r-tile); background: var(--card); box-shadow: var(--e1); }
.planting__samples-title { font-weight: 700; font-size: .875rem; letter-spacing: .02em; color: var(--muted); }
.planting__sample-list { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.planting__sample { font-family: var(--font-story); font-weight: 500; font-size: 1.125rem; line-height: 1.35; overflow-wrap: break-word; }
.planting__sample::before { content: "“"; }
.planting__sample::after { content: "”"; }

/* "Kids under 13 play at the family table" (ux-4): in place of Plant it. */
.planting-young { display: flex; flex-direction: column; align-items: center; gap: .625rem; text-align: center; }
.planting-young__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--peri-soft);
  color: var(--peri-text);
  --mark-accent: var(--honey);
  --mark-accent-o: 1;
}
.planting-young__art .mark { width: 2rem; height: 2rem; }
.planting-young__title { font-size: 1.375rem; line-height: 1.2; }
.planting-young .btn--primary { margin-top: .25rem; }
.planting-young__again { min-height: var(--tap); }
.planting--young { display: flex; flex-direction: column; gap: 1.5rem; }

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .plot__flower > .flower, html:not(.calm) .bond-hero__flower > .flower { view-transition-name: var(--vt, none); }

  /* The bond hero sways twice from the stem base, then rests. */
  html:not(.calm) .bond-hero__flower .fl-plant { animation: bond-hero-sway 7000ms ease-in-out 2; }

  /* Home: plots rise in, 60 ms apart; one breeze passes; then stillness. */
  html:not(.calm) .garden__cell { animation: plot-rise 320ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 12) * 60ms); }
  html:not(.calm) .garden.is-breezing .plot__flower .fl-plant { animation: garden-breeze 1600ms ease-in-out both; animation-delay: calc(var(--i, 0) * 70ms); }

  /* The bloom banner drops 12px from under the header flower. */
  html:not(.calm) .hdr-flower__banner { transform: translateY(-12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
  html:not(.calm) .hdr-flower__banner.is-shown { transform: none; }
  html:not(.calm) .hdr-flower__banner.is-leaving { transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in); }

  /* Bloom day (at most 3.2 s; bloom.js sets --fx/--fy/--fs, --hx/--hy and each part's --d). */
  html:not(.calm) .moment.is-playing .moment__scrim { animation: moment-fade 240ms ease-out both; }
  html:not(.calm) .moment.is-playing .moment__fly { animation: moment-stage 1600ms linear both; }
  html:not(.calm) .moment.is-playing.is-unanchored .moment__flower { animation: moment-fade 400ms ease-out both; }
  html:not(.calm) .moment.is-playing .moment__fly > .flower { animation: moment-dip 480ms 400ms forwards; }
  html:not(.calm) .moment.is-playing .moment__pollen i { animation: moment-pollen 700ms var(--ease-out) 1300ms both; }
  html:not(.calm) .moment.is-playing .moment__label { animation: moment-rise 360ms var(--ease-out) 1500ms both; }
  html:not(.calm) .moment.is-playing .moment__packet { animation: moment-slide 320ms var(--ease-out) 1900ms both; }
  html:not(.calm) .moment.is-playing .moment__go { animation: moment-fade 240ms ease-out 2000ms both; }
  html:not(.calm) .moment .fl-growing > .fl-grow,
  html:not(.calm) .moment .fl-growing.fl-k-stem path { animation-delay: var(--d, 0ms); }
  html:not(.calm) .moment .fl-growing.fl-k-stem path { animation-duration: 600ms; }
  html:not(.calm) .moment .fl-growing.fl-k-bud > .fl-grow { animation-name: moment-swell; animation-duration: 600ms; }
  html:not(.calm) .moment .fl-floret .fl-bl { transition-delay: var(--d, 0ms); }
  html:not(.calm) .moment.is-closing .moment__scrim { animation: moment-fade-out 240ms ease-in both; }
  html:not(.calm) .moment.is-closing .moment__label,
  html:not(.calm) .moment.is-closing .moment__packet,
  html:not(.calm) .moment.is-closing .moment__go { animation: moment-fade-out 150ms ease-in both; }
  html:not(.calm) .moment.is-closing .moment__fly { animation: moment-return 400ms var(--ease-move) both; }
  html:not(.calm) .moment.is-closing.is-fading { animation: moment-fade-out 240ms ease-in both; }
}
/* The end state, at once: no part, label or button waits any longer. */
.moment.is-done .fl-growing > .fl-grow, .moment.is-done .fl-growing path { animation: none !important; }
.moment.is-done .fl-floret .fl-bl { transition: none !important; }
.moment.is-still { animation: moment-fade 150ms ease-out both; }

@media (prefers-color-scheme: dark) and (prefers-reduced-motion: no-preference) {
  html:not(.calm) .garden__fireflies i { animation: garden-firefly 2600ms ease-in-out 2 both; }
  html:not(.calm) .garden__fireflies i:nth-child(2) { animation-delay: 700ms; }
  html:not(.calm) .garden__fireflies i:nth-child(3) { animation-delay: 1300ms; }
  html:not(.calm) .garden__fireflies i:nth-child(4) { animation-delay: 400ms; }
}

@keyframes bond-hero-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.5deg); } 75% { transform: rotate(-1.5deg); } }
@keyframes plot-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes garden-breeze { 0%, 100% { transform: rotate(0deg); } 38% { transform: rotate(3deg); } 72% { transform: rotate(-.75deg); } }
@keyframes garden-firefly { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes moment-fade { from { opacity: 0; } }
@keyframes moment-fade-out { to { opacity: 0; } }
/* hero -> the centre at 1.15x (400 ms, move), held while it grows, then settled above the
   label (1200-1600 ms, out), which rises at 1500. */
@keyframes moment-stage {
  0% { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fs, 1)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  25% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(var(--cs, 1)); animation-timing-function: linear; }
  75% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(var(--cs, 1)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100% { transform: none; }
}
@keyframes moment-dip {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  37% { transform: scale(.96); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: scale(1); }
}
@keyframes moment-pollen {
  0% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(0) scale(.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r, 40px))) scale(1); }
}
@keyframes moment-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes moment-swell { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; } }
@keyframes moment-slide { from { opacity: 0; transform: translateY(24px); } }
@keyframes moment-return {
  60% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--bx, 0), var(--by, 0)) scale(var(--bs, 1)); }
}

/* Print: the garden prints still; overlays and flights never print. */
@media print {
  .moment--full, .hdr-flower__banner, .hdr-flower__token, .hdr-flower__plus, .bond-leave, .bond-handy, .garden > .sky, .garden__fireflies { display: none !important; }
}