/* ============================================================
   PP POLISH  (pp-polish)
   Additive de-vibecode layer. Loads LAST (after pp-depth.css) so it
   wins the cascade. Pure styling — no markup/feature/data changes.
   Preserves identity: Source Serif 4, warm gold, cross-tick bg,
   flat-dark/washed-light, all thinker emoji, every feature.
   Reuses pp-depth tokens (--pp-r, --pp-r-sm, --pp-elev-1/2, --pp-hi)
   which are already theme-scoped for dark (:root) + light (.light-mode).
   Each block is tagged with its audit rank.
   ============================================================ */

/* ---- rank 1: warm the archetype "CLICK TO REVEAL" mystery box ----
   Was cold indigo (dark) / muddy brown (light) + pulsing gold bloom +
   square corners — the single loudest off-palette tell. Recolor ONLY the
   common resting box to the gold family; rarity tiers (emerald/amethyst/
   rainbow) and the reveal/shatter states are guarded out via :not(). */
.archetype-box:not(.rarity-rare):not(.rarity-very-rare):not(.rarity-extremely-rare):not(.revealing):not(.revealed){
  background:linear-gradient(135deg,#221c12 0%,#2c2416 100%)!important;
  border-color:#d4a843!important;
  border-radius:var(--pp-r)!important;
  box-shadow:var(--pp-hi),var(--pp-elev-1)!important;
  animation:none!important;
}
body.light-mode .archetype-box:not(.rarity-rare):not(.rarity-very-rare):not(.rarity-extremely-rare):not(.revealing):not(.revealed){
  background:linear-gradient(135deg,#2b2214 0%,#3d2f16 100%)!important;
  border-color:var(--gold-deep)!important;
  box-shadow:var(--pp-hi),var(--pp-elev-1)!important;
}
/* Replace the pulsing halo with a shadowless gold border-breathe. */
@keyframes archBorderBreathe{0%,100%{border-color:#d4a843}50%{border-color:#f0cd85}}
@media (prefers-reduced-motion: no-preference){
  .archetype-box:not(.rarity-rare):not(.rarity-very-rare):not(.rarity-extremely-rare):not(.revealing):not(.revealed){
    animation:archBorderBreathe 2.6s ease-in-out infinite!important;
  }
}
/* Tame the hover bloom to a contained lift (was 0 0 22px amber glow). */
.archetype-box:not(.revealed):not(.revealing):hover{
  border-color:#ffcd6e!important;
  box-shadow:var(--pp-hi),var(--pp-elev-2)!important;
}

/* ---- rank 2: kill the pool-CTA rose/white ghost-bloom + scale-pulse ----
   ciShinePulse blooms box-shadow to a 120px rose (rgba(244,63,94)) halo +
   scale(1.05) forever. Drop the pulse (2nd animation value); keep the gold
   gradient drift (ciShineBg) and the ::after sheen sweep. */
.ci-shine{
  animation:ciShineBg 5s linear infinite!important;
  box-shadow:0 2px 10px rgba(0,0,0,0.30),0 0 0 1px rgba(212,168,67,0.45)!important;
  transform:none!important;
}
body.light-mode .ci-shine{
  animation:ciShineBg 5s linear infinite!important;
  box-shadow:0 2px 8px rgba(72,72,80,0.18),0 0 0 1px rgba(138,102,20,0.45)!important;
}
@media (prefers-reduced-motion: reduce){ .ci-shine{ animation:none!important; } }

/* ---- rank 3: constrain the mobile "TAKE THE ASSESSMENT" CTA ----
   Was width:100% + max-width:none + 30px pad + 1.65rem inside a 0-gutter
   #introButtons = a two-line gold slab bleeding to both edges. Body-prefixed
   so it wins without editing the tangle. */
@media (max-width: 768px){
  body #introButtons{ padding:0 18px!important; box-sizing:border-box!important; }
  body #introTakeBtn{
    width:100%!important; max-width:420px!important; margin:0 auto!important;
    padding:20px 26px!important; font-size:1.2rem!important;
    letter-spacing:0.12em!important; line-height:1.2!important; box-sizing:border-box!important;
  }
}

/* ---- rank 4: reconcile the fighting radius + elevation layers ----
   pp-depth rounds/shadows .card/.question-card/.cf-col; the rest kept the
   old Swiss border-radius:0 + depth-fx --elev shadow. Unify onto the pp
   scale: panels ~14px, cards ~10px, controls 8px, pills/tracks untouched. */
.modal,#archetypeGuidePanel,.arch-guide-intro,.section-picker{ border-radius:var(--pp-r)!important; }
.axis-card,.cf-card,.arch-guide-card{ border-radius:var(--pp-r-sm)!important; }
.theme-toggle,#archetypeGuideClose,#takerName,.legal-cta,
.section-picker select,.hs-header-toggle select,.matrix-search{ border-radius:8px!important; }
/* Unify the depth-orphan shadow recipe onto the pp elevation tokens. */
.axis-card,.hs-card,.pl-card,.cf-card,#disclaimerWrap,.arch-guide-card{
  box-shadow:var(--pp-hi),var(--pp-elev-1)!important;
}
.axis-card:hover,.hs-card:hover,.cf-card:hover,.arch-guide-card:hover{
  box-shadow:var(--pp-hi),var(--pp-elev-2)!important;
}
/* Undo the universal *:focus-visible{border-radius:0} snapping rounded cards square. */
.card:focus-visible,.question-card:focus-visible,.da-section:focus-visible,.cf-col:focus-visible{ border-radius:var(--pp-r)!important; }
.btn:focus-visible,.axis-card:focus-visible,.theme-toggle:focus-visible{ border-radius:var(--pp-r-sm)!important; }

/* ---- rank 5: demote 5-CLOSEST green / 5-FARTHEST red full frames ----
   Two saturated 2px frames side-by-side read as form success/error
   validation. Quiet to a neutral hairline with a single top-edge accent;
   the header-text colour + rank chips still carry the near/far semantic. */
.cf-col-close,.cf-col-far{ border:1px solid var(--line)!important; border-top-width:2px!important; }
.cf-col-close{ border-top-color:rgba(70,138,96,0.6)!important; }
.cf-col-far{ border-top-color:rgba(168,63,58,0.6)!important; }
body.light-mode .cf-col-close{ border-color:var(--line)!important; border-top-color:rgba(47,106,69,0.7)!important; }
body.light-mode .cf-col-far{ border-color:var(--line)!important; border-top-color:rgba(168,63,58,0.7)!important; }

/* ---- rank 7: hero masthead. Eli 2026-09-01: the whole landing screen is ALL CAPS,
   title included. Weight stays 600; tracking opened to 0.02em so caps breathe. */
#introText .intro-hero-title{
  text-transform:uppercase!important; font-weight:600!important; letter-spacing:0.02em!important;
}

/* ---- rank 8: melt the empty #infographic box + retire the ring-clear smudge ----
   #infographic paints a near-white radial box + 1px border + drop shadow on a
   near-white field (the light-landing "panel + shadow blob"). .ring-clear's
   26px page-colour box-shadow only fed a now-display:none rotating name-ring. */
#infographic,body.light-mode #infographic{
  border:0!important; box-shadow:none!important; background:transparent!important;
}
.ring-clear,#footer-legal{ box-shadow:none!important; background:transparent!important; }

