/* ============================================================
   bloom_date.components.css · วันดอกบาน → ช่วงที่ควรเริ่มตรวจ
   ------------------------------------------------------------
   EXTENDS the SHIPPED Harvest Readiness block (harvest.components.css:
   .ocblock / .ocb-hd / .hr-*). This file adds ONLY the instruments the
   bloom-date anchor needs and that have no analogue on the shipped card.
   It does NOT mint a second harvest card — every new node lives INSIDE
   the one .ocblock.hr, above the GDD clock it feeds.

   Loaded LAST, after harvest.components.css.

   Every value resolves to a supply.tokens.css variable — NO new colour,
   font, radius, shadow or provenance hue is minted. Certainty stays
   MATERIAL (glyph + edge + weight + opacity), greyscale- and glare-safe:
     · satellite guess  = ~ ochre (--pv-est), dashed, "regional" scope.
     · grower-confirmed  = ◆ declared, the owner's own private datum.
     · projected window  = ~ ochre BAND; its WIDTH is the uncertainty
                           (no ±N number, ever). Coarse = wider band.
     · check-methods     = calm brass action — a clock, never a verdict.
   ============================================================ */

/* ============================================================
   BLOOM ANCHOR — the DAA start-of-clock, sitting at the TOP of the
   harvest block (it is what makes the clock trustworthy). One row,
   three lives: satellite confirm-or-correct · grower-set · not-set.
   ============================================================ */
.hr-bloom{ display:flex; flex-direction:column; gap:.6rem;
  border:1px solid var(--line2); border-radius:var(--r); background:var(--surface); padding:var(--s4); }
.hr-bloomlbl{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs);
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }
.hr-bloomlbl .ic{ width:14px; height:14px; display:inline-flex; color:var(--brand2); }
.hr-bloomlbl .ic svg{ width:100%; height:100%; display:block; }
.hr-bloomlbl .grow{ flex:1; }

/* — the satellite confirm-or-correct (the MAIN first-run path) — */
.bd-guess{ display:flex; flex-direction:column; gap:.7rem; }
.bd-guessread{ display:flex; align-items:flex-start; gap:.7rem; }
.bd-satglyph{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center;
  background:var(--pv-est-bg); color:var(--pv-est); border:1px dashed var(--pv-est-ln); }
.bd-satglyph svg{ width:19px; height:19px; display:block; }
.bd-guessmain{ flex:1; min-width:0; }
.bd-guesslead{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; }
.bd-guessdate{ font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.015em; line-height:1.1; color:var(--ink);
  display:flex; align-items:baseline; gap:.35rem; margin-top:.1rem; }
.bd-guessdate .tilde{ color:var(--pv-est); font-weight:var(--fw-bold); }
.bd-guessdate .rng{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* the honest scope chip — this is REGION-level + machine-guessed, and says so */
.bd-satchip{ align-self:flex-start; display:inline-flex; align-items:center; gap:.35rem; margin-top:.35rem;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); line-height:1.5; white-space:nowrap;
  padding:.12rem .5rem; border-radius:var(--r-pill);
  background:var(--pv-est-bg); color:var(--pv-est); border:1px dashed var(--pv-est-ln); }
