/* ============================================================================
   parity-bookings.css — BOOKINGS · TICKETS · GUEST LIST (docs/parity/10-bookings.md)
   Loaded after css/backline.css. Tokens only: no new palette, no literal
   colours, no second modal pattern (the sheets reuse .pch-modal-scrim).
   Sections:
     1  The money rail (the cluster's signature element)
     2  Banners, gates, notes
     3  Fields + sheets
     4  The book — list rows, sections, truncation
     5  Booking detail — hero, ledger, services, engineers
     6  The five-step pipeline
     7  Ticket queues — segmented counts, rows, undo bar
     8  Ticket thread — bubbles, events, attachments, composer
     9  Guest list — count tiles, roster rows
    10  Desktop lanes (≥1024) + reduced motion + focus
   ============================================================================ */

/* --- 1 · the money rail --------------------------------------------------- */
/* One right-aligned mono column carries the amount everywhere in this cluster,
   so "what is owed" reads down a single vertical line. Colour is spent here
   and, in a list row, nowhere else. */
.bk-money {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.bk-money.bad { color: var(--bad); }
.bk-money.ok { color: var(--ok); }
.bk-money.mut { color: var(--mut); }
.bk-money.lg { font-size: 15px; }

.bk-hero-amount {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.bk-hero-amount.bad { color: var(--bad); }
.bk-hero-amount.ok { color: var(--ok); }
.bk-hero-label {
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mut);
}

/* --- 2 · banners, gates, notes -------------------------------------------- */
.bk-banner {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
}
.bk-banner svg { flex-shrink: 0; margin-top: 1px; }
.bk-banner-text { flex: 1 1 0; min-width: 0; }
.bk-banner-text div + div { margin-top: 3px; }
.bk-banner.bad { border-color: var(--redStroke2); color: var(--ink2); }
.bk-banner.bad svg { color: var(--bad); }
.bk-banner.warn { border-color: var(--amberStroke); color: var(--ink2); }
.bk-banner.warn svg { color: var(--warn); }
.bk-banner.ok { border-color: var(--okStroke); color: var(--ink2); }
.bk-banner.ok svg { color: var(--ok); }

.bk-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: none; background: none; color: var(--mut); cursor: pointer;
  border-radius: 999px;
}
.bk-x:hover { color: var(--ink2); }

.bk-gate { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.bk-gate-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.bk-gate-body { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--mut); }

.bk-director-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--mut);
}
.bk-director-note svg { color: var(--dim); flex-shrink: 0; }

.bk-note-strip {
  width: 100%; border-radius: 12px; padding: 9px 12px;
  background: var(--surf2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink2);
}
.bk-note-strip.ok { border-color: var(--okStroke); color: var(--ok); }
.bk-note-strip.bad { border-color: var(--redStroke2); color: var(--bad); }

/* --- 3 · fields + sheets --------------------------------------------------- */
.bk-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bk-field-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--mut);
}
.bk-field-hint { font-size: 11px; font-weight: 500; color: var(--mut); line-height: 1.4; }

.bk-input, .bk-textarea {
  width: 100%;
  background: var(--surf2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 13px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  outline: none;
}
.bk-input::placeholder, .bk-textarea::placeholder { color: var(--mut); }
.bk-input:focus, .bk-textarea:focus { border-color: var(--violetStroke); }
.bk-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.bk-input.mono { font-family: var(--mono); letter-spacing: 1px; }

.bk-search input { font-size: 16px; }
.bk-search { padding-right: 8px; }

.bk-sheet { max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; }
.bk-consequences {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.bk-consequences li {
  position: relative; padding-left: 14px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink2);
}
.bk-consequences li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--warn);
}
.bk-sheet-scroll { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; }

.bk-chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }

