/* toe-ui.css — Test of Energies UI. Deploy to: WP_CONTENT_DIR.'/uploads/toe/toe-ui.css'
   SCOPE ROOTS (every selector's subject is one of these five, no exceptions):
     #toe-quiz-overlay   #toe-cat-modal   #toe-choose   #toe-lang-switch   #toe-root
   ============================================================================
   SAFETY CONTRACT — Tree of Life (Astra + Elementor + WooCommerce) shares this
   install. There is NO :root, NO bare `*`, NO bare body/h1/h2/h3/p/a/button/
   label/input, NO unscoped utility class, NO @font-face, NO rule that touches
   html, body, .site, #content, .ast-*, .elementor*, .entry-content, .woocommerce.
   `body.admin-bar` appears as a PREFIX only; the SUBJECT is always #toe-lang-switch.
   Keyframes are namespaced toe* so they cannot collide with Astra/Elementor's
   global fadeUp / popIn / pulse / spin.
   toe_assets() enqueues this only on pages 104/105/106/107 and only when the
   file exists. Those pages are draft => today it renders for logged-in editors
   on preview URLs only. Verify authenticated, never with an anonymous fetch.
   ----------------------------------------------------------------------------
   .toe-lp (the landing screen) is owned by novamira-sandbox/toe-landing.css,
   injected inline as <style id="toe-lp-css">. NOTHING here targets .toe-lp or
   any of its descendants. Do not add any.
   ----------------------------------------------------------------------------
   !important INVENTORY — exactly 10, all beating a PHP/JS INLINE style, all on
   a TOE-only id, all labelled [INLINE-OVERRIDE]:
     1  §5  body.admin-bar #toe-lang-switch          top
     2  §5  body.admin-bar #toe-lang-switch @782px   top
     3  §2  #toe-quiz-overlay                        z-index
     4  §2  #toe-choose                              z-index
     5  §2  #toe-cat-modal                           z-index
     6  §7  #toe-cat-list label:has(:checked)        background
     7  §7  #toe-cat-list label:has(:checked)        border-color
     8  §7  #toe-cat-list label:has(:checked)        color
     9  §7  #toe-cat-list label:hover                border-color
    10  §14 #toe-cat-modal > div  @600px             padding
   ----------------------------------------------------------------------------
   NEVER DECLARE (JS/PHP writes these inline every render; a rule here silently
   loses, or worse, fights the animation):
     #toe-quiz-overlay / #toe-cat-modal / #toe-choose   display
     .prog-fill width · .loading-bar width · .cbar-fill width · .cbar-fill background
     .src-item border-left-color · #bn display · #fc display · #toe-cats display
     #toe-cat-go opacity · #toe-cat-go cursor · #toe-cat-count color
   Mobile-first. Breakpoints at 601px and 1024px.
   ========================================================================== */


/* ===========================================================================
   1. TOKENS + SCOPED RESET
   The palette is declared by toe-landing.css on .toe-lp ONLY. The overlay and
   both modals are wp_footer siblings of <body>, not descendants of .toe-lp, so
   var(--cream) is undefined there. Re-declare on each root — never on :root.
   Declaring these on #toe-quiz-overlay also makes its own inline
   background:var(--cream,#FBF7F0) resolve for real instead of falling back.
   =========================================================================== */
#toe-quiz-overlay,
#toe-cat-modal,
#toe-choose,
#toe-lang-switch,
#toe-root{
  --sand:#F5EFE0;
  --cream:#FBF7F0;
  --terra:#C4703A;
  --terra-d:#A35A28;
  --terra-l:#E8A070;
  --umber:#6B4C33;
  --brown:#8B6347;
  --charcoal:#2D2520;
  --muted:#8B7355;
  --gold:#C49A3C;
  --gold-l:#E8B840;
  --ink-2:#4A3428;
  --green-ok:#2E7D57;
  --toe-ring:#6B4C33;   /* focus ring, legible on cream, white and terra */
}

/* Descendant-scoped reset. Required because the overlay and both modals are
   body-level siblings (Astra's p/h3/button margins leak in), and because
   #toe-root on 106/107 sits inside .entry-content.
   Specificity is (1,0,0): it beats Astra's .entry-content h1 (0,1,1) and
   LOSES to every component rule below (1,1,0)+, which is what a reset must do.
   No theme markup is ever inside any of these five roots — verified against the
   live output of toe_sc_result(), toe_sc_test() and the toe-launch.php footer. */
#toe-quiz-overlay,#toe-quiz-overlay *,
#toe-cat-modal,#toe-cat-modal *,
#toe-choose,#toe-choose *,
#toe-lang-switch,#toe-lang-switch *,
#toe-root,#toe-root *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#toe-quiz-overlay,
#toe-cat-modal,
#toe-choose,
#toe-root{
  font-family:'Lato',sans-serif;
  color:var(--charcoal);
  line-height:1.5;
  letter-spacing:normal;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
}


/* ===========================================================================
   2. ROOT SHELLS + ADMIN-BAR STACKING FIX
   VERIFIED LIVE: wp_admin_bar_render is hooked to wp_footer at priority 1000;
   toe-launch.php's footer callback runs at the default 10. So #wpadminbar is
   emitted AFTER the overlay. #wpadminbar is z-index:99999; #toe-quiz-overlay
   and #toe-choose carry inline z-index:99999 — an exact tie, broken by DOM
   order, so the admin bar currently paints OVER both. The floating ✕ from
   floatClose() sits at top:16px/height:40px, i.e. its top 16px is behind the
   bar and dead to clicks. All four pages are draft, so 100% of today's
   viewers are logged in and hit this.
   Inline z-index cannot be beaten by a normal author rule.
   =========================================================================== */
#toe-quiz-overlay{ z-index:100001 !important; }   /* [INLINE-OVERRIDE] over #wpadminbar */
#toe-choose     { z-index:100002 !important; }    /* [INLINE-OVERRIDE] over the overlay */
#toe-cat-modal  { z-index:100003 !important; }    /* [INLINE-OVERRIDE] over #toe-choose */

/* display:none/block is written inline by openOv()/closeOv() — never declare it. */
#toe-quiz-overlay{
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* Ambient wash. This is _ref-biotipos.css's body::before, relocated so it can
   never touch ToL. position:fixed is safe: the overlay sets no transform or
   filter, so it does not become a containing block for it. */
