/* ============================================================
   orchard_calendar.components.css · ปฏิทินสวน (brief F)
   ------------------------------------------------------------
   งานตามระยะ + เตือนล่วงหน้า — the WEEK view as primary, month
   secondary. EXTENDS the shipped Atlas + ชาวสวน language; every value
   resolves to a supply.tokens.css variable. NO new colour / font /
   radius / shadow / provenance hue is minted. Zero-dependency,
   greyscale-safe (glyph + edge + weight + position, never hue alone).

   Loaded LAST, after:
     supply.tokens.css → supply.components.css → shell.chrome.css →
     sourcing.components.css → trade.components.css →
     passport.components.css → farm.components.css →
     harvest.components.css → grower.components.css

   ⭐ The calm-grower law this file obeys: the calendar SITS BESIDE
   `todayCard`, never on top of it. So this surface renders the SAME
   shipped `.gh-today` focal card first (verbatim class), then a quiet
   divider, then the week — the calendar is the next layer, not a wall
   of chores. Nothing here competes with "วันนี้".

   MINTS new (oc-*) ONLY the things with no shipped analogue:
   the week rail, the stage-task card + its one-tap tick + add-your-own,
   the season agenda (month), the regional-fallback banner, and the
   two silence-separately reminder switches.
   ============================================================ */

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

/* ============================================================
   BESIDE-TODAY DIVIDER — a quiet rule that says "today is above,
   the plan is below". Reuses .g-seclbl grammar; adds only the eyebrow.
   ============================================================ */
.oc-beside{ display:flex; align-items:center; gap:.55rem; }
.oc-beside .ln{ flex:1; height:1px; background:var(--line); }
.oc-beside .st{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:var(--fw-bold); white-space:nowrap; }

/* ============================================================
   CALENDAR HEAD — the plot filter (all-plots default, one-plot
   filterable · reuses .gm-pick) sits above; this is the week/month
   toggle + the range stepper.
   ============================================================ */
.oc-head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.oc-head .grow{ flex:1; }
/* week/month view toggle — reuses the shipped .seg pill group idiom */
.oc-viewseg{ display:inline-flex; background:var(--surface2); border:1px solid var(--line2);
  border-radius:var(--r-pill); padding:3px; gap:2px; }
.oc-viewseg button{ border:0; background:transparent; color:var(--ink2); cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.02em; padding:.4rem .85rem; border-radius:var(--r-pill); }
.oc-viewseg button[aria-pressed="true"]{ background:var(--brand-fill); color:var(--brand-fill-ink); }

/* the range stepper (‹ this week ›) */
.oc-range{ display:flex; align-items:center; gap:var(--s2); }
.oc-range .oc-rlbl{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--ink); min-width:8.5rem; text-align:center;
  font-variant-numeric:tabular-nums; }
.oc-range .oc-step{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink2); font:inherit; font-size:1.1rem; }
.oc-range .oc-step:hover{ border-color:var(--brand); color:var(--brand2); background:var(--surface2); }
.oc-range .oc-step:disabled{ opacity:.4; cursor:not-allowed; }

/* ============================================================
   WEEK RAIL — the PRIMARY view spine. Seven day cells, mobile-first:
   readable on a phone (a full-month grid is NOT — see design notes).
   A day carries at most a couple of DOTS: a spray-window day (official
   ◆ blue), a harvest-window day (brass ring). Tasks live in the list
   below; the rail is a glanceable "where in the week am I".
   ============================================================ */
.oc-weekrail{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s2); }
.oc-day{ display:flex; flex-direction:column; align-items:center; gap:.3rem; cursor:pointer; font:inherit; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:.5rem .2rem .45rem;
  transition:border-color .12s, background .12s; min-width:0; }
