/* ─────────────────────────────────────────────────────────────
   /css/book.css
   THE BOOKING SURFACE ONLY. Everything shared with pricing, checkout and
   settings — the button, the input, the outlined pane, the note, the step
   rail, the dev bar, the site chrome — lives in funnel.css and is used from
   here by its .acct-* class. This file adds the six things booking has that
   nothing else does:

     the two-column layout with the counsellor card
     the decision picker
     the Cal.com mount and its slot grid
     the counsellor card itself
     the confirmed-session block and its receipt
     the two "what next" cards

   NAMING. Every class is `bk-` prefixed, matching the per-surface convention
   already used by --loc-/--adm-/--atl-/--mk-/--pr-. Nothing here is a bare
   element or a generic class name.

   NO RESET. funnel.css already carries the scoped, zero-specificity reset and
   this page uses it via <body class="acct-page">. A second reset here would
   out-specify the first and quietly strip borders off shared components — the
   trap CSS-RESET-ROOT cost this repo in August.

   TOKENS ONLY. Not one colour, radius, shadow or font family below is a
   literal. Sizes and spacing are literals because there are no tokens for
   them anywhere in this codebase; every value that HAS a token uses it.

   ── MOBILE IS BUILT HERE, NOT RETRO-FITTED ──
   Under 900px the counsellor card moves ABOVE the flow (order:-1), which is
   the prototype's rule and a real decision: on a phone that card is the reason
   to keep scrolling. Under 600px the slot grid narrows and every button in a
   row goes full width. Checked at 390px as a release criterion.

   Depends on: tokens.css (--acct-*), funnel.css (.acct-* components).
   Used by: book.html.
   ───────────────────────────────────────────────────────────── */

/* ── Layout ───────────────────────────────────────────────────
   1060px, matching the prototype. minmax(0,…) on both tracks and not 1.4fr /
   .85fr alone: a grid track's default minimum is auto, so one long unbroken
   string in the flow column would push the whole page wider than the viewport
   rather than wrapping. */
.bk-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 32px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr);
  gap: 30px;
  align-items: start;
}
.bk-main { min-width: 0; }

/* The way back, under the shared header. DESIGN_LAW: every screen must be
   traversable without the browser Back button. */
.bk-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--acct-touch);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink-mute);
  white-space: nowrap;
}
.bk-crumb:hover { color: var(--acct-teal-d); }

/* ── Headings ─────────────────────────────────────────────────
   Larger than funnel.css's .acct-sec-h (34px) because a booking page has one
   heading and a pricing page has six. Transcribed from the prototype. */
.bk-head { margin-bottom: 22px; }
.bk-h {
  font-family: var(--acct-serif);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--acct-ink);
  text-wrap: balance;
}
.bk-sub {
  font-size: 14.5px;
  color: var(--acct-ink-mute);
  line-height: 1.62;
  margin-top: 10px;
  max-width: 520px;
  text-wrap: pretty;
}

