/* Recursive AI — booking (/book/ and /book/manage)

   Follows DEVLOG-STYLE-CONTRACT.md (applied with `book` for `devlog`):
   - Every rule is scoped under .page-book (bodyClass in both pages' front
     matter); nothing here touches the masthead, nav, footer, bare elements or
     a stable class outside this page.
   - Colors, families and type sizes are the site's stable tokens only (§3).
     No hex literals; nothing relies on non-contract tokens (--ease, --t-h1*,
     --red-deep), so the page keeps matching when the site changes.
   - Red appears in exactly two places: the "Available" mark (open days and
     the key beside the time zone; .state--live for a meeting that is live
     right now) and the site's own .button hover on the one primary action.
     Selection is ink. Errors are ink. Focus keeps the site's ring.
   - --ink-4 is used for borders and strokes only, never for text (§5).
   - Light only. prefers-reduced-motion switches every transition off (rai.css
     does it globally; repeated below for this page's own motion). */

.page-book {
  --bk-ease: cubic-bezier(.2, .7, .2, 1);   /* page-local; not the site's --ease */
  --bk-cell: 44px;
  --bk-pad: clamp(18px, 2vw, 24px);
  --bk-step: clamp(48px, 5vw, 72px);        /* step → step, like the catalog's group rhythm */
}

/* Component display rules must never beat the hidden attribute. */
.page-book .bk [hidden], .page-book [data-testmode][hidden] { display: none !important; }

/* ---------- Stages ---------- */
.page-book .bk-stage { transition: opacity .32s var(--bk-ease), transform .42s var(--bk-ease); }
.page-book .bk-stage.is-enter { opacity: 0; transform: translateY(10px); transition: none; }
.page-book .bk-stage[hidden] { display: none; }

/* Headings that receive programmatic focus (tabindex=-1) after a stage change:
   no ring for pointer users, the site's ring for keyboard users. */
.page-book .bk-focus:focus:not(:focus-visible) { outline: none; }

.page-book .bk-mono { font-family: var(--mono); font-size: var(--t-small); letter-spacing: -0.01em; }
.page-book .bk-sub { color: var(--ink-3); }
.page-book .bk-pre { white-space: pre-line; }

/* ---------- Steps: the site's .section-head label system ---------- */
.page-book .bk-step + .bk-step { margin-top: var(--bk-step); }