.oc-day:hover{ border-color:var(--brand); background:var(--surface2); }
.oc-day:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.oc-day .oc-dow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:var(--fw-bold); }
.oc-day .oc-dnum{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); line-height:1; }
.oc-day .oc-ddots{ display:flex; gap:3px; height:7px; align-items:center; }
.oc-day .oc-ddots i{ width:6px; height:6px; border-radius:50%; display:block; }
.oc-day .oc-ddots i.spray{ background:var(--pv-official); }
.oc-day .oc-ddots i.gen{ background:var(--brand2); }
.oc-day .oc-ddots i.past{ background:var(--pv-stale); }
/* today = brass underline mark; selected = filled; in harvest window = brass ring */
/* PORT FIX: --brand on --surface measures 3.85:1 — below AA for a 14px
   number. --brand-ink is the same brass family and measures 9.41 light /
   11.46 dark, so today's date stays emphatic and stays readable. The
   ring below already carries the "today" signal without relying on it. */
.oc-day.today .oc-dnum{ color:var(--brand-ink); }
.oc-day.today{ border-color:var(--brand); }
.oc-day.win{ box-shadow:inset 0 0 0 2px var(--brand); border-color:var(--brand); }
.oc-day.sel{ background:var(--brand-soft); border-color:var(--brand); }
.oc-day.sel .oc-dnum{ color:var(--brand-ink); }
.oc-day.past{ opacity:.6; }
@media (max-width:420px){ .oc-day{ padding:.45rem .1rem .4rem; } .oc-day .oc-dnum{ font-size:var(--fs-sm); } }

/* ============================================================
   STAGE-TASK CARD — "at this stage most growers do X", with a SOURCE.
   Suggestion voice. The whole state is carried by a left accent bar +
   glyph + the tick, never colour alone; overdue is CALM (stale ◷), NOT
   red, and there is no counter anywhere.
   ============================================================ */
.oc-tasks{ display:flex; flex-direction:column; gap:var(--s3); }
.oc-task{ position:relative; display:flex; flex-direction:column; gap:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm);
  padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 5px); overflow:hidden; }
.oc-task::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--pv-est); }
/* the head row: stage eyebrow + provenance chip on the right */
.oc-thead{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.oc-tstage{ display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.06em; color:var(--brand2); }
.oc-tstage .ic{ width:15px; height:15px; flex:0 0 15px; display:inline-flex; }
.oc-tstage .ic svg{ width:100%; height:100%; display:block; }
.oc-thead .grow{ flex:1; }
.oc-twhen{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); white-space:nowrap; }

.oc-tbody{ display:flex; gap:var(--s3); align-items:flex-start; }
.oc-tmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.oc-ttitle{ font-size:var(--fs-md); font-weight:var(--fw-bold); letter-spacing:-.01em; color:var(--ink); line-height:1.25; text-wrap:pretty; }
.oc-tsug{ font-size:var(--fs-sm); color:var(--ink2); line-height:1.5; text-wrap:pretty; }
.oc-tsug b{ color:var(--ink); font-weight:var(--fw-semi); }

/* the one-tap DONE tick — a big calm target, ≥44px. Not a checkbox
   buried in a row; it IS the primary affordance of the card. */
.oc-tick{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ink2); white-space:nowrap;
  border:1.5px solid var(--line2); border-radius:var(--r-pill); background:var(--surface); padding:.5rem .8rem; min-height:44px;
  transition:border-color .12s, background .12s, color .12s; }
