/* Style Star -- the whole app's stylesheet.
 *
 * ⚠️⚠️ THIS FILE IS THE THREE INLINE <style> BLOCKS THAT USED TO LIVE IN THE
 * <head> OF index.html, CONCATENATED IN THAT EXACT ORDER (2026-09-01). The
 * cascade is order-dependent, so the three sections below must keep their
 * relative order -- moving one above another silently changes how things look.
 *
 * WHY IT WAS MOVED OUT: the homepage's raw HTML was 1,160,663 bytes, over
 * Bing's 1 MB soft limit, and 332,193 of those bytes (29% of the document)
 * sat ABOVE any visible content because these blocks filled the head. That is
 * precisely the "extraneous code can push the content down in the page source"
 * their panel names. Homepage is now ~849 KB, /faq ~675 KB, and a browser
 * caches this file once across every route instead of re-downloading 317 KB
 * of identical CSS on each one.
 *
 * ⚠️ THE HONEST TRADE, accepted deliberately: an external stylesheet is
 * render-blocking, so a COLD first paint is marginally later. Every repeat
 * visit is faster. That trade was made for a real reason -- weak-signal
 * failures on a real phone, and an audience that is out and about.
 *
 * ⚠️ index.html links this as href="/styles.css", ABSOLUTE and not relative.
 * The app is a single page served at /faq, /story, /journal/<slug> and more,
 * so a relative href would resolve to /journal/styles.css on an article route
 * and 404, leaving that page completely unstyled. Never make it relative.
 *
 * ⚠️ Nothing here is minified or reformatted; it is a byte-for-byte move, so
 * this file can be diffed against the old inline blocks at any time.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:#f5f3ef;font-family:'DM Sans',sans-serif;color:#1a1a1a;-webkit-font-smoothing:antialiased}
body{display:flex;align-items:flex-start;justify-content:center;padding:1rem 0.75rem 3rem;min-height:100vh}
.ss{width:100%;max-width:480px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 4px 40px rgba(0,0,0,0.08)}

/* Side padding is deliberately small: the tagline is centered and narrower than
   its box, so this padding never shows -- it only ever decides where the line
   WRAPS. At 2rem the tagline needed 277px of 280px at 390w, so any page zoom
   (or any phone under 390) broke "light." onto its own line. 0.75rem holds one
   line at 390/375/360; at 320 it falls to two balanced lines at the sentence
   seam, which is what text-wrap:balance below is for. */
.hdr{text-align:center;padding:0.6rem 0.75rem 0.5rem;border-bottom:none}
.logo-img{display:block;margin:2px auto 2px;width:104px;height:auto}
.tag{font-size:16px;color:#666;letter-spacing:0.08em;margin-top:0;font-weight:500;text-wrap:balance}


.inner{padding:0.5rem 1.75rem 1.5rem}
.prog-wrap{margin-bottom:1.5rem;display:none}
.prog-bar{width:100%;height:5px;background:#efe6d2;border-radius:0;margin-bottom:5px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#E7C978,#C79A34);border-radius:0;transition:width 0.4s ease;width:0%}
.prog-lbl{font:700 12px/1 'Jost',sans-serif;letter-spacing:.08em;color:#C8971E;text-align:right}

.scr{display:none}.scr.act{display:block}

.wel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.3rem;padding:0.25rem 1rem}
.wel-t{font-family:'DM Serif Display',Georgia,serif;font-size:27px;font-weight:400;color:#1a1a1a;line-height:1.3;margin-bottom:8px;text-wrap:balance;overflow-wrap:break-word;max-width:100%}
.wel-t .accent{color:#D4AF37}
@media(max-width:374px){.wel-t{font-size:24px}}
@media(min-width:420px){.wel-t{font-size:30px}}
@media(min-width:520px){.wel-t{font-size:34px}}
.wel-s{font-size:16px;color:#555;line-height:1.65;max-width:380px;font-family:'DM Sans',sans-serif;font-weight:400}
.wel-icons{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin:4px 0;width:100%;max-width:340px}
.wel-icon-item{text-align:center;font-size:10px;color:#555;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.wel-icon-glyph{height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.wel-icon-item svg,.wel-icon-item img{display:block;margin:0}
.wel-icon-desc{font-size:8px;color:#bbb;margin-top:1px;font-weight:400}
.wel-label{font-size:10px;color:#bbb;letter-spacing:1.5px;font-weight:600;margin:4px 0 2px}
.action-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid #e8e8e8;border-radius:14px;cursor:pointer;text-align:left;transition:border-color 0.2s;width:100%;max-width:340px;box-sizing:border-box}
.action-card:hover{border-color:#ccc}
.card-title{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:1px}
.card-sub{font-size:13px;color:#666}
.card-arrow{font-size:16px;color:#ccc;flex-shrink:0}
.erow{display:flex;flex-direction:column;gap:9px;width:100%;max-width:360px;margin:6px auto 0}
.ecard{background:#fff;border:1px solid #E3C987;border-radius:0;padding:14px 16px;cursor:pointer;box-shadow:0 2px 10px rgba(40,30,10,0.06);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:row;align-items:center;text-align:left;gap:13px}
.ecard:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(40,30,10,0.13)}
.eicn{width:24px;height:24px;margin:0;flex-shrink:0;display:block}
.etext{flex:1;min-width:0}
.et{font-family:'DM Serif Display',Georgia,serif;font-size:16px;font-weight:400;letter-spacing:0;color:#1a1a1a;line-height:1.25;margin:0 0 3px}
.ed{font-size:14px;color:#615c52;line-height:1.4;margin:0}
.ear{width:18px;height:18px;margin:0;flex-shrink:0;display:block}
.name-in input{border:1.5px solid #e8e8e8;border-radius:40px;padding:14px 20px;font-size:18px;width:280px;text-align:center;background:#fff;color:#1a1a1a;font-family:'DM Sans',sans-serif;font-weight:500;transition:border-color 0.2s}
.name-in input:focus{outline:none;border-color:#C8A060}
.name-in input::placeholder{color:#999}

.qcat{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#B08830;font-weight:700;margin-bottom:8px}
.qtit{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:600;color:#1a1a1a;line-height:1.4;margin-bottom:1.5rem}
.scard{background:#fafafa;border:1px solid #ebebeb;border-radius:20px;padding:1.5rem 1.25rem;margin-bottom:1.5rem}
.slbls{display:flex;justify-content:space-between;margin-bottom:1.25rem}
.slbl{font-size:13px;font-weight:700;color:#1a1a1a;text-transform:uppercase;letter-spacing:0.06em;max-width:42%}
.slbl.r{text-align:right}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:#ddd;border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#1a1a1a;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1.5px #C8A060}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#1a1a1a;cursor:pointer;border:3px solid #fff}
.shint{text-align:center;font-family:'DM Sans',sans-serif;font-size:17px;color:#1a1a1a;font-style:italic;margin-top:1rem;min-height:24px;font-weight:600}

.btn-p{width:100%;padding:16px;border-radius:2px;font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:none;background:#1a1a1a;color:#fff;transition:opacity 0.2s;font-family:'DM Sans',sans-serif}
.btn-p:hover{opacity:0.82}
.btn-p:active{transform:scale(0.98)}
.btn-o{width:100%;padding:14px;border-radius:2px;font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;background:transparent;color:#6e6e6e;border:1px solid #e8e8e8;margin-top:8px}
.btn-o:hover{background:#fafafa;color:#888}
/* ===== Quiz glow-up — chrome vanity mirror framing the WHOLE app column (during the quiz) ===== */
.ss.quiz-mirror,.ss.chat-mirror,.ss.dream-mirror{position:relative;border-radius:0;border:13px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#FFFFFF 0%,#C6CACE 15%,#8C9298 34%,#F4F6F8 50%,#9AA0A6 66%,#DFE2E5 84%,#FFFFFF 100%) border-box;
  box-shadow:0 6px 44px rgba(0,0,0,.14),inset 0 0 0 2px rgba(201,161,78,.6)}
/* Info + Shop pages: bold two-band frame, gold + silver the same thickness (8px each) */
/* Her catch (2026-08-10): "something about it looks not symmetrical." ▶ She was
   literally right, and it was construction, not perception: this frame used to be
   painted with linear-gradient(135deg,#F3E6B8,#DFB94E,#B8891F,#E8CE7E) on
   border-box, so the top-left ran pale, a dark #B8891F band crossed the middle,
   and the bottom-right came back light. OPPOSITE SIDES OF THE SAME FRAME WERE
   DIFFERENT COLOURS. No amount of looking could make that resolve.
   Now one flat colour, and it is her pick: the LIGHT yellow end of that gradient
   (#E8CE7E), never the dark #B8891F part. The silver inner band stays -- her
   call, and it is what gives the pale gold definition against the white paper.
   ⚠️ Don't reintroduce a gradient on a frame. A frame is a rectangle; a linear
   gradient across one can never be symmetrical. */
.ss.faq-mirror,.ss.privacy-mirror,.ss.terms-mirror,.ss.contact-mirror,.ss.a2hs-mirror,.ss.journal-mirror{position:relative;border-radius:0;border:8px solid #E8CE7E;
  background:#fff;
  box-shadow:0 7px 40px rgba(0,0,0,.18),inset 0 0 0 8px #9AA0A6}
/* My Story — Catherine's page: a matted jewelry-box frame — turquoise frame (Style Star Edit accent), a white mat, then a delicate soft-pink keyline (her voice). No gray. */
/* Her simplification (2026-08-09): ONE plain turquoise border on the story
   card — the white and pink inset rings are gone ("no white line") — and the
   page behind it bleeds her signature pink (html.story-velvet). The card
   scrolls with the words, so the frame can never sit on top of them. */
.ss.story-mirror{position:relative;border-radius:0;border:11px solid #0FA6B6;background:#fff;
  box-shadow:0 8px 34px rgba(0,0,0,.16)}
/* Shop your style: her personal boutique storefront — black store window with a
   slight beveled inner edge, on the Mall's brick wall (body.shop-brick) */
.ss.shop-mirror{position:relative;border-radius:0;border:11px solid #17171c;background:#fff;overflow:visible;
  box-shadow:inset 0 0 0 2px #9aa1a7,inset 0 0 0 3.5px #e6e9eb,0 18px 34px -18px rgba(0,0,0,.5)}
body.shop-brick{padding-top:44px}
html.shop-brick,body.shop-brick{background-size:90px 54px;background-color:#F2EFE8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FEFDFB'/%3E%3Cstop offset='0.5' stop-color='%23F8F6F1'/%3E%3Cstop offset='1' stop-color='%23EFEBE2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='24' fill='%23E6E1D6'/%3E%3Crect x='1' y='1' width='18' height='10' rx='1.4' fill='url(%23g)'/%3E%3Crect x='21' y='1' width='18' height='10' rx='1.4' fill='url(%23g)'/%3E%3Crect x='-10' y='13' width='18' height='10' rx='1.4' fill='url(%23g)'/%3E%3Crect x='10' y='13' width='18' height='10' rx='1.4' fill='url(%23g)'/%3E%3Crect x='30' y='13' width='18' height='10' rx='1.4' fill='url(%23g)'/%3E%3C/svg%3E")}
/* the black/white awning mounted to the brick ABOVE the window, spanning the full
   storefront and overhanging the frame (escapes the card via overflow:visible) */
#s-shopstyle{padding-top:12px;position:relative}
#s-shopstyle .top-back-wrap{position:absolute;top:12px;right:-4px;margin:0}
#s-shopstyle .ssa-rod{position:absolute;top:-34px;left:50%;width:100vw;transform:translateX(-50%);height:2px;margin:0;z-index:6;background:linear-gradient(180deg,#EAD08A,#C99A2C)}
#s-shopstyle .ssa-awn{position:absolute;top:-32px;left:50%;width:100vw;transform:translateX(-50%);height:46px;margin:0;z-index:6;
  background:
    linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 2.5px),#EBC65E calc(100% - 2.5px),#C99A2C 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 0 14px,rgba(255,255,255,.09) 14.5px,rgba(0,0,0,.12) 15.8px,rgba(0,0,0,0) 17px 100%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 16%,rgba(0,0,0,0) 42%,rgba(0,0,0,.26) 100%),
    repeating-linear-gradient(90deg,#17171c 0 26px,#FBFBF9 26px 52px);
  -webkit-mask:radial-gradient(13px 4px at 13px 0,#000 97%,#0000) bottom left/26px 4px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat;
          mask:radial-gradient(13px 4px at 13px 0,#000 97%,#0000) bottom left/26px 4px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.26))}
/* My Story: a small pink heart by the signature (this page is Catherine herself) */
.story-sig .ph,.dc-sign .ph{font-size:0.62em;vertical-align:0.12em;margin-left:2px}
.pinkheart{fill:#F49AC1;vertical-align:middle;display:inline-block;transform:rotate(12deg)}
.pinkheart.hl{transform:rotate(-12deg)}
.sty-u{text-decoration:underline;text-decoration-color:#EC4899;text-decoration-thickness:1.5px;text-underline-offset:3px}
#s-story .top-back-wrap{position:absolute;top:5px;right:11px;margin:0;z-index:20}
/* Shop your style: its own DM-Serif title (twin to the Edit) */
#s-shopstyle .ss-shop-logo{font:400 30px/1.05 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.7px #1a1a1a;display:inline-block;position:relative;padding-bottom:11px;margin:6px 0 2px;letter-spacing:.01em}
#s-shopstyle .ss-shop-logo::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;background:#E0B84C}
#s-shopstyle .ss-shop-logo::before{content:"";position:absolute;bottom:0.5px;left:65%;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
/* Refine Preferences: the Quiz's silver+gold-keyline chrome frame at the unified 8px width */
.ss.pref-mirror{position:relative;border-radius:0;border:8px solid #A8A8A8;
  background:#fff;
  box-shadow:0 7px 40px rgba(0,0,0,.16),inset 0 0 0 8px #D6D6D6,inset 0 0 0 10px #C9A14E}
/* Your Wardrobe: its own identity — black frame + linen-white interior + a
   dashed "stitch" line just inside the edge (distinct from the legal pages'
   gold+silver display case, and from the Edit/chat's black+silver+linen). */
.ss.wardrobe-mirror,.ss.wishlist-mirror{position:relative;border-radius:0;border:8px solid #1a1a1a;
  background-color:#FBFAF7;
  background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);
  box-shadow:0 8px 44px rgba(0,0,0,.16)}
/* ⚠️ THE DASHED STITCH IS GONE, her pick (2026-08-10), and the reason is not
   just "simpler". It used to sit INSIDE a solid frame, where it read as stitching
   on paper. Once the frame went (her rethink below), it became the only line on
   the page -- and a 2px dark dashed rectangle around content is the interface
   convention for AN EMPTY BOX WAITING TO BE FILLED, the drop-a-file-here outline.
   It stopped reading as couture and started reading as unfinished.
   Offered and not taken: a 1px soft-taupe version, which does still work if she
   ever wants a thread of the atelier feeling back. The wishlist's ::before is
   separately display:none (its gilt band was retired), so nothing needs it now. */
/* HER FRAME (2026-08-09, "I love it, build it"): the wishlist page goes
   full-bleed BLACK to every screen edge (body.wl-velvet below, toggled in
   show()), and the paper is framed in the rod's own gold — a 5px rail band
   with a bright inner highlight and a deep outer shadow line. A gilt-framed
   board on black velvet. The old dashed stitch is retired on this page. */
/* Her call (2026-08-10): the gilt band is gone. It was a 5px #CFA02E rail with
   a deep rgba(138,106,23,.55) inner shadow line, and that shadow was the brown
   she kept seeing. The page now carries ONE clean 11px frame in #FEF6D6, the
   exact pale yellow of the big crown heart above it -- same structure as My
   Story (11px solid) and the wardrobe, so all three boutique frames agree.
   AND HER FOLLOW-UP, same day, from the live page: the pale band was "too pale,
   getting lost." ▶ The cause is VALUE, not hue -- #FEF6D6 is nearly as light as
   the paper it surrounds, so its INNER edge dissolved into the page and only the
   outer edge (against the black velvet) read at all. Her pick from a 5-way
   render: a 1px gold hairline on BOTH edges, which keeps her pale yellow exactly
   and gives it definition. #C89A2C is the crown heart's OWN outline stroke, so
   the frame now matches the heart in construction, not just in colour.
   ⚠️ Drawn with box-shadow, never a second border: an outset ring sits against
   the velvet and an inset ring sits where the frame meets the paper, at ZERO
   layout cost -- the empty-state wishing button has only 13px of headroom.
   ⚠️ The earlier note here said never to layer an edge on this frame. That was
   about EMPHASIS (the restore card's 4px bar, My Story's white+pink rings, both
   retired by her). A hairline is DEFINITION -- it is what makes the pale band
   visible at all. Don't add a third edge; this one is hers and it stays. */
.ss.wishlist-mirror{border-width:11px;border-color:#FEF6D6;
  box-shadow:0 8px 44px rgba(0,0,0,.16),0 0 0 1px #C89A2C,inset 0 0 0 1px #C89A2C}
.ss.wishlist-mirror::before{display:none}
html.wl-velvet,html.wl-velvet body{background:#1a1a1a}
/* MY STORY'S VELVET (2026-08-09, her design: "I think it will make that page
   look more special"): her signature pink bleeds to every screen edge and a
   clean solid turquoise frame surrounds the paper — no shadow or highlight
   lines (her catch: the dimension details read GRAY against pink). */
/* Her pick "B" from a 4-way render, 2026-08-11 (scratchpad/storypink.js ->
   storypink-{current,a,b,c}.png). It used to bleed her signature #F49AC1, the
   exact pink of the hearts. ▶ SAME MOVE AS THE EDIT'S TEAL THE SAME DAY, and
   the rule is now proven twice: when the BLEED and the ACCENT are the same
   colour at the same saturation, the accent stops being an accent. Her words:
   "a pink tone in the same family as our pink hearts but done in a darker way."
   ⚠️ #CE5C86 sits on the same hue line, and the HEARTS and the turquoise frame
   are untouched -- only the backdrop moved. Offered and not taken: #E2779F (too
   small a step to read as a change on a phone) and #B04569 (drifts toward
   burgundy and away from the heart family). */
html.story-velvet,html.story-velvet body{background:#CE5C86}
/* Her pick "A" from a 4-way render, 2026-08-11 (scratchpad/editteal.js ->
   editteal-{current,a,b,c}.png). It used to bleed the EXACT #0FA6B6 of its own
   CURATED BY CATHERINE lettering, on the reasoning that page and backdrop
   should speak one colour. ▶ HER CATCH, and the mechanism generalises: when the
   BLEED and the ACCENT are the same colour at the same saturation, the accent
   stops being an accent -- the turquoise lettering had nothing to stand out
   from. A deeper bleed is still unmistakably the same colour speaking, and it
   hands the lettering its job back. ⚠️ The lettering itself stays #0FA6B6.
   Offered and not taken: a jewel teal #0A5D67 (heads back toward the velvet
   look her wardrobe rethink retired -- a jewel box holds ONE precious thing,
   not a list that scrolls) and a pale sea glass #A8D9DE (nearly the same VALUE
   as the white page inside it, so the page edge dissolves -- the same
   getting-lost failure she caught on the pale wishlist frame). */
html.edit-velvet,html.edit-velvet body{background:#0E7F8C}
/* AMAZON FINDS wears the Edit's exact frame in her own colourway (2026-09-11).
   ⚠️ THE BLEED COLOUR IS A BACKGROUND, WHICH IS WHAT AMAZON USES IT FOR. Their
   own header tan was sampled off her screenshot at #ECBD83 and is far too pale
   to be TEXT -- measured at 1.73:1 on white, against the 4.5:1 an 18-to-80
   audience needs. ▶ So the pale tan bleeds BEHIND the card, and the accent text
   uses a deeper tone of the same family instead of the Edit's turquoise. */
/* ⭐ HER PICK, 2026-09-11, chosen by LOOKING at four rendered options: the
   LIGHTEST tan, and it is Amazon's own header colour exactly as sampled from
   her screenshot. Her words: "I am talking about using the tan as the
   background color in the same placement we have the teal color on edit... I
   prefer the lightest shade of tan."
   ⚠️ A PALE BLEED WORKS HERE ONLY BECAUSE THE CARD'S OWN FRAME IS BLACK. The
   separation between page and card comes from that 8px border and its silver
   inset, never from the bleed, which is why the Edit's dark teal and this pale
   tan both read correctly. Do not "fix" this by darkening it. */
html.finds-velvet,html.finds-velvet body{background:#ECBD83}
/* ⚠️ HER ASK 2026-09-11: "take out the background linen on this page and just
   make the whole page all white in the background." The linen is painted by the
   SHELL (.ss.dream-mirror), not by the screen -- #s-dream and #s-finds are
   already #fff, which is why setting the screen white did not and could not
   remove it. So this overrides the shell, scoped to this page by the html class
   the page already carries, and keeps the black frame and silver inset intact
   (they are border and box-shadow, not background).
   🚨 EDIT-ONLY DIFFERENCE, AND IT IS DELIBERATE: she asked for it on THIS page.
   The Edit keeps its linen. Do not "unify" them -- the two pages are meant to
   match at the FOOT (her own line, both directions), not in their paper. */
html.finds-velvet .ss.dream-mirror{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(#1a1a1a,#1a1a1a) border-box}
/* 🚨 NO ACCENT OVERRIDES ON THIS PAGE, AND THAT IS HER DECISION (2026-09-11),
   NOT AN OVERSIGHT. A tan accent set (#8C5A1E tagline, #C98B3C rule, tan bag
   icon) was built here first and she ruled it off: "I think I want HAND
   SELECTED BY CATHERINE to be in the same teal color as it is written on the
   edit page." ▶ SO ONLY THE BLEED DIFFERS. Everything inside the frame -- the
   teal tagline, the gold rule under the heading, the teal shopping bag, the
   teal invitation at the foot -- is the Edit's, byte for byte, because the two
   pages are ONE STYLIST'S IDEA and her own line says so. ⚠️ DO NOT re-add a
   per-page accent to "tie it to the tan"; that is the version she saw and
   turned down. */
/* Her bottom line, 2026-09-11: the SENTENCE reads plainly and only the INVITATION
   is underlined. Underlining the whole thing turns a stylist's sentence into a
   banner; this keeps her words as words and still shows clearly where to tap.
   ⚠️ The whole block is the tap target -- her audience runs to 80 and a two-word
   link is not a target. */
/* 🚨🚨 HER ASK 2026-09-11, AND THE SECOND HALF IS A SAFETY ASK, NOT A TASTE ONE:
   "those buttons need to be spaced out a bit more so finger doesn't bump the
   wrong one. Maybe you have a better suggestion there?"
   ▶▶ THE BETTER SUGGESTION, AND IT IS WHY THIS IS PADDING RATHER THAN MARGIN:
   more GAP alone leaves two 20px-tall strips with empty space between them, so
   a thumb that lands slightly off hits NOTHING and she taps again. Giving each
   line its own tall tap target means a near-miss still opens the right page.
   ▶ 13px of block padding puts both over the 44px minimum at this type size,
   and 10px of margin between them is the miss-gap. Measured, not assumed:
   scratchpad/findspage.js asserts each height and the gap between them.
   ⚠️ THIS IS THE FILE'S OWN STANDING RULE — "tighten the MARGINS around a
   control, never the padding inside it" — applied forwards for once: the
   padding IS the tap target, and her audience runs to 80. */
.dc-xlink{text-align:center;font-family:'Lora',Georgia,serif;font-size:14px;line-height:1.6;color:#4a463e;cursor:pointer;margin:16px auto 0;padding:13px 2px;text-wrap:balance}
/* 🚨 PINK, HER RULING 2026-09-11 — and it is the ONE link on these pages that
   changes colour. The trending line beside it STAYS teal (`.dc-trend-link`),
   deliberately: "let's make that pink instead of turquoise. Keep the Curious
   what's trending line turquoise."
   ▶ #EC4899 is the app's OWN stylist-mark pink, already used 10 times — not a
   new colour invented for this. Her 2026-08-09 mark system: gold is the app's
   voice, PINK IS CATHERINE'S, and this link is the one that leads to her other
   curated page, so the pink is saying something true.
   ⚠️ MEASURED, and the honest number: #EC4899 is 3.53:1 on the card's white,
   under the 4.5:1 this file demands of body text. THE TEAL IT REPLACES IS
   WORSE — 2.94:1 — so this is an improvement, not a regression, and both are
   BOLD and UNDERLINED, which is the affordance a plain paragraph lacks.
   ▶ If maximum readability is ever wanted here, #D6337F measures 4.53:1 and is
   the same hue family. Do not swap it in without asking her — she chose the
   colour by name. */
/* 🚨 `>` IS LOad-BEARING. `.dc-xlink span` matches BOTH spans here — the
   invitation AND the `.nb` weld nested inside it — so `display:block` on the
   loose selector put "The Edit →" on a line of its own, every time, at any
   width. The invitation is the DIRECT child; the weld must stay inline. */
.dc-xlink>span{display:block;text-wrap:wrap;font-weight:600;color:#EC4899;text-decoration:underline;text-underline-offset:3px}
/* ⚠️ `display:block` ON THE INVITATION IS THE WHOLE FIX FOR HER 2026-09-11 ASK,
   "the spacing looks better on the edit. Can you make it match on finds?"
   ▶ WHAT WAS ACTUALLY WRONG: nothing was styled differently. The two pages carry
   the SAME sentence and DIFFERENT link text ("Amazon Finds" vs "The Edit"), so
   `text-wrap:balance` split them at different points — the Edit happened to put
   its link on its own line and Finds left "clients." stranded beside it.
   🚨 SO THE OLD LAYOUT DEPENDED ON HOW LONG THE LINK TEXT HAPPENED TO BE, which
   means it would have drifted again the next time she renamed one. Making the
   break STRUCTURAL costs one word and cannot come undone by a rewording.
   ⚠️ The underline still draws under the TEXT only, not the full block width —
   asserted, because a full-width rule is exactly the banner she ruled against.
   ⚠️ `text-wrap:wrap` ON THE SPAN IS NOT REDUNDANT — IT UNDOES AN INHERITED
   `balance`. The first attempt set only `display:block` and the LINK itself
   split into two even lines ("Click here to explore" / "The Edit →"), because
   text-wrap inherits and a balanced block evens its own lines out.
   ▶ The sentence WANTS balance; the invitation wants to fill its line and only
   wrap if it genuinely must. Different jobs, so they need different values.
   ⭐ Caught by LOOKING at the render — every height measurement was identical
   across both pages, which is exactly what "fixed" looks like from a number. */
/* ▶ HER RETHINK (2026-08-10), and the reasoning is the keeper. The Wardrobe List
   used to flip its whole colour scheme with the tab (gold bleed + black frame,
   then black bleed + gold frame). She called it "too much muchness" and asked to
   simplify. Two reasons, and the FIRST IS A PRODUCT RULE, not a taste call:
   ⭐ A WOMAN WHO DOES NOT LIKE YELLOW SHOULD NOT BE MADE TO SIT IN A YELLOW ROOM
     WHILE JUDGING GARMENT COLOURS. This page is a working TOOL. A saturated
     full-screen colour imposes a preference on someone whose whole reason for
     being here is discovering her OWN palette, and it shifts how she perceives
     the colours she is about to shop for. Weigh any future full-bleed against
     this: colour bleeds belong on the pages that are ABOUT CATHERINE (My Story,
     the Edit), not on the tools.
   ⭐ And the FLIP was most of the noise by itself: one page with two identities,
     repainting on a tap.
   ▶ Also learned here, from the renders: THE FRAME AND THE BLEED WERE ONE EFFECT,
   NOT TWO. Quieten the bleed and the 11px frame stops reading as a jewel-box
   edge and starts reading as a heavy black band. So both go together, and the
   page now sits on the app's own linen like every other working screen.
   The wishlist keeps its jewel box -- a case suits ONE precious thing, which is
   what a wishlist is; a 100-row checklist that scrolls for pages is not. */
/* 🚨 overflow:visible IS A BUG FIX, NOT A TIDY-UP (her phone, 2026-08-11: "the
   star is getting cut off at the top"). The base .ss carries overflow:hidden to
   clip content to its 28px rounded corners -- but since her calm rethink this
   mirror is TRANSPARENT with SQUARE corners and no border, so that clip had
   nothing left to clip except the header star, which it sliced 11.4px off the
   top of (the mirror's own top edge sits at y=16). .ss.shop-mirror already sets
   overflow:visible for the same reason, so this is the precedent, not a new
   idea. ⚠️ Keep the no-sideways-scroll assertions in wdrcalmcheck.js pointed at
   this page: overflow:hidden was also silently containing horizontal overflow,
   and nothing else is now. */
.ss.wardrobe-mirror{border:none;box-shadow:none;background:transparent;overflow:visible}
/* Her simplification after the live test: the fixed window-frame BLOCKED the
   scrolling words and left a white sliver. Now the frame lives ON the story
   paper itself (scrolls with the text, frames the whole story), the backdrop
   card is hidden here so nothing white peeks, and it is two plain colors:
   her signature pink, one clean turquoise border. */

/* ===== Your Wardrobe ===== */
/* ⚠️⚠️ EVERY #s-wardrobe RULE IN THIS FILE CARRIES A #s-trending TWIN, AND THAT
   IS DELIBERATE (2026-09-01, when What's Trending became its own page).
   What's Trending used to be a PANE inside #s-wardrobe, so all of its styling
   was written scoped to that id. The moment its markup moved to its own screen
   -- which it had to, to get a real URL of its own -- every one of those rules
   stopped applying to it. That is the exact trap that rendered the A2HS heart
   at default size on 2026-08-05: A CLASS CARRIES ITS STYLING ONLY INSIDE THE
   SCOPE THAT DEFINES IT, and moving markup to a new screen does NOT bring its
   CSS along.
   ▶ So the twins were added MECHANICALLY, to all 147 selector parts, not just
   to the ~35 the trending page visibly uses. Completeness beats tidiness here:
   a rule missed in a media query is invisible in the sandbox and shows up as a
   subtle wrong-size, wrong-spacing bug on her phone. A twin whose class never
   appears on #s-trending simply never matches, and costs nothing.
   ⚠️ Written as a duplicated selector, NOT :is(#s-wardrobe,#s-trending). Same
   specificity either way, but an unsupported selector invalidates the WHOLE
   rule -- which would take the wardrobe page down with it. Plain duplication
   cannot fail anywhere.
   ▶ IF YOU ADD A NEW #s-wardrobe RULE: give it a #s-trending twin unless you
   are certain the class only ever appears on My List. scratchpad/trending.js
   asserts the two stay in step. */
#s-wardrobe .wdr-title,#s-trending .wdr-title{font:400 26px/1.1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.3px #1a1a1a;display:inline-block;position:relative;padding-bottom:4px;text-align:center}
/* Her call (2026-08-10): the rule runs the FULL width of the words, not inset.
   It was left/right 8%, which read too short under the no-name title. Because
   the title block now hugs its widest line (the forced break above), 0/0 means
   the rule is exactly as wide as the longest line of the heading. */
#s-wardrobe .wdr-title::after,#s-trending .wdr-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#E0B84C}
#s-wardrobe .wdr-title::before,#s-trending .wdr-title::before{content:"";position:absolute;left:63%;bottom:-3px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C)}
/* ⚠️ THE 8px TOP MARGIN IS THE STAR'S HEADROOM, her pick "B" 2026-08-11, and it
   is the one thing on this header that is allowed to move. Measured by
   RASTERISING the title's painted ink directly under the star: the letters
   begin at y=52.5, and the viewport top is the other wall, so the whole band is
   52.5px. A 48px star cannot have margin at BOTH ends inside that -- it left
   2.5px. This 8px pushes the band down so the star gets 8px above and stays
   clear of the letters below. Her alternative, offered and not taken, was 44px
   with nothing moving at all (6.5px headroom). If the star is ever resized,
   re-run scratchpad/wdrstarband.js -- the ink measurement, not the line box, is
   what bounds it.
   ⚠️ IT IS padding-top, NOT margin-top, AND THAT IS TWO SEPARATE REASONS.
   (1) A margin-top here COLLAPSES with the Back row's 0.35rem bottom margin, so
   an 8px margin moved the title only 2.4px -- the test caught it. (2) Absolute
   children are positioned against the PADDING BOX, whose top edge padding does
   not move, so padding lets the title drop while the star's `top` stays an
   independent number. Change one without disturbing the other. */
#s-wardrobe .wdr-head,#s-trending .wdr-head{text-align:center;margin-bottom:6px;padding-top:10px;position:relative}
/* Her pick "A" + her placement call, 2026-08-11: a star on the header, but
   MOVE NOTHING -- the title, Back and the MENU chip all stay exactly where they
   are. ⚠️ SO IT MUST BE position:absolute AND COST ZERO LAYOUT. There is only
   5.6px of true gap above the title (Back's row ends at y42, the title starts
   at y47.6, identical on every width and in both title states), so an in-flow
   star would have shoved the whole page down ~40px. Absolute + centred puts it
   in the same vertical band as Back and the chip while sitting horizontally
   clear of both: the chip ends at x97.4, the Back button starts past x300, and
   the star spans roughly x178-212 at 390. pointer-events:none so it can never
   eat a tap meant for the header.
   ▶ WHY A STAR EARNS ITS PLACE HERE and this is the reusable part: the how-to
   paragraph on this very page says "Tap the star on all the items you'd like to
   add." The mark at the top is the SAME mark she is being taught to tap, so it
   reads as a legend rather than decoration -- and gold star = wardrobe is
   already her own mark system.
   🚨 THE CLASS NAME IS `wdr-headstar`, NOT `wdr-star`, AND THAT IS LOAD-BEARING.
   `.wdr-star` was ALREADY TAKEN by the per-item star button on every wardrobe
   row (see _wdrStar()), whose rule sits LATER in this file and therefore won
   the cascade: the header star silently rendered at the row star's 30px instead
   of the size set here, and every clearance test still passed because they
   measured position, not size. Never reuse a class name across two different
   controls on the same screen.
   ⚠️ 48px IS THE CEILING, and the limit is THE TOP OF THE SCREEN, not the chip
   or Back (at 48px the star spans x171-219 while the chip ends at x97.4 and
   Back starts past x300). It has to grow UPWARD -- growing downward lands it on
   the title's words -- so it runs out of room overhead first: 42px leaves
   9.6px of headroom, 48px leaves 4.6px, and 56px effectively touches the top
   edge and fails. Her pick was 48 (scratchpad/wdrstarbig.js reruns the sweep).
   ▶ WATCH FOR HER REPORT: 4.6px is a thin margin at the screen edge, and thin
   edge margins are exactly where this sandbox and her real phone have disagreed
   before (the wishlist Back button, the cream stitch, the corner hearts). If it
   sits wrong on her device, 42px is the one-number fallback. */
#s-wardrobe .wdr-headstar,#s-trending .wdr-headstar{position:absolute;left:50%;top:-39px;width:48px;height:48px;transform:translateX(-50%);pointer-events:none}
#s-wardrobe .wdr-sub,#s-trending .wdr-sub{font:500 12.5px/1.4 'Jost',sans-serif;color:#8a8474;margin-top:10px}
#s-wardrobe .wdr-sub b,#s-trending .wdr-sub b{color:#B08830;font-weight:600}
#s-wardrobe .wdr-tabs,#s-trending .wdr-tabs{display:flex;gap:8px;margin:18px 0 0}
/* The unselected tab used to be transparent with light grey text, which reads
   as "disabled" rather than "the other option" -- real testing showed a user
   never realised she could tap it. It now gets a cream fill, darker text and
   an arrow, so both tabs look like buttons: one pressed in, one not. */
#s-wardrobe .wdr-tab:not(.on),#s-trending .wdr-tab:not(.on){background:#F5EFE2;color:#3a352c;border-color:#C9A44C}
/* Stays BELOW the buttons (her call 2026-08-15, from renders: above, it lands
   in the page-subtitle slot and reads as describing the page, and it is the
   only thing telling her the unselected tab is tappable -- her mom's catch).
   Tightened to sit close under them. */
#s-wardrobe .wdr-tabhint,#s-trending .wdr-tabhint{font:400 12.5px/1.4 'Jost',sans-serif;color:#8a8474;text-align:center;margin:4px 0 2px}
/* Page-level affiliate notice, the blog-post convention: quiet, but above every
   link on the screen. #6e6e6e matches the disclosure on every other surface. */
/* Sits under each tab's intro card, directly above that tab's first link. Its
   OWN margins are the whole gap on both sides -- the neighbours' spacing is
   zeroed below -- so the two tabs are identical (her ask 2026-08-15).
   ⚠️ DELIBERATELY UNEVEN, her second call: "lower it down to sit closer to the
   line." Centred 9/9 it floated between two cards and belonged to neither; sat
   down against the list it reads as a caption for the links it is actually
   about, which is the whole reason it moved here. Keep the bottom gap small. */
#s-wardrobe .wdr-disclosure,#s-trending .wdr-disclosure{font:400 11.5px/1.4 'DM Sans',sans-serif;color:#6e6e6e;text-align:center;margin:16px 0 3px}
#s-wardrobe .wdr-disclosure+.wdr-card,#s-trending .wdr-disclosure+.wdr-card{margin-top:0}
#s-wardrobe .wdr-disclosure+.wdr-tstack,#s-trending .wdr-disclosure+.wdr-tstack{margin-top:0}
#s-wardrobe .wdr-tab,#s-trending .wdr-tab{flex:1;text-align:center;padding:10px 0;font:600 12.5px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;border:1px solid #d8c285;color:#8a8474;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-tab.on,#s-trending .wdr-tab.on{background:#1a1a1a;color:#EACD68;border-color:#1a1a1a}
/* The arrow sits on its own line under the label, so the label stays centred
   (inline it pushed the words off centre) and both tabs carry a matching gold
   arrow pointing out to its own side. The fixed-height ::after keeps the two
   tabs exactly the same height whichever one is selected.
   NOTE: these must stay AFTER the base .wdr-tab rule above -- same specificity,
   so an earlier padding would be silently overridden by it. */
#s-wardrobe .wdr-tab,#s-trending .wdr-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 0 8px}
/* Her ask 2026-08-11: make these arrows the same size as the one on "Shop my
   whole list". ⚠️ They used to be TEXT GLYPHS (content:"\2190"/"\2192") at 16px,
   so "the same size" could never have been achieved by changing a font-size --
   a glyph's weight and proportions come from the font, not from us. They are
   now literally the SAME INLINE SVG as .wsw-ar on the shop button: same path,
   same 2.6 stroke, same 19px box, so the two can only ever match. The left tab
   reuses the identical path mirrored with scaleX(-1), which is what guarantees
   both arrows carry exactly the same weight.
   ▶ This also brings the tabs under the standing no-brand-mark-as-a-glyph rule.
   The fixed 19px box keeps both tabs the same height whichever is selected,
   which is the job the old fixed-height ::after was doing. */
#s-wardrobe .wdr-tab-ar,#s-trending .wdr-tab-ar{display:block;width:19px;height:19px;flex:none;color:#C9A44C}
#s-wardrobe .wdr-tab[data-tab="list"] .wdr-tab-ar,#s-trending .wdr-tab[data-tab="list"] .wdr-tab-ar{transform:scaleX(-1)}
#s-wardrobe .wdr-tab.on .wdr-tab-ar,#s-trending .wdr-tab.on .wdr-tab-ar{color:#EACD68}
/* Gold "New" pill on the Trending tab, matching the Style Star Edit's pill. */
#s-wardrobe .wdr-tab,#s-trending .wdr-tab{position:relative}
#s-wardrobe .wdr-tab-badge,#s-trending .wdr-tab-badge{position:absolute;top:-6px;right:3px;display:none;align-items:center;justify-content:center;padding:2px 5px;border-radius:7px;background:radial-gradient(circle at 40% 35%,#FCE9AC,#E7BE52 62%,#C69214);box-shadow:0 0 0 1.5px #FBFAF7,0 0 6px 1px rgba(233,180,80,.7);color:#3a2c07;font:700 7px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;animation:wbNew 2.4s ease-in-out infinite;z-index:2}
#s-wardrobe .wdr-tab-badge.on,#s-trending .wdr-tab-badge.on{display:flex}
/* Inline "New" pill beside the What's Trending button in the Build hubs.
   Sits in the flow next to the label rather than floating on a corner. */
.tr-new{display:none;align-items:center;margin-left:7px;padding:2px 5px;border-radius:7px;background:radial-gradient(circle at 40% 35%,#FCE9AC,#E7BE52 62%,#C69214);box-shadow:0 0 0 1.5px #FBFAF7,0 0 6px 1px rgba(233,180,80,.7);color:#3a2c07;font:700 7px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;animation:wbNew 2.4s ease-in-out infinite;flex:0 0 auto}
.tr-new.on{display:inline-flex}
/* Saved-count pill beside My Wishlist on Welcome Back. Hidden at zero. */
/* Her call 2026-08-13: the count pill left the pink family (pink = her hearts,
   a count is not a heart) for the app's GOLD badge family -- the wishlist's own
   mark color, same finish as the New pills but static (no pulse: a count is
   state, not news) -- and grew 8.5px -> 11px for readability. */
.wl-pill{display:none;align-items:center;justify-content:center;min-width:19px;margin-left:7px;padding:2.5px 6px;border-radius:9px;background:radial-gradient(circle at 40% 35%,#FCE9AC,#E7BE52 62%,#C69214);box-shadow:0 0 0 1.5px #FBFAF7;color:#3a2c07;font:700 11px/1 'Jost',sans-serif;letter-spacing:.03em;flex:0 0 auto}
.wl-pill.on{display:inline-flex}
#s-wardrobe .wdr-pane,#s-trending .wdr-pane{display:none}
#s-wardrobe .wdr-pane.on,#s-trending .wdr-pane.on{display:block}
/* The list reclaims the dead horizontal padding on both sides (nothing lived to
   the right of the heart). The left inset is rebuilt inside the card as padding
   so the row's left edge lands exactly where it did before, keeping the gutter
   the absolutely-positioned remove ✕ hangs in. Net: ~22px more for item names. */
#s-wardrobe,#s-trending{margin-left:-16px;margin-right:-16px}
/* Top padding is small now that the brand name lives INSIDE the title itself
   ("Catherine's Style Star Wardrobe List") rather than in a sewn label
   straddling this card's top edge. */
#s-wardrobe .wdr-card,#s-trending .wdr-card{position:relative;background:#FBFAF7;border:1px solid #e7e0cf;border-radius:2px;padding:14px 8px 10px;margin-top:14px}
#s-wardrobe .wdr-howto,#s-trending .wdr-howto{font:400 15.5px/1.55 'Lora',Georgia,serif;color:#4a463e;background:#f7f6f3;border:1px solid #e4e1d9;padding:11px 14px;margin:2px 0 0;text-align:center}
#s-wardrobe .wdr-trend-intro,#s-trending .wdr-trend-intro{margin:2px 0 0}   /* the disclosure below it owns the gap now */
#s-wardrobe .wdr-trend-intro .wdr-trend-note,#s-trending .wdr-trend-intro .wdr-trend-note{margin:0}
#s-wardrobe .wdr-howto b,#s-trending .wdr-howto b{color:#26221c;font-weight:600}
/* The how-to used to step back to a one-line reminder once she had starred a
   few items (built 2026-07-26). RETIRED 2026-08-15, her call: the card and its
   paragraph are permanent now, so My List and What's Trending open the same
   way. See the note at _wdrSyncHowto. The .hw-brief span went with it. */
#s-wardrobe .wdr-plan-wrap,#s-trending .wdr-plan-wrap{text-align:center;padding:10px 0 16px}
#s-wardrobe .wdr-plan,#s-trending .wdr-plan{display:flex;align-items:center;justify-content:center}
#s-wardrobe .wp-stat,#s-trending .wp-stat{display:flex;flex-direction:column;align-items:center;padding:0 24px}
#s-wardrobe .wp-num,#s-trending .wp-num{font:400 30px/1 'Fraunces',Georgia,serif;color:#E0B84C}
#s-wardrobe .wp-lbl,#s-trending .wp-lbl{font:600 10.5px/1.3 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#8a8474;margin-top:5px}
#s-wardrobe .wp-div,#s-trending .wp-div{width:1px;height:40px;background:linear-gradient(180deg,transparent,#e0cfa0 50%,transparent)}
/* Same recipe as the app's other shopping CTAs (the pref-done "Let's go
   shopping"): dark fill, squared, silver ring inside a gold one. Centred. */
#s-wardrobe .wdr-shopwrap,#s-trending .wdr-shopwrap{text-align:center;margin:10px 0 22px}
#s-wardrobe .wdr-shopwants,#s-trending .wdr-shopwants{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#2b2523,#1c1615);border:none;border-radius:0;box-shadow:0 0 0 3px #B4BAC0,0 0 0 6px #ECD070;color:#F5EFE2;padding:13px 20px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;text-align:left}
#s-wardrobe .wdr-shopwants:hover,#s-trending .wdr-shopwants:hover{filter:brightness(1.06)}
#s-wardrobe .wdr-shopwants .wsw-bag,#s-trending .wdr-shopwants .wsw-bag{width:21px;height:21px;flex:none;color:#E0B84C}
#s-wardrobe .wdr-shopwants .wsw-txt,#s-trending .wdr-shopwants .wsw-txt{font:600 15px/1.15 'Jost',sans-serif;letter-spacing:.01em}
#s-wardrobe .wdr-shopwants .wsw-n,#s-trending .wdr-shopwants .wsw-n{display:block;font:500 12px/1.2 'Jost',sans-serif;color:#E0B84C;margin-top:2px;letter-spacing:.02em}
#s-wardrobe .wdr-shopwants .wsw-ar,#s-trending .wdr-shopwants .wsw-ar{width:19px;height:19px;flex:none;color:#E0B84C}
/* The end-of-list payoff: she has just been down all ~98 pieces, so name what
   she built before offering the same action, rather than repeating the button. */
#s-wardrobe .wdr-shopend,#s-trending .wdr-shopend{margin:10px 0 4px;text-align:center}
#s-wardrobe .wdr-shopend .wse-lead,#s-trending .wdr-shopend .wse-lead{font:400 21px/1.25 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.3px #1a1a1a;margin-bottom:5px}
/* The "Shop them all together" sub is GONE (her call, 2026-08-12) — the
   Catherine line below the clean list replaced it, so the zone between the
   card and the marquee button carries exactly one line. Don't re-add a sub. */
/* Her clean list: the starred pieces written out together under the lead, the
   way a stylist copies the marked items off a worksheet onto one page (Cath's
   pick "A", 2026-08-12). Left-aligned inside the centred block on purpose —
   it reads as a written list, not a caption. */
#s-wardrobe .wdr-mylist,#s-trending .wdr-mylist{border:1px solid #D6C9A8;background:#fff;margin:12px 0 14px;padding:13px 14px 11px;text-align:left}
/* The card's title finishes her worksheet metaphor: the same gold underline
   bar the category headers (and the Menu's group labels) wear, so the clean
   list reads as the worksheet's own closing section. */
#s-wardrobe .wml-h,#s-trending .wml-h{font:700 11px/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#26221c;display:inline-block;padding-bottom:4px;border-bottom:2px solid #D8A52E;margin:1px 0 5px}
/* Catherine's line, replacing the old sub — pink tilted heart = her speaking,
   per the mark system. UPRIGHT at 14px (her call 2026-08-12, and the whisper
   readability floor). Her wording runs ~313px, so it balances to two even
   lines by design — don't force one line by shrinking the font. */
#s-wardrobe .wml-cath,#s-trending .wml-cath{font:500 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;margin:-2px auto 14px;max-width:300px;text-align:center;text-wrap:balance}
#s-wardrobe .wml-cath .pinkheart,#s-trending .wml-cath .pinkheart{width:12px;height:12px;margin-left:3px;vertical-align:-1.5px}
#s-wardrobe .wml-row,#s-trending .wml-row{display:flex;align-items:baseline;gap:9px;padding:6.5px 0;border-bottom:1px solid #EFEAE0}
#s-wardrobe .wml-row:last-child,#s-trending .wml-row:last-child{border-bottom:none}
#s-wardrobe .wml-row svg,#s-trending .wml-row svg{flex:none;width:14px;height:14px;align-self:center}
#s-wardrobe .wml-n,#s-trending .wml-n{font:500 14.5px/1.3 'Jost',sans-serif;color:#26221c;flex:1}
/* 10.5px #5f5647 = the worksheet's own SHOP/ADD label spec (the readability
   floor found 2026-08-11); max-width lets a long category name wrap to two
   right-aligned lines at narrow widths instead of crushing the item name. */
#s-wardrobe .wml-c,#s-trending .wml-c{font:600 10.5px/1.25 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5f5647;flex:none;max-width:45%;text-align:right}
#s-wardrobe .wdr-shopend .wdr-shopwrap,#s-trending .wdr-shopend .wdr-shopwrap{margin:0}
/* The rows (not the card) carry the left inset, so the remove ✕ still has its
   gutter to hang in while anything centred in the card — the counts, the reset
   link, the shop CTA — stays centred on the card itself. */
#s-wardrobe .wdr-cat,#s-trending .wdr-cat{margin-bottom:16px;margin-left:22px}
#s-wardrobe .wdr-add,#s-trending .wdr-add{margin-left:22px}
/* Her ask (2026-08-10): underline these the way the Menu's group labels are
   underlined -- a short 2px gold bar hugging the word, not a full-width rule.
   inline-block is what makes the bar hug; see .menu-grp, same pattern. */
#s-wardrobe .wdr-cat-t,#s-trending .wdr-cat-t{font:700 12px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#26221c;margin-bottom:8px;padding:0 2px 5px;position:relative;display:inline-block}
#s-wardrobe .wdr-cat-t::after,#s-trending .wdr-cat-t::after{content:"";position:absolute;left:2px;right:-2px;bottom:0;height:2px;background:#D8A52E}
/* ⚠️ THE DIVIDER COLOUR IS A FIX, NOT A PREFERENCE (her catch, 2026-08-11: two
   starred rows in a row "sort of merge together looking like one color block").
   It was #f0ebe0, which measures 1.14:1 against the paper and 1.06:1 against a
   starred row's #FAF1DA fill -- so between two adjacent starred rows the line
   effectively DID NOT EXIST. #D6C9A8 measures 1.57:1 and 1.46:1: visible on both
   backgrounds without turning the worksheet into a grid. Re-measure with
   scratchpad/wdrsheet.js before changing it. */
#s-wardrobe .wdr-item,#s-trending .wdr-item{position:relative;display:flex;align-items:center;flex-wrap:wrap;padding:10px 2px;gap:0 9px;border-bottom:1px solid #D6C9A8}
#s-wardrobe .wdr-item:last-child,#s-trending .wdr-item:last-child{border-bottom:none}
#s-wardrobe .wdr-item.want,#s-trending .wdr-item.want{background:#FAF1DA}
/* flex-basis 0, not 120px: with a 120px basis the row's own flex-wrap fired on
   narrow phones and dropped the heart onto a second line, stranded under the
   name. Basis 0 keeps name + Ideas + heart on one line at any width. */
#s-wardrobe .wdr-name,#s-trending .wdr-name{font:500 14.5px/1.3 'Jost',sans-serif;color:#2b2620;flex:1 1 0;min-width:0}
/* On narrow phones (and anyone using Display Zoom) a few of the longer item
   names wrapped to two lines. Reclaiming a little row padding and gap fixes
   most of them WITHOUT shrinking the text -- readability matters more here
   than a perfectly even list. Wider phones are untouched. */
@media(max-width:389px){#s-wardrobe .wdr-item,#s-trending .wdr-item{gap:0 6px;padding-left:0;padding-right:0}}
/* Catherine's line on anchor pieces — the "oh, I really need that" moment. Only
   ~20 items carry one, so they read as her speaking up, not as page furniture. */
#s-wardrobe .wdr-note,#s-trending .wdr-note{display:block;font:400 13px/1.4 'Lora',Georgia,serif;color:#4a463e;margin-top:3px;padding-right:4px}
#s-wardrobe .wdr-name.custom::before,#s-trending .wdr-name.custom::before{content:"\2605 ";color:#E6C24E;font-size:11px}
#s-wardrobe .wdr-del,#s-trending .wdr-del{position:absolute;left:-34px;top:4px;color:#8a8272;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-del:hover,#s-trending .wdr-del:hover,#s-wardrobe .wdr-del:active,#s-trending .wdr-del:active{color:#c0392b;background:#f3ede0}
#s-wardrobe .wdr-undo,#s-trending .wdr-undo{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 13px/1.4 'Jost',sans-serif;color:#6f6a63;background:#f3ede0;border:1px dashed #cfc6b2;padding:8px 12px;margin:2px 0 12px}
#s-wardrobe .wdr-undo-btn,#s-trending .wdr-undo-btn{color:#1a1a1a;font-weight:700;text-decoration:underline;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;padding:2px 4px}
#s-wardrobe .wdr-removed,#s-trending .wdr-removed{font:500 12.5px/1.4 'Jost',sans-serif;color:#8a8474;text-align:center;padding:12px 0 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-removed:hover,#s-trending .wdr-removed:hover{color:#1a1a1a}
#s-wardrobe .wdr-reset-wrap,#s-trending .wdr-reset-wrap{text-align:center;padding:2px 0 8px}
#s-wardrobe .wdr-reset-wrap.end,#s-trending .wdr-reset-wrap.end{padding:14px 0 4px}
/* The top copy is a quiet link, not a button: resetting is the last thing she
   wants on arrival, and a full button there competed with the shop CTA and sat
   between her instructions and the list. The bottom copy stays a real button. */
#s-wardrobe .wdr-reset-wrap.top,#s-trending .wdr-reset-wrap.top{padding:0 0 10px}
#s-wardrobe .wdr-reset-wrap.top .wdr-reset,#s-trending .wdr-reset-wrap.top .wdr-reset{border:none;background:none;padding:4px 6px;font-size:12.5px;font-weight:500;color:#8a8474;text-decoration:underline}
#s-wardrobe .wdr-reset-wrap.top .wdr-reset:hover,#s-trending .wdr-reset-wrap.top .wdr-reset:hover,#s-wardrobe .wdr-reset-wrap.top .wdr-reset:active,#s-trending .wdr-reset-wrap.top .wdr-reset:active{color:#1a1a1a}
/* Back to top — the list is ~98 items. Deliberately quiet: a utility, not a CTA,
   so it borrows the dark/gold palette but stays small. Pinned to the app column
   (not the window) so it doesn't drift off to the right on a desktop screen. */
#s-wardrobe .wdr-top,#s-trending .wdr-top{position:fixed;bottom:20px;left:max(24px,calc(50% - 216px));z-index:40;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(180deg,#2b2523,#1c1615);color:#F5EFE2;border-radius:0;box-shadow:0 0 0 2px #ECD070,0 5px 15px rgba(0,0,0,.3);font:600 12px/1 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:10px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
#s-wardrobe .wdr-top svg,#s-trending .wdr-top svg{width:14px;height:14px;color:#ECD070}
#s-wardrobe .wdr-top.on,#s-trending .wdr-top.on{opacity:1;pointer-events:auto;transform:none}
@media (prefers-reduced-motion:reduce){#s-wardrobe .wdr-top,#s-trending .wdr-top{transition:none}}
#s-wardrobe .wdr-reset,#s-trending .wdr-reset{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 'Jost',sans-serif;letter-spacing:.02em;color:#4a453c;border:1.5px solid #b3ada0;background:#fff;padding:10px 20px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-reset:hover,#s-trending .wdr-reset:hover,#s-wardrobe .wdr-reset:active,#s-trending .wdr-reset:active{border-color:#1a1a1a;color:#1a1a1a}
#s-wardrobe .wdr-reset-confirm,#s-trending .wdr-reset-confirm{text-align:center;padding:6px 0 10px;margin:0 -13px;font:500 12.5px/1.55 'Jost',sans-serif;color:#6f6a63}
#s-wardrobe .wdr-reset-confirm b,#s-trending .wdr-reset-confirm b{display:block;color:#2b2620;font-weight:600;font-size:13.5px;margin-bottom:4px}
#s-wardrobe .wdr-rc-btns,#s-trending .wdr-rc-btns{margin-top:8px;display:flex;justify-content:center;gap:18px}
#s-wardrobe .wdr-rc-yes,#s-trending .wdr-rc-yes{color:#2E9E4F;font-weight:700;text-decoration:underline;cursor:pointer;padding:3px 6px;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-rc-no,#s-trending .wdr-rc-no{color:#1a1a1a;font-weight:700;text-decoration:underline;cursor:pointer;padding:3px 6px;-webkit-tap-highlight-color:transparent}
/* One positive action per row. The heart sits in a fixed right-hand column so she
   can run her thumb straight down the list. No "have" — owning blue jeans never
   meant she didn't want another pair. */
#s-wardrobe .wdr-star,#s-trending .wdr-star{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-star svg,#s-trending .wdr-star svg{width:23px;height:23px;display:block}
#s-wardrobe .wdr-expand,#s-trending .wdr-expand{flex-basis:100%;min-width:0;margin:4px 0 0;padding:10px 8px 6px;background:#F4EFE4}
#s-wardrobe .wdr-expand-lbl,#s-trending .wdr-expand-lbl{font:600 11px/1.3 'Jost',sans-serif;color:#8a6a1e;margin-bottom:8px}
#s-wardrobe .wdr-expand-lbl a,#s-trending .wdr-expand-lbl a{color:#8a6a1e;cursor:pointer}
/* Shopping is never gated behind marking the row — every item is one tap from
   real products, wanted or not. */
/* ▶ HER PICK "C" (2026-08-11): Ideas becomes a squared chip, and it is a TAP
   TARGET fix as much as a look. Measured before: the plain link was a
   46.5 x 11.5px target sitting 9px from the star -- an 11.5px-tall control
   beside another control, on a 100-row list, for an audience that runs to 80.
   As a chip it is 68.5 x 23.5px with a 19px gap. ⚠️ SQUARED (radius 2px), not a
   pill: it matches the squared cards and buttons she has chosen everywhere else,
   and a filled version was argued down for competing with "Shop my whole list"
   on the same screen. Cost she accepted: the name column goes 203.5 -> 171.5px
   and ONE of 100 names wraps. */
#s-wardrobe .wdr-see,#s-trending .wdr-see{display:inline-flex;align-items:center;gap:3px;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#8a6a1e;cursor:pointer;flex:0 0 auto;white-space:nowrap;-webkit-tap-highlight-color:transparent;margin-right:10px;padding:5px 10px;border:1px solid #D8A52E;border-radius:2px;background:#fff}
#s-wardrobe .wdr-see-star,#s-trending .wdr-see-star{color:#E6C24E}
/* Her ask 2026-08-12: the trailing arrow on all three Ideas/See-ideas buttons
   made "a little larger/thicker looking" -- shared by .wdr-see, .tlf and
   .wdr-tt-see, sized to sit comfortably beside 11.5px button text. */
#s-wardrobe .wdr-see-ar,#s-trending .wdr-see-ar{display:block;width:12.5px;height:12.5px;flex:none}
/* ▶ THE WORKSHEET COLUMN HEADING (her pick "C", 2026-08-11). She loves that this
   page is the worksheet she actually uses in a client's closet, and her problem
   was that the star's meaning is explained at the TOP but never at the POINT OF
   USE. A real worksheet has column headings, so this is her own metaphor
   finishing itself. ⚠️ It repeats at EVERY category deliberately: that re-teaches
   as she scrolls 100 rows, without printing a caption on all 100 (the objection
   to the every-row version). It also labels "Ideas", which had never been
   explained at all. Rendered by _wdrCatHead(). */
#s-wardrobe .wdr-colhead,#s-trending .wdr-colhead{display:flex;align-items:center;justify-content:flex-end;gap:0 9px;padding:0 2px 5px;border-bottom:1.5px solid #C9B893;margin-bottom:2px}
/* ⚠️ HER CATCH ("hard to see"), and it was BELOW THE AA BAR, not merely small:
   8.5px #8a7f66 measures 3.79:1 on the paper -- the same failure she found in
   the Menu's group labels on 2026-08-09, which were the only sub-AA text in the
   drawer. 10.5px #5f5647 is 6.92:1. ⚠️ These are the only labels on the page
   telling her what the two controls DO, so they are the last thing that should
   be hard to read for an 18-80 audience. Don't re-quieten them. */
#s-wardrobe .wdr-colhead span,#s-trending .wdr-colhead span{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5f5647}
/* ⚠️ HER CATCH, and these numbers are LOAD-BEARING: the heading only reads as a
   heading if it sits directly over its column. SHOP must match the Ideas chip's
   width AND carry the chip's own 10px right margin, or it drifts right of the
   control it names the moment the chip moves. ADD matches the 30px star box.
   The test asserts CENTRE-OVER-CENTRE, so a font change that resizes the chip
   fails loudly instead of quietly misaligning. */
#s-wardrobe .wdr-colhead .ch-shop,#s-trending .wdr-colhead .ch-shop{width:68.5px;margin-right:10px;text-align:center}
#s-wardrobe .wdr-colhead .ch-add,#s-trending .wdr-colhead .ch-add{width:30px;text-align:center}
/* ▶ THE STICKY WORKSHEET HEADER (her ask 2026-08-11: "anything that makes the
   list feel more clear and organized to her while she is using it"). The
   category name AND the column heading travel together, so however far she has
   scrolled into a 100-row page she can always see WHICH section she is in and
   WHAT the two controls do. ⚠️ top:46px clears the fixed MENU chip, which ends
   at y42. ⚠️ The background must be OPAQUE or the rows scroll through it, and it
   needs the list card's own paper colour, not white. ⚠️ This only works because
   .ss.wardrobe-mirror lost its overflow:hidden earlier the same day -- a
   clipping ancestor kills position:sticky silently. */
#s-wardrobe .wdr-cathead,#s-trending .wdr-cathead{position:sticky;top:46px;z-index:3;background:#FBFAF7;padding-top:6px}
/* 🚨 THIS MEDIA BLOCK MUST STAY *AFTER* THE .wdr-see AND .wdr-colhead RULES, and
   the reason is the one already written above .wdr-tab: A MEDIA QUERY ADDS NO
   SPECIFICITY. Placed earlier in the file it loses the cascade to the base rules
   and does exactly nothing -- which is what happened on the first attempt, and
   the tests reported byte-identical failures as proof.
   What it does: under 390px the row's own gap drops 9px -> 6px, so the heading's
   gap and the chip's right margin have to drop with it or SHOP slides 5px off
   the chip it names. It also trims the chip's padding to give the item names
   back most of the 32px the chip cost them (wrapping had gone 1 -> 7 rows at
   360 and 19 at 320). ⚠️ No text is shrunk anywhere: readability beats an even
   list for this audience, the same call made the last time these names wrapped. */
@media(max-width:389px){
  #s-wardrobe .wdr-see,#s-trending .wdr-see{padding:5px 6px;margin-right:6px}
  /* the row drops its 2px side padding here too, so the heading must, or every
     label sits 2px right of its column */
  #s-wardrobe .wdr-colhead,#s-trending .wdr-colhead{gap:0 6px;padding-left:0;padding-right:0}
  #s-wardrobe .wdr-colhead .ch-shop,#s-trending .wdr-colhead .ch-shop{width:60.5px;margin-right:6px}
}
/* Her combo, same session: tapping the star turns it gold AND says ADDED under
   it. ⚠️ The caption is rendered ONLY on starred rows, which is what keeps the
   word off the ~90 she has not tapped. MEASURED COST, and it is the honest
   trade she accepted: a starred row grows 44px -> 53px, so rows BELOW it shift
   9px on tap. The alternative (reserving the line on all 100 rows so nothing
   moves) cost +891px of page, ~14% more scrolling. ▶ The 9px is benign because
   the caption grows INSIDE the tapped row: that row keeps its top edge and
   nothing moves under her thumb. Don't confuse this with the how-to collapse,
   which moved ~100px right where she was reading and was deliberately deferred
   to the next visit. `height:auto` is required -- .wdr-star is otherwise a fixed
   30px box and the caption would overflow it invisibly. */
#s-wardrobe .wdr-star.on,#s-trending .wdr-star.on{flex-direction:column;height:auto;gap:1px}
#s-wardrobe .wdr-added,#s-trending .wdr-added{font:700 8px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a7f66;display:block}
/* align-items:flex-start added 2026-09-06. A flex row stretches every child
   to the tallest by default, and since the feed's cards carry a PHOTO while
   the AI's carry none, every AI card was being stretched to a photo's height
   with justify-content:space-between pushing its button to the bottom -- a
   card that was almost entirely empty white. Cath saw it on her own phone.
   Letting each card take its natural height makes the row slightly ragged,
   which is normal in a horizontal carousel and far better than a blank. */
#s-wardrobe .shop-grid.hscroll,#s-trending .shop-grid.hscroll{display:flex;align-items:flex-start;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#s-wardrobe .shop-grid.hscroll::-webkit-scrollbar,#s-trending .shop-grid.hscroll::-webkit-scrollbar{display:none}
#s-wardrobe .shop-grid.hscroll .shop-card,#s-trending .shop-grid.hscroll .shop-card{flex:0 0 128px;min-height:auto;border-radius:0}
/* 🚨 "BLOOMINGDA / LES" (Cath, 2026-09-06). A carousel card is 128px wide with
   1rem of padding, so the store line has 96px to live in -- and BLOOMINGDALES at
   12px uppercase with .06em of letter-spacing measures ~107px, so it could only
   ever break mid-word. The lever is the TEXT, not the break rule: at 11px with
   almost no tracking a 14-character store name fits inside 96px with room over.
   ⚠️ SCOPED TO THE CAROUSEL. The same class on the roomier grid surfaces keeps
   its original size -- nothing there was ever too narrow. */
#s-wardrobe .shop-grid.hscroll .shop-item-store,#s-trending .shop-grid.hscroll .shop-item-store{font-size:11px;letter-spacing:.01em}
/* ▶ THE EMPTY BEIGE BELOW THE SHORT CARDS (her screenshots 1 and 2, same day).
   A horizontal flex row is as tall as its TALLEST card, so a photo-carrying feed
   card whose name ran to nine lines left ~650px of empty container under the
   photo-less AI cards once she swiped past it. align-items:flex-start already
   stops the cards STRETCHING (2026-09-06); this bounds what makes one card tall
   in the first place. Most of that height was the untidied merchant name, now
   cut by _feedName() -- this is the belt to its braces, and it applies ONLY to
   catalog cards, whose "Shop it" opens the exact product page so the full name
   is never the promise. ⚠️ DELIBERATELY NOT APPLIED TO AI CARDS: there the name
   IS the search and the promise, so it must never be clipped. */
#s-wardrobe .shop-grid.hscroll .wdr-curated .shop-item-name,#s-trending .shop-grid.hscroll .wdr-curated .shop-item-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
/* Swipe hint + "thinking" loader + one-time nudge */
#s-wardrobe .wdr-swipe-hint,#s-trending .wdr-swipe-hint{text-align:right;font:600 11px/1 'Jost',sans-serif;color:#9a9a9a;letter-spacing:.03em;margin:0 4px 6px}
/* The Refine nudge under "Tops in your favorite colors" Ideas, 2026-08-12,
   her ask -- quiet, sits AFTER the 4 real ideas so it never gates shopping,
   readable size per the same lesson as the Trending card fix this session. */
#s-wardrobe .wdr-colorhint,#s-trending .wdr-colorhint{font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;text-align:center;max-width:280px;margin:12px auto 0;text-wrap:balance}
/* Her ask: green instead of gold, to signal the Refine page it links to.
   Not a literal reuse -- every established Refine green (#2FA35C link,
   #4CAF50 pip, #2e7d32 chip text, #3a9b3f checkmark) measured under 4.5:1
   against THIS card's cream background (best was 4.47, just short). #256b2b
   is a modest darkening of the chip-text green, same family, 5.69:1. */
#s-wardrobe .wdr-colorhint span,#s-trending .wdr-colorhint span{font-style:normal;color:#256b2b;font-weight:600;cursor:pointer}
/* THE COLD-VISITOR QUIZ INVITATION, 2026-09-02, her three edits from the live
   page. All THREE rules are scoped to .wdr-qi, never to .wdr-colorhint, which
   the Refine colour hint shares -- that one stays a bare whisper.
   ⚠️ TWINNED FOR #s-trending like every rule in this block: the invitation
   appears on BOTH tabs, and a #s-wardrobe-only rule renders it unstyled on
   /trending (the 2026-09-01 lesson -- a class carries its styling only inside
   the scope that defines it).
   ⚠️ The arrow rule wins on specificity (id + 2 classes) over the .wdr-see-ar
   block rule above, so it flips block -> inline WITHOUT touching the chip's
   own arrow. Do not "tidy" it into the shared rule. */
#s-wardrobe .wdr-qi-star,#s-trending .wdr-qi-star{width:13px;height:13px;display:inline-block;vertical-align:-1.5px;margin-right:5px}
#s-wardrobe .wdr-qi span,#s-trending .wdr-qi span{display:block;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;white-space:nowrap}
#s-wardrobe .wdr-qi .wdr-see-ar,#s-trending .wdr-qi .wdr-see-ar{display:inline-block;width:12px;height:12px;vertical-align:-1.5px;margin-left:3px}
#s-wardrobe .wdr-loading,#s-trending .wdr-loading{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 0 12px}
#s-wardrobe .wdr-load-star,#s-trending .wdr-load-star{width:34px;height:34px;animation:spin 1.7s linear infinite reverse;transform-origin:50% 50%}
#s-wardrobe .wdr-load-txt,#s-trending .wdr-load-txt{font:600 12.5px/1.3 'Jost',sans-serif;color:#8a6a1e;text-align:center}
@media(prefers-reduced-motion:reduce){#s-wardrobe .wdr-load-star,#s-trending .wdr-load-star{animation:none}}
#s-wardrobe .wdr-add,#s-trending .wdr-add{display:flex;align-items:center;gap:8px;margin:14px 2px 4px;padding:11px 12px;background:#fff;border:2px dashed #4a453c}
#s-wardrobe .wdr-add input,#s-trending .wdr-add input{border:none;outline:none;font:400 14.5px 'Jost',sans-serif;flex:1;color:#2b2620;background:transparent}
/* ⚠️ Her catch 2026-08-11, and it was the WORST-CONTRAST text on the page:
   #a39c8a on the white input measures 2.73:1, well under the 4.5:1 AA bar and
   below even the 3.79:1 the column labels had. A placeholder is an INVITATION --
   it is the only thing telling her she can add her own pieces at all, so it is
   the last text that should fade out. #6b6355 is 5.93:1, and 13.5 -> 14.5px
   matches the item names it sits under. It still reads as a placeholder because
   entered text is #2b2620 (much darker); the two are not confusable. */
#s-wardrobe .wdr-add input::placeholder,#s-trending .wdr-add input::placeholder{color:#6b6355}
#s-wardrobe .wdr-add .plus,#s-trending .wdr-add .plus{font-size:16px;color:#1a1a1a;font-weight:700}
#s-wardrobe .wdr-trend-note,#s-trending .wdr-trend-note{font:500 15.5px/1.5 'Lora',Georgia,serif;font-style:normal;color:#4a463e;margin:2px 0 16px;text-align:center;text-wrap:balance}
#s-wardrobe .wdr-trend-by,#s-trending .wdr-trend-by{display:flex;align-items:center;justify-content:center;gap:7px;font:700 11px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#0FA6B6;margin-bottom:10px}
/* cancels the trailing letter-space -- see the .dc-tagline note */
#s-wardrobe .wdr-trend-by span,#s-trending .wdr-trend-by span{margin-right:-.2em}
/* B, her pick 2026-08-13: My List's how-to card opens with the SAME header
   construction as Trending's CURATED BY CATHERINE (class reuse: identical
   tilts, gap, trailing-tracking fix). Hidden with the full how-to once the
   card collapses to its brief line. Her closing line under the trend cards
   bookends both tabs (the wdr-trend-end rule below, her voice spec). */
#s-wardrobe .wdr-howto .wdr-trend-by,#s-trending .wdr-howto .wdr-trend-by{margin:1px 0 9px}
#s-wardrobe .wdr-trend-end,#s-trending .wdr-trend-end{font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;text-align:center;margin:18px auto 6px;max-width:300px;text-wrap:balance}
/* Catherine's signature hearts flank her curation (2026-08-09); teal lettering stays */
/* Inline SVG, not a text glyph -- see the .dc-tagline note: a bare U+2665
   renders as the red emoji on iOS. */
#s-wardrobe .wdr-trend-by .pinkheart,#s-trending .wdr-trend-by .pinkheart{width:14px;height:14px;flex:none}
#s-wardrobe .wdr-tstack,#s-trending .wdr-tstack{display:flex;flex-direction:column;gap:12px;margin-top:8px}
/* Cath's live catch 2026-08-12: the italic note read too small/light, and the
   "See ideas" link was bare text on the left, inconsistent with My List's
   boxed .wdr-see chip sitting on the right of each row. Fixed both: text-align
   right on the card (with title/note explicitly pulled back to the left) puts
   .tlf at the right edge, and it now carries the exact same chip treatment as
   .wdr-see (border/padding/background), not just a color match. */
#s-wardrobe .wdr-tcard,#s-trending .wdr-tcard{background:#F5EFE2;border:1px solid #1a1a1a;padding:16px 16px 14px;min-width:0;text-align:right}
#s-wardrobe .wdr-tcard .ttf,#s-trending .wdr-tcard .ttf{font:600 15.5px/1.3 'Jost',sans-serif;color:#1a1a1a;margin-bottom:6px;text-align:left}
#s-wardrobe .wdr-tcard .tnf,#s-trending .wdr-tcard .tnf{font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;margin-bottom:12px;text-align:left}
#s-wardrobe .wdr-tcard .tlf,#s-trending .wdr-tcard .tlf{display:inline-flex;align-items:center;gap:3px;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#8a6a1e;cursor:pointer;padding:5px 10px;border:1px solid #D8A52E;border-radius:2px;background:#fff;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-foot,#s-trending .wdr-foot{text-align:center;margin-top:26px}
/* Bottom-of-list "What's Trending" horizontal teaser (2nd entry point) */
/* A real page break before What's Trending, so the secondary offer stops
   reading as part of the main list CTA. Uses the app's curtain stripe
   (Discover backdrop, Mall awning, the keepsakes) rather than a new device;
   the -3px runs it out to the inner edge of the stitched frame and stops there,
   so the stitch stays unbroken (measured: 3px at every width). */
#s-wardrobe .wdr-teaser,#s-trending .wdr-teaser{margin-top:0;padding-top:2px}
/* The stripe tile is itself mirror-symmetric (cream | black | cream) and is
   centred, so the band reads the same from either end instead of the repeat
   starting at the left edge and landing mid-stripe on the right. */
#s-wardrobe .wdr-teaser::before,#s-trending .wdr-teaser::before{content:"";display:block;height:26px;margin:26px -3px 22px;background-color:#f4efe5;background-image:linear-gradient(90deg,#f4efe5 0 10px,#17171c 10px 30px,#f4efe5 30px 40px);background-size:40px 100%;background-repeat:repeat-x;background-position:center}
#s-wardrobe .wdr-teaser-t,#s-trending .wdr-teaser-t{text-align:center;font:400 22px/1.1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.3px #1a1a1a;margin-bottom:4px}
#s-wardrobe .wdr-tt-scroll,#s-trending .wdr-tt-scroll{display:flex;overflow-x:auto;gap:12px;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#s-wardrobe .wdr-tt-scroll::-webkit-scrollbar,#s-trending .wdr-tt-scroll::-webkit-scrollbar{display:none}
#s-wardrobe .wdr-tt-card,#s-trending .wdr-tt-card{flex:0 0 205px;background:#F5EFE2;border:1px solid #1a1a1a;padding:15px 15px 13px;display:flex;flex-direction:column}
#s-wardrobe .wdr-tt-n,#s-trending .wdr-tt-n{font:600 15px/1.3 'Jost',sans-serif;color:#1a1a1a;margin-bottom:6px}
/* 2026-08-12: same readability fix as the Trending tab's .tnf/.tlf, applied to
   this narrower 205px teaser card. .wdr-tt-card is a column flex, not plain
   block flow, so the chip's right-alignment comes from align-self:flex-end,
   not text-align (which would only affect inline content, not the item's own
   position on the cross axis). */
#s-wardrobe .wdr-tt-note,#s-trending .wdr-tt-note{font:400 15.5px/1.45 'Lora',Georgia,serif;color:#4a463e;margin-bottom:11px;flex:1}
#s-wardrobe .wdr-tt-see,#s-trending .wdr-tt-see{align-self:flex-end;display:inline-flex;align-items:center;gap:3px;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#8a6a1e;cursor:pointer;padding:5px 9px;border:1px solid #D8A52E;border-radius:2px;background:#fff;-webkit-tap-highlight-color:transparent}
#s-wardrobe .wdr-tt-all,#s-trending .wdr-tt-all{flex:0 0 132px;align-items:center;justify-content:center;text-align:center;background:#1a1a1a;color:#EACD68;font:600 12.5px/1.3 'Jost',sans-serif;cursor:pointer;padding:15px 12px}
#s-wardrobe .wdr-teaser-ideas,#s-trending .wdr-teaser-ideas{margin-top:6px}
/* stitched-tag topper for the Welcome Back / Style Portrait entry hub (matches the room) */
#s-wb .tag-topper,#s-res .tag-topper{position:relative;text-align:center;height:auto;margin-bottom:8px}
/* five gold stars above the BUILD tag (matches the outfit-results Build room) */
/* five gold stars in a stitched "sewn-on" patch above the BUILD heading (matches the outfit-results Build room) */
#s-wb .hub-wardrobe .tag-stars,#s-res .hub-wardrobe .tag-stars{width:-moz-fit-content;width:fit-content;margin:0 auto 3px;padding:4px 15px;display:flex;gap:5px;align-items:center;justify-content:center;background-color:#F7F1E1;background-image:repeating-linear-gradient(90deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(90deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,#4a453c 0 6px,transparent 6px 10px);background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
#s-wb .hub-wardrobe .tag-stars svg,#s-res .hub-wardrobe .tag-stars svg{width:20px;height:20px;display:block;fill:#E6C24E}
#s-wb .tag-topper span,#s-res .tag-topper span{position:relative;display:inline-block;padding:7px 16px 6px;font:700 13px/1 'Jost',sans-serif;letter-spacing:.2em;color:#151515;box-shadow:0 3px 6px rgba(0,0,0,.18);background-color:#F7F1E1;background-image:repeating-linear-gradient(90deg,#4a453c 0 5px,transparent 5px 9px),repeating-linear-gradient(90deg,#4a453c 0 5px,transparent 5px 9px),repeating-linear-gradient(0deg,#4a453c 0 5px,transparent 5px 9px),repeating-linear-gradient(0deg,#4a453c 0 5px,transparent 5px 9px);background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
.ss.quiz-mirror .tag{display:none}
.ss.chat-mirror,.ss.dream-mirror{background:
  repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px) padding-box,
  repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px) padding-box,
  linear-gradient(#FBFAF7,#FBFAF7) padding-box,
  linear-gradient(#1a1a1a,#1a1a1a) border-box;
  border-width:8px;box-shadow:inset 0 0 0 8px #9AA0A6,0 8px 44px rgba(0,0,0,.16)}
#s-quiz{position:relative}
#s-quiz .q-cat{display:flex;align-items:center;gap:11px;font:700 12px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#C8971E;margin:0 0 11px}
#s-quiz .q-cat::before{content:"\2605";color:#C8971E;font-size:11px}
#s-quiz .q-cat::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#E0C36E,rgba(224,195,110,0))}
#s-quiz .q-tit{font-family:'DM Sans',sans-serif;font-size:21px;font-weight:600;color:#1c1a16;line-height:1.38;margin-bottom:1.4rem;text-wrap:pretty}
#s-quiz .q-card{position:relative;padding:4px 2px 2px;margin-bottom:4.6rem}
#s-quiz .q-lbls{display:flex;justify-content:space-between;gap:12px;margin-bottom:.85rem}
#s-quiz .q-lbl{font:700 15px/1.2 'Jost',sans-serif;color:#26221c;text-transform:uppercase;letter-spacing:.05em;max-width:44%}
#s-quiz .q-lbl.r{text-align:right}
#s-quiz .q-hint{text-align:center;font-family:'DM Sans',sans-serif;font-size:18px;font-style:normal;font-weight:600;letter-spacing:.01em;color:#1c1a16;margin-bottom:1rem;min-height:26px}
#s-quiz input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(180deg,#FBFCFD 0%,#CBD0D4 22%,#868D93 46%,#EEF0F2 52%,#A1A7AD 62%,#5E646A 86%,#868C92 100%);box-shadow:0 4px 9px -5px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.9)}
#s-quiz input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#F6E9B4,#DFB955 50%,#C0932C);cursor:pointer;border:none;box-shadow:0 0 0 2px #9aa0a6,0 4px 10px -3px rgba(0,0,0,.45);transition:width .13s ease,height .13s ease,box-shadow .13s ease}
#s-quiz input[type=range]:active::-webkit-slider-thumb{width:42px;height:42px;box-shadow:0 0 0 2px #9aa0a6,0 6px 15px -3px rgba(0,0,0,.5)}
#s-quiz input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#F6E9B4,#DFB955 50%,#C0932C);cursor:pointer;border:none;box-shadow:0 0 0 2px #9aa0a6,0 4px 10px -3px rgba(0,0,0,.45);transition:width .13s ease,height .13s ease}
#s-quiz input[type=range]:active::-moz-range-thumb{width:42px;height:42px}
@media (prefers-reduced-motion:reduce){#s-quiz input[type=range]::-webkit-slider-thumb,#s-quiz input[type=range]::-moz-range-thumb{transition:none}}
#s-quiz .q-back{width:100%;padding:14px;border-radius:3px;font:600 12.5px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:#fff;color:#3a352e;border:1.5px solid #8f8a80;margin-top:9px}
#s-quiz .q-back:hover{background:#f7f6f3;color:#1c1a16;border-color:#5a554c}
#s-quiz .q-cta{display:block;width:100%;border:4px solid transparent;border-radius:3px;cursor:pointer;margin-top:4px;
  background:linear-gradient(180deg,#2b2523,#1c1615) padding-box,linear-gradient(135deg,#F3E6B8,#DFB94E 40%,#B8891F 70%,#E8CE7E) border-box;
  color:#fff;text-align:center;font:700 14px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:16px;
  box-shadow:0 12px 22px -14px rgba(0,0,0,.5),inset 0 0 0 2px #9aa1a7}
#s-quiz .q-cta:hover{filter:brightness(1.08)}
#s-quiz .q-cta:active{transform:scale(.99)}
.btn-pink{width:100%;padding:15px;border-radius:2px;font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:none;background:#1a1a1a;color:#fff;transition:opacity 0.2s;font-family:'DM Sans',sans-serif;margin-top:8px}
.btn-pink:hover{opacity:0.88}
.btn-pink:active{transform:scale(0.98)}
.btn-teal{width:100%;padding:15px;border-radius:40px;font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:1.5px solid #1a1a1a;background:#fff;color:#1a1a1a;transition:opacity 0.2s;font-family:'DM Sans',sans-serif;margin-top:8px}
.btn-teal:hover{opacity:0.88}
.btn-teal:active{transform:scale(0.98)}
.btn-gold{width:100%;padding:14px;border-radius:40px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;background:#fff;color:#1a1a1a;border:1.5px solid #1a1a1a;margin-top:8px;font-family:'DM Sans',sans-serif;transition:opacity 0.2s}
.btn-gold:hover{opacity:0.88}

.load-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:4rem 1rem;text-align:center}
.load-spin{width:100px;height:100px;animation:spin 2s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.load-t{font-family:'DM Sans',sans-serif;font-size:18px;color:#333;font-style:italic;font-weight:500}

.res-hdr{text-align:center;margin-bottom:0.15rem}
.res-name{font-family:'DM Serif Display',Georgia,serif;font-size:26px;font-weight:400;color:#D4AF37;margin:0 0 0.1rem}
.res-para{font-size:18px;color:#1a1a1a;line-height:1.75;max-width:420px;margin:0 auto 1.25rem;text-align:center;font-family:'DM Sans',sans-serif;font-weight:500}
.flav{margin-bottom:1.75rem;text-align:center}
.flav-lbl{font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#555;margin-bottom:8px;font-weight:600}
.flav-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.flav-tag{font-size:14px;font-weight:700;padding:6px 18px;border-radius:20px;border:1.5px solid #D4AF37;color:#1a1a1a;background:#fff}
.fp{margin-bottom:1.75rem}
.fp-lbl{font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#555;margin-bottom:14px;text-align:center;font-weight:600}
.fp-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fp-name{font-size:11px;color:#333;width:85px;text-align:right;flex-shrink:0;text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
.fp-track{flex:1;height:3px;background:#ebebeb;border-radius:2px;position:relative}
.fp-dot{width:11px;height:11px;border-radius:50%;background:#D4AF37;position:absolute;top:-4px}
.fp-left,.fp-right{font-size:9px;color:#666;letter-spacing:0.04em;text-transform:uppercase;position:absolute;top:7px;font-weight:600}
.fp-left{left:0}.fp-right{right:0}
.retake{display:block;width:100%;text-align:center;font-size:13px;color:#555;font-weight:500;text-decoration:underline;letter-spacing:0.06em;text-transform:uppercase;margin-top:1rem;cursor:pointer;border:none;background:none}
.top-back-wrap{text-align:right;margin:-0.25rem 0 0.35rem}
.top-back{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:500;color:#666;cursor:pointer;padding:4px 2px;letter-spacing:0.02em}
.top-back:hover{color:#1a1a1a}
.wb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0.85rem;padding:0.5rem 1rem 0.5rem}
.wb-name{font-family:'DM Serif Display',Georgia,serif;font-size:24px;font-weight:400;color:#D4AF37}
.wb-msg{font-size:17px;color:#333;line-height:1.6;font-weight:500}
.stay-section{margin:1.5rem 0;text-align:center}
.stay-title{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:4px}
.stay-sub{font-size:14px;color:#444;margin-bottom:10px;font-weight:500}
.stay-form{display:flex;flex-direction:column;align-items:center;gap:8px}
.stay-input{border:1.5px solid #e8e8e8;border-radius:2px;padding:12px 18px;font-size:15px;width:100%;max-width:280px;text-align:center;background:#fff;color:#1a1a1a;font-family:'DM Sans',sans-serif}
.stay-input:focus{outline:none;border-color:#C8A060}
.stay-input::placeholder{color:#9a9a9a}
.stay-success{font-size:14px;color:#B08830;font-weight:500}
.stay-skip{font-size:11px;color:#999;cursor:pointer;margin-top:4px;text-decoration:underline}
.chat-wrap{display:flex;flex-direction:column;height:86vh;max-height:800px}
.chat-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ebebeb;margin-bottom:10px}
.chat-hdr-left{display:flex;align-items:center;gap:8px}
.chat-hdr-star{width:42px;height:42px}
.chat-hdr-title{font:400 19px/1.1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.4px #1a1a1a;display:inline-block;position:relative;padding-bottom:8px}
.chat-hdr-title::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2.5px;border-radius:0;background:#E0B84C}
.chat-hdr-title::before{content:"";position:absolute;bottom:-1px;left:58%;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
.chat-hdr-sub{font:500 10px/1.4 'Jost',sans-serif;color:#8a6a17;letter-spacing:0;margin-top:2px}
.chat-hdr-sub .s2{font-weight:400;opacity:.72}
.chat-close{font:500 12.5px/1 'DM Sans',sans-serif;color:#666;cursor:pointer;background:none;border:none;white-space:nowrap;padding:4px 2px;letter-spacing:.02em}
.chat-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:85%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.6;font-family:'DM Sans',sans-serif}
.chat-msg.bot{background:#f5f3ef;color:#1a1a1a;align-self:flex-start;border:1.5px solid #EC4899;border-bottom-left-radius:4px}
.chat-msg.user{background:#242019;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg a{color:#D4AF37;font-weight:600;text-decoration:underline}
.chat-msg.bot a{color:#B08830}
.chat-typing{align-self:flex-start;padding:12px 16px;background:#f5f3ef;border-radius:16px;border-bottom-left-radius:4px;font-size:14px;color:#6f6f6f;font-style:italic}
.chat-input-wrap{display:flex;gap:6px;padding:10px 4px 0;border-top:1px solid #ebebeb;margin-top:auto;max-width:100%;box-sizing:border-box}
.chat-input{flex:1;min-width:0;border:1.5px solid #cfd3d8;border-radius:4px;padding:12px 14px;font-size:15px;font-family:'DM Sans',sans-serif;color:#1a1a1a;background:#fff;outline:none}
.chat-input:focus{border-color:#1a1a1a}
.chat-input:focus{border-color:#1a1a1a}
.chat-input::placeholder{color:#9a9a9a}
.chat-send{width:46px;height:46px;border-radius:4px;background:#fff;border:1.5px solid #1a1a1a;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:filter 0.2s}
.chat-send{transition:filter 0.2s,opacity 0.2s}
.chat-send:hover{filter:brightness(1.06)}
.chat-send:disabled{opacity:0.4;cursor:default}
.chat-input:placeholder-shown~.chat-send{opacity:.4}
.chat-photo-btn{width:46px;height:46px;border-radius:4px;background:#fff;border:1.5px solid #1a1a1a;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;font-size:22px;line-height:1;padding:0}
.chat-photo-btn:hover{background:#f3f1ec}
.chat-photo-preview{display:flex;align-items:center;gap:10px;padding:8px 0;margin-top:4px}
.chat-msg-img{max-width:230px;border-radius:10px;margin-bottom:6px;cursor:zoom-in}
/* Restored history whose photo is no longer stored full-size: a quiet chip. */
.chat-imgph{display:inline-block;font-size:11px;color:#8a8a8a;background:#f0ede7;border:1px solid #e2ddd2;border-radius:8px;padding:4px 9px;margin-bottom:6px}
/* The honest "that got cut off" note under an interrupted streamed reply.
   #6e6e6e at 11px measures ≥4.5:1 on the chat's white background. */
.chat-cutoff{align-self:flex-start;font-size:11px;color:#6e6e6e;font-style:italic;padding:0 6px;margin:-2px 0 4px}
.chat-resume{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 2px 4px}
.chat-resume span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a9a293;white-space:nowrap;font-family:'DM Sans',sans-serif}
.chat-resume::before,.chat-resume::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#e0dccf)}
.chat-resume::after{background:linear-gradient(270deg,transparent,#e0dccf)}
.chat-suggestions{padding:8px 0}
.chat-sug-label{font-size:11px;color:#777;margin-bottom:6px;font-weight:500}
.chat-sug-chips{display:flex;flex-wrap:wrap;gap:6px}
.chat-chip{padding:8px 14px;border-radius:20px;border:1.5px solid #ebebeb;background:#fff;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:#666;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.chat-chip:hover{border-color:#1a1a1a;color:#1a1a1a}
/* ⭐ ONE LINE, NOT A PARAGRAPH — her ask 2026-09-09, "the chat space is very
   crowded". The full promise is one tap away and every word of it is still
   there; what changed is that it no longer occupies a third of her screen
   under every single answer.
   ⚠️ Contrast is UNCHANGED at #8a8a8a. The disclosure lesson applies here too:
   a notice nobody can read is not a notice, and making it quieter to save space
   would be solving the wrong half. */
/* ⚠️ THE THREE FOOTER LINES ARE DELIBERATELY TIGHT — her ask, 2026-09-09:
   "those 3 lines appear to be double spaced. Can we make them much tighter
   together to save space and give more room to the chatting." ▶ Measured: they
   cost ~68px of a phone screen and now cost ~51px. The line-height is 1.25 on
   all three ON PURPOSE; do not restore 1.5 "for readability" -- the font sizes
   and the 4.6:1 contrast are what make these legible, and they are untouched. */
.chat-privacy{font-size:11px;color:#8a8a8a;text-align:center;padding:0;line-height:1.25}
.chat-privacy summary{cursor:pointer;list-style:none;display:inline-block}
.chat-privacy summary::-webkit-details-marker{display:none}
/* ▶ THE ARROW IS SIZED SEPARATELY FROM THE WORDS, her catch 2026-09-09:
   "make the arrow on private to you larger (right now it is so tiny cannot see
   it)". It inherited 11px and was invisible. 15px, bolder and darker than the
   grey text, because it is the only thing on the line saying "this opens". */
.chat-privacy summary::after{content:'\203A';display:inline-block;font-size:15px;font-weight:600;color:#6e6e6e;line-height:1;margin-left:5px;vertical-align:-1px;transition:transform .15s}
.chat-privacy[open] summary::after{transform:rotate(90deg)}
.chat-privacy[open]{padding-bottom:4px}
/* Sits directly under the privacy line -- the stylist links to stores inside her
   answers, so the disclosure belongs on this screen too. Deliberately NOT quieter
   than the line above it: this is a legal notice that has to be legible, and the
   first colour tried (#9a9a9a) measured 2.5:1 against the chat background, which
   fails. #6e6e6e matches .shop-disclosure everywhere else and measures ~5:1. */
.chat-disclosure{font-size:11px;color:#6e6e6e;text-align:center;padding:0;line-height:1.25}
/* ⚠️ THE VERTICAL PADDING STOPS AT 1px AND THAT IS A FLOOR, NOT A LEFTOVER.
   This is a BUTTON, and its padding is its tap target. At 0 it is ~14px tall,
   which is under every thumb guideline and worst for exactly the women this
   app is built to serve (her audience runs to 80). ▶ Tighten the MARGINS
   around it, never this. */
.chat-fresh{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:11.5px;line-height:1.25;color:#8a8a8a;text-decoration:underline;cursor:pointer;padding:1px 4px;transition:color .2s}
.chat-fresh:hover{color:#EC4899}
#chatRefineHint button{border-radius:4px!important;border:1.5px solid #1a1a1a!important;color:#1a1a1a!important}
.btn-chat{width:100%;padding:15px;border-radius:40px;font-size:14px;font-weight:600;letter-spacing:0.06em;cursor:pointer;border:1.5px solid #1a1a1a;background:#fff;color:#1a1a1a;transition:opacity 0.2s;font-family:'DM Sans',sans-serif;margin-top:8px;text-transform:uppercase}
.btn-chat:hover{opacity:0.88}
.btn-yellow{width:100%;padding:14px;border-radius:40px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;background:#fff;color:#1a1a1a;border:1.5px solid #1a1a1a;margin-top:8px;font-family:'DM Sans',sans-serif;transition:opacity 0.2s}
.btn-yellow:hover{opacity:0.88}
.btn-outline{width:100%;padding:14px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;background:none;color:#1a1a1a;border:2px solid #1a1a1a;margin-top:8px;font-family:'DM Sans',sans-serif;transition:opacity 0.2s}
.btn-outline:hover{opacity:0.7}
.act-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:340px;margin:0;padding:15px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .2s,border-color .2s}
.act-btn svg{width:18px;height:18px;flex-shrink:0}
.act-primary{background:#1a1a1a;color:#fff;border:none}
.act-primary:hover{opacity:.85}
.act-primary:active{transform:scale(.99)}
.act-2{background:#fff;color:#1a1a1a;border:1px solid #e2ddd2}
.act-2:hover{border-color:#c2b48f}
.act-pair{display:flex;gap:10px;justify-content:center;width:100%;max-width:340px;margin:8px auto 0}
.act-pair .act-btn{flex:1;flex-direction:column;max-width:none;margin:0;padding:14px 6px;font-size:10.5px;letter-spacing:0.02em;gap:7px;line-height:1.25}
.act-pair .act-btn svg{width:19px;height:19px}
#s-pref .top-back-wrap,#s-pref-done .top-back-wrap{margin-right:-16px}
/* The screen itself now carries the -16px pull toward the frame (see .wdr-card
   above), so the Back button no longer adds its own or it clips off the edge. */
#s-wardrobe .top-back-wrap,#s-trending .top-back-wrap{margin-right:0}
#s-wishlist .top-back-wrap{position:absolute;top:6px;right:-14px;margin:0;z-index:6}
#s-dream .top-back-wrap,#s-finds .top-back-wrap{margin-right:-20px;margin-top:-0.7rem}
#s-shopstyle .top-back-wrap{margin-right:-20px;margin-top:-0.1rem}
#s-chat{position:relative}
#s-chat .chat-close{position:absolute;top:2px;right:-11px;z-index:6}
#s-pref .pref-hdr{text-align:center;margin:8px 0 16px}
#s-pref .pref-page-title{display:flex;align-items:center;justify-content:center;gap:6px;font:600 22px/1.2 'Jost',sans-serif;color:#1a1a1a;letter-spacing:0;margin:13px -10px 0;white-space:nowrap}
#s-pref .pref-t-star{width:22px;height:22px;flex:none}
@media (max-width:384px){#s-pref .pref-page-title{font-size:16px}#s-pref .pref-t-star{width:20px;height:20px}}
@media (max-width:352px){#s-pref .pref-page-title{font-size:14px;margin-left:-6px;margin-right:-6px}#s-pref .pref-t-star{width:17px;height:17px}}
.pref-mast{display:flex;align-items:center;justify-content:space-between;margin:17px -13px 0.7rem -11px}
#s-pref-done .pref-mast{margin-bottom:0}
#s-pref-done{margin-bottom:-13px}
.pref-mast .top-back{position:absolute;top:5px;right:13px;padding:4px 0;z-index:20}
.pref-word{font:400 19px/1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.35px #1a1a1a;white-space:nowrap;display:inline-block;position:relative;padding-bottom:7px}
.pref-word .st{color:#1a1a1a;-webkit-text-stroke:.35px #1a1a1a}
.pref-word::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:#E0B84C}
.pref-word::before{content:"";position:absolute;bottom:-1.5px;left:50%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
#s-pref .pref-qcard{display:block;max-width:322px;margin:6px auto 2px;padding:16px 20px 19px;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border:1px solid #e4d9bf;box-shadow:0 5px 14px -9px rgba(120,90,20,.3),inset 0 0 0 2px #fff;border-radius:2px}
#s-pref .pref-philo{position:relative;display:inline-block;font:normal 600 19px/1.45 'Lora',serif;color:#35302a;max-width:300px;padding-bottom:14px;min-height:40px;text-wrap:balance}
#s-pref .pref-philo::after{content:"";position:absolute;left:32%;right:32%;bottom:4px;height:2px;background:#E0B84C}
#s-pref .pref-philo::before{content:"";position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#F6E9B4,#DFB955 55%,#C0932C);z-index:1}
.pref-title{display:flex;align-items:center;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;color:#1a1a1a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.pref-title::before{content:"";flex:none;width:20px;height:20px;margin-right:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='42%25' cy='36%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23FFFCEF'/%3E%3Cstop offset='.4' stop-color='%23F9E5A0'/%3E%3Cstop offset='.75' stop-color='%23F0CB5E'/%3E%3Cstop offset='1' stop-color='%23E6B845'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%23B7BCC2' stroke-width='1.1' stroke-linejoin='round' d='M12 1.6L14.47 8.6L21.89 8.79L15.99 13.3L18.11 20.41L12 16.2L5.89 20.41L8.01 13.3L2.11 8.79L9.53 8.6Z'/%3E%3C/svg%3E") no-repeat center/contain}
.pref-sub{font-size:14px;color:#666;margin-bottom:0.7rem;line-height:1.5}
.pref-note-sm{font-size:12.5px;color:#6f6a63;line-height:1.45;margin-top:8px}
.pref-private{font-size:12.5px;color:#7a7a7a;background:#f6f4ef;border-radius:4px;padding:7px 10px;margin-bottom:0.9rem;line-height:1.45}
.pref-label{font-size:12px;font-weight:700;color:#8a6d1e;margin-bottom:9px;text-transform:uppercase;letter-spacing:0.11em}
.pref-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.25rem}
#s-pref .sizegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:1.25rem}
#s-pref .sizegrid .pref-chip{padding:11px 2px;text-align:center}
.pref-chip{padding:10px 16px;border-radius:2px;border:1px solid #cfc8b8;background:#fff;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#3a352c;cursor:pointer;transition:all 0.15s;user-select:none}
.pref-chip.sel{border:2px solid #4CAF50;background:#eaf5ea;color:#2e7d32;font-weight:600;position:relative;padding:9px 15px}
.pref-chip.sel::after{content:"✓";position:absolute;top:3px;right:6px;font-size:11px;line-height:1;font-weight:800;color:#3a9b3f}
.pref-chip.skip{border-color:#e74c3c;background:#fef5f5;color:#999;text-decoration:line-through}
.pref-never-style.sel,.pref-never-pattern.sel{border:1px solid #a3a7ab;background:#f0f0ef;color:#3a352c;font-weight:600;text-decoration:line-through;position:relative;padding:10px 16px 10px 28px}
.pref-never-style.sel::after,.pref-never-pattern.sel::after{content:none}
.pref-never-style.sel::before,.pref-never-pattern.sel::before{content:"✕";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:#8a8e92}
.color-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.25rem;justify-content:center}
.color-dot{width:44px;height:44px;border-radius:50%;border:2px solid #eee;cursor:pointer;transition:all 0.2s;position:relative}
.color-dot.love{width:54px;height:54px;border:2px solid #eee}
.color-dot.love::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:22px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,0.7),0 0 8px rgba(0,0,0,0.3)}
.color-name{font-size:9px;text-align:center;color:#777;margin-top:2px}
.color-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.color-dot[data-name="Metallics"]{}
.pref-progress{display:flex;gap:6px;justify-content:center;margin-bottom:1.25rem}
.pref-pip{width:9px;height:9px;border-radius:50%;background:#e4ddcd;transition:background .2s}
.pref-pip.active{background:#C8971E}
.pref-pip.done{background:#4CAF50}
.pref-other{width:100%;border:1px solid #cfc8b8;border-radius:2px;padding:12px 16px;font-family:'DM Sans',sans-serif;font-size:14px;color:#1a1a1a;min-height:60px;resize:none;margin-bottom:1rem}
.pref-other:focus{outline:none;border-color:#D4AF37}
.pref-other::placeholder{color:#9a9a9a}
/* Prefs buttons match the Quiz (its twin): warm gold Next, soft outline Back — softer than solid black */
#s-pref #prefNext{border:4px solid transparent;background:linear-gradient(180deg,#2b2523,#1c1615) padding-box,linear-gradient(135deg,#F3E6B8,#DFB94E 40%,#B8891F 70%,#E8CE7E) border-box;color:#fff;box-shadow:0 12px 22px -14px rgba(0,0,0,.5),inset 0 0 0 2px #9aa1a7}
#s-pref #prefNext:hover{opacity:1;filter:brightness(1.08)}
#s-pref #prefBack{background:#fff;color:#3a352e;border:1.5px solid #8f8a80}
#s-pref #prefBack:hover{background:#f7f6f3;color:#1c1a16}
.pref-done{text-align:center;padding:0 1rem 2px}
.pref-done-star{margin:-22px auto 2px;line-height:0}
.pref-done-star svg{width:86px;height:86px;display:inline-block;filter:none}
.pref-done-title{font-family:'DM Serif Display',serif;font-size:23px;font-weight:400;color:#1a1a1a;margin:-8px 0 8px;line-height:1.25}
/* text-wrap:balance is her standing widow lever (the .hm-h1 headline fix,
   reused on the tagline, the wardrobe closing line and the whisper family).
   Her catch on the render: "fun" was straggling alone on a third line.
   ⚠️ balance only works on BLOCK-level text — the lesson from the whisper
   spans, which needed display:block before it took effect. */
.pref-done-sub{font-size:15px;color:#666;margin-bottom:1.5rem;line-height:1.5;text-wrap:balance;max-width:300px;margin-left:auto;margin-right:auto}
/* ⚠️ .hm-cta-seal hangs at top:-24px right:-18px (moved down from -32px
   2026-08-31, her catch: it was crowding "AI" once the .hm-body line grew
   longer that same session — the resting tilt lives in FIVE places, base
   rule plus two animations' keyframes, and all five have to move together
   or the star snaps back to the old tilt the moment either animation runs),
   so the gold star sits ABOVE the button's corner. In prefSavedBlock the
   recap chips give it that room; here the sub is directly above, so the
   clearance has to be explicit or the star lands on her text. Found by
   rendering, not by reading. */
#s-pref-done .pref-shop-now{margin-top:30px}
#s-pref-done .pref-keep{border-top:1px solid #e4ded0;max-width:250px;margin:20px auto 14px;padding-top:16px}
/* ▶ Her catch, 2026-08-15 night: "Privacy Policy ·" sat on one line with a
   lonely "Terms" underneath. The two links are ONE thing and should break as
   one, so the line now breaks after the sentence instead of between them.
   ⚠️ nowrap rather than a hardcoded <br>: where the whole line fits (a wider
   container, a shorter language) it still holds one line. All FOUR copies of
   this sentence carry it — grep "never share your email". Measured: the links
   need ~132px at 12.5px, and the narrowest container here is 250px. */
.priv-links{white-space:nowrap}
#s-pref-done .pref-keep-lbl{font:600 11px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;color:#8a8474;margin-bottom:9px}
#s-pref-done .pref-keep-note{font-size:14px;color:#666;line-height:1.5;text-wrap:balance}
#prefSavedSub{margin-bottom:0.7rem}
.pref-done-acts{display:flex;gap:10px;max-width:280px;margin:12px auto 0}
.pref-done-acts .pda{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 6px;border:1.5px solid #1a1a1a;border-radius:2px;background:#fff;box-shadow:0 8px 18px -12px rgba(0,0,0,.22);font:600 12px/1.25 'DM Sans',sans-serif;letter-spacing:.02em;color:#3a352c;cursor:pointer;transition:filter .15s}
.pref-done-acts .pda:hover{filter:brightness(1.03)}
.pref-done-acts .pda-tile{width:40px;height:40px;border-radius:10px;border:1px solid #17171c;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pref-done-acts .pda-tile svg{width:23px;height:23px}
.pref-done-acts .pda-pink-tile{background:#EC4899;box-shadow:0 3px 8px -3px rgba(236,72,153,.6)}
.pref-done-acts .pda-dark-tile{background:linear-gradient(160deg,#EEF1F4,#CDD3D9 55%,#B4BBC2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.pref-anytime{font-size:12.5px;color:#7a746a;line-height:1.4;margin:12px auto 0;max-width:290px}
.pref-anytime span{color:#2FA35C;text-decoration:underline;cursor:pointer;white-space:nowrap}
/* recap of what she just saved — soft pills, only the sections she filled in */
.pref-recap{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:300px;margin:4px auto 2px}
.pref-recap .prc{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 'Jost',sans-serif;color:#4f4a41;background:#F7F3EA;border:1px solid #E4DAC6;border-radius:20px;padding:8px 13px}
.pref-recap .prc b{color:#1a1a1a;font-weight:700}
.pref-recap .prc .ck{width:13px;height:13px;flex:none}
.pref-recap .prc .sw{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}
#s-shopstyle .ss-shop-hdr{text-align:center;margin:0 0 18px}
/* Her call 2026-08-22: the rotating SHOP_MSGS line belongs to the WAITING
   moment, not to the finished page. It was set before the star started
   spinning and then simply never cleared, so it sat there all visit adding
   clutter above the pieces. The spinner is this same screen wearing
   .thinking, so showing it only then is one rule.
   ⚠️ QUIZ MODE ONLY. In look and wantlist modes that same element says
   "More pieces like the look you shared" / "Everything on your list", which
   NAMES what she is looking at and must survive. */
/* The rotating SHOP_MSGS line belongs to the WAITING moment and stands down once
   the pieces land, her call.
   ⚠️ A LANDED line naming the selection ("A few pieces I pulled for you") was
   built here and REMOVED the same day, hers: "I think that is going to get
   redundant... it might be just obvious to land on it and see what is there,
   especially when we have product photos." She had asked for a line to come
   OUT of this spot an hour earlier and was right that putting a different one
   back was the same clutter. Don't reintroduce it. */
#s-shopstyle:not(.thinking)[data-mode="quiz"] .ss-shop-sub{display:none}
#s-shopstyle:not(.thinking)[data-mode="quiz"] .ss-shop-hdr{margin-bottom:3px}
#s-shopstyle.thinking .ss-shop-logo{font-size:27px}
#s-shopstyle.thinking .ss-shop-logo::before{left:calc(69.4% - 5px)}
#shopLoadMsg{transition:opacity .4s ease;display:block;max-width:310px;margin:0 auto;text-wrap:balance}
#s-shopstyle .ss-shop-title{font-family:'DM Serif Display',serif;font-size:25px;font-weight:400;color:#1a1a1a}
#s-shopstyle .ss-shop-sub{font-size:16px;color:#5f5f5f;margin:-1px auto 0;line-height:1.5;max-width:360px;text-wrap:balance}
/* text-wrap:balance is her standing widow lever: without it "you →" strands on a
   line of its own. The wording is hers, so the line breaks around it rather than
   the words being trimmed to fit. */
#s-shopstyle .ss-shop-talk{display:none;text-align:center;font-size:14px;color:#6e6e6e;margin:22px auto 4px;line-height:1.6;max-width:320px;text-wrap:balance}
#s-shopstyle .ss-shop-talk.on{display:block}
#s-shopstyle .ss-shop-talk span{color:#EC4899;font-weight:600;cursor:pointer;text-decoration:underline}
/* THE ASK. Nothing here is a new language: the sentence is the light-paper voice
   rule (Lora UPRIGHT 15.5px #4a463e, no italics), the box is the .wl-add input she
   approved on Your Wishlist, and the chips are the squared gold .wdr-see chip.
   ⚠️ Every selector is scoped #s-shopstyle on purpose — .sa-* names are new, but
   the screen scope keeps a future reuse of these classes from leaking here. */
/* Tightened 2026-08-22, her call. The PADDING on .sa-vox is untouched: it is the
   43px tap target for the 18 to 80 audience, and shrinking it to buy white space
   would trade a real thing for a cosmetic one. The MARGINS around it moved. */
#s-shopstyle #ssAsk{margin:3px auto 2px;max-width:340px;padding:0 14px}
/* HER PICK B, 2026-08-22. The box used to lead the page, so the first thing she
   read was a DEMAND, and it competed with the six pieces for the same moment.
   Her own description puts them the other way round: enjoy what your stylist
   pulled, THEN hunt for the one thing you came in for. So the ask collapses to
   one line and the box opens on tap.
   ⚠️ IT STAYS NAMED AT THE TOP, and that is the whole reason B beat moving the
   box below the pieces: three of the four testers arrived already KNOWING what
   they wanted, which is why this box exists at all. Hiding it under six cards
   would make exactly those women scroll past everything. A named line is
   findable (her mother's lesson); a box is merely loud.
   ⚠️ It is a real <button>, not a styled div: it must be reachable by keyboard
   and announced as a control, and anything that looks tappable here must BE
   tappable (the A2HS lesson, pointed the other way). */
/* ⚠️ The negative side margins eat #ssAsk's own 14px padding, so the LINE gets
   the full width while the BOX keeps its inset. Without them 17.5px wraps at
   375px specifically, which looks like a bug and is not: the <=374px rule
   already trims that padding, so 360 has a WIDER container than 375. Measured. */
/* 🚨 HER PICK D, 2026-08-22, AND THE MEASUREMENT THAT PRODUCED IT. She tested on
   her own phone and the CLOSED line wrapped to two lines while the OPEN one held
   one. Her screenshots decoded it exactly: iPhone 15, effective viewport ~375px
   (the ink in her own pixels spans 65.5% of the screen, and 245.9 / 0.655 = 375).
   ▶▶ At 375 the closed line needed 265.9px of an available 273 -- SEVEN PIXELS of
   margin, which Chromium holds and real Safari breaks. THIRD SIGHTING of that
   failure in this file (the tagline's 3px, the A2HS step, now this). A margin
   under ~10px measured HERE is not a pass; treat it as a wrap.
   ▶ THE ARITHMETIC IS THE ARGUMENT: the WORDS alone are 228px and there are 45px
   spare, so the star and the chevron were eating 38 of the 45. Everything she
   picked survives -- her words, her star, her down chevron -- and each just comes
   down a hair: type 17.5 -> 17px, star 13 -> 12px, chevron 15 -> 12px, margins
   5 -> 4 and 5 -> 3. That buys 20.6px at 375 and holds ONE line at 360/375/393/430.
   ⚠️ 320 still falls to two BALANCED lines, deliberately -- already her accepted
   trade. Shrinking type further on an 18-to-80 audience is the wrong lever, and
   the standing rule is that the narrow-phone lever is padding. Here padding is
   ALREADY SPENT: #ssAsk is full-bleed to the framed screen, which is only 288px
   wide at a 390px viewport, so there is no width left anywhere to take.
   ⚠️ THE MARKS' vertical-align WAS RE-MEASURED after shrinking them, never guessed
   (the A2HS share-chip lesson: a resized inline glyph silently drops off the text
   line while every positional check still passes). scratchpad/askopts.mjs re-runs
   the width sweep; scratchpad/askvert.mjs re-runs the alignment. */
#s-shopstyle .sa-vox{display:block;width:calc(100% + 28px);margin-left:-14px;margin-right:-14px;background:none;border:0;font:400 17px/1.4 'Lora',Georgia,serif;color:#4a463e;text-align:center;padding:9px 0;margin-top:0;margin-bottom:2px;text-wrap:balance;cursor:pointer}
#s-shopstyle #ssAsk:not(.open) .sa-vox{text-decoration:underline;text-underline-offset:3px}
/* Her pick from three, 2026-08-22. A DOWN CHEVRON, not the app's right arrow:
   everywhere else that arrow means she is about to be taken somewhere, and
   nothing here navigates, the box opens in place. The chevron points at where
   it will appear.
   ⚠️ It goes once the box is OPEN, because at that point it is no longer an
   affordance: the line cannot be tapped closed, so a mark still promising an
   action would be lying. */
#s-shopstyle .sa-chev{width:12px;height:12px;vertical-align:-1px;margin-left:3px;display:inline-block}
#s-shopstyle #ssAsk.open .sa-chev{display:none}
/* Her call 2026-08-22: once it opens, the box should sit RIGHT under the line it
   belongs to. Safe to take the bottom padding out here and nowhere else,
   because in the open state the line is no longer tappable, so the 43px tap
   target it buys in the CLOSED state is not being spent. */
#s-shopstyle #ssAsk.open .sa-vox{cursor:default;padding-bottom:0;margin-bottom:1px}
#s-shopstyle #ssAsk:not(.open) #ssAskIn{display:none}
#s-shopstyle .sa-star{width:12px;height:12px;vertical-align:-1px;margin-right:4px;display:inline-block}
/* Her call: the box is BLACK and the chips are silver, which gives the control a
   hierarchy it did not have when both were gold — the box is the thing to use, the
   chips are helpers. #17171c again, so it matches the card hairline and the frame.
   ⚠️ The focus state is a soft ring, NOT a colour change: a gold focus border on a
   black box would reintroduce exactly the bronzey clash she took out. */
#s-shopstyle #ssAskIn{border:1.5px solid #b3aea3;border-radius:0;padding:10px 14px;font-size:14.5px;width:100%;text-align:left;background:#fff;color:#1a1a1a;font-family:'DM Sans',sans-serif}
#s-shopstyle #ssAskIn:focus{outline:none;box-shadow:0 0 0 2px rgba(23,23,28,.13)}
/* Her pick B, 2026-08-21: a very light example, left aligned, in a soft grey box.
   ⚠️ This LOOKS like the mistake the 2026-08-11 pass fixed, where the add-your-own
   placeholder shipped at 2.73:1 and was the worst text on the page — but that one
   was the ONLY thing announcing its field. Here "Tell me what you're looking for"
   sits directly above in full-strength ink, so the placeholder is free to be a hint
   rather than an invitation, and AA does not bind it.
   ▶ LEFT ALIGNED is doing most of the work: a centred placeholder sits in the middle
   of the field looking like a value, which is exactly why it read to her as text she
   had to delete. */
#s-shopstyle #ssAskIn::placeholder{color:#9d968a}
/* The chip rows were built, rendered five ways, coloured to her pick, and then
   RETIRED on her live test the same day: she typed "white linen dress", tapped
   Vacation, and the chip overwrote her sentence. Her call was to drop them rather
   than teach them to append, and to let the rotating example carry the same
   vocabulary instead — which is why the ring now holds occasions and categories. */
/* Only rendered while an ask is in force. Quieter than the refresh above it,
   because it is the way OUT of what she asked for, not the main action. */
/* "Showing bags · show me a mix instead" — quiet, because it is a caption on the box
   above it and never a second button competing with SHOW ME. The link half is
   underlined so the tappable words are unmistakable at 12.5px. */
#s-shopstyle #ssAskNow{font:400 12.5px/1.5 'DM Sans',sans-serif;color:#6e6e6e;margin:6px 0 0;text-align:left}
#s-shopstyle #ssAskNow span{color:#4a463e;text-decoration:underline;cursor:pointer}
#s-shopstyle .sa-go{display:block;margin:10px auto 0;background:#1a1a1a;color:#fff;border:none;border-radius:20px;padding:9px 22px;font:600 12.5px/1 'Jost',sans-serif;letter-spacing:.07em;cursor:pointer}
/* The narrow-phone lever is padding, never font-size — the standing readability
   trade for an 18-to-80 audience (see the .wl-add media query). */
@media(max-width:374px){#s-shopstyle #ssAsk{padding:0 6px}#s-shopstyle #ssAskIn{padding:10px 6px}}
#s-pref-done .btn-p{border:1.5px solid #1a1a1a;background:#F5EFE2;color:#1a1a1a;box-shadow:none}
#s-pref-done .btn-pink{border:none;background:linear-gradient(180deg,#2b2523,#1c1615);color:#fff;border-radius:0;box-shadow:0 0 0 3px #B4BAC0,0 0 0 6px #ECD070;margin:14px auto 10px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
#s-pref-done .btn-pink .lgs-ar{width:19px;height:19px;flex:none}
#s-pref-done .btn-pink{position:relative;overflow:visible}
#s-pref-done .btn-pink .hm-cta-seal{animation:none;filter:none}
#s-pref-done .btn-p:hover,#s-pref-done .btn-pink:hover{opacity:1;filter:brightness(1.03)}
.email-section{margin:1.5rem 0;text-align:center}
.shop-section{margin:1.5rem 0;text-align:center}
.shop-title{font-size:20px;font-weight:700;color:#1a1a1a;margin-bottom:4px;font-family:'DM Sans',sans-serif}
.shop-sub{font-size:15px;color:#444;margin-bottom:1rem;font-weight:500}
/* ⚠️ minmax(0,1fr), NOT 1fr. Her catch 2026-08-22: "the two rows of windows are
   not symmetrical sizing, the left boxes are larger than the ones on the right."
   Measured: the left column ran 150px against 112.5px on the right, at every
   phone width. A bare 1fr carries an automatic minimum of AUTO, so a column
   holding a long unbreakable word (BLOOMINGDALES) grows past its share and
   steals the difference from its neighbour. minmax(0,1fr) makes the share the
   real limit and the words wrap instead. Don't simplify it back. */
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
/* ...and with a real limit, a long retailer name must be allowed to break or it
   would simply overflow the card it no longer fits. This is the SAFETY NET, not
   the plan: the plan is that the real names fit, below. */
/* ⚠️ `break-word`, NOT `anywhere` (changed 2026-09-06, her "BLOOMINGDA / LES"
   screenshot). `anywhere` lets the browser split a word at ANY character even
   when a smaller change would have fitted it; `break-word` breaks only a word
   that genuinely cannot fit on a line of its own. Long product names still wrap
   fine -- they have spaces. See .shop-item-store below for the other half. */
.shop-card{overflow-wrap:break-word}
/* ⚠️ MEASURED, 2026-08-22, after the even columns made every card 139px: the
   card's inner width was 105px while BLOOMINGDALES needs 116 and ANTHROPOLOGIE
   115, so the safety net above was firing on ORDINARY stores and rendering
   "BLOOMINGDAL / ES". Rather than shrink the type on an 18 to 80 audience, the
   cards give the width back: 16px of side padding was generous for a 139px
   card, and the store line's tracking was costing ~5px it did not need.
   ⚠️ Scoped to the two-column grid so the wardrobe's 128px horizontal carousel
   keeps its own tighter proportions. */
.shop-grid:not(.hscroll) .shop-card{padding-left:10px;padding-right:10px}
.shop-grid:not(.hscroll) .shop-item-store{letter-spacing:.03em}
.shop-card{background:#fafafa;border:1px solid #ebebeb;border-radius:14px;padding:1rem;text-align:center;display:flex;flex-direction:column;justify-content:space-between;min-height:140px}
/* PANES IN A SHOP WINDOW — her reading of this screen, 2026-08-21, and it is what
   decides the colour: "I am keeping in mind it actually looks like a store window.
   So I don't want gold." #17171c is NOT a new black. It is already the 11px window
   frame on .ss.shop-mirror and the black stripe of the awning — the two structural,
   window-shaped things here — so a squared hairline reads as muntin bars continuing
   that frame. (#1a1a1a is this screen's INK and filled-control black: the logo, the
   Find it pill. Don't swap them.)
   ⚠️ Scoped to #s-shopstyle deliberately. The same .shop-card renders the wardrobe
   Ideas shelf and the curated catalog cards, which are a different screen with no
   window around them, and she has not seen those changed. Offer before extending. */
#s-shopstyle .shop-card{border-radius:0;border-color:#17171c}
.shop-want-for{font:700 10.5px/1.25 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#B08830;margin-bottom:7px}
.shop-trunc{text-align:center;font:500 12.5px/1.4 'Jost',sans-serif;color:#8a8474;margin-top:12px}
.shop-item-name{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:4px;line-height:1.3}
.shop-item-store{font-size:12px;color:#555;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
/* ── Curated-catalog cards (2026-08-14, reworked same day to her calls: NO
   attribution anywhere on the shelf — no badge, no checked line, no labels;
   the catalog blends seamlessly with AI ideas and only "Shop it" vs "Find
   it" quietly carries the exact-link difference). The BRAND leads the card —
   the trust signal she actually reads ("L'Agence", not "Nordstrom"); the
   retailer line is where to buy it. Her note (trimmed) wears the compact
   worksheet register: Lora upright 13px in the readable ink (the .wdr-note
   precedent for dense tools). Readable-ink brand, not gold: dark antique
   golds read brown at small sizes and true golds fail AA as text here. */
.shop-item-brand{font:700 11px/1.2 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4a463e;margin-bottom:2px}
.wdr-curated .shop-item-store{text-transform:none;letter-spacing:.02em;font-weight:500;color:#5f5647}
.wdr-cur-note{font:400 13px/1.45 'Lora',Georgia,serif;color:#4a463e;text-align:left;margin:0 0 10px}
/* ── The feed garment's photograph (2026-09-06). Full-bleed to the card's own
   edges: the wardrobe card is only 128px wide, so 1rem of padding on each side
   would leave a 96px stamp, and a 96px stamp of a dress is not a product
   photograph. The negative margin cancels the card's padding instead, which
   also means hiding a broken image restores the ordinary card with no other
   rule needing to know. 3:4 is the shape a garment is shot in; object-fit
   crops rather than distorts, because a stretched dress is worse than a
   cropped one. The ground colour shows while the image is still arriving, so
   the card never flashes white-on-white. */
.wdr-cur-photo{display:block;width:calc(100% + 2rem);margin:-1rem -1rem 10px;aspect-ratio:3/4;object-fit:cover;background:#f1efe9}
.shop-card.wdr-haspic{overflow:hidden}
/* (.wdr-cardops / .wdr-linkflag retired 2026-08-15 with the "Not for me" and
   "Link broken?" controls -- see the note above _wdrTrimNote for why.) */
/* "+ See more ideas": the squared gold-outline button language (the wishing
   button's own construction) — she can always keep looking. */
.wdr-morewrap{text-align:center;margin:12px 0 2px}
.wdr-more{display:inline-block;font:600 13.5px/1 'Jost',sans-serif;letter-spacing:.04em;color:#3a352c;border:1px solid #D8A52E;background:#fff;padding:9px 14px;cursor:pointer}
.wdr-more.busy{opacity:.6}
/* nowrap + tighter padding: "Find this" is longer than the old "Shop" and was
   wrapping to three lines in the 128px Wardrobe cards. */
.shop-link{display:inline-block;font-size:11px;font-weight:600;color:#fff;background:#1a1a1a;padding:8px 10px;border-radius:20px;text-decoration:none;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;transition:opacity 0.2s}
.shop-link:hover{opacity:0.85}
/* ===== "Save" — the control that puts a specific piece on My Wishlist =====
   ⚠️ A HEART on purpose, and it must stay a different shape from Your Wardrobe's
   STAR. The star marks a CATEGORY she'd like in her closet ("White tops"); the
   heart saves a SPECIFIC piece, with the store and a rebuildable link. Two
   lists, two marks -- don't unify them back into one shape.
   The control is LABELLED rather than a bare icon: real testing (2026-07-26)
   showed an unlabelled control reads as decoration to a less app-fluent user. */
.shop-card-act{display:flex;flex-direction:column;align-items:center;gap:7px}
.wl-save{display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:600 11px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7d7667;padding:4px 9px;border-radius:999px;border:1px solid transparent;-webkit-tap-highlight-color:transparent;transition:color .18s,border-color .18s,background .18s}
.wl-save svg{width:14px;height:14px;display:block;flex:0 0 auto}
.wl-save:hover{color:#54503f}
.wl-save.on{color:#F2D889;border-color:#C99A2C;background:#1a1a1a}
/* On the Style Star Edit the control gets its OWN row under "Shop this item":
   that button measures 209px inside a 232px column, so there is no room beside
   it at any phone width. Given it stands alone under a big black button, it
   carries a visible outline so it reads as a real secondary action. */
#s-dream .dc-save-row,#s-finds .dc-save-row{margin-top:11px}
#s-dream .wl-save,#s-finds .wl-save{margin-left:0;padding:8px 14px;border-color:#E6D6A8}
/* Complete the Look sits on the dark results screen, so the same control needs
   its own colours there or it disappears into the board.
   ▶ STACKED label (2026-08-09, her pick from a 3-way render): the heart alone
   read as decoration (her catch — "I don't think she will intuitively know"),
   but the inline SAVE word stole width and crumpled item names to four lines.
   Stacking the caption UNDER the heart labels the control at zero width cost —
   the names wrap identically to the bare version. Don't inline it. */
.res-screen .shoprow .wl-save{padding:2px 4px;color:#6b655a;flex-direction:column;gap:0}
.res-screen .shoprow .wl-save .wl-save-t{display:block;font-size:8.5px;letter-spacing:.08em;margin-top:2px}
.res-screen .shoprow .wl-save.on{padding:4px 7px}

/* ===== My Wishlist =====
   Deliberately the same black-and-stitch "room" frame as Your Wardrobe (one
   frame language for the whole app, per the restraint principle) -- what makes
   this room its own is the hearts and the tag, not a second frame invention. */
/* THE ROD + HANGING HEART (2026-08-09, her design): the Analyze page's gold
   rail with the wishlist's heart hanging from it by thread and ring — one
   dressing-room hardware set for the whole app. "Your / Wishlist" is STACKED
   inside the heart (her idea: stacking lets a 195px heart fully hold the
   words). The letterhead is the ph-mast clone, slider dot included, and it
   goes home like every brand mark. The count line is deleted (her call: the
   pieces are right below it). */
#s-wishlist{position:relative;padding-top:24px}
/* The rod is FIXED to the viewport: left/right 0 of the screen itself, so it
   is edge-to-edge on any device and any zoom (vw units and overhang-clipping
   both failed on her phone — this cannot). Fixed left/right handles WIDTH
   only: _wlRodScroll translates it by -scrollY so it rides the page and the
   hanging heart stays on its rod (her call — they slide together). */
#s-wishlist .wl-rod{position:fixed;top:32px;left:0;right:0;height:8px;z-index:6;background:linear-gradient(180deg,#FBF1C2 0%,#EAC24E 40%,#C89A2C 74%,#8a6a17 100%);box-shadow:0 4px 9px -3px rgba(120,90,20,.5),inset 0 1px 0 rgba(255,255,255,.6)}
/* Her nudge (2026-08-10): up 4px, left 3px. top 20 -> 16, left -8 -> -11. */
#s-wishlist .wl-mast{position:absolute;top:16px;left:-11px;z-index:6;font:400 19px/1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.35px #1a1a1a;padding-bottom:7px;display:inline-block;cursor:pointer}
#s-wishlist .wl-mast::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:#E0B84C}
#s-wishlist .wl-mast::before{content:"";position:absolute;bottom:-1.5px;left:50%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
#s-wishlist .wl-head{text-align:center;margin:0 0 4px}
#s-wishlist .wl-crown{position:relative;width:196px;height:196px;margin:-10px auto 0}
/* A real CHAIN of alternating gold links (the Welcome Back portrait's own
   hanging language), sized in even pixels so it can never straddle a
   half-pixel off the heart's groove. The ring ENCIRCLES the rail (z above
   the rod), a curtain ring, not a floating o. */
#s-wishlist .wl-chain{position:absolute;left:calc(50% - 4px);bottom:calc(100% - 60px);width:8px;height:66px;z-index:1}
/* The ring INTERLOCKS the rail: the full circle sits behind the rod (z5),
   and .wl-ringf repaints only its bottom half in front (z7, clip-path) — the
   curtain-ring illusion, top arc behind the bar, bottom arc in front. */
#s-wishlist .wl-ring,#s-wishlist .wl-ringf{position:absolute;left:calc(50% - 6px);bottom:calc(100% + 4px);width:12px;height:12px;border-radius:50%;border:2px solid #C89A2C;background:transparent}
#s-wishlist .wl-ring{z-index:5}
#s-wishlist .wl-ringf{z-index:7;clip-path:inset(50% 0 0 0)}
#s-wishlist .wl-crownheart{position:absolute;inset:0;width:100%;height:100%;display:block}
#s-wishlist .wl-ct{position:absolute;left:50%;transform:translateX(-50%);top:33%;z-index:2;text-align:center;font:400 25px/1.15 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.3px #1a1a1a}
#s-wishlist .wl-lead{font:400 13px/1.55 'Jost',sans-serif;color:#5a554c;background:#f7f6f3;border:1px solid #e4e1d9;padding:11px 14px;margin:-10px 0 0;text-align:center}
#s-wishlist .wl-lead b{color:#26221c;font-weight:600}
/* Once per screen and above every link on it, matching every other surface. */
#s-wishlist .wl-disclosure{font:400 11.5px/1.4 'DM Sans',sans-serif;color:#6e6e6e;text-align:center;margin:12px 0 0}
#s-wishlist .wl-card{position:relative;background:#FBFAF7;border:1px solid #e7e0cf;padding:4px 12px 6px;margin-top:5px}
#s-wishlist .wl-row{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid #efe9dc}
#s-wishlist .wl-row:first-child{border-top:0}
#s-wishlist .wl-b{flex:1;min-width:0}
#s-wishlist .wl-nm{display:block;font:600 14px/1.35 'Jost',sans-serif;color:#26221c}
/* HER CALL 2026-08-21, after the shared page measured the same value and
   failed: #8a8272 is 3.65:1 on this card and 3.81:1 on white, both under the
   4.5 AA bar, on the line that names WHERE a piece is sold. #6b6355 is the
   app's own established readable ink (5.68:1 here). Same family, just dark
   enough to read on an 18-80 audience. Don't re-quieten it. */
#s-wishlist .wl-st{display:block;font:500 10.5px/1.35 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#6b6355;margin-top:3px}
/* Cath's own Edit picks are a different KIND of saved piece -- a real product
   link with a price, not a search -- so they are marked rather than blended in.
   Hiding the difference would mean one tap lands on the actual shoe and the next
   on 200 search results, with nothing to explain why. */
#s-wishlist .wl-pick{display:inline-flex;align-items:center;gap:4px;font:700 8.5px/1 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#087E8C;background:#fff;border:1px solid #F49AC1;border-radius:999px;padding:3px 7px 3px 6px;margin-bottom:5px}
/* Her signature heart on her pick (her spec: tilt LEFT, teal words, pink frame) */
#s-wishlist .wl-pick svg{width:9px;height:9px;fill:#F49AC1;display:block;flex:0 0 auto;transform:rotate(-11deg)}
#s-wishlist .wl-pr{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#C8971E;margin-left:7px;text-transform:none}
#s-wishlist .wl-go{flex:0 0 auto;font:600 11px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:9px 12px;text-decoration:none;white-space:nowrap}
/* --- HER NOTE ON A PIECE (2026-08-21) -------------------------------------
   The affordance is WORDS, not a pencil: "+ Add a note" can't be misread the
   way a grey tab was (her mom, 2026-07-26). Gold ink because it is an
   invitation, not a warning.
   ⚠️ The note itself wears the SAME gold left rule as the shared page's
   .sh-note, so her words look like her words in both places. Grep sh-note
   before restyling either -- they are meant to match. */
/* ⚠️ REVISED once the real screen was rendered: this was scoped to .hasnote,
   on the reasoning that rows without a note should not change. That reasoning
   died the moment "+ Add a note" went on EVERY row -- they are all taller now,
   so a centred × and a centred Shop it float mid-row on the note-less ones and
   look plainly wrong beside their neighbours. Uniform top alignment. */
#s-wishlist .wl-row{align-items:flex-start}
#s-wishlist .wl-row .wl-go{margin-top:2px}
#s-wishlist .wl-row .wl-del{margin-top:-1px}
#s-wishlist .wl-addnote{display:inline-block;font:500 11.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#8a6d20;margin-top:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:3px 2px}
#s-wishlist .wl-note{display:block;font:400 12.5px/1.5 'Jost',sans-serif;color:#5a554c;margin-top:7px;padding-left:9px;border-left:2px solid #E0B84C}
#s-wishlist .wl-ne{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#8a6d20;margin-left:8px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
#s-wishlist .wl-nedit{margin-top:8px}
#s-wishlist .wl-nedit textarea{width:100%;font:400 12.5px/1.5 'Jost',sans-serif;color:#3a352c;background:#fff;border:1px solid #D8A52E;border-radius:0;padding:8px 9px;resize:none;-webkit-appearance:none}
#s-wishlist .wl-nedit textarea:focus{outline:none;border-color:#C8A060}
#s-wishlist .wl-nrow{display:flex;align-items:center;gap:10px;margin-top:7px}
#s-wishlist .wl-nsave{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#1a1a1a;border:none;border-radius:999px;padding:8px 13px;cursor:pointer}
#s-wishlist .wl-ncancel{font:500 11.5px/1 'Jost',sans-serif;color:#8a8272;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:3px 2px}
#s-wishlist .wl-nleft{margin-left:auto;font:500 10.5px/1 'Jost',sans-serif;color:#8a8272}
/* --- HER OPEN NOTE (2026-08-21) -------------------------------------------
   Heading is simply "Notes", her call. It wears HER approved section-header
   mark -- the 2px #D8A52E bar hugging the word -- the same as the wardrobe
   categories, the Menu groups and the shared page's group headers.
   ⚠️ white-space:pre-line on the body is load-bearing: this is a PARAGRAPH and
   she may want a line break in it. pre-line renders a newline as a newline
   while still escaping everything else, so a break is a break and never markup. */
#s-wishlist .wl-lnote{margin-top:16px;background:#fff;border:1px solid #e7e0cf;padding:13px 13px 12px}
#s-wishlist .wl-lnh{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#26221c;display:inline-block;position:relative;padding:0 2px 5px;margin-bottom:10px}
#s-wishlist .wl-lnh::after{content:"";position:absolute;left:2px;right:-2px;bottom:0;height:2px;background:#D8A52E}
#s-wishlist .wl-lnbody{font:400 12.5px/1.6 'Jost',sans-serif;color:#5a554c;padding-left:9px;border-left:2px solid #E0B84C;white-space:pre-line}
#s-wishlist .wl-lnph{color:#8a8272}
#s-wishlist .wl-lnedit{display:inline-block;font:500 11.5px/1 'Jost',sans-serif;color:#8a6d20;margin-top:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:3px 2px}
#s-wishlist .wl-lnote textarea{width:100%;font:400 12.5px/1.6 'Jost',sans-serif;color:#3a352c;background:#fff;border:1px solid #D8A52E;border-radius:0;padding:9px 10px;resize:none;-webkit-appearance:none}
#s-wishlist .wl-lnote textarea:focus{outline:none;border-color:#C8A060}
/* --- SHARING THE LIST (2026-08-21) ---------------------------------------
   The same cream card as "Keep your wishlist safe", because it is the same
   KIND of thing: a quiet offer under her list, never a demand. */
#s-wishlist .wl-share{margin-top:16px;background:#F7F1E1;border:1px solid #e4d9bd;padding:15px 14px 14px;text-align:center}
#s-wishlist .wl-share .wsh-t{font:400 17px/1.25 'DM Serif Display',Georgia,serif;color:#1f1d19;margin-bottom:5px}
#s-wishlist .wl-share .wsh-s{font:400 12.5px/1.55 'Jost',sans-serif;color:#5a554c;margin:0 auto 11px;max-width:292px}
#s-wishlist .wl-share .wsh-s b{color:#8a6d20;font-weight:600}
#s-wishlist .wl-share .wsh-use{font:500 12.5px/1.4 'Jost',sans-serif;color:#5a554c;margin:-4px auto 12px}
#s-wishlist .wl-share .wsh-arr{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-left:4px;color:#8a6d20;transform:rotate(90deg)}
#s-wishlist .wl-share .wsh-btn{display:inline-block;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:12px 20px;border:none;cursor:pointer}
#s-wishlist .wl-share .wsh-btn:disabled{opacity:.6}
#s-wishlist .wl-share input{display:block;width:100%;max-width:292px;margin:0 auto 8px;font:400 13.5px/1.4 'Jost',sans-serif;color:#3a352c;background:#fff;border:1px solid #D8A52E;border-radius:0;padding:11px 10px;-webkit-appearance:none}
#s-wishlist .wl-share input:focus{outline:none;border-color:#C8A060}
/* ⚠️ The link must never widen the card: a share token is ~90 characters and
   would push the page sideways. It ellipsises, and Copy is what she uses. */
#s-wishlist .wl-share .wsh-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D8A52E;padding:9px 10px;margin:0 auto 9px;max-width:292px}
#s-wishlist .wl-share .wsh-box code{flex:1;min-width:0;font:400 11px/1.4 'DM Sans',sans-serif;color:#3a352c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#s-wishlist .wl-share .wsh-cp{flex:0 0 auto;font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#1a1a1a;border:none;border-radius:999px;padding:8px 11px;cursor:pointer}
#s-wishlist .wl-share .wsh-stop{display:inline-block;font:500 11.5px/1 'Jost',sans-serif;color:#8a8272;text-decoration:underline;cursor:pointer;margin-top:2px;-webkit-tap-highlight-color:transparent;padding:3px 2px}
#s-wishlist .wl-share .wsh-msg{font:400 12px/1.5 'Jost',sans-serif;color:#5a554c;margin-top:8px;min-height:1px}
#s-wishlist .wl-del{flex:0 0 auto;color:#a8a294;font-size:21px;line-height:1;cursor:pointer;padding:2px 3px;-webkit-tap-highlight-color:transparent}
#s-wishlist .wl-del:hover{color:#6b655a}
/* Empty state: never a dead end -- it explains the feature AND offers the way in. */
#s-wishlist .wl-empty{text-align:center;padding:10px 0 14px}
#s-wishlist .wl-empty .we-h{width:30px;height:30px;margin:0 auto 5px}
#s-wishlist .wl-empty .we-h svg{width:100%;height:100%;display:block;fill:none;stroke:#E8D9A8;stroke-width:1.3}
#s-wishlist .wl-empty h4{font:400 19px/1.25 'DM Serif Display',Georgia,serif;color:#1f1d19;margin:0 0 7px}
#s-wishlist .wl-empty p{font:400 13.5px/1.62 'Jost',sans-serif;color:#5a554c;margin:0 auto 13px;max-width:300px}
#s-wishlist .wl-empty p .hi{color:#8a6d20;font-weight:600;white-space:nowrap}
#s-wishlist .wl-empty .we-goldh{width:13px;height:13px;vertical-align:-2px;display:inline-block}
#s-wishlist .wl-empty .we-cta{display:inline-block;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:12px 20px;text-decoration:none;cursor:pointer;border:none}
/* Email capture: the highest-intent moment in the app, so it is offered here --
   but softly, and never blocking. She can use the whole list without it. */
#s-wishlist .wl-stay{margin-top:16px;background:#F7F1E1;border:1px solid #e4d9bd;padding:15px 14px 14px;text-align:center}
#s-wishlist .wl-stay .ws-t{font:400 17px/1.25 'DM Serif Display',Georgia,serif;color:#1f1d19;margin-bottom:5px}
#s-wishlist .wl-stay .ws-s{font:400 12.5px/1.55 'Jost',sans-serif;color:#5a554c;margin:0 auto 10px;max-width:290px}
#s-wishlist .wl-stay input{border:1.5px solid #e0d6bc;border-radius:2px;padding:11px 16px;font-size:15px;width:100%;max-width:270px;text-align:center;background:#fff;color:#1a1a1a;font-family:'DM Sans',sans-serif;margin-bottom:8px}
#s-wishlist .wl-stay input:focus{outline:none;border-color:#C8A060}
#s-wishlist .wl-stay .ws-btn{display:inline-block;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:12px 20px;border:none;cursor:pointer}
#s-wishlist .wl-stay .ws-btn[disabled]{opacity:.6}
#s-wishlist .wl-stay .ws-msg{font:400 12px/1.5 'Jost',sans-serif;color:#777;margin-top:8px;min-height:1px}
#s-wishlist .wl-stay .ws-ok{font:400 13px/1.5 'Jost',sans-serif;color:#8a6d20}
#s-wishlist .wl-addwrap{margin-top:12px;text-align:center}
#s-wishlist .wl-addbtn{display:inline-block;font:600 11.5px/1.4 'Jost',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#4a463e;background:#fff;border:1px solid #D8A52E;padding:9px 8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#s-wishlist .wl-addbtn .wab-t{display:block;text-wrap:balance}
#s-wishlist .wl-add{margin-top:12px;background:#FBFAF7;border:1px solid #D8A52E;padding:15px 14px 13px;text-align:center}
#s-wishlist .wl-add .wa-t{font:400 17px/1.25 'DM Serif Display',Georgia,serif;color:#1f1d19;margin-bottom:4px}
#s-wishlist .wl-add .wa-s{font:400 12.5px/1.55 'Jost',sans-serif;color:#5a554c;margin:0 auto 10px;max-width:300px}
#s-wishlist .wl-add input{border:1.5px solid #e0d6bc;border-radius:2px;padding:11px 16px;font-size:15px;width:100%;max-width:290px;text-align:center;background:#fff;color:#1a1a1a;font-family:'DM Sans',sans-serif;margin-bottom:8px}
#s-wishlist .wl-add input:focus{outline:none;border-color:#C8A060}
/* Narrow phones: trim the form's side padding too (2026-08-13 — at 320 the
   "Copy & paste link (optional)" placeholder needed 183px and had 178; the
   trim gives the inputs 16px back so every placeholder fits whole with real
   headroom. The font is never shrunk — the standing readability rule.) */
@media(max-width:374px){#s-wishlist .wl-add input{padding:11px 4px}#s-wishlist .wl-add{padding:15px 6px 13px}}
#s-wishlist .wl-add .wa-hint{font:400 11.5px/1.5 'DM Sans',sans-serif;color:#6e6e6e;margin:0 auto 10px;max-width:290px}
#s-wishlist .wl-add .wa-btn{display:inline-block;font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:12px 20px;border:none;cursor:pointer}
#s-wishlist .wl-add .wa-cancel{display:inline-block;font:500 12px/1 'Jost',sans-serif;color:#8a8474;cursor:pointer;margin-left:14px;padding:6px 2px}
#s-wishlist .wl-add .wa-msg{font:400 12px/1.5 'Jost',sans-serif;color:#4a463e;margin-top:8px;min-height:1px}
#s-wishlist .wl-own{display:inline-flex;align-items:center;gap:4px;font:700 8.5px/1 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#8a6d20;background:#fff;border:1px solid #E0B84C;border-radius:999px;padding:3px 7px 3px 6px;margin-bottom:5px}
#s-wishlist .wl-own svg{width:9px;height:9px;fill:#E0B84C;display:block;flex:0 0 auto}
#s-wishlist .wl-empty .we-or{margin-top:10px}
/* ⚠️ MEASURED: the label needs 231px at 13.5px. With the trimmed side padding
   the button gets 260px at 390 and 245 at 375, so 8px side padding leaves
   ~11px of headroom at 390 and it holds ONE line there. Below 390 it falls to
   two balanced lines on purpose -- shrinking the type would undo her "bigger
   font" ask, and a sub-5px margin is inside browser text-measurement variance
   (the tagline lesson, same day). Re-measure with scratchpad/btnfit.js if the
   wording or padding ever changes. */
#s-wishlist .wl-empty .we-addlnk{display:inline-block;font:600 13.5px/1.35 'Jost',sans-serif;color:#4a463e;background:#fff;border:1px solid #D8A52E;border-radius:0;padding:9px 8px;cursor:pointer;letter-spacing:.03em;-webkit-tap-highlight-color:transparent;max-width:100%}
#s-wishlist .wl-empty .we-addlnk .wab-t{display:block;text-wrap:balance}
#s-wishlist .wl-foot{text-align:center;margin-top:26px}

/* --- THE SHARED WISHLIST (2026-08-21) -------------------------------------
   The page at /list/<token>: her list as something another person can buy
   from. Read-only by construction -- there is no remove control, no email
   ask, no add form, and the server never sends anything but the rows.

   ⚠️ THE CROWN IS THE SAME OBJECT AS YOUR WISHLIST'S, deliberately: her call
   was "copy it exactly so it does not have to be rebuilt". The values below
   mirror #s-wishlist's, so a change to one must be made to the other --
   grep wl-crownheart to find both.
   ⚠️ AND THE CHAIN'S PATTERN ID IS DIFFERENT ON PURPOSE (shChainPat, not
   wlChainPat). Two elements sharing an SVG id resolve to whichever def the
   browser finds first, and Safari may refuse to paint one that lives inside
   a hidden screen -- the same rule as the per-footer Instagram gradients. */
#s-sharelist{padding:0 16px 26px}
/* ⚠️ IN FLOW, not viewport-fixed like #s-wishlist .wl-rod. The wishlist's rod
   is fixed so it reaches the true screen edges under iOS page zoom, and it
   then needs _wlRodScroll to translate it on every scroll or the crown
   detaches from it (her catch, 2026-08-09). Here the chain MEETING the rod
   matters more than the last few pixels of bleed, and a rod in flow gets
   that for free with no scroll listener at all. Don't 'upgrade' it to
   fixed without bringing the scroll sync with it. */
/* ⚠️ -44px is MEASURED, not chosen: .scr pads 16px and .inner pads 28px, so
   44px is exactly what it takes to reach .ss's own edges (12→378 at 390).
   It lands flush rather than overhanging, which matters because .ss carries
   overflow:hidden -- anything past the edge is simply clipped away. If either
   padding ever changes, this number changes with it. */
#s-sharelist .sh-rodwrap{position:relative;height:8px;margin:0 -44px}
#s-sharelist .sh-rod{position:absolute;inset:0;height:8px;z-index:6;background:linear-gradient(180deg,#FBF1C2 0%,#EAC24E 40%,#C89A2C 74%,#8a6a17 100%);box-shadow:0 4px 9px -3px rgba(120,90,20,.5),inset 0 1px 0 rgba(255,255,255,.6)}
#s-sharelist .sh-crown{position:relative;width:196px;height:196px;margin:6px auto 0}
#s-sharelist .sh-chain{position:absolute;left:calc(50% - 4px);bottom:calc(100% - 60px);width:8px;height:66px;z-index:1}
#s-sharelist .sh-ring,#s-sharelist .sh-ringf{position:absolute;left:calc(50% - 6px);bottom:calc(100% + 4px);width:12px;height:12px;border-radius:50%;border:2px solid #C89A2C;background:transparent}
#s-sharelist .sh-ring{z-index:5}
#s-sharelist .sh-ringf{z-index:7;clip-path:inset(50% 0 0 0)}
#s-sharelist .sh-crownheart{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Her name, in her own handwriting, sitting inside the gold heart like a
   locket -- her pick over a separate signature line underneath. */
#s-sharelist .sh-nm{position:absolute;left:50%;transform:translateX(-50%);top:36%;z-index:2;width:150px;text-align:center;font:400 30px/1.1 'Dancing Script',cursive;color:#1f1d19}
#s-sharelist .sh-lead{font:400 17px/1.5 'Lora',Georgia,serif;color:#3a352c;text-align:center;margin-top:2px;text-wrap:balance}
/* ⚠️ Pushed lower at her ask, but it CANNOT move below the list: the FTC
   guidance and every affiliate reviewer expect a disclosure above the links
   it describes. Its position is the one thing here that is not a taste call. */
/* ⚠️ DELIBERATELY UNEVEN, and it is the same call she made about the commission
   line on 2026-08-15: centred between two things it belongs to NEITHER. More
   air above than below attaches it downward, to the list it is describing.
   Don't 'balance' these two numbers. */
#s-sharelist .sh-disc{font:400 11.5px/1.4 'DM Sans',sans-serif;color:#6e6e6e;text-align:center;margin:10px 0 0}
/* The first group follows the disclosure and needs less air than the second,
   which follows a whole card of rows. */
#s-sharelist .sh-disc+.sh-gh{margin-top:4px}
/* Both group headers reuse HER approved section-header mark: a 2px #D8A52E bar
   hugging the word, exactly as the wardrobe categories and the Menu groups do.
   Grep wdr-cat-t before restyling either -- they are meant to match. */
#s-sharelist .sh-gh{margin:22px 0 0;text-align:center}
#s-sharelist .sh-gh span{display:inline-block;position:relative;padding:0 2px 6px;font:700 15px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#26221c}
#s-sharelist .sh-gh span::after{content:"";position:absolute;left:2px;right:-2px;bottom:0;height:2px;background:#D8A52E}
#s-sharelist .sh-card{background:#fff;border:1px solid #e7e0cf;padding:2px 12px 4px;margin-top:9px}
#s-sharelist .sh-row{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-top:1px solid #efe9dc}
#s-sharelist .sh-row:first-child{border-top:0}
#s-sharelist .sh-b{flex:1;min-width:0}
#s-sharelist .sh-name{display:block;font:600 14px/1.35 'Jost',sans-serif;color:#26221c}
/* ⚠️ #6b6355, NOT the #8a8272 Your Wishlist uses for the same line. That value
   measures 3.81:1 on white and FAILS AA, and here the retailer name is the
   thing a gift-buyer most needs to read, on a page a stranger meets cold.
   #6b6355 is the app's own established readable ink (5.93:1). The same
   number is worth fixing on #s-wishlist .wl-st, which is a separate change
   to a screen she has already blessed -- raised with her, not smuggled in. */
#s-sharelist .sh-store{display:block;font:500 10.5px/1.35 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#6b6355;margin-top:3px}
#s-sharelist .sh-price{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.03em;color:#C8971E;margin-left:7px;text-transform:none}
/* HER OWN words about the piece -- size, colour, the occasion. The gold rule
   marks it as an annotation so it can never read as the retailer's copy. */
#s-sharelist .sh-note{display:block;font:400 12.5px/1.5 'Jost',sans-serif;color:#5a554c;margin-top:7px;padding-left:9px;border-left:2px solid #E0B84C}
#s-sharelist .sh-go{flex:0 0 auto;margin-top:2px;font:600 11px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#1a1a1a;border-radius:999px;padding:9px 12px;text-decoration:none;white-space:nowrap}
/* HER CALL 2026-08-21: the quiz button and the full two-row footer are gone.
   This is somebody's personal wishlist, not the app's front door, and a page
   of app chrome under it read as an advertisement stapled to a gift list.
   ▶ What replaces it is HER idea and it is the better one: ONE way in, for a
   reader who wants to browse rather than buy a named piece. The Mall is
   exactly that door.
   ⚠️ The legal pair STAYS, deliberately and against "we don't need any of
   that here": this is a public page carrying affiliate links and running
   analytics, and a reachable privacy policy is both ordinary good practice
   and the specific thing affiliate reviewers look for. It is one 11px line,
   not a footer. */
/* Her paragraph, at the bottom, wearing exactly what it wears on her own
   screen. Grep wl-lnbody before restyling either -- they are meant to match. */
#s-sharelist .sh-lnote{margin-top:22px;background:#fff;border:1px solid #e7e0cf;padding:13px 13px 12px}
#s-sharelist .sh-lnh{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#26221c;display:inline-block;position:relative;padding:0 2px 5px;margin-bottom:10px}
#s-sharelist .sh-lnh::after{content:"";position:absolute;left:2px;right:-2px;bottom:0;height:2px;background:#D8A52E}
#s-sharelist .sh-lnbody{font:400 12.5px/1.6 'Jost',sans-serif;color:#5a554c;padding-left:9px;border-left:2px solid #E0B84C;white-space:pre-line}
#s-sharelist .sh-foot{text-align:center;margin-top:24px}
#s-sharelist .sh-f2{display:inline-block;font:600 11px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1a1a1a;border:1px solid #D8A52E;padding:11px 16px;text-decoration:none;cursor:pointer;margin:5px}
/* Her ask: the flattened letterhead signs the page off, between the Mall
   button and the legal line. The mark itself is .pref-word, reused rather than
   redrawn — grep pref-word before restyling either. */
#s-sharelist .sh-mark{margin-top:20px;text-align:center}
#s-sharelist .sh-legal{font:400 11px/1.5 'Jost',sans-serif;color:#8a8272;margin-top:11px}
#s-sharelist .sh-legal .lnk{color:#8a8272;cursor:pointer;text-decoration:none}
#s-sharelist .sh-legal b{color:#3a352c;font-weight:600}
/* Waiting, gone and empty are all real states of this page -- somebody arrives
   here from a text message with no idea what to expect, so none of them may be
   a blank screen or a raw error. */
#s-sharelist .sh-wait,#s-sharelist .sh-gone{text-align:center;padding:26px 0 10px}
#s-sharelist .sh-gone h4{font:400 19px/1.3 'DM Serif Display',Georgia,serif;color:#1f1d19;margin:0 0 8px}
#s-sharelist .sh-gone p,#s-sharelist .sh-wait{font:400 13.5px/1.6 'Jost',sans-serif;color:#5a554c;margin:0 auto;max-width:300px}
/* "Saved" confirmation toast: tells her the piece landed somewhere AND where
   that somewhere is, so the list is discoverable from the moment she uses it. */
.wl-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:9000;display:flex;align-items:center;gap:9px;background:#1a1a1a;color:#fff;border-radius:999px;padding:11px 8px 11px 16px;box-shadow:0 10px 26px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:calc(100vw - 32px)}
.wl-toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.wl-toast .wt-t{font:500 13px/1.3 'Jost',sans-serif;white-space:nowrap}
.wl-toast .wt-t svg{width:13px;height:13px;fill:#E0B84C;vertical-align:-2px;margin-right:5px}
.wl-toast .wt-go{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#1a1a1a;background:#EACD68;border-radius:999px;padding:8px 13px;cursor:pointer;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.wl-toast{transition:none}}
.shop-loading{text-align:center;padding:2rem 0;color:#444;font-size:17.5px;font-weight:500}
.shop-star-wrap{position:relative;width:86px;height:86px;margin:2px auto 14px}
.shop-star-main{width:86px;height:86px;display:block;filter:drop-shadow(0 2px 5px rgba(224,174,70,.3));animation:spin 1.7s linear infinite reverse;transform-origin:50% 50%}
.shop-bag-main{width:82px;height:82px;display:block;filter:drop-shadow(0 3px 6px rgba(224,174,70,.32));animation:shopBagSway 1.2s ease-in-out infinite;transform-origin:50% 14%}
@keyframes shopBagSway{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@media(prefers-reduced-motion:reduce){.shop-star-main,.shop-bag-main{animation:none}}
#s-shopstyle .shop-loading{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:190px;padding:8px 0 0;font-size:19.5px}
.shop-refresh{text-align:center;margin-top:14px}
.shop-refresh-btn{font-size:15.5px;color:#B08830;cursor:pointer;text-decoration:underline;border:none;background:none;letter-spacing:0.03em}
/* Uneven ON PURPOSE, her 2026-08-15 rule reapplied: a caption belongs to what
   it describes. Tight above and loose below made it read as a note about the
   search box; 14/4 attaches it to the pieces underneath. */
#s-shopstyle .ss-disc-top{font-size:11.5px;margin:9px auto 3px}
/* HER CALL 2026-08-22: it steps back while the star is spinning. A disclosure
   belongs NEAR THE LINKS, and while the pieces are still being found there are
   no links on the screen at all, so it was a commission notice sitting alone
   under "Searching all the latest options, just for you..." with nothing to
   disclose. Same reasoning that already keeps it off an EMPTY Your Wishlist.
   ⚠️ NOTHING is traded away: the pieces and the notice arrive in the same
   render, so she still cannot reach a FIND IT without passing it, which is the
   whole point of moving it above the cards in the first place.
   ⚠️ The spinner is this same screen wearing .thinking, so it is one rule --
   and it must stay display:none rather than visibility/opacity, or it would
   still hold its space and leave a gap where the notice used to be. */
#s-shopstyle.thinking .ss-disc-top{display:none}
/* HER CALL 2026-08-22, off her own live test, and it is the SAME REASONING one
   step further: while the star is spinning there is nothing on the screen to
   act on, so nothing should be asking her to act.
   ▶ THE WISHLIST DOOR IS THE WORST OF THE THREE TO LEAVE STANDING, and that is
   her point, not a tidiness one: a notice and a tip are inert, but a door is a
   way OUT, offered at the one moment she is waiting for the payoff. Her words:
   "she should just wait to see her options during spinning star and not be
   tempted to click out of it at this moment."
   ⚠️ THE CODE ALREADY AGREED -- _shopStyleGen has always hidden #ssAsk while
   thinking, for exactly this reason. This is that rule finally reaching its
   neighbours; the disclosure and these two were simply left behind.
   ⚠️ Scoped #s-shopstyle so Complete the Look's own copy of the tip is
   untouched -- that screen has no spinner state of this kind.
   ⚠️ CSS rather than more inline style in _syncHeartTip on purpose: that
   function sets display to '' (removing the inline value) when it wants a line
   shown, so this rule wins during .thinking and gets out of the way after. */
#s-shopstyle.thinking [data-hearttip],
#s-shopstyle.thinking [data-wldoor]{display:none}
.shop-disclosure{font-size:12.5px;color:#6e6e6e;line-height:1.5;margin-top:12px;max-width:320px;margin-left:auto;margin-right:auto;text-align:center}
.email-divider{height:1px;background:#ebebeb;margin:1.5rem 0}
.share-section{margin:1.5rem 0;text-align:center}
.whatsnext{margin:1.5rem 0;text-align:center}
.whatsnext-title{font-family:'DM Serif Display',Georgia,serif;font-size:20px;font-weight:400;color:#1a1a1a;margin-bottom:6px}
.whatsnext-sub{font-size:13px;color:#888;margin-bottom:14px}
.whatsnext-grid{display:flex;flex-direction:column;align-items:center;gap:8px}
.share-title{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:12px}
.quiz-footer{text-align:center;padding:1.25rem;border-top:1px solid #f0f0f0}
/* ⚠️ HER BUG (2026-08-10): two footers on Your Wishlist, "not every time."
   The global footer's visibility is driven by JS -- show()'s id list PLUS a
   hand-written line inside several open/close functions -- so the last one to
   run wins, and a route nobody thought of can leave it on. It was not
   reproducible across 13 routes into the wishlist or across all 20 screens, so
   rather than guess at the route this states the rule in CSS, where no ordering
   can defeat it: if the screen on show CONTAINS its own footer, the global one
   is not painted. Belt to the JS braces. (:has() is unsupported on very old
   iOS; there the JS still does the job, so this degrades safely.)
   ⚠️ .quiz-footer lives OUTSIDE every .scr, so it can never match itself. */
body:has(.scr.act [data-std-foot]) .quiz-footer{display:none!important}
/* ===== THE ONE STANDARD FOOTER (Cath's from-zero rethink, 2026-08-08) =====
   Every footer container carries data-std-foot and is filled at boot from ONE
   template (_stdFootHTML), so the links can never drift apart again — that
   drift is how the app once ended up with eight sets. Containers keep their
   own class for PLACEMENT (margins, band background); everything INSIDE is
   styled here and only here.
   Both rows speak with ONE voice — same 14px, gold stars as the only
   separator (her catch: gold stars above vs gray dots below "doesn't look
   right"). Places to go up top (Home ★ Shop ★ Instagram), information below
   (Privacy ★ Terms ★ FAQ). My Story cut; each page omits its own link. */
[data-std-foot] .sf-row,[data-std-foot] .sf-row2{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
[data-std-foot] .sf-row2{margin-top:9px}
[data-std-foot] .lnk{font:400 14px/1 'Jost',sans-serif;color:#6f6a63;cursor:pointer;text-decoration:none}
[data-std-foot] .star{color:#E6C24E;font-size:12px;line-height:1}
/* Instagram: the REAL brand-gradient tile (her ask — instantly recognizable),
   ending the main row as its one spot of color.
   ⚠️ The negative margin cancels the padding for LAYOUT only, so the row
   spaces itself as if this were a bare 16px tile while the tap target stays
   28x28 — the rows have no width to spare at 320 and this must not add any. */
[data-std-foot] .ig-a{display:flex;align-items:center;padding:6px;margin:-6px;-webkit-tap-highlight-color:transparent}
[data-std-foot] .ig-g{width:16px;height:16px;display:block}
/* Display-Zoom phones: keep the rows comfortably on one line. */
@media(max-width:374px){[data-std-foot] .sf-row,[data-std-foot] .sf-row2{gap:8px}}
/* every brand logo is a way home */
.go-home{cursor:pointer}
/* ===== THE MENU (labelled hamburger + left drawer), Cath's ask 2026-07-30 ===
   The trigger carries the WORD "Menu" — a bare icon fails exactly the way the
   grey Trending tab failed her mom. Drawer sits below the entrance overlay
   (z 9998) so the curtain still covers everything on landing. */
.menu-chip{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:10px;z-index:900;display:flex;align-items:center;gap:6px;background:rgba(251,250,247,.94);border:1px solid rgba(33,30,26,.22);border-radius:999px;padding:8px 13px;cursor:pointer;box-shadow:0 4px 10px -6px rgba(0,0,0,.4);-webkit-tap-highlight-color:transparent}
.menu-chip svg{display:block}
.menu-chip span{font:500 11.5px/1 'Jost',sans-serif;letter-spacing:.12em;color:#3a352c;text-transform:uppercase}
body.menu-hidechip .menu-chip{display:none}
/* ⚠️ Her live test 2026-08-10: with the keyboard open on the chat, the fixed
   chip rode up into the status bar and then popped back. iOS moves
   position:fixed elements against the VISUAL viewport while the keyboard is up
   and there is no CSS cure, so the chip stands down for exactly as long as the
   keyboard is on screen. ▶ Deliberately driven by visualViewport, NOT by focus:
   openChat() autofocuses the field, so a focus rule hid the chip the moment she
   arrived, before any keyboard existed. ▶ And deliberately GLOBAL, not chat
   only -- every screen with an input and the chip has the same latent problem
   (the wishlist add form, Refine, the restore field). */
body.kb-open .menu-chip{display:none}
.menu-veil{display:none;position:fixed;inset:0;z-index:9600;background:rgba(20,17,12,.45)}
/* Side padding 22 → 18 (2026-08-09, with her group-label pick): her phone's
   iOS text zoom wrapped "Refine your Preferences" even though it fits in a
   standard browser — the trim buys every row ~8px of zoom headroom. The
   one-line floor drops 213 → 205px; the drawer stays min(220px,70vw). */
.menu-panel{display:none;position:fixed;top:0;left:0;bottom:0;z-index:9610;width:min(220px,70vw);background:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);box-shadow:8px 0 30px rgba(0,0,0,.35);overflow-y:auto;padding:calc(12px + env(safe-area-inset-top,0px)) 18px 26px}
body.menu-open .menu-veil{display:block}
body.menu-open .menu-panel{display:block}
.menu-head{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.menu-logo{width:58px;height:auto;display:block}
/* the ✕ sits up in the panel's top-right CORNER (Cath, 2026-08-09) — absolute so
   it can hug the corner while its tap area still reaches a comfortable ~38x40px */
.menu-x{position:absolute;top:-6px;right:-12px;background:none;border:none;font-size:18px;line-height:1;color:#6f6a63;cursor:pointer;padding:10px 10px 12px 12px}
.menu-row{font:400 17px/1.2 'DM Serif Display',Georgia,serif;color:#1a1a1a;padding:11px 2px;border-bottom:1px solid rgba(33,30,26,.08);cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-homerow{border-top:1px solid rgba(33,30,26,.08)}
/* Promoted (2026-08-09, her pick "C" from a 4-way render — "too hard to read,
   too small, don't stand out"): the old 10.5px #8a8474 measured ~3.5:1 on the
   ivory, below the AA bar everything else clears. Items keep their serif —
   the labels were the only problem. Don't re-quieten. */
.menu-grp{font:600 12px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#4a463e;margin:18px 0 5px;padding:0 2px 5px;position:relative;display:inline-block}
/* Her pick "A" (2026-08-09, from a 3-way render): the short gold bar under each
   group name — the same mark as the Your Wishlist title and the wordmark's own
   underline in the drawer header, so the groups echo the logo above them.
   inline-block keeps the bar hugging the word, never spanning the drawer. */
.menu-grp::after{content:"";position:absolute;left:2px;right:-2px;bottom:0;height:2px;background:#D8A52E}
/* Catherine's signature heart (her ask, 2026-08-09, the Sally differentiation
   note in the navigation): the tiny tilted pink heart marks the rows that are
   HER OWN — her curation or her own voice. Her decorative signature mark,
   deliberately distinct from the outline save hearts on cards.
   ▶ THE RULE, NOT A LIST: a row wears it when a PERSON chose what is on it.
   Today that is Style Star Edit, Amazon Finds, What's Trending, My Story and
   Style Journal — 5 of 23 rows. Shop your Style, Your Wishlist, the Mall and
   the Wardrobe List are the app working, not Catherine speaking, so they carry
   no mark however much of her taste is inside them.
   ⚠️ THIS COMMENT USED TO NAME "the three rows ... Only those three rows" AND
   IT WAS ALREADY STALE — Style Journal had joined and nobody updated it, so the
   note forbade a spread that had already happened. A COUNT IN A COMMENT GOES
   STALE THE SAME WAY A COUNT IN A TEST DOES. Naming the rule survives.
   ⚠️ RESTRAINT IS STILL THE POINT: a maker's mark, not a sticker. 5 of 23 is
   already the ceiling — if a sixth row wants one, ask whether a person really
   chose its contents before adding it.
   🚨 AMAZON FINDS AND THE EDIT ARE A MATCHED PAIR BY HER OWN DESIGN (same
   frame, same foot, each naming the other), so they wear the mark together or
   not at all. One without the other is "a rule applied to one half", in the
   navigation. Asserted in findspage. */
.menu-ch{width:11px;height:11px;margin-left:5px;vertical-align:-1px;transform:rotate(11deg);fill:#F49AC1}
/* Her ask 2026-08-11, out of Sally's note: the hub rows should say a real
   person is behind this, the way the Menu rows already do. Same mark, same
   pink, same 11deg tilt as .menu-ch, and deliberately on the SAME TWO rows the
   Menu marks (the Edit and What's Trending) so the two surfaces can never
   drift apart.
   ▶ WHY NOT on the Mall and the Wardrobe List, which are also hers: their
   sub-lines now say "I" in words, and a mark earns its place most where the
   WORDS don't already carry it. The words do the work; the mark stays rare.
   ⚠️ Same restraint as the Menu (3 of 18 rows there, 2 of 10 here) -- a maker's
   mark, not a sticker. Don't spread it.
   ⚠️ margin-left is 0, NOT the Menu's 5px, and that is what makes the two MATCH
   rather than differ. .menu-ch sits in a plain block row, so its 5px margin is
   the whole gap. These titles are FLEX rows that already carry their own 6-7px
   gap for the arrow, so a 5px margin stacked on top of it and the mark sat
   ~11px out -- her catch from the render. Zeroing the margin leaves the flex gap
   alone at 5-6px, which is the Menu's spacing. ▶ If this ever looks wrong again,
   measure the PARENT'S gap first; the margin is not the only thing spacing it. */
.hub-ch{width:11px;height:11px;margin-left:0;vertical-align:-1px;transform:rotate(11deg);fill:#F49AC1;flex:none}
/* "Start here" signpost on Style Quiz, new visitors only (same gold as the New pills) */
/* ── A CONVERSATION IS WAITING (Kathy, 2026-08-24) ────────────────────────────
   Her words, twice now: not "the app lost my chat" but "it was gone or I
   COULDN'T FIND it." Nothing was ever lost — ss_chat holds her last 40 messages
   and openChat restores them — but the resume whisper lives ONLY on Welcome
   Back, so a woman who lands anywhere else has nothing telling her the
   conversation is still there. iOS discarding the Style Star tab under memory
   pressure (which is what her "the 3rd or 4th time" points at, as more store
   tabs pile up) drops her on Welcome Back rather than back in her chat.
   ▶ HER DESIGN, and the two marks do different jobs: the PINK STAR says WHO —
   the stylist, per her own mark system where a pink star is the stylist working
   and a pink heart is Catherine speaking — and the PALE YELLOW FILL says THIS
   ROW IS LIVE. Together they read at a glance instead of needing to be spotted.
   ⚠️ THE YELLOW IS MEASURED, NOT BORROWED. Her instinct was the wardrobe's own
   starred-row fill (#FAF1DA), which is the right family — but that page sits on
   the app's LINEN, and this drawer's paper is #FBFAF7, near-white, where the
   same fill reads 1.08:1 and only whispers. #F7E9C0 reads 1.16:1 here. Her pick
   of four rendered depths.
   ⚠️ AND THE CONTRAST NUMBER IS NOT A PASS/FAIL, which is worth knowing before
   anyone "fixes" it against the 4.5:1 bar: this is a FILL, not text. Row ink on
   it measures 14.4:1. Area also changes perceptibility — a 1px divider at 1.14:1
   genuinely vanishes (the wardrobe lesson) while a 44px band at 1.08:1 does not.
   ⚠️ THE FILL BLEEDS WITH A BOX-SHADOW, NOT A NEGATIVE MARGIN, and that is
   deliberate: the panel has 18px of side padding, and widening the ROW would
   drag its border-bottom out with it, so this one divider would sit wider than
   every other row's. The shadow paints the fill to the panel edges while the
   border stays exactly where its neighbours are. Zero layout cost. */
.menu-cw{display:none;width:11px;height:11px;margin-left:8px;vertical-align:middle;position:relative;top:-1px}
.menu-row.cw-on .menu-cw{display:inline-block}
.menu-row.cw-on{background:#F7E9C0;box-shadow:-18px 0 0 #F7E9C0,18px 0 0 #F7E9C0}
.menu-start{display:none;align-items:center;margin-left:9px;padding:2.5px 6px;border-radius:8px;background:radial-gradient(circle at 40% 35%,#FCE9AC,#E7BE52 62%,#C69214);box-shadow:0 0 0 1.5px #FBFAF7,0 0 6px 1px rgba(233,180,80,.7);color:#3a2c07;font:700 8px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;animation:wbNew 2.4s ease-in-out infinite;vertical-align:2px}
.menu-start.on{display:inline-flex}
/* the FAQ / Privacy / Terms letterhead logo sits top-left, exactly under the
   fixed Menu chip — give those heads room so the two never overlap */
.faq-head,.pp-head{margin-top:40px}
.dc-wrap{padding:0.5rem 0.5rem 1.5rem;text-align:center}
.dc-title{font-family:'DM Serif Display',Georgia,serif;font-size:28px;font-weight:400;color:#1a1a1a;margin-bottom:4px}
.dc-subtitle{font-size:14px;color:#777;line-height:1.6;margin-bottom:1.5rem;font-style:normal;padding:0 0.5rem}
.dc-item{background:#fff;border:1px solid #EFE7D2;border-radius:2px;padding:1.35rem 1.4rem 1.4rem;margin-bottom:1.05rem;text-align:left;position:relative;box-shadow:0 4px 20px rgba(60,50,20,0.055);overflow:hidden}
.dc-item-star{position:absolute;top:13px;right:14px;font-size:18px;line-height:1}
/* Her pick 2026-08-20 from four rendered options ("A3 with the 3:4"). INSET and
   framed rather than full-bleed, so the photo respects the card's own border,
   which is the display-case language the rest of the app already speaks. 3:4
   because a SQUARE crop cuts a full-length maxi off at the knee (measured on
   her own FARM Rio dress) and a card headed "Maxi Dress" must not show a midi.
   Photos BESIDE the text were rendered and rejected on measurement, not taste:
   her item names run 46-60 chars and already wrap 3-4 lines at FULL width, so a
   96-118px photo column pushed one name to seven lines and wrapped the Shop
   button to three. A photo can sit ABOVE this card's content, never beside it.
   🚨🚨 LICENSING, AND IT DECIDES WHICH ITEMS MAY CARRY A PHOTO AT ALL: a product
   photo is the retailer's copyrighted work. What licenses it is an AFFILIATE
   APPROVAL with that retailer, NEVER the fact that we link to the piece and
   never the fact that the image is technically fetchable. Those two are almost
   unrelated: Zappos, Target and Baby Gold all hand over an image to a script,
   and we have no relationship with any of them. So a photo goes ONLY on an item
   whose host is a key in _AFF_MID. GREP _AFF_MID BEFORE ADDING ONE. */
.wks-px{display:block;width:140px;max-width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:top center;margin:6px auto 4px;border:1px solid #E4D3A8;border-radius:2px;background:#F5EFE2}
.dc-item-px{display:block;width:100%;margin:0 0 14px;aspect-ratio:3/4;object-fit:cover;
  object-position:top center;background:#F5EFE2;border:1px solid #EFE7D2;border-radius:2px}
/* ▶ STACKED PAIR (2026-09-08, her idea): two views of ONE piece, one above the
   other, filling a card that a single wide-short photo leaves two-thirds empty.
   Built by _wkStarPxTag when an entry carries px2 — read the note there first.
   ⚠️ DELIBERATELY ONE RULE COVERING BOTH SURFACES. .wks-px is the Star card and
   .dc-item-px is the Edit, and they already share the 3:4 geometry above; giving
   the stack its own rule per surface is exactly how the Serpui bag ended up right
   on one screen and cut off on the other. One rule, both classes, always.
   The element is a DIV here rather than an IMG, so the object-fit/object-position
   on the rules above are inert on it — the halves carry their own below.
   Each half is a 3:2 box over a 3:4 source, which shows the bottom HALF of that
   source under cover. That is where a bottom-weighted product shot keeps its
   subject, and it is the only reason to stack in the first place. */
/* An honest note where cards would have gone: the search failed, or the
   month's ceiling was reached. Deliberately quiet and card-less — it must not
   look like a result. */
.find-note .find-head{font-family:'Lora',Georgia,serif;font-size:15px;color:#4a463e;
  line-height:1.6;margin:10px 0 4px}
.wks-px.is-stack,.dc-item-px.is-stack,.wet-px.is-stack{display:flex;flex-direction:column;overflow:hidden;gap:0}
/* ⚠️ .wet-px IS THE "More from the Edit" STRIP, ADDED TO THESE TWO RULES ON
   2026-09-10 RATHER THAN GIVEN ITS OWN — her catch, "the sunglasses photo is
   missing the other half", was the strip showing only the FIRST view of a
   stacked pair. ONE RULE, EVERY SURFACE, ALWAYS: a rule per surface is exactly
   how the Serpui bag ended up right on one screen and cut off on the next. */
.wks-px.is-stack>img,.dc-item-px.is-stack>img,.wet-px.is-stack>img{display:block;width:100%;height:50%;
  flex:0 0 50%;min-height:0;object-fit:cover;object-position:center bottom}
.dc-item-name{font-family:'DM Serif Display',Georgia,serif;font-size:20px;font-weight:400;color:#1a1a1a;line-height:1.28;margin:0 0 9px;padding-right:32px}
.dc-item-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px;margin-bottom:13px}
.dc-store{font:700 11px/1.3 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a8172}
.dc-price{font:700 13px/1 'Jost',sans-serif;letter-spacing:.03em;color:#C8971E}
.dc-item-note{font-family:'Lora',Georgia,serif;font-size:15.5px;color:#4a463e;font-style:normal;line-height:1.62;margin:0 0 17px;position:relative;padding-left:21px}
.dc-item-note::before{content:"\201C";position:absolute;left:-2px;top:-4px;font-family:'DM Serif Display',Georgia,serif;font-size:34px;color:#DFC271;line-height:1}
.dc-item-note::after{content:"\201D";font-family:'DM Serif Display',Georgia,serif;font-size:34px;color:#DFC271;line-height:0;vertical-align:-0.28em;margin-left:3px}
.dc-item-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:2px;font:700 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:#1a1a1a;color:#fff;border:1px solid #1a1a1a;box-shadow:inset 0 0 0 2px rgba(201,161,78,.5);text-decoration:none;transition:background .2s}
.dc-item-btn .dc-arr{color:#E4C86B;font-size:14px;transition:transform .2s}
.dc-item-btn .dc-bag{width:16px;height:16px;flex:0 0 auto}
.dc-item-btn:hover{background:#000}
.dc-item-btn:hover .dc-arr{transform:translateX(3px)}
.dc-disclosure{font-size:11px;color:#888;margin-top:1.5rem;line-height:1.6}
/* ===== Style Star Edit — boutique editorial glow-up (scoped to #s-dream) ===== */
/* ⚠️ BOTH curated pages, one rule. The Finds page is the Edit in a
   different colourway, so every rule that shapes the Edit's body copy,
   padding and controls names BOTH screens. A twin block is how the same
   photo ended up cropped on one screen and right on the next. */
#s-dream,#s-finds{background:#fff}
#s-dream .dc-wrap,#s-finds .dc-wrap{padding:0.5rem 0.5rem 2rem}
/* the page's own "elongated logo" title (mirrors the stylist-chat title treatment) */
/* ⚠️ THE TOP MARGIN IS CHIP CLEARANCE, NOT TASTE (her screenshot, 2026-08-11).
   The corner star is positioned relative to THIS block, so this one number moves
   the star and the title together while leaving Back exactly where it is (Back
   is an earlier sibling in normal flow, and an inline-block's margin does not
   collapse into it). At the old 8px the star's DRAWN path overlapped the fixed
   MENU chip -- its tip sat 5.9px above the chip's bottom edge and 35px inside it
   horizontally, on every width from 320 to 430. 24px puts 10.1px of clear air
   between them. Measure with scratchpad/editspace.js before changing it, and
   measure the star's PAINTED PATH, never its rotated bounding box. */
.dc-logo{font:400 30px/1.05 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.7px #1a1a1a;display:inline-block;position:relative;padding-bottom:11px;margin:24px 0 0;letter-spacing:.01em}
.dc-logo::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;background:#E0B84C}
.dc-logo::before{content:"";position:absolute;bottom:0.5px;left:67%;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
/* Style Star Edit: a little jewel star (gold with silver outline) pinned to the top-left corner */
/* ⚠️ MOVED 2026-08-22, HER CATCH, and it was measured on the DRAWN PATH not the
   rotated bounding box (which overstates by ~25px at -57deg -- the 2026-08-07
   lesson). The star's outline reached 10.3px INTO the S. It always overlapped a
   little, and capitalising "Style Star Edit" made the collision read: a capital
   is wider AND taller, so the letter grew toward the star from both sides.
   ▶ Now 10.7px CLEAR. ⚠️ Its two standing constraints were re-checked, not
   assumed: it still does not touch the fixed MENU chip, and its left edge sits
   at x=40 with the card's own edge far away. scratchpad/starmove.mjs re-runs
   the sweep if this ever moves again. */
.dc-corner-star{position:absolute;top:-40px;left:-67px;width:70px;height:70px;transform:rotate(-57deg);z-index:20;filter:drop-shadow(0 2px 3px rgba(120,90,20,.28))}
/* a touch of the entry button's turquoise, and the "not AI" promise */
.dc-tagline{display:flex;align-items:center;justify-content:center;gap:7px;font:700 11px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#0FA6B6;margin:14px 0 0;white-space:nowrap}
/* ⚠️ letter-spacing puts its space after the LAST letter too, so the right
   heart sat 2.2px farther from the words than the left one -- invisible to
   every box measurement (they use advance widths) and clearly visible to the
   eye. Her catch, 2026-08-10. The negative end margin cancels exactly that
   trailing space so both hearts sit symmetrically. Do not remove it. */
.dc-tagline span{margin-right:-.2em}
/* ⚠️ The flanking hearts are inline SVG (.pinkheart), NOT a text glyph. They
   were content:"\2665" pseudo-elements and iOS rendered them as the RED emoji,
   ignoring the CSS colour entirely (her screenshot, 2026-08-10). Every other
   pink heart in the app is already drawn as SVG for exactly this reason. Do
   not put a bare U+2665 back. */
.dc-tagline .pinkheart{width:14px;height:14px;flex:none}
/* Her ask 2026-08-11: tighten the air between CURATED BY CATHERINE and this
   paragraph (16px -> 8px). It also pays for half of the 16px the header just
   moved down, so the first product only shifts 8px. */
/* ⚠️ text-wrap:balance AND the .nb span are BOTH here on purpose, her catch
   2026-09-11: "let's fix how do 💕 is all by itself".
   ▶ SHE ASKED WHETHER TO SHORTEN THE WORDS AND THE ANSWER WAS NO. Her sentence
   is warm and it is HERS; a widow is a LAYOUT fault, so it is fixed in layout.
   Rewriting her copy to fit a phone would be this file's "never paraphrase her
   copy" rule broken for a line break.
   ▶ balance evens the lines at ANY width; .nb is the belt under it, keeping the
   last words welded to the heart on a browser too old for balance. A hand-typed
   &nbsp; tuned to ONE screen width would have looked fixed on the phone it was
   measured on and orphaned again on the next one -- she found this at a text
   size that did not match the render here, which is exactly that trap. */
#s-dream .dc-subtitle,#s-finds .dc-subtitle{font-family:'Lora',Georgia,serif;font-size:15.5px;color:#4a463e;line-height:1.65;margin:8px -0.5rem 0.9rem;font-style:normal;font-weight:600;padding:0;text-wrap:balance}
.dc-subtitle .nb{white-space:nowrap}
/* A CATEGORY HEADING on a curated page — her batch-adding ask, 2026-09-11.
   ▶ ONE RULE NAMING BOTH SCREENS, deliberately. The Serpui bag ended up right
   on one screen and cut off on the next because a shared design was given a
   rule per surface. Only /finds groups its pieces today; the Edit inherits the
   styling free for the day she wants it.
   ⚠️ IT IS A LABEL, NOT A PRODUCT NAME: Jost uppercase like .dc-tagline, never
   the DM Serif Display that .dc-item-name wears, so a heading can never be
   misread as a piece she chose. */
/* 🚨 HER CATCH ON THE LIVE PAGE, 2026-09-11: "the font is small on those, i almost
   missed them when I was scrolling." ▶ MEASURED, AND SHE FOUND A REAL HIERARCHY
   INVERSION: the heading was 11.5px against a 20px product name and a 15.5px note,
   so the SECTION LABEL WAS THE SMALLEST TEXT ON THE PAGE apart from the store line.
   A heading smaller than everything it governs cannot do its job, and on a page a
   woman SCROLLS it is the only thing telling her where she is.
   ✅ 16px, darker (#2e2b25), a wider 54px rule, and more air above (3.3rem vs the
   17px between two cards) so it reads as a divider rather than as something floating
   between two cards. ⚠️ IT STOPS AT 16: the product names are 20px and a label that
   reaches them starts competing with the pieces instead of organising them.
   🚨 16 AND NOT 15, AND A TEST IS WHY. At 15 the heading was still SMALLER than her
   15.5px note — it only LOOKED bigger because it is uppercase, bold and letterspaced.
   ▶ Optical weight is not size, and "it looks fine to me" is exactly the judgement
   that let an 11.5px heading ship in the first place. One more pixel makes the
   relation true rather than merely convincing.
   ▶ Three sizes were rendered at phone width and looked at before choosing.
   🚨 THE AIR CAME BACK DOWN ON 2026-09-11, HER SECOND CATCH ON THE SAME ELEMENT:
   "too much white space". The first pass put 53px above each heading against 17px
   between two cards — set apart, but shouting. Now 38px above and 19px below, so it
   still binds to the section it opens (twice the card gap above it, half that below)
   without leaving a hole in the page. ⚠️ THE TWO ASKS PULL AGAINST EACH OTHER — she
   asked for these headings to be HARDER to miss an hour earlier — so the floor is
   asserted in findspage: more air above a heading than between two cards, always.
   ▶ AND THE FIRST HEADING IS A DIFFERENT CASE: it follows the disclosure rather than
   a card, so it has nothing to separate from and takes 1.25rem. `.is-first` is
   stamped by the importer, because `:first-of-type` matches the first DIV rather
   than the first .dc-cat and quietly selects nothing here.
   ⚠️ ONE RULE, BOTH SCREENS — the Edit has no categories today, and the day she adds
   them they must look identical. Same lesson as the px2 stack. */
#s-dream .dc-cat,#s-finds .dc-cat{font:700 16px/1.3 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#2e2b25;margin:2.4rem 0 1.2rem;padding-bottom:11px;position:relative;display:block;text-align:center;text-wrap:balance}
#s-dream .dc-cat.is-first,#s-finds .dc-cat.is-first{margin-top:1.25rem}
#s-dream .dc-cat::after,#s-finds .dc-cat::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:54px;height:2.5px;background:#E0B84C}
#s-dream .dc-disclosure,#s-finds .dc-disclosure{font-family:'Lora',Georgia,serif;font-size:11.5px;color:#8a8172;margin:0 0 5px;line-height:1.65}
.dc-sign{font-family:'Dancing Script',cursive;font-weight:600;font-size:30px;color:#C8A24B;line-height:1.15;margin:1.7rem 0 0}
/* The third of her three sign-offs, matched to the other two: the gap was a
   TRAILING SPACE in the text node (7.8px). ⚠️ Position lives HERE, never
   inline, or the stylesheet loses to it. Grep .pinkheart on .cc-name,
   .story-sig and .dc-sign — the three must move together. */
#s-dream .dc-sign .pinkheart,#s-finds .dc-sign .pinkheart{margin-left:2px;vertical-align:-7px}
#s-dream .btn-outline,#s-finds .btn-outline{border-radius:2px;border-width:1.5px;max-width:260px;margin:1.3rem auto 0}
/* ▶ BOTH SCREENS SINCE 2026-09-11 — her ask that the two pages end the same way.
   ⚠️ AND IT IS 14px NOW, NOT 12.5px, HER CALL: "The curious line needs to be
   larger." Matching the line above it makes the two read as a pair of choices
   rather than a link and an afterthought. */
#s-dream .dc-trend-link,#s-finds .dc-trend-link{text-align:center;font:600 14px/1.5 'Jost',sans-serif;color:#0FA6B6;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:10px auto 0;padding:13px 2px;text-wrap:balance}
/* ⚠️ AN ARROW ALONE ON A LINE IS THE SAME FAULT SHE CAUGHT IN THE SUBTITLE, and
   a first pass at these two links CAUSED it by capping their width -- looking at
   the render is the only reason it did not ship. The arrow is welded to the word
   before it, so it can never strand at any width or any font. */
.dc-xlink .nb,#s-dream .dc-trend-link .nb,#s-finds .dc-trend-link .nb{white-space:nowrap}
.our-story-link{background:none;border:none;font-family:'DM Sans',sans-serif;font-size:13px;color:#6e6e6e;cursor:pointer;text-decoration:underline;margin-top:4px;letter-spacing:0.04em}
.our-story-link:hover{color:#666}
.story-wrap{padding:0.5rem 0.5rem 1.5rem;text-align:center}
.story-title{font-size:26px;font-weight:400;color:#1a1a1a;margin-bottom:1rem;font-family:'DM Serif Display',Georgia,serif}
.ss.story-mirror .logo-img{width:74px}
.ss.story-mirror .story-title{margin-bottom:0.2rem}
/* Her signature on her own page (2026-08-10). ONE heart, trailing the
   title -- the same placement as the Menu row that marks My Story as
   hers, and as her "With love, Catherine" sign-off below. Deliberately
   NOT flanking: flanking marks read as a label announcing authorship
   (the Edit's "CURATED BY CATHERINE"), and this page needs no announcing. */
/* ⚠️ The negative right margin is LOAD-BEARING and is the whole point: it
   takes the heart out of the line's width, so "My Story" centres on its
   own and the heart hangs off the end as an add-on. Without it the words
   sit left of centre by half the heart's width -- her catch, 2026-08-10,
   the same shape as the trailing-letter-space problem on the curated-by
   lines. margin-left is the visual gap; margin-right must cancel
   (margin-left + width) exactly. */
#s-story .story-title .st-ch{width:15px;height:15px;margin-left:5px;margin-right:-20px;vertical-align:2px;transform:rotate(11deg);fill:#F49AC1;display:inline-block}
/* Her ask (2026-08-10): close the gap between the tagline and "My Story". It was
   24px built from three separate paddings (.hdr bottom 8 + .inner top 8 +
   .story-wrap top 8). Scoped to the story skin so the tuned spacing on Welcome
   Back and the rest is untouched. */
.ss.story-mirror .hdr{padding-bottom:2px}
#s-story .story-wrap{padding-top:0}
.story-text{font-size:16px;color:#1a1a1a;line-height:1.75;margin-bottom:1rem;text-align:left;font-family:'DM Sans',sans-serif;font-weight:500}
.story-sig{font-family:'Dancing Script',cursive;font-size:28px;color:#1a1a1a;font-weight:600;text-align:center;margin-top:0.7rem;line-height:1.2}
/* Her heart tucks against the final e, matching the Contact sign-off. The gap
   was mostly a TRAILING SPACE in the text node (7.3px), invisible in the
   markup and invisible to a box measurement that includes it. ⚠️ Position
   lives HERE, never inline, or the stylesheet loses. */
#s-story .story-sig .pinkheart{margin-left:2px;vertical-align:-6px}
.story-manifesto{font-size:18px;font-weight:700;color:#1a1a1a;text-align:center;line-height:1.6;margin-top:0.5rem}
.story-heart{font-size:28px;text-align:center;margin:1rem 0}
/* Letterhead (FAQ + Privacy): small logo top-left, back top-right, title one line */
.faq-head,.pp-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 0.6rem}
.faq-lh-logo,.pp-lh-logo{width:66px;height:auto;display:block}
.faq-head .top-back,.pp-head .top-back{position:absolute;top:5px;right:8px;color:#666;z-index:20}
#s-faq .faq-head .top-back{top:3px;right:9px}
#s-faq .story-title{font-size:21px;text-wrap:balance;margin-bottom:1rem}
.faq-list{text-align:left;margin-top:0.5rem}
.faq-foot,.pg-foot{text-align:center;padding:1.1rem 0.3rem 0.2rem;margin-top:1.3rem;border-top:1px solid #f0f0f0}
.mall-foot{text-align:center;padding:0.9rem 0.3rem 0.5rem;margin-top:0.5rem}
.faq-item{padding:14px 2px;border-bottom:1px solid #eee}
.faq-item:last-child{border-bottom:none}
.faq-q{font-family:'DM Serif Display',Georgia,serif;font-size:17px;font-weight:400;color:#1a1a1a;margin-bottom:6px;line-height:1.3}
.faq-a{font-size:15px;color:#555;line-height:1.65}
.faq-a a,.faq-a span.lnk{color:#C8971E;text-decoration:underline;cursor:pointer}
/* Legal-page body links (Terms references the Privacy Policy) */
#s-terms .story-wrap p .lnk,#s-privacy .story-wrap p .lnk,
#s-terms .story-wrap p a,#s-privacy .story-wrap p a{color:#8A6410;text-decoration:underline;cursor:pointer}
.faq-sub{font-weight:600;color:#1a1a1a;margin-top:10px;margin-bottom:2px}
.faq-steps{margin:2px 0 4px;padding-left:1.25rem}
.faq-steps li{margin:4px 0}
/* ===== Contact page (2026-08-17) =====
   Built for affiliate applications: every network's form asks for a contact
   URL, and a reviewer checks that a real person can be reached. Two cards,
   one per audience, so a brand never has to read carefully to find which
   address is theirs. The gold-bordered cream card is the app's own language
   (the restore card, the wardrobe how-to, the Trending intro), so this reads
   as a page Style Star already knew how to make.
   Her voice on light paper is Lora upright 15.5px in #4a463e (the 2026-08-13
   rule), so the lead AND the closing line both wear it. */
.cc-lead{font:400 15.5px/1.65 'Lora',Georgia,serif;color:#4a463e;text-wrap:balance;margin:0 auto 18px;max-width:320px}
.cc-card{border:1px solid #9AA0A6;background:#fff;padding:15px 14px;margin:0 auto 12px;max-width:320px;text-align:center}
.cc-h{font:400 17px/1.25 'DM Serif Display',Georgia,serif;color:#1a1a1a;margin-bottom:5px}
.cc-w{font:400 13.5px/1.5 'Jost',sans-serif;color:#6b6355;margin-bottom:9px}
.cc-a{display:inline-block;background:#1a1a1a;color:#F2D889;border:1px solid #C99A2C;border-radius:999px;
  padding:10px 16px;font:600 15px/1 'Jost',sans-serif;letter-spacing:.01em;text-decoration:none;word-break:break-word}
.cc-sign{font:400 15.5px/1.6 'Lora',Georgia,serif;color:#4a463e;margin-top:18px;text-wrap:balance}
/* Her catch: "I read every message myself" never says who I is. Her NAME
   answers that; the LLC name answers a different question and belongs in the
   footnote position underneath. Same handwriting as her My Story sign-off. */
.cc-name{font-family:'Dancing Script',cursive;font-weight:600;font-size:26px;color:#1a1a1a;line-height:1.15;margin-top:4px}
.cc-llc{font:400 11.5px/1.5 'Jost',sans-serif;color:#6b6355;margin-top:16px;letter-spacing:.02em}
/* Her signature heart. ⚠️ The negative right margin is LOAD-BEARING: it cancels
   the heart's own footprint so the WORD "Catherine" centres on the page rather
   than the word-plus-heart group, which pushed the name 10px left. Same trick
   as #s-story .story-title .st-ch. The heart then overhangs to the right, which
   is what a handwritten sign-off does anyway.
   ⚠️ And the gap she wanted closed was DIAGONAL, not horizontal: the rects said
   1.4px and the ink measured closer still, but the "e" sits low while the heart
   sat at mid-height. Dropping it does most of the work. */
#s-contact .cc-name .pinkheart{margin-left:2px;margin-right:-19px;vertical-align:-6px}
/* Lift the title: tighter above and a little below (her call). Scoped, so the
   FAQ and the legal pages keep their own tuned spacing. */
#s-contact .pp-head{margin-bottom:0}
#s-contact .story-title{margin-bottom:6px;line-height:1}

/* ===== Style Journal (2026-08-26, her ask) =====
   Her long-tail articles, real crawlable content aimed at strangers who have
   never heard of Style Star -- the /story, /faq pattern reused for real
   writing instead of Q&A pairs. Same letterhead + display-case frame family
   as FAQ/Contact/Privacy/Terms (.journal-mirror joins that shared selector),
   so it reads as a page Style Star already knew how to make.
   Body copy is her VOICE (the 2026-08-13 standing rule): Lora upright 15.5px
   in #4a463e, no italics anywhere on light paper. This article is literally
   her speaking in first person, so it gets the same register as the Contact
   page's lead/sign-off rather than a separate "editorial" typeface. */
/* Her catch, 2026-08-26: the byline as one flowing sentence kept wrapping
   mid-clause no matter where the line broke, because it was carrying three
   separate jobs at once (who wrote it, two credentials, a link elsewhere).
   Her pick "D" from a 4-way render -- a real masthead, name/role/link each on
   their own line -- so it never depends on finding the right break point in
   a sentence at all. */
.jrnl-by-name{font:600 15px/1.3 'Jost',sans-serif;color:#3a352c;text-align:center;letter-spacing:.02em;margin-top:2px}
.jrnl-by-role{font:400 12.5px/1.5 'Jost',sans-serif;color:#8a8172;text-align:center;margin-top:3px;letter-spacing:.03em}
/* Same treatment as .jrnl-by-role on purpose (2026-08-28) -- reusing an
   already-shipped, already-readable color/size rather than picking a new one
   for one more line of quiet byline metadata. */
.jrnl-by-date{font:400 12.5px/1.5 'Jost',sans-serif;color:#8a8172;text-align:center;margin-top:2px;letter-spacing:.03em}
.jrnl-by-link{font:600 12px/1 'Jost',sans-serif;text-align:center;margin:9px 0 26px}
/* The share card, shown to readers too (2026-09-02, Cowork's corrected brief --
   the first version said no visual page changes; this supersedes that). Full
   width of the text column: a plain block child of .story-wrap needs no width
   math of its own, it just fills the same box every .jrnl-p already sits in. */
.jrnl-img{display:block;width:100%;height:auto;margin:0 0 24px}
.jrnl-p{font:400 15.5px/1.72 'Lora',Georgia,serif;color:#4a463e;text-align:left;margin:0 0 18px}
.jrnl-p b{font-weight:700;color:#3a352c}
.jrnl-ul{list-style:none;margin:0 0 18px;padding:0}
.jrnl-ul li{font:400 15.5px/1.72 'Lora',Georgia,serif;color:#4a463e;text-align:left;margin:0 0 12px;padding-left:18px;position:relative}
.jrnl-ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:#4a463e}
/* The Journal's quiz button IS the home page CTA (.hm-cta), her call 2026-09-01,
   with two deliberate differences and one hard constraint.
   ⚠️ NO .hm-cta-tile here (her call): the sliders icon belongs to the front door.
   ⚠️ It therefore has ~44px MORE room than the home page button, which is the
      only reason a 24-character label fits at all -- MEASURED, not assumed:
      "Take the Free Style Quiz" needs 188px.
   ⚠️ THE TIGHTER WIDTH/PADDING APPLIES AT EVERY WIDTH, not behind the 374px
      media query the home page uses. At exactly 375px the base padding left
      only 2px of margin, and this project has learned that a margin under
      ~10px in the sandbox is a WRAP on real Safari, not a pass.
   ⚠️ TWO-CLASS SELECTOR (.hm-cta.jrnl-quiz) is load-bearing: a single .jrnl-quiz
      ties with .hm-cta on specificity and LOSES on source order, so the padding
      silently did nothing. And the padding must be SYMMETRIC: .hm-cta's own
      7px/13px was offsetting the content box by 3px, which showed up as the
      words sitting 3px left of centre.
   ⚠️ The arrow carries a NEGATIVE right margin equal to its own width plus the
      gap, so the WORDS centre in the button and the arrow overhangs -- her
      "center the words and then add the arrow". Same trick as the Contact page
      signature. If the arrow or gap size changes, this number changes with it. */
.hm-cta.jrnl-quiz{width:calc(100% - 6px);padding:14px 8px;text-decoration:none;margin:44px auto 10px}
/* ⚠️ THE 44px/10px MARGINS RESTORE SPACING THE ELEMENT SWAP TOOK AWAY, they are not
   taste. The retired .jrnl-cta had margin:34px auto 0 and NO ring; .hm-cta's outermost
   box-shadow spreads 10px, so inheriting its 16px left only 6px of visible air above
   the button (measured) and cost 10px below. 44 minus 10 is the same 34px she already
   had, and the 10px bottom gives back what the ring ate. If the ring's spread changes,
   these change with it. She asked for the button to LOOK like the home page CTA, not
   for the page to reflow around it. */
.hm-cta.jrnl-quiz .hm-cta-arr{margin-right:-27px}
/* ⚠️ THE STAR SITS HIGHER HERE THAN ON THE HOME PAGE (her call: "lift the star up
   higher, it is crowding the arrow"). It was not merely crowding: MEASURED on the
   DRAWN path (getPointAtLength through getScreenCTM, never the rotated bounding
   rect, which overstates the star by ~11px here), the star's ink and the arrow's
   ink genuinely OVERLAPPED. The home page has no arrow under its star, which is
   why -24px is right there and wrong here.
   Every 4px of lift buys exactly 4px of clearance: -36 touches, -40 gives 2px,
   -44 gives 6px, -48 gives 9.6px, -52 gives 13.6px. HER PICK IS -44 from a
   five-way render: it sits MOUNTED ON THE CORNER the way the home page star does,
   which is what she asked for, while keeping real daylight from the arrow. -52
   was shipped first and she called it "too high" -- it reads as floating.
   ⚠️ THE ~10px SANDBOX FLOOR DOES NOT APPLY HERE and applying it is what caused
   the overshoot. That rule exists because TEXT measures differently in Chromium
   than in real Safari. These are two fixed-size SVG shapes with no text metrics
   anywhere in the measurement, so 6px really is 6px on her phone.
   ⚠️ Do NOT push it further RIGHT to solve this. Horizontal was never the
   constraint (46px of room to the screen edge at right:-18), and the arrow sits
   inside the button, so moving right walks the star toward the edge for nothing. */
.hm-cta.jrnl-quiz .hm-cta-seal{top:-41px;right:-21px}
/* At Display Zoom the label genuinely cannot fit on one line, and shrinking the
   font is the wrong trade for an 18-to-80 audience (the standing rule). Two
   balanced lines instead, and the arrow rejoins the flow so nothing overhangs. */
@media(max-width:330px){
  .hm-cta.jrnl-quiz .lbl{white-space:normal;text-wrap:balance;line-height:1.25;text-align:center}
  .hm-cta.jrnl-quiz .hm-cta-arr{margin-right:0}
}
.jrnl-lnk{color:#8A6410;text-decoration:underline;cursor:pointer}
.jrnl-h2{font:400 20px/1.32 'DM Serif Display',Georgia,serif;color:#1a1a1a;text-align:left;margin:32px 0 12px}
.jrnl-h2:first-of-type{margin-top:8px}
/* .jrnl-cta RETIRED 2026-09-01: the Journal quiz button became the home page CTA
   (her call: same squared frame, star, arrow). Rule deleted rather than left dead. */
/* ⚠️ EVERY JOURNAL SCREEN, and the list is the bug: article #2 (s-journal-fall-florida)
   was missing here, so its title wrapped with one word stranded on a third line while
   article #1's balanced fine. A new article MUST be added to this selector -- it is the
   one journal rule that is NOT driven by the JOURNAL_ARTICLES registry. */
#s-journal .story-title,#s-journal-hub .story-title,
#s-journal-fall-florida .story-title{text-wrap:balance}

/* Style Journal hub (built 2026-08-26): the article list is generated in JS
   from JOURNAL_ARTICLES, so adding an article is one entry in that array --
   never a second row hand-typed here.
   ⚠️ HER CALL, same day: the intro line ("Notes on style, from Catherine,
   personal stylist and founder of Style Star.") was DELETED -- her name and
   title already appear on the article's own byline one tap away, and she
   does not want it repeated here too. The title alone now leads straight
   into the list. And .pg-foot ALREADY draws its own hairline 1.3rem above
   itself, so with nothing between it and the list's own bottom border, a
   one-article hub had hairlines stacked within a few dozen pixels.
   margin-bottom here is what gives the footer room to read as its own
   separate block, not one more line crowded onto the list. */
.jhub-list{border-top:1px solid rgba(33,30,26,.1);margin-bottom:30px;margin-top:18px}
/* ⚠️ .jhub-row IS AN <a> (2026-09-01), not the plain onclick div it used to
   be -- a crawler needs a real href to find the article at all (there was no
   crawlable link to it ANYWHERE on the site before this; the only route in
   was sitemap.xml, which is no route at all for GPTBot/ClaudeBot/
   PerplexityBot, none of which run JavaScript). text-decoration + color are
   what keep an anchor from rendering browser-default blue and underlined --
   NOTHING about this row changed visually. Do not remove them. */
.jhub-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 2px;
  border-bottom:1px solid rgba(33,30,26,.1);cursor:pointer;-webkit-tap-highlight-color:transparent;
  text-decoration:none;color:inherit}
.jhub-row-title{font:400 18px/1.3 'DM Serif Display',Georgia,serif;color:#1a1a1a}
.jhub-row-arrow{flex:0 0 auto;color:#8A6410;font:600 15px/1 'Jost',sans-serif}
/* Her catch, same session, her own screenshot: with just ONE article the card
   is much shorter than the phone screen, so the footer sat high with a wide
   dead gap of blank white beneath it before the frame's own bottom edge. A
   flex column + min-height gives the card real presence on a short page, and
   margin-top:auto on the footer is what carries it down into that space --
   scoped to the hub alone, since the story/legal/article pages already have
   enough real content to fill a screen without any help. ⚠️ SELF-RETIRING BY
   DESIGN: once enough articles exist that the list alone clears 65vh, this
   rule does nothing at all -- nobody needs to remember to revisit it. */
#s-journal-hub .story-wrap{display:flex;flex-direction:column;min-height:65vh}
#s-journal-hub .pg-foot{margin-top:auto}

/* ── "Add as an App" page (her ask 2026-08-19, her pick "B" of three renders) ──
   A findable PLACE for the install invitation. The A2HS whisper only ever shows
   on WELCOME BACK, so a first-time visitor never meets it at all; a menu row is
   findable by name (the mom lesson).
   ⚠️ HER CALL AND IT IS THE COPY THAT MATTERS MOST: "Add to Home Screen" is iOS
   jargon, and people hear "home screen" and think WALLPAPER. So the menu row
   says "Add as an App" in plain words, and the page explains what her phone's
   own button will say and what it actually does.
   ⚠️ HER CALL: no letterhead logo here. The app icon sits inches below it, and
   the Menu chip (plus its Home row) still carries navigation.
   ⚠️ NOTHING on the iOS path may look tappable — Apple exposes NO install API,
   so a button-shaped thing there is a promise the platform cannot keep. Android
   alone gets a real button, off a real beforeinstallprompt event. */
#s-a2hs .pp-head{margin-bottom:0}
/* ⚠️ Removing the letterhead logo (her call) removed the thing that was holding
   the title clear of the fixed Menu chip. The chip sits at
   calc(10px + env(safe-area-inset-top)), so the title borrows the SAME env()
   and keeps 18px of clearance on every phone — in the sandbox the inset is 0
   and they merely touch, but on a real iPhone it is ~47px and the chip would
   land on the title. Don't replace this with a flat margin. */
#s-a2hs .story-title{margin-top:calc(18px + env(safe-area-inset-top,0px));margin-bottom:14px;line-height:1}
/* ⚠️ NO pink heart on this page, her call 2026-08-19: "it's not really my voice
   here." Correct by her own mark system — the tilted pink heart means CATHERINE
   SPEAKING, and this page is instructions. The Welcome Back whisper keeps its
   heart, because that one IS her voice. If a heart ever returns here it needs an
   explicit size: class="a2-h" is styled only under #a2hs, so unsized it renders
   at the SVG default, which is enormous. */
#s-a2hs .ap-body{text-align:center}
#s-a2hs .ap-home{display:flex;justify-content:center;gap:14px;align-items:flex-start;background:linear-gradient(160deg,#2b2740,#4a4364);border-radius:16px;padding:16px 12px 13px;margin:0 auto 18px;max-width:290px}
#s-a2hs .ap-slot{width:52px;text-align:center}
#s-a2hs .ap-slot img,#s-a2hs .ap-blank{width:52px;height:52px;border-radius:12px;display:block;margin:0 auto 5px}
#s-a2hs .ap-blank{background:rgba(255,255,255,.13)}
#s-a2hs .ap-cap{font:400 9.5px/1.2 'Jost',sans-serif;color:#fff;display:block}
#s-a2hs .ap-cap.dim{color:rgba(255,255,255,.35)}
#s-a2hs .ap-lead{font:600 16px/1.45 'Jost',sans-serif;color:#3a352c;text-wrap:balance;margin:0 0 8px}
#s-a2hs .ap-sub{font:400 14.5px/1.55 'Jost',sans-serif;color:#4a463e;text-wrap:balance;max-width:300px;margin:0 auto 18px}
#s-a2hs .ap-step{display:flex;align-items:flex-start;gap:10px;text-align:left;max-width:290px;margin:0 auto 11px;font:400 15px/1.5 'Jost',sans-serif;color:#4a463e}
#s-a2hs .ap-n{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid #D8A52E;color:#3a352c;font:600 12px/1 'Jost',sans-serif;display:flex;align-items:center;justify-content:center}
#s-a2hs .ap-step b{font-weight:600;color:#2a2620}
/* ⚠️ Her standing widow lever, and it needs display:block to work at all —
   text-wrap:balance only applies to block-level text, and this span is a flex
   item. Without it the pink heart is stranded alone on step 2's second line at
   390px. Measured: balance keeps it with the words at every width.
   ⚠️ "Choose Add to Home Screen" fits one line everywhere and would be the
   tidier geometry, but it drops "scroll down", which is load-bearing — an
   instruction that undercounts the real iOS flow is worse than none. She was
   offered that trade on 2026-08-08 and did not take it. */
#s-a2hs .ap-step > span:not(.ap-n){display:block;text-wrap:balance}
#s-a2hs .ap-chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:#F1ECE0;border:1px solid #D6C9A8;vertical-align:middle;position:relative;top:-1px;margin:0 1px}
#s-a2hs .ap-note{font:400 13.5px/1.5 'Jost',sans-serif;color:#6b6355;text-wrap:balance;max-width:296px;margin:15px auto 0}
#s-a2hs .ap-note b{color:#4a463e;font-weight:600}
#s-a2hs .ap-note + .ap-note{margin-top:9px}
/* Android only, and it is a REAL control backed by a real prompt event. */
#s-a2hs .ap-btn{display:inline-block;margin-top:2px;padding:12px 24px;border-radius:999px;background:#1a1a1a;border:1px solid #C99A2C;color:#F2D889;font:600 14.5px/1 'Jost',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* ===== Analyze-an-outfit upload screen — warm "framed gallery" glow-up ===== */
.ss.sqall{border-radius:0}
/* Outfit results: drop the app card's side margin so the full-bleed framed rooms reach the true screen edges */
body.res-fb{padding-left:0;padding-right:0}
/* Discover + Welcome Back: drop the app card's outer margin on all four sides so their
   full-bleed curtain/lacquer backgrounds reach the true screen edges, not just the card's. */
body.card-fb{padding:0}
/* Shift the whole visible assembly (gold rail + everything hanging/sitting below it) down
   together as one rigid unit, so nothing moves out of alignment with anything else. The
   screen's own background (curtain stripe / dark lacquer) stays put behind it, unmoved --
   the extra space revealed above is simply more of that same background, not a gap. */
.hm-shift{position:relative;margin-top:14px}
#s-photo{margin:-0.5rem -1.75rem -1.5rem;padding:16px 20px 14px;min-height:100vh;position:relative;overflow:hidden;color:#2a2620;font-family:'Jost',sans-serif;background-color:#f7f6f2;background-image:linear-gradient(180deg,rgba(48,43,32,.08) 0,rgba(48,43,32,0) 30px),repeating-linear-gradient(90deg,#ecebe4 0px,#fbfbf8 21px,#ecebe4 42px),linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 16%,rgba(184,172,150,.08) 100%)}
#s-photo .ph-rod,#s-photo-load .ph-rod{position:absolute;top:0;left:0;right:0;height:8px;z-index:6;background:linear-gradient(180deg,#FBF1C2 0%,#EAC24E 40%,#C89A2C 74%,#8a6a17 100%);box-shadow:0 4px 9px -3px rgba(120,90,20,.5),inset 0 1px 0 rgba(255,255,255,.6)}
#s-photo .ph-wrap,#s-photo-load .ph-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:356px;margin:0 auto}
#s-photo .ph-back{position:absolute;top:13px;right:6px;z-index:5;background:none;border:none;font:500 12.5px/1 'DM Sans',sans-serif;color:#666;cursor:pointer;padding:4px 2px;letter-spacing:.02em}
#s-photo .ph-back:hover{color:#1a1a1a}
/* Logo plaque hanging from the gold rod on two wires */
#s-photo .ph-hang,#s-photo-load .ph-hang{position:relative;width:auto;margin:12px auto 12px;padding-top:0}
#s-photo .ph-hang::before,#s-photo-load .ph-hang::before{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:1.8px;height:22px;background:#EACD68}
#s-photo .ph-hang::after,#s-photo-load .ph-hang::after{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);transform:translateX(-50%);width:6px;height:6px;border-radius:50%;border:1.5px solid #EACD68;background:transparent;z-index:2}
#s-photo .ph-wires,#s-photo-load .ph-wires{display:none}
#s-photo .ph-wires line,#s-photo-load .ph-wires line{stroke:#8b9299;stroke-width:1.15}
#s-photo .ph-wires circle,#s-photo-load .ph-wires circle{fill:none;stroke:#8b9299;stroke-width:1.3}
#s-photo .ph-logo-frame,#s-photo-load .ph-logo-frame{width:auto;padding:0;background:none;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center}
#s-photo .ph-charm,#s-photo-load .ph-charm{display:block;width:56px;height:56px}
#s-photo .ph-mast,#s-photo-load .ph-mast{position:absolute;top:41px;left:9px;z-index:6;font:400 19px/1 'DM Serif Display',Georgia,serif;color:#1a1a1a;-webkit-text-stroke:.35px #1a1a1a;padding-bottom:7px;display:inline-block}
#s-photo .ph-mast::after,#s-photo-load .ph-mast::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:#E0B84C}
#s-photo .ph-mast::before,#s-photo-load .ph-mast::before{content:"";position:absolute;bottom:-1.5px;left:50%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
/* ===== "Analyzing your outfit" screen — the lit "dressing-room studio" (#s-photo-load) ===== */
/* Analyzing screen shares the Studio background + gold rod + hanging logo of #s-photo */
#s-photo-load.studio{margin:-0.5rem -1.75rem -1.5rem;padding:16px 18px 22px;min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;font-family:'Jost',sans-serif;
  background-color:#f6f7f8;
  background-image:linear-gradient(180deg,rgba(38,42,48,.10) 0,rgba(38,42,48,0) 30px),repeating-linear-gradient(90deg,#e9ecee 0px,#fbfcfc 21px,#e9ecee 42px),linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 16%,rgba(150,158,166,.10) 100%)}
/* keep the screen hidden until it's the active screen (studio sets display:flex) */
#s-photo-load:not(.act){display:none}
/* reuse existing #s-photo .ph-rod / .ph-hang / .ph-wires / .ph-logo-frame for the top */

/* the lit reading frame */
.al-frame{position:relative;width:100%;max-width:330px;aspect-ratio:3/4;margin:22px auto 0;border:12px solid #191510;overflow:hidden;
  box-shadow:0 30px 40px -14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.3);
  background:radial-gradient(120% 90% at 50% 22%,#2a2521,#100d0b)}
.al-frame .al-hair{position:absolute;inset:0;border:1.5px solid rgba(201,162,78,.5);pointer-events:none;z-index:6}
/* bulbs — fully INSIDE the frame (in the dark gutter around the photo, like a real
   lit vanity; matches the outfit-results vanity hub). Half-out bulbs got clipped by
   the frame's overflow:hidden on real phones. */
.al-bulbs{position:absolute;z-index:7;display:flex}
.al-bulbs.top{top:5px;left:5px;right:5px;justify-content:space-between}
.al-bulbs.bot{bottom:5px;left:5px;right:5px;justify-content:space-between}
.al-bulbs.left{top:5px;bottom:5px;left:5px;flex-direction:column;justify-content:space-between}
.al-bulbs.right{top:5px;bottom:5px;right:5px;flex-direction:column;justify-content:space-between}
.al-bulb{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 37% 33%,#FFFBE3,#FFECA0 40%,#F3D262 70%,#D3B048);animation:alBulb 2.4s ease-in-out infinite}
/* photo */
.al-photo{position:absolute;inset:22px;border-radius:2px;overflow:hidden;background:#141019}
/* contain (not cover) so she sees her WHOLE framed photo head-to-toe while it analyzes —
   matching exactly what she cropped and what the results screen shows. A tall/narrow crop
   just gets a little dark matting on the sides, like a gallery mat. */
.al-photo img{width:100%;height:100%;object-fit:contain;display:block}
/* scanning beam */
.al-beam{position:absolute;left:0;right:0;top:-8%;height:78px;pointer-events:none;animation:alScan 3.4s ease-in-out infinite}
.al-beam .glow{position:absolute;inset:0;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(246,231,180,0) 0%,rgba(246,231,180,.10) 45%,rgba(255,240,195,.5) 100%)}
.al-beam .line{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(248,235,190,0),#FBEFC2 50%,rgba(248,235,190,0));box-shadow:0 0 12px 3px rgba(248,235,190,.7)}
/* captions */
.al-caps{align-self:stretch;margin:20px 0 0;text-align:center;z-index:8}
.al-caps .row{position:relative;height:32px}
.al-caps span{position:absolute;left:0;right:0;font:700 21px/1.3 'Jost',sans-serif;letter-spacing:.14em;color:#1a1a1a;text-transform:uppercase}
.al-caps .a{animation:alCapA 5s ease-in-out infinite}
.al-caps .b{animation:alCapB 5s ease-in-out infinite}
.al-dots{display:flex;gap:9px;justify-content:center;margin-top:13px}
.al-dots i{width:11px;height:11px;border-radius:50%;background:#9A7420;opacity:.45;animation:alDot 1.4s ease-in-out infinite}
.al-dots i:nth-child(2){animation-delay:.2s}
.al-dots i:nth-child(3){animation-delay:.4s}

@keyframes alBulb{0%,100%{opacity:.2;box-shadow:0 0 3px rgba(255,224,150,.35)}50%{opacity:1;box-shadow:0 0 13px 3px rgba(255,214,120,.95)}}
@keyframes alScan{0%{top:-8%}50%{top:86%}100%{top:-8%}}
@keyframes alCapA{0%{opacity:0}4%{opacity:1}44%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes alCapB{0%{opacity:0}50%{opacity:0}54%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes alDot{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* reduced motion: hold a static, dimmed reading frame (no beam sweep / pulsing) */
@media (prefers-reduced-motion: reduce){
  .al-bulb{animation:none;opacity:.9}
  .al-beam{animation:none;display:none}
  .al-caps .a{animation:none;opacity:1}
  .al-caps .b{animation:none;opacity:0}
  .al-dots i{animation:none;opacity:.7}
}
#s-photo .photo-upload-area{width:100%;max-width:300px;aspect-ratio:3/4;position:relative;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:0;background:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px),#FBFAF7;border:7px solid #1a1a1a;box-shadow:0 16px 32px -18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,154,52,.4);transition:transform .15s;user-select:none;-webkit-user-select:none;touch-action:auto}
/* Before a photo loads the frame scrolls the page like everything else. Once a
   photo is loaded we allow vertical page scroll (pan-y) — a one-finger up/down
   drag scrolls to the Analyze button — while pinch (2-finger) zoom and the crop
   handles still capture their own gestures. */
#s-photo .photo-upload-area.editing{cursor:grab;touch-action:pan-y}
#s-photo .photo-upload-area.editing:active{cursor:grabbing}
#s-photo .photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;padding:1rem;cursor:pointer}
#s-photo .photo-icon{font-size:40px}
#s-photo .photo-cta{font:600 20px/1.2 'DM Serif Display',serif;color:#1a1a1a}
#s-photo .photo-sub{font:italic 400 16.5px/1.35 'Lora',serif;color:#EC4899}
#s-photo .photo-hint{font:700 11.5px/1.5 'Jost',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#8a8176;max-width:230px}
#s-photo .photo-hint .ph-star{color:#E0B84C}
#s-photo .photo-preview{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;will-change:transform;pointer-events:none;-webkit-user-drag:none}
/* In-frame crop / zoom editor */
#s-photo .ph-edit{position:absolute;inset:0;pointer-events:none}
#s-photo .ph-hint{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);background:rgba(20,18,14,.62);color:#fff;font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.05em;padding:6px 11px;border-radius:999px;white-space:nowrap;transition:opacity .55s}
#s-photo .ph-change{position:absolute;top:9px;left:9px;pointer-events:auto;background:rgba(20,18,14,.6);color:#fff;border:none;font:700 10px/1 'Jost',sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:7px 10px;border-radius:999px;cursor:pointer}
#s-photo .ph-crop-btn{left:auto;right:9px}
#s-photo .photo-upload-area.cropmode .ph-crop-btn{background:#C79A34;color:#1a1a1a}
/* Adjustable crop box — pull the corners in to frame what to keep, then Done applies it */
#s-photo .ph-crop{position:absolute;display:none;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 9999px rgba(14,11,7,.5);cursor:move;touch-action:none}
#s-photo .photo-upload-area.cropmode .ph-crop{display:block}
#s-photo .ph-crop .ch{position:absolute;width:46px;height:46px;pointer-events:auto;touch-action:none}
#s-photo .ph-crop .ch::after{content:'';position:absolute;width:21px;height:21px;border:3px solid #F1DDA0}
#s-photo .ph-crop .ch-tl{top:-11px;left:-11px}#s-photo .ph-crop .ch-tl::after{top:13px;left:13px;border-right:none;border-bottom:none}
#s-photo .ph-crop .ch-tr{top:-11px;right:-11px}#s-photo .ph-crop .ch-tr::after{top:13px;right:13px;border-left:none;border-bottom:none}
#s-photo .ph-crop .ch-bl{bottom:-11px;left:-11px}#s-photo .ph-crop .ch-bl::after{bottom:13px;left:13px;border-right:none;border-top:none}
#s-photo .ph-crop .ch-br{bottom:-11px;right:-11px}#s-photo .ph-crop .ch-br::after{bottom:13px;right:13px;border-left:none;border-top:none}
/* Crop mode declutters: hide the Change button, move Done to bottom-center */
#s-photo .photo-upload-area.cropmode .ph-change:not(.ph-crop-btn){display:none}
#s-photo .photo-upload-area.cropmode .ph-crop-btn{top:auto;bottom:13px;left:50%;right:auto;transform:translateX(-50%);padding:9px 24px;font-size:11px}
/* Optional "where are you headed?" occasion picker */
#s-photo .occ-block{width:100%;max-width:300px;margin:9px auto 2px;text-align:center}
#s-photo .occ-q{display:flex;align-items:baseline;justify-content:center;gap:9px;font:400 20px/1.2 'DM Serif Display',serif;color:#1a1a1a;margin-bottom:9px}
#s-photo .occ-opt{font:700 10.5px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#9a938a}
#s-photo .occ-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:318px;margin:0 auto}
#s-photo .occ-chip{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid #1a1a1a;background:#fff;color:#3a352c;font:600 13.5px/1.15 'Jost',sans-serif;padding:6px 6px;border-radius:0;cursor:pointer;transition:all .18s;text-align:center;white-space:nowrap}
#s-photo .occ-chip.occ-skip-chip{white-space:normal;font-size:12.5px}
#s-photo .occ-chip:hover{border-color:#1a1a1a}
#s-photo .occ-chip.sel{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
#s-photo .occ-chip.occ-skip-chip{font-style:italic;color:#6a6355}
#s-photo .occ-chip.occ-skip-chip.sel{color:#fff;font-style:normal}
#s-photo #analyzeBtn{position:relative;display:block;text-align:center;width:100%;max-width:344px;margin:9px auto 0;padding:16px 14px;border:5px solid #1a1a1a;border-radius:0;cursor:pointer;background:#fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.45),inset 0 0 0 2px #EACD68;transition:filter .2s;line-height:0}
#s-photo #analyzeBtn:hover{filter:brightness(1.02)}
#s-photo #analyzeBtn .ph-spacer{display:none}
#s-photo #analyzeBtn .lbl{display:inline;font:700 19px/1 'Jost',sans-serif;letter-spacing:.01em;color:#1a1a1a;white-space:nowrap;vertical-align:middle}
#s-photo #analyzeBtn .ph-arr{display:inline-block;width:26px;height:26px;margin-left:10px;vertical-align:middle;stroke:#EACD68;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#s-photo .ph-foot{margin-top:12px;padding-top:11px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:11px;border-top:1px solid rgba(201,162,78,.3)}
#s-photo .ph-foot .lnk{font:400 14px/1 'Jost',sans-serif;color:#6f6a63;cursor:pointer}
#s-photo .ph-foot .lnk:hover{color:#1a1a1a}
#s-photo .ph-foot .st{color:#E6C24E;font-size:12px;line-height:1}
.sheet-backdrop{position:fixed;inset:0;background:rgba(20,16,8,0.32);z-index:9998;display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .3s ease}
.sheet-backdrop.show{opacity:1}
.sheet-card{width:min(404px,calc(100% - 18px));margin:0 auto 22px;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border:1px solid #d7d2c7;border-radius:0;box-shadow:0 18px 50px -12px rgba(20,16,8,.42);padding:1.7rem 1.2rem 1.55rem;transform:translateY(calc(100% + 44px));transition:transform .4s cubic-bezier(.2,.85,.25,1);position:relative;text-align:center}
.sheet-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(140,130,110,.32);pointer-events:none}
.sheet-backdrop.show .sheet-card{transform:translateY(0)}
.sheet-grab{display:none}
.sheet-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;background:#f3f0ea;border-radius:50%;font-size:18px;color:#999;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.sheet-x:hover{background:#e9e5dd;color:#666}
.sheet-title{font-family:'DM Serif Display',Georgia,serif;font-size:21px;font-weight:400;color:#1a1a1a;margin-bottom:6px}
.sheet-sub{font-size:14px;color:#555;line-height:1.5;margin-bottom:14px;max-width:376px;margin-left:auto;margin-right:auto}
.save-toast{position:fixed;right:10px;bottom:18px;z-index:9997;width:min(322px,calc(100% - 24px));background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border:1px solid #d7d2c7;border-radius:0;box-shadow:0 16px 40px -12px rgba(20,16,8,.4);padding:20px 20px 18px;transform:translateX(calc(100% + 24px));transition:transform .72s cubic-bezier(.22,.7,.25,1);display:none;text-align:center}
.save-toast::before{content:"";position:absolute;inset:7px;border:1px solid rgba(140,130,110,.32);pointer-events:none}
.save-toast.show{transform:translateX(0)}
.save-toast-title{font-family:'DM Serif Display',Georgia,serif;font-size:18px;font-weight:400;color:#1a1a1a;margin-bottom:6px;padding:0 22px}
.save-toast-sub{font-size:13px;color:#555;line-height:1.5;margin-bottom:12px}
.save-toast .stay-input{max-width:100%;width:100%;text-align:center;padding:11px 14px;font-size:14px}
.save-toast .btn-p{margin-top:10px;max-width:100%;padding:13px}
.mall-cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#1a1a1a;font-weight:700;margin:1.7rem 0 0.85rem;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.mall-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mall-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#ffffff,#fbfaf7);border:2.5px solid #161616;border-radius:0;padding:13px 13px 12px;text-decoration:none;transition:transform .2s,box-shadow .2s;min-height:112px;box-shadow:0 8px 18px -11px rgba(20,15,5,.5)}
.mall-card::before{content:"";position:absolute;left:4px;right:4px;top:4px;bottom:4px;border:1px solid rgba(22,22,22,.13);pointer-events:none}
.mall-card:hover{transform:translateY(-2px);box-shadow:0 12px 22px -11px rgba(20,15,5,.55)}
.mall-store{font-family:'DM Serif Display',Georgia,serif;font-size:16px;font-weight:400;color:#1a1a1a;margin-bottom:3px;line-height:1.2}
.mall-desc{font-size:13px;color:#5c574d;line-height:1.4}
.mall-go{font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:#B8901E;font-weight:700;margin-top:10px;display:flex;align-items:center;gap:5px}
/* Full-bleed painted white-brick wall + black-trimmed marquee sign */
#s-shop .mall-brick{position:relative;margin:-0.5rem -1.75rem -1.5rem;min-height:100vh;overflow:hidden}
#s-shop .mall-brick-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%}
#s-shop .mall-inner{position:relative;z-index:1;padding:12px 18px 34px}
#s-shop .top-back-wrap{margin:0 -2px 4px 0}
#s-shop .dc-disclosure{color:#6b6459;margin-top:10px;text-align:center}
#mallContent .mall-cat:first-child{margin-top:.8rem}
.mall-sign{position:relative;background:#fff;border:3px solid #161616;padding:15px 16px 17px;margin:21px 0 6px;text-align:center;box-shadow:0 11px 26px -15px rgba(20,15,5,.6)}
/* White+gold-outline star "light fixture", tilted, stuck onto the top-left corner of the sign (absolute, no layout shift) */
/* ⚠️ MOVED AND SHRUNK 2026-08-22, HER CATCH -- "especially Mall", and she was
   right: measured on the drawn path, this star reached 19.1px into the S, twice
   the Edit's overlap.
   🚨 IT COULD NOT SIMPLY MOVE. Going UP hits the fixed MENU chip at the very
   first step (every vertical candidate collided, measured). Going far enough
   LEFT alone puts its outline 3px from the screen edge. So the star comes left
   10px AND down from 104 to 88px, which clears the letter by 9.6px while
   keeping its left edge at x=17 -- still mounted on the sign's corner like a
   fixture, which is the whole idea, rather than floating off it.
   ⚠️ The 116px BOX is unchanged on purpose: it is the positioning frame, and
   only .mf-star inside it was resized. */
.mall-fixture{position:absolute;top:-30px;left:-26px;width:116px;height:116px;z-index:6;pointer-events:none}
.mall-fixture .mf-star{position:absolute;top:0;left:0;width:88px;height:88px;z-index:2;transform:rotate(-57deg)}   /* 104 -> 88, see .mall-fixture above */
.mall-sign-logo{font-family:'DM Serif Display',Georgia,serif;font-size:29px;color:#1a1a1a;-webkit-text-stroke:.6px #1a1a1a;display:inline-block;position:relative;padding-bottom:5px;letter-spacing:.01em}
.mall-sign-logo::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:3px;background:#E0B84C}
.mall-sign-logo::before{content:"";position:absolute;bottom:-1.5px;left:66%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F8EEC0,#DFB94E 58%,#AF811C);z-index:1}
.mall-sign-sub{font-size:13.5px;color:#5c574d;line-height:1.55;margin-top:10px}
.save-pin-wrap{text-align:center;margin:-0.4rem 0 1.25rem}
.save-pin{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#B08830;cursor:pointer;border:none;background:none;font-family:'DM Sans',sans-serif;letter-spacing:0.02em;padding:4px 8px}
.save-pin:hover{color:#8a6d20}
.save-pin span{text-decoration:underline;text-underline-offset:3px}


/* ===== Home (welcome) screen — "jewelry / dressing-room" design (Design handoff) ===== */
#s-wel{position:relative;padding:16px;margin:-0.5rem -1.75rem -1.5rem;min-height:100vh;font-family:'Jost',sans-serif;background-color:#28251F;
  background-image:
    radial-gradient(130% 72% at 50% 30%, rgba(255,244,222,.34) 0%, rgba(255,244,222,0) 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(0,0,0,.045) 2px, transparent 2px, transparent 7px),
    repeating-linear-gradient(to bottom,#28251F 0 54px,#F2EFE8 54px 108px);
  background-repeat:no-repeat,repeat,repeat;
  background-position:center,center,top;
  box-shadow:inset 0 0 80px rgba(0,0,0,.24)}
.hm-mirror{position:relative;display:flex;flex-direction:column;text-align:center;max-width:400px;margin:0 auto;
  border-radius:2px;border:14px solid transparent;
  border-image:linear-gradient(140deg,#eef1f4 0%,#c3cbd2 26%,#dee3e8 47%,#b4bcc4 70%,#d4dae0 100%) 1;
  box-shadow:0 0 0 1px #7c828a,inset 0 0 0 1px #8a9096,inset 0 0 0 2.5px rgba(255,255,255,.7),0 18px 26px -14px rgba(0,0,0,.3),0 6px 14px -10px rgba(0,0,0,.28);
  padding:18px 20px 24px;background-color:#FBFAF7;
  background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px)}
.hm-pendant{position:relative;align-self:center;width:100%;max-width:230px;height:150px;margin:-33px auto 10px;z-index:8;animation:ssRise .6s ease both}
.hm-post{position:absolute;top:-8px;width:6px;height:10px;border-radius:2px;background:linear-gradient(90deg,#6f757b,#b4babf 22%,#ffffff 50%,#cdd2d7 60%,#7c8288);box-shadow:0 2px 3px -1px rgba(0,0,0,.35)}
.hm-post.l{left:-30px}.hm-post.r{right:-30px}
.hm-rail{position:absolute;top:-2px;left:-33px;right:-33px;height:9px;border-radius:2px;background:linear-gradient(180deg,#fbfcfd 0%,#cbd0d4 22%,#868d93 46%,#eef0f2 52%,#a1a7ad 62%,#5e646a 86%,#868c92 100%);box-shadow:0 5px 9px -3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.hm-hook{position:absolute;top:-7px;left:50%;transform:translateX(-50%)}
.hm-star-wrap{position:absolute;top:14px;left:50%;width:150px;margin-left:-75px}
.hm-star-inner{position:relative;width:130px;height:130px;margin:-12px auto 0;display:flex;align-items:center;justify-content:center;transform:scale(1.24);transform-origin:top center}
.hm-star-inner>svg{position:absolute;filter:drop-shadow(0 2px 7px rgba(200,151,30,.28)) drop-shadow(0 9px 7px rgba(28,20,6,.22))}
.hm-star-inner img{height:56px;width:auto;position:relative;z-index:1;top:-6px}
.hm-h1{font:400 28px/1.12 'DM Serif Display',serif;color:#211E1A;margin:2px 0 0;text-wrap:balance;animation:ssRise .6s ease .16s both}
.hm-h1 i{font-style:italic;color:#1A1814}
.hm-sub{font:600 15.5px/1.4 'Jost',sans-serif;color:#26231F;margin:9px 0 0;animation:ssRise .6s ease .24s both}
.hm-body{font:400 13.5px/1.5 'Jost',sans-serif;color:#4a463e;margin:5px 4px 0;text-wrap:balance;animation:ssRise .6s ease .28s both}
.hm-cta{position:relative;display:flex;align-items:center;gap:9px;width:calc(100% - 26px);margin:16px auto 0;border-radius:0;cursor:pointer;background:#FCFAF4;
  padding:13px 13px 13px 7px;box-shadow:0 0 0 5px #B4BAC0,0 0 0 10px #ECD070,0 12px 22px -12px rgba(70,72,80,.5);animation:ssRise .6s ease .32s both}
.hm-cta .hm-cta-tile{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#EACD68;border:1px solid #B7BCC2}
.hm-cta .hm-cta-tile svg{width:23px;height:23px}
.hm-cta .hm-cta-body{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.hm-cta .lbl{position:relative;font:700 13.5px/1 'Jost',sans-serif;letter-spacing:.015em;text-transform:uppercase;color:#241d0c;white-space:nowrap}
/* ⚠️ MEASURED, NOT ASSUMED, 2026-08-26: at 320px (Display Zoom) the arrow's
   right edge sat 16px PAST the button's own frame -- the label needs 152px
   and the flex box for label+gap+arrow only had 121px. 375/360 are fine (the
   content still fits inside the outer button even though it's tight), so
   this is scoped to 320-class widths alone, never touched above 330px.
   Fixed by reclaiming space from CHROME (side inset, icon tile, gaps,
   padding), never from the label's own size -- a 4-word all-caps CTA label
   is exactly the kind of text worth shrinking last, not first. */
@media(max-width:330px){
  .hm-cta{width:calc(100% - 6px);padding:11px 7px 11px 4px;gap:4px}
  .hm-cta .hm-cta-tile{width:34px;height:34px}
  .hm-cta .hm-cta-tile svg{width:18px;height:18px}
  .hm-cta .hm-cta-body{gap:4px}
  .hm-cta .lbl{letter-spacing:0}
  .hm-cta-arr{width:15px;height:15px}
}
.hm-cta .hm-cta-arr{flex:0 0 auto;width:18px;height:18px;color:#D2AF48}
.hm-cta-seal{position:absolute;top:-24px;right:-18px;width:61px;height:61px;transform:rotate(-38deg);filter:drop-shadow(0 0 6px rgba(244,208,102,.6)) drop-shadow(0 3px 4px rgba(120,90,20,.4));z-index:3;transform-origin:center;animation:ssSealPop 1.1s cubic-bezier(.34,1.56,.64,1) 1s 1 both,ssSealShimmer 2.7s ease-in-out 2.3s infinite}
@keyframes ssSealPop{0%{transform:rotate(-38deg) scale(0);opacity:0}55%{transform:rotate(-2deg) scale(1.22);opacity:1}78%{transform:rotate(-15deg) scale(.94)}100%{transform:rotate(-38deg) scale(1);opacity:1}}
@keyframes ssSealShimmer{0%,100%{transform:rotate(-38deg) scale(1);filter:drop-shadow(0 0 6px rgba(244,208,102,.58)) drop-shadow(0 3px 4px rgba(120,90,20,.4)) brightness(1.04)}50%{transform:rotate(-38deg) scale(1.06);filter:drop-shadow(0 0 12px rgba(247,214,116,.92)) drop-shadow(0 3px 5px rgba(120,90,20,.4)) brightness(1.2)}}
@media (prefers-reduced-motion:reduce){.hm-cta-seal{animation:none}}
.hm-help{font:400 12.5px/1.55 'Jost',sans-serif;color:#4a463e;margin-top:5px;white-space:nowrap;letter-spacing:-0.2px}
#restoreSection{margin-left:-16px;margin-right:-16px}
.hm-help.first{margin-top:10px}
.hm-help b{color:#1A1814;font-weight:700;cursor:pointer}
/* ▶ CATHERINE'S VOICE, THE RULE (her call, 2026-08-13, from her own audit):
   everywhere she "speaks" with a pink heart on a LIGHT background, the text is
   Lora UPRIGHT 15.5px in the readable ink #4a463e — no italics anywhere (her
   instinct: the heart + the serif already say "personal"; italics only cost
   readability on an 18-80 audience), never smaller, never fainter. Surfaces:
   .dc-subtitle, .dc-item-note (quote marks kept), .wdr-trend-note, .wks-note,
   .ht-tip, .wdr-colorhint, .wml-cath, .rn-body, .hm-founder p. ⚠️ The DARK
   Welcome Back whispers (#wbNext, #a2hs) deliberately stay cream Jost 14px
   upright — her whisper register, tuned by her 2026-08-09; a serif's thin
   strokes shimmer on dark at this size. Two registers, one voice.
   ⚠️ Lora's UPRIGHT faces were added to the Google Fonts URL for this —
   before 2026-08-13 only the italic faces were loaded, which is WHY her voice
   kept ending up italic. Don't trim the 0,* weights out of the URL. */
.hm-founder{margin:15px auto 2px;max-width:352px;text-align:center;animation:ssRise .6s ease .34s both}
.hm-founder p{font:400 15.5px/1.65 'Lora',Georgia,serif;color:#4a463e;margin:0;text-wrap:balance;overflow-wrap:break-word}
.hm-founder .fnm{font-family:'Dancing Script',cursive;font-weight:700;font-size:20px;color:#1A1814;cursor:pointer;border-bottom:1px solid rgba(184,137,31,.5);line-height:1;padding-bottom:0}
.hm-divwrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 12px}
/* ✍️ HOW IT WORKS WAS RETIRED HERE — her call, 2026-08-21, after she stepped
   back and looked at the Discovery page critically: "I am not liking how we
   have HOW IT WORKS and then the sneak peak star of the week and then the
   Explore buttons. Something doesn't feel right with the set up."
   ▶ WHAT THE AUDIT FOUND, and it is the reusable half: THREE gold-caps
   dividers (HOW IT WORKS / STAR OF THE WEEK / OR EXPLORE) stacked within
   800px at IDENTICAL weight, so the page read as a LIST OF EQUALLY-IMPORTANT
   SECTIONS instead of a journey. Nothing said which mattered most.
   ▶ AND HOW IT WORKS WAS THE ONE TO CUT, because it repeated the page above
   it: step 1 "Take the style quiz" restated the giant .hm-cta 150px above,
   step 2's sub restated the .hm-h1 ("Discover your SIGNATURE style") and
   step 3's restated .hm-body ("personalized shopping, all in one place").
   ⭐ EXACTLY ONE of its six lines said something new — "12 quick questions,
   no wrong answers" — which answers the two silent objections a stranger
   has (how long, and what if I get it wrong). So that sentence SURVIVES as
   .hm-hiwline and the other five are gone.
   ⭐⭐ THE MEASURED PAYOFF, and it is why this beat cutting the block whole:
   the Star of the Week rose from y=702 (one pixel BELOW a 700px iPhone fold,
   so a stranger saw NONE of it) to y=560, putting ~140px of a REAL GARMENT
   on the first screen. Her two questions turned out to have one answer.
   ⚠️ ONE LINE at 390/375/360, TWO BALANCED lines at 320 (Display Zoom),
   deliberately: the font is NOT shrunk to force one line — readability beats
   an even line on an 18-80 audience, and this is the screen a stranger meets
   first. Her standing trade. If the wording ever grows, re-measure; do not
   reach for a smaller font.
   ⚠️ NO DIVIDER, no numbers, no header. The whole point was to stop it
   competing with the two dividers that remain. Don't dress it back up.
   ▶ The retired 1-2-3 (her Option B pick from welcome-compare.png, 2026-08-03)
   is recoverable from git history if she ever wants it back. */
.hm-hiwline{font:400 13.5px/1.6 'Jost',sans-serif;color:#5f5647;text-align:center;letter-spacing:.01em;margin:11px 14px 0;text-wrap:balance;animation:ssRise .6s ease .33s both}
.hm-hair{height:1px;width:34px}
.hm-hair.l{background:linear-gradient(90deg,transparent,#C9A24E)}
.hm-hair.r{background:linear-gradient(270deg,transparent,#C9A24E)}
.hm-divlbl{font:600 11px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#BC9022;white-space:nowrap}
.hm-shelves{display:flex;flex-direction:column;gap:13px;max-width:276px;margin:2px auto 0}
.hm-card{cursor:pointer}
.hm-cardrow{display:flex;align-items:flex-end;gap:12px;padding:0 4px 3px}
.hm-ic{flex:0 0 auto;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hm-ic svg{width:23px;height:23px}
.hm-ctext{flex:1;min-width:0;text-align:left}
.hm-ctitle{display:flex;align-items:center;gap:7px}
.hm-ctitle>span{font:600 18px/1.1 'Jost',sans-serif;color:#211E1A;white-space:nowrap}
.hm-arr{width:20px;height:20px;flex:0 0 auto}
.hm-csub{font:400 13.5px/1.4 'Jost',sans-serif;color:#453f37;margin-top:3px}
.hm-shelf{height:6px;border-radius:2px;background:linear-gradient(180deg,#FBFCFD 0%,#CBD0D4 22%,#868D93 46%,#EEF0F2 52%,#A1A7AD 62%,#5E646A 86%,#868C92 100%);box-shadow:0 7px 11px -6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.hm-brackets{display:flex;justify-content:space-between;padding:0 7px}
.hm-brk{width:12px;height:9px}
.hm-brk.l{clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#eef1f3,#90979d);box-shadow:-1px 1px 2px rgba(0,0,0,.28)}
.hm-brk.r{clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,#eef1f3,#90979d);box-shadow:1px 1px 2px rgba(0,0,0,.28)}
.hm-foot{margin-top:22px;padding-top:14px;border-top:1px solid rgba(33,30,26,.12)}
#s-wel #restoreForm{max-width:300px;margin:8px auto 0}
/* The "check your email" confirmation — Cath picked Option C from the rendered
   comparison (restore-{current,a,b,c}.png, 2026-08-09). The old version was
   12px #777, which measures 4.29:1 on this ivory: the only text on the welcome
   screen under the 4.5:1 AA bar, at the moment it matters most. The base rule
   below also lifts the plain status strings ("Please enter a valid email") out
   of that grey. ⚠️ Don't quieten these again — a confirmation she cannot read
   is not a confirmation. */
#restoreMsg{font-size:12.5px;color:#4a463e;margin-top:8px}
/* ⚠️ GOLD, NOT BRONZE (Cath, 2026-08-09): the first build used #C8971E on the
   accent bar and #8a6a14 on the envelope and she read both as BROWN on her
   phone — the documented trap that dark antique golds go brown at small sizes.
   Check any new gold here against #D8A52E / #E0B84C before using it.
   ⚠️ AND THE BAR IS GONE, also her call: one EVEN thin line all the way round,
   the same #D8A52E as the envelope. Don't reintroduce a heavier edge. */
#restoreForm .rc-card{background:linear-gradient(180deg,#FDF8EC,#F8F1DE);border:1px solid #D8A52E;border-radius:8px;padding:14px 14px 13px 15px;text-align:left;box-shadow:0 5px 16px -8px rgba(120,90,20,.5)}
#restoreForm .rc-h{display:flex;align-items:center;gap:8px;font:700 16px/1.2 'Jost',sans-serif;color:#1A1814;margin-bottom:6px}
#restoreForm .rc-h svg{width:19px;height:19px;flex:0 0 auto}
#restoreForm .rc-b{font:400 13px/1.55 'Jost',sans-serif;color:#3b372f}
/* the welcome-email fallback, quieter but never cut: MailerLite sends only once
   per person per 24h, so inside that window it is her only route back in */
#restoreForm .rc-q{display:block;font:400 12px/1.5 'Jost',sans-serif;color:#6b655a;margin-top:7px;padding-top:7px;border-top:1px solid rgba(216,165,46,.32)}
#restoreForm .rc-code{margin-top:9px;padding-top:9px;border-top:1px solid rgba(216,165,46,.32)}
#restoreForm .rc-cl{font:400 12px/1.5 'Jost',sans-serif;color:#4a463e}
#restoreForm .rc-crow{display:flex;gap:8px;margin-top:7px}
#restoreForm .rc-crow input{flex:1;min-width:0;font:600 15px/1.2 'Jost',sans-serif;letter-spacing:2px;color:#1A1814;background:#fff;border:1px solid #D8A52E;border-radius:6px;padding:8px 10px;text-align:center}
#restoreForm .rc-crow input::placeholder{font-weight:400;letter-spacing:0;color:#8a8474}
#restoreForm .rc-cbtn{font:600 13px/1.2 'Jost',sans-serif;color:#fff;background:#1A1814;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;flex:0 0 auto}
#restoreForm .rc-cbtn:disabled{opacity:.55}
#restoreForm #restoreCodeMsg{font:400 12px/1.5 'Jost',sans-serif;color:#4a463e;margin-top:6px}
#restoreForm #restoreCodeMsg:empty{display:none}
#restoreForm .rc-alt{font:400 12px/1.55 'Jost',sans-serif;color:#4a463e;margin-top:11px;text-align:center}
#restoreForm .rc-alt b{color:#1a1a1a;font-weight:600;text-decoration:underline;cursor:pointer}
@keyframes ssRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ssShimmer{0%,100%{opacity:.2}50%{opacity:.95}}
#s-wel [data-press]{transition:transform .13s ease,box-shadow .13s ease;-webkit-tap-highlight-color:transparent}
#s-wel [data-press]:active{transform:scale(.955)}
#s-wel [data-shelf]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .18s ease;-webkit-tap-highlight-color:transparent}
#s-wel [data-shelf]:hover{transform:translateY(-3px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
#s-wel [data-shelf].hm-tapped,#s-wel [data-shelf]:active{transform:scale(.9);filter:brightness(.88)}

/* ===== Welcome Back — "lit vanity" mirror design (Design handoff) ===== */
#s-wb{position:relative;padding:16px;margin:-0.5rem -1.75rem -1.5rem;min-height:100vh;font-family:'Jost',sans-serif;background-color:#0c0c0e;
  background-image:
    radial-gradient(120% 55% at 50% 12%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#171719,#0a0a0b);
  background-repeat:no-repeat,no-repeat;background-position:center,center;
  box-shadow:inset 0 0 90px rgba(0,0,0,.5)}
#s-wb .hm-room{position:relative;padding-top:0;max-width:400px;margin:0 auto}
/* silver mirror frames (greeting on top, actions below). The greeting frame sits just a
   hair below the gold rail -- no floating pendant above it anymore. */
#s-wb .wb-mirror{position:relative;text-align:center;border:8px solid #D8DDE2;
  background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px)}
#s-wb .wb-greet{background:#FFFFFF;z-index:1;border-width:11px;margin-top:0;padding:0 30px 8px;overflow:visible;
  box-shadow:0 24px 26px -14px rgba(0,0,0,.6),0 0 0 1px #7c828a,inset 0 0 0 1px #8a9096,inset 0 0 0 2.5px rgba(255,255,255,.7),inset 0 2px 6px rgba(255,255,255,.5)}
/* Chain + name render as ONE stack ON TOP of the greeting frame (higher z-index). The
   chain is a single SVG (top ring wrapping the gold rail, a run of small tightly
   overlapping links, a bottom ring for the star's bail) -- one piece, so it can never
   drift apart the way separately-positioned pieces did before. top:-30px is calibrated
   so the top ring's center lands on the gold rail's center (measured, not eyeballed).
   Her name sits lower, crossing the lower half of the chain, closer to the star. */
#s-wb .wb-chainstack{position:absolute;left:50%;top:-25px;transform:translateX(-50%);width:26px;z-index:10;pointer-events:none}
#s-wb .wb-chainsvg{display:block;width:26px;height:20px}
#s-wb .wb-chainname{position:absolute;left:-115px;right:-115px;top:25px;height:34px;display:flex;align-items:center;justify-content:center;
  font:400 22px/1.1 'DM Serif Display',serif;color:#211E1A;padding:0 8px;white-space:nowrap}
/* when she hasn't given her name: no label on the chain (the chain itself is unchanged --
   its length doesn't depend on whether we know her name) */
#s-wb.wb-noname .wb-chainname{display:none}
#s-wb .wb-chainspace{height:30px}
#s-wb .wb-acts{border:none;margin-top:0;padding:0;background:none;box-shadow:none}
#s-wb .wb-sweep{position:absolute;top:0;bottom:0;left:0;width:100%;background:radial-gradient(ellipse 62% 130% at 50% 50%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%);pointer-events:none;z-index:9;opacity:0}
#s-wb .wb-greet .wb-sweep{animation:wbBloom 2s ease .3s both}
#s-wb .wb-acts .wb-sweep{animation:wbBloom 2s ease .45s both}
#s-wb .wb-starcast{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(38,26,6,.10),rgba(38,26,6,0) 68%);filter:blur(5px);pointer-events:none}
/* vanity bulbs down each inner edge */
#s-wb .wb-bulbs{position:absolute;top:16px;bottom:16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;z-index:7}
#s-wb .wb-bulbs.l{left:11px;animation:wbBulbOn 1.2s ease-out .15s both}
#s-wb .wb-bulbs.r{right:11px;animation:wbBulbOn 1.2s ease-out .3s both}
/* all bulbs breathe together, in unison — a calm, uniform vanity glow */
#s-wb .wb-bulb{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 37% 33%,#FFFBE3,#FFECA0 38%,#F3D262 68%,#D3B048);box-shadow:0 0 8px 2px rgba(244,214,120,.75),0 0 3px rgba(255,238,180,.9),0 0 0 1px rgba(175,145,60,.4),inset 0 -1.5px 2px rgba(158,128,52,.45);animation:wbTwinkle 3.4s ease-in-out infinite}
/* greeting copy */
#s-wb .wb-h1{position:relative;z-index:8;font:400 27px/1.14 'DM Serif Display',serif;color:#211E1A;margin-top:4px}
#s-wb .wb-msg2{position:relative;z-index:8;font:400 14.5px/1.5 'Jost',sans-serif;color:#6b655a;margin:8px 2px 0}
/* primary CTA reuses .hm-cta (black/gold + shimmer); block width inside the actions mirror.
   The .wbx wrapper drives the reveal fade-in, so keep the CTA itself always visible
   (immune to the shared .hm-cta reveal opacity rules) — otherwise it can stay hidden. */
/* shelf actions */
#s-wb .wb-list{display:flex;flex-direction:column;gap:7px;margin-top:3px}
#s-wb .wb-item{position:relative;cursor:pointer}
#s-wb .wb-row{display:flex;align-items:flex-end;gap:11px;padding:0 5px 2px}
#s-wb .wb-chip{position:relative;width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center}
#s-wb .wb-chip svg{width:17px;height:17px}
#s-wb .wb-chip.dark{background:linear-gradient(180deg,#33302A,#201D19);border:1px solid rgba(214,169,70,.45);box-shadow:0 3px 7px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(233,196,110,.15)}
#s-wb .wb-lbl{flex:1;text-align:left;min-width:0}
#s-wb .wb-lbl .tt{display:flex;align-items:center;gap:6px}
#s-wb .wb-sub{display:block;font:400 14px/1.4 'Jost',sans-serif;color:#453f37;margin-top:3px}
#s-wb .wb-lbl b{font:600 18px/1.05 'Jost',sans-serif;color:#211E1A;white-space:nowrap}
#s-wb .wb-arr{width:20px;height:20px;flex:0 0 auto}
/* Catherine's whisper (the next-step concierge). Cream on the dark boutique
   background; the gold bold is the tap target's visual cue, the whole line taps. */
/* ✕ out of flow so the whisper centers true — same fix as .refine-next. */
#wbNext{display:none;position:relative;margin:10px 14px 2px;padding:0 22px;text-align:center}
#wbNext.on{display:block}
/* 14px UPRIGHT (2026-08-09, her catch: "really small and hard to read") — the
   same medicine the A2HS whisper got on 08-08: italic cream at 12.5px on the
   dark background is the measured worst case. All three whispers now match.
   At 14px her sentences honestly hold 3 balanced lines; 2 would need smaller
   type, and readability wins on this audience. Don't re-shrink or re-italicize. */
#wbNext .wbn-t{display:block;font:400 14px/1.6 'Jost',sans-serif;color:#E8E2D2;cursor:pointer;text-wrap:balance}
#wbNext .wbn-t b{font-weight:600;color:#F2D889;border-bottom:1px solid rgba(242,216,137,.55);font-style:normal}
/* ▶ THE HEART-TILT SYSTEM (her consistency sweep, 2026-08-13): every heart
   that TRAILS a sentence in her voice tilts 12deg (the .pinkheart family);
   the maker's-mark hearts on rows/titles (.menu-ch/.hub-ch/.st-ch) keep
   their her-approved 11deg; the Catherine's-pick badge keeps its deliberate
   LEFT tilt (her spec). No heart sits straight. */
#wbNext .wbn-h{width:12.5px;height:12.5px;vertical-align:-1px;transform:rotate(12deg)}
#wbNext .wbn-x{position:absolute;left:0;top:2px;padding:3px;cursor:pointer}
#wbNext .wbn-x svg{width:15px;height:15px;display:block;stroke:#a09a8e}
/* ⭐ THIS WEEK'S STAR — a linen card on the dark band between the mirrors (ink
   on that background is unreadable, the whisper lesson; the card brings its own
   paper). 1px even gold border (her even-thin-border rule), squared corners
   (her squared-cards preference), black-lacquer + gold "Shop it" pill = the
   app's own action language on this same screen (the marquee CTA). The note is
   HER voice, so it carries her tilted pink heart (the mark system: pink tilted
   heart = Catherine herself speaking). Label + note in the readable ink
   #4a463e — a gold label at 11px goes brown (the standing small-gold trap). */
/* ⭐ THE GOLD LEAF FRAME (her pick "E" from a two-round render, 2026-08-20).
   TWO things are load-bearing here and neither is decoration:
   1. WIDTH. Measured: both mirrors run 16->374 and this card used to run
      30->360, so it was 28px NARROWER than everything else on the front door
      and she saw it. The 14px margin is now 7px -- exactly the frame's own
      thickness -- so the framed OUTER edge lands on 16/374, flush with the
      mirrors. ▶ If the frame thickness ever changes, THIS MARGIN CHANGES WITH
      IT or the alignment silently breaks. starframe.js asserts it at four widths.
   2. THE GOLD IS A GRADIENT, NOT A FLAT FILL, and that is the whole reason it
      reads as metal. Round one used flat #CFA02E/#8a6a14 and she said it looked
      "a bit orange or brown" -- the standing antique-gold trap. A flat mid-gold
      at frame scale ALWAYS reads brown; a highlight-to-shadow ramp reads as
      gold leaf. This is the wb-chip's own gradient, the brightest gold already
      on this screen. ▶ NEVER flatten it, and never reach for an antique gold. */
#wbStar{display:none;margin:12px 7px 2px;position:relative;z-index:0}
#wbStar.on{display:block}
.wks-card{background:#fff;border:1px solid #D8A52E;padding:10px 16px 13px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.28);position:relative}
/* Drawn as an absolutely positioned ::before at inset:-7px, never as padding or
   a border, so the frame costs ZERO height -- this is the front door and the
   fold is ~700px. ⚠️ The z-index:0 lives on #wbStar, the PARENT, deliberately:
   a negative-z child paints ABOVE its own stacking context's background, so
   putting it on .wks-card makes the gradient cover the white paper. */
.wks-card::before{content:'';position:absolute;inset:-7px;z-index:-1;
  background:linear-gradient(150deg,#FEEF98 0%,#F6CE3E 46%,#E4B02E 78%,#F3DC8B 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.45)}
/* Her pick "C" from the 2026-08-13 three-way render: TWIN tilted stars
   flanking the label — the CURATED BY CATHERINE treatment, in gold. Flanking
   marks read as a label announcing something, which is exactly what this is. */
.wks-lbl{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Jost',sans-serif;font-size:19px;font-weight:700;letter-spacing:.10em;color:#4a463e}
.wks-lbl svg{width:22px;height:22px;flex:0 0 auto;filter:drop-shadow(0 0 2px rgba(224,184,76,.6))}
/* Cancels the trailing letter-space so the two stars sit the same distance from
   the words. In em so it tracks the step-down below. See the note at the markup. */
.wks-lbl-t{margin-right:-.066em}
/* ⚠️ THE STEP-DOWN IS NOT OPTIONAL. Measured: at 320px (Display Zoom) every size
   from 16px up wraps to two lines, which strands a star on its own row. 15px is
   the largest that holds one line there. Her own standing trade elsewhere is to
   accept a wrap rather than shrink type, but a wrapped caps label with flanking
   stars breaks the ornament, so this one steps down instead. */
@media(max-width:344px){
  .wks-lbl{font-size:15px;letter-spacing:.08em;gap:5px}
  .wks-lbl svg{width:18px;height:18px}
}
/* HER CATCH, 2026-08-25, twice over, and the fix is HER PICK "E". The two stars
   measured identical to the pixel on her own phone (same top row, same bottom
   row, 58 device px tall each, shapes 99.7% the same) and she STILL read the
   right one as sitting lower. She was right, and the cause was that ROTATION IS
   NOT REFLECTION: the star's gradient highlight USED to be off-centre (cx 42%),
   so turning one star -12deg and the other +12deg carried the SAME off-centre
   highlight round two different arcs instead of mirroring it. Measured: the two
   highlight x positions summed to 88.6% where a mirrored pair sums to 100, and
   the right star's bright spot sat 0.51 CSS px HIGHER, which drops its visual
   weight.
   ⚠️ THE FIX IS IN _wksStarSvg: cx IS 50% NOW. With the highlight on the star's
      own centre line, turning and flipping give the same answer, so the pair
      mirrors whatever the tilt is. Do not "restore" cx to 42%; that is the bug,
      and no box measurement can see it.
   ⚠️ She chose this over flipping the right star (scaleX(-1)), which measured
      identically. Centring the light also fixes the Discovery page's pair,
      which shares the same builder and carries no tilt at all.
   The -.5px is the other half of the same catch: the pair is mirrored and the
   word is not (it opens on S, closes on K), so the ink came 1 CSS px closer on
   the left. Re-run scratchpad/starlit.mjs and starlean.mjs after any change. */
.wks-lbl svg.l{transform:rotate(-12deg)}
.wks-lbl svg.r{transform:rotate(12deg);margin-left:-.5px}
.wks-name{font-family:'DM Serif Display',serif;font-size:17.5px;line-height:1.25;color:#1a1a1a;margin:7px 0 3px;text-wrap:balance}
.wks-store{font-family:'Jost',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.13em;color:#5f5647;text-transform:uppercase}
.wks-note{font-family:'Lora',Georgia,serif;font-style:normal;font-size:15.5px;line-height:1.55;color:#4a463e;margin-top:7px;text-wrap:balance}
.wks-note .wks-ch{width:11px;height:11px;fill:#F49AC1;transform:rotate(12deg);display:inline-block;vertical-align:-1px}
/* 🚨 QUOTE MARKS ON HER STAR NOTE — her ask, 2026-08-24 ("let's put quotes
   around my comment on Star of the Week"), and the SAME treatment the Style Star
   Edit already gives her notes: DM Serif Display, gold #DFC271. Matching rather
   than inventing a second quote style is the whole point -- her voice should look
   the same wherever she speaks.
   ⚠️ INLINE HERE, where the Edit's are HANGING, and that is forced by alignment
   not taste: .dc-item-note is left-aligned so its opening quote is positioned
   absolutely at left:-2px and hangs into the margin. This note is CENTRED, so an
   absolute quote would strand itself at the block's left edge, yards from the
   words it belongs to.
   ⚠️ THEY WRAP .wks-q, NOT .wks-note, so the closing quote lands after her WORDS
   and BEFORE her pink heart. The heart is her signature, not part of the
   sentence -- ::after on the note itself would have put it outside the quotes.
   ⚠️ line-height:0 keeps a 26px glyph from growing the line box. The Star card's
   whole design constraint is that it clears the iPhone fold (her 140px pick,
   2026-08-20), so the note must not gain height. MEASURED after this change.
   ⚠️ em units, so they scale with #dsStar's smaller 14px note automatically. */
.wks-q::before{content:"\201C";font-family:'DM Serif Display',Georgia,serif;font-size:1.7em;color:#DFC271;line-height:0;vertical-align:-0.24em;margin-right:1px}
.wks-q::after{content:"\201D";font-family:'DM Serif Display',Georgia,serif;font-size:1.7em;color:#DFC271;line-height:0;vertical-align:-0.24em;margin-left:1px}
/* 🚨 HER CATCH, 2026-08-24: "The end quote appears to be farther away than the
   start quote." She was right, and the SPECIFIED margins are symmetric (1px
   each), so a box measurement agrees with the code and disagrees with her eye.
   The 2026-08-10 curated-by-hearts lesson again: RASTERISE AND COUNT INK.
   ▶ MEASURED at 4x on the live card, gap from the quote to the nearest TALL ink:
     opening quote -> her first word            3.75px
     closing quote <- a note ending in "."      7.00px   <- her eye, exactly
     closing quote <- a note ending in "!"      4.25px
     closing quote <- a note ending in a letter 3.50px
   ▶▶ THE CAUSE IS THE PERIOD, AND IT IS ONLY THE PERIOD. A full stop sits alone
   on the baseline, so it fills nothing at cap height where the quote hangs --
   the COLUMN gap is a healthy 3.25px while the gap the EYE reads is 7.00. A "!"
   or a letter reaches up and closes it without help.
   ⚠️ SO THE FIX IS CONDITIONAL, NOT A FLAT NEGATIVE MARGIN. 13 of her 20 Star
   notes end in ".", 6 end in "!" and 1 in a letter -- pulling the quote in
   unconditionally would crush the other seven. _wksNoteHTML adds .wks-q-lo only
   when the note ends in a low mark.
   ⚠️ em, not px, so it scales with #dsStar's smaller 14px note, the same reason
   the quotes themselves are in em.
   ⚠️ -0.088em WAS TUNED AGAINST THE MEASUREMENT, NOT PICKED. The first try
   (-0.145em) OVERSHOT to 2.25px, and the reason is worth knowing: the note is
   CENTRED with text-wrap:balance, so changing the closing quote's margin changes
   the line width and therefore the centring offset -- the gap does not move
   1:1 with the margin. AFTER: a "." ending measures 3.50-3.75px across several
   notes, against the opening's 3.75 and an unchanged 4.25 for "!" and 3.50 for a
   letter. All four endings now sit in one band.
   ▶ scratchpad/quotegap.mjs re-runs the whole measurement. */
.wks-q.wks-q-lo::after{margin-left:-0.088em}
.wks-act{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:11px}
.wks-shop{display:inline-flex;align-items:center;gap:6px;background:#1a1a1a;color:#F2D889;border:1px solid #C99A2C;border-radius:999px;padding:9px 19px;font-family:'Jost',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-decoration:none}
#wbStar .wl-save{cursor:pointer}
/* 14px, not 7: the gold leaf frame spreads 7px BELOW the card and .wks-disc is
   #wbStar's own next child, so at 7px the disclosure sat exactly ON the frame's
   bottom edge (measured gap 0 at 390/375/360/320). This buys it 7px of air. */
.wks-disc{font-family:'Jost',sans-serif;font-size:11px;line-height:1.4;color:#CFC9BB;text-align:center;margin-top:14px}
/* MORE FROM THE EDIT (2026-08-26, her idea — "would it be possible to have
   The Edit items slide sideways... have the Star of the week on the front
   page and the rest slide over as Edit pages"). Her pick "A" from a 3-way
   render: this sits BELOW the untouched Star card, on the same dark Shop
   mirror background #wbStar's own .wks-disc already lives on. Cards reuse
   the .wdr-tt-* proportions from What's Trending's own teaser strip, just
   narrower (108px, five at a time reads better than three at this card's
   simpler content).
   ⚠️ THE LABEL WAS FIRST SHIPPED AT .hm-divlbl's gold (#BC9022) — readable
   here, but her live catch: "let's make it match the same color as the
   button that says Read your full Style Portrait. It is a brighter gold,
   less brown." Now #F2D889, the .wb-port-cta button's own text color
   (13.92:1 on this #0c0c0e background, up from 6.65:1 — brighter AND still
   comfortably AA either way, so the swap cost nothing on readability).
   ⚠️ AND THE SWIPE HINT: her ask, same message — "add an arrow so she knows
   that row slides." Reuses the house pattern already proven on What's
   Trending's own teaser strip rather than inventing a new one: _swipeHint()
   shows "Swipe for more →" ONLY when the strip actually overflows (so it
   never lies on a wide screen where every card already fits), and
   _nudgeScroll() gives it one gentle physical nudge on first render. */
#wbEditTeaser{display:none;margin:14px 7px 0}
#wbEditTeaser.on{display:block}
#wbEditTeaser .wet-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 8px}
#wbEditTeaser .wet-lbl{font:600 10.5px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#F2D889;margin:0}
#wbEditTeaser .wet-swipe{font:600 10px/1 'Jost',sans-serif;letter-spacing:.02em;color:#D8B96C;white-space:nowrap}
#wbEditTeaser .wet-scroll{display:flex;overflow-x:auto;gap:10px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#wbEditTeaser .wet-scroll::-webkit-scrollbar{display:none}
#wbEditTeaser .wet-card{flex:0 0 108px;background:#fff;border:1px solid #EFE7D2;text-align:left;text-decoration:none;display:block;-webkit-tap-highlight-color:transparent}
/* 🚨🚨 THIS FRAME MATCHES THE EDIT CARD'S, AND THAT IS THE WHOLE POINT — HER
   CATCH, 2026-09-10: "The jeans are cut off... it looks fine in the main page
   but on teaser these photos need fixing."
   ▶ IT WAS 108x135 (ratio 0.80) AND CENTRE-ANCHORED, while .dc-item-px is 3:4
   (0.75) and anchored TOP. Measured on her Crosbie Jean, a 0.667 source:
     the Edit    keeps 89% of its height, losing 11% off the BOTTOM only
     the strip   kept 83%, losing 8% off the TOP *and* 8% off the bottom
   — so the waistband AND the hem went, which is exactly what she saw.
   ⚠️ THE LEDGER ROW THIS BELONGS TO IS "ONE PHOTO RENDERS THE SAME ON EVERY
   SCREEN", and this strip was a THIRD surface that was never told. Same shape
   as the Serpui bag being right on one screen and cut off on the next.
   ▶ SO: same 3:4, same top anchor. If .dc-item-px's geometry ever changes,
   CHANGE IT HERE TOO — or better, give them one shared rule. */
#wbEditTeaser .wet-card>img,#wbEditTeaser .wet-card>.wet-px{width:108px;aspect-ratio:3/4;display:block;background:#F5EFE2}
/* ⚠️ THE FALLBACK WHEN A STACK LOSES ITS SECOND VIEW: is-stack is dropped at
   runtime, so the surviving photo needs a rule of its own or it renders at its
   natural size and spills out of the card. Same contain as a single photo. */
#wbEditTeaser .wet-px:not(.is-stack)>img{width:100%;height:100%;object-fit:contain;display:block}
/* 🚨🚨 CONTAIN, NOT COVER — HER SECOND CATCH THE SAME MINUTE: "Jeans are cut
   off at the bottom." The first fix matched this frame to the Edit card's
   crop (3:4, top-anchored), which restored the WAISTBAND and still lost the
   HEM — her Crosbie Jean is a 0.667 photo in a 0.75 frame, so cover eats 11%
   whichever end it is anchored to.
   ▶▶ MATCHING THE EDIT WAS CLAUDE'S INFERENCE. HER REQUIREMENT WAS "can't see
   the whole Jean" — so the strip now CROPS NOTHING, ever, on any photo.
   ⭐ THIS IS HER OWN LEDGER ROW "A PRODUCT PHOTO IS NEVER CROPPED", the rule
   the finder's cards already follow (contain, in a frame banded in the card's
   own colour). It is the right rule for a surface showing many photos of many
   shapes that nobody has hand-tuned — which is exactly what this strip is.
   ⚠️ THE BAND IS #F5EFE2 AND THAT IS MEASURED, NOT PICKED: her Crosbie Jean is
   a TRANSPARENT png (so the band colour IS its background), and the Olivela
   photos are rgb(242,237,234). White would show a hard edge against both.
   ⚠️ THE EDIT PAGE STILL CROPS — she said it "looks fine", so it was left
   alone deliberately. If a photo is ever wrong on BOTH, fix the Edit too. */
#wbEditTeaser .wet-card>img{object-fit:contain;object-position:center}
#wbEditTeaser .wet-t{padding:6px 7px 8px}
#wbEditTeaser .wet-n{font:600 12px/1.3 'Jost',sans-serif;color:#1a1a1a;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#wbEditTeaser .wet-p{font:400 11px/1 'Jost',sans-serif;color:#8a6a1e}
#wbEditTeaser .wet-all{flex:0 0 92px;align-items:center;justify-content:center;text-align:center;display:flex;background:#1a1a1a;color:#EACD68;font:600 11px/1.3 'Jost',sans-serif;padding:12px 10px;cursor:pointer}
@media(max-width:374px){
  #wbEditTeaser .wet-card,#wbEditTeaser .wet-card>img,#wbEditTeaser .wet-card>.wet-px{flex-basis:98px;width:98px}
  #wbEditTeaser .wet-all{flex-basis:84px}
}
/* ⭐ THE STAR OF THE WEEK ON THE DISCOVERY PAGE — her idea, 2026-08-21:
   "I am wondering if the Discovery page, for first time users, before she even
   takes the quiz, could be able to get a peak at the star of the week."
   ▶ WHY IT EARNS ITS PLACE: the Star card was WELCOME-BACK ONLY, so a stranger
   never met it at all — and it is the only piece of REAL PRODUCT on that whole
   screen. Everything else a first-time visitor sees on s-wel is a PROMISE (the
   tagline, the founder line, the one-line quiz reassurance). This is a real
   garment, a
   real photo, a real price and Catherine's own note, which is the difference
   between CLAIMING a stylist is behind this and SHOWING it. It also proves the
   app is alive: something changed this week.
   ▶ PLACED AFTER THE FOUNDER LINE, so the page reads: what this is, START,
   who I am, here is something real I chose, or explore. It sat after "How It
   Works" until she retired that block on 2026-08-21 (see .hm-hiwline).
   ⭐ MEASURED, AND THIS IS THE CHANGE: its top moved 702 -> 560, so roughly
   140px of a REAL GARMENT now sits ABOVE a ~700px iPhone fold where a
   stranger previously saw none of it. The quiz CTA is still first at y=346,
   so the screen's first job is untouched.
   🚨🚨 THE CARD IS WHITE (her call, matching .wks-card since 2026-08-20) AND
   THE MIRROR'S PAPER IS #FBFAF7, NEAR-WHITE, so the card has almost no value
   contrast of its own here. ▶▶ THE GOLD LEAF FRAME IS THE ONLY THING
   SEPARATING IT FROM THE PAGE. On this screen the frame is STRUCTURAL, not
   decoration: never quieten, flatten or remove it while the card stays white.
   That is the opposite of the anti-layered-edge rule's usual direction, and it
   is why: on black velvet the frame is emphasis, on linen it is definition. */
/* ⚠️ width:100% IS LOAD-BEARING, not decoration. #dsStar is a flex item of
   .hm-mirror, and AUTO CROSS-AXIS MARGINS DISABLE STRETCH — the item then sizes
   to fit-content, which the nowrap header below pins to ~264px. At 320 that put
   the card 24px PAST the mirror's content box. width:100% resolves against the
   container instead, so the card fills the paper and shrinks with it, exactly
   like .hm-founder, which is the RIGHT alignment reference on this screen
   because it really does fill the paper. (.hm-hiw carried the same auto-margin
   trap and rendered 236px against its stated 298; it is gone now, but the trap
   is not — never trust a stated max-width on a flex item with margin:auto.) */
#dsStar{display:none;width:100%;max-width:298px;margin:18px auto 0}
#dsStar.on{display:block}
/* The frame spreads 7px, so the wrap is inset by exactly the frame's own
   thickness and the FRAMED OUTER edge lands flush with the paper's content box.
   ⚠️ If the frame thickness ever changes, this margin changes with it or the
   alignment silently breaks — the same trap as #wbStar's 7px. ⚠️ Measure
   against .hm-founder, never .hm-hiwline (which carries its own side margin). */
#dsStar .dss-wrap{position:relative;z-index:0;margin:0 7px}
/* The header is the welcome screen's OWN divider language (.hm-divwrap's
   hairlines + gold label), not the front door's .wks-lbl, so the Star reads as
   part of this page rather than a card imported from another screen. */
#dsStar .dss-hd{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 9px}
/* flex:0 1 26px, never a fixed width: at 320 the hairlines give their space
   back so the nowrap label still fits inside the paper instead of pushing
   the whole header wider than the card. */
#dsStar .dss-hair{height:1px;flex:0 1 26px;min-width:0}
#dsStar .dss-hair.l{background:linear-gradient(90deg,transparent,#C9A24E)}
#dsStar .dss-hair.r{background:linear-gradient(270deg,transparent,#C9A24E)}
#dsStar .dss-hd b{font:600 11px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#BC9022;white-space:nowrap}
#dsStar .dss-hd svg{width:13px;height:13px;flex:0 0 auto}
/* ⭐ EVERYTHING BELOW IS A SIZE STEP-DOWN ONLY. The card reuses the .wks-*
   classes literally, so the gold leaf gradient, the paper, the border, the ink,
   the pink heart and the black-lacquer pill have ONE definition and the two
   Stars can physically never drift apart on colour or frame. Only the numbers
   differ. ▶ Photo 96px is her pick from a rendered 110/96/84 (the front door is
   140px); the note and the name are what set this card's height, so the photo
   size moves the block only 35px across that whole range. */
#dsStar .wks-card{padding:13px 15px 12px;box-shadow:0 3px 10px rgba(0,0,0,.16)}
#dsStar .wks-card::before{box-shadow:0 6px 14px rgba(0,0,0,.24)}
#dsStar .wks-px{width:96px;margin:9px auto 2px}
#dsStar .wks-name{font-size:16.5px}
#dsStar .wks-note{font-size:14px;line-height:1.5}
#dsStar .wks-act{margin-top:0}
#dsStar .wks-shop{margin-top:10px}
/* ⚠️ .wks-disc's #CFC9BB is tuned for BLACK VELVET and measures 1.3:1 on this
   linen — unreadable. A disclosure that cannot be read is not a disclosure
   (the 2026-07-29 rule). #6b6459 is 5.6:1 on #FBFAF7. */
#dsStar .wks-disc{color:#6b6459;margin-top:12px}
/* Add to Home Screen whisper — same voice as #wbNext, sits above the footer.
   The real app icon previews above the line, rounded like her home screen will
   round it. The iOS "Add to Home Screen" bold is EMPHASIS (no underline:
   nothing to tap); only the Android "Add it now" (b.tap) gets the underline. */
/* side padding trimmed 22 → 12px (Cath, 2026-08-08) to buy the width that keeps
   step 2 on ONE line: her wording needs 271px and the old cap left only 262px */
#a2hs{display:none;margin:14px 14px 14px;padding:0 12px;text-align:center}
#a2hs.on{display:block}
#a2hs .a2-ico{display:block;width:46px;height:46px;border-radius:10.5px;margin:0 auto 7px;box-shadow:0 3px 10px rgba(0,0,0,.45);border:1px solid rgba(242,216,137,.35)}
/* ⚠️ 14px UPRIGHT, not 12.5px italic (Cath's live test, 2026-08-08): italic at
   that size on this dark panel was the hardest text in the app to read, and
   readability is a stated priority for the 18-80 audience. */
#a2hs .a2-t{display:block;font:400 14px/1.55 'Jost',sans-serif;color:#E8E2D2;text-wrap:balance}
#a2hs .a2-t b{font-weight:600;color:#F2D889;font-style:normal}
#a2hs .a2-t b.tap{border-bottom:1px solid rgba(242,216,137,.55);cursor:pointer}
#a2hs .a2-lead{display:block;font:600 14.5px/1.4 'Jost',sans-serif;color:#F2D889;margin-bottom:9px;text-wrap:balance}
/* numbered steps, so the line reads as an INSTRUCTION and not as controls —
   she tapped the icon, the wording and the glyph expecting them to do something */
#a2hs .a2-step{display:flex;align-items:flex-start;gap:9px;text-align:left;max-width:292px;margin:0 auto 7px}
#a2hs .a2-n{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.2px solid rgba(242,216,137,.6);color:#F2D889;font:600 11px/1 'Jost',sans-serif;display:flex;align-items:center;justify-content:center}
/* the share glyph sits in a raised "key cap" so it reads as a PICTURE of a
   button somewhere else, never as a button here — on iOS it can never be
   tappable, because Apple exposes no way to trigger Add to Home Screen */
/* ⚠️ vertical-align:middle, NOT a negative offset — the old -8px sat the chip
   visibly below the line of text (Cath's screenshot, 2026-08-08) */
#a2hs .a2-chip{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:7px;background:rgba(255,255,255,.09);border:1px solid rgba(232,226,210,.28);vertical-align:middle;position:relative;top:-1.7px;margin:0 2px}
#a2hs .a2-note{display:block;font:400 12.5px/1.45 'Jost',sans-serif;color:#B9B3A4;margin-top:8px;text-wrap:balance}
#a2hs .a2-note b{color:#B9B3A4;font-weight:600}
#a2hs .a2-sh{width:12px;height:12px;vertical-align:-2px}
#a2hs .a2-chip .a2-sh{width:14px;height:14px;vertical-align:0}
#a2hs .a2-h{width:13px;height:13px;vertical-align:-2px;transform:rotate(12deg)}
#s-wb .wb-shadow{position:relative;height:0}
#s-wb .wb-shadow i{position:absolute;left:6px;bottom:1px;width:33px;height:6px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,15,5,.34),rgba(20,15,5,0) 72%);filter:blur(1.5px)}
#s-wb .wb-bar{height:5px;border-radius:2px;background:linear-gradient(180deg,#FBFCFD 0%,#CBD0D4 22%,#868D93 46%,#EEF0F2 52%,#A1A7AD 62%,#5E646A 86%,#868C92 100%);box-shadow:0 6px 10px -6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
#s-wb .wb-brks{display:flex;justify-content:space-between;padding:0 8px}
#s-wb .wb-brk{width:11px;height:8px}
#s-wb .wb-brk.l{clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#eef1f3,#90979d);box-shadow:-1px 1px 2px rgba(0,0,0,.28)}
#s-wb .wb-brk.r{clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,#eef1f3,#90979d);box-shadow:1px 1px 2px rgba(0,0,0,.28)}
/* gold notification badges — hidden until JS turns them on (empty state = no badge) */
#s-wb .wb-badge{position:absolute;display:none;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#FCE9AC,#E7BE52 62%,#C69214);box-shadow:0 0 0 1.5px #FBFAF7,0 0 6px 1px rgba(233,180,80,.7);color:#3a2c07;font-family:'Jost',sans-serif;font-weight:700;animation:wbNew 2.4s ease-in-out infinite;z-index:2}
#s-wb .wb-badge.on{display:flex}
#s-wb .wb-badge.count{top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;font-size:9px;line-height:1}
#s-wb .wb-badge.tag{top:-7px;right:-9px;padding:2px 5px;border-radius:7px;font-size:7px;line-height:1;letter-spacing:.05em;text-transform:uppercase}
/* retake — compact flat mirror-gray button (2-slider icon) */
#s-wb .wb-retake-wrap{text-align:center;margin-top:11px}
#s-wb .wb-retake{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:8px 15px 8px 8px;border-radius:0;border:none;
  background:#FCFAF4;
  font:700 11.5px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#241d0c;cursor:pointer}
#s-wb .wb-retake .rt-tile{flex:0 0 auto;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#EACD68;border:1px solid #B7BCC2}
#s-wb .wb-retake .rt-tile svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round}
#s-wb .wb-retake .rt-arr{flex:0 0 auto;width:16px;height:16px;stroke:#D2AF48;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* ===== Welcome Back — hub system (Portrait / Shop / Your Styling) ===== */
#s-wb .wb-hub{text-align:center;margin:10px 0 7px}
#s-wb .wb-hub:first-child{margin-top:2px}
#s-wb .wb-hub-t{display:inline-block;font:700 13px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#2b2620}
#s-wb .wb-portrait-frame{position:relative;margin:9px 0 10px;padding:8px;border-radius:2px;background:linear-gradient(150deg,#efe7d4,#e3d7bd);box-shadow:0 8px 18px -11px rgba(120,90,20,.4)}
#s-wb .wb-pf-inner{position:relative;overflow:hidden;padding:13px 15px 12px;background:linear-gradient(158deg,#f1f3f5 0%,#e2e5e8 28%,#f5f6f8 47%,#dcdfe2 68%,#edeff1 100%)}
#s-wb .wb-portrait-frame .wb-item{margin:0}
#s-wb .wb-pf-label{position:relative;text-align:center;font-family:'DM Serif Display',Georgia,serif;font-size:19px;color:#221e18;line-height:1;margin-bottom:11px}
#s-wb .wb-portrait{position:relative;cursor:pointer;text-align:center;padding:2px 4px 0}
/* the star -- bigger now -- hangs directly beneath the chain/ring above. wb-starwrap
   stays the same size so the logo (positioned as a % of it) and all the surrounding
   text keep their exact positions; only the star SHAPE is scaled up beyond its box via
   transform, so it overlaps neighboring text/space rather than pushing anything. */
#s-wb .wb-starwrap{position:relative;width:108px;height:108px;margin:-13px auto 0}
#s-wb .wb-starsvg{width:100%;height:100%;transform:scale(1.8);pointer-events:none}
#s-wb .wb-wordmark{position:absolute;left:50%;top:43%;transform:translate(-50%,-52%);width:64px;text-align:center;z-index:1}
#s-wb .wb-mini-star{width:19px;height:19px;display:block;margin:0 auto -2px}
#s-wb .wb-word-wrap{position:relative;padding-bottom:9px}
#s-wb .wb-word-img{display:block;width:100%;height:auto}
#s-wb .wb-word-wrap::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.6px;background:linear-gradient(180deg,#FBFCFD 0%,#CBD0D4 22%,#868D93 46%,#EEF0F2 52%,#A1A7AD 62%,#5E646A 86%,#868C92 100%)}
#s-wb .wb-word-wrap::before{content:"";position:absolute;bottom:-1px;left:70.5%;width:6px;height:6px;border-radius:50%;background:#F2C43D;box-shadow:0 0 0 1px #B7BCC2;z-index:1}
#s-wb .wb-port-motto{position:relative;z-index:2;font-family:'Lora',serif;font-style:italic;font-weight:600;font-size:15.5px;color:#463c2e;line-height:1.42;max-width:270px;margin:-20px auto 3px}
#s-wb .wb-port-motto.wb-tagline{font-family:'DM Sans',sans-serif;font-style:normal;font-size:14px;color:#5a5044}
/* THE MARQUEE PILL (2026-08-09, her pick "A" from a 4-way render — the old
   square black-bordered cream box was the only hard-edged rectangle on a
   screen of bulbs and gold, her catch: "looks very boring, something is off").
   Black lacquer + gold letters: the same world as the marquee mirror it sits
   in, and the app's black-pill action language dressed for the occasion. */
#s-wb .wb-port-cta{font-family:'Jost',sans-serif;font-size:13.5px;font-weight:600;color:#F2D889;letter-spacing:.04em;display:inline-flex;justify-content:center;align-items:center;gap:5px;white-space:nowrap;
  margin-top:12px;padding:11px 20px;background:#1a1a1a;border:1px solid #C99A2C;border-radius:999px}
/* margin-top 12 (was 3), her call 2026-08-09: the lacquer pill crowded the quote
   (6px above vs 19px below). Air INSIDE the card only — the dark gutter before
   the SHOP awning stays tight, her explicit adjustment. */
#s-wb .wb-port-cta span{text-decoration:none}
#s-wb .wb-port-cta svg{width:14px;height:14px;stroke:#F2D889}
/* wb-portrait deliberately has NO wb-lift/tap-press effect (see markup): the chain
   is a separate fixed element that doesn't move with it, so any press transform
   (lift/scale) on the star makes it visually pop off the loop it's hanging from. */
#s-wb .wb-hub-studs{position:absolute;inset:0;pointer-events:none;border-radius:2px;background:radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) center top/13px 8px repeat-x,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) center bottom/13px 8px repeat-x,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) left center/8px 13px repeat-y,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) right center/8px 13px repeat-y}
#s-wb .wb-hub-lbl{position:relative}
#s-wb .wb-chip>.jewel{position:absolute;inset:0;border-radius:9px;background:linear-gradient(158deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);pointer-events:none}
#s-wb .portrait-hero .wb-chip{width:46px;height:46px}
#s-wb .portrait-hero .wb-bar,#s-wb .portrait-hero .wb-shadow,#s-wb .portrait-hero .wb-brks{display:none}
#s-wb .portrait-hero .wb-chip.wb-const{background:#211d16;box-shadow:0 4px 10px -3px rgba(20,16,8,.5),inset 0 1px 0 rgba(255,255,255,.08)}
#s-wb .portrait-hero .tt b{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px}
#s-wb .wb-bar{height:3px;background:linear-gradient(180deg,#FCFDFE,#CBD1D6 45%,#9EA5AB 56%,#E4E7EA 70%,#B6BCC2 100%)}
#s-wb .wb-sub{color:#5c5348;font-size:14px}
#s-wb .wb-retake-wrap{margin-top:16px}
#s-wb .wb-bulb{animation:none!important}
#s-wb .wb-acts .wb-sweep{display:none!important}
/* footer placement on Welcome Back — sits on the mirror's cream */
#s-wb .wb-foot{margin-top:12px;padding-top:11px;border-top:1px solid rgba(33,30,26,.10)}
/* --- Welcome Back v2: white hub cards on black lacquer, awning + vanity light bar --- */
#s-wb .hub-card,#s-res .hub-card,#s-photo-res .hub-card{position:relative;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border-radius:2px;padding:0 14px 14px;box-shadow:0 12px 26px -14px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(196,201,207,.95)}
#s-wb .hub-shop,#s-res .hub-shop,#s-photo-res .hub-shop{margin:16px 2px 12px}
#s-wb .hub-style,#s-res .hub-style,#s-photo-res .hub-style{margin:16px 2px 10px}
#s-wb .hub-card .wb-item{margin:0}
/* thin gold trim line along the straight TOP of the awning */
#s-wb .awn-rod,#s-res .awn-rod,#s-photo-res .awn-rod{display:block;height:1.5px;margin:0 -14px;background:linear-gradient(180deg,#EAD08A,#C99A2C)}
#s-wb .awn-face,#s-res .awn-face,#s-photo-res .awn-face{position:relative;height:34px;margin:0 -14px;
  background:
    /* gold trim hugging the very bottom — the scallop mask makes it follow the hem's curve */
    linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 2.5px),#EBC65E calc(100% - 2.5px),#C99A2C 100%),
    /* whisper-thin HORIZONTAL crease — the fold where the awning bends out, centred on the canopy */
    linear-gradient(180deg,rgba(0,0,0,0) 0 14px,rgba(255,255,255,.09) 14.5px,rgba(0,0,0,.12) 15.8px,rgba(0,0,0,0) 17px 100%),
    /* canopy juts out: catches light along the top, deepens into shadow toward the projecting hem */
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 16%,rgba(0,0,0,0) 42%,rgba(0,0,0,.26) 100%),
    /* bold alternating stripes */
    repeating-linear-gradient(90deg,#17171c 0 26px,#FBFBF9 26px 52px);
  /* gentle rounded scallops along the hem */
  -webkit-mask:radial-gradient(13px 4px at 13px 0,#000 97%,#0000) bottom left/26px 4px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat;
          mask:radial-gradient(13px 4px at 13px 0,#000 97%,#0000) bottom left/26px 4px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat;
  /* the whole canopy projects out and casts a soft shadow on the card below */
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.26))}
#s-wb .awn-trim{display:none}
#s-wb .awn-val{display:none}
#s-wb .mbar,#s-res .mbar,#s-photo-res .mbar{margin:0 -14px 6px;padding:9px 18px 10px;border:8px solid #D8DDE2;border-top:none;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);box-shadow:0 6px 12px -8px rgba(0,0,0,.4),inset 0 0 0 1px #8a9096,inset 0 0 0 2.5px rgba(255,255,255,.7)}
#s-wb .mbar-row,#s-res .mbar-row,#s-photo-res .mbar-row{display:flex;justify-content:space-between;align-items:center}
#s-wb .mbulb,#s-res .mbulb,#s-photo-res .mbulb{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 37% 33%,#FFFBE3,#FFECA0 38%,#F3D262 68%,#D3B048);box-shadow:0 0 7px 2px rgba(244,214,120,.72),0 0 3px rgba(255,238,180,.9),0 0 0 1px rgba(175,145,60,.4),inset 0 -1.5px 2px rgba(158,128,52,.45)}
/* Match WB: hubs on a black-lacquer backdrop, WB label font (bigger), no flanks */
#s-res .p3-hubwrap,#s-photo-res .p3-hubwrap{background-color:#0c0c0e;margin:13px -18px 0;padding:8px 0 12px}
/* carry the black lacquer down around the Retake button (footer stays on white) */
#s-res .retake-wrap,#s-photo-res .retake-wrap{background-color:#0c0c0e;margin:0 -18px;padding:14px 0 16px}
#s-res .hub-shop,#s-photo-res .hub-shop{margin:0 2px 0}
#s-res .hub-style,#s-photo-res .hub-style{margin:16px 2px 0}
/* Outfit results leads with Styling, so flip the hub top-gaps (Styling flush, Shopping gapped) */
#s-photo-res .hub-style{margin:0 2px 0}
#s-photo-res .hub-shop{margin:16px 2px 0}
#s-res .hub-card .p3-hub,#s-photo-res .hub-card .p3-hub{display:block;text-align:center;margin:5px 0 2px;font-size:21px;letter-spacing:.2em;color:#151515}
#s-res .hub-card .p3-hub::before,#s-res .hub-card .p3-hub::after,#s-photo-res .hub-card .p3-hub::before,#s-photo-res .hub-card .p3-hub::after{display:none}
/* match the outfit-page hub spacing: tight title->first button (11px), 18px between buttons */
#s-res .hub-card .act,#s-photo-res .hub-card .act{margin-top:18px}
#s-res .hub-card .p3-hub + .act,#s-photo-res .hub-card .p3-hub + .act{margin-top:9px}
/* Outfit results: two gentle "what's next" recommendations sitting above the hubs */
#s-photo-res .nextstep{margin:2px 0 0;text-align:center}
#s-photo-res .ns-lead{font:400 18px/1.25 'DM Serif Display',serif;color:#211E1A;white-space:nowrap;margin-bottom:12px}
#s-photo-res .ns-lead .pinkheart{width:16px;height:16px;vertical-align:-2px}
#s-photo-res .ns-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:2px;cursor:pointer;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border:1.5px solid #BFC2C6;margin-bottom:11px;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,filter .16s ease}
#s-photo-res .ns-btn:last-child{margin-bottom:0}
#s-photo-res .ns-btn:active{transform:scale(.99);filter:brightness(.99)}
#s-photo-res .ns-ic{flex:none;width:44px;height:44px;border-radius:10px;background:#fff;border:1.5px solid #1a1a1a;display:flex;align-items:center;justify-content:center}
#s-photo-res .ns-ic svg{width:23px;height:23px}
#s-photo-res .ns-ic.pink svg{fill:#EC4899}
#s-photo-res .ns-ic.gold svg{fill:#E0B84C;stroke:none}
#s-photo-res .ns-tx{flex:1;min-width:0}
#s-photo-res .ns-tx b{display:block;font:600 18px/1.1 'Jost',sans-serif;color:#211E1A;white-space:nowrap}
#s-photo-res .ns-tx small{display:block;font:400 14px/1.4 'Jost',sans-serif;color:#453f37;margin-top:5px;margin-left:-9px;background:#fff;border-radius:28px;box-shadow:0 4px 40px rgba(0,0,0,.08);padding:4px 12px 4px 9px}
#s-photo-res .ns-ar{flex:none;font-size:20px;color:#26221c;line-height:1}
/* keep the one-line lead from overflowing on very small/old phones */
@media (max-width:359px){#s-photo-res .ns-lead{font-size:16px}}
/* ===== Outfit-results hubs as full-width framed SQUARES: lit vanity mirror (Styling), curtain square (Shopping), pearl square (Portrait). Black outlines, no gold lines. ===== */
#s-photo-res .p3-hubwrap{background:#17171c;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:14px;margin-bottom:24px;padding:0}
#s-photo-res .retake-wrap{background:none;margin:0;padding:6px 0 22px}
/* p3 "what next" white zone bleeds full-width to the phone edges (no floating card) —
   since the photo isn't framed, the white simply becomes a clean full-width section. */
#s-photo-res .p3{box-shadow:none;width:100vw;max-width:none;margin-top:0;padding-top:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:22px;padding-right:22px}
/* section labels on the outfit page: black (not brown), Jost caps */
#s-photo-res .eng-lbl{color:#1a1a1a}
/* "Finishing Touches" + "Complete the Look" board headers match the SHOPPING/STYLING titles; drop the little hairline rules (leaves the "Your Outfit Analysis" sub-label as-is) */
#pTipsBoard .eng-lbl,#pShopBoard .eng-lbl{font:700 21px/1.1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#151515;white-space:nowrap;text-align:center}
#s-photo-res .eng-rule{display:none}
/* widen the outfit-results boards + trim inner padding so the 21px headers sit on one line */
#s-photo-res .p1,#s-photo-res .p2{width:368px}
#s-photo-res .p2 .page{padding-left:14px;padding-right:14px}
#s-photo-res .worklbl{letter-spacing:.14em;position:relative;text-align:center}
/* the pretty gold+silver star, floated up-right so "What's working" stays centered; bigger, cleaner (little glow), tilted left, gentle breathing, no spin */
#s-photo-res .worklbl .wl-jewel{position:absolute;top:-45px;right:1px;width:58px;height:58px;transform:rotate(-42deg);transform-origin:center;animation:wlStarBreath 2.8s ease-in-out infinite}
@keyframes wlStarBreath{0%,100%{transform:rotate(-42deg) scale(1);filter:drop-shadow(0 1px 2px rgba(150,110,30,.22)) brightness(1.02)}50%{transform:rotate(-42deg) scale(1.04);filter:drop-shadow(0 0 4px rgba(247,214,116,.45)) drop-shadow(0 1px 2px rgba(150,110,30,.22)) brightness(1.09)}}
@media (prefers-reduced-motion:reduce){#s-photo-res .worklbl .wl-jewel{animation:none;filter:drop-shadow(0 1px 2px rgba(150,110,30,.22))}}
/* frames go FULL-BLEED to the screen edges (content height, not forced square) */
#s-photo-res .vhub,#s-photo-res .chub,#s-photo-res .phub2,#s-photo-res .bhub{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:16px;display:flex;flex-direction:column}
#s-photo-res .phub2{margin-bottom:0}
/* tiles: bigger, black outline, icon + title + descriptive tagline */
#s-photo-res .twoup{display:flex;gap:11px}
#s-photo-res .tile2{flex:1 1 0;min-width:0;background:#fff;border:1.5px solid #1a1a1a;border-radius:2px;padding:16px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,filter .16s ease}
#s-photo-res .tile2:active{transform:scale(.97);filter:brightness(.98)}
#s-photo-res .tile2 .chip2{width:52px;height:52px;border-radius:12px;background:#F5EFE2;border:1.5px solid #1a1a1a;display:flex;align-items:center;justify-content:center;flex:none}
#s-photo-res .tile2 .chip2 svg{width:27px;height:27px;stroke:#1a1a1a;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#s-photo-res .tile2 .t2t{font:600 15px/1.16 'Jost',sans-serif;color:#1a1a1a}
#s-photo-res .tile2 .t2s{font:400 12px/1.3 'Jost',sans-serif;color:#5b5349}
#s-photo-res .hlbl{font:700 21px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#151515;text-align:center;margin:0 0 2px}
/* even + reduced gap above the STYLING/SHOPPING titles, and a tight, equal gap to the first button */
#s-photo-res .vhub{padding-top:25px!important}
#s-photo-res .vhub .hlbl + .act,#s-photo-res .chub-in .hlbl + .act{margin-top:9px}
/* STYLING — lit vanity mirror: thicker silver frame, bigger bulbs */
#s-photo-res .vhub{position:relative;padding:32px 26px 30px;background:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 3px);border-radius:2px;box-shadow:0 12px 26px -14px rgba(0,0,0,.55),inset 0 0 0 1px #8f8b86,inset 0 0 0 4px rgba(255,255,255,.92),inset 0 0 0 19px #E6E5E2,inset 0 0 0 20px #BBB8B3}
#s-photo-res .vb{position:absolute;pointer-events:none}
#s-photo-res .vb i{display:block;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 37% 33%,#FFFBE3,#FFECA0 40%,#F3D262 70%,#D3B048);box-shadow:0 0 5px 1.5px rgba(244,214,120,.8)}
#s-photo-res .vb.t{top:5px;left:22px;right:22px;display:flex;justify-content:space-between}
#s-photo-res .vb.b{bottom:5px;left:22px;right:22px;display:flex;justify-content:space-between}
#s-photo-res .vb.l{left:5px;top:28px;bottom:28px;display:flex;flex-direction:column;justify-content:space-between}
#s-photo-res .vb.r{right:5px;top:28px;bottom:28px;display:flex;flex-direction:column;justify-content:space-between}
/* SHOPPING — a storefront: a scalloped black/cream awning over a cream "shop window" in a thin dark frame */
#s-photo-res .chub{position:relative;box-sizing:border-box;padding:0;border:none;background:none;border-radius:0;box-shadow:none;overflow:visible}
#s-photo-res .chub .awn-rod{margin:0;height:2px}
#s-photo-res .chub .awn-face{margin:0;height:38px}
#s-photo-res .chub-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;background:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 3px);border:3px solid #17171c;border-top:none;border-radius:0 0 2px 2px;box-shadow:0 12px 26px -14px rgba(0,0,0,.5);padding:5px 18px 7px}
/* PORTRAIT — light pearl square, frame thickness matches the vanity mirror */
#s-photo-res .phub2{position:relative;padding:18px;border-radius:2px;background:linear-gradient(150deg,#f4ecd6,#e7d9b2 55%,#f4ecd6);box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
#s-photo-res .phub2-studs{position:absolute;inset:0;border-radius:2px;pointer-events:none}
#s-photo-res .phub2-studs .ps{position:absolute}
#s-photo-res .phub2-studs .ps i{display:block;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0,#f4efe4 45%,#dccfb2 78%,#c9bd9c 100%);box-shadow:0 1px 1.5px rgba(120,100,55,.28)}
#s-photo-res .phub2-studs .ps.t{top:4px;left:4px;right:4px;display:flex;justify-content:space-between}
#s-photo-res .phub2-studs .ps.b{bottom:4px;left:4px;right:4px;display:flex;justify-content:space-between}
#s-photo-res .phub2-studs .ps.l{left:4px;top:38px;bottom:38px;display:flex;flex-direction:column;justify-content:space-between}
#s-photo-res .phub2-studs .ps.r{right:4px;top:38px;bottom:38px;display:flex;flex-direction:column;justify-content:space-between}
#s-photo-res .phub2-in{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;background:transparent;border-radius:1px;padding:5px 18px 14px;text-align:center}
/* Her call 2026-08-09: same voice as the other hub headers (BUILD etc.) —
   the serif title was the last piece of the old tile-panel language. */
#s-photo-res .phub2 .plbl{font:700 21px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#151515;text-align:center;white-space:nowrap;margin:0 0 2px}
#s-photo-res .phub2 .pbig{font:400 23px/1.15 'DM Serif Display',serif;color:#1c1a16;margin:13px 0 5px}
#s-photo-res .phub2 .psub{font:400 13px/1.4 'Jost',sans-serif;color:#5b5349;margin-bottom:18px}
#s-photo-res .phub2 .pgo{display:inline-flex;align-items:center;gap:9px;background:#F5EFE2;color:#1a1a1a;font:700 12px/1 'Jost',sans-serif;letter-spacing:.07em;text-transform:uppercase;border:1.5px solid #1a1a1a;border-radius:2px;padding:13px 22px;cursor:pointer;-webkit-tap-highlight-color:transparent;align-self:center}
#s-photo-res .phub2 .pgo:active{filter:brightness(.97)}
#s-photo-res .phub2 .pgo svg.pa{width:16px;height:16px;stroke:#1a1a1a;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#s-photo-res .phub2 .pgo svg.ps{width:15px;height:15px;fill:#1a1a1a}
/* Your Style rows (her pick B, 2026-08-09): the usual hub rows inside the
   pearl panel — the big keepsake tiles are gone. */
#s-photo-res .ps-rows{margin-top:9px}
/* Heart-it-first tip (her wording + whisper voice, 2026-08-09). Same family as
   the Welcome Back whispers: italic ink, gold bold, block-level for balance. */
.ht-tip{display:block;font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;text-align:center;max-width:300px;margin:2px auto 12px;text-wrap:balance}
/* 🚨 THE HONEST LINE when an ask cannot be served (2026-08-24, her wording).
   Her voice register on light paper: Lora UPRIGHT 15.5 in the readable ink, the
   one settled 2026-08-13 -- no italics, which cost readability on an 18-to-80
   audience. Deliberately the SAME type as .ht-tip directly above it, so the two
   quiet sentences on this screen read as one voice rather than two.
   ⚠️ NO PINK HEART: a heart means Catherine herself is speaking, and this is the
   stylist reporting on a search. Her own mark system, applied.
   ⚠️ The link uses the SAME gold as .ht-tip b (#946D18, measured 4.71:1 on this
   paper). Do NOT swap it for the brighter #D8A52E, which fails AA here. */
.shop-honest{display:block;font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;text-align:center;max-width:320px;margin:2px auto 14px;text-wrap:balance}
.shop-honest-go{color:#946D18;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(148,109,24,.42);white-space:nowrap}
.shop-honest-go:hover,.shop-honest-go:focus-visible{border-bottom-color:#946D18}
.ht-tip b{font-style:italic;color:#946D18;font-weight:600}   /* moved with .wl-door-go so the two MATCH, her ask; 4.12:1 -> 4.71:1 */
.ht-tip .ht-h{color:#C8971E;font-style:normal} /* the wishlist's mark is GOLD now (2026-08-09) */
/* ⚠️ The tip's heart is the app's OWN _WL_HEART_PATH now, not the U+2661 glyph
   it used to be. HER CALL 2026-08-22: "let's make sure we are using our exact
   heart shape for consistency." She was right, and it was the standing
   never-draw-a-brand-mark-as-a-glyph rule catching up with the one place that
   had been left as a deliberate exception -- the glyph is a DIFFERENT SHAPE from
   the heart on every SAVE control an inch below it. */
.ht-tip .ht-h svg{width:14px;height:14px;vertical-align:-2px;display:inline-block}
/* HER PICK B, 2026-08-22 -- the door that replaces the tip once she has saved
   something. Her paper voice, the same size and slot as the sentence it takes
   over from, so nothing on the screen moves; it just changes what that line is
   doing once there is something true to say.
   ⚠️ NO ITALICS, her explicit call, and it brings this line under her own
   2026-08-13 voice rule: on light paper her voice is Lora UPRIGHT in #4a463e.
   (.ht-tip b above is still italic -- a leftover from 2026-08-09, four days
   older than the rule. Flagged to her, hers to decide, deliberately not swept.)
   ⚠️ The heart is _wlHeartSvg(true), the SAME function that fills in the heart
   on the card she just tapped, so the mark on the door and the mark on the
   control can physically never drift. FILLED, her call -- and it maps: the tip
   shows the OUTLINE heart (nothing saved yet), the door shows it FILLED, which
   is exactly what the button itself does. */
.wl-door{display:block;font:400 15.5px/1.5 'Lora',Georgia,serif;color:#4a463e;text-align:center;max-width:300px;margin:2px auto 12px;text-wrap:balance}
.wl-door svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px;display:inline-block}
/* ⚠️ THE CHAT'S COPY OF THE DOOR IS TIGHTER, AND ONLY THAT. Same component, same
   words, same gold — but the chat screen is the one she asked to give "more room
   to the chatting", so it takes less vertical space than it does on a browsing
   page. ▶ The TAP TARGET inside it is untouched (`.wl-door-go` keeps its ~43px);
   this trims the MARGIN around the control, never the padding inside it, which
   is her own 2026-09-09 rule written down. */
.chat-wl-door{margin:0 auto 6px;font-size:14.5px}
/* The link half only. The count is a statement, not a control -- making the
   whole line tappable would put a tap target around words that do nothing.
   ⚠️ The padding is the tap target for the 18-to-80 audience, not decoration;
   the negative margin keeps it from changing the line's height. ~43px.
   ⭐ THE GOLD IS BACK, HER CALL 2026-08-22, AND IT DID NOT COST THE CONTRAST.
   It shipped as body ink for a day because her own #A0761B measures 4.12:1 on
   this white paper -- under AA, on a control she taps, for an audience that
   runs to 80. She overruled that after seeing the number, with a good reason:
   "that page is actually very gold/yellow looking and I want it to match."
   ▶ SO THE ANSWER WAS NEITHER OF THE TWO OPTIONS PUT TO HER. A ramp measured
   between her gold and the bronze she has rejected three times found #987019
   clearing 4.5 exactly, so #946D18 was taken for real margin: 4.71:1, SIX HEX
   POINTS off her gold and indistinguishable from it, and nowhere near the
   #8F6410 bronze (5.25:1) she keeps turning down.
   ⚠️ .ht-tip b MOVED WITH IT, and that is the point rather than a side effect:
   she asked for the two to MATCH, and the tip's bolds were sitting at the same
   failing 4.12:1. Moving both keeps them identical AND readable. GREP #946D18
   -- if either is ever restyled, the other moves too or they drift.
   ⚠️ The ONE remaining #A0761B is .rn-body b on the portrait's refine whisper,
   deliberately untouched: different screen, different paper, not this call. */
.wl-door .wl-door-go{color:#946D18;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 2px;margin:-10px 0;display:inline-block}
#s-photo-res .ps-rows .act:first-child{margin-top:0} /* the generic 18px .act top margin would break the match */
/* BUILD — the wardrobe: a linen fabric-label panel pinned to the dark board, with a charcoal topstitch (matches the Your Wardrobe page identity) */
#s-photo-res .bhub{position:relative;padding:6px 22px 14px;background:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 3px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 3px);border-radius:2px;box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}
/* Build room: no outer frame; the stitched patch hugs just the stars */
/* little sewn-on "five-star" label patch at the top (gradient dashes = iOS-safe on its short sides) */
#s-photo-res .bhub .blabel{width:-moz-fit-content;width:fit-content;margin:0 auto;padding:4px 15px;display:flex;justify-content:center;background-color:#F7F1E1;background-image:repeating-linear-gradient(90deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(90deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,#4a453c 0 6px,transparent 6px 10px),repeating-linear-gradient(0deg,#4a453c 0 6px,transparent 6px 10px);background-size:100% 1.5px,100% 1.5px,1.5px 100%,1.5px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
#s-photo-res .bhub .bstars{display:flex;gap:5px;align-items:center}
#s-photo-res .bhub .bstars svg{width:20px;height:20px;display:block;fill:#E6C24E}
#s-photo-res .bhub .hlbl{margin-top:10px}
#s-photo-res .bhub .hlbl + .act{margin-top:9px}
/* Equal black gaps between all three boards: mirror->Shopping is margin(6+3 via
   .wb-list)=9px; Shopping->Styling is margin + the .wb-list flex gap(7px), so
   margin-top here only needs to be 2px to land on the same 9px total. */
#s-wb .hub-shop{margin-top:6px;margin-bottom:0}
#s-wb .hub-style{margin-top:2px;margin-bottom:0}
#s-res .hub-wardrobe{margin-top:16px;padding:6px 14px 14px}
/* s-wb hubs sit in a flex column with a 7px gap, so pull Wardrobe up 5px to net a
   ~2px hairline gap under Styling (matching the Style Portrait page). */
#s-wb .hub-wardrobe{margin-top:2px;padding:6px 14px 14px}
/* Build hub = a dashed "sewn label" frame room, matching the outfit-results Build room:
   swap the shared silver card frame for the dashed frame, and BUILD becomes a bare heading */
#s-res .hub-wardrobe,#s-wb .hub-wardrobe{box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}
#s-res .hub-wardrobe .tag-topper,#s-wb .hub-wardrobe .tag-topper{margin:10px 0 9px}
#s-res .hub-wardrobe .tag-topper span,#s-wb .hub-wardrobe .tag-topper span{background-image:none;background-color:transparent;box-shadow:none;padding:0;font-size:21px}
#s-res .hub-wardrobe .act{margin-top:2px}
#s-wb .tag-topper,#s-res .tag-topper{margin-left:-14px;margin-right:-14px}
#s-wb .wb-chip-line{width:40px!important;height:40px!important;background:#F5EFE2!important;border:1px solid #D8C285!important;border-radius:9px!important;box-shadow:none!important;color:#26221c}
#s-wb .wb-chip-line svg{width:24px;height:24px;color:#26221c}
#s-wb .wb-item .wb-arr{color:#26221c!important}
#s-wb .hub-card .wb-hub{margin:5px 0 8px}
#s-wb .hub-card .wb-hub-t{font-size:21px;letter-spacing:.2em;color:#151515}
#s-wb .hub-card .wb-shadow{display:none}
#s-wb .wb-acts .wb-foot{margin:16px -16px -16px;padding:16px 12px 26px;border-top:1.5px solid rgba(196,201,207,.9);background:#FBFAF7;border-radius:0;box-shadow:none;justify-content:center}
#s-wb .wb-acts .wb-foot span.lnk{color:#6f6a63}
#s-wb .wb-retake{box-shadow:0 0 0 3px #B4BAC0,0 0 0 6px #ECD070,0 8px 16px -10px rgba(70,72,80,.5)}
/* press / lift feedback (iOS-safe via JS .wb-tapped as well) */
#s-wb [wb-press]{transition:transform .13s ease;-webkit-tap-highlight-color:transparent}
#s-wb [wb-press]:active{transform:scale(.98)}
#s-wb [wb-lift]{transition:transform .15s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
#s-wb [wb-lift]:active,#s-wb [wb-lift].wb-tapped{transform:translateY(-4px)}
@keyframes wbSweep{0%{transform:translateX(-150%) skewX(-16deg);opacity:0}12%{opacity:.85}60%{opacity:.45}100%{transform:translateX(250%) skewX(-16deg);opacity:0}}
@keyframes wbBloom{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
@keyframes wbBulbOn{0%{opacity:0}30%{opacity:.5}42%{opacity:.9}52%{opacity:.35}64%{opacity:.95}100%{opacity:1}}
@keyframes wbTwinkle{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes wbNew{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:1}}

/* Gold rail: a permanent part of the home page; the hanging rack reads as mounted to it. NOT an animation-only element. */
.hm-room{position:relative}
/* top:-8px (not 8px) is deliberate: .hm-goldrail's containing block is .hm-shift, a
   normal-flow child of #s-wel/#s-wb -- so it's already carried down by that screen's own
   16px padding, same as everything else inside .hm-shift. The old top:8px assumed the rail
   was a direct child of #s-wel (bypassing that padding). -8px cancels the inherited 16px so
   the rail lands exactly where it always has relative to the content below it, no matter
   what .hm-shift's margin-top is -- so that single value is the only thing to ever change. */
/* left/right:-16px (not 0) for the same reason top is -8px: .hm-shift's own box is inset
   16px from #s-wel/#s-wb's true edges (it's a normal-flow child confined to the screen's
   content box, not its full padding box like the rail used to be positioned against
   directly) -- so -16px on each side cancels that inset and the rail spans edge to edge. */
.hm-goldrail{position:absolute;top:-8px;left:-16px;right:-16px;height:6px;z-index:5;background:linear-gradient(180deg,#FBF1C2 0%,#EAC24E 40%,#C89A2C 74%,#8a6a17 100%);box-shadow:0 3px 8px -3px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
/* Welcome Back's pendant + mirror styles live in the "lit vanity" block above. */

/* ===== Opening entrance — simple star reveal =====
   An opaque black overlay draws its OWN centered star + logo, independent of whatever
   screen is underneath: the star fades in large, gives one soft glow burst, then the
   whole overlay fades away -- revealing the destination screen (s-wel or s-wb) exactly
   as it already rendered beneath it. Nothing about the destination's own content is
   scaled, hidden, or re-animated by this, so there's no cascade and nothing for the
   two to ever get out of sync with. */
.hm-entrance{display:none;position:fixed;inset:0;z-index:9998;pointer-events:none;background:#0a0a0b}
body.ss-anim .hm-entrance{display:flex;align-items:center;justify-content:center}
body.ss-done .hm-entrance{display:none}
/* margin-top nudges the star up a touch -- true flex/viewport centering can still read
   as slightly low on phones (address-bar/home-indicator chrome eats into the visible
   area unevenly), so this is a small deliberate optical correction. */
.ss-starwrap{position:relative;width:280px;height:280px;max-width:80vw;max-height:80vw;margin-top:-40px;opacity:0;transform:scale(.72)}
.ss-glow{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;opacity:0;transform:scale(.5)}
.ss-star-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(233,190,90,.55))}
/* Welcome Back landing: a white star with a soft pale-yellow frame (instead of the
   white/gold-halo star Discover uses). Size/position unchanged. */
body.ss-wb-star .ss-star-svg{filter:none}
body.ss-wb-star .ss-star-svg path{fill:#FFFFFF;stroke:#FEF6D6;stroke-width:0.45}
.ss-star-logo{position:absolute;left:50%;top:47%;transform:translate(-50%,-52%);width:36%;height:auto}
/* Welcome Back landing: the flat logo-star.png (hollow mini star, gold slider) is
   Discover's unlit "before" star -- for Welcome Back, swap in a "lit" wordmark built the
   same way the actual WB pendant is (a solid gold mini star + a silver slider with a
   gold-ringed dot), the idea being her star lights up once she's taken the quiz and
   started styling. Same size/position as the image it replaces so the swap doesn't shift.*/
.ss-wordmark{display:none;position:absolute;left:50%;top:47%;transform:translate(-50%,-52%);width:100px;text-align:center;z-index:1}
body.ss-wb-star .ss-star-logo{display:none}
body.ss-wb-star .ss-wordmark{display:block}
.ss-mini-star{width:30px;height:30px;display:block;margin:0 auto -4px}
.ss-word-wrap{position:relative;padding-bottom:14px}
.ss-word-img{display:block;width:100%;height:auto}
.ss-word-wrap::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:#1a1a1a}
.ss-word-wrap::before{content:"";position:absolute;bottom:-1px;left:70.5%;width:9px;height:9px;border-radius:50%;background:#F2C43D;box-shadow:0 0 0 1.5px #1a1a1a;z-index:1}

body.ss-play .ss-starwrap{animation:ssStarIn .7s cubic-bezier(.2,.7,.2,1) .1s forwards}
body.ss-play .ss-glow{animation:ssGlowBurst 1s ease .72s both}
body.ss-play .hm-entrance{animation:ssOverlayOut .55s ease 1.6s forwards}

@keyframes ssStarIn{to{opacity:1;transform:scale(1)}}
@keyframes ssGlowBurst{0%{opacity:0;transform:scale(.55)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes ssOverlayOut{to{opacity:0}}
@media (prefers-reduced-motion: reduce){
  body.ss-anim .hm-entrance,body.ss-play .hm-entrance{display:none}
}


/* ===== Results screen (.res-screen) redesign — "reveal moment" boards (Design handoff) ===== */
/* Dark, spotlit panel that breaks out of the .inner padding to fill the card. */
.res-screen{position:relative;margin:-0.5rem -1.75rem -1.5rem;padding:8px 0 26px;min-height:100vh;overflow:hidden;color:#efe9dd;font-family:'Jost',sans-serif;background-color:#141009;background-image:radial-gradient(120% 44% at 50% 3%, rgba(255,233,188,.30) 0%, rgba(255,233,188,0) 52%),linear-gradient(180deg,#1c1710 0%,#141009 60%,#0f0c07 100%);box-shadow:inset 0 0 90px rgba(0,0,0,.5)}
.res-screen .top-back-wrap{position:relative;z-index:5;text-align:right;margin:0;padding:2px 24px 2px}
.res-screen .top-back{background:none;border:none;font:500 13px/1 'Jost',sans-serif;color:#cbb98f;cursor:pointer;padding:4px 2px;letter-spacing:.02em}
.res-screen .top-back:hover{color:#efe4c8}

.res-screen .rv-dust i{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff4d6,rgba(255,244,214,0) 70%);animation:rvTwk 3.4s ease-in-out infinite;z-index:1}
.res-screen .du1{top:70px;left:34px;width:5px;height:5px;animation-delay:.2s}
.res-screen .du2{top:130px;right:30px;width:4px;height:4px;animation-delay:1.1s}
.res-screen .du3{top:210px;left:24px;width:3px;height:3px;animation-delay:.7s}
.res-screen .spot{position:absolute;top:0;left:0;right:0;height:360px;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(120% 72% at 50% -6%,rgba(255,238,200,.55),rgba(255,238,200,0) 62%)}
.res-screen .stack{position:relative;z-index:3;padding:16px 0 8px}

/* shared board bits */
.res-screen .lacq{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(122deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 18%,transparent 36%,transparent 100%)}
.res-screen .sweep{display:none}
.res-screen .board{position:relative;border-radius:2px;padding:13px;background:linear-gradient(158deg,#3d382f 0%,#221d17 46%,#130f0b 100%);box-shadow:0 20px 30px -14px rgba(0,0,0,.66),inset 0 0 0 1px rgba(201,162,78,.4),inset 0 1px 0 rgba(255,255,255,.16)}
.res-screen .page{position:relative;background:#FCFCFB;border-radius:1px;padding:22px 17px 22px;text-align:center;box-shadow:0 3px 9px rgba(0,0,0,.28)}

/* piece 1: portrait clipboard with clamp */
.res-screen .p1{width:346px;max-width:97%;margin:0 auto;position:relative;opacity:0}
.res-screen .p1cshadow{position:absolute;left:8%;right:8%;bottom:-20px;height:20px;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 70%);filter:blur(2px)}
.res-screen .clamp{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:7;width:36%;height:28px;border-radius:3px;background:radial-gradient(120% 170% at 50% 15%,#F6E4A6 0%,#E3BB54 45%,#CFA236 72%,#A67E22 100%);box-shadow:0 8px 14px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(120,90,20,.4)}
.res-screen .clamp .brush{position:absolute;inset:0;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px);opacity:.5}
.res-screen .clamp .press{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42%;height:8px;border-radius:5px;background:linear-gradient(180deg,#FBEDBE,#D9AE44)}
.res-screen .clamp .rivet{position:absolute;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d6,#a8811f)}
.res-screen .clamp .rivet.l{left:12px}
.res-screen .clamp .rivet.r{right:12px}
.res-screen .clamp .lip{position:absolute;bottom:-3px;left:6%;right:6%;height:4px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#A67E22,#7c5c17)}
.res-screen .p1 .page{padding-top:15px}
.res-screen .logo{display:block;margin:0 auto;width:66px;height:auto}
.res-screen .eng{margin-top:13px}
.res-screen .p1 .eng{margin-top:7px}
.res-screen .eng.si{margin-bottom:18px}
.res-screen .eng-row{display:flex;align-items:center;justify-content:center;gap:11px}
.res-screen .eng-rule{height:1px;width:34px}
.res-screen .eng-rule.l{background:linear-gradient(90deg,transparent,#C9A24E)}
.res-screen .eng-rule.r{background:linear-gradient(90deg,#C9A24E,transparent)}
.res-screen .eng-lbl{font:600 12px/1 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#B8891E;white-space:nowrap}
.res-screen .nm{font:400 28px/1.1 'DM Serif Display',serif;color:#1f1d19;margin:8px 0 0;overflow-wrap:break-word;text-wrap:balance}
.res-screen .nm i{font-style:normal}
.res-screen .notes{font:400 13px/1.55 'DM Serif Display',serif;color:#33312c;padding:0 2px;overflow-wrap:break-word;text-wrap:pretty}
.res-screen .notes b{color:#C8971E;margin:0 5px;font-weight:600}
.res-screen .arch-card{position:relative;overflow:visible;max-width:300px;margin:14px auto 0;padding:8px;border-radius:2px;background:radial-gradient(140% 100% at 50% 20%,#efe7d4 0%,#e3d7bd 100%);box-shadow:0 6px 15px -10px rgba(120,90,20,.4)}
.res-screen .ac-studs{position:absolute;inset:0;pointer-events:none;border-radius:2px;background:radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) center top/13px 8px repeat-x,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) center bottom/13px 8px repeat-x,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) left center/8px 13px repeat-y,radial-gradient(3.4px 3.4px at 46% 38%,#ffffff 0%,#f4efe4 44%,#dcd2be 78%,rgba(220,210,190,0) 88%) right center/8px 13px repeat-y}
.res-screen .ac-inner{position:relative;overflow:hidden;padding:12px 14px 11px;text-align:center;background:radial-gradient(130% 100% at 50% 15%,#f8f9fa 0%,#eef0f1 32%,#d7dbde 64%,#c5cace 100%)}
.res-screen .ac-seal{position:absolute;top:-18px;right:-15px;width:56px;height:56px;z-index:6;transform:rotate(-20deg);filter:drop-shadow(0 3px 4px rgba(120,90,20,.35));pointer-events:none}
.res-screen .arch-card .anm{position:relative;font:400 21px/1.2 'DM Serif Display',serif;color:#1a1a1a;text-wrap:balance}
.res-screen .ac-lbl{position:relative;font:600 9.5px/1 'Jost',sans-serif;letter-spacing:.24em;color:#9a7420;text-transform:uppercase;margin:2px 0 2px}
.res-screen .ac-notes{position:relative;font:400 18px/1.15 'DM Serif Display',serif;color:#33302a;text-wrap:balance}
.res-screen .arch-motto{font:italic 600 15px/1.55 'Lora',serif;color:#3c3628;max-width:280px;margin:14px auto 0}
.res-screen .ac-sweep{display:none}
#s-res.rv-open .ac-sweep{animation:wbSweep 1.4s ease-out 1.2s both}
/* clipboard + boards rise behind the opening doors so there's no black gap */
#s-res.rv-open .p1{animation-delay:.1s}
#s-res.rv-open .p2{animation-delay:.28s}
#s-res.rv-open .pcard,#s-res.rv-open .kbwrap{animation-delay:.5s}
#s-res.rv-open .p3{animation-delay:.65s}
#s-res.rv-open .shop-section{animation-delay:.65s}
/* staged ceremony (compressed): linen card -> motto -> portrait */
#s-res.rv-open .arch-card{animation:rvRise .55s ease .5s both}
#s-res.rv-open .arch-motto{animation:rvRise .6s ease .8s both}
#s-res.rv-open .para{animation:rvRise .65s ease 1.05s both}
.res-screen .para{font:400 15px/1.65 'Jost',sans-serif;color:#4b4843;margin:15px 4px 0;text-wrap:pretty;overflow-wrap:break-word}
.res-screen .p-alt{margin:16px 2px 0}
.res-screen .p-alt:empty{display:none}
.res-screen .p-alt button{width:100%;border:none;border-radius:3px;padding:13px;cursor:pointer;background:linear-gradient(180deg,#33302A,#201D19);color:#F1DDA0;font:700 12px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase}

/* piece 2: style signature card (wider, studs) */
.res-screen .p2{width:346px;max-width:97%;margin:16px auto 0;position:relative;opacity:0}
.res-screen .p2 .page{padding:26px 20px 24px}
.res-screen .stud{position:absolute;width:17px;height:17px;z-index:6;background:radial-gradient(circle at 40% 34%,#FFF3C4,#E6C255 48%,#9A7418);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.res-screen .stud.tl{top:6px;left:6px}
.res-screen .stud.tr{top:6px;right:6px}
.res-screen .stud.bl{bottom:6px;left:6px}
.res-screen .stud.br{bottom:6px;right:6px}
.res-screen .sig-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.res-screen .sig-row:last-child{margin-bottom:20px}
.res-screen .sig-cat{font:600 9.5px/1.2 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#3a352c;width:64px;text-align:right;flex:0 0 auto;padding-top:1px}
.res-screen .sig-track{position:relative;flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(201,162,78,.3),rgba(201,162,78,.5))}
.res-screen .sig-dot{position:absolute;top:-5px;left:calc(var(--x) - 6px);width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F7E7B0,#D8A93E 55%,#B8831F);box-shadow:0 1px 3px rgba(150,110,20,.5),0 0 0 2px #FCFCFB}
.res-screen .sig-end{position:absolute;top:8px;font:600 9px/1 'Jost',sans-serif;letter-spacing:.03em;text-transform:uppercase;color:#6b6456}
.res-screen .sig-end.l{left:0}
.res-screen .sig-end.r{right:0}

/* piece 3: actions (light card) */
.res-screen .p3{width:346px;max-width:97%;margin:18px auto 0;opacity:0;background:#FCFCFB;border-radius:0;box-shadow:0 12px 24px -14px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(201,162,78,.55);padding:13px 18px 18px}
.res-screen .p3-lead{text-align:center;margin:0}
.res-screen .p3-lead h3{font:400 23px/1.2 'DM Serif Display',serif;color:#211E1A;margin:0}
.res-screen .p3-lead .rule{display:none}
.res-screen .savebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:3px;cursor:pointer;border:2px solid #1a1a1a;background:#F5EFE2;color:#1a1a1a;font:700 12.5px/1 'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* first-reveal "what's next" nudge — cream + gold to match the hub chips */
/* The ✕ is absolutely positioned so the text centers in the TRUE middle of the
   strip (symmetric side padding) — an in-flow ✕ shoved the centering box
   sideways and the lines sat awkwardly off-center (Cath's catch 2026-08-05). */
/* Side insets sized so the text box clears the 278px two-line threshold at
   390w (measured with the real Jost) — Cath wants the refine whisper on TWO
   lines; narrower phones (360 Display Zoom) fall to three balanced lines. */
.refine-next{display:none;position:relative;margin:14px 0 2px;padding:0 24px;text-align:center}
.refine-next.on{display:block}
/* Sister whisper: keeps step with #wbNext (14px upright, 2026-08-09) — the
   whisper family must never drift apart, her own 08-05 catch. */
.rn-body{display:block;font:400 15.5px/1.6 'Lora',Georgia,serif;color:#4a463e;cursor:pointer;text-wrap:balance}
.rn-body b{font-weight:600;color:#A0761B;border-bottom:1px solid rgba(160,118,27,.45);font-style:normal}
.rn-body .rn-h{width:12.5px;height:12.5px;vertical-align:-1px}
.rn-x{position:absolute;left:0;top:0;background:none;border:none;padding:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rn-x svg{width:15px;height:15px;display:block;stroke:#a8a294}
.res-screen .savebtn .hrt{font-size:16px;line-height:1;display:inline-block;transform-origin:center}
.res-screen .pair{display:flex;gap:9px;margin-top:9px}
.res-screen .pair .t{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;border:3px solid transparent;border-radius:3px;cursor:pointer;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#EED89A,#D8A93E 40%,#B8831F 60%,#F3E3A6,#C89A2C) border-box;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #9aa1a7}
.res-screen .pair .t svg{width:22px;height:22px;stroke:#8a6d20;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.res-screen .pair .t span{font:600 13px/1 'Jost',sans-serif;color:#2f2a22}
.res-screen .pcard{width:346px;max-width:97%;margin:18px auto 0;opacity:0;background-color:#FCFCFB;border-radius:0;box-shadow:0 16px 30px -14px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.16);padding:15px 18px 17px;position:relative}
/* Her Style Star card: the shareable entry on the black/cream striped "curtain" panel */
.res-screen .kbwrap{width:346px;max-width:97%;margin:6px auto 0;padding:15px;position:relative;opacity:0;background:repeating-linear-gradient(to bottom,#1c1a15 0 40px,#f2efe8 40px 80px);box-shadow:0 16px 30px -14px rgba(0,0,0,.6)}
.res-screen .kbwrap .pcard{width:auto;max-width:none;margin:0;opacity:1;animation:none!important;box-shadow:0 0 0 1.5px #c8a44d,0 2px 6px rgba(0,0,0,.28)}
.res-screen .kbwrap .pcard+.pcard{margin-top:15px}
.res-screen .kbwrap .pcard::after{display:none}
/* Style Portrait: wider, balanced content on the full-bleed black stage, matching the outfit-results boards (Cath, 2026-07-24) */
#s-res .p1,#s-res .p2,#s-res .p3,#s-res .kbwrap{width:368px;max-width:calc(100% - 12px)}
/* black gap above the first hub (below "What would you like to do?") = the 16px between-hub gaps */
#s-res .p3-hubwrap{padding-top:16px}
.res-screen .sc-lead{margin:2px 0 13px;text-align:center;color:#C8971E;font:700 12.5px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.res-screen .sc-lead i{display:none}
/* ⚠️ A COLUMN, NOT A ROW, and the class name is now a small lie kept on purpose:
   renaming it would touch the markup, the harnesses and starcard.js for nothing.
   ▶ HER CALL 2026-08-23, "the Style Card should show bigger on the Style Portrait
   page", picked from four rendered sizes. The side-by-side row it used to be has
   a HARD CEILING of 134px: past that "Style Star Card" wraps and the title goes
   to FOUR lines. So bigger than 132 is not a number change, it is a layout
   change, which is what this is.
   ▶ WHY BIGGER IS WORTH THE HEIGHT, and it is the whole argument: at 88px the
   card was a grey rectangle. At 196 her archetype name, her motto and
   stylestar.app are all legible. The card's only job is to make her want to send
   it, and it cannot do that job at a size where its words cannot be read. */
.res-screen .sc-row{display:flex;flex-direction:column;align-items:center;gap:12px;padding:2px 2px 3px;cursor:pointer;text-align:center}
/* ⚠️ THE BOX MUST MATCH THE CARD'S OWN SHAPE. It was 1080/1350 with
   object-fit:cover, left over from when the card was 4:5, so a 9:16 card
   was being CROPPED in the preview - her catch on her phone, and the part
   it cut was the bottom, i.e. stylestar.app. The width comes down from 88
   to 62 so the row keeps the same HEIGHT it always had (62 x 1920/1080 =
   110px, exactly what 88 x 1350/1080 gave); a taller box would have grown
   the row instead. ▶ If the card's proportions ever change, change this
   with them. */
.res-screen .sc-thumb{width:196px;flex:0 0 auto;aspect-ratio:1080/1350;border-radius:0;overflow:hidden;background:#141210;box-shadow:0 5px 16px -4px rgba(0,0,0,.6)}
.res-screen .sc-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.res-screen .sc-tt{font-family:'DM Serif Display',Georgia,serif;font-size:16px;font-weight:400;line-height:1.16;color:#211E1A}
/* ⚠️ THE VERTICAL ALIGNMENT IS MEASURED, NOT GUESSED. This project has been
   caught once already by a resized inline glyph quietly dropping off its text
   line while every positional check still passed (the A2HS share chip). The
   arrow's centre is asserted against the centre of the WORDS it follows.
   ⚠️ And it is 17px, not the 20px it was in the old side-by-side row: at 20 the
   title needs more width than a 320px phone can give it and the sentence breaks
   in two. 17 holds one line at every width down to 320 - measured, not assumed.
   Gold #C8971E is the same arrow every other destination in the app carries. */
.res-screen .sc-tt .sc-ar{width:17px;height:17px;margin-left:6px;vertical-align:middle;position:relative;top:-1px;color:#C8971E;flex:0 0 auto}
/* ⚠️ THE ARROW IS GLUED TO THE LAST WORD, and it is not decoration to keep it
   that way. At 320px (Display Zoom, and real for this 18-to-80 audience) the
   title needs two lines, and left to itself the browser put the ARROW ALONE ON
   THE SECOND LINE - a gold chevron floating under a sentence, pointing at
   nothing. Bound to "Card" it breaks as "See & share your Style Star / Card →",
   which reads as a sentence that happens to wrap.
   ▶ Same move, and the same reason, as the non-breaking space inside
   "Style Portrait" in the card's own tail: the browser will break anywhere you
   let it, so name the places it may not. The font was NOT shrunk to force one
   line at 320 - readability beats an even line here, her standing trade. */
.res-screen .sc-tt .sc-nb{white-space:nowrap}
.res-screen .sc-ss{font:400 13px/1.4 'Jost',sans-serif;color:#453f37;margin-top:4px}
.res-screen .act{cursor:pointer;margin-top:18px}
.res-screen .actrow{display:flex;align-items:flex-end;gap:12px;padding:0 4px 3px;text-align:left}
.res-screen .chip{width:44px;height:44px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.res-screen .chip svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.res-screen .chip.dark{background:linear-gradient(180deg,#33302A,#201D19);border:1px solid rgba(214,169,70,.45);box-shadow:0 3px 7px -4px rgba(0,0,0,.6),inset 0 1px 0 rgba(233,196,110,.15)}
.res-screen .chip.dark svg{stroke:#E9C46A}
/* Results action tiles (Style Portrait + outfit results): cream/charcoal to match the Discover explore buttons */
.res-screen .chip{background:#F5EFE2!important;border:1px solid #D8C285!important;box-shadow:none!important}
.res-screen .chip svg{stroke:#26221c!important}
.res-screen .act .ar{color:#26221c!important}
.res-screen .act .tx{flex:1;min-width:0}
.res-screen .act .tt-row{display:flex;align-items:center;gap:7px}
.res-screen .act .tt{font:600 18px/1.1 'Jost',sans-serif;color:#211E1A;white-space:nowrap}
.res-screen .act .ar{width:20px;height:20px;flex:0 0 auto}
/* Named .actsub, not .ss -- the results-screen action rows' small subtitle text was
   accidentally reusing the outer app-shell card's class name (.ss), so it was silently
   inheriting that card's white background + rounded corners + shadow as an unwanted
   "highlight" pill behind the text. Renamed so it only gets the styling meant for it. */
.res-screen .act .actsub{font:400 14px/1.4 'Jost',sans-serif;color:#453f37;margin-top:3px}
.res-screen .shelf{height:6px;border-radius:2px;background:linear-gradient(180deg,#FBFCFD 0%,#CBD0D4 22%,#868D93 46%,#EEF0F2 52%,#A1A7AD 62%,#5E646A 86%,#868C92 100%);box-shadow:0 7px 11px -6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.res-screen .brk-row{display:flex;justify-content:space-between;padding:0 7px}
.res-screen .brk{width:12px;height:9px}
.res-screen .brk.l{clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#eef1f3,#90979d);box-shadow:-1px 1px 2px rgba(0,0,0,.28)}
.res-screen .brk.r{clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,#eef1f3,#90979d);box-shadow:1px 1px 2px rgba(0,0,0,.28)}
.res-screen [data-shelf]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .18s ease;-webkit-tap-highlight-color:transparent}
.res-screen [data-shelf]:hover{transform:translateY(-3px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.res-screen [data-shelf]:active{transform:scale(.94);filter:brightness(.9)}
.res-screen .hero{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:14px 0;border:4px solid transparent;border-radius:4px;cursor:pointer;background:#FCFAF4 padding-box,linear-gradient(135deg,#EED89A,#D8A93E 22%,#B8831F 42%,#F3E3A6 55%,#C89A2C 72%,#9C7519) border-box;color:#241d0c;font:700 14px/1 'Jost',sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:14px 16px;box-shadow:0 11px 22px -12px rgba(120,90,20,.5)}
.res-screen .hero .shim{display:none}
.res-screen .hero svg{width:18px;height:18px;position:relative;stroke:#B8831F;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.res-screen .hero .lbl{position:relative;white-space:nowrap;display:flex;align-items:center}
/* Shopping / Styling hub labels on the results actions */
.res-screen .p3-hub{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 13px;font:700 12.5px/1 'Jost',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8a8578}
.res-screen .p3-hub::before,.res-screen .p3-hub::after{content:"";height:1px;width:34px}
.res-screen .p3-hub::before{background:linear-gradient(90deg,transparent,#cdbf92)}
.res-screen .p3-hub::after{background:linear-gradient(90deg,#cdbf92,transparent)}
/* Stand-out chat invite BUBBLE button, sitting above the photo (tail points down at it) */
.res-screen .ask-bubble{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;margin:2px 0 22px;padding:15px 16px;cursor:pointer;border:2px solid transparent;border-radius:16px;background:repeating-linear-gradient(90deg,#ecebe4 0px,#fbfbf8 21px,#ecebe4 42px) padding-box,linear-gradient(135deg,#EED89A,#D8A93E 40%,#B8831F 60%,#C89A2C) border-box;box-shadow:0 15px 28px -12px rgba(30,20,5,.5);font:400 14px/1.5 'Jost',sans-serif;color:#413d36;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,filter .18s ease}
.res-screen .ask-bubble b{font-weight:700;color:#201E1A}
.res-screen .ask-bubble .chip{margin-top:1px}
.res-screen .ask-bubble:after{content:"";position:absolute;left:32px;bottom:-9px;width:15px;height:15px;background:#f2f1ea;border-right:2px solid #C89A2C;border-bottom:2px solid #C89A2C;transform:rotate(45deg)}
.res-screen .ask-bubble:active{transform:scale(.985);filter:brightness(.98)}
/* Gentle one-time "stylist nudge" that pops above the Ask hero after the results settle */
.res-screen .ask-nudge{position:relative;margin:0 8px 8px;background:#F2EFE8;border:1px solid rgba(201,162,78,.6);border-radius:14px;padding:11px 30px 11px 13px;display:none;gap:9px;align-items:flex-start;box-shadow:0 12px 22px -10px rgba(30,20,5,.5);opacity:0;transform:translateY(8px) scale(.7);transform-origin:50% 130%;pointer-events:none}
.res-screen .ask-nudge:after{content:"";position:absolute;left:50%;bottom:-8px;width:15px;height:15px;background:#F2EFE8;border-right:1px solid rgba(201,162,78,.6);border-bottom:1px solid rgba(201,162,78,.6);transform:translateX(-50%) rotate(45deg)}
.res-screen .ask-nudge.on{display:flex;pointer-events:auto;animation:nudgePop .55s cubic-bezier(.34,1.56,.64,1) both,nudgeBob 2.9s ease-in-out .7s infinite}
.res-screen .ask-nudge .nstar{flex:0 0 auto;color:#EC4899;font-size:16px;line-height:1.3}
.res-screen .ask-nudge .ntx{font:500 12.5px/1.42 'Jost',sans-serif;color:#3a352c}
.res-screen .ask-nudge .ntx b{font-weight:700;color:#211E1A}
.res-screen .ask-nudge .nx{position:absolute;top:4px;right:9px;font:700 15px/1 'Jost',sans-serif;color:#b3a988;cursor:pointer;padding:2px}
@keyframes nudgePop{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes nudgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* Her outfit photo, kept on the results as an anchor (tap to chat about it) */
/* The whole "Here's your look" section framed in the SAME black gallery bulb frame as the "Analyzing your outfit" loader: black frame, gold hairline, gold bulbs glowing in a dark gutter around a light content panel */
#s-photo-res .lookhub{position:relative;width:100vw;margin:0 calc(50% - 50vw) 18px;border:12px solid #191510;padding:24px;background:radial-gradient(120% 90% at 50% 18%,#2a2521,#100d0b);box-shadow:0 26px 40px -16px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3)}
#s-photo-res .lookhub .lh-hair{position:absolute;inset:0;border:1.5px solid rgba(201,162,78,.5);pointer-events:none;z-index:6}
#s-photo-res .lookhub .lh-inner{position:relative;z-index:5;background:#FBFAF7;border-radius:2px;padding:26px 14px 24px}
/* bulbs sit in the dark gutter, matching the loader (11px gold, static/calm on the results page) */
/* rows own the corners (a bulb in each 90-degree corner, like the analyzing loader); columns start well below the corner bulb so they don't crowd it */
#s-photo-res .lookhub .vb.t,#s-photo-res .lookhub .vb.b{left:5px;right:5px}
#s-photo-res .lookhub .vb.l,#s-photo-res .lookhub .vb.r{top:52px;bottom:52px}
#s-photo-res .lookhub .vb i{width:11px;height:11px}
.res-screen .ls-lead{display:none;font:700 21px/1.15 'Jost',sans-serif;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:#151515;text-align:center;margin:0 0 13px}
.res-screen .ls-lead.on{display:block}
.res-screen .lookshot{display:none;position:relative;margin:0 auto 18px;width:196px;cursor:pointer;text-align:center}
/* photo: a slim dark edge + a thin gold hairline (the bulbs now live on the section frame, not the photo) */
.res-screen .ls-frame{position:relative;width:186px;margin:0 auto;border:4px solid #191510;background:#191510;border-radius:2px;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.res-screen .lookshot img{display:block;width:100%;height:242px;object-fit:contain;background:#fff}
.res-screen .ls-hair{position:absolute;inset:0;border:1.5px solid rgba(201,162,78,.6);pointer-events:none;z-index:3}
.res-screen .lookshot .lscap{margin-top:9px;font:700 11px/1.3 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a6d20}
.res-screen .lookshot .ls-occ{display:none;margin:6px auto 0;font:700 9.5px/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1a1a1a;background:#fff;border:1px solid #1a1a1a;border-radius:999px;padding:5px 11px}
.res-screen .lookshot .ls-occ.on{display:inline-block}
.res-screen .ls-expand{position:absolute;top:7px;right:7px;z-index:5;width:26px;height:26px;border-radius:50%;background:rgba(20,16,8,.72);display:flex;align-items:center;justify-content:center;cursor:pointer}
.res-screen .ls-expand svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Full-size photo viewer */
.plight{position:fixed;inset:0;z-index:200;background:rgba(14,11,6,.93);display:none;align-items:center;justify-content:center;padding:22px}
.plight.on{display:flex}
.plight img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:3px;box-shadow:0 22px 54px -10px rgba(0,0,0,.75)}
.plight .plight-x{position:absolute;top:14px;right:18px;color:#fff;font:300 36px/1 'Jost',sans-serif;cursor:pointer;opacity:.85}
/* Her photo clipped to the clipboard — a small, tilted snapshot the stylist is working from */
.res-screen .clipphoto{position:absolute;top:-15px;left:3px;z-index:8;width:90px;transform:rotate(-9deg);cursor:pointer}
/* Tight contact shadow + soft cast shadow → reads like it's lifting off the board */
.res-screen .clipphoto img{display:block;width:90px;height:114px;object-fit:contain;background:#fff;border:4px solid #fff;border-radius:2px;box-shadow:0 0 0 1px rgba(201,162,78,.55)}
.res-screen .clipphoto .clip-pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(9deg);width:15px;height:11px;border-radius:3px;background:linear-gradient(180deg,#F6E4A6,#E3BB54 45%,#CFA236 66%,#9A7418);box-shadow:0 2px 4px -1px rgba(90,60,10,.55),inset 0 1px 0 rgba(255,255,255,.65);z-index:2}
@keyframes clipJig{0%{transform:rotate(-9deg)}25%{transform:rotate(-13deg)}55%{transform:rotate(-5.5deg)}80%{transform:rotate(-10.5deg)}100%{transform:rotate(-9deg)}}
.res-screen .clipphoto.jig{animation:clipJig .5s ease}
@keyframes lookJig{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-1.8deg) scale(1.02)}55%{transform:rotate(1.8deg) scale(1.02)}100%{transform:rotate(0) scale(1)}}
.res-screen .lookshot.jig{animation:lookJig .5s ease}
@media (prefers-reduced-motion: reduce){.res-screen .clipphoto.jig,.res-screen .lookshot.jig{animation:none}}
.res-screen .keep{margin-top:16px;padding:18px 15px 16px;text-align:center;border:1px solid rgba(201,162,78,.5);border-radius:3px;background:#fff}
.res-screen .keep h4{font:400 20px/1.15 'DM Serif Display',serif;color:#1f1d19;margin:0 0 5px}
.res-screen .keep p{font:400 11px/1.5 'Jost',sans-serif;color:#6b655a;margin:0 auto 12px}
.res-screen .kin{display:block;width:100%;margin:0 auto 8px;border:1.5px solid #e4dcc6;border-radius:3px;padding:11px 14px;font:400 14px/1 'Jost',sans-serif;color:#211E1A;background:#fff;text-align:center}
.res-screen .kin:focus{outline:none;border-color:#C8A060}
.res-screen .kin::placeholder{color:#a49e8f}
.res-screen .kbtn{width:100%;border:2px solid #1a1a1a;border-radius:3px;padding:13px;cursor:pointer;background:#F5EFE2;color:#1a1a1a;font:700 12px/1 'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase;box-shadow:none}
.res-screen .keep-msg{font:500 12px/1.4 'Jost',sans-serif;color:#B08830;margin-top:9px;min-height:0}
.res-screen .priv{font:400 11px/1.4 'Jost',sans-serif;color:#8a8578;margin-top:9px}
.res-screen .priv u{cursor:pointer}
.res-screen .retake-wrap{text-align:center;margin-top:16px}
.res-screen .retake{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:auto;padding:11px 22px 11px 11px;border:none;border-radius:0;background:#FCFAF4;box-shadow:0 0 0 3px #B4BAC0,0 0 0 6px #ECD070,0 8px 16px -10px rgba(70,72,80,.5);font:700 13px/1 'Jost',sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#241d0c;cursor:pointer;text-decoration:none;margin:0}
.res-screen .retake .rt-tile{flex:0 0 auto;width:37px;height:37px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#EACD68;border:1px solid #B7BCC2}
.res-screen .retake .rt-tile svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.res-screen .retake .rt-arr{flex:0 0 auto;width:16px;height:16px;stroke:#D2AF48;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Gentle "tailor first?" prompt */
.style-nudge{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(28,22,10,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.style-nudge.on{display:flex}
.style-nudge .sn-card{position:relative;max-width:330px;width:100%;background-color:#FBFAF7;background-image:repeating-linear-gradient(90deg,rgba(150,140,120,.06) 0 .5px,transparent .5px 2.5px),repeating-linear-gradient(0deg,rgba(150,140,120,.05) 0 .5px,transparent .5px 2.5px);border:1px solid #d7d2c7;border-radius:0;padding:28px 24px 22px;text-align:center;box-shadow:0 24px 50px -18px rgba(20,16,8,.5);animation:snPop .4s cubic-bezier(.34,1.4,.64,1) both}
.style-nudge .sn-card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(140,130,110,.32);pointer-events:none}
@keyframes snPop{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
.style-nudge .sn-star{width:36px;height:36px;margin:0 auto 8px;display:block;filter:drop-shadow(0 2px 3px rgba(120,90,20,.35))}
.style-nudge h4{font:400 22px/1.2 'DM Serif Display',serif;color:#1f1d19;margin:0 0 8px}
.style-nudge p{font:400 14px/1.5 'Jost',sans-serif;color:#5a5349;margin:0 0 18px}
.style-nudge .sn-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:2px solid #1a1a1a;border-radius:0;padding:13px;cursor:pointer;background:#fff;color:#1a1a1a;font:700 12.5px/1 'Jost',sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 14px -10px rgba(20,16,8,.3)}
.style-nudge .sn-go svg{flex:none}
.style-nudge .sn-go svg path{stroke:#2FA35C}
.style-nudge .sn-skip{display:block;width:100%;margin-top:12px;padding:6px;background:none;border:none;cursor:pointer;font:600 12px/1 'Jost',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#8a8478;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.style-nudge .sn-card{animation:none}}
.res-screen .foot{margin-top:16px;padding-top:14px;border-top:1px solid #efece4}
/* Style Portrait footer: full-width white band filling the bottom, matching WB */
#s-res,#s-photo-res{padding-bottom:0}
#s-res .p3,#s-photo-res .p3{padding-bottom:0}
#s-res .foot,#s-photo-res .foot{width:100vw;margin:0 calc(50% - 50vw) -24px;padding:22px 12px 52px;background:#FBFAF7;border-top:1.5px solid rgba(196,201,207,.9)}
/* DESKTOP FIX: the outfit-results "rooms" use 100vw full-bleed, which is fine on a
   phone (viewport ~= app card) but on a wide laptop window 100vw is the whole screen,
   so the tile CONTENT (centered in that huge width) fell outside the clipped 480px card
   and the Styling/Shopping/Portrait hubs looked empty. On viewports wider than the card,
   cap every full-bleed element to the 480px card so it bleeds to the CARD edges, not the
   screen edges. calc(50% - 240px) self-corrects at each nesting level. Phones (<=480px)
   are untouched. */
@media (min-width:481px){
  #s-photo-res .p3,#s-photo-res .p3-hubwrap,#s-photo-res .vhub,#s-photo-res .chub,#s-photo-res .phub2,#s-photo-res .bhub,#s-photo-res .lookhub,#s-photo-res .foot,#s-res .foot{width:480px;margin-left:calc(50% - 240px);margin-right:calc(50% - 240px)}
}

/* the inline "Shop your style" results keep the existing .shop-* look on a light card */
.res-screen .shop-section{width:300px;max-width:94%;margin:16px auto 0;background:#FCFCFB;border-radius:2px;box-shadow:0 12px 24px -14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(201,162,78,.35);padding:18px 16px}
/* When the AI picks render INSIDE an action frame, fill it edge-to-edge — no cramped
   box-in-a-box. Full width + a quiet gold divider instead of its own nested frame. */
.res-screen .p3 .shop-section{width:auto;max-width:none;margin:16px 0 2px;padding:16px 0 0;background:none;box-shadow:none;border:0;border-top:1px solid rgba(201,162,78,.35);border-radius:0}

/* ---- Outfit styling-session boards (celebrate / finishing touches / complete the look) ---- */
.res-screen .occ-pill{display:inline-block;margin:10px auto 0;font:600 10px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a;background:#fff;border:1px solid #1a1a1a;border-radius:999px;padding:5px 12px}
.res-screen .occ-pill:empty{display:none}
.res-screen .worklbl{font:700 21px/1.1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#151515;margin:16px 0 6px}
.res-screen .worklbl .wl-star{color:#E3B53E}
.res-screen .tips{text-align:left;margin-top:2px}
.res-screen .tip{display:flex;gap:11px;padding:13px 0;border-top:1px solid rgba(201,162,78,.18)}
.res-screen .tip:first-child{border-top:0;padding-top:2px}
.res-screen .tip .n{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#F6E4A6,#CFA236);color:#3a2c08;font:700 12.5px/1 'Jost',sans-serif;margin-top:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.res-screen .tip .tb strong{display:block;font:400 15.5px/1.25 'DM Serif Display',serif;color:#211E1A;margin-bottom:3px}
.res-screen .tip .tb span{font:400 12.5px/1.55 'Jost',sans-serif;color:#4b4843}
.res-screen .shoplist{text-align:left}
.res-screen .shoprow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(201,162,78,.18)}
.res-screen .shoprow:first-child{border-top:0;padding-top:2px}
/* The 40x40 gold tile on each Complete the Look row is retired with the category
   emoji it existed to hold (2026-08-21). Nothing renders .shoprow .si any more.
   ⚠️ Do NOT confuse it with .res-screen .eng.si above, which is a different `si`
   entirely — a modifier on the engraved section headers, including the "Complete
   the Look" header one line above this very list. */
.res-screen .shoprow .sb{flex:1;min-width:0}
.res-screen .shoprow .sb strong{display:block;font:600 13.5px/1.3 'Jost',sans-serif;color:#211E1A}
.res-screen .shoprow .sb span{font:400 11.5px/1.35 'Jost',sans-serif;color:#6b655a}
.res-screen .shoprow a.go{flex:0 0 auto;font:600 11px/1 'Jost',sans-serif;letter-spacing:.04em;color:#8a6d20;border:1px solid rgba(201,162,78,.55);border-radius:999px;padding:7px 12px;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.res-screen .shoprow a.go:hover{background:rgba(201,162,78,.12)}
.res-screen .shopdisc{font:400 10px/1.5 'Jost',sans-serif;color:#8a8578;text-align:center;margin-top:13px}
/* third styling board rises just after the finishing-touches board */
.res-screen.rv-open .p2.p2b{animation:rvRise .7s ease 1.42s both}
.res-screen.rv-done .p2.p2b{opacity:1}
/* quiz-skipper nudge card (shown in place of the profile save) */
.res-screen .quiznudge{margin:2px 0 4px;padding:18px 16px 17px;text-align:center;border-radius:3px;border:2px solid #CBA24B;background:#fff;box-shadow:0 10px 22px -14px rgba(0,0,0,.5)}
.res-screen .quiznudge .qn-star{width:30px;height:30px;margin:0 auto 6px;filter:drop-shadow(0 2px 3px rgba(120,90,20,.3))}
.res-screen .quiznudge .qn-star svg{width:100%;height:100%;display:block}
.res-screen .quiznudge h4{font:400 20px/1.2 'DM Serif Display',serif;color:#1f1d19;margin:6px 0 5px;text-wrap:balance}
.res-screen .quiznudge p{font:400 12.5px/1.55 'Jost',sans-serif;color:#5a554c;margin:0 auto 13px;max-width:34ch}
.res-screen .quiznudge .qn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1.5px solid #CBA14A;border-radius:3px;padding:8px 15px 8px 8px;cursor:pointer;background:linear-gradient(180deg,#E9ECEF,#D0D5DA);color:#3a352c;font:700 11.5px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.res-screen .quiznudge .qn-btn .rt-tile{flex:0 0 auto;width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#EACD68;box-shadow:0 2px 4px -2px rgba(120,90,20,.4)}
.res-screen .quiznudge .qn-btn .rt-tile svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.res-screen .quiznudge .qn-btn .rt-arr{flex:0 0 auto;width:17px;height:17px;stroke:#B8831F;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* beveled chrome mirror doors (reveal overlay) */
.res-screen .doors{position:fixed;inset:0;overflow:hidden;z-index:60;perspective:1400px;pointer-events:none}
.res-screen .door{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;background:linear-gradient(125deg,#e4eaee 0%,#f6f9fa 18%,#cdd6db 38%,#eef3f5 52%,#c2ccd2 70%,#e0e6ea 100%)}
.res-screen .door.l{left:0;transform-origin:left center}
.res-screen .door.r{right:0;transform-origin:right center}
.res-screen .door .gl{position:absolute;inset:0;background:linear-gradient(122deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}
.res-screen .door .dstar{position:absolute;top:50%;transform:translateY(-50%);width:72px;height:72px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));z-index:4}
.res-screen .door.l .dstar{right:12px}
.res-screen .door.r .dstar{left:12px}
.res-screen .door .dstar svg{width:100%;height:100%;transform-origin:50% 50%}

/* reveal state machine (classes toggled in JS) */
.res-screen.rv-compose .dstar svg,.res-screen.rv-open .dstar svg{animation:rvStarLoop 1.05s linear infinite}
.res-screen.rv-compose .door.l .dstar svg,.res-screen.rv-open .door.l .dstar svg{animation-name:rvStarLoopL}
/* revisit ("See my style portrait" for a saved user): no spin, a single elegant glint as the doors open */
.res-screen.rv-quick .dstar svg{animation:rvGlint .8s ease both!important}
.res-screen.rv-open .door.l{animation:rvDoorL .85s cubic-bezier(.5,.04,.23,1) .05s both}
.res-screen.rv-open .door.r{animation:rvDoorR .85s cubic-bezier(.5,.04,.23,1) .05s both}
.res-screen.rv-open .doors{animation:rvFade 1.0s ease .05s both}
.res-screen.rv-open .spot{animation:rvSpot 1.3s ease .1s both}
.res-screen.rv-open .p1{animation:rvRise .7s ease 1.15s both}
.res-screen.rv-open .p2{animation:rvRise .7s ease 1.32s both}
.res-screen.rv-open .pcard,.res-screen.rv-open .kbwrap{animation:rvRise .7s ease 1.46s both}
.res-screen.rv-open .p3{animation:rvRise .7s ease 1.6s both}
.res-screen.rv-open .shop-section{animation:rvRise .7s ease 1.6s both}
.res-screen.rv-open .sig-dot{animation:sigPlot .75s cubic-bezier(.34,1.28,.5,1) both}
/* revisit (rv-quick): the whole portrait is already there — doors just open to reveal it, no cascade */
.res-screen.rv-quick.rv-open .p1,.res-screen.rv-quick.rv-open .p2,.res-screen.rv-quick.rv-open .pcard,.res-screen.rv-quick.rv-open .kbwrap,.res-screen.rv-quick.rv-open .p3,.res-screen.rv-quick.rv-open .shop-section,.res-screen.rv-quick.rv-open .sig-dot,.res-screen.rv-quick.rv-open .savebtn .hrt,#s-res.rv-quick.rv-open .arch-card,#s-res.rv-quick.rv-open .arch-motto,#s-res.rv-quick.rv-open .para{animation:none!important;opacity:1!important;transform:none!important}
#s-res.rv-quick.rv-open .ac-sweep{animation:none!important;opacity:0!important}
.res-screen.rv-open .savebtn .hrt{animation:heartBeat 1s ease 1.4s 1 both}
/* terminal static state — no animations, so returning to the screen never replays */
.res-screen.rv-done .doors{display:none}
.res-screen.rv-done .p1,.res-screen.rv-done .p2,.res-screen.rv-done .pcard,.res-screen.rv-done .kbwrap,.res-screen.rv-done .p3,.res-screen.rv-done .shop-section{opacity:1}
.res-screen.rv-done .spot{opacity:.62}

@keyframes rvRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rvSweep{0%{transform:translateX(-170%) skewX(-15deg);opacity:0}18%{opacity:.5}70%{opacity:.2}100%{transform:translateX(320%) skewX(-15deg);opacity:0}}
@keyframes rvTwk{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes rvShim{0%,100%{opacity:.2}50%{opacity:.95}}
@keyframes rvSpot{0%{opacity:0}78%{opacity:1}100%{opacity:.62}}
@keyframes rvDoorL{0%{transform:rotateY(0)}100%{transform:rotateY(-115deg)}}
@keyframes rvDoorR{0%{transform:rotateY(0)}100%{transform:rotateY(115deg)}}
@keyframes rvFade{0%,42%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes rvStarLoop{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rvStarLoopL{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes rvGlint{0%{opacity:.8;transform:scale(1)}45%{opacity:1;transform:scale(1.22)}100%{opacity:.9;transform:scale(1)}}
@keyframes sigPlot{from{left:calc(50% - 6px)}to{left:calc(var(--x) - 6px)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}28%{transform:scale(1.28)}45%{transform:scale(.94)}62%{transform:scale(1.14)}80%{transform:scale(1)}}

/* ===== Outfit results (#s-photo-res): no doors/curtains — the studio loader is the anticipation
   beat, so the boards rise in right away. The quiz (#s-res) keeps its mirror doors. ===== */
#s-photo-res .doors{display:none}
#s-photo-res.rv-open .spot{animation-delay:0s}
#s-photo-res.rv-open .p1{animation-delay:.05s}
#s-photo-res.rv-open .p2{animation-delay:.22s}
#s-photo-res.rv-open .p2.p2b{animation-delay:.38s}
#s-photo-res.rv-open .p3{animation-delay:.55s}
#s-photo-res.rv-open .shop-section{animation-delay:.55s}
#s-photo-res.rv-open .savebtn .hrt{animation-delay:1.4s}

@media (prefers-reduced-motion: reduce){
  .res-screen .doors{display:none!important}
  .res-screen .p1,.res-screen .p2,.res-screen .pcard,.res-screen .kbwrap,.res-screen .p3,.res-screen .shop-section,.res-screen .arch-card,.res-screen .arch-motto,.res-screen .para{opacity:1!important;animation:none!important;transform:none!important}
  .res-screen .sig-dot{animation:none!important;left:calc(var(--x) - 6px)!important}
  .res-screen .spot{animation:none!important;opacity:.62}
  .res-screen .sweep,.res-screen .rv-dust i,.res-screen .hero .shim,.res-screen .savebtn .hrt,.res-screen .dstar svg{animation:none!important}
  .res-screen .ask-nudge.on{animation:none!important;opacity:1;transform:none}
}

/* ═══ REAL PRODUCTS IN THE STYLIST CHAT (2026-09-06) ═══════════════════════
   ⚠️ NOTHING HERE MAY MAKE THE PAGE JUMP. Cath's audience runs to 80, and a
      screen that shifts under a reader is genuinely disorienting. The block is
      APPENDED below the answer she is already reading, never inserted above it,
      and the status line reserves no space it will later give back. */
.find-status{align-self:flex-start;padding:8px 16px;font-size:13.5px;color:#6f6f6f;font-style:italic;font-family:'DM Sans',sans-serif}
.find-block{align-self:stretch;margin:2px 0 8px;font-family:'DM Sans',sans-serif}
.find-head{font-size:14.5px;line-height:1.5;color:#1a1a1a;padding:0 2px 8px}
.find-door{margin:0 0 14px}
.fd-ask{font-size:13.5px;line-height:1.5;color:#4a4a4a;padding:0 2px 6px;font-style:italic}
/* A horizontal row, so a thin result set never looks like a failed screen. */
/* ⭐ THE SWIPE AFFORDANCE — her ask, 2026-09-09: "it is not intuitive that she
   can keep swiping horizontally to see more." Her pick of four rendered
   options: a fade at the edge plus a count and an arrow.
   ⚠️ THE GRADIENT ENDS IN THE PAGE'S OWN BACKGROUND, so when the row does not
     overflow there is nothing under it and nothing to see. That is why it can
     be rendered unconditionally instead of measuring overflow in JS — a
     breakable thing avoided, per her standing "reduce the amount of rules and
     breakable things" direction. */
.find-scroll{position:relative}
.find-scroll::after{content:'';position:absolute;right:0;top:0;bottom:6px;width:34px;
  pointer-events:none;background:linear-gradient(to right,rgba(247,245,240,0),rgba(247,245,240,.96))}
/* ▶ CONTENT, NOT CHROME (her mum's 2026-07-26 lesson): the NUMBER is the part
   that invites her to move. Seeing two cards and being told there are fourteen
   is a reason to swipe; an arrow on its own is a symbol asking to be trusted.
   ⚠️ 4.6:1 on the page cream, the same floor the disclosure had to clear — a
     hint nobody can read is not a hint. */
.find-hint{display:flex;justify-content:space-between;font-size:11.5px;line-height:1.4;
  color:#6e6e6e;margin:1px 2px 0;letter-spacing:.01em}
.find-cards{display:flex;gap:10px;overflow-x:auto;align-items:flex-start;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
.find-card{flex:0 0 150px;background:#fff;border:1px solid #e6e2dc;border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;display:block}
/* 🚨 NOTHING IS EVER CROPPED OFF A PRODUCT PHOTO — her catch, 2026-09-09:
   "I don't like how the photos are cut off here. Can't see top of dress or head
   of the model." ▶ MEASURED against 11 real captured thumbnails before changing
   anything: SIX are exactly square (1.00) and FIVE are portrait (0.77-0.84).
   The frame was a square 150x150 with `cover`, so every portrait photo lost
   ~20% of its height, half off the top and half off the bottom = the missing
   head and the missing hem.
   ⚠️ NO SINGLE `cover` FRAME CAN FIX THAT, because the sources genuinely differ:
   a 3:4 frame would crop 25% off the SIDES of every square one instead. So the
   fit is `contain` -- the whole garment always, no exceptions.
   ▶ THE HEIGHT IS CHOSEN FROM THE MEASUREMENT, NOT PICKED: 150x170 sits in the
   middle of the observed range (0.88), so the leftover band is at most ~10px on
   a square source and ~10px on the tallest portrait one -- and the background is
   #fff, the SAME white as the card, so the band is invisible rather than a
   letterbox. A cream placeholder here would have made every band show. */
.fc-img{width:100%;height:170px;object-fit:contain;display:block;background:#fff}
/* 🚨 THE CARD IS A `div` AND `.fc-go` IS THE LINK INSIDE IT (2026-09-09). It was
   one `<a>` wrapping everything until the save heart arrived, and a control
   nested inside a link fires both on one tap. ▶ The tap target did not shrink:
   `.fc-go` still covers the whole photo and body. */
.fc-go{display:block;text-decoration:none;color:inherit}
/* ⭐ THE FINDER'S ROW ON SHOP YOUR STYLE (2026-09-09, her ruling: real products
   lead, the six stay below). It reuses `.find-block` wholesale, so every honesty
   label, the one disclosure and the save hearts are byte-identical to the chat.
   🚨🚨 `.ss-find-wait` HOLDS THE ROW'S REAL HEIGHT WHILE THE SEARCH RUNS, AND
   THAT IS HER RULE: "NOTHING MAY JUMP. Her audience runs to 80 and a screen that
   shifts under a reader is genuinely disorienting." A search takes 5-8s and the
   six styling picks are painted in ~1s, so without a reserved space the whole
   page would lurch downward under a woman already reading it.
   ▶▶ 338px IS MEASURED OFF THE REAL FILLED ROW, NOT ESTIMATED — and the first
   estimate was 262px, which was 76px short and made the six lurch downward
   exactly as her rule forbids. The real breakdown, read in the browser:
   head 29.8 + hint 16.1 + card row 290.9 = 337.8.
   ⚠️ RE-MEASURE IT IF THE CARD CHANGES. `scratchpad/ssfind.js` prints the real
   number on every run and fails if the residual shift exceeds 24px, so this
   cannot go quietly stale — but it will need a new value, not a bigger
   tolerance. A card whose name wraps to four lines is taller than this fixture;
   the tolerance is what absorbs that, and it is deliberately small. */
.ss-find{margin:0 0 14px}
.ss-find-lead{font-size:12.5px;line-height:1.45;color:#6e6e6e;margin:0 2px 7px;letter-spacing:.01em}
/* 🚨🚨 HER CATCH FROM HER PHONE, 2026-09-09: "The spinning star is way too small.
   Needs to be bigger and indicate more that shopping/searching is happening since
   it takes a while." ▶ SHE IS RIGHT AND THE FIRST BUILD WAS PLAINLY WRONG — a
   small gold outline star alone in a 338px reserved space says nothing, and this
   search really does take 5-8 seconds.
   ✅ IT IS NOW THE SIGNAL SHE ALREADY CHOSE FOR EXACTLY THIS WAIT: the chat's
   SHOPPING star, her pink fill and her bolder gold frame, plus her own words.
   ⚠️ SIZE IS THE ONLY THING THAT MOVES, and that is already the established
   pattern — the CSS above says the waiting star is "one signal wearing three
   sizes, never three different loaders". Same path, same keyframe, same reverse
   direction, same colours. ▶ 54px because this star stands ALONE in a large
   empty panel rather than inline beside a message; at the chat's 30px it read as
   a speck, which is what she photographed. **If she wants it bigger or smaller
   still, it is this one number.** */
.ss-find-wait{height:338px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px}
/* 🚨🚨 THE GOLD STAR, NOT THE PINK ONE — HER RULING, 2026-09-09, given while
   choosing the size: "66px but I want the gold one not pink. Pink only for the
   chat."
   ▶▶ THIS ANSWERS A QUESTION THE PINK STAR SHIPPED WITH. Its own comment above
   says the wardrobe star is "deliberately left gold... Matching the rest of the
   app to it is a real question and it is HERS — offer, do not assume." She has
   answered: PINK IS THE CHAT'S VOICE. Gold is everywhere else. That is her own
   2026-08-09 mark system holding — gold = hers, pink = Catherine speaking.
   ⚠️ SO THIS STAR HAS ITS OWN CLASS AND NO `path` COLOUR RULE AT ALL: it keeps
   `_starSpin`'s own gold. NEVER add it to the `.chat-typing-star,.find-load-star`
   path selector — that selector IS the pink.
   ⚠️ SAME `spin` KEYFRAME, SAME REVERSE DIRECTION, so every wait in the app still
   turns the same way; `chatfind` asserts that by selector membership and this
   star is in its list. Only the SIZE and the COLOUR differ.
   ▶ 66px is HER pick, chosen by looking at 30 / 42 / 54 / 66 rendered on the real
   screen mid-search at her phone's true size. It is one number if she wants it
   moved. */
.ss-find-wait .ss-find-star{width:66px;height:66px;flex:0 0 66px;
  animation:spin 1.7s linear infinite reverse;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.ss-find-wait .ss-find-star{animation:none}}
/* ⚠️ HER WORDS, from `_FIND_STEPS`, and they rotate as the search goes on so it
   reads as a stylist working rather than a spinner stuck. Italic and quiet, the
   same voice as the chat's status line — this is reassurance, not a headline. */
.ss-find-wait-t{font-size:13.5px;line-height:1.4;color:#6f6f6f;font-style:italic;
  font-family:'DM Sans',sans-serif;text-align:center;padding:0 18px}
.fc-body{padding:8px 9px 9px}
/* ⚠️ 4-line clamp, the same lesson as the feed cards: a merchant name is not
   prose and an unclamped one made 650px of empty beige under a short row. */
.fc-name{font-size:12.5px;line-height:1.35;color:#1a1a1a;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fc-meta{font-size:11px;line-height:1.4;color:#6f6f6f;margin-top:4px;letter-spacing:.01em;overflow-wrap:break-word}
.fc-checks{margin-top:6px;display:flex;flex-wrap:wrap;gap:3px}
/* ⭐ THE SAVE HEART SITS UNDER THE CARD, LABELLED "SAVE" IN WORDS — the mom
   lesson, 2026-07-26: a control she cannot read is not a control, and a bare
   heart floated over the photograph would have been exactly that. It is also
   where every other card in this app keeps it (`.shop-card-act`).
   ⚠️ THE PADDING IS THE TAP TARGET, NOT DECORATION. `.wl-save`'s own 4px would
   leave a 22px button on the surface a woman taps fastest, and her audience
   runs to 80. Tighten the margins around it if space is ever needed, never
   this. The hairline is the card's own border colour, so it reads as one card
   rather than two stacked things. */
.fc-act{display:flex;justify-content:center;border-top:1px solid #f0ede8;padding:1px 6px 2px}
.fc-act .wl-save{padding:7px 10px}
/* ⚠️⚠️ THE HONESTY LABELS. A confirmed tick and an unconfirmed note must be
   TOLD APART AT A GLANCE and both must be READABLE -- the disclosure lesson
   applies here too: a notice nobody can read is not a notice. Both measured
   against #fff: #3f6b4f is 5.6:1, #8a5a00 is 4.6:1. */
.fc-yes,.fc-no,.fc-diff{font-size:10.5px;line-height:1.3;padding:2px 5px;border-radius:3px;white-space:nowrap}
.fc-yes{color:#3f6b4f;background:#eef4ef}
.fc-yes::before{content:'\2713\00a0'}
.fc-no,.fc-diff{color:#8a5a00;background:#fbf4e7}
.find-disc{font-size:11px;color:#6e6e6e;padding:2px 2px 0}
/* The browse wall's second line, 2026-09-09. It says these are the UNCHECKED
   ones and must be readable saying it — quiet, never invisible. Same #6e6e6e
   as the disclosure, which was measured at 4.6:1 on this painted background
   after a first attempt at 2.5:1 failed; an 18-to-80 audience is exactly who
   loses a low-contrast line. */
.find-sub{font-size:12.5px;line-height:1.45;color:#6e6e6e;padding:0 2px 8px;margin-top:-4px}
/* Breathing room between the verified set and the wall, so the two read as
   two different promises rather than one long row. */
.find-browse{margin-top:14px}
/* The debug panel, 2026-09-09. Deliberately plain and un-branded: it is an
   instrument, not part of the app's world, and it only ever appears behind
   ?debug=1. Monospace so numbers line up when she reads them back. */
.fdbg{margin-top:14px;background:#f4f2ee;border:1px solid #ddd8cf;border-radius:10px;padding:10px 12px}
.fdbg-h{font:600 12px/1.4 'DM Sans',system-ui,sans-serif;color:#1a1a1a;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:6px}
.fdbg-r{display:flex;justify-content:space-between;gap:12px;font:400 12px/1.7 ui-monospace,
  SFMono-Regular,Menlo,monospace;color:#4a463e}
.fdbg-r b{color:#1a1a1a;font-weight:600;text-align:right;word-break:break-word}

/* ⭐ THE WAITING STAR — Cath, 2026-09-06: "something that shows the stylist is
   actively shopping and nothing is broken."
   ⚠️ SAME `spin` KEYFRAME AND SAME REVERSE DIRECTION as .shop-star-main and
   .wdr-load-star, so every wait in the app turns the same way. It is one signal
   wearing three sizes, never three different loaders. */
.chat-typing{display:flex;align-items:center;gap:9px}
.find-status{display:flex;align-items:center;gap:9px}
/* ⭐⭐ HER ASK, 2026-09-09, ON SEEING IT ON HER PHONE: "It needs to be larger and
   pink maybe with thin gold or silver frame around it same shape as our usual
   spinning star but fill it in pink and needs to be bigger."
   ▶ SAME PATH, SAME KEYFRAME, SAME REVERSE DIRECTION — only the size and the
     colours move, so it is still the one waiting signal and not a new loader.
   🚨 ONE RULE NAMING BOTH CHAT STARS, DELIBERATELY, and `starpx`'s px2 lesson is
     why: giving each surface its own rule is exactly how the Serpui bag ended up
     cropped right on one screen and wrong on the next. The two stars appear in
     the SAME conversation during the SAME wait ("Styling your answer..." then
     "Checking what's actually in stock...") — if they ever diverge, one wait
     starts looking like two different things happening.
   ⚠️ THE WARDROBE/TRENDING STAR (.wdr-load-star) IS DELIBERATELY LEFT GOLD AND
     SMALL. She asked about the chat star, on the chat screen. Matching the rest
     of the app to it is a real question and it is HERS — offer, do not assume. */
.chat-typing-star,.find-load-star{width:30px;height:30px;flex:0 0 30px;
  animation:spin 1.7s linear infinite reverse;transform-origin:50% 50%}
/* ⚠️ THE COLOURS LIVE HERE, NOT IN THE SVG. `_starSpin()` still writes its
   presentation attributes (fill/stroke) so the markup stays valid on its own,
   and a CSS rule outranks a presentation attribute — so this is the ONE place
   the chat star's colour is decided. Do not add a second copy in the JS. */
/* ▶ HER PICK, 2026-09-09: four versions were rendered at true size and shown to
   her (thin gold / silver / BOLDER GOLD / no frame) and she chose the bolder
   gold — "C". ⚠️ The weight is the whole point of her choice: at .9 the gold
   edge nearly melts into the pink at 30px, and she wanted a FRAME. Do not
   quietly thin it back on the grounds that it looks heavy in a code diff; it
   was judged by looking at it at the size it actually renders. */
.chat-typing-star path,.find-load-star path{fill:#EC4899;stroke:#D4AF37;stroke-width:1.5}

/* ⭐ THE THINKING DOTS — her ask, 2026-09-09: "three dots moving along like
   thinking too... to emphasize not broken just thinking when she is thinking
   not shopping."
   ▶▶ TWO WAITS, TWO SIGNALS, ON PURPOSE: dots = THINKING (before a word is
     written), turning star = SHOPPING (her shops are being searched). They are
     deliberately NOT on `.find-status`; putting them there would merge the two
     states back into one and throw away the distinction she drew.
   ⚠️ THEY MUST NOT MOVE ANYTHING. Fixed size, inline-flex, no layout shift as
     they rise and fall — her audience runs to 80 and a line that jiggles under
     a reader is the thing this app keeps refusing to do. */
.chat-dots{display:inline-flex;align-items:flex-end;gap:4px;height:9px;margin-left:1px}
.chat-dots i{width:5px;height:5px;border-radius:50%;background:#EC4899;display:block;
  animation:chatdot 1.25s ease-in-out infinite}
.chat-dots i:nth-child(2){animation-delay:.16s}
.chat-dots i:nth-child(3){animation-delay:.32s}
/* ▶ A travelling wave, not three dots blinking together: the offset delays are
   what read as thinking rather than as a loading bar. */
@keyframes chatdot{
  0%,62%,100%{opacity:.28;transform:translateY(0)}
  31%{opacity:1;transform:translateY(-4px)}
}
/* ⚠️ Same courtesy the star already gives: a woman who has asked her phone to
   stop moving things still gets the signal, it simply holds still. */
@media (prefers-reduced-motion:reduce){
  .chat-dots i{animation:none;opacity:.55}
}
/* ⚠️ Respect a woman who has asked her phone to stop moving things. The star
   still shows, it simply stops turning — the reassurance is the star being
   there, and motion is not the only way to give it. */
@media (prefers-reduced-motion:reduce){
  .chat-typing-star,.find-load-star{animation:none;opacity:.75}
}