#toe-quiz-overlay::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 15% 15%,rgba(196,112,58,.07) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 85%,rgba(122,140,110,.07) 0%,transparent 55%);
  pointer-events:none;
  z-index:0;
}
/* JS mount point. flex column + min-height:100% is what lets one .screen fill
   the overlay; the overlay is fixed inset:0 so the percentage resolves. */
#toe-quiz-overlay #toe-ov-root{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
/* Result shortcode host on 106/107 — normal document flow, no full-bleed. */
#toe-root{
  background:var(--cream);
  border-radius:18px;
  overflow:hidden;
}


/* ===========================================================================
   3. INTERACTIVE BASELINE  [DEFECT 1 + DEFECT 4]
   Blanket, root-scoped, so all four ✕ implementations, every .opt, both modals
   and the 20 category labels are covered even though they are generated in
   three different files.
   =========================================================================== */
#toe-quiz-overlay button,
#toe-quiz-overlay a[href],
#toe-quiz-overlay [role="button"],
#toe-cat-modal button,
#toe-cat-modal label,
#toe-choose button,
#toe-lang-switch a[href],
#toe-root button,
#toe-root a[href],
#toe-root label,
#toe-root [role="button"]{
  cursor:pointer;
}
#toe-quiz-overlay button,
#toe-cat-modal button,
#toe-choose button,
#toe-root button{
  font-family:'Lato',sans-serif;
  text-transform:none;
  letter-spacing:normal;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
#toe-quiz-overlay button:disabled,
#toe-cat-modal button:disabled,
#toe-choose button:disabled,
#toe-root button:disabled{
  cursor:not-allowed;   /* NOTE: beaten on #toe-cat-go, whose cursor is inline. */
}

/* The visible focus ring — keyboard only. */
#toe-quiz-overlay :focus-visible,
#toe-cat-modal :focus-visible,
#toe-choose :focus-visible,
#toe-lang-switch :focus-visible,
#toe-root :focus-visible{
  outline:3px solid var(--toe-ring);
  outline-offset:2px;
}
/* Fallback for engines without :focus-visible, then withdrawn where supported. */
#toe-quiz-overlay button:focus,
#toe-quiz-overlay a:focus,
#toe-cat-modal button:focus,
#toe-choose button:focus,
#toe-lang-switch a:focus,
#toe-root button:focus,
#toe-root a:focus{
  outline:3px solid var(--toe-ring);
  outline-offset:2px;
}
#toe-quiz-overlay button:focus:not(:focus-visible),
#toe-quiz-overlay a:focus:not(:focus-visible),
#toe-cat-modal button:focus:not(:focus-visible),
#toe-choose button:focus:not(:focus-visible),
#toe-lang-switch a:focus:not(:focus-visible),
#toe-root button:focus:not(:focus-visible),
#toe-root a:focus:not(:focus-visible){
  outline:none;
}
/* All four exit ✕ implementations get an explicit ring radius so the ring
   traces the control rather than a square. */
#toe-quiz-overlay .btn-quit:focus-visible,
#toe-quiz-overlay #toe-x:focus-visible,
#toe-quiz-overlay .btn-menu:focus-visible,
#toe-root .btn-quit:focus-visible,
#toe-root .btn-menu:focus-visible{
  border-radius:24px;
}


/* ===========================================================================
   4. SCREEN MACHINERY — exactly one .screen visible at a time
   THIS is the rule whose absence made every screen render simultaneously.
   One definition covering both mount contexts; there is no second copy
   anywhere in this file and no second animation name.
   =========================================================================== */
#toe-quiz-overlay .screen,
#toe-root .screen{
  position:relative;
  z-index:1;
  display:none;
  flex-direction:column;
  width:100%;
}
#toe-quiz-overlay .screen.active,
#toe-root .screen.active{
  display:flex;
  animation:toeFadeUp .45s ease forwards;
}
#toe-quiz-overlay .screen.active{
  flex:1 0 auto;            /* fills #toe-ov-root (min-height:100%) */
}
/* On 106/107 only #results exists and it must not eat the page. The dormant
   welcome/quiz/loading screens keep the full-height feel of the reference. */
#toe-root #results.active{ min-height:auto; }
#toe-root #welcome.active,
#toe-root #quiz.active,
#toe-root #loading.active{ min-height:100vh; }


/* ===========================================================================
   5. LANGUAGE PILL + WP ADMIN BAR  [DEFECT 2]
   The pill carries an INLINE top. Admin bar: 32px at >=783px, 46px at <=782px,
   and it exists ONLY for logged-in users — hence the body.admin-bar prefix,
   whose SUBJECT is still a TOE-only id. A logged-out visitor matches neither
   rule and the pill stays exactly where it is today.
   --toe-topgap is consumed by the inline top:var(--toe-topgap,18px) that
   patch L1 installs; the !important top below is what fixes the pill BEFORE
   L1 is applied, and stays value-identical after. Once L1 has shipped and been
   verified, entries 1 and 2 of the !important inventory may be deleted.
   var(--wp-admin--admin-bar--height) is declared by core's admin-bar.css on
   <html>, and that stylesheet only enqueues when the bar is showing.
   NO overflow:hidden here — it would clip the focus ring this file just added.
   =========================================================================== */
#toe-lang-switch{
  isolation:isolate;
  --toe-topgap:18px;
}
body.admin-bar #toe-lang-switch{
  --toe-topgap:calc(var(--wp-admin--admin-bar--height,32px) + 18px);
  top:calc(var(--wp-admin--admin-bar--height,32px) + 18px) !important; /* [INLINE-OVERRIDE] */
}
@media screen and (max-width:782px){
  body.admin-bar #toe-lang-switch{
    --toe-topgap:calc(var(--wp-admin--admin-bar--height,46px) + 18px);
    top:calc(var(--wp-admin--admin-bar--height,46px) + 18px) !important; /* [INLINE-OVERRIDE] */
  }
}
#toe-lang-switch a[href]{
  transition:background .2s ease,color .2s ease;
  white-space:nowrap;
  text-decoration:none;
}
@media (hover:hover){
  #toe-lang-switch a[href]:not([aria-current]):hover{
    background:rgba(196,112,58,.10);
    color:var(--terra-d);
  }
}
/* Inline clone rendered by swHTML() into .q-meta and into .r-topbar. */
#toe-quiz-overlay .toe-lang-inline,
#toe-root .toe-lang-inline{
  flex:0 0 auto;
  white-space:nowrap;
}
#toe-quiz-overlay .toe-lang-inline a[href],
#toe-root .toe-lang-inline a[href]{
  transition:background .2s ease,color .2s ease;
  text-decoration:none;
}
@media (hover:hover){
  #toe-quiz-overlay .toe-lang-inline a[href]:hover,
  #toe-root .toe-lang-inline a[href]:hover{
    background:rgba(196,112,58,.10);
    color:var(--terra-d);
  }
}