.bd-satchip .g{ font-weight:var(--fw-x); }
/* confirm-or-correct actions — confirm is the emphasised 1-tap path */
.bd-acts{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.bd-acts .btn{ flex:1 1 auto; justify-content:center; }

/* — grower has SET a bloom date (◆ declared, the owner's own datum) — */
.bd-set{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.bd-setmain{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; }
.bd-setdate{ font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em; color:var(--ink);
  display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.bd-setdate .val{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.bd-setdate .approx{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--muted); }
.bd-declchip{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); line-height:1.5;
  padding:.12rem .5rem; border-radius:var(--r-pill);
  background:var(--surface2); color:var(--ink2); border:1px dashed var(--line2); }
.bd-declchip .g{ color:var(--muted); font-weight:var(--fw-x); }
/* privacy reminder toned to the OWNER's own data (echoes .gm-pinnote) */
.bd-setsrc{ font-size:var(--fs-xs); color:var(--muted); line-height:1.4; }
.bd-setsrc .lk{ color:var(--pv-private); font-weight:var(--fw-semi); }

/* — no bloom date + no satellite signal: a calm invitation — */
.bd-empty{ display:flex; gap:.7rem; align-items:flex-start; }
.bd-emptyic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.bd-emptyic svg{ width:19px; height:19px; display:block; }
.bd-emptymain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.bd-emptymain b{ font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.bd-emptymain p{ margin:0; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; }
.bd-emptymain .btn{ align-self:flex-start; }

/* — multiple flushes: the main flush + added flush chips — */
.bd-flushes{ display:flex; flex-direction:column; gap:.5rem; border-top:1px dashed var(--line2); padding-top:.6rem; }
.bd-flushrow{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
.bd-flushchip{ display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line2); background:var(--surface2); color:var(--ink2);
  border-radius:var(--r-pill); padding:.35rem .7rem; font-size:var(--fs-xs); font-weight:var(--fw-semi); }
.bd-flushchip .no{ width:16px; height:16px; flex:0 0 16px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; font-weight:var(--fw-bold);
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.bd-flushchip.main .no{ background:var(--brand-fill); color:var(--brand-fill-ink); border-color:var(--brand); }
.bd-flushchip .x{ color:var(--muted); font-weight:var(--fw-bold); cursor:pointer; padding-left:.1rem; }
.bd-addflush{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; font:inherit;
  border:1px dashed var(--brand); background:transparent; color:var(--brand-ink);
  border-radius:var(--r-pill); padding:.35rem .7rem; font-size:var(--fs-xs); font-weight:var(--fw-bold); }
.bd-addflush .ic{ width:13px; height:13px; display:inline-flex; }
/* the "we don't predict every flush" honesty note */
.bd-flushnote{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.5; }

/* ============================================================
   PROJECTED CHECK-WINDOW · RANGE BAR — the heart of the honest read.
   The band = the projected window "ควรเริ่มตรวจ"; its WIDTH is the
   uncertainty (never a ±N number). Coarser bloom input → wider band.
   Estimate grammar (~ ochre, dashed). Builds on the shipped .hr-track.
   ============================================================ */
.hr-band{ display:flex; flex-direction:column; gap:.5rem; }
.hr-bandlbl{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }
.hr-bandlbl .tilde{ color:var(--pv-est); font-weight:var(--fw-x); font-size:.95rem; }
.hr-bandlbl .grow{ flex:1; }
.hr-bandlbl .hr-banddates{ font-family:var(--mono); color:var(--pv-est); text-transform:none; letter-spacing:0; font-weight:var(--fw-bold); }

.hr-bandtrack{ position:relative; height:20px; border-radius:var(--r-pill);
  background:var(--bg2); border:1px solid var(--line2); overflow:hidden; }
/* the projected band — dashed ochre estimate; a soft feathered edge so
   it reads as "fuzzy", not a hard commitment */
.hr-bandtrack .hr-bandfill{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill);
  background:repeating-linear-gradient(45deg, var(--pv-est-bg) 0 6px, color-mix(in srgb,var(--pv-est-bg) 60%, var(--surface)) 6px 12px);
  border:1.5px dashed var(--pv-est-ln); }
.hr-bandtrack .hr-bandfill .flab{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--pv-est); white-space:nowrap; }
/* a second, tighter flush band for the "another flush" case */
.hr-bandtrack .hr-bandfill.f2{ background:repeating-linear-gradient(45deg, var(--brand-soft) 0 6px, color-mix(in srgb,var(--brand-soft) 55%, var(--surface)) 6px 12px);
  border-color:var(--brand); }
.hr-bandtrack .hr-bandfill.f2 .flab{ color:var(--brand-ink); }
.hr-bandtrack .hr-bandnow{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:2px; z-index:3; }
.hr-bandtrack .hr-bandnow::after{ content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--ink); }
.hr-bandticks{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted);
  font-family:var(--mono); font-variant-numeric:tabular-nums; }