/* Pane helpers used by more than one screen. */
.bk-bd-flush { margin-top: 0; }
.bk-pane-c {
  font-size: 13.5px;
  color: var(--acct-ink-mute);
  line-height: 1.55;
  text-align: center;
  margin: 0;
  text-wrap: pretty;
}
.bk-hint {
  font-size: 12px;
  color: var(--acct-ink-faint);
  line-height: 1.5;
  margin: 0;
}
.bk-optional {
  font-size: 13px;
  font-weight: 400;
  color: var(--acct-ink-faint);
}
/* A list that opens a pane body rather than following text: no rule above it. */
.bk-flush {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ── The decision picker ──────────────────────────────────────
   PROJECT DESIGN LAW: gold marks the selected option, everywhere, and nothing
   decorative may use it. The border thickens by 1px on selection and the
   padding drops by 1px to compensate, so the row does not jump. */
.bk-pick {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bk-po {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-lg);
  background: var(--acct-bg-card);
  transition: all var(--acct-tr);
  width: 100%;
  min-height: var(--acct-touch);
}
.bk-po:hover { border-color: var(--acct-teal); }
.bk-po.on {
  border-color: var(--acct-gold);
  border-width: 2.5px;
  background: var(--acct-gold-s);
  padding: 13px 15px;
}
.bk-rad {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid var(--acct-line-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-po.on .bk-rad { border-color: var(--acct-gold-d); }
.bk-rad span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acct-gold-d);
}
.bk-po-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.bk-po-t strong { font-size: 14.5px; color: var(--acct-ink); }
.bk-po-t span   { font-size: 12.5px; color: var(--acct-ink-mute); line-height: 1.45; }
.bk-po-n {
  font-size: 11px;
  font-weight: 700;
  color: var(--acct-teal-d);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── The question ─────────────────────────────────────────────
   funnel.css has .acct-inp for single-line fields and nothing for a textarea,
   because this is the only surface in the funnel that asks for prose. Same
   border, radius and focus ring, so the two read as one family. */
.bk-ta {
  width: 100%;
  min-height: 96px;
  padding: 13px 15px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-md);
  background: var(--acct-bg-card);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--acct-ink);
  line-height: 1.55;
  resize: vertical;
  transition: border-color var(--acct-tr);
}
.bk-ta:focus {
  outline: none;
  border-color: var(--acct-teal-d);
  box-shadow: 0 0 0 3px var(--acct-teal-s);
}
.bk-ta::placeholder { color: var(--acct-ink-faint); }

/* ── The attachment ───────────────────────────────────────────
   Dashed, because it is an invitation rather than a field. Green once
   something is attached: the only "done" state on the prep step. */
.bk-drop {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1.5px dashed var(--acct-line-md);
  border-radius: var(--acct-r-lg);
  background: var(--acct-bg-soft);
  transition: all var(--acct-tr);
  width: 100%;
  min-height: var(--acct-touch);
}
.bk-drop:hover {
  border-color: var(--acct-teal);
  background: var(--acct-teal-t);
}
.bk-drop-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--acct-r-md);
  background: var(--acct-bg-card);
  border: 1.5px solid var(--acct-line-md);
  color: var(--acct-ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bk-drop-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-drop-t strong { font-size: 14px; color: var(--acct-ink); }
.bk-drop-t span   { font-size: 12.5px; color: var(--acct-ink-mute); }

.bk-file {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--acct-green-m);
  background: var(--acct-green-t);
  border-radius: var(--acct-r-lg);
  font-size: 13.5px;
  color: var(--acct-ink);
  min-height: var(--acct-touch);
}
.bk-file svg { color: var(--acct-green-d); flex-shrink: 0; }
/* The file name is the one string here that came from a stranger's disk.
   Wrapping rather than overflowing keeps a 300-character name inside the box. */
.bk-file > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bk-file button {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acct-ink-mute);
  flex-shrink: 0;
  min-height: var(--acct-touch);
}
.bk-file button:hover { color: var(--acct-coral-d); }

/* ── The Cal.com mount ────────────────────────────────────────
   Dashed teal frame, marking the whole region as a placeholder: the embed
   replaces everything inside it. The tag names the event type, which is the
   fastest way to tell at a glance whether the right one is wired. */
.bk-cal {
  border: 1.5px dashed var(--acct-teal-m);
  border-radius: var(--acct-r-lg);
  background: var(--acct-teal-t);
  padding: 16px;
}
.bk-cal-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acct-teal-d);
  margin-bottom: 14px;
}
.bk-cal-tag b {
  background: var(--acct-teal-d);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--acct-r-sm);
  letter-spacing: .04em;
}
.bk-cal-in {
  background: var(--acct-bg-card);
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-md);
  padding: 16px;
}
.bk-cal-note { margin-bottom: 16px; }

/* Day chips. The prototype drew a full month grid; that grid is a mock of the
   embed's own calendar and goes when Cal.com mounts, so this renders the days
   availability actually exists on. */
