/* rx-hero.css — the hero's layout (the stack below 1200, the spread from 1200 with a sticky stage),
   the head's type, the look pager, the actions and quick changes, the numbered reasons and the
   phone dock. Painted by rx-hero.js; the board inside the stage is rx-board's.

   THE RULES THIS FILE KEEPS (BUILD_SPEC §0.2, 05 §16–§17):
   · Every colour is a token, a black/white alpha, or rgba(127,127,127,·) for a neutral rim. No hex
     literal: a future theme then only re-points tokens. There is no theme selector here at all.
   · Every :hover sits inside @media (hover:hover) and (pointer:fine) — a touch browser fires
     :hover on tap and leaves it stuck — and every transition has an explicit end state, or is
     switched off, under prefers-reduced-motion.
   · Every class here that sets `display` on an element that can carry `hidden` has its own
     [hidden]{display:none!important} rule (08 #1): an author display rule beats the UA's [hidden],
     and a "closed" box that is still laid out swallows clicks.
   · Only transform and opacity move, plus what the house already accepts (colour, outline).
   · `.lookpick{display:flex;` stays on ONE line, at the start of it: tests/test_styling_regressions.py
     reads that exact rule to prove the look selector is a row and not the reading aside's column. */

/* ═══ 1. THE HERO: two modes (05 §4.3) ═══════════════════════════════════════════════════════
   MODE B, "STACK" (<1200): one column, in DOM order — head, stage (board + pager), the phone
   pieces row, actions, reasons. Phone, keyboard and screen-reader order are the reading order.
   MODE A, "SPREAD" (≥1200): twelve columns. Head, actions and reasons take columns 1–4; the stage
   takes 5–12 across all three rows and is sticky, so hovering ANY reason lights a board that is in
   view (brief §4). PLACED BY GRID, NEVER BY `order` (the house's "the rail is placed, not ordered"):
   the DOM order is the order everyone who cannot see the grid gets. */
.rx-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px;align-items:start}
.rx-hero-head,.rx-stage,.rx-acts-host,.rx-why-wrap{min-width:0}
.rx-why-wrap[hidden]{display:none!important}

/* THE STAGE: the board and, under it, the pager. view-transition-name lets a look change carry the
   board WITH its callouts and lines as one picture (05 §14); the head travels as a second one. */
.rx-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px;
  touch-action:pan-y;view-transition-name:rx-stage}
.rx-hero-head{view-transition-name:rx-head;transition:opacity var(--rx-d1) var(--ease)}

/* BETWEEN 768 AND 1199 THE HEAD IS TWO COLUMNS: the name on the left, the stylist's argument on the
   right. Stacked, a 49px two-line name plus a seven-line 19px sentence put the board's first row
   below the fold at 1024×768; side by side the head is as tall as the taller half. Each half is
   ONE wrapper (08 #11), so a look with no sentence cannot slide its confidence into the wrong cell. */
@media (min-width:768px) and (max-width:1199.98px){
  /* Top-aligned: bottom-aligned (tried first) started the sentence ABOVE the eyebrow at 768, so the
     argument read before the label that introduces it. */
  .rx-hero-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .rx-hero-case{padding-top:22px}
  .rx-hero-case > :first-child{margin-top:0}
}

/* THE SPREAD'S FIRST SCREEN IS ONE ANSWER, READ TOP TO BOTTOM BESIDE THE BOARD: which look, its
   name, its pieces, the stylist's sentence, how sure we are, and the two things to do about it.
   The owner's ask (brief §1, §7) is that all of it is on the first screen at 1440×900 — and it was
   not: Save look and Try another sat at y 880–928 on look 1, under a 171px sentence and the
   confidence ticks. The budget, measured on the five fixture looks under the real page head and
   filter bar (C:\tmp\shot\RX-P4-first.mjs, hero top 359 at 1440, 331 at 1280×800): head 24px above
   the actions, not 32 (05 §8.1's own figure); the meta line gone where it only repeats the
   styled-for line (rx-hero.js metaEchoes); the sentence at 17px — whole, never clamped, it is the
   engine's own words — and the head's spacing tightened (§2, "THE SPREAD'S HEAD"). Measured after:
   Save look ends at 827 at 1440×900 and 788 at 1280×800 on the worst fixture look. The reasons, a
   new movement, keep their 40px from the quick changes through their own margin. */
