/* Readable, touch-friendly controls inside the optional business demo drawer.
   Panels keep their natural content height; full desktop presentation stays unchanged. */
@media (max-width:900px) {
  /* 1. Main interactive targets. Keep dates and role tabs comfortably taller. */
  #home-build .as-demo-drawer .sw-demo button {
    min-width:44px; min-height:44px; font-size:14px; line-height:1.35;
    white-space:normal;
  }
  #home-build .as-demo-drawer .sw-demo .sw-segments button { padding:10px 8px; }
  #home-build .as-demo-drawer .sw-dates button { min-height:64px; }
  #home-build .as-demo-drawer .cx-role-tabs button { min-height:64px; flex-direction:column; gap:5px; }
  #home-build .as-demo-drawer .sw-swatches button {
    width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px;
  }
  #home-build .as-demo-drawer .sw-swatches { gap:8px; }
  #home-build .as-demo-drawer .sw-switch {
    width:48px; height:44px; min-height:44px; display:flex; align-items:center;
  }

  /* 2. Supporting text. Preserve headline/number sizes and all sample labels. */
  #home-build .as-demo-drawer .sw-demo :is(p,legend,small,dt,dd) {
    font-size:13px; line-height:1.5;
  }
  #home-build .as-demo-drawer .sw-demo :is(
    .sw-window,.sw-window>span,.sw-product-index,.sw-product-caption>span,
    .sw-project-status,.sw-project-name,.sw-brief-line>span,.sw-approval>span,
    .sw-booking-result>div>span,.sw-metrics span,.sw-chart-label,.sw-bars span,
    .sw-task-line>div>span,.sw-workflow>div>span,.sw-display-logo>span,
    .sw-display-bottom,.sw-order-number>span,.sw-appointment>span,
    .sw-brand-logo>span,.sw-brand-headline>span,.sw-brand-bottom,
    .sw-brand-controls>span,.sw-brand-review>span,
    .cx-brandbar strong,.cx-brandbar div>span,.cx-phone-top,.cx-phone-top>span,
    .cx-workspace-top,.cx-workspace-top>span,.cx-workspace-top strong,
    .cx-overline,.cx-request-detail,.cx-customer-status>div>span,
    .cx-ticket-heading>strong,.cx-status-pill,.cx-tech-job>div>span,
    .cx-lobby-brand>span,.cx-lobby-main>p,.cx-lobby-ticket>span,
    .cx-lobby-ticket div>span,.cx-lobby-stages>span,.cx-lobby-bottom>span,
    .cx-event>span:last-child,.cx-connected-foot>span,.cx-owner-stats span,
    .cx-owner-order>span,.cx-owner-meta,.cx-calendar-slot
  ) { font-size:13px; line-height:1.5; }
  #home-build .as-demo-drawer .sw-demo :is(
    .sw-real-action strong,.sw-brief-line strong,.sw-task-line strong,
    .sw-workflow strong,.sw-appointment strong
  ) { font-size:14px; line-height:1.45; }
  #home-build .as-demo-drawer .sw-demo :is(.sw-dates span,legend>span) {
    font-size:13px; line-height:1.4;
  }
  #home-build .as-demo-drawer .sw-demo legend>span {
    float:none; display:block; margin-top:3px;
  }
  #home-build .as-demo-drawer .sw-footnote { font-size:13px; line-height:1.5; }
  #home-build .as-demo-drawer .sw-footnote>span:first-child {
    font-size:13px; max-width:none;
  }

  /* 3. Allow real text and actions to wrap, with natural panel height. Do not
     override .sw-track's JS-measured height or set a viewport-sized demo. */
  #home-build .as-demo-drawer :is(
    .sw-window,.sw-system-top,.sw-approval,.sw-booking-result,.sw-real-action,
    .sw-task-line,.sw-display-controls,.sw-brand-controls,.sw-brand-review,
    .sw-display-logo,.sw-brand-logo,.cx-tools,.cx-connected-foot,.cx-lobby-bottom,
    .cx-ticket-heading,.cx-owner-meta,.cx-phone-top,.cx-workspace-top
  ) { flex-wrap:wrap; gap:8px 12px; }
  #home-build .as-demo-drawer :is(
    .sw-approval>span,.sw-booking-result>div,.sw-real-action>div,.sw-task-line>div,
    .sw-brand-review>span,.cx-connected-foot>span,.cx-lobby-bottom>span,
    .cx-owner-meta>span,.cx-customer-status>div,.cx-lobby-ticket>div
  ) { min-width:0; max-width:100%; }
  #home-build .as-demo-drawer :is(
    .sw-approval .sw-primary,.sw-booking-result .sw-primary,
    .sw-real-action .sw-primary,.sw-brand-review button
  ) { max-width:100%; white-space:normal; }
  #home-build .as-demo-drawer :is(.sw-booking-result strong,.sw-metrics span,.cx-status-pill) {
    white-space:normal;
  }
  #home-build .as-demo-drawer .sw-segments { min-width:0; max-width:100%; }
  #home-build .as-demo-drawer :is(.sw-display-controls,.sw-brand-controls) .sw-segments {
    flex:1 1 220px; width:auto; min-width:0;
  }
  #home-build .as-demo-drawer .sw-service-picker .sw-segments {
    flex-direction:row; flex-wrap:wrap;
  }
  #home-build .as-demo-drawer .sw-service-picker .sw-segments button { flex:1 1 160px; }
  #home-build .as-demo-drawer .sw-dates { grid-template-columns:repeat(5,minmax(44px,1fr)); }
  #home-build .as-demo-drawer .sw-times button { padding-inline:6px; }
  #home-build .as-demo-drawer .cx-job-ticket dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home-build .as-demo-drawer .cx-job-ticket dl>div:last-child { grid-column:1/-1; }
  #home-build .as-demo-drawer .cx-lobby-stages { flex-wrap:wrap; }
  #home-build .as-demo-drawer .cx-lobby-stages>span { flex:1 1 90px; }

  /* 4. Preserve the four-role diagram. Slightly wider, taller absolute nodes
     keep its established positions and illustrative connecting paths. */
  #home-build .as-demo-drawer .cx-floorplan { min-height:160px; }
  #home-build .as-demo-drawer .cx-map-node {
    width:44%; min-height:56px; gap:6px; padding:8px 6px;
  }
  #home-build .as-demo-drawer :is(.cx-node-advisor,.cx-node-customer) { left:3%; }
  #home-build .as-demo-drawer :is(.cx-node-technician,.cx-node-lobby) { left:53%; }
  #home-build .as-demo-drawer .cx-map-node strong { font-size:13px; line-height:1.35; }
  #home-build .as-demo-drawer :is(.cx-map-heading,.cx-map-note) {
    flex-wrap:wrap; gap:4px 12px; font-size:13px; line-height:1.45;
  }
  #home-build .as-demo-drawer .cx-map-key { font-size:13px; }

  /* 5. Keep navigation compact. Dots remain 24x44 with a 2px gap (0px at <=360px);
     arrows and text navigation receive the larger primary target treatment. */
  #home-build .as-demo-drawer .sw-industries button {
    min-height:44px; font-size:14px; line-height:1.35;
  }
  #home-build .as-demo-drawer .sw-arrow {
    width:44px; height:44px; min-width:44px; min-height:44px;
  }
  #home-build .as-demo-drawer .sw-dots { gap:2px; }
  #home-build .as-demo-drawer .sw-dots button {
    width:24px; min-width:24px; min-height:44px; padding:9px; flex:0 0 24px;
  }
  #home-build .as-demo-drawer .sw-contact {
    min-height:44px; font-size:14px; line-height:1.35; white-space:normal;
  }
  #home-build .as-demo-drawer .sw-service {
    position:static; display:inline-flex; min-height:44px; max-width:none;
    margin:8px 0 0; font-size:14px; line-height:1.4; text-align:left;
  }
  #home-build .as-demo-drawer .sw-copy { padding-right:0; }
  #home-build .as-demo-drawer .sw-kicker { padding-right:0; }
}
@media (max-width:480px) {
  /* 6. Narrow reflow: let larger controls occupy their own row. */
  #home-build .as-demo-drawer .sw-store-options { grid-template-columns:minmax(0,1fr); }
  #home-build .as-demo-drawer :is(.sw-approval,.sw-booking-result,.sw-real-action) .sw-primary {
    width:100%; max-width:none; justify-content:space-between;
  }
  #home-build .as-demo-drawer .sw-system-top .sw-segments { flex:1 1 100%; }
  #home-build .as-demo-drawer .cx-lobby-bottom .cx-next-role { width:100%; }
}
@media (max-width:400px) {
  #home-build .as-demo-drawer .cx-role-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:360px) {
  /* At 320px: drawer 280px, scene/demo 278px, booking body 242px.
     A classic 15px scrollbar reduces those budgets to 265/263/227px.
     Five 44px dates + four 6px gaps need 244px, so use a 3+2 grid. */
  #home-build .as-demo-drawer .sw-dots { gap:0; }
  #home-build .as-demo-drawer .sw-navigation { gap:2px; }
  #home-build .as-demo-drawer .cx-customer-progress {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px;
  }
  #home-build .as-demo-drawer .cx-customer-progress>span { min-width:0; }
  #home-build .as-demo-drawer .sw-dates { grid-template-columns:repeat(3,minmax(44px,1fr)); }
  #home-build .as-demo-drawer .sw-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home-build .as-demo-drawer .sw-metrics>div:last-child { grid-column:1/-1; padding-left:0; border-left:0; }
}