/* =============================================================
   GLOBAL DESIGN SYSTEM — ERStyles.com
   This file defines the visual foundation of the entire site:
   fonts, colors, spacing, typography, and base button styles.
   Every page links to this file so changes here apply everywhere.
   ============================================================= */


/* -------------------------------------------------------------
   FONTS — self-hosted
   Figtree is served from our own /assets/fonts/ instead of Google
   Fonts, so visitors' IP addresses are never sent to Google just
   to render text (a GDPR concern — a German court ruled remote
   Google Fonts loading unlawful in 2022). Bonus: one fewer
   third-party connection, so text renders faster too.

   Figtree is a VARIABLE font: "font-weight: 300 700" is a range,
   meaning these single files contain every weight from 300 to 700
   — the browser renders whichever weight our CSS asks for.

   Two files, split by character set. "unicode-range" tells the
   browser which characters each file covers, so the latin-ext file
   (accented characters like é, ñ) is only downloaded if a page
   actually uses one.

   "font-display: swap" shows text immediately in a fallback font
   while Figtree loads, preventing a flash of invisible text.
   ------------------------------------------------------------- */
/* latin — basic A–Z, digits, common punctuation */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext — accented and extended Latin characters */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* -------------------------------------------------------------
   CSS CUSTOM PROPERTIES (VARIABLES)
   Variables let us define a value once and reuse it everywhere.
   To change the brand color across the whole site, we change it
   here — not in every individual file.
   ------------------------------------------------------------- */
:root {

  /* --- Brand Colors --- */
  --color-coral: #FA8072;         /* Primary accent — buttons, CTAs */
  --color-coral-pastel: #FFDCD7;  /* Soft coral for tinted backgrounds (disclaimer) */
  --color-steel-blue: #5BA0D0;    /* Secondary accent — hover states */

  /* --- Emotion Colors ---
     Pastel tones — light enough to use as section/card backgrounds
     with dark body text sitting comfortably on top. */
  --color-anger:      #FFC5C5;    /* Light pastel red */
  --color-anxiety:    #DDD4F5;    /* Light lavender */
  --color-excitement: #FCF2B0;    /* Light butter yellow */
  --color-overwhelm:  #FDE3C4;    /* Light peach */
  --color-sadness:    #C8DCF0;    /* Light sky blue */
  --color-shame:      #C8E6CB;    /* Light mint */

  /* --- Emotion Colors (deep variants) ---
     A noticeably darker — but still washed-out — version of each
     pastel above. Used to emphasise the dominant emotion / style
     on results pages (e.g. the score-row swatch for the winner).
     Keep the same hue and a comparable softness; only the lightness
     drops. If you tweak a pastel above, retune the matching deep
     variant by hand so the two stay visibly related. */
  --color-anger-deep:      #F58A8A;
  --color-anxiety-deep:    #B5A6E5;
  --color-excitement-deep: #ECDA80;
  --color-overwhelm-deep:  #F8BA82;
  --color-sadness-deep:    #8FB5DC;
  --color-shame-deep:      #8EC992;

  /* --- Neutral Colors --- */
  --color-text:         #1A1A1A;  /* Main body text */
  --color-text-muted:   #666666;  /* Captions, secondary text */
  --color-background:   #FFFFFF;  /* Page background */
  --color-surface:      #F7F7F7;  /* Cards, section backgrounds */
  --color-border:       #E0E0E0;  /* Dividers, input borders */

  /* --- Typography --- */
  --font-family: 'Figtree', sans-serif;

  --font-weight-light:    300;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-small: 16px;   /* Captions, footnotes */
  --text-body:  20px;   /* Default body text */
  --text-h4:    22px;
  --text-h3:    28px;
  --text-h2:    36px;
  --text-h1:    48px;

  --line-height-body:    1.6;   /* Comfortable reading spacing */
  --line-height-heading: 1.2;   /* Tighter spacing for large text */

  /* --- Spacing --- */
  /* A consistent spacing scale keeps the layout feeling organized.
     Each step is roughly double the previous one. */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;

  /* --- Shape --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Motion --- */
  --transition: 0.25s ease;   /* Used on hover effects */

}


/* -------------------------------------------------------------
   BASE RESET
   Browsers apply their own default styles (margins, padding,
   box sizing). We clear those here so we start from a clean
   slate that behaves consistently across all browsers.
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;   /* Padding and borders are included in
                               an element's stated width/height */
  margin: 0;
  padding: 0;
}

