/* ==========================================================================
   Systems Diagnostic — site layer.

   Everything here builds on brand-tokens.css. No raw hex values: if a value
   isn't in the token sheet, it doesn't belong on the page.
   Per-site knob (CLAUDE.md): buttons stay Streamline yellow everywhere.
   ========================================================================== */

:root {
  --site-accent: var(--streamline);
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main  { flex: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Screens are toggled by the `hidden` attribute in app.js. */
[hidden] { display: none !important; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  border-bottom: var(--bw-1) solid var(--border);
  background: var(--bg);
}
.site-header .wordmark {
  display: inline-block;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.site-header { display: flex; }
.site-header .wordmark:hover { color: var(--fg-muted); }

/* ==========================================================================
   Pattern bands
   The art is portrait 488x961 with fine strokes — brand-tokens tiles it at
   ~200px. The scrim must fill its parent or raw pattern leaks at the edges.
   ========================================================================== */

.pattern-navy,
.pattern { display: flex; }
.pattern-navy > .pattern-scrim,
.pattern > .pattern-scrim { flex: 1; }

/* Tall bands: tile across, stretch down.
   The token sheet tiles the art on both axes, but the source is portrait
   488x961 and its strokes don't meet across the top/bottom join — on a band
   taller than one tile (about 433px at the 220px tile width) that join reads
   as a hard line through the pattern. Repeating on x only and sizing the tile
   to the band's full height removes it.

   This is NOT `background-size: cover`, which the brand book bans because it
   scales the strokes 2-4x into heavy bars: the tile stays 220px wide, so
   stroke weight is identical to the approved tiling. Only the wave length
   stretches, and these strokes run vertically, so their weight doesn't move.
   The pattern SVGs carry preserveAspectRatio="none" for this — without it a
   non-uniform background-size letterboxes rather than stretching.

   Short bands (the closing CTA) are left tiling as the token sheet intends:
   they're shorter than one tile, so no join is ever visible, and stretching
   them would bunch the waves into a denser texture than the tall bands. */
.hero,
.result-hero {
  background-repeat: repeat-x;
  background-size: 220px 100%;
}

/* ==========================================================================
   SCREEN 1 · Landing
   ========================================================================== */

/* The hero fills the viewport below the header and centers its content, so the
   pattern band never reads as a top-weighted slab with dead space beneath it. */
.hero { min-height: calc(100vh - 62px); }
.hero > .pattern-scrim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--s-9);
  padding-inline: var(--s-5);
}
.hero-inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero-eyebrow { color: var(--streamline); margin-bottom: var(--s-5); }

.screen-landing h1 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--s-5);
}

.hero-lede {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  color: var(--space);
  opacity: 0.86;
}

.system-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  padding: 0;
  margin: 0 0 var(--s-7);
}
.system-tags .tag {
  background: transparent;
  border-color: rgba(247,244,235,0.28);
  color: var(--space);
}

.hero-hint {
  max-width: none;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--process-40);
}

/* ==========================================================================
   Landing · What you get + closing CTA
   (Sections 2 and 3 of the brand page spine.)
   ========================================================================== */

.inside { padding-block: var(--section-y); }
.inside-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
  text-align: center;
}
.inside-inner .rule-accent { margin-inline: auto; }
.inside-heading {
  font-size: clamp(1.75rem, 4vw, var(--fs-2xl));
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--s-7);
}
.inside .grid-3 { text-align: left; }
.inside .card h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-3);
}
.inside .card p {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}

.closing > .pattern-scrim {
  padding-block: var(--s-8);
  padding-inline: var(--s-5);
}
.closing-inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.closing-heading {
  font-size: clamp(1.5rem, 3.2vw, var(--fs-xl));
  max-width: 34ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
}

/* Bigger primary CTA than the 44px default, for the two moments that matter. */
.btn-lg {
  min-height: 56px;
  padding-inline: var(--s-7);
  font-size: var(--fs-md);
}
.btn:disabled {
  background: var(--streamline-40);
  color: var(--process-60);
  cursor: not-allowed;
}

/* ==========================================================================
   SCREEN 2 · Quiz
   ========================================================================== */

.quiz-inner {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--s-7) var(--s-5) var(--s-9);
}

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.back-btn {
  background: none;
  border: none;
  padding: var(--s-2) 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--streamline);
  transition: color var(--t-fast) var(--ease-out),
              text-decoration-color var(--t-fast) var(--ease-out);
}
.back-btn:hover:not(:disabled) { color: var(--fg); text-decoration-color: var(--border-strong); }
.back-btn:disabled { opacity: 0.4; cursor: default; text-decoration-color: transparent; }

