/* Booking flow.
   Loaded only on the booking page.

   [hidden] MUST win over every display rule in this file.

   The UA sheet sets `[hidden] { display: none }` at specificity 0,1,0 — the
   same as a single class — so a later rule like `.bk-summary__row { display:
   flex }` beats it on source order alone. The live bug: the Total row on the
   confirmation carried hidden="true" and still rendered, so an enquiry with no
   price showed an empty "TOTAL" line. Caught on screen; the DOM reported
   `hidden: true` and `display: flex` in the same breath.

   Declared first so it is never accidentally re-overridden, and with
   !important because several components here set display on the same element.

   Every value here is a token from tokens.css. The design language is the one
   the rest of the site already speaks: no radius, no shadow, hairlines at
   --ink-14, brass for the chosen thing, deep green for the committed thing,
   uppercase 0.2em tracking on anything that behaves like a label.

   New components are named bk-* so they cannot collide with the existing
   vocabulary; existing components (.field, .btn, .eyebrow) are reused rather
   than re-implemented. */

[hidden] { display: none !important; }

/* ---------------------------------------------------------- step dots ---- */

.bk-steps {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 0 clamp(32px, 4vh, 54px);
  padding: 0;
  flex-wrap: wrap;
}

.bk-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-end: 14px;
}

/* The connector. A hairline between items, not after the last one. */
.bk-steps__item:not(:last-child)::after {
  content: "";
  display: block;
  width: clamp(18px, 3vw, 34px);
  height: 1px;
  background: var(--ink-14);
  margin-inline-start: 4px;
}

.bk-steps__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink-30);
  border-radius: 50%;   /* the one circle in the design: a step marker reads as a bead */
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1;
  color: var(--ink-60);
  transition: background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              color var(--t-hover) ease;
}

.bk-steps__label {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
}

.bk-steps__item.is-current .bk-steps__n {
  background: var(--green);
  border-color: var(--green);
  color: var(--ivory);
}
.bk-steps__item.is-current .bk-steps__label { color: var(--green); }

.bk-steps__item.is-done .bk-steps__n {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ivory);
}
.bk-steps__item.is-done .bk-steps__label { color: var(--ink-72); }

/* ------------------------------------------------------------- layout ---- */

.bk { display: block; }

/* Each step is a section the script shows and hides. `min-width: 0` matters:
   these contain grids whose children would otherwise refuse to shrink below
   their content and push the page sideways. */
.bk__step { display: block; min-width: 0; }

.bk__h { margin: 0 0 18px; max-width: 18ch; }
/* The heading takes focus on a step change; it is not an interactive control,
   so the ring would read as a button. The step change is already obvious. */
.bk__h:focus { outline: none; }

.bk__sub {
  font-family: var(--display);
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.1;
  color: var(--green);
  margin: clamp(34px, 4.5vh, 56px) 0 18px;
}

.bk__note { margin: 0 0 26px; max-width: 54ch; }

.bk__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.bk__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 4vh, 52px);
  padding-top: clamp(24px, 3vh, 36px);
  border-top: 1px solid var(--ink-14);
}

/* A disabled Continue has to look disabled as well as be disabled, or the
   visitor presses it repeatedly wondering why nothing happens. */
.bk__nav .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-position: 100% 0;
}

.bk__status {
  margin: 20px 0 0;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.6;
  max-width: 46ch;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--ink-16);
  color: var(--ink-72);
}
.bk__status:empty { display: none; }
.bk__status.is-busy  { color: var(--ink-60); border-inline-start-color: var(--brass); }
.bk__status.is-error { color: var(--error);  border-inline-start-color: var(--error); }

/* -------------------------------------------------------------- cards ---- */

.bk-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.bk-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-cards--pay   { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }

.bk-card { display: block; cursor: pointer; }

/* The radio stays in the DOM and keeps its focus behaviour — it is only moved
   out of sight. display:none would take the whole group out of the tab order
   and break arrow-key navigation between radios. */
