/* Nomination form. Loaded only by nominate.html. */

.steps { display: flex; flex-wrap: wrap; gap: 10px 8px; list-style: none; padding: 0; margin: 0 0 40px; }
.steps li {
  display: flex; align-items: center; gap: 10px; flex: 1 1 190px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 600; color: var(--muted); background: var(--white);
}
.steps li span {
  display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
}
.steps li[data-state="current"] { border-color: var(--gold); color: var(--ink); }
.steps li[data-state="current"] span { background: var(--gold); border-color: var(--gold); color: var(--ink-deep); }
.steps li[data-state="done"] { color: var(--ink); }
.steps li[data-state="done"] span { background: var(--ink); border-color: var(--ink); color: var(--white); }

.nomform { max-width: 780px; }
.nomform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step { border: 0; padding: 0; margin: 0 0 52px; min-width: 0; }
.step[hidden] { display: none; }
.step legend {
  display: block; width: 100%; padding: 0 0 20px; margin: 0 0 26px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: var(--fs-h2); font-weight: 600; color: var(--ink);
}
.step__count {
  display: block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 10px;
}
.step__intro { color: var(--muted); margin-bottom: 30px; }

.field-grid { display: grid; gap: 22px; }
@media (min-width: 680px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }

/* align-content:start stops an input stretching to match a taller sibling
   cell: without it the mobile-number box grew to the height of the email box,
   which carries a hint line underneath. */
.field { margin: 0; display: grid; gap: 8px; align-content: start; }
.field label { font-size: var(--fs-small); font-weight: 650; color: var(--ink); }
.req { color: var(--gold-text); }
.field__hint, .question__hint { font-size: var(--fs-small); color: var(--muted); }
.question__hint { margin: 0 0 14px; }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 13px 15px; font-family: var(--sans); font-size: var(--fs-body);
  color: var(--ink); background: var(--white);
  border: 1px solid var(--charcoal); border-radius: var(--radius);
}
textarea { resize: vertical; line-height: 1.6; }
input:focus-visible, textarea:focus-visible { border-color: var(--gold-text); }
/* An invalid field must not be signalled by colour alone: it also gets a
   thicker border and a text message, so it reads without colour perception. */
input[data-invalid], textarea[data-invalid] { border-width: 2px; border-color: #B3261E; }
.field__error { font-size: var(--fs-small); font-weight: 650; color: #B3261E; }
.field__error[hidden] { display: none; }

.question { margin-bottom: 40px; }
.question__title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.question__title span {
  display: block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px;
}
.counter { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); text-align: right; }
.counter[data-over] { color: #B3261E; font-weight: 650; }

.declaration { list-style: none; padding: 0; margin: 0 0 34px; }
.declaration li { margin-bottom: 14px; }
.declaration label { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--charcoal); cursor: pointer; }
.declaration input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold-text); }

.review { padding: 26px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.review[hidden] { display: none; }
.review__list { margin: 18px 0 0; display: grid; gap: 14px; }
.review__list div { display: grid; gap: 3px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.review__list div:last-child { border-bottom: 0; padding-bottom: 0; }
.review__list dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.review__list dd { margin: 0; font-size: var(--fs-small); color: var(--ink); white-space: pre-wrap; }

.fee {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 22px 26px; margin-bottom: 26px; background: var(--ink); border-radius: var(--radius);
}
.on-ink .fee__label { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fee__amount { margin: 0; font-family: var(--serif); font-size: var(--fs-h2); color: var(--white); }
.fee__amount span { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--muted-dark); }

.nomform__submit { width: 100%; }
.nomform__note { margin-top: 16px; font-size: var(--fs-small); color: var(--muted); }
.nomform__error {
  margin: 0 0 20px; padding: 15px 18px; font-size: var(--fs-small); font-weight: 650;
  color: #7A1C15; background: #FCEDEC; border-left: 4px solid #B3261E; border-radius: 0 var(--radius) var(--radius) 0;
}
.nomform__error[hidden] { display: none; }

.stepnav { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.stepnav[hidden] { display: none; }
.stepnav .btn { flex: 1 1 auto; max-width: 220px; }

/* ------------------------------------------------------------------ optional consent
   Visually separated from the required Declaration list above it. Consent that looks
   like part of a required block is not consent anyone gave deliberately. */
.declaration--optional { margin-top: -18px; padding-top: 18px; border-top: 1px solid var(--rule, #e2ded6); }
.declaration--optional label { color: var(--charcoal); }

/* ------------------------------------------------------------------ word counter
   Added by script. The limit is enforced on the server as well, so if the script
   never runs the only thing lost is the running count, not the rule. */
.wordcount { margin: 6px 0 0; font-size: 13px; color: #6b6b6b; text-align: right; }
.wordcount.is-over { color: #b3261e; font-weight: 600; }