.bk-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--acct-touch);
  padding: 0 14px;
  border-radius: var(--acct-r-pill);
  border: 1.5px solid var(--acct-line-md);
  background: var(--acct-teal-t);
  font-size: 13px;
  font-weight: 700;
  color: var(--acct-teal-d);
  white-space: nowrap;
  transition: all var(--acct-tr);
}
.bk-day:hover { border-color: var(--acct-teal-d); }
.bk-day.on {
  background: var(--acct-gold-s);
  border-color: var(--acct-gold);
  border-width: 2.5px;
  color: var(--acct-ink);
}

/* Times. Central large, India small underneath — the arrangement is the
   timezone decision made visible, and it is not decoration: only the Central
   morning is a civil hour in India. */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--acct-line);
}
.bk-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-md);
  transition: all var(--acct-tr);
  padding: 6px 4px;
}
.bk-slot b  { font-size: 14px; font-weight: 700; color: var(--acct-ink-soft); }
.bk-slot em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--acct-ink-faint);
  white-space: nowrap;
}
.bk-slot:hover { border-color: var(--acct-teal-d); }
.bk-slot:hover b { color: var(--acct-teal-d); }
.bk-slot.on {
  background: var(--acct-gold-s);
  border-color: var(--acct-gold);
  border-width: 2.5px;
}
.bk-slot.on b  { color: var(--acct-ink); }
.bk-slot.on em { color: var(--acct-gold-d); }
/* After midnight in India. A marker, never a block: a 02:00 IST slot is a fine
   choice for somebody who is not in India, and this page has no business
   knowing where the reader is. */
.bk-slot.late em { color: var(--acct-yellow-d); }

.bk-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 4px 4px;
  text-wrap: pretty;
}
.bk-empty strong { font-size: 15px; color: var(--acct-ink); }
.bk-empty span   { font-size: 13.5px; color: var(--acct-ink-mute); line-height: 1.55; }

.bk-tz {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--acct-ink-faint);
  margin: 12px 0 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.bk-tz strong { color: var(--acct-ink-mute); }
.bk-tz svg { margin-top: 2px; }

/* ── The counsellor card ──────────────────────────────────────
   Gold outline, per project design law: this is the emphasised box on the
   page.

   ── WHY THE COLUMN IS A SEPARATE CLASS FROM THE CARD ──
   `order` and `position:sticky` act on the GRID ITEM, which is the mount div,
   not on the <aside> the hub renders inside it. Putting either on .bk-who
   leaves both silently doing nothing: the card sits below the flow on mobile
   and refuses to stick on desktop, with no error anywhere. Found on this page
   at 390px before it shipped.

   Sticky works here because the item's grid AREA is the full row height even
   though align-items:start shrinks its box — so there is room to travel. */
.bk-who-col {
  position: sticky;
  top: 88px;
}
.bk-who {
  background: var(--acct-bg-card);
  border: 2.5px solid var(--acct-gold);
  border-radius: var(--acct-r-xl);
  box-shadow: var(--acct-sh-card);
  overflow: hidden;
}
.bk-who-hd {
  padding: 20px;
  background: var(--acct-gold-s);
  border-bottom: 1.5px solid var(--acct-gold-m);
  display: flex;
  align-items: center;
  gap: 14px;
}
.bk-who-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--acct-teal-d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--acct-serif);
  font-size: 23px;
  flex-shrink: 0;
}
.bk-who-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-who-t strong {
  font-family: var(--acct-serif);
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--acct-ink);
}
.bk-who-t span { font-size: 12.5px; color: var(--acct-ink-mute); line-height: 1.45; }
.bk-who-bd { padding: 18px 20px 20px; }
.bk-who-p {
  font-size: 13.5px;
  color: var(--acct-ink-mute);
  line-height: 1.65;
  text-wrap: pretty;
}
.bk-who-l {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1.5px solid var(--acct-line-md);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bk-who-l li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--acct-ink-soft);
  line-height: 1.5;
  text-wrap: pretty;
}
.bk-who-l svg { color: var(--acct-green); flex-shrink: 0; margin-top: 2px; }
.bk-who-meta {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1.5px solid var(--acct-line-md);
}
.bk-mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-ink-mute);
  background: var(--acct-bg-soft);
  border: 1px solid var(--acct-line-md);
  border-radius: var(--acct-r-pill);
  padding: 6px 11px;
}

