/* ============================================================
   harvest.components.css · Harvest Readiness (เก็บวันไหนดี)
   ------------------------------------------------------------
   A glanceable harvest-timing BLOCK on the grower-side orchard card
   (.fr-orchcard) — sibling of the Bargaining Brief block on the same
   card, surface = passport (สวนของฉัน), tab = แปลงของฉัน.

   EXTENDS Atlas. Every value resolves to a supply.tokens.css variable;
   NO new colour / font / radius / shadow / provenance hue is minted.
   Loaded LAST, after farm.components.css.

   The block sits in a SHARED embedded-strip shell (.ocblock / .ocb-hd)
   that the sibling Bargaining Brief block uses too — so the two read as
   one set on the card. The shell models the shipped .oc-band grammar (a
   dashed-top, faint-surface2 strip inside a card). Harvest reuses the
   window idea from the shipped .hwin and MINTS (hr-*) only the two
   honest-data instruments that have no analogue:
     1. the GDD DEVELOPMENT CLOCK — a deliberately COARSE 4-stage
        ladder (estimate ~, ochre), never a ripeness %.
     2. the OWNER-DECLARED WINDOW track + countdown (declared ◆,
        neutral) — counts to the date the OWNER typed, not a forecast.

   Honest-data, encoded as MATERIAL (greyscale-safe — glyph + edge +
   weight + opacity, never hue alone):
     · GDD read  = ~ ochre estimate, coarse stages, disclaimer always.
     · countdown = ◆ neutral declared (owner's own date).
     · in-window = calm brass (action), NOT a loud success-green.
     · past window = ◷ muted/stale + opacity, NEVER alarm-red.
     · no pin / no window = brand-soft INVITATION CTA, never an error.
   ============================================================ */

/* the [hidden] attribute must win over component display:flex/grid */
[hidden]{ display:none !important; }

/* ============================================================
   SHARED SHELL — an embedded strip inside the orchard card, used by
   BOTH the Bargaining Brief and Harvest Readiness blocks so they read
   as one set. Dashed top rule + faint surface2 ground = "a sub-section
   of this card", echoing the shipped .oc-band reliability strip.
   ============================================================ */
.ocblock{
  display:flex; flex-direction:column; gap:var(--s4);
  margin-top:.2rem; padding:var(--s4) var(--s4) var(--s4);
  border:1px solid var(--line); border-top:1.5px dashed var(--line2);
  border-radius:var(--r); background:
    linear-gradient(180deg, color-mix(in srgb,var(--surface2) 70%, var(--surface)), var(--surface));
}

/* quiet eyebrow: glyph badge + label + scope (echoes .ob-hd) */
.ocb-hd{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.ocb-hd .hr-ic{ width:24px; height:24px; flex:0 0 24px; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.ocb-hd .hr-ic svg{ width:15px; height:15px; display:block; }
.ocb-hd .hr-ttl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); font-weight:var(--fw-bold); }
.ocb-hd .grow{ flex:1; }
.ocb-hd .hr-scope{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* the Bargaining Brief sibling tints its shell glyph differently so the
   two blocks are siblings, not twins (representative — see notes §2) */
.ocblock.bb .ocb-hd .hr-ic{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }

/* ============================================================
   HERO — the glance. Two honest reads side by side, divided by a
   rule: the DEVELOPMENT word (estimate) and the COUNTDOWN (declared).
   ============================================================ */
.hr-hero{ display:flex; align-items:stretch; gap:var(--s4);
  border:1px solid var(--line2); border-radius:var(--r); background:var(--surface); padding:var(--s4); }
.hr-hero .hr-sep{ flex:0 0 1px; background:var(--line); align-self:stretch; }

/* left: the coarse developmental read (GDD = estimate) */
.hr-read{ flex:1.2 1 0; min-width:0; display:flex; flex-direction:column; gap:.4rem; }
.hr-readtop{ display:flex; align-items:center; gap:.5rem; }
.hr-readtop .hr-dot{ width:11px; height:11px; flex:0 0 11px; border-radius:50%;
  background:var(--pv-est); box-shadow:0 0 0 3px var(--pv-est-bg); }
.hr-status{ font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.015em; line-height:1.08; color:var(--ink); }
.hr-statussub{ font-size:var(--fs-sm); color:var(--muted); line-height:1.4; }
/* the ~estimate provenance chip riding under the developmental word */
.hr-estchip{ align-self:flex-start; display:inline-flex; align-items:center; gap:.35rem; margin-top:.1rem;
  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 solid var(--pv-est-ln); }
.hr-estchip .g{ font-weight:var(--fw-x); }

/* right: the owner-declared countdown */
.hr-count{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.15rem; text-align:right; }
.hr-countnum{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold);
  font-size:2.5rem; line-height:1; letter-spacing:-.02em; color:var(--brand2);
  display:flex; align-items:baseline; justify-content:flex-end; gap:.3rem; }
