/* ==========================================================================
   Amzlify — forms and scorecard
   Field, input, select and checkbox base styles live in tokens.css §10.
   This file only adds what those two components need on top.
   ========================================================================== */

.audit-form {
  max-width: 34rem;
  margin-top: var(--space-lg);
}

.audit-form fieldset.field {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.audit-form .checkbox { margin-bottom: var(--space-2xs); }

.audit-form .btn { width: 100%; margin-top: var(--space-sm); }

@media (min-width: 30em) {
  .audit-form .btn { width: auto; }
}

/* Status messages. Never colour-only: each state has a word and a left rule. */
.form-status {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-sm);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
}

.form-status:empty { display: none; }

.form-status--pending { border-left-color: var(--line-strong); color: var(--muted); }
.form-status--success { border-left-color: var(--teal); color: var(--body); }
.form-status--error { border-left-color: var(--danger); color: var(--danger); }

.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.audit-confirmation {
  max-width: 34rem;
  margin-top: var(--space-lg);
  border-left: 3px solid var(--teal);
}

.audit-confirmation:focus { outline: none; }
.audit-confirmation:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Scorecard
   -------------------------------------------------------------------------- */

.scorecard {
  max-width: 40rem;
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-lg);
}

.scorecard__progress {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-sm);
}

.scorecard__fieldset { border: 0; padding: 0; margin: 0; }

.scorecard__question {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--space-md);
}

.scorecard__question:focus { outline: none; }
.scorecard__question:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.scorecard__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-2xs);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);
}

.scorecard__option:hover { border-color: var(--muted); }
.scorecard__option:has(input:checked) { border-color: var(--teal-800); background: var(--teal-tint); }

.scorecard__option input {
  accent-color: var(--teal-800);
  margin: 0.2em 0 0;
  flex: none;
}

.scorecard__controls {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.scorecard__result { margin-bottom: var(--space-lg); }

.scorecard__score {
  font-family: var(--font-heading);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.scorecard__score strong { font-size: var(--text-2xl); line-height: 1; }
.scorecard__score span { font-size: var(--text-md); color: var(--muted); }

.scorecard__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.scorecard__title:focus { outline: none; }
.scorecard__title:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.scorecard__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  margin: var(--space-lg) 0 0;
}

/* Band accent. The band also carries a heading that says the same thing in
   words, so colour is never the only signal. */
.scorecard__result--structural { border-left: 3px solid var(--ink); padding-left: var(--space-md); }
.scorecard__result--leaking { border-left: 3px solid var(--gold); padding-left: var(--space-md); }
.scorecard__result--solid { border-left: 3px solid var(--teal); padding-left: var(--space-md); }

.scorecard__caveat {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--border-hair) solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}