/* ---- rank 14: cut the hero's duplicate stat line (reversible, display-only) ----
   The stat trio is billed twice; keep one eyebrow + one descriptive line. */
#infographicWrap .wva-tagline-header{ display:none!important; }

/* ---- rank 9: normalize uppercase-eyebrow tracking to one em-based scale ----
   Tracking mixed px (0.3-8px) and em (0.04-0.22em); px doesn't scale with the
   body zoom so labels never share one rhythm. Consolidate to em. No case change. */
.axis-block-title,.wva-tl-title,.filter-stack .filter-label,.dx-title,
.dx-section-label,.dx-twin-label,.dx-school-label,.arch-guide-section-title,
.ti-headers,.cf-header{ letter-spacing:0.12em!important; }
.axis-card-poles,.hs-poles{ letter-spacing:0.08em!important; }
.axis-card-name{ letter-spacing:0.005em!important; }
.chamber-title{ letter-spacing:0.18em!important; }

/* ---- rank 11: light-mode contrast fixes (WCAG small-text) ----
   Class-driven grays escaped the inline light overrides. */
body.light-mode .cf-ovlegend,body.light-mode .cf-ovll,
body.light-mode .cf-ovll-lead,body.light-mode .cf-ovnote{ color:#5c594f!important; }
body.light-mode .cf-close-header{ color:#2f6a45!important; }
.matrix-search::placeholder{ color:#9a9cab; }
body.light-mode .matrix-search::placeholder{ color:#5f5c54; }

/* ---- rank 12: give the name input a real light-mode treatment ----
   #takerName is inline-styled dark (#121212) with zero light override —
   a black box on the pale assessment screen. */
body.light-mode #takerName{
  background:#ffffff!important; color:#1b1c22!important; border-color:rgba(138,102,20,0.45)!important;
}
#takerName:focus{ outline:none; border-color:var(--gold)!important; box-shadow:0 0 0 3px rgba(212,168,67,0.15)!important; }
body.light-mode #takerName:focus{ box-shadow:0 0 0 3px rgba(138,102,20,0.15)!important; }

/* ---- rank 25: warm the light base bg to agree with the cream washes ----
   Base resolved to a cool #fafafa under warm cream washes = grubby/patched. */
body.light-mode{ background:#f7f6f3!important; }

/* ---- rank 15: drop transform-style:preserve-3d on depth cards ----
   preserve-3d rasterizes each card in its own 3D context; under body{zoom}
   that layer is rasterized pre-zoom then re-scaled, softening the serif text.
   No card uses 3D geometry (hover is 2D translateY), so flat sharpens text. */
.card,.cf-card,.da-section,.hs-card,.pl-card,.axis-card,#disclaimerWrap,.arch-guide-card{
  transform-style:flat!important;
}

/* ---- rank 16: reveal keyframes to transform/opacity only (remove filter:blur) ----
   ppPageIn animated filter:blur(5px)->0 on EVERY question navigation — the
   most-used interaction ran its most expensive paint. Redefined last = wins.
   Existing reduced-motion gates (animation:none) still apply upstream. */
@keyframes ppPageIn{ from{opacity:0;transform:translateY(10px) scale(.994)} to{opacity:1;transform:none} }
@keyframes heroTransitionIn{ 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:none} }
@keyframes heroTransitionOut{ 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-6px)} }