/* ===========================================================================
   6. DEPTH / MODE MODAL  (#toe-choose)
   Root display is inline. The inner panel has no class and no id, so
   `#toe-choose > div` is the only available hook. Escape / backdrop click /
   scroll lock / role="dialog" are supplied by patch L6  [DEFECT 3].
   =========================================================================== */
#toe-choose{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#toe-choose > div{
  position:relative;
  animation:toePopIn .28s ease forwards;
  overscroll-behavior:contain;
}
#toe-choose > div:focus{ outline:none; }     /* programmatic focus target */
#toe-choose > div h3{ line-height:1.25; }
#toe-choose > div p { line-height:1.6;  }
#toe-choose #toe-choose-deep,
#toe-choose #toe-choose-broad{
  font-size:1rem;
  line-height:1.35;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 4px 16px rgba(196,112,58,.22);
}
#toe-choose #toe-choose-broad{
  box-shadow:0 2px 10px rgba(196,112,58,.12);
}
@media (hover:hover){
  #toe-choose #toe-choose-deep:hover,
  #toe-choose #toe-choose-broad:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(196,112,58,.32);
  }
}
#toe-choose #toe-choose-deep:active,
#toe-choose #toe-choose-broad:active{ transform:translateY(0); }
#toe-choose #toe-choose-cancel{
  font-size:.9rem;
  border-radius:40px;
  transition:color .2s ease,background .2s ease;
}
@media (hover:hover){
  #toe-choose #toe-choose-cancel:hover{
    color:var(--terra-d);
    background:rgba(196,112,58,.07);
  }
}


/* ===========================================================================
   7. CATEGORY MODAL  (#toe-cat-modal)
   20 <label> wrappers, each containing input.toe-cat. The label has no class,
   so :has() is the only CSS hook for the checked state — and the label's
   background/border/color are all INLINE, so the checked state genuinely needs
   !important. #toe-cat-go's opacity and cursor are rewritten inline by
   toeCatCount() on every change; they are not declared here.
   Escape / backdrop click / scroll lock come from patch L6  [DEFECT 3].
   =========================================================================== */
#toe-cat-modal{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#toe-cat-modal > div{
  position:relative;
  width:calc(100% - 28px);      /* no inline width => no !important needed */
  animation:toePopIn .28s ease forwards;
  overscroll-behavior:contain;
  box-shadow:0 24px 70px rgba(45,37,32,.28);
}
#toe-cat-modal > div:focus{ outline:none; }
#toe-cat-modal > div h3{ line-height:1.25; }
#toe-cat-modal > div p { line-height:1.6;  }

#toe-cat-modal #toe-cat-list label{
  display:inline-flex;
  align-items:center;
  line-height:1.2;
  user-select:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
#toe-cat-modal #toe-cat-list label input.toe-cat{
  accent-color:var(--terra);
  width:15px;
  height:15px;
  flex:0 0 auto;
  cursor:pointer;
}
/* Selected state — currently signalled by the native checkbox alone. */
#toe-cat-modal #toe-cat-list label:has(> input.toe-cat:checked){
  background:rgba(196,112,58,.10) !important;   /* [INLINE-OVERRIDE] */
  border-color:var(--terra) !important;         /* [INLINE-OVERRIDE] */
  color:var(--terra-d) !important;              /* [INLINE-OVERRIDE] */
}
@media (hover:hover){
  #toe-cat-modal #toe-cat-list label:hover{
    border-color:var(--terra-l) !important;     /* [INLINE-OVERRIDE] label border is inline */
  }
}
/* The :has() rule is (2,2,2) and the :hover rule (2,1,1), both important, so a
   checked chip keeps its --terra border while hovered. Intentional. */
#toe-cat-modal #toe-cat-list label:has(> input.toe-cat:focus-visible){
  outline:3px solid var(--toe-ring);
  outline-offset:2px;
}
#toe-cat-modal #toe-cat-count{
  min-height:1.2em;
  line-height:1.2;
}
#toe-cat-modal #toe-cat-cancel,
#toe-cat-modal #toe-cat-go{
  font-size:.92rem;
  line-height:1.2;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
}
#toe-cat-modal #toe-cat-go{
  box-shadow:0 4px 16px rgba(196,112,58,.3);
}
@media (hover:hover){
  #toe-cat-modal #toe-cat-cancel:hover{
    border-color:var(--terra);
    color:var(--terra);
  }
  #toe-cat-modal #toe-cat-go:not(:disabled):hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(196,112,58,.4);
  }
}
#toe-cat-modal #toe-cat-go:disabled{ box-shadow:none; }


/* ===========================================================================
   8. QUIZ SCREEN  (#quiz — renderQ() in the overlay, static markup in #toe-root)
   Mobile-first; desktop values in §14. Because §1 zeroes padding on every
   descendant, EVERY box below must state its own padding.
   =========================================================================== */
#toe-quiz-overlay #quiz,
#toe-root #quiz{ padding:0; }

#toe-quiz-overlay .q-header,
#toe-root .q-header{
  background:#fff;
  border-bottom:1px solid rgba(196,112,58,.12);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  z-index:20;
  box-shadow:0 2px 16px rgba(107,76,51,.07);
}
/* sticky only inside the overlay's own scroll container; on 106/107 it would
   collide with the Astra header and the admin bar. */
#toe-quiz-overlay .q-header{ position:sticky; top:0; }

