/* ---------------------------------------------------------
   Fabrice Bokovi, client intake forms
   Tally-style: dark, single column, generous spacing.
--------------------------------------------------------- */

:root{
  --bg:#131316;
  --panel:#1b1b20;
  --field:#202027;
  --field-border:#313138;
  --field-border-focus:#5b6cff;
  --text:#f3f3f5;
  --text-dim:#a9a9b3;
  --text-faint:#6f6f79;
  --accent:#ff8a5c;
  --accent-2:#5b6cff;
  --ok:#3ecf8e;
  --danger:#ff6b6b;
  --radius:10px;
  --maxw:640px;
  --letter-a:#ff8a8a;
  --letter-b:#ffb26b;
  --letter-c:#ffd76b;
  --letter-d:#7fdc8f;
  --letter-e:#6bb8ff;
  --letter-f:#c79bff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  margin:0;
  padding:0;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* header */
.top{padding:56px 0 32px;border-bottom:1px solid #232328}
.eyebrow{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px}
h1{font-size:clamp(28px,5vw,38px);font-weight:700;letter-spacing:-.01em;margin:0 0 12px;line-height:1.15}
.top p{color:var(--text-dim);font-size:16px;max-width:56ch;margin:0}

/* section headers within the form */
.section-head{padding:44px 0 4px;margin-top:8px}
.section-head:first-of-type{padding-top:36px}
.section-head h2{font-size:21px;font-weight:700;margin:0 0 6px;color:var(--accent)}
.section-head p{color:var(--text-dim);font-size:15px;margin:0;max-width:56ch}

.note{
  background:var(--panel);
  border:1px solid #232328;
  border-left:3px solid var(--accent-2);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;
  margin:18px 0 28px;
  color:var(--text-dim);
  font-size:14.5px;
}
.note p{margin:0 0 8px}
.note p:last-child{margin-bottom:0}

/* fields */
form{padding-bottom:60px}
.field{padding:26px 0;border-bottom:1px solid #212126}
.field:last-child{border-bottom:none}
.hidden{display:none !important}
.field.sub{
  margin-top:16px;
  padding:18px 0 0 18px;
  border-left:2px solid var(--field-border);
  border-bottom:none;
}

label.q, .q-label{
  display:block;
  font-size:16.5px;
  font-weight:600;
  margin:0 0 4px;
  color:var(--text);
}
.q .req{color:var(--accent);margin-left:3px}
.help{color:var(--text-faint);font-size:14px;margin:4px 0 14px;max-width:56ch}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=date],
input[type=number],
textarea,
select{
  width:100%;
  background:var(--field);
  border:1px solid var(--field-border);
  color:var(--text);
  border-radius:var(--radius);
  padding:12px 14px;
  font-size:15.5px;
  font-family:inherit;
  margin-top:6px;
  transition:border-color .12s;
}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--field-border-focus);
}
::placeholder{color:var(--text-faint)}

/* choice groups (radio/checkbox, tally-style lettered pills) */
.choices{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.choice{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--field);
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .12s,background .12s;
}
.choice:hover{border-color:#454550}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .letter{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#151517;
}
.choice span.txt{font-size:15px}
.choice:has(input:checked){
  border-color:var(--accent-2);
  background:#1e2030;
}

/* scale / matrix rows */
.scale-row{display:flex;align-items:center;gap:14px;margin:10px 0;flex-wrap:wrap}
.scale-row .ends{font-size:13px;color:var(--text-faint);min-width:96px}
.scale-opts{display:flex;gap:8px}
.scale-opts label{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--field);border:1px solid var(--field-border);
  font-size:13px;color:var(--text-dim);cursor:pointer;
}
.scale-opts input{position:absolute;opacity:0}
.scale-opts label:has(input:checked){background:var(--accent-2);border-color:var(--accent-2);color:#fff}

/* radar chart preview for multi-row scale questions */
.scale-with-radar{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.scale-rows{flex:1 1 260px;min-width:220px}
.radar-chart-wrap{flex:0 0 auto;width:220px;max-width:100%;margin:0 auto}
.radar-chart{width:100%;height:auto;display:block;overflow:visible}
.radar-ring{fill:none;stroke:var(--field-border);stroke-width:1}
.radar-axis{stroke:var(--field-border);stroke-width:1}
.radar-label{fill:var(--text-faint);font-size:9px}
.radar-shape{fill:rgba(91,108,255,.28);stroke:var(--accent-2);stroke-width:2}
.radar-dot{fill:var(--accent-2)}
.radar-dot.hidden{display:none}

/* file */
input[type=file]{
  width:100%;margin-top:6px;padding:10px 12px;
  background:var(--field);border:1px dashed var(--field-border);border-radius:var(--radius);
  color:var(--text-dim);font-size:14px;
}

/* buttons */
.actions{padding:34px 0 0;display:flex;gap:12px;align-items:center}
button.submit{
  background:var(--accent-2);color:#fff;border:none;
  border-radius:var(--radius);padding:13px 26px;font-size:15.5px;font-weight:600;
  cursor:pointer;transition:opacity .12s;
}
button.submit:hover{opacity:.9}
button.submit:disabled{opacity:.5;cursor:default}
.status{font-size:14px;color:var(--text-dim)}
.status.err{color:var(--danger)}

/* success state */
#success{
  display:none;
  text-align:center;
  padding:80px 0;
}
#success h2{font-size:26px;margin:0 0 12px;color:var(--ok)}
#success p{color:var(--text-dim);font-size:15.5px;max-width:48ch;margin:0 auto}

footer{
  border-top:1px solid #212126;
  padding:26px 0 60px;
  color:var(--text-faint);
  font-size:13px;
}
footer a{color:var(--text-dim)}

/* landing page hub links */
.hub-links{display:flex;flex-direction:column;gap:14px;padding:36px 0 60px}
.hub-link{
  display:block;
  background:var(--panel);
  border:1px solid var(--field-border);
  border-radius:var(--radius);
  padding:20px 22px;
  text-decoration:none;
  color:var(--text);
  transition:border-color .12s,background .12s;
}
.hub-link:hover{border-color:var(--accent-2);background:#1e2030}
.hub-link .hub-title{font-size:17px;font-weight:600;margin:0 0 4px}
.hub-link .hub-desc{font-size:14px;color:var(--text-dim);margin:0}

@media (max-width:520px){
  .top{padding:40px 0 26px}
  .field{padding:20px 0}
}