/* Book a call (/book): the three steps beside the live call brief, and every outcome. The parts
   (chips, fields, the stepper, the summary, statuses, buttons) come from site.css; this file only
   composes them for this page. Without JavaScript the steps stack as one plain form and a fixed
   block says who leads each kind of work. */

.page-book {
  /* one portrait width for the brief: about 88 px at 1440, 155 px at 3840 */
  --face-w: clamp(4.5rem, 3rem + 2.8vw, 11rem);
}

/* ---------- Layout: the steps left, the brief right from the first line ---------- */

.book { padding-top: var(--sp-l); }
.book__main { grid-column: 1 / -1; gap: var(--sp-l); }
.book__aside { grid-column: 1 / -1; }

@media (min-width: 960px) {
  .book__main { grid-column: 1 / span 6; }
  .book__aside { grid-column: 8 / -1; }
}
@media (min-width: 1600px) {
  .book__main { grid-column: 1 / span 7; }
  .book__aside { grid-column: 9 / -1; }
}

.book__intro { display: grid; gap: var(--sp-s); }
/* the display step's leading is tighter than its font box; the lede clears the box, not only the ink */
.book__intro > h1 { margin-bottom: 0.14em; }
.book__flow { display: grid; gap: var(--sp-m); align-content: start; }
.book__email { color: var(--fg-muted); }
.book__email a { color: var(--fg); }

/* ---------- Progress: three seams; each closes as its part is done, the last on a sent brief ---------- */

.book__stepper > li { position: relative; }
.book__stepper > li::before,
.book__stepper > li[aria-current="step"]::before,
.book__stepper > li.is-done::before {
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat;
}
.book__stepper > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--paint);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-seat) var(--ease-out);
}
.book__stepper > li[aria-current="step"]::after { transform: scaleX(0.5); }
.book__stepper > li.is-done::after { transform: scaleX(1); }

/* ---------- Steps ---------- */

/* Steps hide only once book.js has set the form up, so a script that failed leaves the whole
   form usable as one plain form. */
.book__form.book-ready .book-step:not([data-current]) { display: none; }
.book__form:not(.book-ready) :is(.book__stepper, [data-next], [data-back]) { display: none; }
.book__form:not(.book-ready) .book__flow { gap: var(--sp-xl); }

/* question, then answers close below it, then the actions further away */
.book-step { gap: var(--sp-s); }
.book-step > legend { margin-bottom: var(--sp-s); }
.book-step > .step__actions { margin-top: var(--sp-s); }
.book-step__title { text-wrap: balance; }
.book-step__title:focus,
.book-done__title:focus,
.book-result:focus { outline: none; }
.book-step__body { display: grid; gap: var(--sp-s); align-content: start; }
.book-step__alert { justify-self: start; }

.book-chips { margin-top: 0; gap: clamp(0.5rem, 0.4rem + 0.3vw, 1rem); }
.book-chips .chip > span {
  min-height: clamp(2.75rem, 2.3rem + 1vw, 4.25rem);
  padding: 0.4em 0.95em 0.4em 0.75em;
  font-size: var(--fs-lead);
  line-height: 1.15;
}
.chip > input[aria-invalid="true"] + span { border-color: var(--error); }

.book-note { font-size: var(--fs-small); color: var(--fg-muted); max-width: 60ch; }
.book-note:empty { display: none; }
/* the live region stays in place for announcements, without its gap while it says nothing */
.book-note--live:has(> [hidden]) { margin-top: calc(-1 * var(--sp-s)); }

.book-notes__help { max-width: 60ch; }
.book-notes { min-height: 11em; }

.book-fields { row-gap: var(--sp-m); }
.book-fields .field__help,
.book-fields .field__error { max-width: 48ch; }
.book-modes { margin-top: 0.45em; }
.book-times { display: grid; gap: 0.45em; }
.book-times > legend { margin-bottom: 0.45em; }
.book-times__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-s) var(--gutter); margin-top: var(--sp-2xs); }
.book-times__label { font-weight: 400; }
.field__error:empty { display: none; }
/* While a text field shows its error, the error carries the hint (some repeat it word for word).
   The helper stays in the field's description for screen readers. */
.book-fields > div.field:has(> .field__error:not(:empty)) > .field__help { display: none; }

/* The honeypot: off screen for everyone, never focusable by tabbing */
.book-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.book-send { column-gap: var(--sp-m); }
.book-send__note { flex: 1 1 24ch; min-width: 0; max-width: 52ch; font-size: var(--fs-small); color: var(--fg-muted); }
.book-send__note a { color: var(--fg); }

