/* ============================================================
   Growth Leadership Diagnostic — respondent-facing UI

   Tokens lifted 1:1 from the Mahdlo design system
   (mahdlo-theme/css/theme.css + fields.json), same as the deck.

   Fonts self-host from /fonts per Mahdlo performance standards — no
   Google @import. Unlike the PDF renderer, a normal page load resolves
   these URLs fine, so no data-URI embedding is needed here.
   ============================================================ */

@font-face{font-family:'Oswald';src:url('/fonts/oswald-var.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Semi Condensed';src:url('/fonts/barlowsc-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  --red-500:#E21836; --red-600:#C2122C; --red-50:#FDEEF0; --red-300:#ED7585;
  --neutral-0:#FFFFFF; --neutral-25:#F7F8F8; --neutral-100:#E3E4E5;
  --neutral-200:#C9CBCC; --neutral-300:#A6AAA9; --neutral-400:#858589;
  --neutral-600:#63666A; --neutral-900:#2C2E35; --neutral-950:#222222;

  --brand:var(--red-500);
  --brand-hover:var(--red-600);
  --brand-soft:var(--red-50);
  --surface-page:var(--neutral-25);
  --surface-card:var(--neutral-0);
  --surface-inverse:var(--neutral-900);
  --text-strong:var(--neutral-950);
  --text-body:#34363B;
  --text-muted:var(--neutral-600);
  --text-subtle:var(--neutral-400);
  --border-subtle:var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);

  --font-display:'Oswald','DIN Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-eyebrow:'Barlow Semi Condensed','Barlow',sans-serif;

  --tracking-display:-0.005em;
  --tracking-eyebrow:0.14em;
  --border-accent:3px;
  --radius:4px;
  --focus-ring:0 0 0 3px rgba(226,24,54,.32);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout ---------- */

.pad{max-width:660px;margin:0 auto;padding:clamp(32px,6vw,72px) 24px 80px;}
.stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.stack.center{align-items:center;text-align:center;}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---------- type ---------- */

h1,h2{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-display);color:var(--text-strong);
  margin:0;text-wrap:balance;
}
h1{font-size:clamp(30px,5.2vw,46px);line-height:1.02;}
h2{font-size:clamp(24px,3.8vw,34px);line-height:1.08;}

/* The recurring brand device: 22px pill rule, then letterspaced caps. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font:600 12px/1.2 var(--font-eyebrow);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--brand);
}
.eyebrow::before{
  content:"";width:22px;height:var(--border-accent);background:var(--brand);
  border-radius:999px;flex:none;
}
.eyebrow a{color:inherit;}

p{margin:0;max-width:60ch;}
.lede{font-size:clamp(17px,2vw,19px);line-height:1.55;color:var(--text-muted);}
.fine{font-size:14px;line-height:1.55;color:var(--text-muted);}

/* Why Mahdlo asks this question — sits under the question, quieter than body. */
.framer{
  font-size:14.5px;line-height:1.6;color:var(--text-muted);
  border-left:2px solid var(--border-default);padding-left:14px;
}

.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--text-body);}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;
  background:var(--brand);border-radius:999px;
}

/* ---------- controls ---------- */

.btn{
  font:600 15px/1 var(--font-body);
  background:var(--brand);color:var(--neutral-0);
  border:1px solid transparent;border-radius:var(--radius);
  padding:14px 26px;cursor:pointer;text-decoration:none;
  display:inline-block;transition:background .15s ease;
}
.btn:hover{background:var(--brand-hover);}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn[disabled]{background:var(--border-default);color:var(--text-subtle);cursor:not-allowed;}
.btn.ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong);}
.btn.ghost:hover{background:var(--neutral-100);}

.field{display:flex;flex-direction:column;gap:7px;width:100%;}
.field > span{
  font:600 12px/1.2 var(--font-eyebrow);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);
}
.field .hint{
  font:400 13px/1.5 var(--font-body);color:var(--text-muted);
  text-transform:none;letter-spacing:0;margin-top:-2px;
}
.field input,.field textarea{
  font:400 16px/1.5 var(--font-body);color:var(--text-strong);
  background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius);
  padding:13px 15px;width:100%;resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--focus-ring);
}
.field ::placeholder{color:var(--text-subtle);}

/* ---------- multi-select options ---------- */

.options{display:flex;flex-direction:column;gap:10px;width:100%;}
.option{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius);
  padding:15px 17px;cursor:pointer;
  font-size:15px;line-height:1.5;color:var(--text-body);
  transition:border-color .12s ease, background .12s ease;
}
.option:hover{border-color:var(--border-strong);}
.option.on{border-color:var(--brand);background:var(--brand-soft);color:var(--text-strong);}
.option input{
  appearance:none;flex:none;width:19px;height:19px;margin:1px 0 0;
  border:1.5px solid var(--border-strong);border-radius:3px;
  background:var(--surface-card);cursor:pointer;
}
.option.on input{background:var(--brand);border-color:var(--brand);}
.option.on input::after{
  content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid var(--neutral-0);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.option input:focus-visible{outline:none;box-shadow:var(--focus-ring);}

/* ---------- progress ---------- */

.progress{width:100%;height:3px;background:var(--border-subtle);border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;background:var(--brand);transition:width .3s ease;}

/* ---------- result ---------- */

.scores{display:flex;flex-direction:column;gap:11px;width:100%;margin:4px 0;}
.score-row{display:flex;align-items:center;gap:14px;}
.score-lab{
  width:52px;flex:none;
  font:600 11px/1 var(--font-eyebrow);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-strong);
}
/* display:block on both — .score-fill is a span inside a non-flex parent, so
   without it width/height are ignored and the bars render empty. */
.score-track{display:block;flex:1;height:18px;background:var(--border-subtle);border-radius:2px;overflow:hidden;}
.score-fill{display:block;height:100%;background:var(--border-strong);border-radius:2px;}
.score-fill.win{background:var(--brand);}
.score-val{
  width:24px;text-align:right;flex:none;
  font:700 17px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--text-strong);
}

.notice{
  background:var(--surface-card);
  border-left:var(--border-accent) solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;font-size:15px;line-height:1.55;width:100%;
}
.notice strong{color:var(--text-strong);font-weight:600;}

/* ---------- spinner ---------- */

.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--border-subtle);border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .spinner{animation:none;border-top-color:var(--brand);}
}

/* ---------- links ---------- */

a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover{color:var(--brand-hover);}
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px;}

/* ---------------------------------------------------------------------------
   Narrative chips.

   Hybrid by design: chips for speed and clean segmentation, the text box kept
   underneath and optional. Chips are <button aria-pressed> rather than checkboxes
   so the pressed state is announced correctly and the whole label is the target —
   these labels run long, and a 14px checkbox is a poor hit area on a phone.
   --------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}
.chip-group-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-eyebrow, 'Barlow Semi Condensed', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-600, #63666a);
}
.chip {
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  padding: 8px 14px;
  border: 1px solid var(--neutral-200, #c9cbcc);
  border-radius: 999px;
  background: var(--neutral-0, #fff);
  color: var(--neutral-900, #2c2e35);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--brand, #e21836); }
.chip:focus-visible { outline: 2px solid var(--brand, #e21836); outline-offset: 2px; }
.chip.on {
  background: var(--brand, #e21836);
  border-color: var(--brand, #e21836);
  color: #fff;
}
/* Marks a field the research drafted, so it reads as a starting point to edit
   rather than an answer we have decided on their behalf. */
.hint.drafted { color: var(--brand, #e21836); }