/* Prime Motion — the contact page (contact.html). Rides on site.css: the same tokens, the panel,
   the field, the message banner and the primary button. Kept in its own file so adding the page
   does not bump the site.css version every other page pins. */

.contact-panel { max-width: 640px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-12); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* the controls site.css does not style yet, drawn exactly like its input */
.field textarea {
  display: block; width: 100%; min-height: 168px; resize: vertical;
  background: var(--input); border: 0; border-radius: var(--radius-md);
  color: var(--foreground); padding: var(--space-8); font-size: 13px; line-height: 1.5;
  font-family: var(--font-sans); caret-color: var(--primary);
}
.field textarea:focus { outline: 2px solid var(--ring); outline-offset: 0; }

/* a field the check refused: a hairline in the destructive colour, and the reason under it */
.field.invalid input, .field.invalid textarea { box-shadow: inset 0 0 0 1px var(--destructive); }
.field.invalid input:focus, .field.invalid textarea:focus { outline-color: var(--destructive); }
.field-msg { min-height: 0; margin-top: var(--space-6); font-size: 11px; font-weight: 500; color: var(--destructive); }
.field-msg:empty { display: none; }
.field-foot { display: flex; align-items: flex-start; gap: var(--space-12); }
.field-foot .field-msg { flex: 1; }
.counter { margin: var(--space-6) 0 0 auto; font-size: 11px; color: var(--muted-foreground); }
.counter.over { color: var(--destructive); }

/* subject — the workspace-tab chips, as a radio group */
fieldset.chips { border: 0; min-width: 0; }
fieldset.chips legend { display: block; font-size: 11px; font-weight: 500; color: var(--muted-foreground); margin-bottom: var(--space-6); padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; height: var(--size-field); padding: 0 var(--space-14);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--muted-foreground); font-size: 13px; user-select: none;
}
.chip:hover span { color: var(--foreground); }
.chip input:checked + span { background: var(--secondary); border-color: var(--ring); color: var(--foreground); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.chip input:disabled + span { opacity: var(--alpha-disabled-box); cursor: not-allowed; }
/* a phone: the four subjects share one row in equal cells rather than wrapping one onto a second line */
@media (max-width: 560px) {
  .chip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chip span { width: 100%; justify-content: center; padding: 0 var(--space-4); }
}

/* honeypot: off-screen, never display:none (some bots skip hidden fields) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* sending: the button says so and turns over a small ring; the fields lock */
.btn[aria-busy="true"] { gap: var(--space-8); opacity: 0.85; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary-ink) 30%, transparent); border-top-color: var(--primary-ink);
  animation: pm-spin 700ms linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation: none; } }

.contact-alt { margin-top: var(--space-14); font-size: 12px; color: var(--muted-foreground); text-align: center; }

/* the banner may carry a link (the fallback address) and wrap to two lines */
.form-error { align-items: flex-start; line-height: 1.45; }
.form-error::before { margin-top: 5px; }
.form-error a { color: var(--foreground); white-space: nowrap; }

/* sent */
.contact-done { padding: var(--space-8) 0 var(--space-4); }
.contact-done h2 { display: flex; align-items: center; gap: var(--space-8); font-size: 16px; font-weight: 600; margin-bottom: var(--space-8); outline: none; }
.contact-done h2::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--success); }
.contact-done p { color: var(--muted-foreground); font-size: 13px; margin-bottom: var(--space-24); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .contact-panel { margin: var(--space-24) var(--space-16) 48px; padding: var(--space-16); }
}