#toe-quiz-overlay .q-logo,
#toe-root .q-logo{
  font-family:'Playfair Display',serif;
  font-size:.82rem;
  color:var(--umber);
  font-weight:600;
  line-height:1.2;
  min-width:0;
}
#toe-quiz-overlay .q-logo span,
#toe-root .q-logo span{
  opacity:.5;
  font-weight:400;
  font-size:.8rem;
  margin-left:6px;
}
#toe-quiz-overlay .q-meta,
#toe-root .q-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-left:auto;
}
#toe-quiz-overlay .q-counter,
#toe-root .q-counter{
  font-size:.78rem;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* ✕ implementation #1 (overlay, renderQ) and #4 (dormant shortcode) */
#toe-quiz-overlay .btn-quit,
#toe-root .btn-quit{
  background:none;
  border:1.5px solid rgba(196,112,58,.3);
  color:var(--muted);
  padding:6px 14px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-quit:hover,
  #toe-root .btn-quit:hover{
    border-color:var(--terra);
    color:var(--terra);
    background:rgba(196,112,58,.04);
  }
}

/* --- progress. NEVER set .prog-fill width — renderQ writes it inline. --- */
#toe-quiz-overlay .prog-wrap,
#toe-root .prog-wrap{ background:#fff; padding:8px 14px 12px; }
#toe-quiz-overlay .prog-track,
#toe-root .prog-track{
  height:5px;
  background:var(--sand);
  border-radius:10px;
  overflow:hidden;
}
#toe-quiz-overlay .prog-fill,
#toe-root .prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--terra-l),var(--terra));
  border-radius:10px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* --- question card --- */
#toe-quiz-overlay .q-body,
#toe-root .q-body{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:22px 14px 44px;
}
#toe-quiz-overlay .q-card,
#toe-root .q-card{
  background:#fff;
  border:1px solid rgba(196,112,58,.1);
  border-radius:22px;
  padding:24px 18px;
  max-width:680px;
  width:100%;
  min-width:0;
  box-shadow:0 8px 40px rgba(107,76,51,.09);
}
#toe-quiz-overlay .q-num,
#toe-root .q-num{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--terra);
  margin:0 0 10px;
}
#toe-quiz-overlay .q-text,
#toe-root .q-text{
  font-family:'Playfair Display',serif;
  font-size:1.12rem;
  line-height:1.55;
  color:var(--umber);
  font-weight:600;
  margin:0 0 22px;
}

/* --- options --- */
#toe-quiz-overlay .opts,
#toe-root .opts{ display:flex; flex-direction:column; gap:10px; }
#toe-quiz-overlay .opt,
#toe-root .opt{
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  padding:14px 16px;
  border:2px solid var(--sand);
  border-radius:13px;
  background:var(--cream);
  cursor:pointer;
  text-align:left;
  font-family:'Lato',sans-serif;
  font-size:.93rem;
  line-height:1.45;
  color:var(--charcoal);
  transition:border-color .18s,background .18s,transform .18s;
}
@media (hover:hover){
  #toe-quiz-overlay .opt:hover,
  #toe-root .opt:hover{
    border-color:var(--terra-l);
    background:rgba(196,112,58,.04);
    transform:translateX(3px);
  }
}
#toe-quiz-overlay .opt.sel,
#toe-root .opt.sel{
  border-color:var(--terra);
  background:rgba(196,112,58,.07);
}
#toe-quiz-overlay .opt-ltr,
#toe-root .opt-ltr{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:28px;
  height:28px;
  border-radius:50%;
  background:var(--sand);
  font-weight:700;
  font-size:.78rem;
  color:var(--brown);
  transition:background .18s,color .18s;
}
#toe-quiz-overlay .opt.sel .opt-ltr,
#toe-root .opt.sel .opt-ltr{ background:var(--terra); color:#fff; }

/* --- nav. #bn display is written inline by sync(); never declare it. --- */
#toe-quiz-overlay .q-nav,
#toe-root .q-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--sand);
}
#toe-quiz-overlay .btn-prev,
#toe-root .btn-prev{
  background:none;
  border:2px solid var(--sand);
  color:var(--muted);
  padding:10px 20px;
  border-radius:40px;
  font-size:.86rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-prev:hover,
  #toe-root .btn-prev:hover{ border-color:var(--brown); color:var(--brown); }
}
#toe-quiz-overlay .btn-prev:disabled,
#toe-root .btn-prev:disabled{ opacity:.3; }
#toe-quiz-overlay .btn-next,
#toe-root .btn-next{
  background:linear-gradient(135deg,var(--terra),var(--terra-d));
  color:#fff;
  border:none;
  padding:12px 24px;
  border-radius:40px;
  font-size:.9rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  opacity:.35;
  pointer-events:none;
  transition:opacity .2s,transform .2s,box-shadow .2s;
}
#toe-quiz-overlay .btn-next.on,
#toe-root .btn-next.on{
  opacity:1;
  pointer-events:auto;
  box-shadow:0 4px 16px rgba(196,112,58,.35);
}
@media (hover:hover){
  #toe-quiz-overlay .btn-next.on:hover,
  #toe-root .btn-next.on:hover{ transform:translateY(-2px); }
}

/* --- completion CTA. display is written inline by sync(). --- */
#toe-quiz-overlay .final-cta,
#toe-root .final-cta{
  display:none;
  margin-top:20px;
  text-align:center;
  animation:toePopIn .4s ease forwards;
}
#toe-quiz-overlay .final-cta-box,
#toe-root .final-cta-box{
  background:linear-gradient(135deg,rgba(196,112,58,.07),rgba(122,140,110,.07));
  border:2px dashed rgba(196,112,58,.3);
  border-radius:18px;
  padding:22px 18px;
  margin:0 0 18px;
}
#toe-quiz-overlay .final-cta-icon,
#toe-root .final-cta-icon{ display:block; font-size:2.4rem; line-height:1; margin:0 0 10px; }
#toe-quiz-overlay .final-cta-title,
#toe-root .final-cta-title{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
  color:var(--umber);
  margin:0 0 6px;
}
#toe-quiz-overlay .final-cta-sub,
#toe-root .final-cta-sub{ font-size:.88rem; line-height:1.6; color:var(--muted); }
#toe-quiz-overlay .btn-ver,
#toe-root .btn-ver{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(135deg,var(--umber),var(--brown));
  color:#fff;
  border:none;
  padding:16px 34px;
  border-radius:50px;
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(107,76,51,.35);
  transition:transform .3s,box-shadow .3s;
  animation:toePulse 2s ease infinite;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-ver:hover,
  #toe-root .btn-ver:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 36px rgba(107,76,51,.45);
    animation:none;
  }
}


