/* ============================================================
   Future-Ready Assessment -- LAYOUT / COMPONENTS / RESPONSIVE
   Colors come from theme.css (CSS variables). Type is fixed here.
   Mobile-first; one desktop breakpoint at 760px.
   ============================================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-strong);text-decoration:none}
a:hover{color:var(--brand-deep)}

/* ---------- App shell ---------- */
.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--page-bg);
}

/* Persistent brand band (desktop only; on mobile it lives inside the card) */
.topbar{
  display:none;
  background:var(--brand-tint);
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  text-align:center;
}
.topbar .wm{
  font:600 11px/1 'Instrument Sans';
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-deep);
  white-space:nowrap;
}

/* Stage centers the active screen */
.stage{
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  overflow-y:auto;
}

/* ---------- Screens (one visible at a time) ---------- */
.screen{
  display:none;
  width:100%;
  max-width:none;
  background:var(--surface);
  border:none;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  flex-direction:column;
}
/* show only the active step */
.app[data-step="landing"] .screen[data-id="landing"],
.app[data-step="q1"]  .screen[data-id="q1"],
.app[data-step="q2"]  .screen[data-id="q2"],
.app[data-step="q3"]  .screen[data-id="q3"],
.app[data-step="q4"]  .screen[data-id="q4"],
.app[data-step="q5"]  .screen[data-id="q5"],
.app[data-step="q6"]  .screen[data-id="q6"],
.app[data-step="q7"]  .screen[data-id="q7"],
.app[data-step="q8"]  .screen[data-id="q8"],
.app[data-step="q9"]  .screen[data-id="q9"],
.app[data-step="q10"] .screen[data-id="q10"],
.app[data-step="q11"] .screen[data-id="q11"],
.app[data-step="q12"] .screen[data-id="q12"],
.app[data-step="complete"] .screen[data-id="complete"],
.app[data-step="confirm"]  .screen[data-id="confirm"]{
  display:flex;
}

/* Card regions */
.sp-hd{padding:18px 20px 0;display:flex;flex-direction:column;gap:14px}
.sp-top{
  display:flex;justify-content:space-between;align-items:center;
  font:600 10px 'Instrument Sans';letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  gap:14px;
}
.sp-top>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sp-top>span:last-child{white-space:nowrap;flex:none}
.hdr-l{display:flex;align-items:center;gap:10px;min-width:0}
.hdr-l>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-top .hdr-back{flex:none;width:22px;height:22px;padding:0;line-height:1;display:flex;align-items:center;justify-content:center}
.sp-top .hdr-back svg{display:block}
.sp-prog{height:3px;background:var(--progress-track);border-radius:3px;overflow:hidden}
.sp-prog i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .35s ease}
.sp-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;gap:18px}
.sp-foot{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px}