/* The HTML `hidden` attribute works through the browser's built-in
   "display: none" — which loses to ANY display rule we write (e.g.
   ".auth-form { display: flex }" kept a hidden form visible). This
   rule makes `hidden` unconditionally win, so JS can always trust
   `el.hidden = true` to actually hide the element. The one
   legitimate use of !important. */
[hidden] {
  display: none !important;
}


/* -------------------------------------------------------------
   BASE TYPOGRAPHY
   ------------------------------------------------------------- */
body {
  font-family:   var(--font-family);
  font-weight:   var(--font-weight-light);
  font-size:     var(--text-body);
  line-height:   var(--line-height-body);
  color:         var(--color-text);
  background:    var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-heading);
  color:       var(--color-text);
}

h1 { font-size: var(--text-h1); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--text-h2); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--text-h4); font-weight: var(--font-weight-medium); }

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;   /* Prevents unwanted space after the last paragraph
                         in a container */
}

small, .text-small {
  font-size:   var(--text-small);
  font-weight: var(--font-weight-light);
  color:       var(--color-text-muted);
}

a {
  color:           var(--color-steel-blue);
  text-decoration: none;
  transition:      opacity var(--transition);
}

a:hover {
  opacity: 0.8;
}


/* -------------------------------------------------------------
   BUTTONS
   .btn is the base class. .btn-primary applies the coral style.
   Additional variants (e.g. .btn-secondary) can be added later.
   ------------------------------------------------------------- */
.btn {
  display:         inline-block;
  padding:         14px 32px;
  border-radius:   var(--radius-md);
  font-family:     var(--font-family);
  font-size:       var(--text-body);
  font-weight:     var(--font-weight-medium);
  line-height:     1;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      background-color var(--transition);
}

.btn-primary {
  background-color: var(--color-coral);
  color:            var(--color-text);   /* Black text for readability on both coral and steel-blue */
}

.btn-primary:hover {
  background-color: var(--color-steel-blue);
  color:            var(--color-text);
  opacity:          1;   /* Overrides the default link hover opacity */
}


/* -------------------------------------------------------------
   LAYOUT HELPERS
   .container caps how wide content can grow on large screens
   and keeps comfortable side padding on small screens.
   ------------------------------------------------------------- */
.container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 var(--space-md);
}


/* -------------------------------------------------------------
   SITE NAVIGATION
   The nav bar appears at the top of every page. On wide screens
   it shows the logo on the left and a row of links on the right.
   On narrow screens (under 768px) the link list collapses behind
   a hamburger menu icon.
   ------------------------------------------------------------- */
.site-nav {
  position:         sticky;             /* Stays at the top while scrolling */
  top:              0;
  z-index:          100;                /* Above page content */
  background:       var(--color-background);
  border-bottom:    1px solid var(--color-border);
}

.site-nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          72px;
}

/* Brand: logo + wordmark, links back to the landing page */
.site-nav__brand {
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  text-decoration: none;
  color:           var(--color-text);
}

.site-nav__brand:hover { opacity: 1; }   /* Override default link hover fade */

.site-nav__logo {
  height: 36px;
  width:  auto;
  display: block;
}

.site-nav__wordmark {
  font-size:   var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
}

/* The list of nav links on the right */
.site-nav__links {
  list-style:     none;
  display:        flex;
  align-items:    center;
  gap:            var(--space-lg);
}

.site-nav__links a {
  color:           var(--color-text);
  font-size:       var(--text-body);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
}

.site-nav__links a:hover,
.site-nav__links a.is-active {
  color:   var(--color-steel-blue);
  opacity: 1;
}

/* The Emotions item is a dropdown trigger.
   We use position:relative on the parent so the absolutely
   positioned dropdown menu can anchor to it. */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
}

/* The little caret arrow next to "Emotions" */
.site-nav__caret {
  width:  10px;
  height: 10px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg);
  transition:    transform var(--transition);
  margin-bottom: 3px;
}

.site-nav__dropdown:hover .site-nav__caret,
.site-nav__dropdown:focus-within .site-nav__caret {
  transform: rotate(225deg);   /* Flip the caret upward */
  margin-bottom: -3px;
}

