/* Aplicar and Booking in direction A (round 4, 13 Nov 2026): one narrow centred column, as wide as
   the artist page's bio. Title as a small-caps label, the intro in mono normal case. Fields are
   plain lines: label above, a thin cream underline, no boxes. The bar, panels, links, buttons and
   the ending come from shell.css. */

.form-a {
  width: min(var(--fw), calc(100vw - 2.5rem));
  margin: 0 auto;
  padding-top: calc(var(--top-r) + 3rem);
  min-height: 100svh;
}
/* Words dissolve into black as they scroll under the logo, as on the artist page. */
.form-a::before {
  content: "";
  position: fixed;
  z-index: 25;
  top: 0; left: 0; right: 0;
  height: var(--top-r);
  background: linear-gradient(var(--ink) 80%, transparent);
  pointer-events: none;
}
.form-a [hidden] { display: none !important; }

.form-a__title, .form-a__section-title {
  margin: 0;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.12em;
  color: var(--cream);
}
/* Long text in the mono, normal case, a little larger, as the artist bio. */
.form-a__intro, .apply-success__body {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
}
.form-a__section { margin-top: 3.4rem; }
.form-a__section-title { margin-bottom: 0.4rem; }

/* Hidden from people, still there for bots to fill. */
.form-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- one field: label, line, help ---------- */

.form-field { display: flex; flex-direction: column; margin-top: 1.6rem; }
.form-field__label { color: var(--cream-dim); line-height: 1.5; transition: color 200ms var(--ease-out); }
.form-field:focus-within .form-field__label { color: var(--cream); }

.form-field__input, .form-field__textarea, .form-field__select {
  appearance: none;
  width: 100%;
  min-height: 44px;
  margin: 0.2rem 0 0;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--rule-mid);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  color-scheme: inherit;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.form-field__textarea { min-height: 7.5rem; resize: vertical; }
.form-field__input::placeholder, .form-field__textarea::placeholder { color: var(--cream-dim); opacity: 0.45; }
@media (hover: hover) {
  .form-field__input:hover, .form-field__textarea:hover, .form-field__select:hover { border-bottom-color: var(--rule-hi); }
}
/* Focus: the line turns full cream and doubles, and the label lights. This replaces the outline,
   which would draw a box around a field that has none. */
.form-field__input:focus-visible, .form-field__textarea:focus-visible, .form-field__select:focus-visible {
  outline: none;
  border-bottom-color: var(--cream);
  box-shadow: 0 1px 0 var(--cream);
}
.form-field__select { cursor: pointer; padding-right: 1.4rem; }
.form-field__select option { background: var(--ink); color: var(--cream); }
/* The select's arrow, drawn in the type rather than the browser's box. */
.form-field--select { position: relative; }
.form-field--select::after {
  content: "↓";
  position: absolute;
  right: 0;
  bottom: calc(22px - 0.75em);
  color: var(--cream-dim);
  pointer-events: none;
}

.apply-form__helper, .apply-form__counter {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream-dim);
}
.apply-form__counter { margin-top: 0.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.apply-form__counter.is-warn { color: var(--cream); }

/* An error sits under its own field, in plain words. */
.apply-form__error {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
}
.apply-form__error:empty { display: none; }

/* ---------- the file picker: a plain text button, the chosen file listed under it ---------- */

.dropzone { position: relative; margin-top: 0.2rem; border-bottom: 1px solid var(--rule-mid); }
/* The real file input lies over the button, so a click or a dropped file lands on it. */
.dropzone__input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.dropzone__hint {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--cream);
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  pointer-events: none;
  transition: text-decoration-color 200ms var(--ease-out), transform var(--release);
}
.dropzone__hint::after { content: " →"; }
@media (hover: hover) { .dropzone:hover .dropzone__hint { text-decoration-color: currentColor; } }
.dropzone:active .dropzone__hint { transform: scale(0.95); transition: transform var(--press); }
.dropzone.is-dragover .dropzone__hint { text-decoration-color: currentColor; }
.dropzone:has(.dropzone__input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }
.dropzone.has-error { border-bottom-color: var(--cream); }

.dropzone__filled {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.3rem;
}
.dropzone__filename {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
}
.dropzone__remove {
  appearance: none;
  flex: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--cream-dim);
  cursor: pointer;
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out), transform var(--release);
}
@media (hover: hover) { .dropzone__remove:hover { color: var(--cream); text-decoration-color: currentColor; } }
.dropzone__remove:active { transform: scale(0.95); transition: transform var(--press); }

/* ---------- sending ---------- */

.form-a__send { margin-top: 3.4rem; }
/* The submit button in the bar's look: a dark strip, a thin cream edge, cream small caps.
   Hover underlines and a press sinks it (.a-link in shell.css). */
.a-body .form-a__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--glass);
  color: var(--cream);
}
.form-a__submit:disabled { cursor: progress; opacity: 0.6; }
@media (hover: hover) { .a-body .form-a__submit:hover { border-color: var(--rule-hi); } }

.apply-form__progress { position: relative; height: 1px; margin-bottom: 1rem; overflow: hidden; background: var(--rule); }
.apply-form__progress-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--cream); transition: width 200ms var(--ease-out); }

/* The answer after sending fades in under the button, in plain words. */
@keyframes form-a-in { from { opacity: 0; transform: translateY(6px); } }
.apply-form__status, .booking-form__status { display: none; }
.apply-form__status.is-error, .booking-form__status.is-error, .booking-form__status.is-success {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
  animation: form-a-in 420ms var(--ease-out);
}

/* Booking: the call to artists under the button, and the direct contact after the form. */
.booking-apply-cta { margin: 1.6rem 0 0; line-height: 1.8; }
.booking-apply-cta a { padding: 0.75rem 0; }
.booking-sidebar__list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0 0; line-height: 1.8; }
.booking-sidebar__list span { overflow-wrap: anywhere; }

/* Aplicar after sending: the answer takes the form's place. */
.apply-success { margin-top: 3.4rem; animation: form-a-in 420ms var(--ease-out); }
.apply-success__mark { color: var(--cream); line-height: 1; margin-bottom: 0.8rem; }
.apply-success__title { margin: 0; font: inherit; font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--cream); }

/* ---------- phones and tablets ---------- */

@media (max-width: 959px) {
  .form-a { width: min(34rem, calc(100vw - 2.5rem)); padding-top: calc(var(--top-r) + 2rem); }
  .form-a::before { background: var(--ink); }
  .form-a__title { font-size: 0.9375rem; }
  /* 16px stops iPhone Safari zooming in on a field it focuses. */
  .form-field__input, .form-field__textarea, .form-field__select { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone:active .dropzone__hint, .dropzone__remove:active { transform: none; }
  .apply-form__progress-bar { transition: none; }
}

/* Test link only: the body already leaves room for the MODO PRUEBA bar and --top-r counts it, so
   the page takes the body's room back rather than counting the bar twice. */
.has-pb .form-a { margin-top: calc(-1 * var(--pb)); }