.hr-bandticks .nowtick{ color:var(--ink); font-weight:var(--fw-bold); }
/* the little "wider = less sure" legend under the bar */
.hr-bandwhy{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); color:var(--muted); line-height:1.4; }
.hr-bandwhy .sw{ display:inline-block; width:26px; height:9px; border-radius:var(--r-pill);
  background:repeating-linear-gradient(45deg, var(--pv-est-bg) 0 4px, color-mix(in srgb,var(--pv-est-bg) 60%, var(--surface)) 4px 8px);
  border:1px dashed var(--pv-est-ln); flex:0 0 26px; }

/* state re-tints of the band (reuse the shipped .ocblock.ready / .past) */
.ocblock.ready .hr-bandtrack .hr-bandfill{ border-color:var(--brand);
  background:repeating-linear-gradient(45deg, var(--brand-soft) 0 6px, color-mix(in srgb,var(--brand-soft) 55%, var(--surface)) 6px 12px); }
.ocblock.ready .hr-bandtrack .hr-bandfill .flab{ color:var(--brand-ink); }
.ocblock.ready .hr-bandlbl .hr-banddates{ color:var(--brand-ink); }
.ocblock.past .hr-bandtrack .hr-bandfill{ border-color:var(--pv-stale-ln);
  background:repeating-linear-gradient(45deg, var(--pv-stale-bg) 0 6px, color-mix(in srgb,var(--pv-stale-bg) 60%, var(--surface)) 6px 12px); }
.ocblock.past .hr-bandtrack .hr-bandfill .flab{ color:var(--pv-stale); }
.ocblock.past .hr-bandlbl .hr-banddates{ color:var(--pv-stale); }

/* ============================================================
   HOW TO CHECK — the verdict-substitute. We give a clock, they give the
   verdict, by the DOA method. Three calm rows; %แห้ง carries the meter.
   ============================================================ */
.hr-check{ display:flex; flex-direction:column; gap:.55rem;
  border:1px solid var(--brand); border-radius:var(--r);
  background:color-mix(in srgb,var(--brand-soft) 45%, var(--surface)); padding:var(--s4); }
.hr-checkhd{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--brand-ink); }
.hr-checkhd .ic{ width:17px; height:17px; flex:0 0 17px; color:var(--brand2); display:inline-flex; }
.hr-checkhd .ic svg{ width:100%; height:100%; display:block; }
.hr-checkways{ display:flex; flex-direction:column; gap:.4rem; }
.hr-way{ display:flex; align-items:flex-start; gap:.55rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45; }
.hr-way .n{ width:18px; height:18px; flex:0 0 18px; border-radius:50%; display:grid; place-items:center; margin-top:.05rem;
  font-family:var(--mono); font-size:10px; font-weight:var(--fw-bold);
  background:var(--surface); color:var(--brand-ink); border:1px solid var(--brand); }
.hr-way b{ color:var(--ink); font-weight:var(--fw-bold); }
.hr-way .dm{ display:inline-flex; align-items:center; gap:.3rem; margin-left:.25rem;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); padding:.05rem .4rem; border-radius:var(--r-pill);
  background:var(--pv-official-bg); color:var(--pv-official); border:1px solid var(--pv-official-ln); }
.hr-checkstd{ font-size:var(--fs-2xs); color:var(--brand2); line-height:1.4; }

/* the flush truth line — durian ripens in successive flushes (shipped wording) */
.hr-flushtruth{ display:flex; gap:.55rem; align-items:flex-start;
  font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.hr-flushtruth .ic{ color:var(--brand2); font-weight:var(--fw-x); flex:0 0 auto; }
.hr-flushtruth b{ color:var(--ink); font-weight:var(--fw-semi); }

/* ============================================================
   NOT-SURE DATE PICKER (drawer) — handles "จำวันไม่ได้แน่ ๆ".
   Three modes: exact day · a whole week · early/mid/late month.
   Big, high-contrast targets for a phone in bright sun.
   ============================================================ */
.bd-modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.bd-modebtn{ cursor:pointer; font:inherit; text-align:center;
  border:1px solid var(--line2); background:var(--surface); color:var(--ink2);
  border-radius:var(--r-sm); padding:.7rem .5rem; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  display:flex; flex-direction:column; align-items:center; gap:.3rem; min-height:56px; justify-content:center; }
.bd-modebtn .mi{ width:20px; height:20px; color:var(--muted); display:inline-flex; }
.bd-modebtn .mi svg{ width:100%; height:100%; display:block; }
.bd-modebtn[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); box-shadow:0 0 0 1px var(--brand) inset; }
.bd-modebtn[aria-pressed="true"] .mi{ color:var(--brand2); }