/* The hidden dropdown menu — appears on hover or keyboard focus.
   Using opacity + visibility (rather than display:none) lets us
   transition smoothly. */
.site-nav__dropdown-menu {
  position:        absolute;
  top:             100%;
  right:           0;
  min-width:       180px;
  background:      var(--color-background);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-md);
  padding:         var(--space-xs) 0;
  margin-top:      var(--space-xs);
  list-style:      none;
  box-shadow:      0 4px 12px rgba(0, 0, 0, 0.08);
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(-4px);
  transition:      opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.site-nav__dropdown-menu li a {
  display:    block;
  padding:    10px var(--space-md);
  font-size:  var(--text-body);
  font-weight: var(--font-weight-light);
  color:      var(--color-text);
}

.site-nav__dropdown-menu li a:hover {
  background: var(--color-surface);
  color:      var(--color-steel-blue);
  opacity:    1;
}

/* The hamburger button — hidden on desktop, shown on mobile */
.site-nav__menu-toggle {
  display:        none;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  width:          44px;
  height:         44px;
}

.site-nav__menu-toggle span,
.site-nav__menu-toggle span::before,
.site-nav__menu-toggle span::after {
  content:    '';
  display:    block;
  width:      26px;
  height:     2px;
  background: var(--color-text);
  position:   relative;
  transition: transform var(--transition), top var(--transition), bottom var(--transition);
}

.site-nav__menu-toggle span::before { position: absolute; top: -8px; }
.site-nav__menu-toggle span::after  { position: absolute; bottom: -8px; }


/* -------------------------------------------------------------
   MOBILE NAV
   Below 768px we hide the inline link row and show the hamburger.
   When the body has the .nav-open class, the link list slides
   down as a vertical panel beneath the bar.
   ------------------------------------------------------------- */
@media (max-width: 768px) {

  .site-nav__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav__links {
    position:        absolute;
    top:             100%;
    left:            0;
    right:           0;
    flex-direction:  column;
    align-items:     stretch;
    gap:             0;
    background:      var(--color-background);
    border-bottom:   1px solid var(--color-border);
    padding:         var(--space-sm) 0;
    /* Hidden by default on mobile */
    display:         none;
  }

  body.nav-open .site-nav__links {
    display: flex;
  }

  .site-nav__links > li {
    border-top: 1px solid var(--color-border);
  }

  .site-nav__links > li:first-child {
    border-top: none;
  }

  .site-nav__links a,
  .site-nav__dropdown-toggle {
    padding: var(--space-sm) var(--space-md);
  }

  /* Dropdown menu inline (no absolute positioning) on mobile */
  .site-nav__dropdown-menu {
    position:    static;
    opacity:     1;
    visibility:  visible;
    transform:   none;
    border:      none;
    box-shadow:  none;
    background:  var(--color-surface);
    margin:      0;
    padding:     0;
    border-radius: 0;
    /* Initially collapsed; opens when its parent has .is-open */
    max-height:  0;
    overflow:    hidden;
    transition:  max-height var(--transition);
  }

  .site-nav__dropdown.is-open .site-nav__dropdown-menu {
    max-height: 500px;
  }

  .site-nav__dropdown-menu li a {
    padding-left: var(--space-lg);
  }

}


/* -------------------------------------------------------------
   DISCLAIMER BAR
   Sits directly above the footer. We use the pastel coral tint
   for better text legibility, and we cap its width so on wide
   screens it sits as a centered card with white space on either
   side — matching the gradient banners above it.
   ------------------------------------------------------------- */
.disclaimer {
  background:    var(--color-coral-pastel);
  color:         var(--color-text);
  padding:       var(--space-md) 0;     /* Vertical only — inner .container handles horizontal */
  max-width:     1100px;
  margin:        0 auto;
  border-radius: var(--radius-md);
}

.disclaimer p {
  font-size:   var(--text-small);
  margin:      0;
  text-align:  center;
}

.disclaimer strong {
  font-weight: var(--font-weight-bold);
}

.disclaimer a {
  color:           var(--color-text);
  text-decoration: underline;
}


/* -------------------------------------------------------------
   FOOTER
   Two columns of links + copyright line. Stacks on small screens.
   ------------------------------------------------------------- */
.site-footer {
  background: var(--color-background);
  padding:    var(--space-lg) 0 var(--space-md);
  border-top: 1px solid var(--color-border);
}

