/* Trip builder — the /plan funnel. A dark navy shell (meta bar, steps, sidebar,
   trust strip) wrapping a light cream picker workspace. The page carries
   .bx-dark; the picker carries .bx-light-surface so its cards read light
   tokens. All colors compose from semantic tokens / brand rgb channels. */

.bido-builder-page {
  min-height: 100svh;
  background-color: var(--bx-paper);
  background-image:
    radial-gradient(ellipse 60% 50% at 12% 6%, rgba(var(--bx-accent-rgb), 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 24%, rgba(var(--bx-teal-rgb), 0.08), transparent 60%);
}

.bido-builder-shell {
  max-width: 84rem;
  margin-inline: auto;
  padding: 22px 32px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== Trip meta bar — the .bido-trip-form restyled in place ===== */
.bido-builder-meta {
  margin: 0;
}

/* ===== Steps card ===== */
.bido-builder-steps {
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 22px 24px;
  box-shadow: var(--bx-shadow-soft);
}

.bido-builder-steps-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bido-builder-steps-title {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--bx-ink);
}

.bido-builder-steps-title em {
  font-style: normal;
  color: var(--bx-accent-ink);
}

.bido-builder-progress-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--bx-text-md);
  color: var(--bx-ink-3);
}

.bido-builder-progress-meter strong {
  color: var(--bx-ink);
  font-weight: 800;
}

/* Width modifier on the shared `.prog` indicator — the builder header always
   wants a fixed 140px bar even when the container is wider. */
.bido-builder-pbar {
  inline-size: 140px;
  block-size: 6px;
}

/* Steps reflow 4 → 2 → 1 on container width (Rule 7). */
.bido-builder-steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 10px;
}

.bido-builder-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: var(--bx-fill);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.bido-builder-step.active {
  border-color: var(--bx-accent);
  background: var(--bx-accent-soft);
  box-shadow: 0 0 0 4px rgba(var(--bx-accent-rgb), 0.10);
}

.bido-builder-step.done {
  border-color: rgba(var(--bx-teal-rgb), 0.4);
  background: rgba(var(--bx-teal-rgb), 0.06);
}

/* Leading status tile — neutral while a step is untouched, then it carries
   the state: solid accent on the active step, teal + check once done. */
.bido-builder-step-icon {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
}

.bido-builder-step.active .bido-builder-step-icon {
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-step.done .bido-builder-step-icon {
  background: rgba(var(--bx-teal-rgb), 0.16);
  color: var(--bx-good-ink);
}

.bido-builder-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bido-builder-step-body .title {
  font-weight: 800;
  font-size: var(--bx-text);
  color: var(--bx-ink);
}

.bido-builder-step-body .desc {
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bido-builder-step.done .desc {
  color: var(--bx-good-ink);
}

.bido-builder-step-count {
  font-size: var(--bx-text-xs);
  font-weight: 800;
  color: var(--bx-accent-ink);
  background: var(--bx-accent-soft);
  padding: 3px 8px;
  border-radius: var(--bx-r-pill);
}

/* "Next" step — the pillar right after the active one. A crisp accent ring
   (distinct from the active step's softer halo) plus a leading eyebrow point
   the user forward; layers over a todo or an already-done step. */
.bido-builder-step.next {
  box-shadow: 0 0 0 2px rgba(var(--bx-accent-rgb), 0.45);
}

.bido-builder-step-next {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-accent-ink);
}

/* Hover lift (the base rule already declares the transform transition) and a
   visible keyboard focus ring — the tabs read as static before. */
@media (any-hover: hover) {
  .bido-builder-step:hover {
    border-color: var(--bx-accent-line);
    transform: translateY(-1px);
  }
}

.bido-builder-step:focus-visible {
  outline: none;
  border-color: var(--bx-accent);
  box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb), 0.35);
}

/* ===== Main grid — picker + sidebar ===== */
.bido-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 26vw, 23.5rem);
  gap: 20px;
  align-items: start;
}