/* ---------- Choice tiles (topic, length) ---------- */
.page-book .bk-opts { display: grid; gap: 10px; }
.page-book .bk-opts--topics { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.page-book .bk-opts--length { display: flex; flex-wrap: wrap; gap: 10px; }
.page-book .bk-opt { position: relative; display: flex; cursor: pointer; }
.page-book .bk-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.page-book .bk-opt__box {
  flex: 1; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 16px 18px;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-book .bk-opt--compact .bk-opt__box { min-height: 0; padding: 14px 22px 14px 16px; }
.page-book .bk-opt__label {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 24;
  font-size: var(--t-lede); line-height: 1.2; letter-spacing: -0.008em; color: var(--ink);
}
/* The indicator echoes the mark: a square that gains an ink core. */
.page-book .bk-opt__mark {
  flex: none; width: 15px; height: 15px;
  border: 1.5px solid var(--ink-4);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.page-book .bk-opt:hover .bk-opt__box, .page-book .bk-opt:hover .bk-opt__mark { border-color: var(--ink-3); }
.page-book .bk-opt input:checked + .bk-opt__box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.page-book .bk-opt input:checked + .bk-opt__box .bk-opt__mark { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--paper-hi); }
.page-book .bk-opt input:focus-visible + .bk-opt__box { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Hints, notes, messages: ink, with the site's small-square marker ---------- */
.page-book .bk-hint, .page-book .bk-msg, .page-book .bk-flash,
.page-book .bk-pick__note[data-tone="error"], .page-book .bk-field__err:not(:empty) {
  font-size: var(--t-small); line-height: 1.5; color: var(--ink);
}
.page-book .bk-hint::before, .page-book .bk-msg::before, .page-book .bk-flash::before,
.page-book .bk-pick__note[data-tone="error"]::before, .page-book .bk-field__err:not(:empty)::before {
  content: ""; display: inline-block; width: 7px; height: 7px; background: var(--ink);
  margin-right: 10px; vertical-align: .12em;
}
.page-book .bk-hint { margin-top: 14px; }
.page-book .bk-msg { margin-top: 18px; max-width: 34em; }
.page-book .bk-msg:empty, .page-book .bk-pick__note:empty { display: none; }
.page-book .bk-pick__note { margin-top: 18px; max-width: 36em; color: var(--ink-2); }
.page-book .bk-flash { margin-top: 18px; }

/* ---------- Picker ---------- */
.page-book .bk-pick__tz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 24px; }
.page-book .bk-pick__key { margin-left: auto; font-size: var(--t-small); }
.page-book .bk-select { position: relative; display: inline-block; max-width: 100%; }
.page-book .bk-select select {
  appearance: none; -webkit-appearance: none;
  max-width: 100%;
  font: 500 var(--t-body)/1.3 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--rule);
  padding: 4px 26px 5px 0;
  cursor: pointer; text-overflow: ellipsis;
  transition: border-color .2s ease;
}
.page-book .bk-select::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg); pointer-events: none;
}
.page-book .bk-select select:hover { border-bottom-color: var(--ink); }
.page-book .bk-select select:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.page-book .bk-pick__grid {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.page-book .bk-cal { min-width: 0; }
.page-book .bk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.page-book .bk-cal__month, .page-book .bk-times__title {
  font-family: var(--serif); font-weight: 420; font-variation-settings: "opsz" 30;
  font-size: var(--t-lede); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.page-book .bk-cal__nav { display: flex; gap: 6px; }
.page-book .bk-icon {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  font-size: var(--t-body); color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
  transition: border-color .18s ease;
}
.page-book .bk-icon:hover:not(:disabled) { border-color: var(--ink); }
.page-book .bk-icon:disabled { color: var(--ink-3); border-style: dashed; border-color: var(--ink-4); cursor: default; }

.page-book .bk-cal__dow, .page-book .bk-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.page-book .bk-cal__dow {
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rule);
  font: 500 var(--t-label)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center;
}
.page-book .bk-cal__days { gap: 4px; }
/* Closed and out-of-range days: --ink-3 text on paper, no fill. Open days are
   raised (paper-hi, rule border, ink) and carry the red "Available" dot. */
.page-book .bk-day {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; min-height: var(--bk-cell);
  padding: 0;
  font: 450 var(--t-small)/1 var(--sans); font-variant-numeric: lining-nums;
  color: var(--ink-3);
  background: transparent; border: 1px solid transparent; border-radius: 0;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.page-book button.bk-day { cursor: default; }
.page-book .bk-day--pad { visibility: hidden; }
.page-book .bk-day.is-open { color: var(--ink); font-weight: 560; background: var(--paper-hi); border-color: var(--rule); cursor: pointer; }
.page-book .bk-day.is-open:hover { border-color: var(--ink); }
.page-book .bk-day.is-today .bk-day__n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.page-book .bk-day__dot { position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: transparent; }
.page-book .bk-day.is-open .bk-day__dot { background: var(--red); }
.page-book .bk-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-book .bk-day[aria-pressed="true"] .bk-day__dot { background: var(--paper); }
.page-book .bk-day:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; z-index: 1; }

.page-book .bk-times { scroll-margin-top: 16px; }
.page-book .bk-times__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 38px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.page-book .bk-times__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.page-book .bk-times__list.is-in { animation: bk-in .36s var(--bk-ease) both; }
.page-book .bk-time {
  font: 560 var(--t-small)/1 var(--sans); font-variant-numeric: lining-nums; color: var(--ink);
  white-space: nowrap;
  padding: 15px 6px 14px;
  background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.page-book .bk-time:hover { border-color: var(--ink); }
.page-book .bk-time[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-book .bk-time:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@keyframes bk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-book .bk-pick[data-loading] .bk-cal__days,
.page-book .bk-pick[data-loading] .bk-times__list { pointer-events: none; animation: bk-pulse 1.4s ease-in-out infinite; }
.page-book .bk-pick[data-loading] .bk-cal__days:empty { min-height: calc(5 * (var(--bk-cell) + 4px)); background: var(--paper-deep); }
.page-book .bk-pick[data-loading] .bk-times__list:empty { min-height: 180px; background: var(--paper-deep); }
@keyframes bk-pulse { 50% { opacity: .45; } }

/* ---------- Summary bar (sticky once a time is picked) ---------- */
.page-book .bk-bar {
  position: relative; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 28px;
  margin-top: var(--bk-step); padding-block: 16px;
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.page-book .bk-bar.is-sticky { position: sticky; }
.page-book .bk-bar__sum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-book .bk-bar__text {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 22;
  font-size: var(--t-lede); line-height: 1.3; color: var(--ink-2);
}
.page-book .bk-bar.is-ready .bk-bar__text { color: var(--ink); }
.page-book .bk-bar__go { flex: none; }
/* Not ready yet: still the page's action, but quiet, and no red hover. */
.page-book .bk-bar:not(.is-ready) .bk-bar__go { background: var(--ink-3); }
.page-book .bk-bar:not(.is-ready) .bk-bar__go:hover { background: var(--ink); }
.page-book .bk-panel .bk-bar { margin-top: 28px; }

/* ---------- Buttons: page states of the stable .button ---------- */
.page-book .button:disabled { cursor: progress; background: var(--ink-3); }
.page-book .button[aria-busy="true"] .ar { display: none; }
/* Secondary action: outlined, ink hover. Never red. */
.page-book .bk-button--quiet,
.page-book .bk-view:has(.bk-panel:not([hidden])) [data-v-live-actions] .button {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.page-book .bk-button--quiet:hover,
.page-book .bk-view:has(.bk-panel:not([hidden])) [data-v-live-actions] .button:hover { background: var(--ink); color: var(--paper); }

.page-book .bk-link {
  font: 560 var(--t-small)/1.3 var(--sans); color: var(--ink);
  background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  border-bottom: 1px solid var(--rule); transition: border-color .2s ease;
}
.page-book .bk-link:hover { border-color: var(--ink); }
.page-book .bk-more-btn { font-family: var(--sans); background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 3px; cursor: pointer; }
.page-book .bk-more-btn:hover { border-color: var(--ink); }
.page-book .bk-more-btn:disabled { color: var(--ink-3); cursor: progress; }

/* ---------- Details: .split (5 | 7) with the meeting ticket on the left ---------- */
.page-book .bk-ticket {
  position: sticky; top: 24px;
  background: var(--paper-hi); border: 1px solid var(--rule);
  padding: var(--bk-pad);
}
.page-book .bk-ticket__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.page-book .bk-ticket__day {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 40;
  font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.016em; color: var(--ink); text-wrap: balance;
}
.page-book .bk-ticket__time {
  margin-top: 8px;
  font-family: var(--serif); font-variation-settings: "opsz" 22;
  font-size: var(--t-lede); line-height: 1.4; color: var(--ink-2);
}

.page-book .bk-form { max-width: 36rem; width: 100%; }
.page-book .bk-field + .bk-field { margin-top: 18px; }
.page-book .bk-field__label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: var(--t-small); font-weight: 560; color: var(--ink); }
.page-book .bk-input {
  display: block; width: 100%;
  font: 400 var(--t-body)/1.4 var(--sans); color: var(--ink);
  background: var(--paper-hi);
  border: 1px solid var(--ink-4); border-radius: 0;
  padding: 13px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.page-book .bk-input::placeholder { color: var(--ink-3); opacity: 1; }
.page-book .bk-input:hover { border-color: var(--ink-3); }
/* Same idiom as the site's notify input: ink border + inset, then the ring. */
.page-book .bk-input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.page-book .bk-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.page-book .bk-input[aria-invalid] { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--ink); }
.page-book .bk-input--area { min-height: 8.5rem; resize: vertical; }
.page-book .bk-field__err:empty { display: none; }
.page-book .bk-field__err { margin-top: 8px; }
.page-book .bk-field__meta { display: flex; justify-content: space-between; gap: 16px; }
.page-book .bk-field__meta .bk-field__err:empty + .bk-count { margin-left: auto; }
.page-book .bk-count { margin-top: 8px; font: 400 var(--t-label)/1.5 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-book .bk-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.page-book .bk-fine { font-size: var(--t-small); color: var(--ink-3); }

/* ---------- Facts (confirmation, manage, ticket) ---------- */
.page-book .bk-facts { margin-top: clamp(36px, 4vw, 52px); max-width: 48rem; border-top: 1px solid var(--rule); }
.page-book .bk-facts > div {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px var(--gap); align-items: baseline;
  padding-block: 15px 14px; border-bottom: 1px solid var(--rule);
}
.page-book .bk-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.page-book .bk-facts--ticket { margin-top: 22px; }
.page-book .bk-facts--ticket > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 16px; padding-block: 10px 9px; }
.page-book .bk-facts--ticket > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Confirmed ---------- */
.page-book .bk-done__title { max-width: 16em; }
.page-book .bk-done__lede { margin-top: clamp(18px, 2vw, 28px); color: var(--ink-2); }
.page-book .bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 44px; margin-top: clamp(32px, 3.4vw, 44px); }
.page-book .bk-actions__cal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
.page-book .bk-actions__cal .label { flex-basis: 100%; }
.page-book .bk-done__manage { margin-top: clamp(36px, 4vw, 52px); padding-top: 18px; border-top: 1px solid var(--rule); }

/* ---------- Offline / no JS / missing link ---------- */
.page-book .bk-offline .split__body { gap: 20px; }
.page-book .bk-offline .page-head__meta { align-items: baseline; gap: 18px 32px; }

/* ---------- Loading skeleton (first paint) ---------- */
.page-book .bk-skel { display: block; background: var(--paper-deep); animation: bk-pulse 1.4s ease-in-out infinite; }
.page-book .bk-skel--label { width: 6em; height: 1em; }
.page-book .bk-skel--block { width: 100%; height: 148px; }
.page-book .bk-skel--line { width: 40%; height: 54px; }
.page-book .bk-skel--title { width: 70%; height: var(--t-h2); margin-top: clamp(20px, 2.4vw, 32px); }
.page-book .bk-skel--lede { width: 45%; height: 1.4em; margin-block: clamp(24px, 2.8vw, 36px) clamp(36px, 4vw, 52px); }

/* ---------- Agent pointer: the site's quiet contact line ---------- */
.page-book .bk-agents { margin-top: var(--bk-step); }
.page-book .bk-agents .label { margin-right: 10px; }

/* ---------- Manage ---------- */
.page-book .bk-manage-actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.page-book .bk--manage .bk-agents { margin-top: clamp(64px, 7vw, 104px); }
.page-book .bk-panel { margin-top: var(--bk-step); }
.page-book .bk-panel__title { margin-bottom: 28px; }
.page-book .bk-panel__body { max-width: 52rem; }
.page-book .bk-panel .bk-opts--length { margin-bottom: 28px; }
.page-book .bk-panel { transition: opacity .32s var(--bk-ease), transform .42s var(--bk-ease); }
.page-book .bk-panel.is-enter { opacity: 0; transform: translateY(10px); transition: none; }
.page-book .bk-strike { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-4); color: var(--ink-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .page-book .bk-pick__grid { grid-template-columns: minmax(0, 1fr); }
  .page-book .bk-times__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .page-book .bk-ticket { position: static; }
  .page-book .bk-facts > div { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-book { --bk-cell: 40px; }
  .page-book .bk-opt__box { min-height: 56px; padding: 14px 16px; }
  .page-book .bk-opts--length { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-book .bk-times__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-book .bk-cal__days { gap: 3px; }
  .page-book .bk-pick__key { margin-left: 0; flex-basis: 100%; }
  .page-book .bk-bar { padding-block: 12px calc(12px + env(safe-area-inset-bottom)); gap: 14px; }
  .page-book .bk-bar__text { font-size: var(--t-body); }
  .page-book .bk-bar__go { padding: 14px 16px; }
  .page-book .bk-form__foot .button { width: 100%; justify-content: center; }
  .page-book .bk-actions { gap: 20px; }
  .page-book .bk-actions > .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .page-book .bk-stage, .page-book .bk-panel, .page-book .bk-day, .page-book .bk-time,
  .page-book .bk-opt__box, .page-book .bk-opt__mark { transition: none; }
  .page-book .bk-times__list.is-in, .page-book .bk-skel,
  .page-book .bk-pick[data-loading] .bk-cal__days,
  .page-book .bk-pick[data-loading] .bk-times__list { animation: none; }
}