/* ── Surya Portfolio Theme ── */

/* Fonts: Fraunces (editorial display serif) and Manrope (grotesque body) are the
   open-license (OFL) stand-ins for the reference site's commercial PP Editorial New /
   PP Neue Montreal. Fragment Mono is the original, also OFL. All served by Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,800&family=Manrope:wght@400;500;700&family=Fragment+Mono:wght@400&display=swap');

:root {
  /* ── Design System Tokens ── */
  --color-primary: #1A1A1A;
  --color-secondary: #666666;
  --color-accent: #ED682B;
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-border: #E0E0E0;

  --color-text: #1A1A1A;
  --color-text-muted: #666666;
  --color-text-light: #9E9E9E;

  /* ── Score colours ──

     One meaning, two surfaces, two sets. The result headline sits on the dark
     .results-title-card (a #1A1A1A -> #333 gradient); the bar fills sit on the
     light --color-border track (#E0E0E0). A single value cannot serve both: the
     gamut was measured and there is no amber or red that clears 3:1 against the
     track AND the #333 end of the gradient at once. So each set is chosen for
     the surface it actually renders on.

     Headline (large text, 3:1 floor), worst case is the #333 gradient end:
       --color-score-green   #4CAF50  6.26:1 / 4.55:1
       --color-score-amber   #FFC107 10.68:1 / 7.75:1
       --color-score-red     #FF6B60  6.24:1 / 4.53:1

     Bar fills (non-text, 3:1 floor), measured against the track:
       --color-success       #2E7D32  3.88:1   (was #4CAF50, 2.11:1)
       --color-warning       #A86A00  3.37:1   (was #FFC107, 1.23:1)
       --color-error         #D32F2F  3.77:1   (was #F44336, 2.79:1)

     The old fill values were all under 3:1 against the track, so the bars
     signalled score by hue alone at a contrast that would wash out on a bright
     display or in print. They now clear the bar — and each bar already carries
     a plain-language label and its percentage, so colour is reinforcement here
     rather than the only cue. */
  --color-score-green: #4CAF50;
  --color-score-amber: #FFC107;
  --color-score-red: #FF6B60;

  --color-success: #2E7D32;
  --color-warning: #A86A00;
  --color-error: #D32F2F;
  --color-info: #2196F3;

  /* Typography */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'Fragment Mono', monospace;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 96px;
  --space-12: 128px;

  /* Layout */
  --max-width: 720px;
  --border-radius: 8px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global Overrides ── */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1 { font-size: 48px; line-height: 1.1; }
h2 { font-size: 32px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.3; }

p {
  font-size: 18px;
  margin-bottom: var(--space-4);
}

/* ── Layout ── */
#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* ── Buttons ── */
button {
  font-family: var(--font-body);
  font-weight: 500;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  padding: var(--space-3) var(--space-5);
  font-size: 16px;
}

.btn-primary:hover {
  background-color: #333;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ── Landing View ── */
#landing-view {
  text-align: left;
  align-items: flex-start;
  padding-top: var(--space-10);
}

#landing-view h1 {
  font-size: 64px;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

#landing-view .subtitle {
  font-size: 24px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: 540px;
  line-height: 1.4;
}

#landing-view .meta {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--space-8);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Quiz View ── */
.quiz-chrome {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.quiz-chrome-fill {
  background: var(--color-accent);
  height: 2px;
}

.quiz-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.quiz-scenario {
  font-size: 16px;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  font-style: italic;
}

.quiz-question {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
}

.quiz-option-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--color-bg);
  transition: all var(--transition-fast);
  font-size: 16px;
}

.quiz-option-btn:hover {
  border-color: var(--color-primary);
  background: #F9F9F9;
}

.quiz-option-btn.selected {
  border-color: var(--color-accent);
  background: #FFF5F0;
}

/* ── Results View ── */
.results-title-card {
  text-align: left;
  /* The dark gradient lives in css/results.css:11-17. It was being overridden
     to `transparent` here while `color: #fff` from that same rule survived,
     which rendered the Progression Title and its emoji as white-on-white —
     invisible. Restoring the gradient makes the existing white text legible
     again and gives the score colours a dark surface to sit on. */
  background: linear-gradient(135deg, var(--color-primary) 0%, #333 100%);
  border: none;
  padding: var(--space-8) var(--space-4) var(--space-6);
  margin-bottom: var(--space-10);
}

.results-title-pct {
  font-family: var(--font-heading);
  font-size: 120px;
  color: var(--color-accent);
  line-height: 0.9;
  margin-bottom: var(--space-2);
  letter-spacing: -0.03em;
}

.results-title-name {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  /* This sits on the dark .results-title-card. It was inheriting
     --color-text (#1A1A1A) from the card's own white `color`, making the
     Progression Title invisible — near-black on near-black. Explicitly white
     to match the emoji and the inherited card text. */
  color: #fff;
  margin-bottom: var(--space-4);
}

.results-section-title {
  font-family: var(--font-heading);
  font-size: 32px;
  margin-top: var(--space-10);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}


.results-review-item {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-3);
}

.results-review-item[open] {
  border-color: var(--color-primary);
}

.results-review-summary {
  font-weight: 500;
}

.results-review-summary:hover {
  background: #F5F5F5;
}

/* ── Action Plan (Editorial Style) ── */
.results-action-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-4) 0;
}

.results-action-title {
  font-size: 18px;
}

.results-action-desc {
  font-size: 15px;
}

/* ── Animations ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app > section:not([hidden]) {
  animation: fadeInUp var(--transition-slow) ease-out;
}

/* ── Tablet (≤ 768px) ── */
@media (max-width: 768px) {
  #app {
    padding: var(--space-6) var(--space-3);
  }

  /* Landing */
  #landing-view {
    padding-top: var(--space-6);
  }

  #landing-view h1 {
    font-size: 44px;
  }

  #landing-view .subtitle {
    font-size: 20px;
    margin-bottom: var(--space-6);
  }

  #landing-view .meta {
    margin-bottom: var(--space-6);
  }

  /* Quiz */
  .quiz-question {
    font-size: 22px;
  }

  .quiz-option-btn {
    padding: var(--space-3) var(--space-4);
  }

  /* Results */
  .results-title-pct {
    font-size: 80px;
  }

  .results-title-name {
    font-size: 32px;
  }

  .results-section-title {
    font-size: 28px;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  #app {
    padding: var(--space-4) var(--space-3);
  }

  /* Landing */
  #landing-view {
    padding-top: var(--space-4);
  }

  #landing-view h1 {
    font-size: 32px;
    letter-spacing: -0.01em;
  }

  #landing-view .subtitle {
    font-size: 18px;
  }

  /* Quiz */
  .quiz-card {
    border-radius: 6px;
  }

  .quiz-scenario {
    font-size: 14px;
    padding-left: var(--space-3);
  }

  .quiz-question {
    font-size: 20px;
  }

  .quiz-option-btn {
    padding: var(--space-3);
    font-size: 15px;
    min-height: 48px;
  }

  .quiz-chrome {
    padding: var(--space-2) 0;
  }

  /* Results */
  .results-title-pct {
    font-size: 64px;
  }

  .results-title-name {
    font-size: 28px;
  }

  .results-section-title {
    font-size: 24px;
    margin-top: var(--space-6);
  }

  .results-action-item {
    padding: var(--space-3) 0;
  }

  .results-action-btn-row {
    flex-direction: column;
    gap: var(--space-2);
  }
}