/* ============================================================
   WORKFLOW AUDIT READINESS ASSESSMENT
   Form and result styling built only from the site's tokens. No new
   identity, gauges, or color coding of outcomes. One column, large
   targets, visible focus (inherited from site.css). Jack will direct
   a design pass separately; this is the accessible default.
   ============================================================ */

.audit-nav { gap: var(--space-3) var(--space-4); }
.audit-nav-label { color: var(--text-body); }

.audit-status:empty { display: none; }
.audit-status {
  margin: 0 0 var(--space-5);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.audit-intro .btn-row { margin-top: var(--space-5); }

/* ---- Stages ---- */
.audit-form fieldset.stage {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.stage-legend {
  padding: 0;
  margin: 0 0 var(--space-6);
  display: block;
}

.stage-count {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-body);
}

.stage-title { margin: 0; }

/* ---- Fields ---- */
.field { margin: 0 0 var(--space-6); }

.field > label,
.field.choice > legend {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
  padding: 0;
  line-height: var(--lh-snug);
}

.field .help {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-body);
}

.field .count {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--text-body);
}

.optional {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--text-body);
}

.audit-form input[type="text"],
.audit-form input[type="url"],
.audit-form input[type="email"],
.audit-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: max(16px, var(--fs-body));
  line-height: var(--lh-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--rule);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
}

.audit-form textarea { resize: vertical; min-height: 6rem; }

.audit-form input[aria-invalid="true"],
.audit-form textarea[aria-invalid="true"],
.field.choice.is-invalid {
  outline: var(--border) solid var(--status-stop);
  outline-offset: 2px;
}

.field.choice {
  border: 0;
  padding: 0;
  min-width: 0;
}

.field.choice > label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  cursor: pointer;
  border-bottom: var(--border-hair) solid var(--outline);
}

.field.choice > label:last-of-type { border-bottom: 0; }

.field.choice input[type="radio"],
.field.choice input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--ws-black);
}

.field.choice label.standalone {
  margin-top: var(--space-3);
  border-bottom: 0;
}

.field.reveal { margin: var(--space-3) 0 0 var(--space-2); }
.field.reveal > label { font-size: var(--fs-body); }

.field-error {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--status-stop);
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Follow-up ---- */
.followup #followupBox { margin-top: var(--space-4); }
.followup #followupBox > label { display: block; font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: var(--space-2); }
.audit-inline-status:empty { display: none; }
.audit-inline-status { margin: var(--space-2) 0 0; font-size: var(--fs-small); }
.audit-stale { margin-top: var(--space-4); padding: var(--space-4); }
.audit-stale .btn-row { margin-top: var(--space-3); }

.audit-notice { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); }
.audit-notice p { font-size: var(--fs-small); }

/* ---- Errors ---- */
.audit-errors {
  border: var(--rule-heavy);
  border-color: var(--status-stop);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
  background: var(--surface-card);
}
.audit-errors-title { font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: var(--space-2); }
.audit-errors ul { margin: 0; padding-left: var(--space-5); }
.audit-errors li { margin-bottom: var(--space-1); }

/* ---- Review ---- */
.audit-review { margin-top: var(--space-6); border-top: var(--rule); padding-top: var(--space-5); }
.audit-review h4 { margin: var(--space-5) 0 var(--space-3); font-size: var(--fs-h4); }
.audit-review dl { margin: 0; }
.audit-review dt { font-weight: var(--fw-bold); color: var(--text-strong); margin-top: var(--space-3); }
.audit-review dd { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-review dd a { margin-left: var(--space-2); font-size: var(--fs-small); }
.audit-review .not-provided { color: var(--text-body); font-style: italic; }

.audit-name-echo { margin: 0 0 var(--space-3); font-size: var(--fs-small); }

.audit-trouble { margin-top: var(--space-5); }
.audit-trouble .btn-row { margin-top: var(--space-3); }

/* ---- Results ---- */
.audit-results h2 { margin-bottom: var(--space-3); }
.audit-score {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
.audit-observations { padding-left: var(--space-5); margin: 0 0 var(--space-6); }
.audit-observations li { margin-bottom: var(--space-2); }
.audit-breakdown { margin: 0 0 var(--space-6); border: var(--rule); padding: var(--space-4) var(--space-5); background: var(--surface-card); }
.audit-breakdown summary { cursor: pointer; font-weight: var(--fw-bold); color: var(--text-strong); }
.audit-breakdown dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
.audit-breakdown dt { margin: 0; }
.audit-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.audit-breakdown p { margin: 0; font-size: var(--fs-small); }
.audit-book { margin-bottom: var(--space-5); }
.audit-book .btn-row { margin-top: var(--space-4); }
.audit-receipt { margin-bottom: var(--space-5); }
.audit-receipt > p:first-child { margin-bottom: var(--space-2); }
.audit-receipt-code {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  letter-spacing: 0.08em;
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.audit-receipt p:last-child { margin-bottom: 0; }

/* ---- Dialogs ---- */
.audit-dialog {
  border: var(--rule-heavy);
  box-shadow: var(--pop-black);
  background: var(--bg-base);
  color: var(--text-body);
  padding: 0;
  width: min(68ch, calc(100vw - 2 * var(--space-5)));
  max-height: calc(100vh - 2 * var(--space-6));
}
.audit-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.audit-dialog-inner { padding: var(--space-6); }
.audit-dialog h2 { margin-bottom: var(--space-4); }
.audit-dialog .btn-row { margin-top: var(--space-5); }
.audit-dialog code { font-family: var(--font-heading); font-weight: var(--fw-bold); letter-spacing: 0.08em; }

.audit-privacy { border-top: var(--rule); padding-top: var(--space-7); margin-top: var(--space-9); }

@media (prefers-reduced-motion: reduce) {
  .audit-form .btn, .audit-results .btn { transition: none; }
}