/* submit.html — the story form. Same bones as the old site's /submit (handle, the loss, a
   counter, one button, the consent line), dressed as the arcade: the form is a cabinet panel
   (.cab from site.css) and the fields are receipt paper, typed in the receipt face. */

.story-form { margin-top: var(--s-4); max-width: 760px; }
.story-form .sf-body { padding: 24px 22px 26px; display: grid; gap: var(--s-3); }

.sf-field label {
  display: block; margin: 0 0 var(--s-1);
  font: 800 15px/1.3 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.sf-field input,
.sf-field textarea {
  display: block; width: 100%; margin: 0;
  background: var(--paper); color: var(--ink); text-shadow: none;
  border: 2px solid #b9ab86; border-radius: var(--r-1);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
  font: 400 18px/1.55 var(--mono); padding: 12px 14px;
}
.sf-field input { min-height: 52px; }
.sf-field textarea { min-height: 176px; resize: vertical; }
.sf-field input::placeholder,
.sf-field textarea::placeholder { color: #6b634c; opacity: 1; }
.sf-field input:focus-visible,
.sf-field textarea:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 3px; border-color: var(--ink);
}
.sf-field [aria-invalid="true"] { border-color: var(--red); }

.sf-note { margin: var(--s-1) 0 0; font-size: 16px; line-height: 1.5; color: var(--smoke); }
.sf-count { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sf-count.is-short { color: #ffc165; }
.sf-count.is-over { color: #ff8a70; }

.sf-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sf-go .btn { min-width: 160px; }
.sf-go .btn[disabled] { opacity: .6; cursor: progress; }
.sf-status { margin: 0; font-size: 17px; line-height: 1.5; color: var(--cream); max-width: 44ch; }
.sf-status.is-ok { color: #a9d77f; font-weight: 700; }
.sf-status.is-err { color: #ffb09c; font-weight: 700; }

.sf-fine { margin: 0; font-size: 16px; line-height: 1.55; color: var(--smoke); max-width: 60ch;
  padding-top: var(--s-2); border-top: 1px dashed rgba(233,222,195,.22); }

/* the honeypot: off-screen, not display:none (some bots skip hidden fields) */
.sf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
  .story-form .sf-body { padding: 20px 16px 22px; }
  .sf-go .btn { width: 100%; }
}