@media (min-width:1200px){
  .rx-hero{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;
    column-gap:24px;row-gap:24px}
  .rx-hero-head{grid-column:1 / span 4;grid-row:1}
  .rx-acts-host{grid-column:1 / span 4;grid-row:2}
  .rx-why-wrap{grid-column:1 / span 4;grid-row:3;margin-top:16px}
  /* `1fr` on the last row: when the stage is taller than head + actions + reasons, the spare
     height lands under the reasons instead of opening gaps between the head and its buttons. */
  .rx-stage{grid-column:5 / -1;grid-row:1 / span 3}
}

/* STICKY ONLY WHERE THE WHOLE STAGE FITS (05 §4.3). Board ≈509 + pager 56 + bar 75 + 24 ≈ 664px.
   A 1366×768 laptop's innerHeight is ~650, and a sticky stage there would hide its own pager under
   the fold for the whole length of the reasons. Gated on HEIGHT, not width. */
@media (min-width:1200px) and (min-height:720px){
  .rx-stage{position:sticky;top:calc(var(--rx-top) + 24px)}
}

/* A REFINE IN FLIGHT (05 §12): the look stays on screen and readable, the head steps back and stops
   taking presses, and rx-board draws its sheen over the faces. Save keeps working. */
.rx-hero[aria-busy="true"] .rx-hero-head{opacity:.45;pointer-events:none}

/* ═══ 2. THE HEAD (05 §2, §8.1) ══════════════════════════════════════════════════════════════ */

.rx-hero-title > .rx-eyebrow{margin:0}

/* The look's name is the one thing on the screen: 1.5× the section head at 1440 (05 §2). In the
   spread its column is four of twelve (~364px), so the size steps down there to keep a two-word
   colour pair to two lines instead of three. */
.rx-name{margin:14px 0 0;max-width:14ch;color:var(--ink);
  font:600 clamp(38px,4.8vw,60px)/1 var(--display);letter-spacing:-.03em;text-wrap:balance}
.rx-name:focus{outline:none}
.rx-name:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px}
@media (min-width:1200px){ .rx-name{font-size:clamp(44px,3.6vw,54px)} }

.rx-hero-line{margin:14px 0 0;font:500 15px/1.45 var(--body);color:var(--ink);text-wrap:pretty}
/* One piece per box, so a line breaks between pieces and never at the hyphen inside "Wide-leg
   Palazzo"; a piece wider than the column still wraps inside its own box (rx-hero.js
   piecesLineHtml). */
.rx-hero-line > span{display:inline-block}
.rx-hero-meta{margin:2px 0 0;font:400 13px/1.5 var(--body);color:var(--ink-dim)}

/* THE STYLIST'S SENTENCE, PRINTED TWICE AND SHOWN ONCE (BUILD_SPEC B4). display:none keeps the
   hidden copy out of the accessibility tree at every width, so it is read exactly once. */
.rx-say{margin:18px 0 0;max-width:34ch;color:var(--ink);
  font:400 clamp(19px,1.6vw,23px)/1.42 var(--display);letter-spacing:-.012em;text-wrap:pretty}
.rx-say-under{display:none}
/* THE META LINE ONLY WHERE IT SAYS SOMETHING NEW. From 768 the styled-for line above the name
   already says the occasion and season, and when the look's own are the same (is-echo, decided in
   rx-hero.js) the meta was the same two words twice in 80px. Below 768 the styled-for line is a
   chip, so there the meta stays. A look whose own tags differ from what was asked is never
   is-echo and shows its meta everywhere. */
@media (min-width:768px){ .rx-hero-meta.is-echo{display:none} }