.bd-monthnav{ display:flex; align-items:center; gap:var(--s3); justify-content:space-between; }
.bd-monthnav .mo{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--ink); font-variant-numeric:tabular-nums; }
.bd-monthnav .nb{ width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line2);
  background:var(--surface); color:var(--ink); cursor:pointer; font-size:1.3rem; line-height:1; display:grid; place-items:center; }

/* exact-day grid — 7-col calendar, 44px hit targets */
.bd-daygrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.bd-dow{ font-size:var(--fs-2xs); color:var(--muted); text-align:center; font-weight:var(--fw-bold); padding-bottom:.2rem; }
.bd-day{ aspect-ratio:1; min-height:40px; border-radius:var(--r-sm); border:1px solid var(--line2);
  background:var(--surface); color:var(--ink); cursor:pointer; font:inherit; font-weight:var(--fw-semi);
  font-variant-numeric:tabular-nums; display:grid; place-items:center; font-size:var(--fs-sm); }
.bd-day.mut{ color:var(--muted); opacity:.45; }
.bd-day[aria-pressed="true"]{ background:var(--brand-fill); border-color:var(--brand); color:var(--brand-fill-ink); font-weight:var(--fw-bold); }
.bd-day.today{ box-shadow:0 0 0 2px var(--brand-soft) inset; }

/* whole-week rows */
.bd-weeks{ display:flex; flex-direction:column; gap:var(--s2); }
.bd-week{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font:inherit; text-align:left;
  border:1px solid var(--line2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:.75rem .9rem; min-height:48px; }
.bd-week .wn{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.bd-week .wr{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-xs); color:var(--muted); margin-left:auto; }
.bd-week[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); box-shadow:0 0 0 1px var(--brand) inset; }
.bd-week[aria-pressed="true"] .wr{ color:var(--brand2); }

/* early / mid / late thirds */
.bd-thirds{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.bd-third{ cursor:pointer; font:inherit; text-align:center;
  border:1px solid var(--line2); background:var(--surface); color:var(--ink);
  border-radius:var(--r-sm); padding:1rem .5rem; min-height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; }
.bd-third .tt{ font-size:var(--fs-md); font-weight:var(--fw-bold); }
.bd-third .tr{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-2xs); color:var(--muted); }
.bd-third[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); box-shadow:0 0 0 1px var(--brand) inset; }
.bd-third[aria-pressed="true"] .tr{ color:var(--brand2); }

/* the running "so we'll say ~" preview at the foot of the picker */
.bd-pickpreview{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  border:1px dashed var(--pv-est-ln); background:var(--pv-est-bg); border-radius:var(--r);
  padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45; }
.bd-pickpreview .g{ color:var(--pv-est); font-weight:var(--fw-x); }
.bd-pickpreview b{ color:var(--pv-est); font-weight:var(--fw-bold); font-family:var(--mono); }

/* ============================================================
   SALE-LOG · CONFIRM ACTUAL HARVEST (decision 3B) — represented here,
   not a rebuild of the shipped sale log. Two parts:
     · the ONE notification that fires after the window closes.
     · the added OPTIONAL "วันเก็บจริง" field — price stays the only
       required field, so this rides in the collapsible, chip-toned.
   ============================================================ */
.bd-panel{ display:flex; flex-direction:column; gap:var(--s4); }
.bd-panelnote{ font-size:var(--fs-xs); color:var(--muted); line-height:1.5;
  border-left:2px solid var(--line2); padding-left:.7rem; }