/* Type roles */
.sp-kick{font:600 11px 'Instrument Sans';letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.sp-q{font:400 24px/1.28 'Spectral',serif;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.sp-sub{font:400 13.5px/1.55 'Instrument Sans';color:var(--ink-soft);text-wrap:pretty}
.serif-i{font:400 12.5px/1.4 'Spectral',serif;font-style:italic;color:var(--ink-faint);text-align:center}

/* ---------- Option cards (real radios) ---------- */
.opts{display:flex;flex-direction:column;gap:9px}
.sc{
  position:relative;display:flex;gap:12px;align-items:center;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;
  padding:14px 15px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
}
.sc:hover{border-color:var(--brand-tint)}
.sc input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.sc .dot{width:19px;height:19px;border:1.5px solid #c4ccd6;border-radius:50%;flex:none;position:relative;transition:all .15s}
.sc .t{font:400 14px/1.35 'Instrument Sans';color:var(--ink)}
.sc:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-tint-2)}
.sc:has(input:checked) .dot{border-color:var(--brand);background:var(--brand)}
.sc:has(input:checked) .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.sc:has(input:checked) .t{color:var(--brand-strong)}
.sc:focus-within{box-shadow:inset 0 0 0 1px var(--brand),0 0 0 3px var(--focus)}

/* ---------- Buttons ---------- */
.sbtn{
  appearance:none;border:none;width:100%;cursor:pointer;
  background:var(--brand-strong);color:var(--on-brand);border-radius:32px;
  padding:15px;text-align:center;font:500 15px 'Instrument Sans';letter-spacing:.01em;
  transition:background .15s;
}
.sbtn:hover{background:var(--brand-deep)}
.sbtn:disabled{opacity:.5;cursor:default}
.sbtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.sbtn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.sbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}
.navrow{display:flex;gap:10px;align-items:center}
.navrow .back{
  flex:none;width:52px;height:52px;border-radius:50%;
  background:transparent;border:1px solid var(--hairline);color:var(--ink-soft);
  cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.navrow .back:hover{background:var(--surface-2);border-color:var(--brand-tint)}
.navrow .sbtn{flex:1;width:auto}

/* ---------- Real text inputs ---------- */
.s-field,.s-inp,.s-sel{
  width:100%;font:400 14px 'Instrument Sans';color:var(--ink);
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;
  padding:14px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.s-field{min-height:120px;resize:vertical;line-height:1.5}
.s-field::placeholder,.s-inp::placeholder{color:var(--ink-faint)}
.s-field:focus,.s-inp:focus,.s-sel:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--focus)}
.s-sel{
  appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a95a2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.val-err{display:block;font:400 12.5px 'Instrument Sans';color:#c0392b;margin-top:-4px}
.field-pair{display:flex;gap:9px}
.field-pair .s-sel{flex:0 0 96px}
.field-pair .s-inp{flex:1}

/* ---------- Hero / illustrative bits ---------- */
.s-bubble{background:var(--surface-2);border:1px solid var(--hairline);border-radius:18px 18px 18px 5px;padding:15px 16px;font:400 15px/1.45 'Spectral',serif;color:var(--ink)}
.s-chip{display:inline-block;background:var(--brand-tint-2);border:1px solid var(--brand-tint);border-radius:20px;padding:5px 11px;font:500 10.5px 'Instrument Sans';color:var(--brand-strong);margin:0 5px 5px 0}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chips .s-chip{margin:0}
.s-node{background:var(--surface-2);border:1px solid var(--hairline);border-radius:10px;padding:11px 4px;text-align:center;font:500 10px 'Instrument Sans';color:var(--ink-soft)}
.node-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.card-inset{background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px}
.dashbox{border:1px dashed #c4ccd6;border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:11px}
.dot-field{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:4px 0}
.dot-field i{width:13px;height:13px;border-radius:50%;background:#d6dde5;display:block}
.dot-field i.on{background:var(--brand)}
.checkline{display:flex;align-items:center;gap:11px}
.checkline .box{width:16px;height:16px;border:1.5px solid #c4ccd6;border-radius:3px;flex:none}
.checkline .lbl{font:400 13.5px 'Instrument Sans';color:var(--ink-soft)}
.pillbtn{background:var(--brand-strong);border-radius:10px;padding:11px;text-align:center;font:500 12px 'Instrument Sans';color:var(--on-brand)}

/* Badge (from Optimal DX) */
.gold-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:var(--gold);border:1px solid var(--gold-line);color:var(--on-gold);
  font:600 10px/1.5 'Instrument Sans';letter-spacing:.06em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;
}

/* Landing mini-report visual */
.mini-report{background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:13px}
.bar{height:5px;border-radius:3px;background:var(--hairline);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.ring{width:50px;height:50px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--brand) 0 68%,var(--hairline) 68% 100%)}
.ring .hole{width:34px;height:34px;border-radius:50%;background:var(--surface-2)}

/* Score ring on complete screen */
.score-ring{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--brand) 0 66%,var(--hairline) 66% 100%)}
.score-ring .hole{width:41px;height:41px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.check{width:18px;height:18px;border-radius:50%;background:var(--brand-tint-2);color:var(--brand-strong);flex:none;display:flex;align-items:center;justify-content:center;font:600 11px 'Instrument Sans'}
.big-check{width:58px;height:58px;border-radius:50%;background:var(--brand-tint-2);display:flex;align-items:center;justify-content:center;font:400 26px 'Instrument Sans';color:var(--brand-strong)}
.divider{height:1px;background:var(--hairline)}

/* Landing band: shown inside card on mobile; hidden on desktop (top bar covers it) */

/* Header band inside landing card top */
.land-band{background:var(--brand-strong);padding:11px 22px;display:flex;align-items:center;justify-content:center;text-align:center}
.land-band span{font:600 10px 'Instrument Sans';letter-spacing:.16em;text-transform:uppercase;color:var(--on-brand);white-space:nowrap}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:60;
  background:rgba(18,32,52,.55);
  display:none;align-items:flex-start;justify-content:center;padding:22px;overflow:auto;
}
.modal.is-open{display:flex}
.modal .sheet{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:22px;box-shadow:0 24px 60px rgba(15,30,55,.4);overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100dvh - 44px);
}
.modal .sheet .sp-body{overflow:auto}
.modal-x{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hairline);background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;
  font:400 19px 'Instrument Sans';line-height:1;
}
.modal-x:hover{background:var(--surface-2)}

/* ============================================================
   DESKTOP -- scale the same one-at-a-time flow up
   ============================================================ */
@media (min-width:760px){
  .topbar{display:flex;padding:16px 28px}
  .topbar .wm{font-size:12px;letter-spacing:.22em}

  .stage{align-items:center;padding:40px 32px}
  .land-band{display:none}

  .screen{max-width:660px;border:1px solid var(--hairline);border-radius:26px;box-shadow:0 22px 60px rgba(20,40,70,.12)}
  .sp-hd{padding:30px 44px 0;gap:20px}
  .sp-top{font-size:11px}
  .sp-prog{height:4px}
  .sp-body{padding:26px 44px 34px;gap:24px}
  .sp-foot{padding:0 44px 32px;gap:16px}

  .sp-q{font-size:33px;line-height:1.22}
  .sp-sub{font-size:15.5px}
  .serif-i{font-size:14px}
  .sc{padding:17px 19px;border-radius:16px;gap:14px}
  .sc .t{font-size:15.5px}
  .sc .dot{width:21px;height:21px}
  .sbtn{padding:17px;font-size:16px}
  .navrow .back{width:56px;height:56px;font-size:22px}

  .s-field,.s-inp,.s-sel{font-size:15.5px;padding:16px;border-radius:16px}
  .s-field{min-height:150px}
  .field-pair .s-sel{flex:0 0 110px}

  .s-bubble{font-size:17px;padding:18px 20px}
  .s-chip{font-size:11.5px;padding:6px 13px}
  .s-node{font-size:11px;padding:14px 6px}
  .land-band span{font-size:11px}
  .ring{width:58px;height:58px}.ring .hole{width:40px;height:40px}
  .modal .sheet{max-width:480px;border-radius:26px}
  .modal .sheet .sp-body{padding:26px 40px 34px}
}