/* /connect demo: the flows' cards (a08-flows; round two b4-widget), inside the widget's transcript. After
   src/templates/widget-desktop.html (.suggestion-buttons, #waiting-timer, #waiting-timeout-offer, .lead-capture-form,
   .booking-wizard). The widget (widget.css) gives each card its row: a bot row with the grey bubble, or a centred row for
   the waiting timer.
   PRODUCT SKIN (c4-10): the handoff suggestion's four buttons, the three-minute offer's three and the waiting timer wear
   the product's own fills, declared as the --fx-* custom properties directly below: the only raw hex in this file (as
   team.css does for Slack). All four keep the product's white ink, Accept included
   (.accept-btn is white on #22c55e in the widget; owner, 2026-10-02). Sizes are the product's (12px bold, 20px radius), two
   by two as its buttons wrap in its bubble, with the demo's 40px floor (44px under a finger). Hover moves colour only
   (the product's darker fill, no lift); the ring is the stage's.
   Everything else is a token: the form's primary is the business's own colour (--tenant). Hover moves colour and border
   only, inside (hover:hover); nothing changes size with its state. The fields are 16px type (no zoom on a phone). */

.dcf {
  --fx-accept: #22C55E; --fx-accept-hover: #16A34A;
  --fx-callback: #8B5CF6; --fx-callback-line: #7C3AED; --fx-callback-hover: #7C3AED;
  --fx-booking: #2196F3; --fx-booking-line: #1976D2; --fx-booking-hover: #1976D2;
  --fx-decline: #EF4444; --fx-decline-line: #DC2626; --fx-decline-hover: #DC2626;
  --fx-ink: #FFFFFF;
  --fx-wait-bg: #E3F2FD; --fx-wait-ink: #1565C0; --fx-wait-line: #90CAF9;
  --fx-r: 20px;
  --dcf-w: 264px; --dcf-ctl: 40px; font-family: var(--ff); font-size: var(--widget-fs); line-height: 1.6; color: var(--navy); }
.dcf[hidden] { display: none !important; }
.dcf *, .dcf *::before, .dcf *::after { box-sizing: border-box; }
.dcf [hidden] { display: none !important; }
.dcf p { margin: 0; }
/* the cards that sit in a bubble keep one width through every state (a form never jumps between its steps) */
.dcf-offer, .dcf-timeout, .dcf-leadform, .dcf-booking { width: var(--dcf-w); max-width: 100%; }
.dcf-p { margin: 0; overflow-wrap: anywhere; }

/* ---------- the buttons (.suggestion-buttons): the product's row, centred, the product's order ---------- */
.dcf-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.dcf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--dcf-ctl);
  margin: 0; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--ff); font-size: 13px;
  font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease-std), border-color var(--t-hover) var(--ease-std), color var(--t-hover) var(--ease-std); }
/* two by two, as the product's own buttons wrap in its bubble (flex: 1 at most 110px wide fits two a row there; the demo's
   card is a little wider, so the rule is spelled out) and as the details page draws the same card: equal halves, a label
   on one line or two (a word never breaks inside a button), the product's 12px bold and 20px radius (c2r2-03). An odd
   last button (the busy offer's third) keeps its half, centred under the others */
.dcf-btns > .dcf-btn { flex: 0 0 calc(50% - 4px); min-width: 0; max-width: none; padding: 8px 10px; border-radius: var(--fx-r); font-size: 12px; line-height: 1.3; overflow-wrap: normal; text-wrap: balance; }
.dcf-btn:disabled { cursor: default; }
.dcf-primary { background: var(--connect); border-color: var(--connect); color: var(--navy); }
.dcf-outline { background: var(--surface); border-color: var(--ctl-line); color: var(--navy); }
.dcf-quiet { background: transparent; border-color: var(--mute); color: var(--body); }
/* the product skin: accept-btn, callback-btn, booking-btn, decline-btn */
.dcf-fx-accept { background: var(--fx-accept); border-color: var(--fx-accept); color: var(--fx-ink); }
.dcf-fx-callback { background: var(--fx-callback); border-color: var(--fx-callback-line); color: var(--fx-ink); }
.dcf-fx-booking { background: var(--fx-booking); border-color: var(--fx-booking-line); color: var(--fx-ink); }
.dcf-fx-decline { background: var(--fx-decline); border-color: var(--fx-decline-line); color: var(--fx-ink); }
/* after a choice: the chosen button stays where it was, pressed (its fill under the press shade, a navy ring inside its
   edge); the others stay in place, retired (dimmed, disabled), so the card keeps its height (c1-10) and reads as
   answered, never as a hole (c2r2-03, c5r2-04). Colour only */
.dcf-btn.dcf-chosen { cursor: default; box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 999px rgba(11,29,58,.12); }
.dcf-btn.dcf-retired { opacity: .3; }