/* ===========================================================================
   9. LOADING SCREEN + FLOATING ✕ (implementation #2)
   .loading-bar width is written inline by the interval — never declare it.
   =========================================================================== */
#toe-quiz-overlay #loading,
#toe-root #loading{
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
#toe-quiz-overlay .loading-icon,
#toe-root .loading-icon{
  display:block;
  font-size:3.4rem;
  line-height:1;
  margin:0 0 20px;
  animation:toeSpin 1.8s linear infinite;
}
#toe-quiz-overlay .loading-title,
#toe-root .loading-title{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.3;
  color:var(--umber);
  margin:0 0 10px;
}
#toe-quiz-overlay .loading-msg,
#toe-root .loading-msg{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.5;
  min-height:1.4em;
  margin:0 0 24px;
}
#toe-quiz-overlay .loading-track,
#toe-root .loading-track{
  width:min(280px,80vw);
  height:6px;
  background:var(--sand);
  border-radius:10px;
  overflow:hidden;
  margin:0 auto 16px;
}
#toe-quiz-overlay .loading-bar,
#toe-root .loading-bar{
  height:100%;
  background:linear-gradient(90deg,var(--terra-l),var(--terra));
  border-radius:10px;
  transition:width .08s linear;
}
#toe-quiz-overlay .loading-pct,
#toe-root .loading-pct{
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* floatClose() ✕ — geometry and cursor are inline; add the interaction states.
   No admin-bar offset is needed here: §2 lifts the overlay above #wpadminbar. */
#toe-quiz-overlay #toe-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:border-color .2s,color .2s,background .2s;
}
@media (hover:hover){
  #toe-quiz-overlay #toe-x:hover{
    border-color:var(--terra);
    color:var(--terra);
    background:rgba(196,112,58,.04);
  }
}


/* ===========================================================================
   10. RESULT — TOP BAR
   Three DOM shapes share this bar:
     unlocked : .r-topbar-logo + .r-topbar-actions[ lang, ✕, Retake ]
     gate     : renderGate prints NO .r-topbar-actions, so finish() inserts the
                lang pill and the ✕ into .r-topbar itself
     106/107  : toe_sc_result() renders neither a ✕ nor a lang pill
   `order` normalises the first two without touching PHP.
   The #toe-root .btn-menu / .toe-lang-inline rules are inert today; they are
   kept so that adding an exit control to the result page needs no CSS change.
   =========================================================================== */
#toe-quiz-overlay #rb{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}
#toe-quiz-overlay .r-topbar,
#toe-root .r-topbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid rgba(196,112,58,.12);
  box-shadow:0 2px 16px rgba(107,76,51,.06);
}
#toe-quiz-overlay .r-topbar{ position:sticky; top:0; z-index:20; }
#toe-quiz-overlay .r-topbar-logo,
#toe-root .r-topbar-logo{
  order:0;
  margin-right:auto;
  font-family:'Playfair Display',serif;
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
  color:var(--umber);
}
#toe-quiz-overlay .r-topbar > .toe-lang-inline,
#toe-root .r-topbar > .toe-lang-inline{ order:1; }
#toe-quiz-overlay .r-topbar > .btn-menu,
#toe-root .r-topbar > .btn-menu{ order:2; }
#toe-quiz-overlay .r-topbar-actions,
#toe-root .r-topbar-actions{
  order:3;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#toe-quiz-overlay .r-topbar-actions > .btn-menu,
#toe-root .r-topbar-actions > .btn-menu{ order:1; }

/* ✕ implementation #3 — createElement('button') in finish(). It has NO
   accessible name until patch L4 lands; CSS cannot supply one. */
#toe-quiz-overlay .btn-menu,
#toe-root .btn-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1.5px solid rgba(196,112,58,.3);
  border-radius:50%;
  background:#fff;
  color:var(--brown);
  font-size:1rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-menu:hover,
  #toe-root .btn-menu:hover{
    border-color:var(--terra);
    color:var(--terra);
    background:rgba(196,112,58,.04);
  }
}
#toe-quiz-overlay .btn-retake,
#toe-root .btn-retake{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,var(--terra),var(--terra-d));
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-retake:hover,
  #toe-root .btn-retake:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(196,112,58,.35);
  }
}


/* ===========================================================================
   11. RESULT — BODY, HEADER, DOMINANT CARD, BARS, EXPLANATIONS, GATE
   NOTE: there is deliberately NO high-specificity #results-body h1/h2/h3/p
   reset here. §1's (1,0,0) reset already neutralises Astra, and a two-ID reset
   would out-specify every component rule below — silently killing
   .r-title / .premium-gate-title font-weight and .premium-gate-sub's
   `margin:0 auto`, i.e. de-centring the paywall copy on the EUR 4.99 screen.
   =========================================================================== */
#toe-quiz-overlay #results-body,
#toe-root #results-body{
  display:flex;
  justify-content:center;
  flex:1 1 auto;
  padding:24px 16px 48px;
  font-family:'Lato',sans-serif;
  color:var(--charcoal);
}
#toe-quiz-overlay .r-container,
#toe-root .r-container{ width:100%; max-width:800px; min-width:0; }

/* Error states: toe_sc_result() emits a bare <p> with no class when the token
   is missing or unknown. `> p` is the only possible hook. */
#toe-root #results-body > p,
#toe-quiz-overlay #results-body > p{
  align-self:center;
  max-width:520px;
  padding:28px 22px;
  border:1px solid rgba(196,112,58,.18);
  border-radius:18px;
  background:#fff;
  font-family:'Lato',sans-serif;
  font-size:.95rem;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
  box-shadow:0 4px 20px rgba(107,76,51,.05);
}

