/* Picking a time, in the site's own clothes -- dark ground, Barlow Condensed,
   one red. Days first and only the days that have something: a month grid on
   a phone is a month grid nobody can tap, and an empty Tuesday should never be
   something you find out by tapping it. */
body.s-book-page { overflow-y: auto; }

/* The wordmark sits at the top of the column (see the note in book.html).
   width:max-content keeps the link's box on the logo instead of stretching
   a 980px-wide hyperlink across the top of the page. */
.f-logo { display: block; width: max-content; margin: 0 0 26px; }
/* .bp carries the gutters and the notch for both of them, and gives back the
   108px it was holding for a logo that never floated over it. */
.bp { max-width: 980px; margin: 0 auto;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 20px 72px; }
/* With a face on it the header becomes two columns: the picture spanning the
   name and the length beside it, and the blurb back at full width under both.
   Without one, nothing changes -- .bp-head is a plain block and the rules
   below never fire, so a booking type whose owner has no picture gets the
   header it always had rather than a grey circle. */
.bp-head.withface { display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px; }
.bp-head.withface .bp-face { grid-row: 1 / span 2; align-self: center; }
.bp-head.withface h1, .bp-head.withface .bp-len { grid-column: 2; }
.bp-head.withface .bp-blurb { grid-column: 1 / -1; }
/* A circle that is filled by the person, not by their backdrop. Stefan,
   09-25-2026: "need to make the photo a little bigger so they can actually
   see a picture of me" and "need to position better so there's no gray."
   A profile picture is squared on upload from whatever was sent, so a studio
   shot arrives with white all round it -- fine at the 26px this app draws
   beside a name, and all you can see at 96px on a booking page.

   So the picture is a frame with the image oversized inside it: not quite
   twice the width, pulled up a little more than centred, so the face fills
   the circle and the backdrop is cropped down to the two top corners. Scoped
   to this page on purpose -- a deliberate crop for one hero-sized circle,
   not a rule for every avatar in the app.

   max-width:none matters as much as the width does. site.css sets
   `img { max-width: 100% }` for the whole site, which silently pinned this
   image to the frame's width while the height still grew -- object-fit then
   cropped a tall thin slice out of the middle of his face. The percentages
   resolve against the frame's CONTENT box (128 less the 2px border), which
   is why -47.5% is dead centre.

   No vignette. Fading the white edge into the page was the obvious next
   move and it looks terrible: a soft grey ring, which is the exact thing
   being complained about. */
