/* Listing form — only loaded by /list-your-retreat.
   Built on the site's own tokens and the 8pt scale, so it inherits any change
   to the palette rather than carrying its own copy of it. Every gap and pad
   below is a multiple of 8; the 4px half-steps are inside a control only.
   Body text is the site's 18px — a form asking for fourteen answers is exactly
   where type must not shrink. */

.listing-form__note {
  font-size: 1rem;
  line-height: 1.5;
  padding: var(--s3, 24px);
  border-left: 4px solid var(--ocean, #2f6f7a);
  background: rgba(47, 111, 122, .06);
  margin-top: var(--s4, 32px);
}

.listing-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.listing-form__set {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s6, 48px);
}

.listing-form__set legend {
  font-family: Marcellus, Georgia, serif;
  font-size: 1.5rem;
  line-height: 32px;
  margin-bottom: var(--s3, 24px);
  padding: 0;
}

.field { margin-bottom: var(--s4, 32px); }

.field label {
  display: block;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 28px;
  margin-bottom: 4px;
}

.field .hint {
  font-size: 1rem;
  line-height: 24px;
  opacity: .78;
  margin: 0 0 8px;
  max-width: 60ch;
}

.hint--dates { margin-top: -16px; margin-bottom: var(--s4, 32px); }

.req {
  font-size: .8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .6;
  margin-left: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  box-sizing: border-box;          /* 1px borders measured to the outer edge */
  min-height: 48px;                /* on-grid, and clears the 44px touch floor */
  padding: 8px 16px;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 28px;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(27, 42, 46, .28);
  border-radius: 4px;
}

.field textarea { min-height: 128px; padding-top: 16px; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--ocean, #2f6f7a);
  outline-offset: 2px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b3261e; }

.field--dates,
.field--price {
  display: grid;
  gap: var(--s3, 24px);
  margin-bottom: var(--s4, 32px);
}
.field--dates { grid-template-columns: 1fr 1fr 96px; }
.field--price { grid-template-columns: 1fr 1fr; }

.field--dates label,
.field--price label { margin-bottom: 4px; }

.counter { font-variant-numeric: tabular-nums; opacity: .9; }
.counter--over { color: #b3261e; font-weight: 600; }

.listing-form__submit { margin-top: var(--s5, 40px); }
.listing-form__submit .hint { margin-top: var(--s2, 16px); max-width: 60ch; }
.listing-form__submit button[disabled] { opacity: .6; cursor: progress; }

.listing-form__result {
  margin-top: var(--s4, 32px);
  padding: var(--s3, 24px);
  border-radius: 4px;
  font-size: 1.0625rem;
  line-height: 28px;
}
.listing-form__result--ok   { background: rgba(47, 111, 122, .10); border-left: 4px solid var(--ocean, #2f6f7a); }
.listing-form__result--held { background: rgba(179, 138, 30, .12); border-left: 4px solid #b38a1e; }
.listing-form__result--bad  { background: rgba(179, 38, 30, .10);  border-left: 4px solid #b3261e; }

.listing-form__after { margin-top: var(--s3, 24px); padding-left: 24px; }
.listing-form__after li { margin-bottom: var(--s2, 16px); max-width: 64ch; line-height: 28px; }

/* One column on a phone. The nights box keeps its own row rather than being
   squeezed to a third of a narrow screen. */
@media (max-width: 640px) {
  .field--dates,
  .field--price { grid-template-columns: 1fr; }
}