.oc-tick:hover{ border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft); }
.oc-tick .bx{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:1.5px solid var(--line2); display:grid; place-items:center; }
.oc-tick .bx svg{ width:13px; height:13px; display:block; opacity:0; color:#fff; }

/* the citable source — a tap-to-read chip. Named source, never bare. */
.oc-tsrc{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; cursor:pointer; font:inherit;
  font-size:var(--fs-2xs); font-weight:var(--fw-semi); color:var(--muted);
  border:1px solid var(--line2); border-radius:var(--r-pill); background:var(--surface2); padding:.3rem .65rem; }
.oc-tsrc:hover{ border-color:var(--brand); color:var(--brand2); }
.oc-tsrc .ic{ width:13px; height:13px; flex:0 0 13px; display:inline-flex; }
.oc-tsrc .ic svg{ width:100%; height:100%; display:block; }
.oc-tsrc .g{ color:var(--pv-official); font-weight:var(--fw-x); }

/* ---- STATE · DONE — calm brass, the whole card relaxes. No confetti. */
.oc-task.done::before{ background:var(--pv-verified); }
.oc-task.done{ background:linear-gradient(180deg, color-mix(in srgb,var(--pv-verified-bg) 34%, var(--surface)), var(--surface)); }
.oc-task.done .oc-tick{ border-color:var(--pv-verified); color:var(--pv-verified); background:var(--pv-verified-bg); }
.oc-task.done .oc-tick .bx{ background:var(--pv-verified); border-color:var(--pv-verified); }
.oc-task.done .oc-tick .bx svg{ opacity:1; }
.oc-task.done .oc-ttitle{ color:var(--ink2); }

/* ---- STATE · OVERDUE — the suggested week passed & not done. CALM:
   stale ◷, a gentle desaturate, a "still time / no rush" line. NEVER
   red, NEVER a counter, NEVER "late". */
.oc-task.past::before{ background:var(--pv-stale); }
.oc-task.past{ filter:grayscale(.14); }
.oc-task.past .oc-tstage{ color:var(--pv-stale); }
.oc-task.past .oc-twhen{ color:var(--pv-stale); }

/* ============================================================
   ADD-YOUR-OWN — pick from a countable list + a free field. Reveals
   inline (calm, one tap), never a modal. The grower's record is
   PRIVATE (VALUES §5) and stays on the card as a logged row.
   ============================================================ */
.oc-tadd{ border-top:1px dashed var(--line2); padding-top:var(--s3); display:flex; flex-direction:column; gap:var(--s3); }
.oc-addbtn{ display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start; cursor:pointer; font:inherit;
  font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--brand2); background:transparent; border:0; padding:.2rem 0; }
.oc-addbtn .ic{ width:16px; height:16px; flex:0 0 16px; display:inline-flex; }
.oc-addbtn .ic svg{ width:100%; height:100%; display:block; }
.oc-addform{ display:flex; flex-direction:column; gap:var(--s3); }
.oc-addform .lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:var(--fw-bold); }
/* the pick-from-list chips (countable) */
.oc-picks{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.oc-pick{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; font:inherit; white-space:nowrap;
  font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink2);
  border:1px solid var(--line2); border-radius:var(--r-pill); background:var(--surface); padding:.4rem .8rem; min-height:38px; }
.oc-pick:hover{ border-color:var(--brand); background:var(--surface2); }
.oc-pick[aria-pressed="true"]{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
.oc-pick[aria-pressed="true"] .g{ color:var(--brand); }
.oc-addform .oc-free{ font:inherit; font-size:var(--fs-md); color:var(--ink); background:var(--surface2);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.55rem .7rem; resize:vertical; min-height:2.4rem; }
.oc-addform .oc-free:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; }
.oc-addacts{ display:flex; gap:var(--s3); align-items:center; }
.oc-addacts .grow{ flex:1; }
/* a private-note reminder under the field (VALUES §5) */
.oc-privnote{ display:flex; gap:.45rem; align-items:flex-start; font-size:var(--fs-2xs); color:var(--muted); line-height:1.45; }
.oc-privnote .ic{ width:13px; height:13px; flex:0 0 13px; color:var(--pv-private); margin-top:1px; display:inline-flex; }
.oc-privnote .ic svg{ width:100%; height:100%; display:block; }

/* a logged row — the grower's OWN record of what they actually used */
.oc-logrow{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--ink2);
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln); border-radius:var(--r-sm); padding:.45rem .65rem; }
.oc-logrow .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--pv-private); display:inline-flex; }
.oc-logrow .ic svg{ width:100%; height:100%; display:block; }
.oc-logrow .lt{ flex:1; min-width:0; }
.oc-logrow .lt b{ color:var(--ink); font-weight:var(--fw-semi); }
.oc-logrow .led{ font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); }

/* ============================================================
   ⭐ NO-BLOOM-DATE STATE — invite the ONE-TAP confirm FIRST (brief D's
   region_bloom_guess), and only THEN fall back to regional defaults,
   labelled as regional. The confirm invite reuses the shipped .hr-cta
   dashed-brand invitation. The fallback tasks wear a REGIONAL banner.
   ============================================================ */