/* CONFIDENCE IN WORDS (05 §8.4): a drawn tick, never a bar, a figure or a meter. */
.rx-conf{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;padding:0;list-style:none}
.rx-conf li{position:relative;padding-left:18px;font:500 13.5px/1.4 var(--body);color:var(--ink)}
.rx-conf li::before{content:"";position:absolute;left:2px;top:.38em;width:8px;height:4px;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.rx-conf .rx-conf-lead{font-weight:600}
.rx-conf a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rx-conf a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* A2 · WHO IT IS STYLED FOR. One quiet line under the eyebrow, ending in its Edit, from 768;
   below 768 the line would wrap to three rows above the board, so it collapses to one chip that
   opens the same reading sheet. Each answer is a no-wrap span, so a line breaks BETWEEN answers
   and never inside "Fuller at the hip". Edit is inline at the end of the line (rx-hero.js says
   why). Its target is widened to the WCAG 2.2 24px minimum by an absolutely placed ::after, NOT by
   padding: a button is laid out inline-block, so vertical padding would open that one line box
   and the line would sit unevenly against the one above it. */
.rx-styled{margin:10px 0 0}
.rx-styled-line{margin:0;font:400 13px/1.5 var(--body);color:var(--ink-dim);text-wrap:pretty}
.rx-styled-line b{font-weight:600;color:var(--ink)}
.rx-styled-line span{white-space:nowrap}
.rx-styled-edit{position:relative;display:inline-block;margin:0 0 0 8px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--ink);font:600 13px/1.5 var(--body);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rx-styled-edit::after{content:"";position:absolute;inset:-4px -8px}
.rx-styled-edit:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.rx-chip.rx-styled-chip{display:none}

/* THE SPREAD'S HEAD, SET FOR ONE SCREEN (≥1200). AFTER every base rule of the head on purpose: a
   media query adds no specificity, so written above `.rx-conf{…margin:20px…}` this block lost to
   it and the confidence ticks kept their 20px (measured, not assumed).
   THE SENTENCE IS 17px ACROSS THE WHOLE COLUMN. At 23px in the 364px column the engine's usual
   200-character sentence ran seven lines; at 20px (the first fix) six, which still left Save look
   at y 880–928 under the real page head at 1440×900 — the primary action was the one thing not on
   the first screen. At 17px/1.42 the same sentence is five lines (~121px), still in the display
   face and still the largest words after the name, so it reads as the stylist speaking and not as
   body copy. It is verbatim server text, so it is never clamped or cut — only set smaller.
   THE REST IS SPACING, each step a few pixels, together what 1280×800 needed: there the same
   column starts 28px higher but the screen is 100px shorter, and Save look ended at 808. The
   styled-for line hangs off the eyebrow it qualifies (8px); the name is 12px under it; the pieces
   line 10px under the name, whose 1.0 leading leaves no descender room to make up; the sentence
   14px under that, as 05 §8.1 has it; the ticks 12px under the sentence and 4px apart. */
@media (min-width:1200px){
  .rx-styled{margin-top:8px}
  .rx-name{margin-top:12px}
  .rx-hero-line{margin-top:10px}
  .rx-say{max-width:none;margin-top:14px;font-size:17px;line-height:1.42}
  .rx-conf{margin-top:12px;gap:4px 16px}
}

/* ═══ 3. THE LOOK PAGER (05 §8.5) ════════════════════════════════════════════════════════════
   "01 02 03 04 05" with the nav's 1.5px "you are here" rule sliding under the active number, and
   icon buttons either side. In the spread it sits under the board inside the stage; below 1200 it
   is between the board and the actions — which is simply where the stage ends. */
/* THE PAGER IS NAMED OUT OF THE STAGE'S TRANSITION. It lives inside .rx-stage (§2.4), so unnamed
   it was captured into the stage's snapshot and slid 24px sideways with the board — the tab the
   customer had just pressed moved out from under the pointer, and frame 60ms showed two rows of
   numbers ghosted over each other. With its own name it is lifted out of the stage picture and
   given the browser's plain cross-fade between two identical rows, so the numbers stand still and
   the only thing that moves is the mark, travelling in the live new image. */
.rx-pager{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;view-transition-name:rx-pager}
.rx-pager[hidden]{display:none!important}
.lookpick{display:flex;align-items:center;gap:2px;position:relative;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.lookpick::-webkit-scrollbar{display:none}
.lp-t{position:relative;min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:var(--r);
  background:none;cursor:pointer;color:var(--ink-dim);
  font:500 13px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.06em;
  transition:color var(--rx-d1) var(--ease)}
.lp-t.on{color:var(--ink)}
/* Inset, because the row scrolls: an outset ring would be clipped by the row's own overflow. */
.lp-t:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.lp-t[aria-disabled="true"]{opacity:.5;cursor:progress}
/* The mark is placed by JS from the active tab's measured box. Without the script it rests under
   the first number and the active number's ink still says which look is on screen. */
.lookpick-mark{position:absolute;left:0;bottom:8px;width:18px;height:1.5px;background:var(--ink);
  pointer-events:none;transition:transform var(--rx-d3) var(--ease)}

/* ═══ 4. THE ACTIONS AND QUICK CHANGES (05 §5.5, §7.2) ═══════════════════════════════════════ */

.rx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rx-btn.rx-save[aria-busy="true"]{cursor:progress}
.rx-swapline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:14px 0 0;
  font:400 13.5px/1.5 var(--body);color:var(--ink-2)}

.rx-quick{margin:24px 0 0}
.rx-quick-h{margin:0 0 10px}
.rx-quick-row{display:flex;flex-wrap:wrap;gap:8px}

/* ═══ 5. THE REASONS (05 §8.2 ledger ≥768, §8.3 cards <768) ══════════════════════════════════ */

.rx-why-wrap > .rx-eyebrow{margin:0 0 10px}
.rx-why-wrap h2{margin:0 0 20px;scroll-margin-top:calc(var(--rx-top) + 88px)}
.rx-why{list-style:none;margin:0;padding:0}
.rx-why-i{position:relative;border-top:1px solid var(--line)}
.rx-why-i:last-child{border-bottom:1px solid var(--line)}
/* The number holds the left column for the row's whole height; everything else is column two. */
.rx-why-btn{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start;
  width:100%;margin:0;padding:20px 0;border:0;background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer}
.rx-why-btn > *{grid-column:2}
.rx-why-btn > .rx-why-n{grid-column:1;grid-row:1 / span 3}
.rx-why-n{font:500 13px/1.6 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.06em;
  color:var(--ink-dim);transition:color var(--rx-d1) var(--ease)}
.rx-why-t{display:block;margin:0 0 6px;font:600 21px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)}
.rx-why-b{display:block;max-width:52ch;font:400 15px/1.6 var(--body);color:var(--ink-2)}
/* THE ACTIVE ROW IS DRAWN BY A RULE THAT WIPES ACROSS ITS TOP EDGE — transform only. */
.rx-why-i::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rx-d3) var(--ease)}
.rx-why-i.is-on::before{transform:scaleX(1)}
.rx-why-i.is-on .rx-why-n{color:var(--ink)}
.rx-why-btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
/* "Updated" — a row a swap rewrote. JS removes the class and the tag after four seconds. */
.rx-why-up{display:none}
.rx-why-i.is-updated .rx-why-up{display:inline-block;margin-left:8px;padding:2px 8px;vertical-align:.2em;
  border:1px solid var(--ink);border-radius:var(--r-pill);color:var(--ink);
  font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase}
