/* ============================================================
   Quiz polish (25 Sep). Loads last on quiz.html only, after
   site.css and theme-brief.css, so crm.html is untouched.

   What it fixes, measured on a 390px phone and a 1440px screen:
   - the disabled Next was a beige slab that read as broken, and
     nothing said what unlocked it (the line beside it now does);
   - "Review and send" wrapped onto two lines on a phone;
   - 12px labels and 3-line answer boxes for 20-point questions;
   - inputs the same cream as the card, so the fields disappeared.
   ============================================================ */

.quizshell{padding:40px 0 72px}
.quizcard{gap:28px;box-shadow:0 18px 50px -28px rgba(26,51,0,.35),0 2px 0 rgba(26,51,0,.06)}

/* ---- progress: where you are, readable at a glance ---- */
.progress{gap:10px}
.progress-meta .micro{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;color:var(--heading)}
#progress-count{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.progress-track{height:8px;border:1px solid var(--hairline);box-sizing:content-box}

/* ---- the question ---- */
.qstep{gap:22px}
.qhead{gap:10px}
.qhead h2{font-size:clamp(24px,2.6vw,32px);line-height:1.16;text-wrap:balance}
.qhead p{font-size:17px;line-height:27px;color:var(--body);max-width:62ch}
.qmeta .tag,.qmeta .realtag{font-size:11.5px;letter-spacing:.06em;padding:5px 11px}

.solution{background:#fffbe8;border-left-color:#1a3300;border-color:#efe6c4}
.solution p{font-size:15.5px;line-height:24px}

/* ---- fields: white on cream, so the place to type is obvious ---- */
.field{gap:8px}
.field label{font-size:15px;line-height:22px;font-weight:650}
.field .hint{font-size:14px;line-height:21px}
.input,.textarea{
  background:#fff;border:1.5px solid var(--border);border-radius:10px;
  font-size:16.5px;line-height:26px;color:var(--heading);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input{min-height:54px;padding:13px 16px}
.textarea{min-height:176px;padding:16px 18px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#9aa08f}
.input:hover,.textarea:hover{border-color:#b9b29e}
.input:focus,.textarea:focus{border-color:var(--heading);box-shadow:0 0 0 4px rgba(255,233,92,.75)}
select.input{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3300' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:18px;
}
.counter{font-size:12.5px}

/* ---- options: bigger targets ---- */
.option{padding:18px 20px;border-width:1.5px}
.option-text b{font-size:16.5px}

/* ---- nav: Back · what unlocks Next · Next ---- */
.qnav{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.qnav-hint{margin:0;font-size:14px;line-height:20px;color:var(--muted);text-align:right}
.qnav-hint.ok{color:var(--pass)}
.qnav .btn{white-space:nowrap}
#next{min-width:168px}
/* still the primary action when it is waiting: ink, just quieter */
.qnav #next:disabled{background:var(--heading);color:#fcfaf5;opacity:.32;box-shadow:none;transform:none}

/* ---- phones ---- */
@media (max-width:991px){
  /* the pill floats 14px down; on a scrolled phone the question showed through
     the gap above it. Pin it to the top on a ground-coloured strip instead. */
  .navwrap-q{top:0;padding:10px 16px 8px;background:linear-gradient(var(--ground) 82%,rgba(245,240,228,0))}
  .quizshell{padding:20px 0 40px}
  .quizshell::before{display:none}
  .quizcard{padding:22px 20px;gap:24px}
  .qhead h2{font-size:24px;line-height:30px}
  .qhead p{font-size:16px;line-height:25px}
  .textarea{min-height:156px}
  .qnav{
    grid-template-columns:auto 1fr;grid-template-areas:"hint hint" "back next";
    gap:10px 12px;margin:0 -20px -22px;padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  }
  .qnav-hint{grid-area:hint;text-align:left;font-size:13px;line-height:18px}
  .qnav-hint:empty{display:none}
  #back{grid-area:back;padding:0 18px}
  #next{grid-area:next;min-width:0;width:100%;font-size:17px}
}
@media (max-width:380px){
  .quizcard{padding:20px 16px}
  .qnav{margin:0 -16px -20px;padding-left:16px;padding-right:16px}
}