/* ============================================================
   CCEA MORALITY TEST — DESIGN SYSTEM
   Typeface:  Source Sans Pro (single family, weight-driven hierarchy)
   Scale:     Golden ratio φ = 1.618 — floor at 12px (0.75rem)
   Spacing:   Fibonacci × 8px base
   Contrast:  All text passes WCAG AA (≥ 4.5:1 on --color-bg)
   ============================================================ */

/* === Design Tokens === */
:root {

  /* --- Typeface (single family) --- */
  --font: 'Source Sans Pro', 'Segoe UI', sans-serif;

  /* --- Typographic Scale ---
     Floor: 12px (0.75rem) — no text rendered below this size.
     Ratio: φ = 1.618 applied from base upward.
     xs:   12px  → 0.75rem
     sm:   14px  → 0.875rem
     base: 16px  → 1rem
     md:   20px  → 1.25rem
     lg:   26px  → 1.618rem
     xl:   42px  → 2.618rem
     2xl:  68px  → 4.236rem
     3xl: 110px  → 6.854rem
  ---------------------------------------------------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.618rem;
  --text-xl:   2.618rem;
  --text-2xl:  4.236rem;
  --text-3xl:  6.854rem;

  /* --- Line Heights --- */
  --lh-display: 1.0;
  --lh-heading: 1.18;
  --lh-ui:      1.3;
  --lh-body:    1.65;
  --lh-label:   1.25;

  /* --- Spacing (Fibonacci × 8px) --- */
  --space-1:   8px;
  --space-2:  13px;
  --space-3:  21px;
  --space-4:  34px;
  --space-5:  55px;
  --space-6:  89px;
  --space-7: 144px;

  /* --- Colors (WCAG AA verified on --color-bg #F8F7F4)
     --color-fg    #1A1917  contrast ~17.5:1  ✓ AAA
     --color-muted #5A5750  contrast  ~6.3:1  ✓ AA
     --color-accent #DD011C contrast  ~5.1:1  ✓ AA
  ---------------------------------------------------------------- */
  --color-bg:      #F8F7F4;
  --color-fg:      #1A1917;
  --color-accent:  #DD011C;
  --color-muted:   #5A5750;
  --color-surface: #EEECEA;
  --color-border:  #D8D5CF;

  /* --- Brand (progress bar gradient only) --- */
  --brand-red:    #DD011C;
  --brand-orange: #E94C1A;
  --brand-green:  #439E2B;
  --brand-blue:   #02B4DD;

  /* --- Radius --- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;

  /* --- Header height (for viewport calculations) --- */
  --header-h: 90px;
}

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

@keyframes scoreReveal {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ruleGrow {
  from { width: 0; }
  to   { width: 40px; }
}

/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand stripe — pinned to viewport top */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-red)    0%,
    var(--brand-orange) 33%,
    var(--brand-green)  66%,
    var(--brand-blue)   100%
  );
  z-index: 100;
}

body {
  font-family: var(--font);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-fg);
  background-color: var(--color-bg);
  line-height: var(--lh-body);
  min-height: 100vh;
  padding-top: 3px; /* clear the brand stripe */
}

/* === Header === */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  height: var(--header-h);
}

/* === Header Right Group === */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.master-link {
  font-family: var(--font);
  font-size: var(--text-sm);  /* 14px */
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.master-link:hover {
  color: var(--color-accent);
}

/* === Language Toggle === */
.lang-toggle {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  border-radius: 20px;
  font-family: var(--font);
  font-size: var(--text-sm);  /* 14px */
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.lang-toggle:hover {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

/* === Logo === */
.logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* === Container === */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}

/* === Screens === */
.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: screenEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* === Intro Screen === */
.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100svh - var(--header-h) - 3px);
  padding: var(--space-5) 0;
}

.intro-content h1 {
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  color: var(--color-fg);
  margin-bottom: 0;
}

/* Accent rule beneath h1 */
.intro-content h1::after {
  content: '';
  display: block;
  height: 3px;
  width: 40px;
  background: var(--color-accent);
  margin: var(--space-3) auto var(--space-3);
  animation: ruleGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.intro-subtitle {
  font-size: var(--text-md);
  font-weight: 300;
  color: var(--color-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
  max-width: 48ch;
}

/* === Buttons === */
.btn {
  font-family: var(--font);
  font-size: var(--text-base);  /* 16px */
  font-weight: 700;
  height: 52px;
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #b8000f;
}

.btn-secondary {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

/* === Progress Bar === */
.progress-container {
  width: 100%;
  height: 2px;
  background: var(--color-border);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  width: 0%;
}

/* === Quiz Screen === */
.question-counter {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.question-text {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  /* 6.5em = ~6 lines at this font size — holds any question without reflowing below */
  min-height: 6.5em;
  margin-bottom: var(--space-5);
  color: var(--color-fg);
}

/* === Rating Scale === */
.rating-scale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.scale-labels {
  display: contents; /* dissolve wrapper — children become direct flex items */
}

.scale-label-left,
.scale-label-right {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  line-height: var(--lh-label);
  white-space: nowrap;
  flex-shrink: 0;
}

.scale-label-left  { order: 1; }
.scale-buttons     { order: 2; flex: 1; }
.scale-label-right { order: 3; }

.scale-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
}

.scale-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scale-btn:hover {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

.scale-btn.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: scale(1.18);
}

/* === Navigation === */
.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
}

#backBtn.hidden {
  visibility: hidden;
}

/* === Results Screen === */
.results-content {
  text-align: center;
  padding-top: var(--space-5);
}

.score-display {
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-1);
  animation: scoreReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.score-number {
  color: var(--color-accent);
}

.score-separator {
  color: var(--color-border);
  margin: 0 0.1em;
  font-weight: 300;
}

.score-total {
  color: var(--color-muted);
}

.score-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-4);
}

/* === Interpretation === */
.interpretation {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: left;
}

.interpretation-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
  margin-bottom: var(--space-1);
  color: var(--color-fg);
}

.interpretation-subtitle {
  font-size: var(--text-base);
  font-weight: 300;
  font-style: italic;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.interpretation-desc {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-fg);
  max-width: 60ch;
}


/* === Email Section === */
.email-section {
  margin-bottom: var(--space-3);
  text-align: left;
}

.email-section label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
}

.email-form {
  display: flex;
  gap: var(--space-2);
}

.email-form input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-fg);
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}

.email-form input::placeholder {
  color: var(--color-muted);
}

.email-form input:focus {
  border-color: var(--color-fg);
}

.email-form .btn {
  white-space: nowrap;
}

.email-message {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 1.5em;
}

.email-message.success { color: var(--brand-green); }
.email-message.error   { color: var(--color-accent); }

/* === Responsive === */
@media (max-width: 600px) {
  :root {
    --header-h: 72px;
  }

  .header {
    padding: var(--space-2) var(--space-3);
    height: var(--header-h);
  }

  .container {
    padding: 0 var(--space-3) var(--space-5);
  }

  .logo-img {
    height: 36px;
  }

  .intro-content h1 {
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
  }

  .intro-subtitle {
    font-size: var(--text-base);
  }

  .question-text {
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
  }

  .scale-btn {
    width: 50px;
    height: 50px;
    font-size: var(--text-sm);
  }

  .scale-buttons {
    gap: var(--space-1);
  }

  .score-display {
    font-size: var(--text-xl);
  }

  .email-form {
    flex-direction: column;
  }
}