/* ==========================================================================
   Contact form only (contact.html, contact-thanks.html and the pages the
   allodi-contact service returns to browsers without JavaScript).
   Uses the site.css tokens; adds one: the error color.
   ========================================================================== */
:root {
  --form-error: #a3261c;
  --form-error-soft: #fbe9e7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --form-error: #ff9c8f;
    --form-error-soft: #3a1d1a;
  }
}
:root[data-theme="dark"] {
  --form-error: #ff9c8f;
  --form-error-soft: #3a1d1a;
}

.field-error {
  display: block; margin-top: 0.35rem; font-size: 0.93rem; font-weight: 600; color: var(--form-error);
}
.field-error[hidden] { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--form-error);
}

.form-status { margin: 0 0 var(--space-3); max-width: 44rem; }
.form-status:empty { display: none; }
.form-status.is-error {
  border: 1.5px solid var(--form-error); background: var(--form-error-soft); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-2);
}
.form-status.is-info {
  border: 1.5px solid var(--line-strong); background: var(--paper-2); border-radius: var(--radius); padding: var(--space-2);
}
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.form-done {
  max-width: 44rem; border: 1.5px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); padding: var(--space-3);
}
.form-done[hidden] { display: none; }
.form-done h3 { margin-top: 0; }
.form-done p:last-child { margin-bottom: 0; }
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

button[type="submit"][aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* Standalone pages from the service (no header or footer) */
.contact-standalone { max-width: 44rem; }
.contact-review { margin: var(--space-3) 0; }
.contact-review dt { font-weight: 600; margin-top: var(--space-1); }
.contact-review dd { margin: 0 0 0.25rem; overflow-wrap: anywhere; }

/* The estimate brought from the pricing page (contact.html#estimate), shown read-only above the form */
.estimate-box {
  max-width: 44rem; margin: 0 0 var(--space-4); border: 1.5px solid var(--line-strong); background: var(--paper-2);
  border-radius: var(--radius); padding: var(--space-3);
}
.estimate-box[hidden] { display: none; }
.estimate-box h3 { margin-top: 0; }
.estimate-counts { padding-left: 1.2rem; }
.estimate-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--space-2) 0; font-size: 0.95rem; }
.estimate-table th, .estimate-table td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.estimate-table th { padding-top: var(--space-2); }
.estimate-table td.num { text-align: right; white-space: nowrap; }

/* The scan file upload (free-scan.html#send-result) */
.scan-preview {
  border: 1.5px solid var(--line-strong); background: var(--paper-2); border-radius: var(--radius);
  padding: var(--space-3); margin: var(--space-2) 0 var(--space-3);
}
.scan-preview[hidden] { display: none; }
.scan-preview h3 { margin-top: 0; }
.scan-preview dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem var(--space-2); margin: 0 0 var(--space-2); }
.scan-preview dt { font-weight: 600; }
.scan-preview dd { margin: 0; overflow-wrap: anywhere; }
.scan-preview details { margin-top: var(--space-2); }
.scan-preview ul.scan-names { max-height: 16rem; overflow: auto; padding-left: 1.2rem; font-size: 0.93rem; }
@media (max-width: 480px) { .scan-preview dl { grid-template-columns: 1fr; } .scan-preview dd { margin-bottom: 0.4rem; } }

/* Estimate mode (contact.html#estimate): contact.js puts .has-estimate on <body> while an estimate is attached and
   hides the general contact material, so the form is the whole page. */
@media (min-width: 820px) { .has-estimate .cols-2 { grid-template-columns: minmax(0, 44rem); } }
/* site.css gives .field-row display:grid, which would beat the hidden attribute. */
[data-estimate-hide][hidden], [data-estimate-show][hidden] { display: none !important; }
.has-estimate button[type="submit"] + p { margin-top: var(--space-2); }
/* The address ends in #estimate, so the browser would scroll past the heading that says what to do; the margin
   keeps the page at the top, and the shorter head keeps the numbers in view under it. */
.has-estimate #estimate { scroll-margin-top: 100vh; }
.has-estimate .page-head { padding-block: var(--space-4) var(--space-3); }
.has-estimate .page-head + .section { padding-top: var(--space-4); }