#toe-quiz-overlay .r-header,
#toe-root .r-header{ text-align:center; margin:0 0 26px; }
#toe-quiz-overlay .r-badge,
#toe-root .r-badge{
  display:inline-block;
  margin:0 0 14px;
  padding:5px 18px;
  border:1px solid var(--gold);
  border-radius:40px;
  color:var(--gold);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
}
#toe-quiz-overlay .r-title,
#toe-root .r-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,7vw,2.8rem);
  font-weight:700;
  line-height:1.15;
  color:var(--umber);
  margin:0 0 6px;
}
#toe-quiz-overlay .r-sub,
#toe-root .r-sub{ font-size:.92rem; line-height:1.6; color:var(--muted); margin:0; }

/* Dominant card — .sang/.cole/.flem/.melan come from ECFG[k].cls and are NOT
   written inline, so this stylesheet owns them. Values verbatim from bars(). */
#toe-quiz-overlay .dom-card,
#toe-root .dom-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:28px 22px;
  margin:0 0 18px;
  color:#fff;
  background:linear-gradient(135deg,var(--terra),var(--terra-d));
}
#toe-quiz-overlay .dom-card::before,
#toe-root .dom-card::before{
  content:'';
  position:absolute;
  top:-40px;
  right:-40px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  pointer-events:none;
}
#toe-quiz-overlay .dom-card.sang,
#toe-root .dom-card.sang { background:linear-gradient(135deg,#E8734A,#F5A07A); }
#toe-quiz-overlay .dom-card.cole,
#toe-root .dom-card.cole { background:linear-gradient(135deg,#C4703A,#D4874A); }
#toe-quiz-overlay .dom-card.flem,
#toe-root .dom-card.flem { background:linear-gradient(135deg,#7A9E8C,#5A8070); }
#toe-quiz-overlay .dom-card.melan,
#toe-root .dom-card.melan{ background:linear-gradient(135deg,#6B6B9A,#9090C0); }
#toe-quiz-overlay .dom-emoji,
#toe-root .dom-emoji{ position:relative; z-index:1; display:block; font-size:2.6rem; line-height:1; margin:0 0 10px; }
#toe-quiz-overlay .dom-label,
#toe-root .dom-label{ position:relative; z-index:1; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.8; margin:0 0 5px; }
#toe-quiz-overlay .dom-name,
#toe-root .dom-name{ position:relative; z-index:1; font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:700; line-height:1.2; margin:0 0 5px; }
#toe-quiz-overlay .dom-humor,
#toe-root .dom-humor{ position:relative; z-index:1; font-size:.78rem; letter-spacing:.1em; opacity:.72; margin:0 0 14px; }
#toe-quiz-overlay .dom-desc,
#toe-root .dom-desc{ position:relative; z-index:1; max-width:560px; font-size:.95rem; line-height:1.75; opacity:.93; margin:0; }

/* Energy-mix bars. renderResult/renderGate write BOTH width AND background
   inline on .cbar-fill, then re-run 0% -> rAF -> w after 60ms to trigger the
   transition. Declare NEITHER here. Fixed track height + reserved label/pct
   widths mean the growing fill cannot reflow anything. */
#toe-quiz-overlay .comb-card,
#toe-root .comb-card{
  background:#fff;
  border:1px solid rgba(196,112,58,.12);
  border-radius:18px;
  padding:20px 18px;
  margin:0 0 18px;
  box-shadow:0 4px 20px rgba(107,76,51,.05);
}
#toe-quiz-overlay .comb-card h3,
#toe-root .comb-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:700;
  line-height:1.3;
  color:var(--umber);
  margin:0 0 6px;
}
#toe-quiz-overlay .cbar-row,
#toe-root .cbar-row{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
#toe-quiz-overlay .cbar-row:last-child,
#toe-root .cbar-row:last-child{ margin-bottom:0; }
#toe-quiz-overlay .cbar-label,
#toe-root .cbar-label{ flex:0 0 auto; min-width:104px; font-size:.78rem; font-weight:700; line-height:1.3; color:var(--umber); }
#toe-quiz-overlay .cbar-wrap,
#toe-root .cbar-wrap{ flex:1 1 auto; min-width:0; height:8px; background:var(--sand); border-radius:8px; overflow:hidden; }
#toe-quiz-overlay .cbar-fill,
#toe-root .cbar-fill{ height:100%; border-radius:8px; transition:width 1.1s cubic-bezier(.4,0,.2,1); will-change:width; }
#toe-quiz-overlay .cbar-pct,
#toe-root .cbar-pct{ flex:0 0 auto; min-width:38px; text-align:right; font-size:.82rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--umber); }

/* Explanations. renderResult nests .comb-card INSIDE .sources-card, one per
   category; the nested card is flattened so the white-on-white stack reads as
   a group. .src-item border-left-color is written inline — do not set it. */
#toe-quiz-overlay .sources-card,
#toe-root .sources-card{
  background:#fff;
  border:1px solid rgba(196,112,58,.1);
  border-radius:18px;
  padding:20px 18px;
  margin:0 0 18px;
  box-shadow:0 4px 20px rgba(107,76,51,.05);
}
#toe-quiz-overlay .sources-card h3,
#toe-root .sources-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
  color:var(--umber);
  margin:0 0 6px;
}
#toe-quiz-overlay .src-note,
#toe-root .src-note{ font-size:.8rem; line-height:1.6; color:var(--muted); margin:0 0 16px; }
#toe-quiz-overlay .sources-card .comb-card,
#toe-root .sources-card .comb-card{
  background:transparent;
  border:none;
  border-top:1px solid rgba(196,112,58,.1);
  border-radius:0;
  box-shadow:none;
  padding:14px 0 2px;
}
/* <h3> and <p class="src-note"> are other element types, so the first
   div.comb-card genuinely is the first <div> child. */
#toe-quiz-overlay .sources-card .comb-card:first-of-type,
#toe-root .sources-card .comb-card:first-of-type{ border-top:none; padding-top:0; }
#toe-quiz-overlay .src-item,
#toe-root .src-item{
  padding:11px 14px;
  border-left:3px solid var(--terra);
  background:var(--cream);
  border-radius:0 10px 10px 0;
  margin:0 0 9px;
}
#toe-quiz-overlay .src-item:last-child,
#toe-root .src-item:last-child{ margin-bottom:0; }
#toe-quiz-overlay .src-title,
#toe-root .src-title{ font-size:.86rem; font-weight:700; line-height:1.35; color:var(--umber); }
#toe-quiz-overlay .src-desc,
#toe-root .src-desc{ font-size:.8rem; line-height:1.55; color:var(--muted); margin-top:3px; }