.oc-regional{ display:flex; gap:.55rem; align-items:flex-start; margin-bottom:var(--s2);
  background:var(--pv-est-bg); border:1px solid var(--pv-est-ln); border-radius:var(--r);
  padding:.6rem .75rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.oc-regional .g{ color:var(--pv-est); font-weight:var(--fw-x); flex:0 0 auto; font-family:var(--mono); }
.oc-regional b{ color:var(--pv-est); font-weight:var(--fw-bold); }
/* the regional label pinned to each fallback task's stage row */
.oc-task.regional::before{ background:var(--pv-est); border-left:2px dashed var(--pv-est); }
.oc-reglabel{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  color:var(--pv-est); background:var(--pv-est-bg); border:1px dashed var(--pv-est-ln); border-radius:var(--r-pill); padding:.1rem .5rem; }

/* ============================================================
   SEASON AGENDA — the SECONDARY "เดือน" view. NOT a 7×5 grid (canon #2:
   unreadable on a phone). A vertical agenda: the four stage windows
   down the season, each with its date range + the tasks under it. Reads
   top-to-bottom on a phone and honours the "windows, not days" truth.
   ============================================================ */
.oc-agenda{ display:flex; flex-direction:column; gap:var(--s4); }
.oc-astage{ display:flex; flex-direction:column; gap:var(--s3); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-sm); overflow:hidden; }
.oc-astage .oc-ahd{ display:flex; align-items:center; gap:.6rem; padding:var(--s3) var(--s4);
  background:var(--surface2); border-bottom:1px solid var(--line); }
.oc-astage .oc-ahd .ic{ width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.oc-astage .oc-ahd .ic svg{ width:15px; height:15px; display:block; }
.oc-astage .oc-ahd .am{ flex:1; min-width:0; }
.oc-astage .oc-ahd .am b{ display:block; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; }
.oc-astage .oc-ahd .am .arange{ display:block; font-size:var(--fs-2xs); color:var(--muted); font-family:var(--mono); margin-top:1px; }
/* the current stage gets a calm brass "ตอนนี้" flag */
.oc-astage.now{ border-color:var(--brand); }
.oc-astage.now .oc-ahd{ background:var(--brand-soft); }
.oc-anow{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--brand-fill-ink); background:var(--brand-fill); border-radius:var(--r-pill); padding:.12rem .55rem; }
.oc-astage.done .oc-ahd .ic{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.oc-astage.done{ opacity:.75; }
/* the compact task lines inside a stage */
.oc-alist{ display:flex; flex-direction:column; padding:var(--s2) var(--s4) var(--s4); gap:0; }
.oc-aline{ display:flex; align-items:center; gap:.6rem; padding:var(--s3) 0; border-top:1px solid var(--line); font-size:var(--fs-sm); }
.oc-aline:first-child{ border-top:0; }
.oc-aline .adot{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--pv-est); }
.oc-aline.done .adot{ background:var(--pv-verified); }
.oc-aline .atx{ flex:1; min-width:0; color:var(--ink2); }
.oc-aline.done .atx{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line2); }
.oc-aline .aic{ width:15px; height:15px; flex:0 0 15px; color:var(--pv-verified); display:none; }
.oc-aline.done .aic{ display:inline-flex; }
.oc-aline .aic svg{ width:100%; height:100%; display:block; }

/* ============================================================
   REMINDER SWITCHES — the calendar's two notifications, each
   SILENCEABLE SEPARATELY, with the frequency STATED ON SCREEN (not a
   help page) the moment the calendar is switched on. Honest about LINE
   reachability: if LINE can't reach the grower, say so and link out —
   never a silent no-op (FLAG#4).
   ============================================================ */
.oc-notif{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); overflow:hidden; }
.oc-notif .oc-nhd{ display:flex; align-items:center; gap:.6rem; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); background:var(--surface2); }
.oc-notif .oc-nhd .ic{ width:26px; height:26px; flex:0 0 26px; border-radius:7px; display:grid; place-items:center;
  background:var(--surface); color:var(--brand-ink); border:1px solid var(--brand); }
