/* rx-filters.css — the bar that refines the set on screen (rx-filters.js): For you · Occasion ·
   Weather · Budget · Wardrobe, then the options of the selected tab. 05 §7 is the design.
   · Tier 1 is a tablist on a paper-2 track with the house's sliding ink thumb; tier 2 is option
     chips (rx-core's .rx-chip) with the same thumb, so a choice travels rather than blinks.
   · The thumbs are PROGRESSIVE: the per-button ink fill below is the state without them, and
     `.is-slide` (added by the script only once a thumb exists) is what suppresses it.
   · Below 768 only the tab row is sticky (z-index 9: under the top bar's 10, so the nav menu covers
     it) and the options open as a tray under it; the tray carries [hidden]{display:none!important}
     (08 #1), so a shut tray never takes a tap.
   Tokens and black alpha only (LOCKED "Palette"); every :hover is inside the hover gate. */

.rx-filters{position:relative;display:grid;gap:14px;margin:0 0 var(--sp-head,28px)}
.rx-filters [hidden]{display:none!important}
/* The 1px edge the script watches to know the bar is stuck (a sticky element itself never leaves
   the viewport). It takes no room: its margin gives back the pixel it occupies. */
.rx-filters-edge{height:1px;margin:0 0 -1px;pointer-events:none;visibility:hidden}

/* ── tier 1: the tabs ─────────────────────────────────────────────────────────────────────── */
.rx-seg{position:relative;display:inline-flex;justify-self:start;gap:2px;max-width:100%;padding:4px;
  background:var(--paper-2);border-radius:var(--r-pill)}
.rx-seg > button{position:relative;z-index:1;flex:0 0 auto;min-height:40px;margin:0;padding:0 18px;border:0;
  background:none;border-radius:var(--r-pill);color:var(--ink-2);font:600 13.5px/1 var(--body);
  letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:color var(--rx-d1,180ms) var(--ease),background-color var(--rx-d1,180ms) var(--ease)}
.rx-seg > button[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
/* The selected label turns white 140ms into the 320ms travel, so a white word never sits on the
   pale track while the thumb is still on its way (05 §7.1, the one refinement over the app's .seg). */
.rx-seg.is-slide > button[aria-selected="true"]{background:none;transition:color 120ms var(--ease) 140ms}
.rx-seg-val{font-weight:500}
.rx-seg > button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .rx-seg > button:not([aria-selected="true"]):hover{color:var(--ink)}
}
@media (pointer:coarse){ .rx-seg > button{min-height:44px} }

/* THE THUMB, shared by the tab track and the option rows. Absolute in its group, under the labels
   (z-index 0 against their 1), placed by transform and sized by width/height from the measured
   button; opacity only says whether anything is chosen. */
.rx-seg-thumb{position:absolute;top:0;left:0;z-index:0;border-radius:var(--r-pill);background:var(--accent);
  opacity:0;pointer-events:none;
  transition:transform var(--rx-d3,320ms) var(--ease),width var(--rx-d3,320ms) var(--ease),
    height var(--rx-d3,320ms) var(--ease),opacity var(--rx-d1,180ms) linear}
@media (prefers-reduced-motion:reduce){ .rx-seg-thumb{transition:opacity .15s linear} }

/* A refine in flight: a 2px sheen under the selected tab (§2.5 setBusy), a draw rather than a
   spinner. Under reduced motion it is a still line — the aria-busy says the rest. */
.rx-filters[aria-busy="true"] .rx-seg > button[aria-selected="true"]::after{content:"";position:absolute;
  left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:currentColor;
  transform-origin:left center;animation:rx-fbusy 1.2s var(--ease) infinite}
@keyframes rx-fbusy{0%{transform:scaleX(0);opacity:.9}60%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rx-filters[aria-busy="true"] .rx-seg > button[aria-selected="true"]::after{animation:none;transform:none;opacity:.6}
}

/* ── tier 2: the panel of the selected tab ────────────────────────────────────────────────── */
.rx-filters-pop{display:grid;gap:12px}
.rx-filters-pop[hidden]{display:none!important}
.rx-fpanel{display:grid;gap:12px;align-content:start;min-width:0}
.rx-fpanel[hidden]{display:none!important}
.rx-fpanel-in{display:grid;gap:12px}
/* From 768 the hero prints "Styled for you · …" (AMENDMENTS A2); the panel does not say it twice. */
@media (min-width:768px){ .rx-fpanel-styled{display:none} }
/* …and its "Edit" opens the reading sheet, so the panel's own "About you" pill is the phone's
   alone (V PR-05). */
