/* ============================================================
   PP DEPTH REDESIGN  (pp-depth)
   Additive CSS layer. Introduces foreground/background depth
   ("3D-esque" elevation), smoother motion, cleaner mobile.
   Pure styling — no markup/feature changes. Loads LAST so it
   wins the cascade over the flat Swiss base (non-!important).
   ============================================================ */

:root{
  /* Elevation system — layered ambient + directional shadow, tinted to the field. */
  --pp-r: 14px;                 /* surface corner radius */
  --pp-r-sm: 10px;
  --pp-elev-1:
     0 1px 1px rgba(0,0,0,.30),
     0 4px 10px -4px rgba(0,0,0,.45),
     0 12px 28px -12px rgba(0,0,0,.55);
  --pp-elev-2:
     0 2px 4px rgba(0,0,0,.32),
     0 10px 24px -8px rgba(0,0,0,.55),
     0 30px 60px -20px rgba(0,0,0,.62);
  --pp-elev-hover:
     0 3px 6px rgba(0,0,0,.34),
     0 16px 34px -10px rgba(0,0,0,.6),
     0 40px 80px -24px rgba(0,0,0,.7);
  --pp-hi: inset 0 1px 0 rgba(255,255,255,.055);   /* top light-catch edge */
  --pp-surface: #23242c;        /* raised module surface (dark) */
  --pp-surface-2: #272834;      /* nested/hover surface (dark) */
  --pp-field-a: #23242e;        /* field glow near top */
  --pp-field-b: #141519;        /* field base */
  --pp-field-c: #101116;        /* field deep edges */
  --pp-motion: 260ms cubic-bezier(.2,.7,.2,1);
}

body.light-mode{
  --pp-elev-1:
     0 1px 2px rgba(28,34,54,.06),
     0 6px 14px -6px rgba(28,34,54,.14),
     0 16px 30px -16px rgba(28,34,54,.12);
  --pp-elev-2:
     0 2px 6px rgba(28,34,54,.08),
     0 14px 30px -10px rgba(28,34,54,.16),
     0 34px 60px -24px rgba(28,34,54,.18);
  --pp-elev-hover:
     0 4px 10px rgba(28,34,54,.10),
     0 20px 40px -12px rgba(28,34,54,.20),
     0 44px 80px -28px rgba(28,34,54,.22);
  --pp-hi: inset 0 1px 0 rgba(255,255,255,.9);
  --pp-surface: #ffffff;
  --pp-surface-2: #ffffff;
  --pp-field-a: #ffffff;
  --pp-field-b: #eceff4;
  --pp-field-c: #e4e8ef;
}

/* -------- Background -------- */
/* Ambient aurora removed per request. The page keeps the app's own base
   theme field; modules carry their own elevation/shadows against it.
   NOTE: an earlier version forced position:relative;z-index:1 on
   .header/.hero/.modal-overlay/.ad-slot to sit above the (now removed)
   aurora — that broke the fixed modal overlay (it rendered in-flow at the
   bottom of the page) and the sticky header. Removed entirely; those
   elements keep their native positioning. */

/* ============================================================
   ELEVATED MODULES
   ============================================================ */

/* Generic card surface */
.card{
  background: var(--pp-surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--pp-r) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-1) !important;
  transition: transform var(--pp-motion), box-shadow var(--pp-motion), border-color var(--pp-motion);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--pp-hi), var(--pp-elev-hover) !important;
  border-color: var(--line-strong) !important;
}

/* NOTE: .intro-rise is a staggered rise-in MOTION wrapper applied to several
   hero blocks (logo, title, CTA cluster) — NOT a card. Keep it transparent so
   the hero stays clean; depth belongs to real modules only. */
.intro-rise{ background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* Deep-analysis panels */
.da-section{
  border-radius: var(--pp-r) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-1) !important;
  background: var(--pp-surface) !important;
  transition: box-shadow var(--pp-motion), transform var(--pp-motion);
}
.da-section:hover{ box-shadow: var(--pp-hi), var(--pp-elev-2) !important; }

/* Disagreement cards */
.dx-card{
  border-radius: var(--pp-r-sm) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-1) !important;
}

/* Closest / Farthest columns — keep their colored identity, add lift */
.cf-col{
  border-radius: var(--pp-r) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-2) !important;
  background: var(--pp-surface) !important;
}
.cf-row{
  border-radius: 8px !important;
  transition: background var(--pp-motion), transform var(--pp-motion);
}
.cf-row:hover{ transform: translateX(2px); }

/* Question cards (assessment) — the most-used module: make it float */
.question-card{
  background: var(--pp-surface) !important;
  border-radius: var(--pp-r) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-1) !important;
  transition: transform var(--pp-motion), box-shadow var(--pp-motion);
}
.question-card:hover{ box-shadow: var(--pp-hi), var(--pp-elev-2) !important; }

/* Likert 1–5 buttons — chunky elevated toggles */
.likert > button{
  border-radius: var(--pp-r-sm) !important;
  box-shadow: var(--pp-hi), var(--pp-elev-1) !important;
  background: var(--pp-surface-2) !important;
  transition: transform 140ms var(--pp-motion), box-shadow 140ms, background 140ms, color 140ms !important;
}
.likert > button:hover{
  transform: translateY(-2px);
  box-shadow: var(--pp-hi), var(--pp-elev-hover) !important;
}
.likert > button:active{ transform: translateY(0) scale(.97); }

/* Segmented length/tier selector */
.tt-tier-btn, [class*="tier-btn"]{
  transition: transform var(--pp-motion), box-shadow var(--pp-motion) !important;
}
.tt-tier-btn.active, [class*="tier-btn"].active{
  box-shadow: var(--pp-hi), var(--pp-elev-2) !important;
  transform: translateY(-1px);
}

