/* Booking page — same Pall tokens as the lesson room (style.css owns :root).
   The room is full-bleed and scroll-locked; this page is a normal document. */
body.bookpage {
  overflow: auto;
  background: radial-gradient(120% 80% at 50% -10%, #f7f8fb 0%, #ffffff 46%) fixed, var(--paper);
  min-height: 100%;
}
.bhead { max-width: 720px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-5); text-align: center; }
.bmark { font-family: var(--font-serif); font-size: 2.2rem; letter-spacing: -0.02em; }
.blede { color: var(--muted); margin-top: var(--s-2); font-size: var(--t-lede, 1.15rem); }

.bwrap { max-width: 720px; margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
.bcard {
  background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.9); border-radius: 22px;
  padding: var(--s-5); margin-bottom: var(--s-4);
  box-shadow: 0 10px 40px rgba(29, 29, 31, 0.07), inset 0 0 0 0.5px rgba(29, 29, 31, 0.05);
}
/* HIG Headline. This class used to be declared HERE at 1.05rem/650 and AGAIN in
   book.html's inline <style> at 17px/600 — same name, two sizes, and load order
   decided which one a page got. One definition, on the scale. */
.bh { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--s-4); }
.brow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 620px) { .brow { grid-template-columns: 1fr; } }
.bfield { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.bfield span { font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.bfield em { font-style: normal; color: var(--faint); }
.bfield input {
  font: inherit; font-size: var(--t-body); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.bfield input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
.bfield input:disabled { background: #fafafa; color: var(--faint); }
.bhint { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }
.bhint b { color: var(--ink); font-weight: 600; }

/* duration segmented control */
.bseg { display: flex; gap: 8px; flex-wrap: wrap; }
.bseg button {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 20px; font-size: var(--t-small); font-weight: 600;
  min-height: var(--tap);
}
.bseg button:hover { transform: none; border-color: var(--ink-3); }
.bseg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* days */
.bdays { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: var(--s-4); scrollbar-width: thin; }
.bday {
  flex: 0 0 auto; width: 64px; min-height: var(--tap); padding: 10px 0; text-align: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.3;
}
.bday:hover { transform: none; border-color: var(--ink-3); }
.bday b { display: block; font-size: var(--t-title-3); line-height: var(--lh-title-3); font-weight: 600; }
.bday small { color: var(--muted); }
.bday.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bday.on small { color: rgba(255, 255, 255, 0.7); }

/* PROGRESSIVE DISCLOSURE. Shared, because both the booking footer and the
   reschedule picker's folded night section use it — a style defined in
   book.html's inline <style> would reach only book.html. */
.bmore { border: 0; padding: 0; margin: 0; }
.bmore > summary {
  list-style: none; cursor: pointer; color: var(--muted);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
}
.bmore > summary::-webkit-details-marker { display: none; }
.bmore > summary::after { content: '›'; transition: transform 0.2s var(--spring); }
.bmore[open] > summary::after { transform: rotate(90deg); }
.bmore .bhint { margin-top: 8px; }
.bpartfold { display: block; margin-top: var(--s-3); }
.bpartfold > summary { font-weight: 600; }
.bpartfold .bslots { margin-top: var(--s-2); }

/* The fare is a FACT about the thing being bought, not a footnote — it was
   sitting at 13px grey, the same tier as the privacy links. HIG Headline, ink,
   tabular so the digits do not dance between durations. */
.bfare {
  font-size: var(--t-headline); line-height: var(--lh-headline);
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  margin-top: var(--s-3);
}

/* slots — one titled grid per part of the day, so the eye has somewhere to land */
.bslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bpart {
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  font-weight: 600; color: var(--muted);
  margin: var(--s-4) 0 var(--s-2);
}
#slots > .bpart:first-child { margin-top: var(--s-2); }
.bslot {
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 0; font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums;
  min-height: var(--tap);
}
.bslot:hover:not(:disabled) { transform: none; border-color: var(--accent); color: var(--accent); }
/* Dimmed, not struck through. A strikethrough on a TIME reads as "this lesson was
   cancelled" rather than "this hour is unavailable" — and the grid is full of them. */
.bslot:disabled { background: #fafafb; color: var(--faint); border-color: var(--line-2); cursor: not-allowed; }
.bslot.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.bslot.on:hover { color: #fff; }

.bfoot { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.bfoot button { width: 100%; max-width: 340px; }
.bfoot button:disabled { background: var(--line); color: #fff; cursor: not-allowed; transform: none; }
.berr { color: var(--bad); font-size: var(--t-small); text-align: center; }

/* confirmation */
.bdone { text-align: center; }
.btick { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--s-3); border-radius: 50%; background: var(--blue-soft); }
.bdoneline { font-size: var(--t-title-2); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.blinks { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: var(--s-4) 0; }
.blink {
  display: inline-block; padding: 12px 28px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--t-body);
}
.blink.quiet { background: none; color: var(--accent); }

/* ---------- character creator — Pall's layered avatar (pall.css .pall-avatar) ---------- */
.avmaker { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 620px) { .avmaker { grid-template-columns: 1fr; justify-items: center; } }
.avstage {
  position: relative; width: 180px; height: 180px; border-radius: 24px;
  background: none; overflow: hidden;      /* no tinted plate behind a character */
}
.pall-avatar { position: absolute; inset: 0; }
.pall-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.avrows { display: grid; gap: 6px; width: 100%; max-width: 320px; }
.avrow { display: grid; grid-template-columns: 1fr var(--tap) 64px var(--tap); align-items: center; gap: 4px; }
.avlabel { font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.avval { font-size: var(--t-xs); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.avbtn {
  width: var(--tap); height: var(--tap); padding: 0; border-radius: 12px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: 18px; line-height: 1;
}
.avbtn:hover { transform: none; border-color: var(--accent); color: var(--accent); }
.avshuffle { justify-self: start; padding: 8px 0; font-size: var(--t-small); }

/* participants + fare split */
.bppl { display: grid; gap: 8px; margin-top: var(--s-3); }
.bperson { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 14px; font-size: var(--t-small); }
.bperson b { font-weight: 600; }
.bperson .share { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.bperson .paid { color: var(--accent); font-weight: 600; }
.baddrow { display: flex; gap: 8px; margin-top: var(--s-3); }
.baddrow input { flex: 1; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.baddrow button { padding: 10px 20px; font-size: var(--t-small); }
.bpay { margin-top: var(--s-3); }

/* A sub-heading INSIDE a card. The onboarding section asks five things under
   one roof, and five .bh headings would read as five separate cards. */
.bsub { font-size: var(--t-small); font-weight: 600; color: var(--ink); margin: var(--s-4) 0 4px; }

/* teacher voice picker */
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vcard {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  /* Right padding clears the play button, which is now a full 44pt target and
     would otherwise sit on top of a long voice name. */
  padding: 12px 56px 12px 14px; font-size: var(--t-small); position: relative;
  min-height: var(--tap);
}
.vcard:hover { transform: none; border-color: var(--ink-3); }
.vcard.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
.vcard b { font-weight: 600; }
.vcard small { color: var(--muted); font-size: var(--t-xs); }
.vplay {
  position: absolute; top: 6px; right: 6px; width: var(--tap); height: var(--tap); padding: 0;
  border-radius: 50%; background: var(--blue-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 12px; line-height: 1;
}
.vplay:hover { transform: scale(1.08); }
.vplay.playing { background: var(--accent); color: #fff; }

/* Confirmation screen — Apple HIG type scale, same as every other surface.
   It used to stack five prose lines at four unrelated sizes; a confirmation
   should read as one fact (you are booked, here is when) with the rest quiet
   underneath. Sizes are HIG Title 2 / Title 3 / Body / Footnote, unchanged from
   the values the notes and homework pages already use. */
.dtitle { font-size: var(--t-title-2); line-height: var(--lh-title-2); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.dwhen  { font-size: var(--t-headline); line-height: var(--lh-title-3); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.dsec   { font-size: var(--t-title-3); line-height: var(--lh-title-3); font-weight: 700; letter-spacing: -0.015em; margin: 28px 0 6px; }
.dhint  { font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--muted); }
.dhint b { color: var(--ink); font-weight: 600; }

/* The distance-selling confirmation (Mesafeli Sözleşmeler Yönetmeliği m.7).
   A real control, not a sentence: it has to be ticked, and the confirm button
   stays dead until it is. Sized for a thumb — this is the last thing a parent
   touches before their card is charged. */
.bconsent {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 420px; margin: 0 auto; text-align: left;
  font-size: var(--t-xs); line-height: 1.55; color: var(--muted);
}
.bconsent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.bconsent a { color: var(--accent); }

/* The recovery code, shown once. Deliberately loud: it is the only moment this
   string exists, the server keeps a hash and can never print it again. */
.reccode {
  margin-top: var(--s-5); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: 18px; background: #fff;
}
.reccode-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: var(--s-3); }
.reccode code {
  font: 600 22px/1.2 var(--font-mono); letter-spacing: 0.08em;
  color: var(--ink); background: rgba(29, 29, 31, 0.04);
  padding: 10px 16px; border-radius: 12px; user-select: all;
}
@media (max-width: 620px) { .reccode code { font-size: 18px; } }

/* Invite link row under an unclaimed friend's seat */
.binvite { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 4px; padding-left: 14px; }
.binvite .quiet, .binvite .blink, .binvite .act { font-size: var(--t-footnote); padding: 8px 14px; min-height: 36px; }
#bookAnother { margin-top: 14px; }
#goPay { margin-top: 12px; width: 100%; }