/* Consultation intake — the €500 grant-specialist service.
 *
 * Its OWN stylesheet, and EVERY var() carries a literal fallback, for the reason
 * radar.css's header records: the design tokens live in site.css :root, and this
 * site has pages that load neither site.css nor its variables (the homepage, and
 * all 18 blog-static articles). /consultation/ renders through base.njk today and
 * therefore HAS the tokens — the fallbacks are what make this file safe to reuse or
 * inject anywhere, which is the same bet radar.css made and needed.
 */
.consult {
  background: var(--card-mist, rgba(15, 20, 35, 0.60));
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-card, 20px);
  padding: 28px;
  /* 100%, NOT `100% - 48px` like radar.css. Measured at 375px: .page already
     supplies a 24px gutter each side, so subtracting another 48 left the card at
     279px of a 327px column — tolerable for radar's single email field, cramped
     for a six-row textarea. This page always renders inside .page; if the include
     is ever injected somewhere without a gutter the card's own 28px padding still
     keeps the content off the edge, and only the border would touch it. */
  max-width: min(720px, 100%);
  margin: 36px auto 8px;
}
.consult__heading { margin: 0 0 8px; font-size: 1.3rem; }
.consult__lead {
  margin: 0 0 22px;
  color: var(--text-dim, rgba(255, 255, 255, 0.62));
  max-width: 62ch;
}

.consult__form { display: flex; flex-direction: column; gap: 18px; }

/* --- track chooser --- */
.consult__tracks {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.consult__legend {
  padding: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255, 255, 255, 0.38));
}
.consult__track {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-cta, 14px);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}
.consult__track:hover { border-color: rgba(255, 255, 255, 0.14); }
.consult__track input { margin-top: 3px; accent-color: var(--plasma-cyan, #63d8e8); }
.consult__track-name { font-weight: 600; color: var(--text, rgba(255, 255, 255, 0.92)); }
.consult__track-note {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--text-dim, rgba(255, 255, 255, 0.62));
}
/* :has() so the selected card is visible without JS touching classes. Degrades to
   the plain border on engines without it — the radio itself still shows state. */
.consult__track:has(input:checked) {
  border-color: var(--plasma-cyan, #63d8e8);
  background: rgba(99, 216, 232, 0.07);
}

/* --- fields --- */
.consult__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) {
  .consult__row { grid-template-columns: 1fr; }
}
.consult__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.consult__label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255, 255, 255, 0.38));
}
.consult__optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.consult__input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  color: var(--text, rgba(255, 255, 255, 0.92));
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-cta, 14px);
}
.consult__input:focus {
  outline: none;
  border-color: var(--plasma-cyan, #63d8e8);
}
.consult__input::placeholder { color: rgba(255, 255, 255, 0.30); }
.consult__textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.consult__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--solar-amber, rgba(255, 200, 120, 0.95));
}

.consult__captcha { min-height: 0; }
.consult__captcha:not([aria-hidden]) { min-height: 70px; }

/* --- submit + feedback --- */
.consult__submit {
  align-self: start;
  padding: 13px 30px;
  font: inherit;
  font-weight: 600;
  color: #0a0f1a;
  background: var(--text, rgba(255, 255, 255, 0.92));
  border: none;
  border-radius: var(--radius-cta, 14px);
  cursor: pointer;
}
.consult__submit:disabled { opacity: 0.55; cursor: default; }

.consult__status { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.consult__status[data-kind='error'] { color: var(--danger, rgba(255, 120, 120, 0.95)); }
.consult__status[data-kind='ok'] { color: var(--vector-green, rgba(140, 230, 160, 0.95)); }

.consult__fineprint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-faint, rgba(255, 255, 255, 0.38));
}