/* After a failed send, emailing it becomes the one filled action; Send steps back to a line. */
.book-step.is-failed [data-send] { --button-bg: transparent; --button-fg: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.book-step.is-failed [data-send]::before { opacity: 0; }
.book-step.is-failed [data-send]:hover { --button-bg: var(--surface); --button-bg-hover: var(--surface); --button-bg-press: var(--surface); }
.button:disabled[data-send] { opacity: 0.6; cursor: progress; }

/* ---------- Outcomes ---------- */

.book-fail {
  display: grid;
  gap: var(--sp-s);
  justify-items: start;
  padding: var(--sp-s) var(--sp-m) var(--sp-m);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--error) 5%, var(--input-bg));
}
.book-fail__message { display: grid; gap: 0.35em; }
.book-fail__lead { color: var(--error); font-weight: 500; }
.book-fail__last { font-size: var(--fs-small); color: var(--fg-muted); }
.book-fail__last a { color: var(--fg); }

.book-done { display: grid; gap: var(--sp-m); justify-items: start; padding-top: var(--sp-xs); }
.book-done__title { max-width: 16ch; }
.book-done__body { max-width: 40ch; }
.book-done__help { margin-top: calc(var(--sp-xs) - var(--sp-m)); }

.book-result {
  display: none;
  gap: var(--sp-xs);
  padding: var(--sp-s) var(--sp-m) var(--sp-m);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--input-bg));
}
.book-result--error { color: var(--error); background: color-mix(in srgb, var(--error) 5%, var(--input-bg)); }
.book-result:target,
.book-result.is-shown { display: grid; }
.book-result__title {
  font-size: var(--fs-lead);
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
.book-result p { color: var(--fg); }
.book-result__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2xs) var(--sp-m); }

/* ---------- Actions that are not the primary one: ink underlines ---------- */