/* ===== Light picker workspace ===== */
.bido-builder-picker {
  background: var(--bx-paper);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 24px;
  box-shadow: 0 30px 60px -42px rgba(var(--bx-navy-rgb), 0.55);
}

.bido-builder-picker-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bido-builder-picker-title {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  color: var(--bx-ink);
}

.bido-builder-picker-count {
  text-transform: uppercase;
}

/* Group-size context strip — explains that the shelf is floored at the group
   size (the fitting_group rule) and links out to the unfiltered catalog. */
.bido-builder-capacity-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  background: rgba(var(--bx-accent-rgb), 0.06);
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-2);
}

.bido-builder-capacity-note-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bido-builder-capacity-note-lead strong {
  color: var(--bx-ink);
}

.bido-builder-capacity-note-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--bx-accent-ink);
  white-space: nowrap;
}

/* The picker reuses the catalog pillbar; give it room before the card grid. */
.bido-builder-picker .bido-pillbar {
  margin-bottom: 14px;
}

.bido-builder-picker .bido-filter-tokens {
  margin-bottom: 16px;
}

.bido-builder-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
}

.bido-builder-card .bido-traveler-card-media {
  position: relative;
}

.bido-builder-card-check {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--bx-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
  box-shadow: 0 4px 12px rgba(var(--bx-accent-rgb), 0.5);
}

.bido-builder-card-headcount {
  padding: 8px 14px 0;
  font-size: var(--bx-text-xs);
}

/* Vibe headcount stepper */
.bido-builder-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bx-line-2);
  border-radius: var(--bx-r-pill);
  overflow: hidden;
}

.bido-builder-qty .button_to {
  display: flex;
}

.bido-builder-qty-btn {
  inline-size: 28px;
  block-size: 28px;
  border: 0;
  background: transparent;
  color: var(--bx-ink);
  font-weight: 800;
  font-size: var(--bx-text-lg);
  cursor: pointer;
}

.bido-builder-qty-btn:hover {
  background: var(--bx-fill-2);
}

.bido-builder-qty-n {
  min-inline-size: 30px;
  text-align: center;
  font-weight: 800;
  font-size: var(--bx-text-md);
  color: var(--bx-ink);
}

/* ===== Wheels — per occasion =====
   One card per trip leg (arrival, nights out, day trip, departure). Each card
   carries a group-fit line and a ladder of vehicle tiles; every tile is sized
   against the planned group, so it reads the real vehicle count + group total
   the builder will add — not a bare per-vehicle price. */

/* Top-of-section progress strip — counts the legs covered so the user knows
   how many of the four occasion cards they still need to fill. */
.bido-builder-occasions-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper-2);
}

.bido-builder-occasions-progress-label {
  font-size: var(--bx-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-ink-3);
  font-weight: 700;
}

.bido-builder-occasions-progress-count {
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-2);
}

.bido-builder-occasions-progress-count strong {
  color: var(--bx-ink);
  font-weight: 800;
}

.bido-builder-occasions-progress-count.complete {
  color: var(--bx-good-ink);
}

.bido-builder-occasions-prog {
  flex: 1;
  min-inline-size: 6rem;
}

.bido-builder-occasions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bido-builder-occasion {
  background: var(--bx-paper-2);
  border: 1.5px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  padding: 16px 18px;
}

.bido-builder-occasion.filled {
  border-color: var(--bx-accent);
  background:
    linear-gradient(180deg, var(--bx-accent-soft), transparent 64px),
    var(--bx-paper-2);
  box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb), 0.10);
}

.bido-builder-occasion-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bido-builder-occasion-icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
  flex-shrink: 0;
}

