/* =========================================================================
   Fix My Hair dark theme (2026-10): every page except the homepage
   -------------------------------------------------------------------------
   Loaded LAST in <head> (tools/apply-theme.mjs stamps it after the skin and
   nav blocks), so it repaints the cream skin in the homepage palette: the skin
   and legacy tokens are remapped to dark values, then the rules the skin or
   the pages pinned with !important are beaten on specificity. "html:root body"
   is one pseudo-class heavier than the skin's "html body" prefix.
   Never loaded on index.html or hair-simulator.html. ASCII only (gate D1).
   ========================================================================= */

html:root{
  /* homepage tokens */
  --canvas:#0f0e0b;
  --panel:#1a1916;
  --panel-2:#24221d;
  --accent:#ffed00;
  --accent-hover:#fff35c;
  --accent-muted:rgba(255,237,0,.14);
  --text-primary:#f6f1dc;
  --text-secondary:#b3ab8f;
  --text-faint:#8f8a7c;
  --on-accent:#121210;
  --line:rgba(255,237,0,.16);
  --line-strong:rgba(255,237,0,.34);
  --display:'Bricolage Grotesque',var(--fmh-font),system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);

  /* skin tokens */
  --fmh-page:#0f0e0b;
  --fmh-panel:#1a1916;
  --fmh-card:#1a1916;
  --fmh-card-2:#24221d;
  --fmh-hair:rgba(255,237,0,.16);
  --fmh-hair-strong:rgba(255,237,0,.34);
  --fmh-ink:#f6f1dc;
  --fmh-muted:#b3ab8f;
  --fmh-faint:#8f8a7c;
  --fmh-y:#ffed00;
  --fmh-y-ink:#ffed00;
  --fmh-on-y:#121210;
  --fmh-black:#0f0e0b;
  --fmh-clay:0 14px 34px -16px rgba(255,237,0,.12),inset 0 1px 0 rgba(255,237,0,.08);
  --fmh-clay-sm:0 6px 16px -8px rgba(255,237,0,.14),inset 0 1px 0 rgba(255,255,255,.06);
  --fmh-clay-dark:0 14px 34px -16px rgba(255,237,0,.18),inset 0 1px 0 rgba(255,237,0,.1);
  --fmh-glow:0 10px 30px -14px rgba(255,237,0,.55);
  --fmh-shadow:var(--fmh-clay);

  /* legacy page tokens (the pages' own :root blocks and the skin remap) */
  --black:#0f0e0b;
  --black2:#1a1916;
  --black3:#1f1d19;
  --black4:#24221d;
  --off:#f6f1dc;
  --grey1:#e4ddc4;
  --grey2:#b3ab8f;
  --grey3:#8f8a7c;
  --bg-light:#0f0e0b;
  --text-dark:#f6f1dc;
  --text-mid:#b3ab8f;
  --text-cap:#8f8a7c;
  --gold-on-light:#ffed00;
  --gold-dk:#121210; /* the pages use it as the ink on gold fills (badges, active pills, tags) */
  color-scheme:dark;
}

/* ---- page, type ------------------------------------------------------- */
html:root body{background:var(--canvas);color:var(--text-primary)}
html:root body :is(h1,h2,h3,h4,.art-title,.d){font-family:var(--display)!important}
html:root body :is(h1,h2,.art-title){font-weight:800!important;letter-spacing:-.03em}
html:root body :is(h3,h4){font-weight:700!important}
html:root body :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,td,th,blockquote,figcaption,label){color:var(--text-primary)}
/* the skin's cream-page highlighter becomes an accent word */
html:root body :is(h1,h2) :is(em,.it),html:root body .code em{color:var(--accent)!important;background:none!important}
html:root body :is(.art-lead,.lede,.lead){color:var(--text-secondary)!important}
html:root body :is(.mono,.eyebrow,.kicker,.price,.prc,.pr-price){font-family:var(--mono)!important;font-weight:500;letter-spacing:.02em}
html:root body :is(.eyebrow,.kicker){color:var(--accent)}
html:root body :is(p,li,td,dd)>a:not([class]){color:var(--text-primary);text-decoration-color:var(--line-strong);transition:color 200ms var(--ease)}
html:root body :is(p,li,td,dd)>a:not([class]):hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---- section surfaces --------------------------------------------------
   background-color only: photo heroes keep their background-image. */