/* ---- rank 19: flatten remaining secondary glow blooms ----
   Active +/-SD toggle, selected length tier, section-picker: same ghost-bloom
   pattern (infinite box-shadow paint). Fill/weight/ring already signal active. */
#cmpSpread1.active,#cmpSpread15.active,#cmpSpread2.active,
#cmpSpread1TT.active,#cmpSpread15TT.active,#cmpSpread2TT.active{
  animation:none!important;
  box-shadow:0 0 0 2px var(--bg-0),inset 0 0 0 1px var(--gold)!important;
}
.analysis-toggle.length-picker button.active{ box-shadow:0 0 0 1px rgba(212,168,67,0.5)!important; }
.analysis-toggle.length-picker button:hover:not(.active){ box-shadow:0 2px 10px rgba(0,0,0,0.18)!important; }
.section-picker{ box-shadow:var(--pp-hi),var(--pp-elev-2)!important; animation:none!important; }

/* ---- rank 21: motion hygiene ----
   Shrink the 90px reveal shove (reveals should enhance already-visible
   content, not relocate it from off-screen); release the always-on ring
   will-change; scope transition:all to real properties. */
@keyframes ppSlideIn{ from{opacity:0;transform:translate3d(24px,0,0)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: no-preference){
  .section-transitioning-in > *{ animation-duration:.5s!important; }
  .section-transitioning-in > *:nth-child(n+6){ animation-delay:.24s!important; }
}
.float-name{ will-change:auto!important; }
.classification,.closest-furthest,.section-title{
  transition:opacity var(--dur-3,240ms) var(--ease,ease),transform var(--dur-3,240ms) var(--ease,ease)!important;
}
.sim-badge{
  transition:background var(--dur-2,180ms) var(--ease,ease),border-color var(--dur-2,180ms) var(--ease,ease),color var(--dur-2,180ms) var(--ease,ease)!important;
}

/* ---- rank 18: mobile theme-toggle -> 44px touch target ----
   A later mobile block collapsed the always-visible LIGHT/DARK control to ~24px. */
@media (max-width: 768px){
  body .theme-toggle{
    min-height:44px!important; display:inline-flex!important; align-items:center!important; padding:0 12px!important;
  }
}

/* ---- rank 23: enlarge the mobile footer legal buttons (~9px -> ~11px) ---- */
@media (max-width: 768px){
  body #footer-legal .legal-cta{
    font-size:0.72rem!important; padding:9px 12px!important; min-height:40px!important;
    display:inline-flex!important; align-items:center!important; letter-spacing:0.08em!important;
  }
}

