/* ============================================================
   book.css — the enquiry form at /book/.

   Everything shared with the rest of the site lives in home.css:
   the bar, the drawer, the footer, .pagehead, .btn. What is here
   is only the form itself.

   specs/10-web-enquiry-spec.md §2.2 is the behaviour this dresses.
   ============================================================ */

/* The head is shorter here than on a page somebody came to read.
   Nobody arrives at a form to admire the heading. */
.pagehead--book {
  padding-bottom: var(--sc-7);
}

.band--book {
  background: var(--sc-canvas);
  padding: var(--sc-8) 0 var(--sc-10);
}

.bookform {
  max-width: 44rem;
  display: grid;
  gap: var(--sc-7);
}

/* ---- one field ------------------------------------------- */

.field {
  display: grid;
  gap: var(--sc-2);
  /* Rows pack to the top rather than sharing out the spare height. Side by
     side, one field carries a hint under it and the other does not, and
     without this the shorter one stretches its input to match — two boxes
     of different heights on the same line. */
  align-content: start;
  /* A fieldset carries browser defaults that a div does not. */
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field > label,
.field > legend {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
  /* A legend sits in the border flow by default and ignores the grid gap. */
  padding: 0;
}

.field__opt {
  margin-left: var(--sc-2);
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

.field input,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: var(--sc-t-base);
  line-height: 1.5;
  color: var(--sc-ink);
  background: var(--sc-surface);
  /* Written out rather than var(--sc-hairline): a color-mix() substituted
     into the `border` shorthand is dropped at computed-value time, and the
     edge falls back to currentColor. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sc-r-md);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 3rem;
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.26);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 7%, var(--sc-surface));
}

.field__hint {
  margin: 0;
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  color: var(--sc-ink-soft);
}

/* ---- what is wrong with it -------------------------------- */

.field__err {
  margin: 0;
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  color: #FF8A8F;
}

/* Author rule setting `display` above would beat the user agent's
   [hidden] { display: none } at equal weight, so say it here. Every
   element on this page that is ever hidden needs a line in this list --
   `.bookform` most of all, because it carries `display: grid` and so
   stays on screen after `form.hidden = true`, leaving a sent form and a
   thank-you side by side. */
.bookform[hidden],
.field__err[hidden],
.bookform__fail[hidden],
.sent[hidden] {
  display: none;
}

.field.is-bad input,
.field.is-bad textarea {
  border-color: #FF8A8F;
}

/* ---- the three packages ----------------------------------- */

.plans {
  display: grid;
  gap: var(--sc-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.planpick {
  position: relative;
  display: block;
  cursor: pointer;
}

/* Kept in the page rather than display:none, so it stays focusable and
   still answers the keyboard. The ring is drawn on the body instead. */
.planpick input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
}

.planpick__body {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}

.planpick__body b {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
}

.planpick__body i {
  font-style: normal;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

.planpick:hover .planpick__body {
  border-color: rgba(255, 255, 255, 0.26);
}

.planpick input:checked + .planpick__body {
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 14%, var(--sc-surface));
}

.planpick input:focus-visible + .planpick__body {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

.field--plan.is-bad .planpick__body {
  border-color: #FF8A8F;
}

/* ---- send ------------------------------------------------- */

.bookform__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-4);
}

/* A disabled button that looks live is a page that has stopped
   responding. This one says so. */
.bookform__go .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.bookform__go .btn.is-sending {
  opacity: 0.6;
  cursor: progress;
}

.bookform__why {
  margin: 0;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

.bookform__why[hidden] { display: none; }

.bookform__fail {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: var(--sc-t-sm);
  line-height: 1.6;
  color: #FF8A8F;
  border: 1px solid #FF8A8F;
  border-radius: var(--sc-r-md);
  background: rgba(229, 72, 77, 0.1);
}

.bookform__small {
  margin: 0;
  font-size: var(--sc-t-xs);
  line-height: 1.6;
  color: var(--sc-ink-soft);
}

.bookform__small a { color: var(--sc-ink-soft); }

.bookform__off {
  max-width: 44rem;
  margin: 0;
  padding: 1rem 1.15rem;
  font-size: var(--sc-t-base);
  line-height: 1.6;
  color: var(--sc-ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
}

/* Scripts off: the form cannot validate, send, or report a failure,
   so it does not appear at all. The <noscript> above stands in. */
html:not(.js-ready) .bookform { display: none; }

/* ---- and afterwards --------------------------------------- */

.sent {
  max-width: 44rem;
  display: grid;
  justify-items: start;
  gap: var(--sc-4);
  padding: var(--sc-7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
}

.sent svg {
  width: 44px; height: 44px;
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sent h2 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-2xl);
  line-height: 1.1;
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
}

.sent p {
  margin: 0;
  font-size: var(--sc-t-base);
  line-height: 1.65;
  color: var(--sc-ink-soft);
}

/* ============================================================
   The two columns.

   A form alone on a wide dark page reads as an interrogation:
   all questions, nothing answering back, and a great deal of
   nothing to the right of it. The second column is what somebody
   halfway down the fields actually wants — what happens after
   they press send, and who they are sending it to.

   One column below 960px, and the answers move underneath rather
   than above: on a phone the form is what they came for.
   ============================================================ */

.book {
  display: grid;
  gap: var(--sc-8);
  align-items: start;
}

@media (min-width: 960px) {
  .book {
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
    gap: var(--sc-9);
  }
}

/* The form gets a ground of its own. Floating labels on the page
   colour look like a draft; a surface makes it a thing. */
.bookform {
  max-width: none;
  padding: var(--sc-7);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-surface) 62%, var(--sc-canvas));
}

@media (max-width: 560px) {
  /* Edge to edge on a phone. A 24px inset on a 360px screen costs
     two characters of every address line and buys nothing. */
  .bookform {
    padding: var(--sc-5) var(--sc-4);
  }
}

/* Name and phone are both short, and both are asked of everyone.
   Side by side they read as one question about the caller. */
.pair {
  display: grid;
  gap: var(--sc-7);
}

/* 700, not 560. Two fields will *fit* at 560 and still be wrong: a phone
   number and a name both want the full width of a phone, and halving it
   leaves each one showing about fifteen characters. */
@media (min-width: 700px) {
  .pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-5);
  }
}