.rx-why-strip{display:none}

/* WORTH A SECOND THOUGHT: under the reasons, never collapsed, each watch-out its own paragraph,
   verbatim. The anchor target of "Worth a look — with one note", so it clears the sticky bars. */
.rx-watch{margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--rx-top) + 88px)}
.rx-watch > .rx-eyebrow{margin:0 0 10px}
/* Focus arrives here from "Worth a look" (rx-hero.js toNote). A tap shows no ring — the scroll is
   the answer — and a keyboard press rings the note it landed on. */
.rx-watch:focus{outline:none}
.rx-watch:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px}
.rx-watch > p:not(.rx-eyebrow){margin:0 0 8px;max-width:56ch;font:400 15px/1.6 var(--body);color:var(--ink-2);
  text-wrap:pretty}

/* ═══ 6. THE PHONE DOCK (05 §5.5) ════════════════════════════════════════════════════════════
   Below 768 only. It MOVES, it never fades: a stalled animation must cost position, never
   visibility (leorve.css's nav-menu lesson). While it is parked below the viewport it is also
   visibility:hidden — off-screen buttons must not be Tab stops, and must not give a role-and-name
   locator a second "Save look" — and that visibility flips only after the slide has finished. */
.rx-dock{display:none}
.rx-dock[hidden]{display:none!important}