.site-footer__cols {
  display:         flex;
  justify-content: center;
  gap:             var(--space-xl);
  flex-wrap:       wrap;
  margin-bottom:   var(--space-lg);
}

.site-footer__col {
  list-style: none;
  min-width:  140px;
}

.site-footer__col li {
  margin-bottom: var(--space-xs);
}

.site-footer__col a {
  color:       var(--color-text);
  font-size:   var(--text-body);
  font-weight: var(--font-weight-light);
}

.site-footer__col a:hover {
  color: var(--color-steel-blue);
}

.site-footer__copyright {
  text-align: center;
  font-size:  var(--text-small);
  color:      var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

@media (max-width: 600px) {
  .site-footer__cols {
    gap:        var(--space-lg);
    text-align: center;
  }
}


/* -------------------------------------------------------------
   PLACEHOLDER PAGE
   Light styling for the temporary "coming soon" pages used until
   the real page is built. Replace these as each section ships.
   ------------------------------------------------------------- */
.placeholder {
  padding: var(--space-xl) 0;
  text-align: center;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.placeholder h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-md);
}

.placeholder p {
  color: var(--color-text-muted);
  max-width: 540px;
  margin: 0 auto var(--space-md);
}


/* =============================================================
   SECONDARY-RESULTS LOADING SCREEN
   -------------------------------------------------------------
   Shown while the Claude API generates a personalized report
   (typically 30–45 seconds). The .results section starts with
   the .is-loading class; secondary-report.js removes it once
   the report arrives or once we determine there's no saved
   payload (in which case the empty state takes over).

   The animation: six pastel orbs — one per primary emotion —
   orbit a central point with staggered phases and a gentle
   breathing scale. mix-blend-mode: multiply makes overlapping
   colors mix as if they were watercolor pigments.
   ============================================================= */

/* --- Loading state visibility coordination ---
   While .is-loading: show the loading block, hide everything
   else. When the class is removed, the existing #results-empty
   and #results-content visibility is governed by the [hidden]
   attribute that results-<emotion>.js sets (no change needed
   to those scripts). */
.results.is-loading .results__loading {
  display: flex;
  /* Hide the loading block for the first 250ms so a cache-hit
     (which removes .is-loading in ~10ms) doesn't flash the
     spinner. On a genuine API call (30–45s) the block fades in
     smoothly once the delay elapses. */
  opacity: 0;
  animation: results-loading-reveal 0.2s ease-out 0.25s forwards;
}
@keyframes results-loading-reveal { to { opacity: 1; } }
.results.is-loading .results__empty,
.results.is-loading #results-content { display: none !important; }
.results:not(.is-loading) .results__loading { display: none; }

/* --- The loading block container ---
   Vertically-centered orbs + text with generous breathing room.
   min-height keeps the layout tall even before the orbs render
   (avoids a brief flash of small placeholder while CSS loads). */
.results__loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.results__loading-text {
  max-width: 480px;
  margin: var(--space-lg) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

/* --- The orb stage ---
   A fixed square that holds the orbiting orbs. The orbs are
   absolutely positioned within it and orbit relative to its
   center. Sized for mobile by default, bumped up at >=768px. */
.loading-orbs {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .loading-orbs {
    width: 320px;
    height: 320px;
  }
}

/* --- Individual orb ---
   Each orb is a blurred, semi-transparent circle. The blur
   gives the soft edge; mix-blend-mode: multiply makes overlaps
   blend like watercolor; the animation orbits + breathes. */
.loading-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  filter: blur(14px);
  mix-blend-mode: multiply;
  opacity: 0.9;
  animation: loading-swirl 8s ease-in-out infinite;
}
@media (min-width: 768px) {
  .loading-orb {
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    filter: blur(18px);
  }
}

/* --- Per-emotion color + phase ---
   Each orb gets its emotion's pastel color and a negative
   animation-delay that places it at a different point in the
   swirl. With six orbs and an 8s loop, each one is offset by
   about 1.33s so they spread evenly around the orbit. */
.loading-orb--anger      { background: var(--color-anger);      animation-delay: 0s;      }
.loading-orb--anxiety    { background: var(--color-anxiety);    animation-delay: -1.33s;  }
.loading-orb--excitement { background: var(--color-excitement); animation-delay: -2.66s;  }
.loading-orb--overwhelm  { background: var(--color-overwhelm);  animation-delay: -4s;     }
.loading-orb--sadness    { background: var(--color-sadness);    animation-delay: -5.33s;  }
.loading-orb--shame      { background: var(--color-shame);      animation-delay: -6.66s;  }