/* the harvest-confirm notification card (NOTIFICATIONS_REGISTER row) */
.bd-noti{ display:flex; gap:.7rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); padding:var(--s4); }
.bd-notiic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.bd-notiic svg{ width:21px; height:21px; display:block; }
.bd-notimain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.bd-notitop{ display:flex; align-items:baseline; gap:.5rem; }
.bd-notitop b{ font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.bd-notitop .tm{ margin-left:auto; font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }
.bd-noti p{ margin:0; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.bd-notiacts{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:.2rem; }
/* the "kept private" reminder — calibration data is PDPA-private */
.bd-notipriv{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-2xs);
  color:var(--pv-private); font-weight:var(--fw-semi); }
.bd-notipriv .ic{ width:13px; height:13px; display:inline-flex; }
.bd-notipriv .ic svg{ width:100%; height:100%; display:block; }

/* a compact rendering of the sale-log "more details" gaining the field */
.bd-formdemo{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface2); overflow:hidden; }
.bd-formhd{ display:flex; align-items:center; gap:.5rem; padding:.7rem var(--s4); border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:var(--fw-bold); }
.bd-formhd .req{ margin-left:auto; text-transform:none; letter-spacing:0; color:var(--pv-private); font-weight:var(--fw-semi); }
.bd-formrows{ display:flex; flex-direction:column; padding:var(--s3) var(--s4) var(--s4); gap:.15rem; }
.bd-formrow{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px dashed var(--line2); font-size:var(--fs-sm); }
.bd-formrow:last-child{ border-bottom:0; }
.bd-formrow .fk{ color:var(--ink2); font-weight:var(--fw-semi); }
.bd-formrow .opt{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); }
.bd-formrow .fv{ margin-left:auto; color:var(--muted); font-family:var(--mono); font-size:var(--fs-xs); }
.bd-formrow.priceonly .fk{ color:var(--ink); font-weight:var(--fw-bold); }
.bd-formrow.priceonly .badge{ margin-left:.4rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  padding:.05rem .4rem; border-radius:var(--r-pill); background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
/* the NEW field, marked so the reviewer sees exactly what was added */
.bd-formrow.added{ background:color-mix(in srgb,var(--pv-est-bg) 55%, transparent);
  margin:0 calc(-1 * var(--s4)); padding-left:var(--s4); padding-right:var(--s4); border-bottom:1px dashed var(--pv-est-ln); border-radius:var(--r-sm); }
.bd-formrow.added .fk{ color:var(--pv-est); font-weight:var(--fw-bold); }
.bd-formrow.added .newtag{ margin-left:.4rem; font-size:9px; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em;
  padding:.05rem .4rem; border-radius:var(--r-pill); background:var(--pv-est); color:#fff; }

/* ============================================================
   ENTRANCE — inherit the shipped [data-hr-anim] rise on the new nodes.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  [data-hr-anim] .hr-bloom, [data-hr-anim] .hr-band, [data-hr-anim] .hr-check, [data-hr-anim] .hr-flushtruth{
    animation:hr-rise .42s cubic-bezier(.22,.61,.36,1) both; }
  [data-hr-anim] .hr-bloom{ animation-delay:0s; }
  [data-hr-anim] .hr-band{ animation-delay:.08s; }
  [data-hr-anim] .hr-check{ animation-delay:.14s; }
}

/* ============================================================
   RESPONSIVE — mobile-first. The bloom guess-read stacks its actions;
   the picker grids already fit 320px. Hit targets ≥44px on coarse.
   ============================================================ */
@media (max-width:440px){
  .bd-guessread{ gap:.55rem; }
  .bd-set{ gap:.5rem; }
  .hr-bandtrack{ height:22px; }
}
@media (pointer:coarse){
  .bd-acts .btn, .bd-emptymain .btn, .bd-addflush, .bd-modebtn, .bd-day, .bd-week, .bd-third, .bd-notiacts .btn{ min-height:44px; }
  .bd-day{ min-height:44px; }
}

/* ── the way back to the anchor (port addition, 2026-08-11) ──────────
   Neither the prototype nor the first port had one: a bloom date was
   write-once, so anyone who accepted the satellite guess was anchored to it
   permanently — and those rows are the weakest data we hold. Kept quiet
   (ghost button, small caps label) because it is a correction path, not the
   thing to do on this screen. */
.bd-bandedit{ display:flex; align-items:center; gap:var(--s2);
  margin-top:var(--s2); padding-top:var(--s2); border-top:1px dashed var(--line2); }
.bd-bandanchor{ font-size:var(--fs-2xs); color:var(--muted); }
.bd-bandedit .grow{ flex:1; }