.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-m); }
.book-textbutton {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.book-textbutton:hover { text-decoration-thickness: 2px; }
.book-textbutton:active { transform: scale(0.97); }
.book-help { font-size: var(--fs-small); color: var(--fg-muted); }

/* Copy holds the width of its longer label, so "Copied" never moves its neighbours. */
.book-copy { display: inline-grid; align-items: center; justify-items: start; }
.button.book-copy { justify-items: center; }
.book-copy > span { grid-area: 1 / 1; }
.book-copy > [data-label-done],
.book-copy.is-done > [data-label] { visibility: hidden; }
.book-copy.is-done > [data-label-done] { visibility: visible; }

.book-copyfail { display: grid; gap: var(--sp-2xs); }
.book-copyfail__text { min-height: 12em; font-size: var(--fs-small); }

/* ---------- The call brief ---------- */

.book__form:not(.book-ready) .book-brief { display: none; }
.book-brief {
  container-type: inline-size;
  top: var(--sp-s);
  gap: var(--sp-m);
  padding: clamp(1.25rem, 0.8rem + 1.3vw, 3.25rem);
}
.book-brief__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2xs) var(--sp-s); }
.book-brief__title {
  font-size: var(--fs-lead);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.book-brief__status { font-weight: 500; color: var(--success); }
.book-brief__label { font-size: var(--fs-small); font-weight: 500; line-height: 1.35; color: var(--fg-muted); }

.book-people { display: grid; gap: var(--sp-s); }
.book-people__empty { display: grid; grid-template-columns: var(--face-w) minmax(0, 1fr); gap: var(--sp-s); align-items: center; }
.book-people__empty p { color: var(--fg-muted); }
/* The empty portrait slot: an outline on the dotted lattice, the plan of a picture not yet made */
.book-wire {
  display: block;
  aspect-ratio: 4 / 5;
  border: 1px solid color-mix(in srgb, var(--fg) 55%, var(--surface));
  background: radial-gradient(circle, color-mix(in srgb, var(--fg) 30%, var(--surface)) 0 1px, transparent 1.5px) center / 0.75rem 0.75rem;
}
.book-people__list { list-style: none; padding: 0; display: grid; gap: var(--sp-s); }
.book-person { display: grid; grid-template-columns: var(--face-w) minmax(0, 1fr); column-gap: var(--sp-s); align-items: start; }
.book-person__face,
.book-onthecall__face > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--graphite);
  clip-path: inset(0);
  transition: clip-path 560ms var(--ease-out);
}
.is-arriving > .book-person__face,
.book-onthecall__face.is-arriving > img { clip-path: inset(0 0 100% 0); }
.book-person__text { display: grid; gap: 0.2em; align-content: start; }
.book-person__name {
  font-size: var(--fs-body);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1.2;
  letter-spacing: -0.006em;
}
.book-person__role { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.book-person__credit { margin-top: 0.35em; font-size: var(--fs-small); line-height: 1.45; max-width: 46ch; }
.book-people__lines { display: grid; gap: 0.3em; }
.book-people__lines:empty { display: none; }

/* the brief body: the pieces the chosen needs name, seated; the rest in plan on the lattice */
.book-brief__body { padding-bottom: var(--sp-xs); border-bottom: 1px solid var(--line); }
.book-brief__body .dw { display: block; width: 100%; height: auto; max-height: min(30vh, 22rem); }

/* the last row's own padding is the space above the actions, as between rows */
.book-brief__list { display: grid; margin-bottom: calc(-1 * var(--sp-m)); }
.book-brief__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-s);
  row-gap: 0.2em;
  padding-block: var(--sp-xs);
  border-top: 1px solid var(--line);
}
.book-brief__row > dt { grid-column: 1; grid-row: 1; }
.book-brief__value { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
.book-brief__value.is-empty { color: var(--fg-muted); }
.book-brief__value > p + p { margin-top: 0.45em; }
.book-brief__change { grid-column: 2; grid-row: 1; justify-self: end; }
.book-brief__notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  white-space: pre-line;
}
.book-change {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
/* a finger-sized target around a small word */
.book-change::after { content: ""; position: absolute; inset: -0.8rem -0.6rem; }
.book-change:hover { text-decoration-thickness: 2px; }

@container (min-width: 36rem) {
  /* a fixed share for the label, so every row's value starts on one line whether or not it has Change */
  .book-brief__row { grid-template-columns: minmax(7.5rem, 26%) minmax(0, 1fr) auto; }
  .book-brief__value { grid-column: 2; grid-row: 1; }
  .book-brief__change { grid-column: 3; }
}

.book-brief__actions { display: grid; gap: 0.15em; padding-top: var(--sp-2xs); border-top: 1px solid var(--line); }
.book__form.is-sent .book-brief__actions,
.book__form.is-failed .book-brief__actions { display: none; }

/* ---------- Without JavaScript: who leads what, in place of the live brief ---------- */

.book__form.book-ready .book-static { display: none; }
.book-static {
  position: sticky;
  top: var(--sp-s);
  display: grid;
  gap: var(--sp-s);
  padding: clamp(1.25rem, 0.8rem + 1.3vw, 3.25rem);
  background: var(--surface);
}
.book-static__title {
  font-size: var(--fs-lead);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.book-static__list { display: grid; }
.book-static__row { display: grid; gap: 0.5em; padding-block: var(--sp-xs); border-top: 1px solid var(--line); }
.book-static__row dt { font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); }
.book-static__row dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-s); font-weight: 500; }
.book-static__faces { display: flex; gap: 0.35rem; }
.book-static__faces img { width: clamp(3rem, 2.2rem + 1.6vw, 6.5rem); aspect-ratio: 4 / 5; object-fit: cover; background: var(--graphite); }

/* ---------- Stacked: the brief sits below the steps, so step one shows the faces itself ---------- */

.book-onthecall { display: none; }
@media (max-width: 959px) {
  .book-brief,
  .book-static { position: static; }
  /* one face sits beside its line; with more people the lines drop below the faces */
  .book-onthecall:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs) var(--sp-s);
    padding: var(--sp-xs);
    background: var(--surface);
  }
  .book-onthecall__faces { flex: none; list-style: none; padding: 0; display: flex; gap: 0.35rem; }
  .book-onthecall__face { width: 3.25rem; }
  .book-onthecall__lines { flex: 1 1 13rem; min-width: 0; display: grid; gap: 0.25em; font-size: var(--fs-small); }
}

@media (max-width: 719px) {
  .book-chips { flex-direction: column; align-items: stretch; }
  .book-chips .chip,
  .book-chips .chip > span { width: 100%; }
  .book-times__pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Book a call additions (moved from v3.css) ---------- */

.book-step__part { font-size: var(--fs-small); color: var(--fg-muted); margin-top: calc(-0.4 * var(--sp-xs)); }
.book-plannote { display: grid; gap: 0.2em; }
.book-plannote__label { font-weight: 500; color: var(--fg); }