.bido-builder-occasion.filled .bido-builder-occasion-icon {
  background: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-occasion-titles {
  flex: 1;
  min-width: 0;
}

.bido-builder-occasion-titles .name {
  font-size: var(--bx-text);
  font-weight: 800;
  color: var(--bx-ink);
}

.bido-builder-occasion-titles .muted {
  font-size: var(--bx-text-sm);
}

.bido-builder-occasion-tag {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--bx-r-pill);
  color: var(--bx-ink-3);
  background: var(--bx-fill-2);
}

.bido-builder-occasion.filled .bido-builder-occasion-tag {
  color: rgb(var(--bx-white-rgb));
  background: var(--bx-accent);
}

/* Group-fit line — sits between the header and the vehicle ladder. */
.bido-builder-occasion-group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 12px;
  padding: 8px 11px;
  border-radius: var(--bx-r-sm);
  background: var(--bx-fill);
  font-size: var(--bx-text-sm);
  color: var(--bx-ink-3);
}

.bido-builder-occasion-group svg {
  flex-shrink: 0;
  color: var(--bx-ink-4);
}

.bido-builder-occasion-group strong {
  color: var(--bx-ink);
  font-weight: 800;
}

.bido-builder-occasion.filled .bido-builder-occasion-group {
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-occasion.filled .bido-builder-occasion-group svg,
.bido-builder-occasion.filled .bido-builder-occasion-group strong {
  color: var(--bx-accent-ink);
}

/* Vehicle ladder — reflows 5 → fewer on container width via auto-fit. */
.bido-builder-veh-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 10px;
}

/* Vehicle tile is a clickable shell — the stretched .bido-card-link opens the
   in-place detail drawer; the .veh-action button at the foot mutates the plan
   above the link (z-index: 2). */
.bido-builder-veh {
  position: relative;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
  padding: 11px 12px 12px;
  border: 1.5px solid var(--bx-line);
  border-radius: var(--bx-r);
  background: var(--bx-paper);
  color: var(--bx-ink);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.bido-builder-veh .bido-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Cover thumbnail at the top of a vehicle tile — bleeds to the tile's inner
   edges while the padding stays for the text below. A class without photos yet
   (e.g. Van) omits it and the tile stays text-only. */
.bido-builder-veh-photo {
  margin: -11px -12px 6px;
  border-radius: calc(var(--bx-r) - 2px) calc(var(--bx-r) - 2px) 0 0;
  overflow: hidden;
}

@media (any-hover: hover) {
  .bido-builder-veh:hover {
    border-color: var(--bx-accent-line);
  }
}

.bido-builder-veh.rec {
  border-color: var(--bx-accent);
  background: var(--bx-accent-soft);
}

.bido-builder-veh.on {
  background: var(--bx-accent);
  border-color: var(--bx-accent);
  color: rgb(var(--bx-white-rgb));
  box-shadow: 0 8px 20px -10px rgba(var(--bx-accent-rgb), 0.7);
}

.bido-builder-veh .veh-action {
  position: relative;
  z-index: 2;
  margin-block-start: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Direct children only — the Add/Remove button_to span the tile; the nested
   stepper's own ± button_to keep their natural width. */
.bido-builder-veh .veh-action > .button_to,
.bido-builder-veh .veh-action > form {
  display: flex;
  inline-size: 100%;
}

.bido-builder-veh .veh-action .btn {
  inline-size: 100%;
  justify-content: center;
}

/* A picked vehicle's count stepper sits on the accent tile, so lift its border
   and text onto the accent surface for contrast. */
.bido-builder-veh .veh-action .bido-builder-qty {
  align-self: center;
}

.bido-builder-veh.on .bido-builder-qty {
  border-color: rgba(var(--bx-white-rgb), 0.5);
  background: rgba(var(--bx-white-rgb), 0.12);
}

.bido-builder-veh.on .bido-builder-qty-btn,
.bido-builder-veh.on .bido-builder-qty-n {
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-veh.on .bido-builder-qty-btn:hover {
  background: rgba(var(--bx-white-rgb), 0.18);
}

/* Top marker row — keeps a constant height so tiles align with or without
   a "Recommended" / "Selected" flag. */
.bido-builder-veh .veh-flag {
  display: flex;
  align-items: center;
  gap: 4px;
  min-block-size: 14px;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bx-accent-ink);
}

.bido-builder-veh.on .veh-flag {
  color: rgb(var(--bx-white-rgb));
}

.bido-builder-veh .veh-name {
  font-weight: 800;
  font-size: var(--bx-text-md);
}

/* Fit chip — green when one vehicle covers the group, amber when the group
   needs several. */
.bido-builder-veh .veh-fit {
  align-self: flex-start;
  margin-block: 2px;
  padding: 2px 7px;
  border-radius: var(--bx-r-pill);
  font-size: var(--bx-text-2xs);
  font-weight: 700;
}

.bido-builder-veh .veh-fit.ok {
  color: var(--bx-good-ink);
  background: var(--bx-good-soft);
}

.bido-builder-veh .veh-fit.split {
  color: var(--bx-warn-ink);
  background: var(--bx-warn-soft);
}

.bido-builder-veh .veh-meta {
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

.bido-builder-veh.on .veh-meta {
  color: rgba(var(--bx-white-rgb), 0.85);
}

.bido-builder-veh .veh-price {
  margin-block-start: auto;
  padding-block-start: 6px;
  font-weight: 800;
  font-size: var(--bx-text);
}

.bido-builder-veh .veh-price small {
  display: block;
  margin-block-start: 1px;
  font-weight: 600;
  font-size: var(--bx-text-2xs);
  color: var(--bx-ink-4);
}

.bido-builder-veh.on .veh-price small {
  color: rgba(var(--bx-white-rgb), 0.8);
}

/* Picker footer nav */
.bido-builder-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--bx-line);
}

.bido-builder-picker-status {
  text-align: center;
}

/* ===== Dark sidebar ===== */
.bido-builder-sidebar {
  position: sticky;
  inset-block-start: 16px;
}

.bido-builder-sidebar-card {
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--bx-shadow-soft);
}

