/* ============================================================
   THE TRAINING LAB · client assessment form
   Builds on css/styles.css, which owns the tokens and the shell.
   ============================================================ */

/* this page's header is pinned to the scrolled state, so it is the short bar */
body{padding-top:var(--nav-h-sm)}

/* ---- intro ---- */
.assess-intro{padding:clamp(44px,7vh,84px) 0 clamp(28px,4vh,44px)}
.assess-intro h1{font-size:clamp(44px,6.5vw,92px);margin:20px 0 22px}
.assess-intro .lede{max-width:56ch;color:var(--muted);font-size:17px}

.how-it-works{
  margin:34px 0 0;padding:0;list-style:none;
  counter-reset:step;max-width:64ch;
  border-top:1px solid var(--line);
}
.how-it-works li{
  counter-increment:step;
  position:relative;padding:15px 0 15px 44px;
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:15px;
}
.how-it-works li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--accent);
}
.how-it-works b{color:var(--text);font-weight:600}
.privacy-note{
  margin-top:22px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
}

/* ---- fieldsets ---- */
#assess-form{padding-bottom:clamp(60px,10vh,120px)}
.fs{
  border:0;border-top:1px solid var(--line-strong);
  padding:clamp(30px,4vh,46px) 0 clamp(16px,2vh,26px);
  margin:0;
}
.fs > legend{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3vw,34px);letter-spacing:.02em;line-height:1;
  padding:0;margin-bottom:26px;
  display:flex;align-items:baseline;gap:14px;
}
.fs > legend .num{
  font-family:var(--font-mono);font-weight:400;font-size:12px;
  letter-spacing:.14em;color:var(--accent);
}

/* ---- fields ---- */
.field{margin-bottom:20px}
.field > label,.sig-label{
  display:block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.req{
  display:inline-block;margin-left:8px;
  font-size:9.5px;letter-spacing:.12em;
  color:var(--accent);
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field textarea,
.field select{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--text);
  font-family:var(--font-body);font-size:15px;
  padding:13px 14px;
  transition:border-color .15s ease,background .15s ease;
}
.field textarea{resize:vertical;min-height:64px;line-height:1.5}
.field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(242,241,236,.32)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:var(--bg-3);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.field input::placeholder,.field textarea::placeholder{color:#5c6068}
.field input[readonly]{color:var(--muted);cursor:default}
.field input[readonly]:hover{border-color:var(--line-strong)}
.hint{
  margin:-2px 0 10px;
  font-size:13px;color:var(--muted);
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

/* ---- radio and checkbox groups ---- */
.radio-group{border:0;padding:0;margin:0 0 22px}
.radio-group > legend{
  padding:0;margin-bottom:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.radios{display:flex;flex-wrap:wrap;gap:9px}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.radio span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:56px;padding:11px 17px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--bg-2);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.radio input:hover + span{border-color:rgba(242,241,236,.32)}
.radio input:checked + span{
  background:var(--accent);border-color:var(--accent);color:#0D0E11;font-weight:500;
}
.radio input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.radios.scale .radio span{min-width:52px}

/* needs to out-rank `.field > label`, which is uppercase mono */
.field > label.check{
  display:flex;align-items:flex-start;gap:13px;
  cursor:pointer;
  margin-bottom:0;
  font-family:var(--font-body);font-size:14.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--text);
  line-height:1.5;
}
.check input{
  appearance:none;flex:0 0 auto;
  width:21px;height:21px;margin-top:1px;
  border:1px solid var(--line-strong);border-radius:2px;
  background:var(--bg-2);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.check input:hover{border-color:rgba(242,241,236,.32)}
.check input:checked{
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%230D0E11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:var(--accent);
}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- callouts ---- */
.callout{
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-left:2px solid var(--accent);
  border-radius:var(--radius);
  padding:22px 24px;margin-bottom:26px;
}
.callout p{color:var(--muted);font-size:14.5px}
.callout p + p{margin-top:11px}
.callout b{color:var(--text)}
.callout-actions{margin-top:18px}
.callout.warn{border-left-color:var(--violet)}
.callout.warn b{color:var(--violet)}
.fineprint{
  margin-top:14px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.inline-note{
  border-left:2px solid var(--accent);
  padding:12px 0 12px 16px;margin-bottom:8px;
  color:var(--muted);font-size:14px;max-width:72ch;
}

/* ---- consent ---- */
.consent{
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:24px;margin-bottom:22px;
  max-height:260px;overflow-y:auto;
}
.consent p{color:var(--muted);font-size:14.5px}
.consent p + p{margin-top:13px}

/* ---- signature ---- */
.sig-field{margin-top:8px}
.sig-wrap{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
}
#sig-pad{
  display:block;width:100%;height:190px;
  touch-action:none;cursor:crosshair;
}
.sig-baseline{
  position:absolute;left:26px;right:26px;bottom:46px;height:1px;
  background:var(--line-strong);pointer-events:none;
}
.sig-wrap:focus-within{border-color:var(--accent)}
#sig-pad:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sig-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:12px;
}
.btn-sm{padding:10px 16px;font-size:11.5px}
.sig-status{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.sig-status.signed{color:var(--accent)}

/* ---- validation ---- */
.field.invalid input,.field.invalid textarea,.field.invalid select,
.field.invalid .check input{border-color:var(--violet)}
.sig-field.invalid .sig-wrap{border-color:var(--violet)}
.field-error{
  display:block;margin-top:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--violet);
}

/* ---- submit ---- */
.form-actions{
  border-top:1px solid var(--line-strong);
  padding-top:clamp(28px,4vh,40px);
}
.form-msg{
  margin-top:16px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--muted);
}
.form-msg.error{color:var(--violet)}
.form-msg.ok{color:var(--accent)}
.form-actions .fineprint{text-transform:none;letter-spacing:.04em;font-size:11.5px}
.form-actions .fineprint a{color:var(--accent)}
#submit-btn[disabled]{opacity:.55;cursor:progress}

@media (prefers-reduced-motion: reduce){
  .field input,.field textarea,.field select,.radio span,.check input{transition:none}
}

/* the header here shows a real button rather than a hamburger, so it needs
   more room than the main site's header on a narrow screen */
@media (max-width:560px){
  .nav .btn{padding:10px 13px;font-size:10.5px;letter-spacing:.06em}
}
@media (max-width:400px){
  .brand-name{font-size:15px}
  .nav .btn{padding:9px 11px;font-size:10px}
}

/* two actions side by side under the form */
.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:4px}