/* ==================================================================
   book.css — intro call request page

   This page borrows the home page's structural language rather than
   inventing its own: separation by space rather than rules, corners at
   the site's --radius--small (which reads as square), and the display
   face for the heading at section scale.

   Everything is set in the primary face. Times and counts line up on
   font-variant-numeric: tabular-nums, which is what monospace was
   being used for here, without the monospace.
   ================================================================== */

:root {
  --bk-rule: color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 14%, transparent);
  --bk-rule-soft: color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 8%, transparent);
  --bk-surface: color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 4%, transparent);
  --bk-surface-hi: color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 9%, transparent);
  --bk-dim: var(--swatch--black-50, #938f8a);
  --bk-err: #ff8a7a;
  --bk-ease: cubic-bezier(.22, 1, .36, 1);
  --bk-radius: var(--radius--small, .15rem);
}

body {
  margin: 0;
  background: var(--swatch--black-400, #080807);
  color: var(--swatch--beige-100, #e8e8e3);
  min-height: 100svh;
}
fieldset { border: 0; margin: 0; padding: 0; }
dl, dd, h1, p { margin: 0; }

/* The shared navbar is fixed and transparent.
   That is right on the home page, where it floats over a photograph
   and nothing ever scrolls into it. It is wrong here: this page is
   text on a dark ground, and as soon as it scrolls, the heading runs
   straight through the wordmark and the button. Both are still there
   and both are unreadable, which looks like a rendering fault rather
   than a layout that has not been told about this page.
   Opaque for its own height, then a short fade, so nothing passes under
   it visibly and there is no hard edge across the page. This file is
   loaded by book.html alone, so the home page keeps its float. */
.navbar_wrap {
  background: linear-gradient(
    to bottom,
    var(--swatch--black-400, #080807) 0%,
    var(--swatch--black-400, #080807) 72%,
    transparent 100%);
  padding-bottom: calc(var(--site--margin) + 1.25rem);
}

/* the shared navbar is fixed; give the content room to clear it */
.bk {
  position: relative;
  padding: clamp(7rem, 16vh, 11rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

/* --- layout ------------------------------------------------------ */
.bk__grid {
  position: relative;
  width: min(74rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}

/* --- aside ------------------------------------------------------- */
.bk__aside { padding-right: clamp(0rem, 2vw, 2rem); }

.bk__kicker {
  color: var(--bk-dim);
  margin-bottom: clamp(1.1rem, 3vh, 1.8rem);
}

/* section-scale display type, matching the home page's headings */
.bk__title {
  font-family: var(--_typography---font--secondary-family, sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.bk__lede {
  margin-top: 1.3rem;
  max-width: 38ch;
  color: var(--swatch--beige-400, #bfbfb1);
}

/* the meta list is spaced, not ruled — the home page separates with air */
/* the one line that sits above the form, in place of the table */
.bk__quick { margin-top: clamp(1.25rem, 3vh, 1.75rem); }
.bk__quick-dim { color: var(--bk-dim); }

/* and the particulars, now below the form rather than in front of it */
.bk__meta {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  display: grid;
  gap: 1.15rem;
}
.bk__meta > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
}
.bk__meta dt { color: var(--bk-dim); }
.bk__meta dd { margin: 0; }
.bk__meta [data-clock] { font-variant-numeric: tabular-nums; }

.bk__note {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  color: var(--bk-dim);
  max-width: 40ch;
}

/* --- form -------------------------------------------------------- */
.bk__form { padding: 0; }

.bk__field { margin-bottom: 2.1rem; }
/* a step heading with nothing under it: the fields it introduces follow */
.bk__field--head { margin-bottom: .9rem; }
/* The step heading is a row: number, then the label, then whatever hint
   belongs to it pushed to the far end. Without the gap and the auto
   margin the hint sits hard against the last letter and reads as part
   of the label: "Pick a timeGMT+1", which is the same fault as the day
   rows had, one line further down the page. */
.bk__label:has(.bk__step) { display: flex; align-items: center; gap: .5rem; }
.bk__label:has(.bk__step) .bk__hint { margin: 0 0 0 auto; }
.bk__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: 2.1rem;
}
.bk__row .bk__field { margin-bottom: 0; }

/*
 * beige-100, not beige-200.
 *
 * The two are a shade apart here and the difference was never visible,
 * but they are not the same thing: -100 is the type colour and -200 is
 * a pale surface. A label is type.
 */
.bk__label {
  display: block;
  color: var(--swatch--beige-100, #e8e8e3);
  margin-bottom: .7rem;
}
.bk__hint { display: block; margin-top: .25rem; color: var(--bk-dim); }
.bk__hint b { color: var(--swatch--beige-100, #e8e8e3); font-weight: 600; }

input[type=text], input[type=email], input[type=date], textarea {
  width: 100%;
  padding: .8rem .9rem;
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-size: .95rem;
  color: var(--swatch--beige-100, #e8e8e3);
  background: var(--bk-surface);
  border: 0;
  border-radius: var(--bk-radius);
  transition: background .22s ease, box-shadow .22s ease;
}
input[type=date] { font-variant-numeric: tabular-nums; color-scheme: dark; }
input:focus, textarea:focus {
  outline: none;
  background: var(--bk-surface-hi);
  box-shadow: inset 0 -1px 0 0 var(--swatch--beige-100, #e8e8e3);
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
::placeholder { color: var(--bk-dim); opacity: 1; }
[aria-invalid="true"] { box-shadow: inset 0 -1px 0 0 var(--bk-err); }

/* chips + slots: square, the way every other control on the site is */
.bk__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.bk__chip input, .bk__slot input, .bk__day input, .bk__way input {
  position: absolute; opacity: 0; pointer-events: none;
}

/* --- the telephone ------------------------------------------------
   A picker and a field. The picker is narrow now that it shows a flag
   and a code rather than a country name, which leaves the number the
   room it needs: eleven digits and their spacing is the longer of the
   two things on this row.

   The control is two elements stacked. A native select shows the text
   of whichever option is chosen and offers no way to show something
   shorter, so the face is drawn underneath and the select sits over it
   at zero opacity. It is still a real select: a phone opens its own
   full-screen picker, a keyboard tabs to it and types to search, and
   the option list carries every country's name. */
.bk__tel { display: grid; grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr); gap: .4rem; }
.bk__dial { position: relative; display: block; }
.bk__dial-face {
  display: flex;
  align-items: center;
  gap: .35rem;
  height: 100%;
  padding: .8rem .7rem;
  box-sizing: border-box;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--swatch--beige-100, #e8e8e3);
  background: var(--bk-surface);
  border-radius: var(--bk-radius);
  transition: background .22s ease;
}
.bk__dial-sel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  /* the option list is the browser's, drawn in its own colours */
  color-scheme: dark;
}
.bk__dial:hover .bk__dial-face { background: var(--bk-surface-hi); }
.bk__dial-sel:focus-visible + .bk__dial-face,
.bk__dial:has(.bk__dial-sel:focus-visible) .bk__dial-face {
  background: var(--bk-surface-hi);
  outline: 2px solid var(--swatch--beige-300, #d1d1c7);
  outline-offset: 2px;
}
.bk__tel input { font-variant-numeric: tabular-nums; }

/* --- how the call happens -----------------------------------------
   Two lines to a card: the name of the thing, and what will follow from
   picking it. "I send a link" against "I call you" is the whole
   difference, and it is what tells somebody whether they are about to
   be asked for a number. */
.bk__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .4rem; }
.bk__way { display: block; }
.bk__way-in {
  display: grid;
  gap: .2rem;
  cursor: pointer;
  padding: .85rem 1rem;
  min-height: 3.4rem;
  align-content: center;
  box-sizing: border-box;
  background: var(--bk-surface);
  border-radius: var(--bk-radius);
  transition: background .22s ease, color .22s ease;
}
.bk__way-name { line-height: 1.2; }
.bk__way-note { color: var(--bk-dim); font-size: .76rem; }
.bk__way-in:hover { background: var(--bk-surface-hi); }
.bk__way input:checked + .bk__way-in {
  background: var(--swatch--beige-100, #e8e8e3);
  color: var(--swatch--black-400, #080807);
}
.bk__way input:checked + .bk__way-in .bk__way-note { color: inherit; opacity: .65; }
.bk__way input:focus-visible + .bk__way-in {
  outline: 2px solid var(--swatch--beige-300, #d1d1c7); outline-offset: 2px;
}

/* --- picking a day ------------------------------------------------
   These classes were written into book.js and never into here, so the
   day picker rendered with no rules at all: the date and the count ran
   together into "Mon, Sep 76 times", and every row was a bare block
   with nothing to say it could be tapped.

   A row rather than a chip, because on a phone a full width target is
   easier to hit and the count has somewhere to sit. Tall enough to be a
   comfortable touch target on its own. */
.bk__days { display: grid; gap: .4rem; }

/* "This week", "Next week". The rows carry the date; this carries the
   thing a date alone cannot say, which is how far off it is. */
.bk__week {
  color: var(--bk-dim);
  margin: .85rem 0 .15rem;
}
.bk__week:first-child { margin-top: 0; }
.bk__day { display: block; }
.bk__day-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  padding: .95rem 1.15rem;
  min-height: 3rem;
  box-sizing: border-box;
  background: var(--bk-surface);
  border-radius: var(--bk-radius);
  transition: background .22s ease, color .22s ease;
}
.bk__day-when { font-variant-numeric: tabular-nums; }
.bk__day-n {
  color: var(--bk-dim);
  font-size: .78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bk__day-in:hover { background: var(--bk-surface-hi); }
.bk__day input:checked + .bk__day-in {
  background: var(--swatch--beige-100, #e8e8e3);
  color: var(--swatch--black-400, #080807);
}
/* the dim grey that reads as secondary on the dark row is invisible on
   the pale one, so the count borrows the row's own colour instead */
.bk__day input:checked + .bk__day-in .bk__day-n { color: inherit; opacity: .65; }
.bk__day input:focus-visible + .bk__day-in {
  outline: 2px solid var(--swatch--beige-300, #d1d1c7); outline-offset: 2px;
}

/* --- the three steps ----------------------------------------------
   A booking is one date, one time, then who you are. Numbering them is
   the cheapest way to say that: a person can see how far in they are
   and how much is left without reading anything. */
.bk__step {
  display: inline-grid;
  place-items: center;
  width: 1.45rem; height: 1.45rem;
  margin-right: .6rem;
  border-radius: 50%;
  background: var(--bk-surface-hi);
  color: var(--swatch--beige-100, #e8e8e3);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.bk__field[data-done] .bk__step {
  background: var(--swatch--beige-100, #e8e8e3);
  color: var(--swatch--black-400, #080807);
}
.bk__chip span, .bk__slot span {
  display: block;
  cursor: pointer;
  background: var(--bk-surface);
  border-radius: var(--bk-radius);
  transition: background .22s ease, color .22s ease, opacity .22s ease;
}
.bk__chip span { padding: .6rem 1.15rem; }
/* Three across on a phone rather than four. At 5.2rem the chips were
   narrow enough that "10:00" nearly touched both edges, which reads as
   cramped rather than as tidy, and they were shorter than a fingertip. */
.bk__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }
.bk__slot span {
  text-align: center;
  padding: .9rem .4rem;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.bk__chip span:hover, .bk__slot span:hover { background: var(--bk-surface-hi); }
.bk__chip input:checked + span,
.bk__slot input:checked + span {
  background: var(--swatch--beige-100, #e8e8e3);
  color: var(--swatch--black-400, #080807);
}
.bk__chip input:focus-visible + span,
.bk__slot input:focus-visible + span { outline: 2px solid var(--swatch--beige-300, #d1d1c7); outline-offset: 2px; }
.bk__slot input:disabled + span { opacity: .3; cursor: not-allowed; }

/* step two before a day has been picked: present, empty, and plainly
   waiting rather than absent */
.bk__waiting { color: var(--bk-dim); grid-column: 1 / -1; margin: 0; padding: .35rem 0; }

/* "four more" under a trimmed day. It carried the studio's st-link
   class, and the studio's stylesheet is not loaded on this page, so it
   rendered as a raw grey browser button in the middle of the times. */
.bk__more {
  grid-column: 1 / -1;
  justify-self: start;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: .5rem 0;
  font: inherit;
  font-size: .85rem;
  color: var(--bk-dim);
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.bk__more:hover { color: var(--swatch--beige-100, #e8e8e3); }

/* The screen after the request goes through. It replaces the whole form,
   so it is the last thing anybody sees here, and it had no rules at all
   beyond the type scale. */
.bk__done {
  background: var(--bk-surface);
  border-radius: var(--bk-radius);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  display: grid;
  gap: 1rem;
}
.bk__done-when { text-wrap: balance; }
.bk__done-list { display: grid; gap: .9rem; margin: .4rem 0 0; }
.bk__done-list > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.bk__done-list dt { color: var(--bk-dim); }
.bk__done-list dd { margin: 0; max-width: 46ch; }
.bk__done-foot { color: var(--bk-dim); max-width: 46ch; }
@media (max-width: 30rem) {
  .bk__done-list > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* character meter */
.bk__meter { display: flex; justify-content: flex-end; margin-top: .45rem; }
.bk__meter span {
  color: var(--bk-dim);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.bk__meter[data-state="over"] span { color: var(--bk-err); }

/* --- actions + the one animated line ----------------------------- */
.bk__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.bk__submit { border: 0; cursor: pointer; font: inherit; }
.bk__submit[disabled] { opacity: .55; cursor: not-allowed; }

/* the same vertical swap the statement rotator uses */
.bk__say {
  display: block;
  overflow: hidden;
  height: 1.5em;
  min-width: 1px;
  color: var(--swatch--beige-300, #d1d1c7);
}
.bk__say_item {
  display: block;
  line-height: 1.5em;
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 420ms ease, transform 620ms var(--bk-ease);
}
.bk__say_item[data-in] { opacity: 1; transform: translateY(0); }
.bk__say_item[data-out] { opacity: 0; transform: translateY(-0.9em); }
.bk__say[data-state="err"] .bk__say_item { color: var(--bk-err); }
.bk__say[data-state="ok"] .bk__say_item { color: var(--swatch--beige-100, #e8e8e3); }

.bk__alt { margin-top: 1.4rem; color: var(--bk-dim); }
.bk__alt a { color: inherit; box-shadow: 0 1px 0 0 currentColor; }
.bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .bk__grid { grid-template-columns: 1fr; }
  .bk__aside { padding-right: 0; }

  /* On a phone the heading was three lines at section scale and the
     first choice sat a full screen below it: a page of reading before
     anything to do. The words are unchanged, the type is smaller, and
     "Pick a day" comes up where somebody can reach it. */
  .bk__title { font-size: clamp(1.85rem, 7.5vw, 2.4rem); line-height: 1.06; }
  .bk__lede { font-size: 1rem; line-height: 1.45; }
  .bk__quick { font-size: .95rem; }
  .bk__meta > div { grid-template-columns: 1fr; gap: .15rem; }
  .bk__row { grid-template-columns: 1fr; gap: 1.4rem; }
  .bk__row .bk__field:first-child { margin-bottom: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk__say_item, .bk__chip span, .bk__slot span, input, textarea { transition: none; }
}