/* ---------- waiting for the team (#waiting-timer): centred, the product's blue pill ---------- */
.dcf-waiting { display: flex; justify-content: center; width: 100%; }
.dcf-wait { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; padding: 12px 20px;
  border: 1px solid var(--fx-wait-line); border-radius: var(--widget-bubble-r); background: var(--fx-wait-bg);
  color: var(--fx-wait-ink); font-size: 14px; line-height: 1.4; text-align: center; }
.dcf-wait-title { font-weight: 700; }
.dcf-wait-line { font-size: 12px; white-space: nowrap; }
/* the pill keeps one size (the title is its widest line); the time line is centred under it, digits tabular */
.dcf-wait-time { font-variant-numeric: tabular-nums; }

/* ---------- the four fields (.lead-capture-form) ---------- */
.dcf-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.dcf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dcf-field label { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--body); }
.dcf-input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--ctl-line);
  border-radius: var(--r-control); background: var(--surface); color: var(--navy); font-family: var(--ff); font-size: 16px; line-height: 1.4;
  transition: border-color var(--t-hover) var(--ease-std), background-color var(--t-hover) var(--ease-std); }
.dcf-input:focus { border-color: var(--tenant); }
.dcf-input.dcf-typing { border-color: var(--tenant); }
.dcf-input.dcf-invalid { border-color: var(--error); }
.dcf-input[readonly], .dcf-locked .dcf-input { border-color: var(--line); background: var(--surface-2); color: var(--body); }
.dcf-err { font-size: 12px; line-height: 1.4; color: var(--error); overflow-wrap: anywhere; }
.dcf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dcf-actions > .dcf-btn { flex: 1 1 0; }
.dcf-submit { background: var(--tenant); border-color: var(--tenant); color: var(--surface); }
.dcf-submit:disabled { background: var(--mute); border-color: var(--mute); color: var(--navy); }
.dcf-submit.dc-pressed { --dc-press-ink: transparent; background: var(--tenant-2); border-color: var(--tenant-2); }

/* ---------- the booking wizard (.booking-wizard) ---------- */
.dcf-wizard { display: flex; flex-direction: column; }
.dcf-stage { display: flex; flex-direction: column; gap: 12px; }
.dcf-stage.dcf-fresh { animation: dcf-in var(--t-fade) var(--ease-out) both; }
@keyframes dcf-in { from { opacity: 0; } to { opacity: 1; } }
.dcf-step { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.dcf-dim { font-weight: 400; color: var(--meta); }
.dcf-loading { min-height: var(--dcf-ctl); display: flex; align-items: center; font-size: 13px; color: var(--meta); }
.dcf-options { display: flex; flex-direction: column; gap: 8px; }
.dcf-btn.dcf-option { justify-content: flex-start; width: 100%; min-height: 44px; padding: 8px 12px; border-color: var(--line);
  border-radius: var(--r-small); background: var(--surface); color: var(--navy); text-align: left; }
.dcf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dcf-btn.dcf-chip { padding: 4px 14px; border-color: var(--tenant); background: var(--surface); color: var(--tenant); }
.dcf-btn.dcf-chip.dcf-more { border-style: dashed; }
.dcf-bactions { display: flex; gap: 8px; }
.dcf-btn.dcf-small { flex: 0 0 auto; padding: 4px 12px; border-color: var(--line); background: var(--line); color: var(--body); font-size: 12px; }
.dcf-actions > .dcf-btn.dcf-small { flex: 0 0 auto; }

/* ---------- hover: colour and border only, never size ---------- */
@media (hover:hover) {
  .dcf-fx-accept:not(:disabled):hover { background: var(--fx-accept-hover); border-color: var(--fx-accept-hover); }
  .dcf-fx-callback:not(:disabled):hover { background: var(--fx-callback-hover); }
  .dcf-fx-booking:not(:disabled):hover { background: var(--fx-booking-hover); }
  .dcf-fx-decline:not(:disabled):hover { background: var(--fx-decline-hover); }
  .dcf-primary:not(:disabled):hover { background: var(--connect-bright); border-color: var(--connect-bright); }
  .dcf-outline:not(:disabled):hover { background: var(--ground); border-color: var(--navy); }
  .dcf-quiet:not(:disabled):hover { border-color: var(--ctl-line); color: var(--navy); }
  .dcf-submit:not(:disabled):hover { background: var(--tenant-2); border-color: var(--tenant-2); }
  .dcf-option:not(:disabled):hover { border-color: var(--tenant); }
  .dcf-chip:not(:disabled):hover { background: var(--tenant); color: var(--surface); }
  .dcf-small:not(:disabled):hover { background: var(--mute); color: var(--navy); }
  .dcf-input:not([readonly]):not(.dcf-invalid):not(:focus):hover { border-color: var(--navy); }
}

/* ---------- a finger: every control 44px ---------- */
@media (pointer: coarse) {
  .dcf { --dcf-ctl: 44px; }
}