/* ---- rank 10: tint the monochrome default diamond marker gold (both themes) ----
   Default axis marker changed from a glossy blue orb to a gold diamond. Only the
   monochrome default glyph is tinted; user-picked color emoji ignore `color`.
   Hardcoded gold per theme so it stays gold independent of the --gold token. */
.axis-card-dot-sym{ color:#d4a843; }
body.light-mode .axis-card-dot-sym{ color:#8a6614; }

/* ---- B4: mobile optimization pass (390 / 360) ----
   All screens verified overflow-free; these tighten density + tap comfort where
   this session's changes land (thinker modal: description then CAT pills). */
@media (max-width: 768px){
  /* Reclaim a little width + calmer gutters in the thinker modal */
  #modalContent{ padding-left:14px!important; padding-right:14px!important; }
  /* The inferred-estimate disclaimer runs long; shrink so it doesn't eat 3 lines */
  #modalContent div[style*="9aa4b2"]{ font-size:0.8rem!important; line-height:1.35!important; }
  /* Foundational-pick pills (now below the description): comfortable, evenly wrapped */
  #modalContent span[style*="border-left:4px"]{ font-size:0.82rem!important; padding:6px 11px!important; line-height:1.3!important; }
  /* Keep the agreement/disagreement delta value from wrapping to its own line */
  #modalContent div[style*="grid-template-columns:1fr auto 1fr"]{ column-gap:8px!important; }
}

/* ---- B3: shared-question coverage / overlap summary ----
   Eli 2026-07-30: enlarged + organized (lead on top, 4 grade warnings 2x2, note
   below). The 2x2 grid is defined in index.html (.cf-ovlegend display:grid); these
   rules set the size on BOTH desktop and mobile (they used to force it tiny). */
.cf-ovlegend{ font-size:0.98rem!important; gap:9px 24px!important; margin:0 auto 15px!important; padding-bottom:13px!important; line-height:1.32!important; }
.cf-ovlegend .ovl{ transform:scale(0.96); }
.cf-ovll-lead{ font-size:0.98rem!important; }
.cf-ovnote{ font-size:0.88rem!important; margin-top:8px!important; opacity:0.82; line-height:1.4!important; }
.ov-warn{ font-size:0.9rem!important; line-height:1.45!important; padding:9px 13px!important; margin-bottom:12px!important; }
.ov-warn .ov-warn-more{ font-size:0.9rem!important; }
@media(max-width:768px){
  .cf-ovlegend{ font-size:1.1rem!important; gap:11px 16px!important; }
  .cf-ovll-lead{ font-size:1.02rem!important; }
  .cf-ovnote{ font-size:0.98rem!important; }
  .ov-warn{ font-size:1.06rem!important; }
}

/* ---- rank 24: cap modal running-prose measure + even the guide grid ----
   Guide/modal paragraphs spanned ~118ch, past the 65-75ch comfort ceiling. */
.arch-guide-intro,#archetypeGuide p,.modal .modal-body p{ max-width:68ch; }
#archetypeGuideGrid{ grid-auto-rows:1fr; }
.arch-guide-card{ display:flex; flex-direction:column; }

/* ---- name enlargement: make the thinker name in the card much larger ----
   Base name was --fs-lg (1.25rem) — too quiet for the card's headline. Bump it
   to headline scale. #modalContent h2 (id) outranks the inline .modal h2 rules
   even where those use !important, so this wins in every theme + breakpoint.
   The inline (years) span keeps its own small size; scaled down at mobile
   widths so the full-screen card doesn't overflow. */
#modalContent h2{ font-size:2.4rem!important; line-height:1.14!important; letter-spacing:0.01em!important; }
@media (max-width:768px){ #modalContent h2{ font-size:1.95rem!important; } }
@media (max-width:480px){ #modalContent h2{ font-size:1.62rem!important; } }

/* ---- kinesis pass: capability-based hover gating (touch/tablet) ----
   pp-depth disables hover-lift by WIDTH (<=720px). That misses touch devices
   wider than 720 (tablets, touch laptops), where a :hover transform sticks
   after a tap and the control freezes mid-lift. Motion doctrine gates hover
   MOTION behind real pointer capability, not width. Here we drop only the
   transform lift on no-hover/coarse pointers (color/shadow feedback stays,
   and :active press feedback is untouched, so taps still feel responsive). */
@media (hover: none), (pointer: coarse){
  .card:hover,.da-section:hover,.question-card:hover,.cf-col:hover,.cf-row:hover,
  .likert > button:hover,.btn:hover,.section-nav-pill:hover,.axis-card:hover,
  .hs-card:hover,.pl-card:hover,.arch-guide-card:hover,.tt-tier-btn:hover,
  [class*="tier-btn"]:hover,.analysis-toggle.length-picker button:hover,
  .archetype-box:hover{
    transform:none!important;
  }
}

/* ---- kinesis pass 2: more motion (all gated) ----
   Movement only under no-preference; hover only on hover/fine pointers.
   GPU-only (transform/opacity), sub-300ms, ease-out / soft custom curve. */
@media (prefers-reduced-motion: no-preference){
  /* modal open: backdrop dims in, card rises + settles (modals stay centered) */
  .modal-overlay.active{ animation: ppOverlayIn 160ms ease-out both; }
  @keyframes ppOverlayIn{ from{opacity:0} to{opacity:1} }
  .modal-overlay.active .modal{ animation: ppModalIn 210ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes ppModalIn{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
  /* modal length-tier switch: gentle fade so Essential/Core/Full swaps aren't a hard cut */
  #modalContent .modal-compare-block{ animation: ppSoftIn 200ms ease-out both; }
  @keyframes ppSoftIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
}
@media (hover: hover) and (pointer: fine){
  /* foundational-answer pills: quiet lift on hover (feedback that they're inspectable) */
  #modalContent span[style*="border-left:4px"]{ transition:transform 140ms ease-out, box-shadow 140ms ease-out; }
  #modalContent span[style*="border-left:4px"]:hover{ transform:translateY(-1px); box-shadow:var(--pp-elev-1); }
  /* axis comparison rows: nudge on hover */
  #modalContent .cmp-axis-row, #modalContent .modal-axis-row{ transition:transform 140ms ease-out; }
  #modalContent .cmp-axis-row:hover, #modalContent .modal-axis-row:hover{ transform:translateX(2px); }
  /* thinker glyph nodes on the map: subtle pop on hover */
  .sym{ transition:transform 130ms cubic-bezier(.2,.7,.2,1); }
  .sym:hover{ transform:scale(1.18); }
}