/* ═══ 7. THE SKELETON (05 §12) — the final geometry, filled by rx-core's sheen ═══════════════ */
/* The placeholders sit inside the REAL elements (rx-hero.js skeleton() says why), so the real rules
   size and place them. One placeholder line is one line box of the element it is in: a bar 1lh
   tall less a quarter-em of air above and below, so it reads as text and its box is the text's.
   INLINE-BLOCK, TOP-ALIGNED, NOT BLOCK. As blocks, the quarter-em margins of neighbouring bars
   COLLAPSED into one, every line came out a quarter-em short, and the measured skeleton head was
   122px shorter than the painted one at 1440. Inline-block margins never collapse, and a
   top-aligned box whose margin box is exactly 1lh makes a line box of exactly 1lh. The widths of
   consecutive bars always sum past 100%, so each one wraps to its own line. Without the lh unit
   the calc() is dropped and the .8em bar still sits in a 1lh line box: the parent's strut. */
.rx-hero-sk-txt{display:inline-block;vertical-align:top;height:.8em;height:calc(1lh - .5em);margin:.25em 0;border-radius:6px}
.rx-hero-sk-pill{display:block;flex:0 0 auto;border-radius:var(--r-pill)}
.rx-conf > .rx-hero-sk-txt{flex:0 0 auto;font:500 13.5px/1.4 var(--body)}
.rx-hero-sk-sec{margin:0 0 20px}
.rx-hero-sk-row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--line)}
.rx-hero-sk-row:last-child{border-bottom:1px solid var(--line)}
.rx-hero-sk-row > .rx-why-n{grid-row:1 / span 2}
.rx-hero-sk-row > :not(.rx-why-n){grid-column:2}
/* What exists at only some widths: the phone chip below 768, a name's and a heading's second line
   in the 364px spread column only (≥1200). */
/* INLINE-BLOCK WHEN SHOWN, NEVER BLOCK. As a block the second line's quarter-em bottom margin
   collapsed out through the name's box, so the skeleton name at 1440 was 90.7px against the
   painted 103.7px and the actions under it rose 10–13px when the look landed (measured by
   C:\tmp\shot\RX-P4-skelhead.mjs). Inline-block, it is one more 1lh line box like the first, and
   the widths (92% + 70%) put it on a line of its own. */
.rx-hero-sk-chip,.rx-hero-sk-2nd{display:none}
@media (min-width:1200px){ .rx-hero-sk-2nd{display:inline-block} }

/* ═══ 8. BELOW 768 ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  .rx-say{display:none}
  .rx-say-under{display:block;margin:0 0 20px;max-width:34ch;color:var(--ink);
    font:400 19px/1.42 var(--display);letter-spacing:-.012em;text-wrap:pretty}

  /* The line (and the Edit inside it) gives way to the chip. */
  .rx-styled{margin-top:12px}
  .rx-styled-line{display:none}
  .rx-chip.rx-styled-chip{display:inline-flex}
  .rx-hero-sk-chip{display:block}

  /* The skeleton's reasons are the phone's cards, peeking, as the real ones will be. */
  .rx-hero-sk-rows{display:flex;gap:12px;overflow:hidden;margin:0 -20px;padding:2px 20px 8px}
  .rx-hero-sk-rows > .rx-hero-sk-row{display:block;flex:0 0 min(82%,300px);padding:20px;
    border:1px solid var(--line-2);border-radius:var(--r-lg)}
  .rx-hero-sk-row > .rx-why-n{display:block;margin:0 0 14px}

  /* Quick changes become one swipeable row, bled to the screen edge; its eyebrow stays for screen
     readers only (it labels the group) — the chips say what they are. */
  .rx-quick{margin-top:20px}
  .rx-quick-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .rx-quick-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 -20px;padding:4px 20px;scroll-padding-inline:20px}
  .rx-quick-row::-webkit-scrollbar{display:none}
  .rx-quick-row > .rx-chip{flex:0 0 auto}

  .rx-why-wrap{padding-top:16px}

  /* REASONS AS HORIZONTAL CARDS (brief §17). On a phone the board is usually off-screen while the
     reasons are read, so each card carries a 32×40 strip of exactly the pieces it is about. The
     card peeks at 82% width, so no pager dots are needed. */
  .rx-why{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin:0 -20px;padding:2px 20px 8px;scroll-padding-inline:20px}
  .rx-why::-webkit-scrollbar{display:none}
  .rx-why-i{flex:0 0 min(82%,300px);scroll-snap-align:start;border:1px solid var(--line-2);
    border-radius:var(--r-lg);background:var(--card)}
  .rx-why-i:last-child{border-bottom:1px solid var(--line-2)}
  .rx-why-i::before{display:none}
  .rx-why-i.is-on{border-color:var(--ink)}
  .rx-why-btn{display:block;height:100%;padding:20px;border-radius:var(--r-lg)}
  .rx-why-n{display:block;margin:0 0 14px}
  .rx-why-t{font-size:18px}
}

