/* Additive, demo-only cross-screen component refinements. */
@media screen {
  body.app-shell .main :is(.btn, .chip) {
    max-width: 100%;
    min-width: 0;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  body.app-shell .main .btn > .ico { flex-shrink: 0; }
  body.app-shell .main .card-head .act .btn.small { white-space: normal; }
  body.app-shell .main :is(.page-actions, .card-head .act) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  body.app-shell .page-head h1 { min-width: 0; overflow-wrap: anywhere; }
  body.app-shell :is(.td-who, .sl-h, .sl-why, .tm-name, .tm-f) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body.app-shell .tm-name { flex-wrap: wrap; gap: 2px 8px; }
  body.app-shell .tm-name > * { min-width: 0; max-width: 100%; }
  body.app-shell .tm-pin { flex-wrap: wrap; max-width: 100%; }
  body.app-shell .tm-pin > input { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
  body.app-shell .tm-pin > .btn { flex: 0 1 auto; white-space: normal; }
}

@media screen and (max-width: 840px) {
  body.app-shell .main :is(.btn, .btn.small, .chip) { min-height: 44px; }
  body.app-shell .main :is(.btn.icon, .btn.small.icon) { min-width: 44px; }
  body.app-shell .card-head { gap: 10px; flex-wrap: wrap; }
  body.app-shell .card-head > h2 { min-width: 0; overflow-wrap: anywhere; }
  body.app-shell .td-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  body.app-shell .td-row .td-act { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  body.app-shell .sl-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  body.app-shell .sl-row .sl-ok { grid-column: 1; grid-row: auto; justify-self: start; }
  /* Task rows are compact records rather than a desktop-width table on phones. */
  body.app-shell #task-card .tbl,
  body.app-shell #task-card .tbl tbody { display: block; width: 100%; min-width: 0; }
  body.app-shell #task-card .tbl tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
  }
  body.app-shell #task-card .tbl td { display: block; width: auto !important; min-width: 0; border: 0; padding: 0; }
  body.app-shell #task-card .tbl td:nth-child(1) { grid-column: 1; }
  body.app-shell #task-card .tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
  body.app-shell #task-card .tbl td:nth-child(3) { grid-column: 2; grid-row: 1; display: flex; gap: 6px; }
  body.app-shell #task-card .tbl td:nth-child(3) .btn { min-width: 44px; }
}

/* Guest controls grow with their labels; existing handlers and links remain. */
body:has(> .topbar):not(.app-shell) .topbar { flex-wrap: wrap; }
body:has(> .topbar):not(.app-shell) .tb-right {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body:has(> .topbar):not(.app-shell) .tb-nav { min-width: 0; flex-wrap: wrap; }
body .drive-viewbar { min-width: 0; max-width: 100%; }
body .drive-view-switch { min-width: 0; max-width: 100%; }
body .drive-view-switch :is(a, span) {
  min-width: 0;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-block: 10px;
  text-align: center;
}
body:has(> .topbar):not(.app-shell) :is(.cta-btn, .dp-go, .bk-time span) {
  height: auto;
  min-height: 44px;
  white-space: normal;
  line-height: 1.4;
}
body:has(> .topbar):not(.app-shell) .bk-time span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
}
body:has(> .topbar):not(.app-shell) .estimate .row > b:only-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 700px) {
  /* em tracks respond to larger text as well as narrower viewports. */
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) .gd-summary {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr));
  }
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) :is(.gd-summary-label, .gd-summary-price) {
    grid-column: auto;
    grid-row: auto;
  }
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) .gd-summary-note { grid-column: 1 / -1; }
}
@media screen and (max-width: 360px) {
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) .gd-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) .gd-summary-price {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
    min-width: 0;
    white-space: normal;
  }
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) .gd-summary-note { grid-row: 3; }
  body:is(:has(> .wrap > .body > .title), :has(> .wrap2 > .nd-t)) { --gd-dock-space: calc(168px + env(safe-area-inset-bottom)); }
}

/* Guest showroom grid: keep trim/mileage and price visually connected.
   Only the empty spacing changes (16px -> 8px); gallery/list views retain
   their own alignment, and all amounts/disclosures remain in place. */
@media screen {
  body:has(> .topbar):not(.app-shell) #cars.v-grid > .vc .vc-p {
    margin-top: 8px;
  }
}