.oc-notif .oc-nhd .ic svg{ width:15px; height:15px; display:block; }
.oc-notif .oc-nhd b{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); }
.oc-nbody{ padding:var(--s4) var(--s5); display:flex; flex-direction:column; gap:0; }
.oc-switch{ display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--line); }
.oc-switch:first-child{ border-top:0; }
.oc-switch .sw-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.oc-switch .sw-name{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--ink); letter-spacing:-.01em; }
.oc-switch .sw-freq{ font-size:var(--fs-xs); color:var(--ink2); line-height:1.45; }
.oc-switch .sw-freq b{ color:var(--brand2); font-weight:var(--fw-semi); }
/* the toggle itself — a labelled track, ≥44px target, glyph state */
.oc-toggle{ flex:0 0 auto; position:relative; width:52px; height:30px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line2); background:var(--bg2); transition:background .14s, border-color .14s; }
.oc-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-sm); transition:left .16s; }
.oc-toggle[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); }
.oc-toggle[aria-pressed="true"]::after{ left:24px; }
.oc-toggle:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
/* the LINE-reachability truth line (FLAG#4) — never a silent promise */
.oc-linewarn{ display:flex; gap:.55rem; align-items:flex-start; margin-top:var(--s3);
  background:var(--pv-stale-bg); border:1px solid var(--pv-stale-ln); border-radius:var(--r); padding:.6rem .7rem;
  font-size:var(--fs-2xs); color:var(--ink2); line-height:1.5; }
.oc-linewarn .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--pv-stale); margin-top:1px; display:inline-flex; }
.oc-linewarn .ic svg{ width:100%; height:100%; display:block; }
.oc-linewarn a{ color:var(--brand2); font-weight:var(--fw-bold); }

/* ============================================================
   SOURCE SHEET — tap a source chip → the shipped .scrim/.sheet modal
   shows the citation + who published it + an external link. Adds only
   the citation body layout.
   ============================================================ */
.oc-srcbody{ display:flex; flex-direction:column; gap:var(--s3); }
.oc-srcbody .oc-srctag{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-size:var(--fs-2xs);
  font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em; color:var(--pv-official);
  background:var(--pv-official-bg); border:1px solid var(--pv-official-ln); border-radius:var(--r-pill); padding:.15rem .6rem; }
.oc-srcbody h4{ margin:0; font-size:var(--fs-lg); font-weight:var(--fw-x); color:var(--ink); letter-spacing:-.01em; }
.oc-srcbody p{ margin:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.55; }
.oc-srcbody .oc-srclink{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-sm); font-weight:var(--fw-semi);
  color:var(--brand2); }
.oc-srcbody .oc-srcnote{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.5; border-top:1px solid var(--line); padding-top:var(--s3); }

/* ============================================================
   ENTRANCE — transform-only (content always opaque) so print / PDF /
   reduced-motion / snapshot never catch a blank frame.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  [data-oc-anim] .oc-task, [data-oc-anim] .oc-astage{ animation:oc-rise .4s cubic-bezier(.22,.61,.36,1) both; }
  [data-oc-anim] .oc-task:nth-child(2){ animation-delay:.05s; }
  [data-oc-anim] .oc-task:nth-child(3){ animation-delay:.1s; }
  [data-oc-anim] .oc-task:nth-child(n+4){ animation-delay:.14s; }
}
@keyframes oc-rise{ from{ transform:translateY(7px); } to{ transform:none; } }

@media (pointer:coarse){
  .oc-day, .oc-viewseg button, .oc-step, .oc-pick, .oc-addbtn, .oc-tsrc, .oc-toggle{ min-height:44px; }
}
@media (max-width:480px){
  .oc-head{ gap:var(--s2); }
  .oc-range .oc-rlbl{ min-width:6.5rem; font-size:var(--fs-xs); }
  .oc-tbody{ flex-direction:column; }
  .oc-tick{ align-self:stretch; justify-content:center; }
}