/* ef-small-rose.css: LULU STREAM BATCH 1 (small rose text -> Spiced Mocha / Graphite).
 * Spec: documents/es-os/website-lulu-state/BATCH1-SMALL-TEXT-SPEC.md 3bce59281abd (addendum to CRO-SPEC-tokens-tap.md 631f4470a3c9, PART 1 ONLY).
 * Lulu's rule (9/20, B5-007): SMALL rose text becomes Spiced Mocha #895D58 on Ivory / Blush, Graphite #2E2926 on Dusty Rose.
 * Selector source: the batch-1 census (hubb/lulu-census 7038d4f2) FAIL list, 10/8, Home + /phoenix-botox/ + /xeomin-daxxify-guide/ at 390 + 1440;
 * plus one row from the batch-3 stage census (DEV 5, 10/8): .spk-tbl-count, so this one sheet covers batches 1-3.
 * Each selector is the rule that sets the colour today (the cascade winner), copied as is, so this sheet only wins by loading last.
 * COLOUR LINES ONLY. No buttons, no large text, no backgrounds, borders or icons.
 * HELD for Lulu (not here): Clay #BE8B7C text, small text on Nude. UNDO = remove this one stylesheet.
 */

/* ---- Spiced Mocha on LIGHT grounds (Ivory Silk #F9F7F3 / Blush #F6E7E4) ---- */

/* census: /phoenix-botox/ 390+1440, chip span.ba3-pill on Blush 3.92 (default/hover/focus) */
.efw-t-ba .ba3-pill { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 390+1440, figcaption.ba3-tag 16-18px on Blush 3.92 */
.efw-t-ba figcaption.ba3-tag { color: var(--spiced-mocha); }
/* census: / 390+1440, chip .r1-ba-pills span on Blush 3.92 (default/hover/focus) */
.r1-ba-pills span { color: var(--spiced-mocha); }
/* census: / 390+1440, figcaption.r1-ba-head 16-18px on Blush 3.92 */
.r1-ba-head { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 390+1440, div.meta 14-16px on Ivory 4.40 */
.efw-t-areas .gcard .meta { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 1440, span.area-sep on Ivory 4.40 */
.efw-t-areas .area-sep { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 390, span.dose-n 23px on Ivory 4.40 / Blush 3.92. SMALL only under 880px (ef-t-mobile.css sets 23px
   there); at wider widths it is 24px = large text (passes 3:1) and stays Rosewood: the same breakpoint as its size rule. */
@media (max-width: 880px) { .efw-t-why .dose-n, .efw-t-dose .dose-n { color: var(--spiced-mocha); } }
/* census: / 390, span.r1-why-n 23px on Ivory 4.40. SMALL only under 768px (home-r1.css sets 23px there); 24px above = large, unchanged. */
@media (max-width: 768px) { .r1-why-n { color: var(--spiced-mocha); } }
/* census: /phoenix-botox/ 390+1440, div.t 'What Is It?' 16px on Blush 3.92 */
.efw-t-ess .wb .t, .efw-t-ess .whatbox .t { color: var(--spiced-mocha); }
/* census: / 390 span.hm2-count; /phoenix-botox/ 390 span.mba-count, span.cmpc-count, span.arc-count; all 14px on Ivory 4.40 */
.hm2-count, .efw-t-ba .mba-count, .efw-t-cmp .cmpc-count, .efw-t-areas .arc-count { color: var(--spiced-mocha); }
/* census (batch 3 stage, DEV 5, 10/8; the WMO): Spoke table pager count span.spk-tbl-count 14px/600, Rosewood on Ivory 4.40
   (Kybella + Dysport tables). On /xeomin-daxxify-guide/ 390 it sits on a lighter ground (4.61, passes) and changes too (same rule). */
.spk-page .spk-tbl-count { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 390, the areas-note link 15px on Ivory 4.40 (default/hover/focus) */
.ef-page .efw-t-areas .areas-note a { color: var(--spiced-mocha); }
/* census: all 3 pages 390, a.ef-book-bar-call 14px on Ivory 4.40 (default/focus). The book-bar sheet prints in <body>,
   after this one, so this copy carries one extra type selector (html); its :hover rule (Graphite) still wins on hover. */
html body:not(.ef-bar-always) #ef-book-bar .ef-book-bar-call { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ 390+1440, links with an INLINE colour (style="color:var(--rosewood)") in page content:
   the 'related' line (.efw-t-fhm p.sub, 18-20px) and the compare links (.efw-t-cmp .cmp-links, 15px). An inline colour
   beats every stylesheet rule, so these two lines alone need !important; scoped to the inline rose value only.
   The compare-links line is kept at specificity 0,2,1 on purpose: below the theme's own !important hover rule
   (.efw-t-cmp .cmp-links a:hover, 0,3,1, Graphite 80% above 880px), so that hover stays exactly as it is. */
.ef-page .efw-t-fhm p.sub a[style*="--rosewood"] { color: var(--spiced-mocha) !important; }
.cmp-links a[style*="--rosewood"] { color: var(--spiced-mocha) !important; }

/* ---- hover / focus states that turn rose (small links on Ivory 4.40) ---- */

/* census: /phoenix-botox/ 1440 + /xeomin-daxxify-guide/ 1440, a.pill hover on Ivory 4.40 (.pill:active kept the same pair) */
.pill:hover, .pill:active { color: var(--spiced-mocha); }
/* census: /phoenix-botox/ + /xeomin-daxxify-guide/ 1440, the top-nav items with a dropdown, hover/focus 13.5px on Ivory 4.40 */
.navitem:has(.dropdown):hover > a, .navitem:has(.dropdown):focus-within > a { color: var(--spiced-mocha); }
/* census: / 1440, the home top-nav items with a dropdown, hover/focus 13.5px on Ivory 4.40 */
.r1-navitem:has(.r1-dropdown):hover > a, .r1-navitem:has(.r1-dropdown):focus-within > a { color: var(--spiced-mocha); }

/* ---- Graphite on DUSTY ROSE #DDB6B5 ---- */

/* census: /phoenix-botox/ 390+1440, div.eg 'get started' Rosewood on Dusty Rose 2.56 */
.efw-t-cta .eg { color: var(--graphite); }
/* census: / 390+1440, div.r1-eyebrow 'Get Started' Spiced Mocha on Dusty Rose 3.03 */
.r1-cta .r1-eyebrow { color: var(--graphite); }
/* census: /xeomin-daxxify-guide/ 390+1440, div.spk-cta-eg Spiced Mocha on Dusty Rose 3.03 */
.spk-page .spk-cta-eg { color: var(--graphite); }

/* ---- the base spec's one non-rose line (QW-A): 50% Ivory on #383431 -> 70% ---- */

/* census: / 390+1440, .r1-rev-who span 'Google Review' 14-15px, Ivory@0.5 on #383431 4.17 */
.r1-rev-who span { color: rgba(249, 247, 243, 0.7); }