.hr-countnum .tilde{ color:var(--pv-est); font-size:1.4rem; }
.hr-countnum .hr-u{ font-family:var(--font); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--muted); }
.hr-countlab{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
.hr-declchip{ align-self:flex-end; display:inline-flex; align-items:center; gap:.35rem; margin-top:.25rem;
  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(--surface2); color:var(--ink2); border:1px dashed var(--line2); }
.hr-declchip .g{ color:var(--muted); font-weight:var(--fw-x); }

/* ============================================================
   GDD DEVELOPMENT CLOCK — a COARSE 4-stage ladder (estimate).
   Coarse by construction so it can never be misread as a precise
   ripeness %. Filled stages = ochre estimate; the active stage gets
   the dashed estimate edge + a ring of emphasis.
   ============================================================ */
.hr-clock{ display:flex; flex-direction:column; gap:.5rem; }
.hr-clocklbl{ 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-stages{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.hr-stage{ display:flex; flex-direction:column; gap:.32rem; min-width:0; }
.hr-stage .bar{ height:8px; border-radius:var(--r-pill); background:var(--bg2); border:1px solid var(--line2); }
.hr-stage .slab{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.2; font-weight:var(--fw-semi); }
.hr-stage.done .bar{ background:var(--pv-est-bg); border-color:var(--pv-est-ln); }
.hr-stage.done .slab{ color:var(--ink2); }
.hr-stage.on .bar{ background:var(--pv-est); border-color:var(--pv-est);
  box-shadow:0 0 0 2px var(--pv-est-bg); }
.hr-stage.on .slab{ color:var(--pv-est); font-weight:var(--fw-bold); }

/* the heat-sum read — mono, leading ~, with the "to mature" target band */
.hr-gdd{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--muted); }
.hr-gdd .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink2); font-weight:var(--fw-semi); }
.hr-gdd .tilde{ color:var(--pv-est); }
.hr-gdd .sep{ color:var(--line2); }

/* ============================================================
   OWNER-DECLARED WINDOW — the harvest-window track, elevated.
   The band = the owner's typed start–end; the "today" needle reads
   position. Declared (◆) grammar: this is the OWNER's plan, not a
   forecast. (Builds on the shipped .hwin idea.)
   ============================================================ */
.hr-win{ display:flex; flex-direction:column; gap:.5rem; }
.hr-winlbl{ 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-winlbl .g{ color:var(--muted); font-weight:var(--fw-x); font-size:.9rem; }
.hr-winlbl .grow{ flex:1; }
.hr-winlbl .hr-windates{ font-family:var(--mono); color:var(--ink2); text-transform:none; letter-spacing:0; font-weight:var(--fw-semi); }

.hr-track{ position:relative; height:16px; border-radius:var(--r-pill);
  background:var(--bg2); border:1px solid var(--line2); overflow:hidden; }
.hr-track .hr-fill{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-soft),color-mix(in srgb,var(--brand) 55%, var(--brand-soft)));
  border:1px solid var(--brand); }
.hr-track .hr-fill .flab{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--brand-ink); white-space:nowrap; }
/* today needle sits ON TOP of the track */
.hr-now{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); border-radius:2px; z-index:2; }
.hr-now::after{ content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--ink); }
.hr-ticks{ display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:var(--muted);
  font-family:var(--mono); font-variant-numeric:tabular-nums; }
.hr-ticks .nowtick{ color:var(--ink); font-weight:var(--fw-bold); }

/* ============================================================
   DISCLAIMER — GDD honesty, reusing the .disc ochre grammar.
   ============================================================ */
.hr-disc{ display:flex; gap:.55rem; align-items:flex-start;
  background:var(--pv-est-bg); border:1px solid var(--pv-est-ln); border-radius:var(--r);
  padding:.55rem .7rem; font-size:var(--fs-2xs); color:var(--ink2); line-height:1.5; }
.hr-disc .ic{ color:var(--pv-est); font-weight:var(--fw-x); flex:0 0 auto; }
.hr-disc b{ color:var(--pv-est); font-weight:var(--fw-bold); }

/* ============================================================
   STATE · READY (today inside the owner's window) — calm brass.
   A quiet "go-look" banner, not a celebratory success state.
   ============================================================ */
.ocblock.ready .hr-hero{ border-color:var(--brand); background:linear-gradient(180deg, var(--brand-soft), var(--surface)); }
.ocblock.ready .hr-readtop .hr-dot{ background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.ocblock.ready .hr-status{ color:var(--brand-ink); }
.ocblock.ready .hr-countnum{ color:var(--brand); }
.hr-gocheck{ display:flex; gap:.55rem; align-items:flex-start;
  background:color-mix(in srgb,var(--brand-soft) 55%, var(--surface)); border:1px solid var(--brand);
  border-radius:var(--r); padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--brand-ink); line-height:1.5; }
.hr-gocheck .ic{ width:16px; height:16px; flex:0 0 16px; color:var(--brand2); margin-top:1px; display:inline-flex; }
.hr-gocheck .ic svg{ width:100%; height:100%; display:block; }
.hr-gocheck b{ font-weight:var(--fw-bold); }

