/* submit.css — the submissions form only.
   Deliberately a separate sheet from gzs.css: the main stylesheet is being rebuilt in parallel
   and two hands in one file is how a merge eats somebody's work. Everything here is scoped
   under .sub* so it cannot leak into the rest of the site, and it consumes gzs.css's tokens
   rather than defining any of its own. */

.sub { margin: 2rem 0 0; max-width: 40rem; }

.sub-row { display: grid; gap: .4rem; margin: 0 0 1.2rem; }

.sub-row label,
.sub-check label > span:first-child {
  font: 700 var(--fs-micro)/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.sub-req {
  margin-left: .5rem; letter-spacing: .1em;
  color: var(--accent); font-weight: 700;
}

.sub input[type="text"],
.sub input[type="email"],
.sub input[type="url"],
.sub textarea {
  width: 100%; padding: .75rem .85rem;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px;
  font: 1rem/1.5 var(--body);
  /* iOS zooms the whole page in when a focused field is under 16px. 1rem keeps a phone from
     jumping the viewport the moment somebody taps the first field. */
}
.sub textarea { resize: vertical; min-height: 6rem; }
.sub input::placeholder, .sub textarea::placeholder { color: var(--ink-dim); opacity: 1; }
.sub input:focus-visible, .sub textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sub input:user-invalid, .sub textarea:user-invalid { border-color: var(--hot); }
/* :user-invalid, not :invalid — :invalid paints every required field red before the visitor
   has typed a single character, which reads as a page full of errors on arrival. */

.sub-hint { font: var(--fs-micro)/1.5 var(--mono); color: var(--ink-dim); }
.sub-hint a { color: var(--ink-soft); }

.sub-check { margin: 1.6rem 0 0; }
.sub-check label {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .9rem 1rem; background: var(--bg-2);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; cursor: pointer;
}
.sub-check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--accent); }
.sub-check span { font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }
.sub-check label:focus-within { border-color: var(--accent); }

/* The honeypot. Not display:none — some bots specifically skip hidden inputs, and a
   screen reader is kept out by aria-hidden on the wrapper plus tabindex -1 on the field. */
.sub-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}

.sub-msg { margin: 1rem 0 0; font: .95rem/1.6 var(--body); color: var(--ink-soft); min-height: 1.6em; }
.sub-ok  { color: var(--accent); font-weight: 600; }
.sub-err { color: var(--hot); }

.sub button[disabled] { opacity: .55; cursor: progress; }

@media (max-width: 34rem) {
  .sub-check label { grid-template-columns: auto 1fr; padding: .8rem .85rem; }
}