/* Paywall gate. Deliberately inverted against the unlocked result (white cards
   on cream vs. a dark slab), and the gold CTA is the only gold-filled element
   in the product, so the two states cannot be confused at a glance.
   a.btn-unlock restates color/text-decoration because on 106/107 it lives
   inside .entry-content, where Astra styles links. */
#toe-quiz-overlay .tabs-wrap,
#toe-root .tabs-wrap{
  background:#fff;
  border:1px solid rgba(196,112,58,.1);
  border-radius:18px;
  margin:0 0 18px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(107,76,51,.05);
}
#toe-quiz-overlay .premium-gate,
#toe-root .premium-gate{
  text-align:center;
  padding:32px 20px 30px;
  background:linear-gradient(135deg,var(--charcoal),var(--ink-2));
  color:#fff;
}
#toe-quiz-overlay .premium-gate-icon,
#toe-root .premium-gate-icon{ display:block; font-size:2.6rem; line-height:1; margin:0 0 14px; }
#toe-quiz-overlay .premium-gate-title,
#toe-root .premium-gate-title{
  font-family:'Playfair Display',serif;
  font-size:1.35rem;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  margin:0 0 8px;
}
#toe-quiz-overlay .premium-gate-sub,
#toe-root .premium-gate-sub{
  max-width:380px;
  margin:0 auto 24px;
  font-size:.9rem;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}
#toe-quiz-overlay .premium-items,
#toe-root .premium-items{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:340px;
  margin:0 auto 24px;
  text-align:left;
}
#toe-quiz-overlay .premium-item,
#toe-root .premium-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  font-size:.86rem;
  line-height:1.45;
  color:rgba(255,255,255,.92);
}
#toe-quiz-overlay .btn-unlock,
#toe-root .btn-unlock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:100%;
  padding:14px 30px;
  border:none;
  border-radius:50px;
  background:linear-gradient(135deg,var(--gold),var(--gold-l));
  color:var(--umber);
  font-family:'Lato',sans-serif;
  font-size:.98rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(196,154,60,.4);
  transition:transform .3s,box-shadow .3s;
  animation:toePulse 2.5s ease infinite;
}
@media (hover:hover){
  #toe-quiz-overlay .btn-unlock:hover,
  #toe-root .btn-unlock:hover{
    color:var(--umber);
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(196,154,60,.5);
    animation:none;
  }
}
#toe-quiz-overlay .premium-note,
#toe-root .premium-note{ font-size:.75rem; line-height:1.5; color:rgba(255,255,255,.6); margin:12px 0 0; }

/* Bottom actions */
#toe-quiz-overlay .bottom-actions,
#toe-root .bottom-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0 0 24px;
}
#toe-quiz-overlay .btn-action,
#toe-root .btn-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 20px;
  border:none;
  border-radius:13px;
  font-size:.92rem;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
#toe-quiz-overlay .btn-action.primary,
#toe-root .btn-action.primary{
  background:linear-gradient(135deg,var(--terra),var(--terra-d));
  color:#fff;
  box-shadow:0 4px 16px rgba(196,112,58,.3);
}
#toe-quiz-overlay .btn-action.outline,
#toe-root .btn-action.outline{
  background:#fff;
  border:2px solid var(--sand);
  color:var(--brown);
}
@media (hover:hover){
  #toe-quiz-overlay .btn-action.primary:hover,
  #toe-root .btn-action.primary:hover{ transform:translateY(-2px); }
  #toe-quiz-overlay .btn-action.outline:hover,
  #toe-root .btn-action.outline:hover{ border-color:var(--terra); color:var(--terra); }
}


/* ===========================================================================
   12. DORMANT WELCOME SCREEN  (#toe-root #welcome, shortcode [test_of_energies])
   No page currently uses that shortcode — 104/105 carry only [toe_landing].
   Included because #toe-root is a declared scope root and the screen would
   otherwise render completely unstyled the moment anyone places the shortcode.
   Note the class skew vs. toe-landing.css: the shortcode emits
   .bio-pill.sang/.cole/.flem/.melan, the landing CSS defines .conn/.tran/
   .cons/.unde. Both sets are covered — here for the shortcode.
   =========================================================================== */
#toe-root #welcome{
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:44px 16px;
  background:var(--cream);
}
#toe-root .w-badge{
  display:inline-block;
  background:linear-gradient(135deg,var(--terra),var(--brown));
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:6px 20px;
  border-radius:40px;
  margin:0 0 24px;
}
#toe-root .w-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,6vw,4rem);
  font-weight:700;
  line-height:1.15;
  color:var(--umber);
  margin:0 0 10px;
}
#toe-root .w-title em{ font-style:italic; color:var(--terra); }
#toe-root .w-sub{
  font-size:1rem;
  font-weight:300;
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 0 32px;
}
#toe-root .features-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  max-width:680px;
  margin:0 0 28px;
}
#toe-root .feat-chip{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid rgba(196,112,58,.25);
  border-radius:20px;
  padding:7px 16px;
  font-size:.78rem;
  font-weight:700;
  color:var(--brown);
}
#toe-root .feat-chip input.toe-cat{ accent-color:var(--terra); width:15px; height:15px; cursor:pointer; }
#toe-root .feat-chip:has(> input.toe-cat:checked){
  border-color:var(--terra);
  background:rgba(196,112,58,.10);
  color:var(--terra-d);
}
#toe-root .w-card{
  background:#fff;
  border:1px solid rgba(196,112,58,.15);
  border-radius:20px;
  padding:24px 20px;
  max-width:680px;
  width:100%;
  margin:0 auto 32px;
  box-shadow:0 8px 40px rgba(107,76,51,.08);
  text-align:left;
}
#toe-root .w-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--umber);
  margin:0 0 12px;
}
#toe-root .w-card p{ font-size:.93rem; line-height:1.8; color:var(--muted); margin:0; }
#toe-root .bio-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
#toe-root .bio-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-radius:12px;
  font-size:.87rem;
  font-weight:700;
  color:#fff;
  text-align:left;
}
#toe-root .bio-pill.sang { background:linear-gradient(135deg,#E8734A,#F5A07A); }
#toe-root .bio-pill.cole { background:linear-gradient(135deg,#C4703A,#D4874A); }
#toe-root .bio-pill.flem { background:linear-gradient(135deg,#7A9E8C,#5A8070); }
#toe-root .bio-pill.melan{ background:linear-gradient(135deg,#6B6B9A,#9090C0); }
#toe-root .bio-pill .bi{ font-size:1.3rem; line-height:1; }
#toe-root .btn-start{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:linear-gradient(135deg,var(--terra),var(--terra-d));
  color:#fff;
  border:none;
  padding:15px 34px;
  border-radius:50px;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.25;
  cursor:pointer;
  box-shadow:0 6px 24px rgba(196,112,58,.4);
  transition:transform .3s,box-shadow .3s;
  animation:toePulse 2.5s ease infinite;
}
@media (hover:hover){
  #toe-root .btn-start:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(196,112,58,.5);
    animation:none;
  }
}
/* #toe-cats display is written inline by the shortcode's JS — not declared. */
#toe-root #toe-cats{ width:100%; }
#toe-root .w-footer{ font-size:.8rem; color:var(--muted); margin-top:18px; }