.progress {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.progress-track {
  height: 6px;
  background: var(--space-darker);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--s-8);
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--site-accent);
  border-radius: var(--r-pill);
  transition: width var(--t-base) var(--ease-out);
}

.question-lead {
  text-align: center;
  color: var(--fg-subtle);
  margin-bottom: var(--s-4);
}
.question-text {
  font-size: clamp(1.5rem, 3.4vw, var(--fs-xl));
  line-height: var(--lh-snug);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto var(--s-8);
  min-height: 2.4em;
}

.scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.scale-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 104px;
  padding: var(--s-5) var(--s-2);
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.scale-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.scale-btn:active { transform: none; box-shadow: inset 0 2px 6px rgba(8,44,69,0.18); }
.scale-btn.selected {
  background: var(--streamline);
  border-color: var(--streamline);
}
.scale-num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--fg);
}
.scale-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--fg-muted);
}
.scale-btn.selected .scale-label,
.scale-btn.selected .scale-num { color: var(--process); }

.quiz-hint {
  text-align: center;
  color: var(--fg-subtle);
  margin: var(--s-6) auto 0;
  max-width: none;
}

/* ==========================================================================
   SCREEN 3 · Result
   ========================================================================== */

.result-hero > .pattern-scrim {
  padding-block: var(--s-8);
  padding-inline: var(--s-5);
}
.result-hero-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.result-hero-inner .eyebrow { color: var(--streamline); }

.result-title {
  font-size: clamp(1.875rem, 4vw, var(--fs-2xl));
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--s-4);
}
.winner-name { color: var(--streamline); }

.result-why {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--space);
  opacity: 0.86;
}

.result-body { padding-block: var(--s-8) var(--s-9); }
.result-inner {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.ranked-block { margin-bottom: var(--s-8); }
.ranked-block .rule-accent { margin-inline: auto; }
.ranked-block .eyebrow { text-align: center; margin-bottom: var(--s-5); }

.ranked { display: grid; gap: var(--s-3); }
.rank-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.rank-row.rank-winner {
  background: var(--streamline-20);
  border-color: var(--streamline);
}
.rank-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg);
}
.rank-badge {
  display: inline-block;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--process);
  color: var(--space);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}
.rank-bar {
  height: 8px;
  background: var(--space-darker);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.rank-winner .rank-bar { background: var(--streamline-40); }
.rank-bar-fill {
  height: 100%;
  width: 0;
  background: var(--process-40);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}
.rank-winner .rank-bar-fill { background: var(--process); }
.rank-score {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg-muted);
  text-align: right;
  min-width: 3.5ch;
}

/* Email gate */
.gate-card { text-align: center; }
.gate-title { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.gate-sub {
  max-width: 44ch;
  margin: 0 auto var(--s-6);
  color: var(--fg-muted);
}

.lead-form {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
  text-align: left;
}
.lead-form .btn { margin-top: var(--s-2); }
.consent {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--fg-subtle);
  margin: var(--s-2) 0 0;
  max-width: none;
}
.form-error {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--danger);
  margin: 0;
  max-width: none;
}

/* Confirmation — replaces the gate card in place, no navigation. */
.confirmation-card { text-align: center; }
.confirmation-emblem { margin: 0 auto var(--s-5); }
.confirmation-card h3 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.confirmation-card p {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--fg-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--bg); }
.footer-inner {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--s-5);
  text-align: center;
}
.footer-emblem { margin: 0 auto var(--s-4); }
.footer-bio {
  color: var(--fg);
  margin: 0 auto var(--s-3);
  max-width: 46ch;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--fg);
  margin: 0 auto var(--s-5);
  max-width: none;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  max-width: none;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  text-decoration-thickness: 2px;
}
.footer-icon { width: 16px; height: 16px; flex: none; }
.footer-sep { color: var(--border); }

/* ==========================================================================
   Responsive — single column below 768px, section padding drops to 48px.
   ========================================================================== */

@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero > .pattern-scrim { padding-block: var(--s-8); }
  .inside { padding-block: var(--s-7); }
  .closing > .pattern-scrim { padding-block: var(--s-7); }
  .result-hero > .pattern-scrim { padding-block: var(--s-7); }
  .result-body { padding-block: var(--s-7); }
  .quiz-inner { padding-block: var(--s-6) var(--s-7); }
  .card-hero { padding: var(--s-6) var(--s-5); }
  .btn-lg { width: 100%; }
}

@media (max-width: 560px) {
  .scale { grid-template-columns: repeat(2, 1fr); }
  .scale-btn { min-height: 88px; }
  .rank-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name score"
      "bar  bar";
    gap: var(--s-2) var(--s-4);
  }
  .rank-name  { grid-area: name; }
  .rank-score { grid-area: score; }
  .rank-bar   { grid-area: bar; }
}