html:root body :is(.sec-light,.surf-white,.jrnl-sec,.legal-hero,.legal-body,.art-main,.hub-hero,.pr-hero,.fue-hero,.smp-hero,.hs-hero,.dx-hero,.r-hero,.section,.section-divider,header[class$="-hero"]){background-color:var(--canvas)!important;color:var(--text-primary)}
html:root body :is(.sec-emph,.cta-band,.cn-final,.product-band){background-color:var(--panel)!important;color:var(--text-primary)}
html:root body :is(.cta-band,.product-band){background-image:none!important;border-color:var(--line)!important}
html:root body :is(.jrnl-sec,.sec-light.surf-white){border-top-color:var(--line)!important}
/* inline cream literals the page sweep has not reached yet */
html:root body :is([style*="background:#fff8dc" i],[style*="background: #fff8dc" i],[style*="background:#fffdf3" i],[style*="background:#f5f2ed" i]){background-color:var(--canvas)!important}
html:root body [style*="background:#fff3c4" i]{background-color:var(--panel)!important}
/* photo heroes: the cream wash behind the copy becomes a dark one */
html:root body :is(.fue-hero-bg,.smp-hero-bg,.hs-hero-bg,.cn-hero-bg)::before{background:linear-gradient(90deg,rgba(15,14,11,.88) 0%,rgba(15,14,11,.6) 38%,rgba(15,14,11,0) 68%)}

/* ---- cards ------------------------------------------------------------ */
html:root body :is(.jcard,.fact,.acc-item,.svc-card,.faq,.relcard,.pcard,.loc-day,.art-take,.art-review,.cn-way,.cn-loc,.path-seq,.lab-card,.lab-med,.cmpx-wrap,.mmx-wrap,.wf-card,.combo-card,.pharm-card,.look,.vs-yes,.vs-no,.use-c,.col-card,.cmp,.comp,.pig-col,.who-yes,.who-no,.smp-pc,.rcard,.result-card,.fue-rcard,.fue-pc,.fue-phase,.fue-zone-card,.fue-calc,.sec-light .persona,.sec-light .wf,.sec-light .rev){background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:none!important;color:var(--text-primary)}
html:root body :is(.jcard,.relcard,.loc-day,.path-seq):hover{box-shadow:0 18px 40px -22px rgba(255,237,0,.35)!important;border-color:var(--line-strong)!important}
html:root body .art-take{box-shadow:none!important}
html:root body :is(.hcard-hero,.jcard-img,.quiz-gimg){background:var(--panel)!important}
html:root body :is(.jrnl-h,.jcard-t,.path-seq-h,.loc-day-h,.loc-steps b,.rc-t,.path-seq a,.art-take li){color:var(--text-primary)!important}
html:root body :is(.jrnl-sub,.jcard-m,.path-seq-s,.loc-steps span){color:var(--text-secondary)!important}
html:root body :is(.cmpx,.mmx) thead th{background:var(--panel-2)!important;color:var(--text-primary)!important}
html:root body .fpill:not(.on){background:transparent!important;border-color:var(--line-strong)!important;color:var(--text-secondary)!important}
html:root body :is(.hub-filter,.ov-top){background:rgba(15,14,11,.88)!important;border-color:var(--line)!important}
html:root body .fmh-toc ol{background:var(--panel);border:1px solid var(--line);box-shadow:none}
html:root body .fmh-toc a:hover{background:var(--panel-2)}
html:root body .fmh-menu{background:var(--panel);border:1px solid var(--line)}
html:root body hr{border-color:var(--line)}

