/* The Booking form page, the journey chips + timeline, "Also worth a follow-up" (CRM.md: "Booking form (0021)",
   "Journeys and filters", "Lead priority"). Tokens from css/shadcn.css (light and dark). */

.flag--bookform { background: var(--tag-risky-bg); color: var(--tag-risky-fg); }

/* the journey chips (AND) */
.filters--journey { margin-top: 2px; }
.jchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.jchips__label { margin-right: 2px; }
.jchips__and { font: 500 12px var(--f-body); }
.jchip.is-on { box-shadow: 0 0 0 1px var(--ink); }
.chip-btn__n { margin-left: 6px; font: 600 11px var(--f-mono); opacity: 0.7; }

/* the drawer's timeline sentence */
.journey-timeline { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--hover); color: var(--ink); font: 500 12.5px/1.5 var(--f-body); max-width: 62ch; }

/* Leads to call: people with no form yet */
.calls--follow { margin-top: 22px; }
.call--follow { border-style: dashed; }
.call__name--plain { cursor: default; }
.call__name--plain:hover { text-decoration: none; }

/* the Booking form page */
.bookform-view { display: grid; gap: 16px; min-width: 0; }
.bookform-view .view-sub { margin-top: 2px; }
.bf-funnel { padding: 16px 18px; min-width: 0; }
.bf-steps { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 5px; }
.bf-step { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr) 42px 48px; align-items: center; gap: 10px; font: 500 12.5px var(--f-body); }
.bf-step--side { color: var(--muted); }
.bf-step--side .bf-step__label { padding-left: 14px; font-style: italic; }
.bf-step__bar { height: 9px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bf-step__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--yellow)); }
.bf-step--side .bf-step__fill { background: var(--dash); }
.bf-step__n { text-align: right; font-weight: 600; }
.bf-step__pct { text-align: right; font-size: 11.5px; }

.bf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; min-width: 0; }
.bf-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--card-shadow); cursor: pointer; min-width: 0; }
.bf-card:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.bf-card.is-selected { box-shadow: 0 0 0 2px var(--ring); }
.bf-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bf-card__head .call__name { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.bf-card .call__sub { margin: 0; }
.bf-card__call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 500 13px var(--f-body); }
.bf-card__call .icon { width: 15px; height: 15px; }
.bf-card__none { margin: 0; color: var(--muted); font: 500 12.5px/1.5 var(--f-body); }
.bf-answers { display: grid; gap: 4px; margin: 0; }
.bf-answers > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font: 500 12.5px/1.45 var(--f-body); }
.bf-answers dt { color: var(--muted); }
.bf-answers dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bf-words { display: block; margin-top: 2px; color: var(--muted); font-style: italic; quotes: '“' '”'; }
.bf-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.bf-card .call__contact { flex-wrap: wrap; }
.bf-block .d-sec__title { margin: 0 0 4px; }

@media (max-width: 640px) {
  .bf-list { grid-template-columns: minmax(0, 1fr); }
  .bf-step { grid-template-columns: minmax(0, 1fr) 34px 40px; row-gap: 3px; }
  .bf-step__bar { grid-column: 1 / -1; grid-row: 2; }
  .bf-funnel { padding: 14px; }
}