/* Shared form styles: used by /nominate, /newsletter, /contact and /interview/:token.
 *
 * Markup contract (all class names are generic; page CSS layers layout on top):
 *
 *   .fieldgrid                two-column grid of fields (collapses to one column ≤ 560px)
 *   .field                    one field wrapper. Add .field--full to span both grid columns.
 *     .field__label           uppercase label (a <label for> or a <legend>)
 *       .field__req           the red-ish "*" required marker (accent colour)
 *       .field__opt           muted "optional" suffix
 *     .field__input           underline text input (also for type=email/url/tel)
 *     .field__select          underline select with a chevron
 *     .field__area            boxed textarea
 *     .field__foot            row under a textarea: help text left, .field__count right
 *     .field__count           character counter ("120 / 600"); add .is-over past the limit
 *     .field__help            small muted help text
 *     .field__error           inline error text; give it an id and point the control's
 *                             aria-describedby at it. Hidden when empty.
 *   .field.is-invalid         red line on the control (JS also sets aria-invalid="true" on
 *                             the control, which triggers the same styling on its own)
 *
 *   .chips / .chip            toggle buttons (<button type="button" aria-pressed>)
 *   .form-alert               boxed message (info). .form-alert--error for failures.
 *                             Put role="status"/aria-live on it or its container.
 *   .form-note                small muted fine print under a form (links underlined)
 *   .form-actions             footer row: note on the left, submit button on the right
 *   .btn-submit               big dark submit button (goes accent on hover)
 *
 *   .success-panel            dark "thank you" panel. .success-panel--light for the outlined variant.
 *     .success-panel__icon    round check mark
 *     .success-panel__title   big serif headline (use an <h2>)
 *     .success-panel__text    body line
 *     .success-panel__actions button row
 */

/* ------------------------------------------------------------------ grid + field */
.fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.field { display: block; padding-top: 18px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field__label { display: block; padding: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.field__req { color: var(--accent); }
.field__opt { color: var(--muted); font-weight: 500; letter-spacing: .1em; }

.field__input,
.field__select {
  display: block; width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 10px 0; font-size: 16px; line-height: 1.4; background: transparent; color: var(--ink);
  outline: 0; transition: border-color .2s, box-shadow .2s;
}
.field__select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 28px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px 14px;
}
.field__area {
  display: block; width: 100%; margin-top: 10px; border: 1px solid var(--ink); border-radius: 0;
  padding: 14px; font-size: 16px; line-height: 1.5; background: #fff; color: var(--ink);
  outline: 0; resize: vertical; min-height: 120px; transition: border-color .2s, box-shadow .2s;
}
.field__input::placeholder,
.field__area::placeholder { color: #8a8a8a; opacity: 1; }

/* Focus: thicken the line rather than draw a box around an underline input. */
.field__input:focus-visible,
.field__select:focus-visible { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.field__area:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.field__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.field__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.field__count.is-over { color: var(--error); font-weight: 600; }
.field__help { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.field__error { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--error); }
.field__error:empty { display: none; }

.field.is-invalid .field__input,
.field.is-invalid .field__select,
[aria-invalid="true"].field__input,
[aria-invalid="true"].field__select { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }
.field.is-invalid .field__area,
[aria-invalid="true"].field__area { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

/* Fieldsets used as field groups */
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ------------------------------------------------------------------ chips (toggle buttons) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink); background: #fff; color: var(--ink);
  padding: 10px 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; line-height: 1.2;
  text-align: left; transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--mist); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------ messages + actions */
.form-alert { display: flex; gap: 12px; align-items: flex-start; background: var(--mist); padding: 16px 18px; font-size: 14px; line-height: 1.5; }
.form-alert .icon { margin-top: 1px; color: var(--accent); }
.form-alert a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form-alert--error { background: #FBEDEC; color: var(--error); }
.form-alert--error .icon { color: var(--error); }

.form-note { font-size: 13px; line-height: 1.55; color: var(--muted); }
.form-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--accent); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 18px 30px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; line-height: 1.1; white-space: nowrap;
  transition: background-color .25s, border-color .25s;
}
.btn-submit:hover { background: var(--accent); border-color: var(--accent); }
.btn-submit[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ success panel */
.success-panel { background: var(--ink); color: #fff; padding: clamp(32px, 5vw, 64px); }
.success-panel:focus { outline: none; }
.success-panel__icon { width: 56px; height: 56px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; }
.success-panel__title { margin-top: 28px; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 88px); line-height: .92; }
.success-panel__title em { font-style: italic; }
.success-panel__text { margin-top: 20px; max-width: 480px; overflow-wrap: anywhere; font-size: 17px; line-height: 1.6; color: #d6d6d6; }
.success-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.success-panel .btn--ghost { border-color: #fff; color: #fff; }
.success-panel .btn--ghost:hover { background: #fff; color: var(--ink); }

.success-panel--light { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.success-panel--light .success-panel__icon { background: var(--ink); color: #fff; border-color: var(--ink); width: 48px; height: 48px; }
.success-panel--light .success-panel__text { color: var(--text-3); }

@media (max-width: 560px) {
  .fieldgrid { grid-template-columns: minmax(0, 1fr); }
  .form-actions .btn-submit { width: 100%; }
  .success-panel__actions > * { flex: 1 1 100%; }
}