/* Lead-to-Booking: the flow, the calendar, the list of sessions, a record and the staff's day.
   Colours, radius and the display face come from the business's own tokens; nothing here names a business. */

/* ---- the flow: the heading and step bar across the top, the step, and what has been chosen so far ---- */
.xb-flow { display: flex; flex-direction: column; gap: 20px; }
.xb-head, .xb-step { min-width: 0; }
.xb-head { --x-gap: 14px; }
.xb-lead { max-width: 38rem; font-size: 1.0625rem; }
.xb-media .x-img { border-radius: var(--x-radius, 8px); }
.xb-changing .x-note-body { gap: 8px; }
.xb-sum-h { color: var(--x-muted); font: 600 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xb-sum-row dd { font-weight: 600; }
.xb-echo { font-weight: 600; animation: xb-in 180ms ease both; }
@keyframes xb-in { from { opacity: 0; } }

/* On a phone the summary is one strip under the bar that stays in view while the step scrolls: the short
   form of each choice on one line, and anything that is focused stops below it. Every choice has a dot in
   front of it, and the list begins that far outside the strip, which cuts it off there: however the choices
   wrap, no line begins with a dot and none ends with one. */
@media (max-width: 56.24em) {
  .xb-side { margin-inline: calc(var(--x-gutter) * -1); padding: 9px var(--x-gutter); border-bottom: 1px solid var(--x-hair); background: var(--x-bg); }
  .xb-sum-h, .xb-sum-row dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xb-sum { overflow: hidden; }
  .xb-sum-list { display: flex; flex-wrap: wrap; margin-inline-start: -1.25em; }
  .xb-sum-row dd::before { content: "\00B7"; display: inline-block; width: 1.25em; color: var(--x-muted); font-weight: 400; text-align: center; }
  .xb-sum-long { display: none; }
  .xb-sum-note { margin-top: 2px; font-size: .8125rem; }
  html:has(.xb-side) { scroll-padding-top: calc(var(--ex-top) + 84px); }
}
@media (min-width: 56.25em) {
  .xb-flow { display: grid; grid-template: auto auto 1fr / minmax(0, 1fr) minmax(280px, 340px); gap: 22px clamp(32px, 5vw, 72px); align-items: start; }
  .xb-head { grid-area: 1 / 1 / 2 / -1; }
  .xb-step { grid-area: 2 / 1 / 4 / 2; }
  /* Alone in its column the summary has the whole height of the step to travel, so it can stay in view. */
  .xb-side, .xb-media { grid-area: 2 / 2 / 4 / 3; }
  .xb-side.x-stick { top: calc(var(--ex-top) + 20px); }
  /* With a panel of the step's own under it, each has its own row and neither covers the other. */
  .xb-flow--both .xb-side { grid-row: 2 / 3; position: static; }
  .xb-flow--both .xb-media { grid-row: 3 / 4; }
  .xb-sum { padding: 20px 22px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
  .xb-sum-list { margin-top: 10px; }
  .xb-sum-row { padding: 10px 0; border-top: 1px solid var(--x-hair); }
  .xb-sum-row dt { color: var(--x-muted); font-size: .875rem; }
  .xb-sum-short { display: none; }
  .xb-sum-note { margin-top: 8px; }
}

/* ---- how many ---- */
.xb-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.xb-count-label { font-weight: 600; }

/* ---- a month of days ---- */
.xb-when { display: grid; gap: 24px; align-items: start; }
@media (min-width: 45em) { .xb-when { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 32px; } }
.xb-cal { max-width: 380px; }
.xb-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.xb-cal-title { font: var(--x-display-weight, 600) 1.125rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xb-cal-title:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xb-cal-turn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xb-cal-turn[aria-disabled="true"] { opacity: .4; cursor: default; }
.xb-cal-grid { table-layout: fixed; }
.xb-cal-grid th { padding: 6px 0; color: var(--x-muted); font-size: .8125rem; font-weight: 600; text-align: center; }
.xb-cal-grid td { padding: 1px; }
.xb-day { position: relative; display: grid; place-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: var(--x-radius, 8px); background: none; font-variant-numeric: tabular-nums; transition: background-color var(--x-fast) ease; }
.xb-day--today { box-shadow: inset 0 0 0 1px var(--x-line); }
.xb-day--off { color: var(--x-muted); cursor: default; }
.xb-day--closed .xb-day-n { text-decoration: line-through; }
.xb-day--on { background: var(--x-accent); color: var(--x-on-accent); font-weight: 700; }
/* The nights between the two ends of a range. */
.xb-day--mid { border-radius: 0; background: color-mix(in srgb, var(--x-accent) 16%, transparent); }
.xb-day-mark, .xb-day-key { width: 6px; height: 6px; }
.xb-day-mark { position: absolute; bottom: 5px; left: 50%; display: none; margin-left: -3px; }
.xb-day--limited .xb-day-mark, .xb-day-key--limited { display: block; border: 1.5px solid currentColor; border-radius: 50%; }
.xb-day--full .xb-day-mark, .xb-day-key--full { display: block; background: currentColor; }
.xb-cal-why { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: var(--x-radius, 8px); background: var(--x-surface-2); font-size: .9375rem; }
.xb-cal-why > .x-i { margin-top: .28em; }
.xb-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; color: var(--x-muted); font-size: .8125rem; }
.xb-cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.xb-day-key { flex: none; }
.xb-day-key--closed { width: 12px; height: 0; border-top: 1.5px solid currentColor; }

/* ---- sessions and times ---- */
.xb-slots { display: grid; gap: 18px; }
.xb-slot-group { display: grid; gap: 8px; }
.xb-slot-legend { margin-bottom: 8px; font-weight: 700; }
.xb-slot-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.xb-slot { position: relative; display: block; cursor: pointer; }
.xb-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.xb-slot-face { position: relative; display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); transition: background-color var(--x-fast) ease, border-color var(--x-fast) ease; }
.xb-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.xb-slot-note { color: var(--x-muted); font-size: .875rem; }
.xb-slot-note--warn { color: var(--x-warn); font-weight: 600; }
.xb-slot input:checked + .xb-slot-face { border-color: var(--x-accent); background: color-mix(in srgb, var(--x-accent) 12%, var(--x-surface)); box-shadow: inset 0 0 0 1px var(--x-accent); }
.xb-slot input:checked + .xb-slot-face::after { content: ""; position: absolute; top: 12px; right: 14px; width: 6px; height: 11px; border: solid var(--x-accent-ink); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.xb-slot input:focus-visible + .xb-slot-face { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.xb-slot--off { cursor: default; }
.xb-slot--off .xb-slot-face { border-style: dashed; background: var(--x-surface-2); }
.xb-slot--off .xb-slot-time { color: var(--x-muted); text-decoration: line-through; }
/* A day of many start times: small cards, the time alone unless a slot has something to say. */
.xb-slots--dense .xb-slot-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.5rem), 1fr)); }
.xb-slots--dense .xb-slot-face { justify-items: center; min-height: 44px; padding: 6px 8px; text-align: center; }
.xb-slots--dense .xb-slot-note { font-size: .75rem; }
.xb-slots--dense .xb-slot input:checked + .xb-slot-face::after { content: none; }
.xb-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---- review, and one record ---- */
.xb-step > .x-note, .xb-step > .x-state, .xb-step > .xb-preview { max-width: 44rem; }
.xb-review { display: grid; gap: 22px; max-width: 44rem; }
.xb-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.xb-review-head h2 { font-size: 1.125rem; }
.xb-record { display: grid; gap: 14px; max-width: 44rem; padding: clamp(16px, 4vw, 28px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
/* An email address or a long name breaks inside its column instead of widening a narrow screen. */
.xb-review .x-fact dd, .xb-record .x-fact dd, .xb-facts .x-fact dd { overflow-wrap: anywhere; }
.xb-record-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.xb-record-ref { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.xb-preview { padding: 12px 14px; border: 1px dashed var(--x-line); border-radius: var(--x-radius, 8px); }
.xb-preview summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.xb-preview-text { margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--x-radius, 8px); background: var(--x-surface-2); }
.xb-find { display: grid; gap: 12px; max-width: 24rem; justify-items: start; }
.xb-find .x-field { width: 100%; }
.xb-list { display: grid; gap: 10px; max-width: 44rem; }
.xb-list-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }

/* ---- the staff's day ---- */
.xb-daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xb-daynav .x-btn { min-width: 44px; }
/* The date has the first line to itself on a phone; the three controls share the one under it. */
.xb-daynav-date { flex: 1 0 100%; font-size: 1.0625rem; font-weight: 700; }
.xb-daynav-date .x-hint { font-weight: 400; }
@media (min-width: 37.5em) { .xb-daynav-date { flex: none; margin-inline-end: 8px; } }
.xb-session { display: grid; gap: 12px; padding: clamp(14px, 3vw, 20px); border: 1px solid var(--x-hair); border-radius: var(--x-radius, 8px); background: var(--x-surface); }
.xb-session-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.xb-session-head h2, .xb-session-head h3 { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.xb-session > * { min-width: 0; }
.xb-session .x-table-wrap { --x-under: var(--x-surface); }
/* Every group's table has the same columns at the same widths, so the eye runs down one column across groups. */
@media (min-width: 37.5em) {
  .xb-table .x-table { width: 100%; table-layout: fixed; }
  .xb-table thead th:first-child { width: 12%; }
  .xb-table thead th:nth-last-child(2) { width: 20%; }
  .xb-table thead th:last-child { width: 28%; }
  .xb-table td, .xb-table tbody th { overflow-wrap: anywhere; }
}
.xb-table .x-pill { white-space: normal; }
/* On a phone each row is already a card: the group around them is a heading and a rule, not a second box. */
@media (max-width: 37.49em) {
  .xb-session { padding: 16px 0 0; border: 0; border-top: 1px solid var(--x-hair); border-radius: 0; background: none; }
  /* A compact card: the reference with its status, the rest on one line between them, the actions under. */
  .xb-table--compact tr { display: flex; flex-wrap: wrap; align-items: center; }
  .xb-table--compact tr::after { content: ""; order: 2; flex: 0 0 100%; }
  .xb-table--compact tbody th { order: 0; flex: 1 1 auto; padding: 0; }
  .xb-table--compact td { order: 3; display: block; padding: 4px 0 0; overflow-wrap: anywhere; }
  .xb-table--compact td::before { content: none; }
  .xb-table--compact .x-td-v { min-width: 0; }
  .xb-table--compact td:nth-last-child(2) { order: 1; padding: 0; }
  .xb-table--compact td:not(:nth-last-child(-n+2)) ~ td:not(:nth-last-child(-n+2))::before { content: "\00B7"; display: inline; margin-inline: 7px; padding: 0; color: var(--x-muted); }
  .xb-table--compact td:not(:nth-last-child(-n+2)) .x-td-v { display: inline; }
  .xb-table--compact td:last-child { order: 4; flex: 0 0 100%; padding-top: 10px; }
}
.xb-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xb-meter-bar { flex: none; width: 96px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--x-surface-2); box-shadow: inset 0 0 0 1px var(--x-line); }
.xb-meter-fill { display: block; height: 100%; background: var(--x-accent); }
.xb-meter-text { color: var(--x-muted); font-size: .9375rem; }
/* A move that cannot be taken back is asked about in the place its buttons were: the question, then the two answers. */
.xb-ask { flex: 1 1 100%; display: grid; gap: 8px; min-width: 0; }
.xb-ask-q { font-weight: 600; }
.xb-ask .x-row { --x-gap: 8px; }
/* Something to choose before a move is made (which room, which person), with the button that makes it. */
.xb-pick { display: grid; gap: 10px; justify-items: start; }
.xb-pick .x-field { width: 100%; }
.xb-move { justify-items: start; }
.xb-move > * { width: 100%; }
/* The line that says a staff page is a preview is drawn beside the record sheet, at the end of the page; it is read
   first, above the page's heading and close to it. The page is a stack, so its order is all that has to change. */
.xb-role { order: -1; margin-bottom: -8px; }
/* A button in the record's row of actions that is brought back into view keeps room for its focus ring. */
.xb-acts > * { scroll-margin-block: 8px; }

@media (hover: hover) and (pointer: fine) {
  .xb-day:not(.xb-day--off, .xb-day--on):hover { background: var(--x-surface-2); }
  .xb-cal-turn:not([aria-disabled="true"]):hover, .xb-slot:not(.xb-slot--off):hover .xb-slot-face { border-color: var(--x-ink); }
}
@media (forced-colors: active) {
  .xb-day--on, .xb-slot input:checked + .xb-slot-face { outline: 2px solid Highlight; outline-offset: -2px; }
}