/* Port lane W9 (docs/SPEC-port-2026-09-23.md). This lane owns this file alone;
   app.css stays untouched while the port runs. Tokens only from app.css/themes.css.

   F13 — "booking is a conversation" (tradescom-book), drawn in
   web/src/booking-sheet.js. Reference: the job-screen spec's four rules
   (DESIGN-STANDARD.md) — one primary action, tools always visible, everything
   else one line with the answer on it, no scrolling on a phone-height sheet. */

.bkc-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
}

.bkc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.bkc-head h3 { margin: 0; }
.bkc-head-actions { display: flex; gap: var(--space-2); }

.bkc-loading { padding: var(--space-6) var(--space-3); text-align: center; color: var(--ink-dim); }

.bkc-known-who { display: flex; align-items: baseline; gap: var(--space-2); }
.bkc-known-name { font-size: var(--text-heading); font-weight: var(--w-bold); }
.bkc-known-phone { font-size: var(--text-caption); color: var(--ink-dim); }
.bkc-known-thread { margin: 0; font-size: var(--text-caption); color: var(--ink-dim); }

.bkc-notes { margin: 0; padding-left: var(--space-4); font-size: var(--text-label); }
.bkc-notes li { margin-bottom: var(--space-1); }

.bkc-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.bkc-facts dt { font-size: var(--text-caption); color: var(--ink-dim); }
.bkc-facts dd { margin: 0; font-size: var(--text-label); }

.bkc-existing { margin: 0; font-size: var(--text-caption); color: var(--money); }

/* A soft warning — never blocks, never the same weight as the one thing to
   do. Same amber-on-soft pairing as everywhere else a conflict is flagged
   rather than silently picked. */
.bkc-warn {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--attention-soft);
}
.bkc-warn p { margin: 0 0 var(--space-2); font-size: var(--text-label); color: var(--ink); }
.bkc-warn-line { margin: 0; font-size: var(--text-caption); color: var(--attention); }

.bkc-question-prompt { margin: 0 0 var(--space-3); font-size: var(--text-body); font-weight: var(--w-semi); }
.bkc-options { flex-wrap: wrap; }
.bkc-target-options { flex-direction: column; align-items: stretch; }
.bkc-target-options .ts-btn { text-align: left; justify-content: flex-start; }

.bkc-target-line { margin: 0 0 var(--space-1); font-size: var(--text-body); }

/* Rule zero (Zach, 2026-09-22): on-site vs off-site must be impossible to
   confuse anywhere in the app — never a small label, a full banner in the
   opposite colour that states the consequence, not just names it. */
.bkc-kind-chips { margin-bottom: var(--space-2); }
.bkc-kind-banner {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 2px solid var(--action);
  background: var(--surface-2);
}
.bkc-kind-banner.bkc-kind-offsite { border-color: var(--action); }
.bkc-kind-banner.bkc-kind-onsite { border-color: var(--money); }
.bkc-kind-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.bkc-kind-onsite .bkc-kind-title,
.bkc-kind-banner.bkc-kind-onsite .bkc-kind-title { color: var(--money); }
.bkc-kind-offsite .bkc-kind-title,
.bkc-kind-banner.bkc-kind-offsite .bkc-kind-title { color: var(--action); }
.bkc-kind-detail { margin: 0; font-size: var(--text-caption); color: var(--ink-dim); }
.bkc-offsite-note { margin: 0; font-size: var(--text-caption); color: var(--ink-dim); }

.bkc-when-line { margin: 0; font-size: var(--text-body); font-weight: var(--w-semi); }
.bkc-when { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bkc-when-editor { display: flex; flex-direction: column; gap: var(--space-2); }
.bkc-hour-chips { flex-wrap: wrap; }

.bkc-crew { display: flex; flex-direction: column; gap: var(--space-1); }
.bkc-crew-select {
  min-height: var(--tap-comfortable);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.bkc-crew-reason { margin: 0; font-size: var(--text-caption); color: var(--ink-dim); }

.bkc-contact p { margin: 0; }

.bkc-confirm { display: flex; flex-direction: column; gap: var(--space-2); }
.bkc-confirm-btn { width: 100%; }

.bkc-written { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; padding: var(--space-4) 0; }
.bkc-written-check { margin: 0; font-size: var(--text-heading); font-weight: var(--w-bold); color: var(--money); }
.bkc-readback { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); text-align: left; width: 100%; margin: 0; }
.bkc-readback dt { font-size: var(--text-caption); color: var(--ink-dim); }
.bkc-readback dd { margin: 0; font-size: var(--text-label); font-weight: var(--w-semi); }