/* --- The swirl keyframes ---
   `rotate(...) translateX(N) scale(M)` puts the orb at distance
   N from center at angle rotate, with size M. Animating rotate
   makes it orbit; varying N and M as it goes makes the orbit
   wobble in and out and pulse in size — together producing a
   "swirling" rather than mechanical look. */
@keyframes loading-swirl {
  0%, 100% { transform: rotate(0deg)   translateX(48px) scale(1);    }
  25%      { transform: rotate(90deg)  translateX(72px) scale(1.15); }
  50%      { transform: rotate(180deg) translateX(48px) scale(0.9);  }
  75%      { transform: rotate(270deg) translateX(72px) scale(1.05); }
}
@media (min-width: 768px) {
  @keyframes loading-swirl {
    0%, 100% { transform: rotate(0deg)   translateX(64px)  scale(1);    }
    25%      { transform: rotate(90deg)  translateX(96px)  scale(1.15); }
    50%      { transform: rotate(180deg) translateX(64px)  scale(0.9);  }
    75%      { transform: rotate(270deg) translateX(96px)  scale(1.05); }
  }
}

/* --- Reduced motion fallback ---
   For users who've asked their OS to minimize animation, freeze
   the orbs in a static distribution around the circle so the
   composition still reads but nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .loading-orb { animation: none; }
  .loading-orb--anger      { transform: rotate(0deg)   translateX(60px); }
  .loading-orb--anxiety    { transform: rotate(60deg)  translateX(60px); }
  .loading-orb--excitement { transform: rotate(120deg) translateX(60px); }
  .loading-orb--overwhelm  { transform: rotate(180deg) translateX(60px); }
  .loading-orb--sadness    { transform: rotate(240deg) translateX(60px); }
  .loading-orb--shame      { transform: rotate(300deg) translateX(60px); }
}


/* =============================================================
   GENERATED REPORT (secondary-test results page)
   -------------------------------------------------------------
   Styles for the HTML the /api/generate-report endpoint returns
   and secondary-report.js injects into #results-report.
   The HTML structure is:
     <section class="report__sub-styles">
       <article class="report__sub-style report__sub-style--primary">
         <h3 class="report__sub-style-name">Frustrated <span class="report__tier">Primary</span></h3>
         <p class="report__sub-style-text">…</p>
       </article>
       …more articles (strong / moderate / weak)…
     </section>
     <section class="report__overview">
       <header class="report__overview-header">
         <p class="report__overview-eyebrow">Your Anger type</p>
         <h3 class="report__overview-type-name">The Slow Burn</h3>
       </header>
       <aside class="report__key-insight">
         <p>One-sentence headline insight…</p>
       </aside>
       <div class="report__overview-section">
         <h4 class="report__overview-section-heading">What drives it</h4>
         <p>…</p><p>…</p>
       </div>
       …two more report__overview-section blocks…
     </section>
   ============================================================= */