/* The CTA + footnote sit right under the per-person summary, so the section
   after the footnote needs the same separator adjacent sections get. */
.bido-builder-sb-section + .bido-builder-sb-section,
.bido-builder-sb-foot + .bido-builder-sb-section {
  border-block-start: 1px solid var(--bx-line);
  padding-block-start: 16px;
}

.bido-builder-sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bido-builder-sb-pill {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-text-2xs);
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--bx-r-pill);
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-sb-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bido-builder-sb-total .amt {
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-4xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bx-ink);
}

.bido-builder-sb-pp {
  margin-block-start: 6px;
  font-size: var(--bx-text-md);
}

.bido-builder-sb-pp strong {
  color: var(--bx-ink);
}

.bido-builder-sb-cat {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--bx-r-sm);
  text-decoration: none;
  color: inherit;
}

.bido-builder-sb-cat:hover {
  background: var(--bx-fill);
}

.bido-builder-sb-cat .ic {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--bx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
}

.bido-builder-sb-cat.has .ic {
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

.bido-builder-sb-cat .lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bido-builder-sb-cat .nm {
  font-size: var(--bx-text-md);
  font-weight: 700;
  color: var(--bx-ink);
}

.bido-builder-sb-cat .ct {
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

.bido-builder-sb-cat.has .ct {
  color: var(--bx-good-ink);
}

.bido-builder-sb-cat .amt2 {
  font-size: var(--bx-text-md);
  font-weight: 800;
  color: var(--bx-ink);
}

.bido-builder-sb-cat.empty .amt2 {
  color: var(--bx-ink-4);
  font-weight: 600;
}

/* The item list grows with every selection; cap it so a long list scrolls
   internally instead of pushing the totals out of the viewport. ~5 rows. */
.bido-builder-sb-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-block-size: 18rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bido-builder-sb-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--bx-r);
  background: var(--bx-fill);
  font-size: var(--bx-text-sm);
}