.bp-face { width: 128px; height: 128px; border-radius: 50%; overflow: hidden;
  flex: none; border: 2px solid rgba(255,255,255,.22); background: #1c2123; }
.bp-face img { display: block; width: 195%; height: 195%; max-width: none;
  object-fit: cover; margin: -28% 0 0 -47.5%; }
.bp-head h1 { margin: 0; font: 800 clamp(2rem, 4.2vw, 3rem)/.94 var(--display);
  text-transform: uppercase; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.bp-len { margin: 10px 0 0; color: var(--signal); font: 600 13px/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase; }
.bp-blurb { margin: 14px 0 0; color: var(--muted); line-height: 1.65; max-width: 58ch; }
.bp-loading, .bp-empty { margin: 32px 0; color: var(--muted); line-height: 1.65; }

/* The month, and that day's times beside it -- the shape everybody already
   knows from a booking link. Stefan, 09-25-2026: "I wanted to look like
   GoHighLevel with the calendar selector, same layout and everything." */
.bp-pick { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 32px; align-items: start; margin-top: 30px; }
.bp-cal { border: 1px solid rgba(255,255,255,.20); border-radius: 14px; padding: 20px;
  background: #1c2123; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.bp-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bp-cal-head b { flex: 1; text-align: center; color: #fff;
  font: 700 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.bp-nav { width: 40px; height: 40px; cursor: pointer; font-size: 22px; line-height: 1;
  color: #fff; background: rgba(255,255,255,.09); border: 1px solid var(--line-2);
  border-radius: 10px; }
.bp-nav:hover:not([disabled]) { border-color: var(--signal); color: var(--signal); }
.bp-nav[disabled] { opacity: .3; cursor: default; }
.bp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.bp-dow span { text-align: center; font: 600 11.5px/1.6 var(--body); letter-spacing: .08em;
  text-transform: uppercase; color: #c7d0ce; }
.bp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
/* Before the answer arrives every day is plain: a calendar with its dates in
   place, waiting, rather than a blank panel and the word "Finding". */
.bp-c { position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 0; cursor: pointer;
  font: 500 17px/1 var(--body); font-variant-numeric: tabular-nums;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 10px;
  transition: background .12s, border-color .12s; }
.bp-c.out { opacity: .30; }
.bp-c.out.free { opacity: .82; }
.bp-c.free { color: #fff; font-weight: 600; background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.34); }
.bp-c.free:hover { border-color: var(--signal); background: rgba(227,27,35,.26); }
.bp-c.no { color: rgba(255,255,255,.34); cursor: default; }
.bp-c.today { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.bp-c.on { background: var(--signal-btn); border-color: var(--signal); color: #fff; }
.bp-c.on .bp-dot { background: #fff; }
.bp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.bp-tz { margin: 16px 0 0; font-size: 12.5px; color: #c7d0ce; text-align: center; }

.bp-slots-h { margin: 0 0 12px; color: #fff; font: 700 15px/1.3 var(--display);
  letter-spacing: .06em; text-transform: uppercase; }
.bp-slots .bp-loading { margin: 0; font-size: 14px; }

.bp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px; }
.bp-time { padding: 15px 8px; cursor: pointer; font: 600 16px/1 var(--body);
  color: #fff; background: #1c2123; border: 1px solid rgba(255,255,255,.26);
  border-radius: 10px; font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s; }
.bp-time:hover { border-color: var(--signal); background: rgba(227,27,35,.24); }

.bp-form { margin-top: 30px; }
.bp-chosen { margin: 0 0 20px; padding: 12px 14px; border-radius: 9px;
  background: rgba(227,27,35,.10); border: 1px solid var(--signal); color: #fff; }
.bp-form label { display: block; margin: 16px 0 6px; color: #fff; font-size: 14px; }
.bp-why { color: var(--muted); font-weight: 400; }
.bp-form input, .bp-form textarea { width: 100%; padding: 12px 13px; font: inherit; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; }
.bp-form input:focus, .bp-form textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.bp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.bp-go { padding: 14px 26px; cursor: pointer; font: 700 15px/1 var(--body); color: #fff;
  background: var(--signal-btn); border: 0; border-radius: 9px; }
.bp-go:hover { background: var(--signal-btn-hover); }
.bp-go[disabled] { opacity: .6; cursor: default; }
.bp-back { padding: 14px 18px; cursor: pointer; font: 600 14px/1 var(--body);
  color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 9px; }
.bp-err { margin-top: 14px; color: var(--signal-hover); }

.bp-done { margin-top: 34px; }
.bp-done h2 { margin: 0 0 12px; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1 var(--display);
  text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.bp-done p { color: var(--muted); line-height: 1.65; margin: 8px 0; }
.bp-link { color: var(--signal); }
.bp-next { margin-top: 18px; font-size: 14px; }
/* In the application's frame: no wordmark (the form has one) and no room
   left for it. */
body.s-embed .bp { padding-top: 18px; }

/* Phones: the calendar is the page, so it gets the width and the days get
   real thumb targets. Most manual bookings are on a desk; the ones that are
   not are all on a phone. */
@media (max-width: 720px) {
  .bp-pick { grid-template-columns: 1fr; gap: 24px; }
  .bp-cal { max-width: none; padding: 16px; }
}
@media (max-width: 560px) {
  /* A day has to be a thumb target. At 20px of page padding and 16px inside
     the card, seven cells across a 375px phone came out at 40px -- under the
     44px minimum, and it felt it. The gutter stays at 16px; the card's own
     padding and the gaps give the width back to the days.

     And everything above the calendar earns its height. Measured on a 812px
     phone, the times began at 755 -- off the bottom before a day had even
     been picked, which is exactly the scrolling Stefan described. The header
     is tighter, the grid is 44 wide and 38 tall (the thumb needs the width,
     not the height), and the times land on the first screen. */
  .f-logo { margin-bottom: 18px; }
  .bp { padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 56px; }
  .bp-head h1 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  /* Still big enough to be a picture of somebody. The name of the call wraps
     to a second line beside it, which is the right thing to give up. */
  .bp-face { width: 96px; height: 96px; border-width: 1.5px; }
  .bp-head.withface { column-gap: 14px; }
  .bp-len { margin-top: 7px; font-size: 11px; }
  .bp-blurb { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .bp-pick { margin-top: 18px; gap: 18px; }
  .bp-cal { padding: 8px 8px 12px; }
  .bp-cal-head { padding: 6px 6px 0; margin-bottom: 10px; }
  .bp-cal-head b { font-size: 18px; }
  .bp-nav { width: 34px; height: 34px; font-size: 19px; }
  .bp-dow { gap: 3px; margin-bottom: 3px; }
  .bp-dow span { font-size: 10.5px; line-height: 1.3; }
  .bp-grid { gap: 3px; }
  .bp-c { aspect-ratio: auto; height: 38px; font-size: 15.5px; border-radius: 8px; }
  .bp-tz { margin-top: 9px; font-size: 11.5px; }
  .bp-slots-h { margin-bottom: 9px; font-size: 14px; }
  .bp-times { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .bp-time { padding: 14px 6px; font-size: 15px; }
}

/* The wordmark is fixed at 18px from the top, which on a phone puts it under
   the status bar and the notch -- Stefan, 09-25-2026: "the logo on the
   left-hand side is a little high and cut off." It clears the safe area now
   and takes less room on a small screen, which is also height the calendar
   gets back. The rule lives here rather than in apply.css because the
   application's own layout is fixed-position and built around that 18px. */
body.s-book-page .f-logo {
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
}
@media (max-width: 560px) {
  /* The crest, not the lockup -- see the note in book.html. 42px tall is
     taller than the whole 118px strip was, so it gained presence rather
     than losing it, and a badge survives the size that a line of type with
     HEALTH AND PERFORMANCE under it does not. `height` rather than `width`
     is deliberate: the two files have different shapes, and a fixed width
     would squeeze the crest into the wordmark's 4:1 box. */
  body.s-book-page .f-logo img { width: auto; height: 42px; }
}

/* Their time zone, detected and changeable -- the same control GoHighLevel's
   widget puts under its calendar, and for the same reason: the times above
   are useless to somebody who cannot tell whose clock they are on. */
.bp-tzrow { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.bp-tzlab { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bp-muted, #8a8f98); }
.bp-tzpick { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 6px; }
@media (max-width: 560px) {
  .bp-tzrow { flex-wrap: wrap; gap: 5px; }
  .bp-tzpick { flex: 1 1 100%; }
}