.bk-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bk-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 22px 20px;
  border: 1px solid var(--ink-16);
  background: transparent;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}

.bk-card:hover .bk-card__body { border-color: var(--ink-40); }

.bk-card.is-on .bk-card__body {
  border-color: var(--brass);
  background: rgba(138, 115, 80, 0.05);
}

/* The focus ring goes on the visible face, since the real input is off-screen.
   Matches the site's ring: 1px brass at 2px offset. */
.bk-card__input:focus-visible + .bk-card__body {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

.bk-card__n {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.22em;
  color: var(--brass-deep);
}

.bk-card__title {
  font-family: var(--display);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--green);
}

.bk-card__meta {
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-66);
}

.bk-card__len,
.bk-card__price {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.bk-card__price:empty { display: none; }
.bk-card.is-on .bk-card__price { color: var(--brass-deep); }

/*
 * A format card carries BOTH a length and a price. Both rules above set
 * `margin-top: auto`, which on a flex column pushes each to the bottom and
 * makes the pair fight for the same edge — the gap lands above the length
 * instead of above the group. Only the first of the pair should push.
 */
.bk-card__len + .bk-card__price {
  margin-top: 0;
  padding-top: 4px;
}

/*
 * The fee is the number being compared across cards, so it carries more weight
 * than the length beside it. Still the meta size — this row is not a headline —
 * but in the ink the rest of the page gives to a figure that matters.
 */
.bk-card__price {
  font-weight: 400;
  color: var(--ink-72);
}


/* ---------------------------------------------------------------- days --- */

.bk-days {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 30px;
  /* Momentum scrolling on iOS, and a snap so a half-day never sits at the edge */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  /* A hairline scrollbar in the palette rather than the browser's default,
     which rendered as a heavy grey slab across a design that has no other
     chrome anywhere. Firefox first, then the WebKit pseudo-elements. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-25) transparent;
}

.bk-days::-webkit-scrollbar { height: 3px; }
.bk-days::-webkit-scrollbar-track { background: var(--ink-12); }
.bk-days::-webkit-scrollbar-thumb { background: var(--ink-30); border-radius: 0; }
.bk-days:hover::-webkit-scrollbar-thumb { background: var(--brass); }

.bk-day {
  flex: 0 0 78px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 6px 14px;
  border: 1px solid var(--ink-16);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-family: var(--ui);
  transition: border-color var(--t-hover) ease,
              background-color var(--t-hover) ease,
              color var(--t-hover) ease;
}

.bk-day:hover:not(:disabled) { border-color: var(--ink-40); }
.bk-day:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

.bk-day__wd {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.bk-day__n {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 300;
  line-height: 1.05;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.bk-day__mo {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.bk-day.is-on {
  background: var(--green);
  border-color: var(--green);
}
.bk-day.is-on .bk-day__wd,
.bk-day.is-on .bk-day__n,
.bk-day.is-on .bk-day__mo { color: var(--ivory); }

/* Closed days stay visible so the weekend reads as closed rather than as
   dates that are mysteriously absent. */
.bk-day.is-closed,
.bk-day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- slots --- */

.bk-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 56px;
  align-items: flex-start;
}

.bk-slots__empty {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--ink-60);
  padding: 14px 0;
}

.bk-slot {
  padding: 14px 26px;
  border: 1px solid var(--ink-25);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-family: var(--ui);
  font-size: var(--body);
  font-weight: 300;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-hover) ease,
              background-color var(--t-hover) ease,
              color var(--t-hover) ease;
}

.bk-slot:hover:not(:disabled) { border-color: var(--brass); }
.bk-slot:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

.bk-slot.is-on {
  background: var(--green);
  border-color: var(--green);
  color: var(--ivory);
}

/* A taken slot keeps a faint border.
   The handoff says `border-color: transparent`, which was right in a mock-up
   with one taken slot — but on a busy day three of five slots vanish into the
   ground and the row reads as ragged floating text rather than a set of
   buttons, two of which happen to be unavailable. The strike-through and the
   muted ink already carry the state; the hairline just keeps the rhythm. */