.rx-fpanel-reading{flex:0 0 auto}
@media (min-width:768px){ .rx-btn.rx-fpanel-reading{display:none} }
.rx-fpanel-say{margin:0;font:400 14px/1.5 var(--body);color:var(--ink-2);max-width:62ch}
.rx-fpanel-fine{margin:0;font:400 12.5px/1.5 var(--body);color:var(--ink-dim);max-width:62ch}
.rx-fpanel-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.rx-opts{position:relative;display:flex;flex-wrap:wrap;gap:8px}
/* With the thumb mounted the chips go transparent, so the ink travels visibly BEHIND them, and the
   pressed chip hands its fill to the thumb (its own fill is the no-script state). */
.rx-opts.is-slide > .rx-chip{position:relative;z-index:1;background:transparent}
.rx-opts.is-slide > .rx-chip[aria-pressed="true"]{background:transparent;border-color:transparent;
  transition:color 120ms var(--ease) 140ms,border-color 120ms var(--ease) 140ms}
.rx-opts-hint{font-weight:400}

.rx-pass{margin:0;font:400 12.5px/1.5 var(--body);color:var(--ink-dim)}
.rx-pass a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── the weather block ────────────────────────────────────────────────────────────────────── */
.rx-wx{display:grid;gap:10px;padding:14px 0 0;border-top:1px solid var(--line)}
.rx-wx .rx-eyebrow{margin:0}
.rx-wx-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rx-wx-or{font:400 13px/1 var(--body);color:var(--ink-dim)}
.rx-wx-in{flex:1 1 150px;min-width:0;max-width:240px;min-height:36px;margin:0;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);color:var(--ink);
  font:400 14px/1 var(--body)}
.rx-wx-in:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
@media (pointer:coarse){ .rx-wx-in{min-height:44px;font-size:16px} }
.rx-wx-out{display:grid;gap:8px}
.rx-wx-out:empty{display:none}
.rx-wx-say{margin:0;font:400 14px/1.5 var(--body);color:var(--ink)}
.rx-wx-say.rx-wx-fine{font-size:13px;color:var(--ink-2)}

/* ── phones: the sticky tab row and the tray ──────────────────────────────────────────────── */
@media (max-width:767.98px){
  /* Solid paper, not glass: it sits directly under the glass top bar, and two panes over scrolling
     content is the arrangement the house forbids (05 §7.3). */
  .rx-filters{position:sticky;top:var(--rx-top,67px);z-index:9;margin:0 -20px var(--sp-head,28px);
    padding:8px 20px 10px;background:var(--paper);border-bottom:1px solid transparent;
    transition:border-color var(--rx-d1,180ms) var(--ease),box-shadow var(--rx-d1,180ms) var(--ease)}
  .rx-filters.is-stuck{border-bottom-color:var(--line);box-shadow:0 12px 24px -22px rgba(0,0,0,.35)}
  /* WHILE STUCK, PAPER RUNS UP BEHIND THE GLASS TOP BAR (v3 verify CO-results-390). The top bar is
     frosted glass, so the room's copy scrolling between it and this bar showed through its lower
     edge as a stray line of body text sandwiched between the two bars. The paper sits under the
     top bar (z-index 9 < its 10), so the glass frosts paper there instead of a sentence. Only
     while stuck: unstuck, the space above this bar is the page head. */
  .rx-filters.is-stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;
    height:var(--rx-top,67px);background:var(--paper);pointer-events:none}
  .rx-filters .rx-seg{display:flex;width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .rx-filters .rx-seg::-webkit-scrollbar{display:none}
  .rx-seg > button{padding:0 13px;font-size:13px}
  /* More tabs past the right edge: the row fades there (set by the script while it is true). */
  .rx-seg.is-more{-webkit-mask-image:linear-gradient(90deg,black calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,black calc(100% - 44px),transparent)}
  /* The value beside each tab name is for the wide bar; on a phone the tray shows the choice. */
  .rx-seg-val{display:none}
  .rx-filters-pop{position:absolute;left:0;right:0;top:calc(100% + 1px);gap:12px;padding:14px 20px 16px;
    max-height:calc(100vh - var(--rx-top,67px) - 96px);max-height:calc(100dvh - var(--rx-top,67px) - 96px);
    overflow-y:auto;overscroll-behavior:contain;background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-1)}
}
/* The tray MOVES in, it never fades (leorve.css §7: a stalled animation must cost position, never
   visibility), and under reduced motion it is simply there. */
@media (max-width:767.98px) and (prefers-reduced-motion:no-preference){
  .rx-filters-pop:not([hidden]){animation:rx-fpop-in var(--rx-d2,240ms) var(--ease)}
}
@keyframes rx-fpop-in{from{transform:translateY(-8px)}to{transform:none}}