/* ==========================================================
   RANEE'S — survey page styles
   ========================================================== */

.body-pad{ padding:40px 28px 48px; }

.stack{ margin-top:var(--sp-5); }

.line-item{
  padding:var(--sp-4) 0;
  border-top:1px dashed var(--grey-2);
}
.line-item:first-child{ border-top:1px solid var(--ink); }

.q-meta{ margin-bottom:var(--sp-2); }
.q-no{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  color:var(--grey-3);
  letter-spacing:0.06em;
}
.q-label{
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  margin-top:var(--sp-1);
  margin-bottom:var(--sp-3);
  line-height:1.3;
}

.stars{ display:flex; gap:8px; }
.star-btn{
  flex:1; aspect-ratio:1; max-width:48px;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:4px;
  -webkit-tap-highlight-color:transparent;
}
.star-btn svg{ width:28px; height:28px; }
.star-btn .outline{ fill:none; stroke:var(--grey-2); stroke-width:1.4; }
.star-btn .fill{ fill:var(--ink); display:none; }
.star-btn.lit .outline{ stroke:var(--ink); }
.star-btn.lit .fill{ display:block; }

/* the question label sits ABOVE its control with breathing room;
   the control (stars/textarea/input) follows immediately after.
   this is the fix for "text too close to block" — label gets a
   consistent gap below it via .q-label margin-bottom above, and
   inputs/textareas don't additionally need top margin */
.line-item textarea,
.line-item input{ margin-top:0; }

.contact-block{ padding-bottom:var(--sp-3); }

#success-view{ display:none; }
#success-view .body-pad{ text-align:center; padding-bottom:0; }
.thanks-line{
  font-size:15px;
  color:var(--grey-4);
  line-height:1.65;
  margin-top:var(--sp-1);
}