.bk-slot.is-taken,
.bk-slot:disabled {
  border-color: var(--ink-12);
  color: rgba(27, 42, 38, 0.35);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- grid --- */

.bk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 40px;
}
.bk-grid .field--wide { grid-column: 1 / -1; }

.field__opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-60);
  font-size: 0.92em;
}

/* --------------------------------------------------------------- chips --- */

.bk-chipset { border: 0; margin: 0; padding: 0; min-width: 0; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.bk-chip { display: block; cursor: pointer; }

.bk-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bk-chip__face {
  display: block;
  padding: 11px 20px;
  border: 1px solid var(--ink-25);
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--green);
  transition: border-color var(--t-hover) ease,
              background-color var(--t-hover) ease,
              color var(--t-hover) ease;
}

.bk-chip:hover .bk-chip__face { border-color: var(--brass); }

.bk-chip.is-on .bk-chip__face {
  background: var(--green);
  border-color: var(--green);
  color: var(--ivory);
}

.bk-chip__input:focus-visible + .bk-chip__face {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- couples --- */

.bk-couples {
  margin-top: clamp(34px, 4.5vh, 54px);
  padding: 30px 28px 32px;
  border: 1px solid rgba(138, 115, 80, 0.5);
  background: rgba(138, 115, 80, 0.06);
  min-width: 0;
}

.bk-couples__legend { padding: 0 8px; margin-inline-start: -8px; }

/*
 * The legend straddles the fieldset's top border, so the border passes
 * BETWEEN the eyebrow and this title — the fieldset's own padding-top sits
 * below the legend and does nothing to separate them. Without a margin here
 * the display face lands on the rule and its descenders ("q", "y") touch it.
 */
.bk-couples__title {
  display: block;
  margin-top: 18px;
  font-family: var(--display);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--green);
}

/* --------------------------------------------------------------- pay ----- */

.bk-pay {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* The left column of the payment step. Without min-width:0 a long InstaPay
   handle in the deep-green panel would force the 1.15fr column wider than its
   share and squeeze the summary. */
.bk-pay__main { min-width: 0; }

.bk-send {
  margin-top: 26px;
  padding: 28px 26px;
  background: var(--green);
}

.bk-send__label {
  margin: 0 0 8px;
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-55);
}

.bk-send__to {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--brass-light);
  word-break: break-word;
}

.bk-send__note {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  line-height: 1.7;
  color: var(--paper-80);
}

.bk-send__rule { border: 0; border-top: 1px solid var(--paper-14); margin: 18px 0; }

.bk-send__hold {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--paper-70);
}

.bk-upload { margin-top: 30px; }

.bk-drop {
  display: block;
  margin-top: 10px;
  padding: 30px 24px;
  border: 1px dashed rgba(27, 42, 38, 0.36);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}

.bk-drop:hover,
.bk-drop.is-over { border-color: var(--brass); background: rgba(138, 115, 80, 0.05); }

/* The input must stay reachable by keyboard — it is the label's control, so
   clicking the face opens the picker and Tab still lands on it. */
.bk-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bk-drop__input:focus-visible + .bk-drop__face {
  outline: 1px solid var(--brass);
  outline-offset: 6px;
}

.bk-drop__face { display: block; }

.bk-drop__main {
  display: block;
  font-family: var(--ui);
  font-size: var(--body);
  font-weight: 300;
  color: var(--green);
}

.bk-drop__sub {
  display: block;
  margin-top: 7px;
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.bk-drop__file {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.bk-drop__thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--ink-16);
}

.bk-drop__name {
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--ink-72);
  word-break: break-all;
}

/* ------------------------------------------------------------ summary ---- */

.bk-summary {
  padding: 30px 28px;
  border: 1px solid var(--ink-16);
  align-self: start;
}

.bk-summary__list { margin: 0; }

.bk-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-12);
}
.bk-summary__row:first-child { padding-top: 0; }