/* --- 4 · the book ---------------------------------------------------------- */
.bk-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bk-row-right { display: flex; align-items: center; gap: 8px; }
.bk-row-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.bk-chip-mini {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 2px 8px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.4px;
  background: var(--surf2); border: 1px solid var(--line); color: var(--mut);
  white-space: nowrap;
}
.bk-chip-mini.bad { border-color: var(--redStroke2); color: var(--bad); background: var(--badSoft); }
.bk-chip-mini.warn { border-color: var(--amberStroke); color: var(--warn); background: var(--warnSoft); }
.bk-chip-mini.ok { border-color: var(--okStroke); color: var(--ok); background: var(--okSoft); }
.bk-chip-mini.teal { border-color: var(--tealStroke); color: var(--teal); background: var(--tealSoft); }
.bk-chip-mini.violet { border-color: var(--violetStroke); color: var(--violet2); background: var(--violetSoft); }

.bk-strip { width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.bk-strip .channel-strip { width: 100%; }
.bk-strip .cs-mid { min-width: 0; }
.bk-strip .cs-title, .bk-strip .cs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-strip.cancelled .channel-strip { opacity: 0.62; }

.bk-truncation { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bk-truncation .bk-trunc-title { font-size: 13px; font-weight: 700; color: var(--warn); }
.bk-truncation .bk-trunc-body { font-size: 12px; font-weight: 500; color: var(--mut); line-height: 1.45; }

.bk-rangebar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--mut);
}
.bk-rangebar button { background: none; border: none; color: var(--teal); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; }

.bk-fab-row { display: flex; gap: 8px; width: 100%; }
/* .btn-warn carries no flex of its own, so an icon inside one would sit flush
   against its label. These rows own the alignment for every button they hold. */
.bk-fab-row > * { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* --- 5 · booking detail ---------------------------------------------------- */
.bk-hero { display: flex; flex-direction: column; gap: 8px; }
.bk-hero-name { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.bk-hero-when { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.bk-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.bk-money-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bk-action-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.bk-action { display: flex; flex-direction: column; gap: 3px; flex: 1 1 168px; min-width: 0; }
.bk-action-detail { font-size: 10.5px; font-weight: 500; color: var(--mut); line-height: 1.35; }
.bk-action button, .bk-action a { width: 100%; justify-content: center; }
.bk-action button[disabled] { opacity: 0.45; cursor: not-allowed; }

.bk-ledger { display: flex; flex-direction: column; margin-top: 10px; }
.bk-ledger .prof-v { font-variant-numeric: tabular-nums; }
.bk-ledger .prof-row.muted .prof-k, .bk-ledger .prof-row.muted .prof-v { color: var(--mut); }

.bk-svc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 9px 0; cursor: pointer; }
.bk-svc-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-svc-title { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-svc-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-stepper { display: flex; align-items: center; gap: 10px; }
.bk-stepper button {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--surf3); border: 1px solid var(--line2); color: var(--ink);
  font-size: 18px; font-weight: 700; cursor: pointer;
}
.bk-stepper button[disabled] { opacity: 0.4; cursor: not-allowed; }
.bk-stepper .bk-stepper-val {
  flex: 1 1 0; text-align: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; color: var(--ink);
}

.bk-unsafe-times {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink2);
  background: var(--surf2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; margin-top: 7px;
  white-space: pre-wrap; word-break: break-word;
}

/* --- 6 · the five-step pipeline -------------------------------------------- */
.bk-steps { display: flex; flex-direction: column; gap: 8px; }
.bk-step { display: flex; gap: 11px; align-items: flex-start; }
.bk-step-index {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--surf2); border: 1px solid var(--line); color: var(--mut);
}
.bk-step.current .bk-step-index { border-color: var(--violetStroke); color: var(--violet2); background: var(--violetSoft); }
.bk-step.closed .bk-step-index { border-color: var(--okStroke); color: var(--ok); background: var(--okSoft); }
.bk-step.auto .bk-step-index { border-color: var(--tealStroke); color: var(--teal); background: var(--tealSoft); }
.bk-step-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-step-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.bk-step.ahead .bk-step-title { color: var(--mut); }
.bk-step-sub { font-size: 11px; font-weight: 500; color: var(--mut); }
.bk-step-sub.auto { color: var(--teal); }
.bk-step-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.bk-step-note { font-size: 11.5px; font-weight: 500; color: var(--ink2); line-height: 1.45; margin-top: 4px; }

.bk-context { display: flex; flex-direction: column; gap: 9px; }
.bk-context-q { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); }
.bk-context-a { font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.45; }