.bido-builder-sb-line .copy {
  min-width: 0;
}

.bido-builder-sb-line .nn {
  font-weight: 700;
  color: var(--bx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bido-builder-sb-line .pp {
  font-weight: 800;
  white-space: nowrap;
}

.bido-builder-sb-x {
  inline-size: 22px;
  block-size: 22px;
  border: 0;
  border-radius: var(--bx-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-fill-2);
  color: var(--bx-ink-3);
  cursor: pointer;
}

.bido-builder-sb-x:hover {
  background: rgba(var(--bx-coral-rgb), 0.14);
  color: var(--bx-bad-ink);
}

.bido-builder-sb-empty {
  font-size: var(--bx-text-sm);
}

.bido-builder-sb-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bido-builder-sb-totals .ln {
  display: flex;
  justify-content: space-between;
  font-size: var(--bx-text-md);
  color: var(--bx-ink-2);
}

.bido-builder-sb-totals .ln.savings.accent {
  color: var(--bx-good-ink);
}

.bido-builder-sb-totals .ln.total {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--bx-line);
  color: var(--bx-ink);
  font-weight: 800;
  font-size: var(--bx-text-lg);
}

.bido-builder-sb-cta {
  inline-size: 100%;
  justify-content: center;
  padding-block: 14px;
}

.bido-builder-sb-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: var(--bx-text-xs);
  line-height: 1.45;
  color: var(--bx-ink-3);
}

.bido-builder-sb-foot svg {
  flex-shrink: 0;
  margin-block-start: 1px;
}

/* ===== Trust strip ===== */
.bido-builder-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 14px;
  padding: 16px 22px;
  background: var(--bx-paper-2);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
}

.bido-builder-trust-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bido-builder-trust-cell .ic {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--bx-r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bx-good-soft);
  flex-shrink: 0;
}

.bido-builder-trust-cell .t {
  font-size: var(--bx-text-sm);
  font-weight: 700;
  color: var(--bx-ink);
}

.bido-builder-trust-cell .s {
  font-size: var(--bx-text-xs);
}

/* === Responsive — builder === */
@media (max-width: 64rem) {
  .bido-builder-grid {
    /* minmax(0, …), not bare 1fr: 1fr's auto minimum lets the wheels step's
       vehicle ladders set the track's min-content width and drag the whole
       page into horizontal scroll on phones. */
    grid-template-columns: minmax(0, 1fr);
  }
  .bido-builder-sidebar {
    position: static;
  }
}