.bk-summary__row dt {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-72);
  margin: 0;
}

.bk-summary__row dd {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--green);
  text-align: end;
}

.bk-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin: 18px 0 0;
}

.bk-summary__total-label {
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-72);
}

.bk-summary__total-value {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  color: var(--brass-deep);
}

/* ---------------------------------------------------------------- done --- */

.bk__done-body { margin: 0 0 30px; max-width: 62ch; }
.bk__done-next { margin: 28px 0 0; max-width: 62ch; }

.bk-ref {
  padding: 26px 28px 10px;
  border: 1px solid var(--ink-16);
  max-width: 560px;
}

.bk-ref__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink-14);
  margin-bottom: 4px;
}

.bk-ref__label {
  display: block;
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-72);
  margin-bottom: 6px;
}

.bk-ref__value {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.bk-ref__pill {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--brass);
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  white-space: nowrap;
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 900px) {
  .bk-pay  { grid-template-columns: 1fr; }
  .bk-grid { grid-template-columns: 1fr; gap: 26px; }
  .bk-cards,
  .bk-cards--three,
  .bk-cards--pay { grid-template-columns: 1fr; }

  /* The summary follows the form on a phone rather than sitting above it. */
  .bk-summary { order: 2; }
}

@media (max-width: 620px) {
  .bk-steps__label { display: none; }
  .bk-steps__item { padding-inline-end: 8px; }
  .bk-steps__item:not(:last-child)::after { width: 14px; }

  .bk-couples { padding: 24px 18px 26px; }
  .bk-send    { padding: 22px 20px; }
  .bk-summary { padding: 24px 20px; }
  .bk-ref     { padding: 22px 20px 8px; }

  .bk-ref__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Full-width buttons on a phone: two 44px targets side by side leave neither
     enough room at 320px. */
  .bk__nav { flex-direction: column; }
  .bk__nav .btn { width: 100%; text-align: center; }
}

/* ======================================================= my bookings ====== */
/* C7 — the client's own list, reached by a signed link. */

.mybk__hello { margin: 0 0 clamp(26px, 3vh, 38px); }

.mybk__list { list-style: none; margin: 0; padding: 0; }

.mybk__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--ink-14);
}
.mybk__row:last-child { border-bottom: 1px solid var(--ink-14); }

.mybk__date { text-align: center; }

.mybk__day {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.mybk__mon {
  display: block;
  margin-top: 4px;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* min-width:0 so a long session title or reference wraps inside its grid
   column instead of widening the row. */
.mybk__what { min-width: 0; }

.mybk__title {
  margin: 0;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 400;
  color: var(--green);
}

.mybk__meta,
.mybk__ref {
  margin: 5px 0 0;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--ink-66);
}

.mybk__tz { color: var(--ink-60); }

.mybk__ref {
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
/* The reference mixes Latin letters, a hyphen and digits — three bidi runs,
   the shape that reversed the WhatsApp number on the Arabic contact page. */
.mybk__ref span { unicode-bidi: plaintext; }

.mybk__state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: end;
}

.mybk__pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--ink-25);
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-72);
  white-space: nowrap;
}
.mybk__pill--confirmed { border-color: var(--green); color: var(--green); }
.mybk__pill--pending   { border-color: var(--brass); color: var(--brass-deep); }
.mybk__pill--awaiting  { border-color: var(--error); color: var(--error); }

.mybk__price {
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--ink-72);
  white-space: nowrap;
}

.mybk__empty { max-width: 60ch; }

/* ---------------------------------------------------------- the account --- */

/*
 * Who you are signed in as, and the way out. Deliberately quiet — it is
 * reassurance, not a control anyone came here to use, and it sits above a list
 * of someone's counselling sessions.
 */
