/* The organiser's form at /events/submit. Loaded after monocle.css.
   One column of fieldsets beside a short card stack on what the calendar
   lists; on a phone the cards come first, so the rules are read before the
   form is filled. Inputs follow DESIGN.md: 1px Gallery Border outlines, 4px
   radius, a black focus ring, Alert Red only for a field that needs a look.
   The submit button is the black pill: Signal Yellow is for subscribing.
   The thanks block takes Mint Leaf's one job, the 2px confirmation rule.
   The contact form on /about uses the same rules. */

.sf-head .kicker a { color: inherit; text-decoration: none; }
.sf-head .kicker a:hover { text-decoration: underline; text-decoration-color: var(--blue-slate); }

.sf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 36px;
}
.sf { max-width: 680px; }
.sf-noscript { margin-top: 0; max-width: 640px; }

.sf-group {
  border: 0;
  border-top: 1px solid var(--gallery-border);
  margin: 0;
  padding: 22px 0 4px;
  min-width: 0;
}
.sf-group:first-child { border-top-color: var(--press-black); }
.sf-group legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dispatch-grey);
}
.sf-group legend + * { clear: both; }

.sf-field { margin-bottom: 18px; }
.sf-field[hidden] { display: none; }
.sf-field label { display: block; font: 700 14px/1.4 var(--sans); color: var(--press-black); }
.sf-opt { font-weight: 400; font-size: 12px; color: var(--dispatch-grey); margin-left: 6px; }
.sf-hint { font: 400 13px/1.45 var(--sans); color: var(--dispatch-grey); margin: 2px 0 0; max-width: 560px; }

.sf input[type="text"],
.sf input[type="email"],
.sf input[type="url"],
.sf input[type="date"],
.sf input[type="time"],
.sf select,
.sf textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--editorial-white);
  border: 1px solid var(--gallery-border);
  border-radius: var(--radius-inputs);
  padding: 11px 14px;
  font: 400 15px/1.4 var(--sans);
  color: var(--press-black);
  min-height: 44px;
}
.sf textarea { resize: vertical; line-height: 1.5; }
.sf input::placeholder { color: var(--dispatch-grey); }
.sf input:focus-visible,
.sf select:focus-visible,
.sf textarea:focus-visible { outline: 2px solid var(--press-black); outline-offset: 1px; border-color: var(--press-black); }
/* As specific as the input rules above, and later, so it wins. */
.sf input[aria-invalid="true"],
.sf select[aria-invalid="true"],
.sf textarea[aria-invalid="true"] { border-color: var(--alert-red); }
.sf-error { font: 400 13px/1.45 var(--sans); color: var(--alert-red); margin: 6px 0 0; }
.sf-count { font: 400 12px var(--sans); color: var(--dispatch-grey); margin: 6px 0 0; text-align: right; font-variant-numeric: tabular-nums; }

.sf-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sf-row > .sf-field { flex: 1 1 140px; min-width: 0; }
.sf-row > .sf-grow { flex: 3 1 240px; }

.sf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/1.45 var(--sans);
  color: var(--ink-charcoal);
  margin: 0 0 18px;
  cursor: pointer;
}
.sf-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--press-black); }
.sf-choices { display: flex; flex-wrap: wrap; gap: 0 28px; }
.sf-consent { border-top: 1px solid var(--gallery-border); padding-top: 22px; margin-bottom: 0; }
.sf-consent + .sf-error { margin-top: 8px; }

/* Out of sight and out of the tab order; only a bot fills it. */
.sf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.sf-submit button[disabled] { opacity: .55; cursor: progress; transform: none; }
.sf-status { font: 400 13px/1.45 var(--sans); color: var(--ink-charcoal); margin: 0; }
.sf-status.is-error { color: var(--alert-red); }
.sf-fine { margin-top: 16px; max-width: 560px; }

.sf-thanks { border-left: 2px solid var(--mint-leaf); padding: 4px 0 4px 18px; max-width: 640px; }
.sf-thanks[hidden] { display: none; }
.sf-thanks:focus { outline: none; }
.sf-thanks h2 { font: 700 28px/1.125 var(--serif); letter-spacing: -.01em; margin-top: 8px; }
.sf-thanks .dek { margin-top: 10px; }
.sf-thanks button { margin-top: 20px; cursor: pointer; }

.sf-aside { position: sticky; top: 24px; }
.sf-card { border-top: 1px solid var(--gallery-border); padding: 18px 0 10px; }
.sf-card:first-child { border-top-color: var(--press-black); }
.sf-card ul { margin: 10px 0 0; padding-left: 18px; }
.sf-card li, .sf-card p:not(.kicker) { font: 400 14px/1.55 var(--sans); color: var(--ink-charcoal); }
.sf-card li + li { margin-top: 6px; }
.sf-card p:not(.kicker) { margin: 10px 0 0; }

@media (max-width: 900px) {
  .sf-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sf-aside { position: static; order: -1; }
}