.bk-urgency {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px;
  color: var(--mut); text-transform: uppercase;
}
.bk-urgency.urgent { color: var(--bad); }
.bk-urgency.warn { color: var(--warn); }

/* --- 7 · ticket queues ------------------------------------------------------ */

/* The header is a figure, not a noun. Icon tile left, count right, and one mono
   line under it carrying the breakdown — the signature of this screen. */
.bk-hdr-row { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; }
.bk-hdr-mid { flex: 1 1 0; min-width: 0; }
.bk-counts-line {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
  color: var(--mut); line-height: 1.4;
}

.bk-seg-count {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--mut);
}
.seg.active .bk-seg-count { color: var(--violet2); }
.bk-seg-count.hot { color: var(--bad); }

.bk-tk-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.bk-tk-card { display: flex; align-items: center; gap: 11px; width: 100%; }
.bk-tk-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-tk-title { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-tk-snippet { font-size: 11.5px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-tk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.bk-tk-age { font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.bk-tk-age.warm { color: var(--warn); }
.bk-tk-age.hot { color: var(--bad); }
.bk-tk-actions { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.bk-tk-meta {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--mut);
}

/* A settled thread — closed or archived — reads quiet: recessed onto the page
   ground, title demoted a step, no accent left on it. Dimmed by 0.85 rather than
   the app's 0.55, because 0.55 drops the snippet under 4.5:1 on this surface and
   an unreadable row is not a quiet row. Full voice on hover and focus. */
.bk-tk-card.quiet {
  opacity: 0.85;
  background: var(--bg2);
  border-color: var(--hair);
}
.bk-tk-card.quiet .bk-tk-title { color: var(--ink2); font-weight: 600; }
.bk-tk-card.quiet:hover, .bk-tk-card.quiet:focus-within { opacity: 1; }

/* A refresh that failed while rows are on screen. The rows stay; this sits above
   them and offers the retry, so a stalled queue is never silent. */
.bk-refresh-err {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border-color: var(--redStroke); background: var(--badSoft);
}
.bk-refresh-err-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-refresh-err-t { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.bk-refresh-err-s { font-size: 11.5px; font-weight: 500; color: var(--mut); line-height: 1.45; }
.bk-refresh-err .btn-glass { flex-shrink: 0; }

/* The second line of an empty queue: the sentence that says WHY it is empty. */
.bk-state-hint {
  font-size: 11.5px; font-weight: 500; color: var(--mut);
  line-height: 1.5; max-width: 300px; opacity: 0.9;
}
.state .state-msg + .bk-state-hint { margin-top: -2px; }
.state.bk-state2 { gap: 9px; padding-bottom: 40px; }
.state.bk-state2 .state-msg { font-size: 15px; font-weight: 700; color: var(--ink); max-width: 300px; }

.bk-daytile {
  width: 46px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: var(--surf2); border: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink2); line-height: 1.15;
}
.bk-daytile.urgent { border-color: var(--redStroke); color: var(--bad); }
.bk-daytile.warn { border-color: var(--amberStroke); color: var(--warn); }

.bk-progress { display: inline-flex; gap: 3px; align-items: center; }
.bk-progress i {
  width: 12px; height: 3px; border-radius: 2px; background: var(--line2); display: block;
}
.bk-progress i.on { background: var(--ok); }

.bk-undo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 12px; padding: 10px 12px;
  background: var(--surf3); border: 1px solid var(--line2);
  font-size: 12.5px; font-weight: 600; color: var(--ink2);
}
.bk-undo button { background: none; border: none; color: var(--teal); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 6px; }

/* the compact Today card, exported by tickets.js */
.bk-today-card { display: flex; flex-direction: column; gap: 9px; }
.bk-today-row { display: flex; align-items: center; gap: 10px; }
.bk-today-num { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; color: var(--ink); }
.bk-today-num.bad { color: var(--bad); }
.bk-today-lbl { font-size: 11px; font-weight: 500; color: var(--mut); }

/* --- 8 · ticket thread ------------------------------------------------------ */
.bk-thread { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.bk-bubble {
  max-width: 84%; align-self: flex-start;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px; padding: 9px 12px;
  font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.bk-bubble.out {
  align-self: flex-end;
  background: var(--violetSoft); border-color: var(--violetStroke2); color: var(--ink);
  border-radius: 16px 16px 4px 16px;
}
.bk-bubble.pending { opacity: 0.66; }
.bk-bubble-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-family: var(--mono); font-size: 9.5px; color: var(--mut);
}
.bk-bubble-meta .spinner { width: 11px; height: 11px; border-width: 1.5px; }
.bk-event {
  align-self: center; max-width: 88%; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 12px; border-radius: 12px;
  background: var(--surf2); border: 1px solid var(--hair);
}
.bk-event-label { font-size: 11px; font-weight: 700; color: var(--ink2); }
.bk-event-body { font-size: 11.5px; font-weight: 500; color: var(--mut); line-height: 1.4; white-space: pre-wrap; }

.bk-att { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.bk-att img { max-width: 100%; height: auto; border-radius: 10px; display: block; border: 1px solid var(--line); }
.bk-att-file {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--mut);
}
.bk-att-skel { width: 180px; height: 120px; border-radius: 10px; }

.bk-composer { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.bk-composer .bk-textarea { min-height: 46px; max-height: 140px; border-radius: 14px; }
.bk-composer .bk-send {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 999px;
  background-image: var(--grad-btn); border: none; color: var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bk-composer .bk-send[disabled] { opacity: 0.45; cursor: not-allowed; }
.bk-noreply {
  width: 100%; border-radius: 12px; padding: 11px 13px;
  background: var(--surf2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--mut); line-height: 1.45;
}
.bk-dryrun {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
  color: var(--warn);
}

/* --- 9 · guest list --------------------------------------------------------- */
.bk-guest-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.bk-guest-tick {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf2); border: 1px solid var(--line); color: var(--dim);
}
.bk-guest-tick.in { background: var(--okSoft); border-color: var(--okStroke); color: var(--ok); }
.bk-guest-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-guest-name { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-guest-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-guest-when { font-family: var(--mono); font-size: 10.5px; color: var(--ok); flex-shrink: 0; }
.bk-guest-row[aria-busy='true'] { opacity: 0.6; }
.bk-helper { font-size: 12px; font-weight: 500; color: var(--mut); line-height: 1.45; }

/* --- 10 · desktop lanes, motion, focus -------------------------------------- */
@media (min-width: 1024px) {
  /* Two lanes rather than a stretched phone: the record on the left, the money
     and the actions in a rail that stays put while the list scrolls. */
  .bk-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr); gap: 18px; align-items: start; }
  .bk-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 11px; }
  .bk-action { flex: 1 1 100%; }
  .bk-sticky-mobile { display: none; }
  .bk-list.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 1023px) {
  .bk-rail-desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-money, .bk-step, .bk-bubble { transition: none !important; }
}

.bk-strip:focus-visible,
.bk-tk-row:focus-visible,
.bk-guest-row:focus-visible,
.bk-svc-row:focus-visible,
.bk-x:focus-visible,
.bk-stepper button:focus-visible,
.segmented .seg:focus-visible,
.bk-composer .bk-send:focus-visible,
.bk-input:focus-visible,
.bk-textarea:focus-visible {
  outline: 2px solid var(--violet2);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Hit targets: 44px on the phone lane for everything tappable in a dark room. */
@media (max-width: 1023px) {
  .bk-tk-actions button, .bk-x, .bk-guest-tick { min-width: 44px; min-height: 44px; }
  .bk-x { width: 44px; height: 44px; }
}

/* --- 11 · lane ordering + late additions ------------------------------------ */
/* The rail carries the money. On the phone it must come FIRST (what is owed is
   the reason the screen was opened); at >=1024 `order` puts it back on the right
   without a second DOM. */
@media (min-width: 1024px) {
  .bk-split > .bk-lane { order: 1; min-width: 0; }
  .bk-split > .bk-rail { order: 2; }
}
.bk-lane { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.bk-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.bk-kv + .bk-kv { border-top: 1px solid var(--hair); }
.bk-kv-k { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mut); }
.bk-kv-v { font-size: 13px; font-weight: 600; color: var(--ink2); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.bk-kv-v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.bk-picklist { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bk-picklist.bk-sheet-scroll { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.bk-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border-radius: 12px; padding: 10px 12px; cursor: pointer;
  background: var(--surf2); border: 1px solid var(--line); color: var(--ink2);
}
.bk-pick.sel { border-color: var(--violetStroke); background: var(--violetSoft); }
.bk-pick-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-pick-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.bk-pick-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); overflow-wrap: anywhere; }
.bk-pick:focus-visible { outline: 2px solid var(--violet2); outline-offset: 2px; }

.bk-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.bk-toggle input { width: 18px; height: 18px; accent-color: var(--violet2); flex-shrink: 0; }

.bk-select {
  width: 100%; border-radius: 11px; padding: 10px 11px;
  background: var(--surf2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: 16px; font-weight: 600;
}
.bk-select:focus-visible { outline: 2px solid var(--violet2); outline-offset: 2px; }
.bk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }

.bk-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk-summary-num { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }

/* A queue row is a button next to its own action buttons: no nested buttons,
   no anchor wrapping a control. The row grows, the actions never shrink. */
.bk-tk-card > .bk-tk-row { flex: 1 1 0; min-width: 0; width: auto; }
.bk-tk-actions button {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--mut); padding: 6px 10px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.bk-tk-actions button:hover { color: var(--ink2); border-color: var(--line2); }
.bk-tk-actions button:focus-visible { outline: 2px solid var(--violet2); outline-offset: 2px; }
.bk-tk-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The one current step is stroked violet. Exactly one card carries it. */
.bk-step-card.current { border-color: var(--violetStroke); }
.bk-step-card.ahead { opacity: 0.72; }
.bk-stale { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--warn); }
.bk-footer { display: flex; gap: 8px; width: 100%; }
.bk-footer > * { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; }

/* A .sticky-cta pins itself above the tab bar, which means the last card in a
   long scroller would sit under it permanently — the bar has to have somewhere
   to come to rest. Only needed while the CTA is sticky (backline turns it static
   at 821px). */
@media (max-width: 820px) {
  .bk-cta-clear { padding-bottom: 92px; }
}

/* --- 12 · the confirm layer + the cancelled lock ---------------------------
   Every money write on booking detail states its dollars in a sheet before it
   fires, and a cancelled booking is a record rather than a form. Both need the
   same two things: a subtitle that says WHICH booking, and a one-line reason
   sitting next to whatever is disabled. No new palette, no new radius. */

.bk-sheet-sub {
  font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--mut);
  margin-top: -6px;
}

/* The reason a primary is disabled, directly above the button it explains. */
.bk-sheet-note {
  font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--warn);
  border-left: 2px solid var(--amberStroke); padding-left: 9px;
}

/* Never a disabled control on its own: this says why, wherever one appears. */
.bk-lock-note {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
  font-size: 11.5px; font-weight: 500; line-height: 1.45; color: var(--mut);
}
.bk-lock-note svg { color: var(--dim); flex-shrink: 0; margin-top: 2px; }

/* A locked service or engineer row keeps the information and drops the affordance. */
.bk-svc-static { cursor: default; opacity: 0.72; }

/* What this line will bill if the sheet is saved as it stands. */
.bk-price-preview {
  font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
  line-height: 1.45; color: var(--mut);
}
.bk-price-preview.changed { color: var(--ink2); }

.bk-extend-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.bk-extend-row .bk-stepper { flex-shrink: 0; }

/* A trim is not an error, so it is amber rather than red: it takes money OFF
   the booking, which is a decision worth seeing, not a failure. */
.bk-stepper-val.down { color: var(--warn); }
.bk-summary-num.up { color: var(--ok); }
.bk-summary-num.down { color: var(--warn); }
.bk-summary-num { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .bk-extend-row { flex-wrap: wrap; }
  .bk-extend-row .bk-stepper { width: 100%; justify-content: space-between; }
}