/* ===========================================================================
   13. KEYFRAMES — namespaced so they cannot collide with Astra/Elementor's
   global fadeUp / popIn / pulse / spin on the same page.
   =========================================================================== */
@keyframes toeFadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes toePopIn { from{opacity:0;transform:scale(.94)}  to{opacity:1;transform:none} }
@keyframes toePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes toeSpin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }


/* ===========================================================================
   14. BREAKPOINTS + REDUCED MOTION
   =========================================================================== */
@media (max-width:600px){
  /* The modal panel's padding:32px is inline; 32px each side is unusable at
     360px. Margin and max-height are left alone. */
  #toe-cat-modal > div{ padding:22px 18px !important; }  /* [INLINE-OVERRIDE] */
}

@media (min-width:601px){
  #toe-quiz-overlay .q-header,
  #toe-root .q-header{ padding:16px 28px; flex-wrap:nowrap; }
  #toe-quiz-overlay .q-logo,
  #toe-root .q-logo{ font-size:.9rem; }
  #toe-quiz-overlay .q-meta,
  #toe-root .q-meta{ gap:14px; flex-wrap:nowrap; }
  #toe-quiz-overlay .q-counter,
  #toe-root .q-counter{ font-size:.85rem; }
  #toe-quiz-overlay .prog-wrap,
  #toe-root .prog-wrap{ padding:10px 28px 16px; }
  #toe-quiz-overlay .q-body,
  #toe-root .q-body{ padding:36px 20px 60px; }
  #toe-quiz-overlay .q-card,
  #toe-root .q-card{ padding:38px 42px; }
  #toe-quiz-overlay .q-text,
  #toe-root .q-text{ font-size:1.28rem; margin-bottom:26px; }
  #toe-quiz-overlay .opt,
  #toe-root .opt{ padding:14px 18px; }

  #toe-quiz-overlay .r-topbar,
  #toe-root .r-topbar{ padding:14px 28px; flex-wrap:nowrap; }
  #toe-quiz-overlay #results-body,
  #toe-root #results-body{ padding:40px 24px 60px; }
  #toe-quiz-overlay .dom-card,
  #toe-root .dom-card{ padding:38px; }
  #toe-quiz-overlay .dom-emoji,
  #toe-root .dom-emoji{ font-size:3rem; }
  #toe-quiz-overlay .dom-name,
  #toe-root .dom-name{ font-size:2.2rem; }
  #toe-quiz-overlay .comb-card,
  #toe-root .comb-card{ padding:26px 30px; }
  #toe-quiz-overlay .sources-card,
  #toe-root .sources-card{ padding:26px 30px; }
  #toe-quiz-overlay .sources-card .comb-card,
  #toe-root .sources-card .comb-card{ padding:16px 0 2px; }
  #toe-quiz-overlay .cbar-row,
  #toe-root .cbar-row{ gap:12px; }
  #toe-quiz-overlay .cbar-label,
  #toe-root .cbar-label{ min-width:110px; font-size:.82rem; }
  #toe-quiz-overlay .premium-gate,
  #toe-root .premium-gate{ padding:40px 20px; }
  #toe-quiz-overlay .btn-unlock,
  #toe-root .btn-unlock{ padding:14px 36px; }
  #toe-quiz-overlay .bottom-actions,
  #toe-root .bottom-actions{ grid-template-columns:1fr 1fr; margin-bottom:40px; }

  #toe-root #welcome{ padding:60px 24px; }
  #toe-root .w-card{ padding:32px 38px; }
  #toe-root .bio-grid{ grid-template-columns:1fr 1fr; }
  #toe-root .btn-start{ padding:15px 40px; font-size:1.06rem; }
}

@media (min-width:1024px){
  #toe-quiz-overlay .q-card,
  #toe-root .q-card{ padding:42px 48px; }
  #toe-quiz-overlay #results-body,
  #toe-root #results-body{ padding:48px 32px 72px; }
}

@media (prefers-reduced-motion:reduce){
  #toe-quiz-overlay .screen.active,
  #toe-root .screen.active,
  #toe-quiz-overlay .final-cta,
  #toe-root .final-cta,
  #toe-cat-modal > div,
  #toe-choose > div,
  #toe-quiz-overlay .btn-ver,
  #toe-root .btn-ver,
  #toe-quiz-overlay .btn-unlock,
  #toe-root .btn-unlock,
  #toe-root .btn-start,
  #toe-quiz-overlay .loading-icon,
  #toe-root .loading-icon{
    animation:none;
  }
  #toe-quiz-overlay .cbar-fill,
  #toe-root .cbar-fill,
  #toe-quiz-overlay .prog-fill,
  #toe-root .prog-fill{ transition:none; }
  #toe-quiz-overlay .opt:hover,
  #toe-root .opt:hover{ transform:none; }
}