.mybk__account {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 18px;
  font-family: var(--ui);
  font-size: var(--meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/*
 * Sign out is an ACTION, not a label.
 *
 * It inherited .mybk__account's --meta (10–11.5px), uppercase and letter-spaced
 * in muted ink — sized for the "Signed in as" caption beside it. At that size
 * the one control that ends a session was genuinely hard to find. The caption
 * stays quiet; the link steps up to body size, drops the uppercase tracking,
 * and takes a visible outline so it reads as something you click.
 */
.mybk__signout {
  font-size: var(--body-sm);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--green);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--ink-25);
  border-radius: 999px;
  line-height: 1.4;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;

  /*
   * A finger needs more than the text does. The visible pill stays small
   * enough to read as secondary to "Book a session", while the touch area
   * reaches the 44px guideline through the pseudo-element below.
   */
  position: relative;
}

/*
 * The hit area, not the look. Measured at 31px high before this, which is a
 * miss on a phone for the one control that ends a session.
 */
.mybk__signout::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  height: 44px;
  min-width: 44px;
}

.mybk__signout:hover,
.mybk__signout:focus-visible {
  color: var(--ivory);
  background: var(--green);
  border-color: var(--green);
}

/* ---------------------------------------------------- proof on a booking --- */

/*
 * The upload sits BELOW the three columns of its row, not beside them.
 *
 * .mybk__row is a three-column grid with `align-items: center`; a fourth child
 * would be placed into an implicit fourth column and squeezed against the
 * price. Spanning every column puts it on its own line under the booking it
 * belongs to, which is also where it reads as attached to that booking rather
 * than to the list.
 */
.mybk__proof {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding: 18px 20px;
  background: rgba(27, 42, 38, 0.05);
  border-inline-start: 2px solid var(--ink-25);
}

/*
 * When Marwa has actually asked for a new image this is the only thing on the
 * page that wants doing, so it carries the claret the rest of the site uses
 * for an exception — not as an alarm, but so the eye lands on it first.
 */
.mybk__proof--asked {
  background: var(--error-soft);
  border-inline-start-color: var(--error);
}

.mybk__proof-lede {
  margin: 0 0 14px;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-78);
  max-width: 60ch;
}

.mybk__proof-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* min-width: 0 so a long filename shrinks the control instead of widening the
   row past the page — the same trap the booking summary hit. */
.mybk__file {
  flex: 1 1 260px;
  min-width: 0;
}

.mybk__file input[type="file"] {
  display: block;
  width: 100%;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  color: var(--ink-72);
}

/* The file button is a browser widget, so it is restyled rather than replaced —
   ::file-selector-button is the only part of it that takes styling. */
.mybk__file input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 9px 16px;
  border: 1px solid var(--ink-40);
  background: transparent;
  font-family: var(--ui);
  font-size: var(--meta);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-78);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mybk__file input[type="file"]::file-selector-button:hover {
  border-color: var(--green);
  color: var(--green);
}

.mybk__proof-send { flex: 0 0 auto; }

/* The booking the email was about, so it is findable in a long list. */
.mybk__row.is-focus { scroll-margin-top: 120px; }

.mybk__notice {
  margin: 0 0 28px;
  padding: 16px 20px;
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  line-height: 1.75;
  max-width: 68ch;
  border-inline-start: 2px solid currentColor;
}

/* --green, not a new success colour: the palette has no success ink and the
   handoff is explicit that none should be invented. */
.mybk__notice.is-good {
  background: rgba(18, 33, 29, 0.06);
  color: var(--green);
}

.mybk__notice.is-bad {
  background: var(--error-soft);
  color: var(--error);
}

@media (max-width: 620px) {
  /* The status moves under the session rather than squeezing a third column
     into 320px, where the pill and the price would both wrap. */
  .mybk__row {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px 18px;
  }
  .mybk__state {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: start;
  }
}

/* The quiet note on step 3 saying an account comes with the booking. */
.bk__account-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  background: rgba(27, 42, 38, 0.04);
  border-inline-start: 2px solid var(--ink-25);
  font-family: var(--ui);
  font-size: var(--body-sm);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-72);
  max-width: 62ch;
}