/* ═══ 8b. BELOW 1200: THE STRIP AND THE DOCK ═════════════════════════════════════════════════
   Both used to be phone-only. At 768–1199 the hero STACKS — the board is above the reasons, not
   sticky beside them — so (V PR-12) a hovered or tapped reason lit a board 240px above the screen
   and changed nothing anyone could see, and (V PR-06) Save look and Try another scrolled away with
   nothing to replace them. The reasons now carry their pieces' thumbnails here too (40×52 under the
   text; 32×40 on a phone, above), and the dock rides the same visibility test as on a phone
   (rx-hero.js DOCK_MQ matches this block). From 1200 the spread hero needs neither. */
@media (max-width:1199.98px){
  .rx-why-strip{display:flex;gap:6px;margin-top:16px}
  .rx-why-strip > i{position:relative;display:block;flex:0 0 40px;width:40px;border-radius:8px;overflow:hidden}
  .rx-why-strip .rx-face{border-radius:8px}
  /* At this size the advised-colour dot and a neutral card's garment name (rx-core prints the name
     on a card with no hex, A4) would be a speck and a clipped half-word. The strip is aria-hidden;
     the row's "Points to:" line already says which pieces these are. */
  .rx-why-strip .rx-dot,.rx-why-strip .rx-fill-name{display:none}

  .rx-dock{position:sticky;bottom:0;z-index:9;display:flex;gap:10px;margin:0 -20px;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--card);border-top:1px solid var(--line);
    transform:translateY(100%);visibility:hidden;
    transition:transform var(--rx-d3) var(--ease),visibility 0s linear var(--rx-d3)}
  .rx-dock.is-on{transform:none;visibility:visible;transition:transform var(--rx-d3) var(--ease),visibility 0s}
  .rx-dock > .rx-btn{flex:0 0 auto}
  .rx-dock > [data-act="dock-next"]{flex:1 1 auto}
}
/* After 8b on purpose (same specificity, so source order decides): the phone's cards are narrower. */
@media (max-width:767.98px){ .rx-why-strip > i{flex:0 0 32px;width:32px} }

/* ═══ 9. HOVER (fine pointers only) AND REDUCED MOTION ═══════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .lp-t:not(.on):hover{color:var(--ink)}
  .rx-why-btn:hover .rx-why-n{color:var(--ink)}
  .rx-styled-edit:hover,.rx-conf a:hover{text-decoration-thickness:2px}
}

/* leorve.css already zeroes every duration under reduced motion; these say so explicitly for the
   pieces that move, so the end state is the only state: the mark jumps, the wipe is simply there,
   the dock appears where it stops. Nothing here starts hidden, so nothing is stranded. */
@media (prefers-reduced-motion:reduce){
  .lookpick-mark,.rx-why-i::before,.rx-hero-head{transition:none}
  .rx-dock,.rx-dock.is-on{transition:none}
}