/* css/spaces-home-booking.css: one-to-one calls under a running space's Live tab (Spaces build 3, booking lane;
   js/spaces/home-booking.js). P12 (28 Oct 2026): the cards, their heads, the rows, the switches, the tags and the buttons
   are the course home's kit (css/funnel-home.css, css/course-home.css). What stays here is what the kit has no piece for:
   the hours grid, the diary note, the confirm line, a booking's face and the two previews in HER site's look
   (.spb-site carries the community's --oc-* tokens inline), on the kit's own tokens. */
.spb { display: grid; gap: 18px; min-width: 0; }
.spb .spb-offline { margin: 0; }
.spb .spb-offline + .ch-card-rows > .ch-row:first-child { border-top: 1px solid var(--fh-border); }
.spb .ch-card-rows > .spb-feedprev { margin: 0 16px 12px; }
.spb .spb-sheetb { border-top: 1px solid var(--fh-border); }

/* Your one-to-one hours: a grid of mornings and afternoons, each a toggle (filled when open) */
.spb-hours { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.spb-hd { font-size: 12px; color: var(--fh-text-3); text-align: center; }
.spb-hl { font-size: 12.5px; font-weight: 600; color: var(--fh-text-2); padding-right: 4px; }
.spb-slot { width: 100%; height: 26px; border-radius: 7px; border: 1px solid var(--fh-border); background: var(--fh-surface); cursor: pointer; padding: 0; }
.spb-slot.on { background: var(--fh-accent); border-color: var(--fh-accent); }
.spb-slot:focus-visible { outline: 2px solid var(--fh-accent); outline-offset: 2px; }
.spb-slot[disabled] { opacity: .6; cursor: default; }
.spb-ok { display: flex; gap: 10px; align-items: center; background: var(--fh-good-soft); color: var(--fh-good); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.spb-ok svg { width: 20px; height: 20px; flex: none; color: var(--fh-good); }
.spb-confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--fh-warn-soft);
  border-radius: 10px; padding: 8px 12px; font-size: 13.5px; color: var(--fh-text); }

/* What people book, Coming up: the picture or face at the start of a kit row */
.spb-thumb { width: 52px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.spb-thumb-ic { display: grid; place-items: center; background: var(--fh-accent-soft); color: var(--fh-accent); }
.spb-thumb-ic svg { width: 20px; height: 20px; }
.spb-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.spb-noface { display: grid; place-items: center; background: var(--fh-surface-3); color: var(--fh-text-3); }
.spb-noface svg { width: 18px; height: 18px; }

.spb-blink svg { width: 14px; height: 14px; }
.spb-hold { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--fh-text-2); }
.spb-hold svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--fh-accent); }

/* Her site's look: the feed panel preview (the base's .feedprev and .bk) and the sheet, on her --oc-* tokens */
.spb-feedprev { display: grid; gap: 8px; background: var(--oc-surface-2, #f3f4f6); border: 1px solid var(--oc-border, #e5e7eb); border-radius: 14px; padding: 10px; }
.spb-eb { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--oc-text-3, #3f4652); }
.spb-bk { display: flex; align-items: center; gap: 14px; background: var(--oc-accent-solid, var(--oc-accent, #6c63ff)); color: var(--oc-accent-on, #fff); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 12px 26px -14px rgba(21, 23, 43, .55); }
.spb-bk > img, .spb-bk > .spb-noface { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--oc-accent-on, #fff); }
.spb-w { flex: 1; min-width: 0; }
.spb-meta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.spb-btt { font-weight: 800; font-size: 17px; line-height: 1.3; margin-top: 2px; }
.spb-sb2 { font-size: 13px; opacity: .92; margin-top: 2px; }
.spb-go { flex: 0 0 auto; border-radius: 10px; background: var(--oc-surface, #fff); color: var(--oc-accent-ink, #5b21b6); font-weight: 700; font-size: 14.5px; padding: 11px 16px; white-space: nowrap; }
.spb-post { display: flex; gap: 8px; align-items: center; background: var(--oc-surface, #fff); border: 1px solid var(--oc-border, #e5e7eb); border-radius: 10px; padding: 9px 10px; font-size: 13px; color: var(--oc-text-2, #374151); }
.spb-post img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.spb-sheetwrap { min-width: 0; overflow: hidden; border-radius: var(--radius-lg, 16px); max-width: 520px; background: var(--oc-surface, #fff);
  border: 1px solid var(--oc-border, #e5e7eb); padding: 16px; box-shadow: 0 20px 50px -24px rgba(21, 23, 43, .3); }
.spb-sheetwrap[hidden] { display: none; }

@media (max-width: 640px) {
  .spb-bk { flex-wrap: wrap; }
  .spb-go { flex: 1 1 100%; text-align: center; }
  .spb-hours { gap: 4px; }
  .spb-hl { font-size: 11.5px; }
}