.report__sub-styles {
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.report__sub-style {
  padding: var(--space-md);
  border-left: 4px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

/* The Primary article gets the dominant-style emphasis. The
   background + border tint to match the parent emotion's pastel
   so a Sadness report reads as blue, a Shame report as green,
   etc. The PRIMARY pill itself stays coral (brand color) — see
   the .report__tier rule further down.

   Each secondary results page sets data-emotion="<emotion>" on
   the .results section, which scopes the right palette in. The
   block below defaults to coral for any page that isn't one of
   the six known emotions (e.g. the primary results page, if it
   ever grows a primary sub-style). */
.report__sub-style--primary {
  border-left-color: var(--color-coral);
  background: var(--color-coral-pastel);
}
.results[data-emotion="anger"]      .report__sub-style--primary { border-left-color: var(--color-anger-deep);      background: var(--color-anger);      }
.results[data-emotion="anxiety"]    .report__sub-style--primary { border-left-color: var(--color-anxiety-deep);    background: var(--color-anxiety);    }
.results[data-emotion="excitement"] .report__sub-style--primary { border-left-color: var(--color-excitement-deep); background: var(--color-excitement); }
.results[data-emotion="overwhelm"]  .report__sub-style--primary { border-left-color: var(--color-overwhelm-deep);  background: var(--color-overwhelm);  }
.results[data-emotion="sadness"]    .report__sub-style--primary { border-left-color: var(--color-sadness-deep);    background: var(--color-sadness);    }
.results[data-emotion="shame"]      .report__sub-style--primary { border-left-color: var(--color-shame-deep);      background: var(--color-shame);      }

.report__sub-style-name {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-heading);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.report__sub-style-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

/* The little pill that labels each article's tier. Each tier
   gets a distinct background so a quick scan tells you which
   sub-styles are most prominent in this user's pattern. */
.report__tier {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report__sub-style--primary  .report__tier { background: var(--color-coral);      color: #fff; }
.report__sub-style--strong   .report__tier { background: var(--color-steel-blue); color: #fff; }
.report__sub-style--moderate .report__tier { background: var(--color-border);     color: var(--color-text); }
.report__sub-style--weak     .report__tier { background: #ECECEC;                 color: var(--color-text-muted); }

/* The Overview section sits after all the sub-styles with a
   visible separator — it's the only original prose in the
   report and deserves its own visual breath. */
.report__overview {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border);
}

/* Legacy heading from the original single-block overview. Kept so
   any reports cached in localStorage before the redesign still
   render cleanly until the user retakes the test. New reports use
   the .report__overview-header / type-name pattern below. */
.report__overview-heading {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-md);
  line-height: var(--line-height-heading);
}

.report__overview p {
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  margin: 0 0 var(--space-sm);
}

/* ---- Overview header: eyebrow + named type ----
   Centered to feel like a moment of revelation after the tier
   paragraphs above. The type name is the headline; the eyebrow
   is the small uppercase label that introduces it. */
.report__overview-header {
  text-align: center;
  margin: 0 0 var(--space-md);
}

.report__overview-eyebrow {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}

.report__overview-type-name {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: var(--line-height-heading);
}

/* ---- Key insight callout ----
   A single-sentence highlight tinted to the parent emotion's
   pastel, with the deep variant as a left-border accent. Mirrors
   the pattern used on .report__sub-style--primary so the two
   tinted blocks feel like a matched pair. The default coral
   fallback applies if no data-emotion is set. */
.report__key-insight {
  padding: var(--space-md);
  border-left: 4px solid var(--color-coral);
  background: var(--color-coral-pastel);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-lg);
}

.report__key-insight p {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  margin: 0;
}

.results[data-emotion="anger"]      .report__key-insight { border-left-color: var(--color-anger-deep);      background: var(--color-anger);      }
.results[data-emotion="anxiety"]    .report__key-insight { border-left-color: var(--color-anxiety-deep);    background: var(--color-anxiety);    }
.results[data-emotion="excitement"] .report__key-insight { border-left-color: var(--color-excitement-deep); background: var(--color-excitement); }
.results[data-emotion="overwhelm"]  .report__key-insight { border-left-color: var(--color-overwhelm-deep);  background: var(--color-overwhelm);  }
.results[data-emotion="sadness"]    .report__key-insight { border-left-color: var(--color-sadness-deep);    background: var(--color-sadness);    }
.results[data-emotion="shame"]      .report__key-insight { border-left-color: var(--color-shame-deep);      background: var(--color-shame);      }

/* ---- Overview sub-sections ----
   Three labeled blocks inside the overview ("What drives it",
   "What's absent", "How it runs overall"). Each has its own
   heading and 2 paragraphs of prose. */
.report__overview-section {
  margin: 0 0 var(--space-lg);
}

.report__overview-section:last-child {
  margin-bottom: 0;
}

.report__overview-section-heading {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm);
  line-height: var(--line-height-heading);
}

/* Error fallback shown when the API call fails — keeps the
   chart and scores visible above, so the user still gets
   something useful even when the report didn't generate. */
.report__error {
  padding: var(--space-md);
  background: #FFF3CD;
  border-left: 4px solid #FFC107;
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

/* Informational notice in the report area — not an error, just a
   state: log in to generate, purchase required, or all takes used.
   Steel-blue accent to read as guidance rather than warning. */
.report__notice {
  padding: var(--space-md);
  background: var(--color-surface);
  border-left: 4px solid var(--color-steel-blue);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

/* Small footer line after a generated report: how many takes are
   left on the purchase + the spacing recommendation. */
.report__takes-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}