/* ============================================================
   STATE · PAST WINDOW — muted/stale (◷), NEVER alarm-red.
   The whole block desaturates; the read becomes a calm "update?".
   ============================================================ */
.ocblock.past{ filter:grayscale(.18); }
.ocblock.past .hr-hero{ background:var(--pv-stale-bg); border-color:var(--pv-stale-ln); }
.ocblock.past .hr-readtop .hr-dot{ background:var(--pv-stale); box-shadow:0 0 0 3px var(--pv-stale-bg); }
.ocblock.past .hr-status{ color:var(--pv-stale); }
.ocblock.past .hr-countnum{ color:var(--pv-stale); }
.ocblock.past .hr-track .hr-fill{ background:var(--pv-stale-bg); border-color:var(--pv-stale-ln); }
.ocblock.past .hr-track .hr-fill .flab{ color:var(--pv-stale); }
.hr-stalechip{ display:inline-flex; align-items:center; gap:.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-stale-bg); color:var(--pv-stale); border:1px dashed var(--pv-stale-ln); }
.hr-pastnote{ display:flex; gap:.55rem; align-items:flex-start;
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r);
  padding:.6rem .7rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.hr-pastnote .ic{ color:var(--pv-stale); font-weight:var(--fw-x); flex:0 0 auto; }

/* ============================================================
   CTA STATES · no centroid (drop pin) / no window (set dates).
   Brand-soft INVITATION, never an error. The missing instrument is
   replaced by a clear, single action.
   ============================================================ */
.hr-cta{ display:flex; gap:.7rem; align-items:flex-start;
  border:1.5px dashed var(--brand); border-radius:var(--r);
  background:linear-gradient(100deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 45%, var(--surface)));
  padding:var(--s4); }
.hr-cta .hr-ctaic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface); color:var(--brand-ink); border:1px solid var(--brand); }
.hr-cta .hr-ctaic svg{ width:19px; height:19px; display:block; }
.hr-cta .hr-ctamain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.hr-cta .hr-ctamain b{ font-size:var(--fs-md); color:var(--brand-ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.hr-cta .hr-ctamain p{ margin:0; font-size:var(--fs-xs); color:var(--brand2); line-height:1.5; }
.hr-cta .hr-ctamain .btn{ align-self:flex-start; margin-top:.1rem; }

/* a soft "instrument unavailable" placeholder where the clock/countdown
   would sit, so the block keeps its shape while one read is missing */
.hr-missing{ display:flex; align-items:center; justify-content:center; gap:.4rem; text-align:center;
  border:1px dashed var(--line2); border-radius:var(--r); background:var(--surface2);
  padding:var(--s4) var(--s3); color:var(--muted); font-size:var(--fs-xs); line-height:1.45; min-height:64px; }

/* the countdown side, when no window is set: a compact prompt */
.hr-count.empty{ align-items:flex-end; justify-content:center; gap:.35rem; }
.hr-count.empty .ep{ font-size:var(--fs-xs); color:var(--muted); line-height:1.4; }
.hr-count.empty .btn{ white-space:nowrap; }

/* ============================================================
   ENTRANCE — base state is the visible end-state; animate FROM hidden
   only when the card is active + motion is allowed (print / reduced
   motion show content). No infinite loops on content.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  [data-hr-anim] .hr-hero, [data-hr-anim] .hr-clock,
  [data-hr-anim] .hr-win, [data-hr-anim] .hr-disc,
  [data-hr-anim] .hr-cta, [data-hr-anim] .hr-gocheck, [data-hr-anim] .hr-pastnote{
    animation:hr-rise .42s cubic-bezier(.22,.61,.36,1) both;
  }
  [data-hr-anim] .hr-clock{ animation-delay:.05s; }
  [data-hr-anim] .hr-win{ animation-delay:.1s; }
  [data-hr-anim] .hr-disc, [data-hr-anim] .hr-gocheck, [data-hr-anim] .hr-pastnote{ animation-delay:.15s; }
}
/* transform-only on purpose: content is ALWAYS opaque, so snapshots /
   print / PDF / reduced-motion never catch a blank pre-animation frame */
@keyframes hr-rise{ from{ transform:translateY(7px); } to{ transform:none; } }

/* ============================================================
   RESPONSIVE — mobile-first; the hero stacks under 380px so the big
   number never crushes the developmental word.
   ============================================================ */
@media (max-width:440px){
  .hr-hero{ flex-direction:column; gap:var(--s3); }
  .hr-hero .hr-sep{ flex:0 0 1px; width:100%; height:1px; align-self:stretch; }
  .hr-count{ text-align:left; align-items:flex-start; }
  .hr-countnum{ justify-content:flex-start; }
  .hr-declchip{ align-self:flex-start; }
  .hr-stages{ gap:4px; }
  .hr-stage .slab{ font-size:9px; }
}
@media (pointer:coarse){
  .hr-cta .btn, .hr-count.empty .btn{ min-height:44px; }
}