/* ---- what happens next ------------------------------------ */

.booknext {
  display: grid;
  gap: var(--sc-5);
  padding: var(--sc-6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
}

@media (min-width: 960px) {
  /* Rides alongside the fields rather than scrolling away from
     them — it is reassurance, and reassurance is wanted late. */
  .booknext {
    position: sticky;
    top: calc(4.5rem + var(--sc-5));
  }
}

.booknext h2 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-lg);
  line-height: 1.15;
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sc-4);
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding-left: 2.35rem;
  font-size: var(--sc-t-sm);
  line-height: 1.6;
  color: var(--sc-ink-soft);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  color: var(--sc-accent);
  /* Literal rather than var(--sc-hairline-strong): a color-mix() inside
     the `border` shorthand is dropped at computed-value time. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.steps li b {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 600;
  color: var(--sc-ink);
}

.booknext__cred,
.booknext__alt {
  margin: 0;
  font-size: var(--sc-t-xs);
  line-height: 1.65;
  color: var(--sc-ink-soft);
}

.booknext__cred {
  padding-top: var(--sc-5);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.booknext__cred b { color: var(--sc-ink); }

.booknext__alt a { color: var(--sc-accent); }

/* Sent: the form is gone, so the panel beside it has nothing left
   to reassure anybody about -- and the thank-you takes the whole
   width rather than sitting in the narrow column the form left. */
.book.is-sent .booknext { display: none; }

.sent {
  max-width: 44rem;
  grid-column: 1 / -1;
}