/* ── The booked session ───────────────────────────────────────
   Gold again: this is the confirmed thing on the page, and gold is what the
   product uses for the chosen option everywhere else. */
.bk-when {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 18px;
  border: 2px solid var(--acct-gold);
  background: var(--acct-gold-s);
  border-radius: var(--acct-r-lg);
  text-align: left;
}
.bk-when-flush { margin-top: 0; }
.bk-when-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--acct-r-md);
  background: var(--acct-bg-card);
  border: 1.5px solid var(--acct-gold-m);
  flex-shrink: 0;
}
.bk-when-d b {
  font-family: var(--acct-serif);
  font-size: 24px;
  line-height: 1;
  color: var(--acct-ink);
}
.bk-when-d span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acct-ink-faint);
  margin-top: 3px;
}
.bk-when-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bk-when-t strong { font-size: 16px; color: var(--acct-ink); }
.bk-when-t span   { font-size: 13px; color: var(--acct-ink-mute); line-height: 1.5; }

.bk-done-mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--acct-green-t);
  border: 2.5px solid var(--acct-green);
  color: var(--acct-green-d);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* The receipt. A definition list, because that is what four labelled facts
   are. Left-aligned inside a centred block, so the values line up. */
.bk-rcpt {
  margin: 18px 0 0;
  padding: 0;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-lg);
  overflow: hidden;
  text-align: left;
}
.bk-rcpt > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  font-size: 13.5px;
  border-top: 1px solid var(--acct-line);
}
.bk-rcpt > div:first-child { border-top: none; }
.bk-rcpt dt { color: var(--acct-ink-mute); }
.bk-rcpt dd {
  margin: 0;
  font-weight: 700;
  color: var(--acct-ink);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Two exits, neither of them "done". */
.bk-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.bk-nxt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-lg);
  background: var(--acct-bg-card);
  text-align: left;
  transition: all var(--acct-tr);
}
.bk-nxt:hover {
  border-color: var(--acct-teal-d);
  transform: translateY(-1px);
}
.bk-nxt strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--acct-ink);
}
.bk-nxt span { font-size: 12.5px; color: var(--acct-ink-mute); line-height: 1.5; }

/* Stands in for the Join button when Cal.com has not issued a Meet link yet.
   Deliberately not button-shaped: there is nothing to press. */
.bk-pending {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--acct-touch);
  padding: 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink-faint);
}

/* ── Mobile ───────────────────────────────────────────────────
   Built alongside desktop. The counsellor card moves above the flow, which is
   the prototype's rule: on a phone it is the reason to keep scrolling. */
@media (max-width: 900px) {
  .bk-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 20px 110px;
  }
  .bk-who-col { position: static; order: -1; }
  .bk-h { font-size: 30px; }
}

@media (max-width: 600px) {
  .bk-h { font-size: 26px; }
  .bk-sub { font-size: 14px; }
  /* One column of "what next" cards rather than two 140px ones. */
  .bk-next { grid-template-columns: 1fr; }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .bk-cal { padding: 12px; }
  .bk-cal-in { padding: 12px; }
  /* The date tile shrinks rather than pushing the times off the card. */
  .bk-when { gap: 12px; padding: 14px; }
  .bk-when-d { width: 54px; height: 54px; }
  .bk-when-d b { font-size: 20px; }
  .bk-when-t strong { font-size: 15px; }
  /* A day chip and a time are the two controls a thumb uses most here, so
     they keep their height and lose only their horizontal padding. */
  .bk-day { padding: 0 12px; font-size: 12.5px; }
}