/* Section-nav pills */
.section-nav-pill{
  border-radius: var(--pp-r-sm) !important;
  transition: transform var(--pp-motion), box-shadow var(--pp-motion), background var(--pp-motion) !important;
}
.section-nav-pill:hover{ transform: translateY(-1px); box-shadow: var(--pp-elev-1) !important; }
.section-nav-pill.active{ box-shadow: var(--pp-hi), var(--pp-elev-2) !important; }

/* Buttons — subtle physical feedback */
.btn{
  border-radius: var(--pp-r-sm) !important;
  transition: transform 160ms var(--pp-motion), box-shadow 160ms, background 160ms, color 160ms !important;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--pp-elev-1) !important; }
.btn:active{ transform: translateY(0); }

/* Sticky header — raised glass bar hovering over the field */
.header{
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0,0,0,.7) !important;
}
body.light-mode .header{
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(28,34,54,.28) !important;
}

/* Section transition — smoother rise-in */
.section-transitioning-in{ will-change: transform, opacity; }

/* ============================================================
   FILTER CLUSTER TIDY — make the Accuracy / "Override — show low-overlap
   thinkers" row self-organizing so it reads cleanly EVERYWHERE it now appears,
   including the header-style sections where it sits outside a .filter-stack
   (there it previously collapsed to "AccuracyModerate relevance", unstyled).
   ============================================================ */
.accuracy-filter-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
}
.accuracy-filter-row .filter-label{
  color:var(--gold); font-size:0.74rem; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:800; line-height:1.3; flex:0 0 auto; margin:0;
}
body.light-mode .accuracy-filter-row .filter-label{ color:#5a3f08; }
/* Injected copies (outside a filter-stack) sit as a tidy standalone strip
   directly under the prominence toggle. */
.wva-overlap-injected{ width:fit-content; max-width:100%; margin:8px 0 6px; }

/* ============================================================
   SLIDE TRANSITIONS — on load + page-to-page
   The app adds .section-transitioning-in on every section change
   (showOnly) and on profile reveal. We turn that into a slide whose
   direct children stagger in one-by-one. Gated to no-preference so the
   base reduced-motion override (animation:none) still wins for those users.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes ppSlideIn{
    from{ opacity:0; transform: translate3d(90px,0,0); }
    to  { opacity:1; transform: none; }
  }

  /* The revealed section fades as a whole; its objects do the sliding.
     overflow-x clipped during the transition so the bigger horizontal
     offset can't flash a scrollbar. */
  .section-transitioning-in{
    animation: ppFadeSection .45s ease both !important;
    opacity: 1;
    overflow-x: clip;
  }
  @keyframes ppFadeSection{ from{opacity:0} to{opacity:1} }

  /* Stagger the section's top-level objects sliding in from the right. */
  .section-transitioning-in > *{
    animation: ppSlideIn .65s cubic-bezier(.16,1,.3,1) both;
    will-change: transform, opacity;
  }
  .section-transitioning-in > *:nth-child(1){ animation-delay:.04s; }
  .section-transitioning-in > *:nth-child(2){ animation-delay:.10s; }
  .section-transitioning-in > *:nth-child(3){ animation-delay:.16s; }
  .section-transitioning-in > *:nth-child(4){ animation-delay:.22s; }
  .section-transitioning-in > *:nth-child(5){ animation-delay:.28s; }
  .section-transitioning-in > *:nth-child(6){ animation-delay:.34s; }
  .section-transitioning-in > *:nth-child(7){ animation-delay:.40s; }
  .section-transitioning-in > *:nth-child(n+8){ animation-delay:.46s; }

  /* On first load: slide the very first visible view's objects in.
     Fires once; the .pp-loaded flag is added on DOMContentLoaded (below). */
  body.pp-loaded .hero:not(.hidden) > *,
  body.pp-loaded #introSection:not(.hidden) > *{
    animation: ppSlideIn .6s cubic-bezier(.16,1,.3,1) both;
  }
}

/* ============================================================
   MOBILE — cleaner, bigger tap targets, calmer depth
   ============================================================ */
@media (max-width: 720px){
  :root{ --pp-r: 12px; --pp-r-sm: 9px; }
  /* Lighten shadow cost on mobile for smoother scroll performance */
  .card, .da-section, .question-card, .cf-col{
    box-shadow: var(--pp-hi), 0 6px 18px -8px rgba(0,0,0,.5) !important;
  }
  body.light-mode .card,
  body.light-mode .da-section,
  body.light-mode .question-card,
  body.light-mode .cf-col{
    box-shadow: var(--pp-hi), 0 8px 20px -10px rgba(28,34,54,.16) !important;
  }
  /* keep hero motion-wrappers flat on mobile too */
  .intro-rise{ box-shadow:none !important; background:transparent !important; }
  /* Bigger, comfortable Likert targets */
  .likert > button{ min-height: 52px !important; }
  /* Disable hover-lift jitter on touch */
  .card:hover, .da-section:hover, .question-card:hover,
  .likert > button:hover, .btn:hover, .section-nav-pill:hover{
    transform: none;
  }
}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .card, .da-section, .question-card, .likert > button, .btn,
  .section-nav-pill, .cf-row, .tt-tier-btn{
    transition: none !important;
  }
  .card:hover, .da-section:hover, .question-card:hover,
  .likert > button:hover, .btn:hover, .section-nav-pill:hover, .cf-row:hover{
    transform: none !important;
  }
}