/* ---- footer, sticky bars ---------------------------------------------- */
html:root body :is(footer.footer,.footer,.foot){background:var(--panel)!important;border:0!important;border-top:1px solid var(--line)!important;color:var(--text-primary)!important;box-shadow:none!important}
html:root body :is(footer.footer,.foot) a:hover{color:var(--accent)!important}
html:root body :is(#stickyBar,.sticky-bar,#sticky){background:rgba(15,14,11,.94)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line)!important;box-shadow:none}

/* ---- buttons -----------------------------------------------------------
   primary: accent pill; secondary: outline pill; text link: drawn underline.
   One recipe: 200ms var(--ease) for state, 120ms for press. */
html:root body :is(.btn-gold,.cn-form button[type=submit],.menu-cta,.loc-cta a.btn-gold,.sticky-bar .btn-gold,.loc-day .loc-btn.g,#quizOverlay .quiz-next,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit,#cookie-save-prefs,#cookie-accept-all){position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0!important;border-radius:999px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-family:var(--display)!important;font-weight:700!important;font-size:16px!important;letter-spacing:-.01em;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 30px -14px rgba(255,237,0,.55)!important;filter:none!important;transition:transform 200ms var(--ease),box-shadow 200ms var(--ease),background-color 200ms var(--ease)}
html:root body :is(.btn-line,.btn-ghost,#cookie-reject-all){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--line-strong)!important;border-radius:999px!important;background:transparent!important;color:var(--text-primary)!important;font-family:var(--display)!important;font-weight:700!important;font-size:16px!important;letter-spacing:-.01em;text-decoration:none;box-shadow:none!important;transition:transform 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease)}
/* the primary sheen: one sweep per hover */
html:root body :is(.btn-gold,.cn-form button[type=submit],.loc-cta a.btn-gold,.sticky-bar .btn-gold,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit):not(.btn-pulse)::after{content:'';position:absolute;inset:0;left:0;width:auto;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:none;opacity:1;transition:none}
@media (hover:hover){
  html:root body :is(.btn-gold,.cn-form button[type=submit],.menu-cta,.loc-cta a.btn-gold,.sticky-bar .btn-gold,.loc-day .loc-btn.g,#quizOverlay .quiz-next:not(:disabled),#quizOverlay .res-cta,#jfModal .fmh-submit:not(:disabled),#photoModal .fmh-submit:not(:disabled),#cookie-save-prefs,#cookie-accept-all):hover{transform:translateY(-1px);background:var(--accent-hover)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 40px -12px rgba(255,237,0,.6)!important}
  html:root body :is(.btn-gold,.cn-form button[type=submit],.loc-cta a.btn-gold,.sticky-bar .btn-gold,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit):not(.btn-pulse):hover::after{transform:translateX(120%);transition:transform 700ms var(--ease)}
  html:root body :is(.btn-line,.btn-ghost,#cookie-reject-all):hover{transform:translateY(-1px);border-color:var(--accent)!important;color:var(--accent)!important}
}
html:root body :is(.btn-gold,.btn-line,.btn-ghost,.btn-wa,.cn-form button[type=submit],.menu-cta,.loc-day .loc-btn,#quizOverlay .quiz-next,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit,#cookie-save-prefs,#cookie-accept-all,#cookie-reject-all):active{transform:scale(.97);transition-duration:120ms}
html:root body :is(.btn,.btn-gold,.btn-line,.btn-ghost,.btn-wa,.ilink,button,[role=button],#cookie-accept-all,#cookie-reject-all,#cookie-manage):focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px}
html:root body :is(.btn-gold,.cn-form button[type=submit],#jfModal .fmh-submit,#photoModal .fmh-submit,#cookie-save-prefs,#quizOverlay .quiz-next):is([disabled],:disabled,[aria-disabled=true]){opacity:.4!important;box-shadow:none!important;transform:none!important;cursor:not-allowed}
html:root body .btn-gold .fmh-icon{background:var(--on-accent);color:var(--accent)}
html:root body :is(.btn-line,.btn-ghost) .fmh-icon{background:var(--accent);color:var(--on-accent)}
html:root body :is(.btn-gold,.btn-line)>*{position:relative;z-index:1}
/* WhatsApp keeps its own green */
html:root body :is(.btn-wa,a[href*="wa.me"].btn,.loc-day .loc-btn.l){background:#25D366!important;color:#0f0e0b!important;border:0!important;box-shadow:0 10px 30px -16px rgba(37,211,102,.6)!important}
/* text links: cream, an accent underline draws in from the left */
html:root body :is(.ilink,.art a.ilink,.art-cta a:not(.btn):not([class*="btn"])){color:var(--text-primary)!important;text-decoration:none;border-bottom:0!important;background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--line-strong),var(--line-strong));background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;transition:background-size 300ms var(--ease),color 200ms var(--ease)}
html:root body :is(.ilink,.art a.ilink,.art-cta a:not(.btn):not([class*="btn"])):hover{background-size:100% 1px,100% 1px;color:var(--accent)!important}
@media (pointer:coarse){html:root body :is(.btn-gold,.btn-line,.btn-ghost,.cn-form button[type=submit],.menu-cta,#cookie-accept-all,#cookie-reject-all){min-height:44px}}
@media (prefers-reduced-motion:reduce){
  html:root body :is(.btn,.btn-gold,.btn-line,.btn-ghost,.btn-wa,.cn-form button[type=submit],.menu-cta,.loc-day .loc-btn,#quizOverlay .quiz-next,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit,#cookie-save-prefs,#cookie-accept-all,#cookie-reject-all,.jcard,.relcard){transform:none!important}
  html:root body :is(.btn-gold,.cn-form button[type=submit],.loc-cta a.btn-gold,.sticky-bar .btn-gold,#quizOverlay .res-cta,#jfModal .fmh-submit,#photoModal .fmh-submit)::after{display:none!important}
}

/* ---- forms ------------------------------------------------------------ */
html:root body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]),select,textarea),html:root body #jfModal input:not([type=checkbox]),html:root body :is(.cf-input,.cf-loc,.cn-input,.cn-textarea){background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--text-primary)!important;box-shadow:none}
html:root body :is(input,select,textarea)::placeholder{color:var(--text-faint);opacity:1}
html:root body :is(input,select,textarea):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-muted)!important;outline:none}
html:root body :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}

/* ---- cookie banner and preferences (styled from here, blocks untouched) */
html:root body #cookie-banner{background:#1a1916!important;color:#f6f1dc;border-color:var(--line)!important;box-shadow:0 18px 50px -20px rgba(255,237,0,.25)}
html:root body #cookie-banner p{color:var(--text-primary)}
html:root body :is(#cookie-banner,#cookie-preferences) a{color:var(--accent)}
/* Accept and Reject: same geometry, both full pills */
html:root body #cookie-buttons :is(#cookie-accept-all,#cookie-reject-all){min-height:44px;padding:0 20px;font-size:14px!important;flex:1 1 auto;white-space:nowrap;border:1.5px solid var(--accent)!important}
html:root body #cookie-manage{color:var(--text-secondary)}
html:root body #cookie-preferences{background:#1a1916!important;color:#f6f1dc;border-color:var(--line)!important}
html:root body #cookie-preferences :is(h3,.cookie-cat-header,.cookie-cat-header label){color:var(--text-primary)}
html:root body #cookie-preferences .cookie-category{border-bottom-color:var(--line)}
html:root body #cookie-preferences .cookie-category p{color:var(--text-secondary)}
html:root body #cookie-preferences .cookie-cat-header input[type=checkbox]{background:#3a372f!important;border:0!important}
html:root body #cookie-preferences .cookie-cat-header input[type=checkbox]:checked{background:var(--accent)!important}
html:root body #cookie-preferences .cookie-cat-header input[type=checkbox]::after{background:#f6f1dc}
html:root body #cookie-preferences .cookie-cat-header input[type=checkbox]:checked::after{background:var(--on-accent)}
html:root body #cookie-save-prefs{width:100%}

/* ---- quiz overlay ------------------------------------------------------ */
html:root body #quizOverlay{background:var(--canvas)!important;color:var(--text-primary)}
html:root body #quizOverlay :is(.quiz-q,.res-h,.quiz-opt-t,.quiz-glbl){color:var(--text-primary)!important}
html:root body #quizOverlay :is(.quiz-sub,.quiz-opt-s,.res-sub,.quiz-rail-tag){color:var(--text-secondary)!important}
html:root body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn,.res-why,.res-line,.res-promise,.res-badge){background:var(--panel)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
html:root body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn):hover{box-shadow:inset 0 0 0 1px var(--accent)!important}
html:root body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn).sel{background:var(--accent)!important;box-shadow:0 10px 30px -14px rgba(255,237,0,.55)!important}
html:root body #quizOverlay :is(.quiz-opt,.quiz-gopt,.quiz-scale-btn).sel :is(.quiz-opt-t,.quiz-glbl,.quiz-opt-s){color:var(--on-accent)!important}
html:root body #quizOverlay :is(.quiz-back,.quiz-progwrap){background:var(--panel)!important;color:var(--text-primary)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
html:root body #quizOverlay .quiz-close{background:var(--panel)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
html:root body #quizOverlay .quiz-next:disabled{background:var(--panel)!important;color:var(--text-faint)!important;opacity:1!important}

/* ---- lead and photo modals -------------------------------------------- */
html:root body :is(#jfModal,#photoModal){background:rgba(15,14,11,.82)!important}
html:root body :is(#jfModal,#photoModal) .fmh-card{background:var(--panel)!important;color:var(--text-primary)!important;border:1px solid var(--line);box-shadow:0 30px 90px -30px rgba(255,237,0,.22)!important}
html:root body :is(#jfModal,#photoModal) .fmh-card>button[aria-label="Close"]{background:var(--panel-2)!important;color:var(--text-primary)!important}
html:root body :is(#jfModal,#photoModal) :is(h3,.ph-identity b,.ph-done-route b){color:var(--text-primary)!important}
html:root body :is(#jfModal,#photoModal) :is(h3 em,.ph-done-route span){color:var(--accent)!important}
html:root body :is(#jfModal,#photoModal) :is(.fmh-sub,label,.ph-lib,.ph-identity,.ph-done-sub,.ph-done-route div,.ph-done-chip){color:var(--text-secondary)!important}
html:root body :is(#jfModal,#photoModal) :is(.fmh-privacy,.ph-done-id){color:var(--text-faint)!important}
html:root body :is(#jfModal,#photoModal) .fmh-submit{width:100%}
html:root body :is(#jfModal,#photoModal) .fmh-err{background:rgba(229,72,72,.12)!important;border-color:rgba(229,72,72,.45)!important;color:#ffb4b4!important}
html:root body #photoModal :is(.ph-slot,.ph-done-chip,.ph-done-route){background:var(--canvas)!important;border-color:var(--line-strong)!important}
html:root body #photoModal .ph-slot.filled{border-color:var(--accent)!important}
html:root body #photoModal .ph-lbl{color:var(--text-primary)}
html:root body #photoModal .ph-slot.filled .ph-lbl{color:var(--on-accent)}
html:root body #photoModal .ph-slot.filled .ph-cam{background:var(--panel)!important;color:var(--accent)!important}
html:root body #photoModal .ph-done-ring path{stroke:var(--accent)}

/* ---- loader, legacy phone menu ----------------------------------------- */
html:root body .fmh-loader{background:var(--canvas)}
html:root body .fmh-loader-bar{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
html:root body #mobile-menu{background:rgba(15,14,11,.97)!important}
html:root body #mobile-menu .menu-scroll-cue{background:linear-gradient(to top,#0f0e0b 32%,rgba(15,14,11,0))!important}

/* ---- residue found by a computed-style scan of all 80 pages ----------- */
/* cream radial heroes without a photo: a faint accent glow on canvas */
html:root body :is(.legal-hero,.pr-hero,.dx-hero,.fem-hero){background-image:radial-gradient(ellipse 130% 80% at 50% 0%,rgba(255,237,0,.07) 0%,rgba(255,237,0,0) 60%)!important}
html:root body :is(.cn-pill,.zpill){background:var(--panel)!important;border-color:var(--line-strong)!important;color:var(--text-secondary)!important}
html:root body :is(.cn-pill.on,.zpill.active){background:var(--accent)!important;color:var(--on-accent)!important}
html:root body :is(.hcard,.hs-maint,.r-proof,.zslide,.ba,.base-fig,.look-svg){background:var(--panel)!important;border-color:var(--line)!important;box-shadow:none!important}
html:root body .mmx-band{background:rgba(255,237,0,.07)!important}
html:root body :is(.look-title,.hcard-t,.hs-maint-r,.hs-maint-r b,.r-proof-note strong){color:var(--text-primary)!important}
html:root body #res-faq :is(p,b){color:var(--text-primary)}
/* "before" chips on photos: dark glass instead of cream */
html:root body :is(.fba-lbl.b,.ba-lbl:not(.a),.ba-tag-b,.label-before,.ba-hint){background:rgba(15,14,11,.72)!important;color:var(--text-primary)!important}
/* inline literals the page sweep has not reached yet */
html:root body [style*="background:linear-gradient(180deg,#fffdf3" i]{background:var(--panel)!important;border-color:var(--line)!important;box-shadow:none!important}
html:root body :is([style*="color:#1a1916" i],[style*="color:#1A1A1A" i],[style*="color:#141414" i]){color:var(--text-primary)!important}
/* 404 "Back to home": secondary pill on the dark page */
html:root body:has(.code) a.cta{background:transparent;color:var(--text-primary);border:1px solid var(--line-strong)}
html:root body:has(.code) a.cta:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ---- button labels: no letter swap, labels wrap ------------------------
   fmh-motion.js rebuilds each button into .fmh-label > .fmh-l1/.fmh-l2 of
   per-letter .fmh-bc spans; the skin clips that to one 1.25em line, which
   cut long labels in narrow cards. Show one copy, inline letters, so words
   wrap at spaces and the button grows to two lines when it must. */
html:root body .fmh-label .fmh-l2{display:none!important}
html:root body .fmh-label{display:inline;height:auto;overflow:visible;white-space:normal;line-height:1.2;flex:0 1 auto;min-width:min-content}
html:root body .fmh-label .fmh-l1{position:static;display:inline;transform:none!important}
html:root body .fmh-label .fmh-bc{display:inline;white-space:normal;transform:none!important}
html:root body :is(.btn,.btn-gold,.btn-line,.btn-ghost,.fmh-btn,.menu-cta,.loc-cta a):not(#_){white-space:normal;text-align:center;max-width:100%;min-width:min-content;height:auto;line-height:1.2}
html:root body :is(.btn-gold,.btn-line,.btn-ghost,.fmh-btn):not(#_){padding-top:10px;padding-bottom:10px}
/* the arrow disc slides 3px instead of turning */
html:root body .fmh-btn .fmh-icon{transition:transform 200ms var(--ease)}
html:root body .fmh-btn:hover .fmh-icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){html:root body .fmh-btn:hover .fmh-icon{transform:none}}
html:root body .pcards .btn-gold:not(#_){font-size:clamp(13px,1.1vw,16px)!important}

/* ---- article section headings: promoted h3 -> h2 read as subheadings --
   The skin sizes .art h3 only; the pages' own .art h2 was light serif. */
html:root body :is(.art,.art-main .art) h2{font-family:var(--display)!important;font-weight:700!important;font-size:clamp(22px,2.1vw,28px)!important;line-height:1.15!important;letter-spacing:-.02em;margin:36px 0 12px!important;color:var(--text-primary)!important;opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important}
html:root body :is(.art,.art-main .art) h3{font-weight:700!important;font-size:19px!important;line-height:1.25!important}

/* ---- fue #labRail: the skin's 4-column desktop bento sits in a 520px
   column (.cn-narrow), which squeezed each card to 116px. Two columns,
   the dark lead card across the top. */
@media (min-width:900px){
  html:root body #labRail{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:root body #labRail .lab-card:first-child{grid-row:auto;grid-column:1/-1;background:var(--panel-2)!important}
}

/* ---- flow-map repaint (tools/theme-audit.mjs, reports/theme-map.md) ---
   Components the computed-style audit flagged at 1280 and 390: white
   article figures and clinician notes, off-palette greens, greys and dark
   golds on dark panels, and yellow-on-yellow labels (the --gold-dk remap
   above fixes the ones that use the token). Text goes to ink / ink-2,
   surfaces to panel, borders to the line tokens. */
html:root body :is(.art-fig,.art-clin){background:var(--panel)!important;border-color:var(--line)!important}
html:root body .art-clin{border-left-color:var(--accent)!important}
html:root body .art-fig figcaption{color:var(--text-secondary)!important;border-top-color:var(--line)!important}
/* category pills and tags: inline / per-tag hues fail on dark, the tint stays */
html:root body :is(.hcard-pill,.card-tag){color:var(--text-primary)!important}
/* off-palette text on dark panels */
html:root body .mmx tbody td.v-alt{color:var(--text-secondary)!important}
html:root body :is(.mmx tbody td.v-us,.vs-yes .vs-h,.col-card.yes .col-h,.who-yes .who-h){color:#3fcf73!important}
html:root body :is(.mmx thead th .sub,.sec-eye,.fem-treat-price,.inc-own-h){color:var(--accent)!important}
html:root body .mmx thead th .sub{opacity:.8}
html:root body .look-detail-in b{color:var(--text-primary)!important}
html:root body .zview-label{color:var(--text-primary)!important}
html:root body .zview-label span{color:var(--text-secondary)!important}
html:root body :is(.sec,.sec-inner)>p.rv{color:var(--text-secondary)!important}
html:root body :is(#jfModal,#photoModal) .fmh-privacy a,html:root body #fmhLeadForm a{color:var(--text-secondary)!important}
/* yellow fills carry dark ink */
html:root body :is(.label-after,.fba-lbl.a,.fue-phase-tag,.filter-pill.active,#stickyBar .sticky-btn){background:var(--accent)!important;color:var(--on-accent)!important}
html:root body :is(.filter-pill.active,#stickyBar .sticky-btn) *{color:inherit!important}
html:root body #stickyBar .sticky-t{color:var(--text-primary)!important}
/* carousel and zone-map dots: idle dots in the line tone, the live one accent */
html:root body .lab-dot:not(.on),html:root body .zdot:not(.active){background-color:var(--line-strong)!important}
/* modal checkboxes: the page paints every #jfModal input white */
html:root body :is(#jfModal,#photoModal) input[type=checkbox]{background:var(--panel)!important;border-color:var(--line-strong)!important}
/* neutral image tile (2026-10-23): stands in where a removed stock image sat
   (related/hub/journal cards, the SMP and FUE hero backdrops). Takes the full
   width of its box at 16/9 (zero specificity, so a page .jcard-img ratio
   wins), so card layouts keep their shape; fills the hero backdrops. */
html:root body .ntile{display:block;width:100%;background:var(--panel) repeating-linear-gradient(135deg,transparent 0 13px,var(--line) 13px 14px)!important}
:where(.ntile){aspect-ratio:16/9}
html:root body :is(.smp-hero-bg,.fue-hero-bg)>.ntile{height:100%}