@media (max-width: 48rem) {
  .bido-builder-shell {
    padding: 18px 16px;
  }
  .bido-builder-picker {
    padding: 18px;
  }
  .bido-builder-steps {
    padding: 18px;
  }
  /* On phones the auto-fit grid collapses to one column and each vehicle tile
     becomes full-width — that hides ladder relationships. Switch to a horizontal
     scroller with snap stops so the user feels each tile as a distinct option. */
  .bido-builder-veh-row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .bido-builder-veh-row > .bido-builder-veh {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* Bottom-fixed CTA on phones: the side panel with the trip total + Continue
   button stacks below the recommendations on mobile, well off-screen. This
   slim bar keeps the total + primary CTA in reach. The bar slides in only
   once the in-flow #trip_estimate sidebar is out of view (sticky_cta
   controller, .visible modifier — mirrors products/home-mobile-bar.css).
   Desktop hides it entirely.

   The bar's summary side is also the trip-sheet toggle: on stacked layouts
   with the bar present, the sidebar leaves the flow and opens from here as a
   bottom sheet (trip_sheet controller; sheet rules in the 64rem block). */
.bido-builder-mobile-cta {
  display: none;
  transform: translateY(110%);
}

.bido-builder-sheet-backdrop {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bido-builder-mobile-cta {
    transition: transform 0.25s ease;
  }
}

@media (max-width: 64rem) {
  /* Reserve room at the page foot so the fixed bar never covers the trust
     strip or anything else at the bottom of the shell. Applied to the page
     wrapper (parent of the bar) instead of the shell so a future child can
     opt out without the rule scoping to a specific descendant. */
  .bido-builder-page {
    padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .bido-builder-mobile-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bx-paper-2);
    border-block-start: 1px solid var(--bx-line);
    z-index: 80;
  }
  .bido-builder-mobile-cta.visible {
    transform: translateY(0);
  }
  /* The summary side is a real <button> now (it opens the trip sheet) —
     reset the control chrome, keep the stacked-text layout. */
  .bido-builder-mobile-cta-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }

  .bido-builder-mobile-cta-summary:focus-visible {
    outline: 2px solid var(--bx-accent);
    outline-offset: 3px;
    border-radius: var(--bx-r-sm);
  }

  /* Expand cue on the eyebrow — points up while the sheet is closed (it
     opens upward), flips down once expanded. */
  .bido-builder-mobile-cta-summary .cue {
    display: inline-flex;
    vertical-align: middle;
    color: var(--bx-accent-ink);
    rotate: 180deg;
  }

  .bido-builder-mobile-cta-summary[aria-expanded="true"] .cue {
    rotate: none;
  }
  .bido-builder-mobile-cta-eyebrow {
    font-size: var(--bx-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bx-ink-3);
    font-weight: 700;
  }
  .bido-builder-mobile-cta-amount {
    font-family: var(--bx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--bx-text-lg);
    font-weight: 800;
    color: var(--bx-ink);
  }
  .bido-builder-mobile-cta-pp {
    font-size: var(--bx-text-2xs);
    color: var(--bx-ink-3);
  }
  .bido-builder-mobile-cta .btn {
    flex: 0 0 auto;
  }

  /* Sheet mode — when the fixed bar is present (non-empty trip), the stacked
     sidebar leaves the flow entirely: with 25+ picker cards above it, the
     in-flow card sat a full page of scrolling away. Tapping the bar's summary
     slides the whole estimate up as a bottom sheet instead. An empty trip
     renders no bar (nothing to anchor or toggle from), so :has() keeps the
     sidebar in flow for that state. */
  .bido-builder-page:has(.bido-builder-mobile-cta) .bido-builder-sidebar {
    position: fixed;
    inset-inline: 0;
    /* The base rail rule sets inset-block-start: 16px for desktop sticky —
       clear it, or the over-constrained fixed box anchors to the top edge. */
    inset-block-start: auto;
    inset-block-end: 0;
    z-index: 90;
    max-block-size: 82svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--bx-paper-2);
    border-start-start-radius: var(--bx-r-xl);
    border-start-end-radius: var(--bx-r-xl);
    box-shadow: 0 -18px 48px rgba(var(--bx-black-rgb), 0.4);
    transform: translateY(105%);
    visibility: hidden;
    outline: none;
  }

  .bido-builder-page:has(.bido-builder-mobile-cta) .bido-builder-sidebar.open {
    transform: translateY(0);
    visibility: visible;
  }

  /* The card fills the sheet — the aside is the surface now, so drop the
     card's own frame and pad past the home-indicator area. */
  .bido-builder-page:has(.bido-builder-mobile-cta) .bido-builder-sidebar-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .bido-builder-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    border: 0;
    padding: 0;
    background: rgba(var(--bx-black-rgb), 0.45);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
  }

  .bido-builder-sheet-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Lock the page behind the open sheet. Scoped to the stacked breakpoint so
     a resize to desktop with the sheet still .open never strands the page
     unscrollable. */
  body.trip-sheet-open {
    overflow: hidden;
  }
}

@media (max-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .bido-builder-page:has(.bido-builder-mobile-cta) .bido-builder-sidebar {
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .bido-builder-page:has(.bido-builder-mobile-cta) .bido-builder-sidebar.open {
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }
  .bido-builder-sheet-backdrop {
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .bido-builder-sheet-backdrop.visible {
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
}