/* The shared inventory composition scales by width, rather than gaining rows on
   a phone. Functional overlays remain viewport based and keep their handlers. */
:root {
  --manco-gutter: clamp(5px, 1.6vw, 12px);
  --manco-inventory-rail: clamp(66px, 19%, 154px);
  --manco-nav-height: 48px;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
.wrap { width: 100%; max-width: 960px; padding-inline: var(--manco-gutter); }
.wrap :is(.panel, .preview, .previewinfo, .truck-inventory-module, .truck-inventory-photo) { min-width: 0; }
.wrap :is(button, a, input, select, textarea) { max-width: 100%; }
.wrap :is(input, select, textarea) { font-size: 16px; }
img, video { max-width: 100%; }

/* One full-width 15:4 Cockpit frame, without the former mobile-only black band. */
.wrap > .top.cockpit-approved-header {
  width: calc(100% + 2 * var(--manco-gutter));
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 15 / 4;
  margin-inline: calc(-1 * var(--manco-gutter));
}
.top.cockpit-approved-header::before,
.top.cockpit-approved-header .cockpit-approved-art { top: 0; height: 100%; }
.cockpit-approved-header .cockpit-header-account { min-width: 0; }
.cockpit-approved-header .cockpit-header-account :is(strong, b, time) {
  display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-approved-header .top-tools { min-width: 0; top: calc(50% - min(4vw, 38.4px)); height: clamp(44px, 7.7vw, 74px); }
.cockpit-approved-header .top-tools :is(.top-tool, #openHub) { min-width: 0; margin: 0; }
body .cockpit-command-shell.staff-shell {
  width: calc(100% + 2 * var(--manco-gutter));
  max-width: none;
  margin-inline: calc(-1 * var(--manco-gutter));
}
body .cockpit-command-shell .staffbar > .pinned-message-card {
  min-height: 34px; padding: 3px clamp(6px, 1.6vw, 12px); gap: 5px;
}
body .cockpit-command-shell .pinned-message-copy { min-width: 0; gap: clamp(5px, 1.3vw, 10px); }
body .cockpit-command-shell .pinned-message-copy b { font-size: clamp(11px, 2.13vw, 16px); white-space: nowrap; }
body .cockpit-command-shell .pinned-message-copy span { min-width: 0; font-size: clamp(10px, 1.6vw, 12px); line-height: 1.15; }

/* Public branding and its three tools stay on the same row at phone width. */
.wrap > .top.public-inventory-header {
  position: sticky; width: calc(100% + 2 * var(--manco-gutter));
  margin-inline: calc(-1 * var(--manco-gutter));
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  align-items: center; gap: clamp(6px, 1.3vw, 12px);
  height: clamp(96px, 17.6vw, 169px); min-height: 0;
  padding: clamp(5px, 1vw, 9px) clamp(7px, 2.1vw, 20px);
}
.public-inventory-header .top-copy { align-self: center; }
.public-inventory-header .manco-wordmark { width: clamp(125px, 33vw, 300px); }
.public-inventory-header .fontana-yard { font-size: clamp(15px, 3.12vw, 28px); margin-top: 3px; }
.public-inventory-header .sub { font-size: clamp(10px, 1.85vw, 17px); margin-top: 3px; white-space: nowrap; }
.public-inventory-header .loc { font-size: clamp(8px, 1.1vw, 10px); letter-spacing: .02em; margin-top: 3px; white-space: normal; }
.public-inventory-header .public-tools {
  width: 100%; align-self: center; justify-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3px, .8vw, 7px); margin: 0;
}
.public-inventory-header .public-tool {
  width: 100%; min-width: 0; min-height: clamp(44px, 8.13vw, 74px);
  padding: 3px 1px; gap: 3px; border-radius: clamp(7px, 1.46vw, 14px);
  font-size: clamp(8px, 1.24vw, 11px);
}
.public-inventory-header :is(.public-tool-icon, .public-tool-icon svg) { width: clamp(17px, 3.06vw, 28px); height: clamp(17px, 3.06vw, 28px); }

/* The photo window and recent-truck rail retain the same side-by-side layout. */
.truck-inventory-layout {
  grid-template-columns: var(--manco-inventory-rail) minmax(0, 1fr);
  height: clamp(210px, 64vw, 480px);
}
.truck-inventory-heading {
  left: calc(var(--manco-inventory-rail) + 5px);
  max-width: calc(100% - var(--manco-inventory-rail) - 10px);
  top: 5px; padding: 4px clamp(4px, 1vw, 8px);
  font-size: clamp(9px, 1.87vw, 14px); white-space: nowrap; line-height: 1.15;
}
#truckInventoryModule #donorBrowser { padding: 3px; }
#truckInventoryModule .donorhead { order: 2; padding: 4px 0 0; }
#truckInventoryModule #chips { order: 1; height: auto; }
#truckInventoryModule .truck-chip { position: relative; }
#truckInventoryModule #allBtn { min-height: 32px; padding: 4px 1px; font-size: clamp(10px, 1.87vw, 14px); white-space: nowrap; }
#truckInventoryModule .truck-chip-code {
  position: absolute; top: 5px; left: 5px; z-index: 1;
  width: auto; padding: 2px 4px; border-radius: 5px;
  font-size: clamp(10px, 1.7vw, 13px); line-height: 1.1;
  box-shadow: 0 1px 4px #082b5030;
}
#truckInventoryModule .truck-chip-photo { aspect-ratio: 8 / 5; }
#truckInventoryModule .truck-chip-copy { padding: 3px 2px; }
#truckInventoryModule :is(.truck-chip-name, .truck-chip-model) {
  display: block; -webkit-line-clamp: unset; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(10px, 1.7vw, 13px); line-height: 1.12;
  overflow-wrap: normal;
}
#donorPhotoStage :is(.donor-swipe-hint, #donorPhotoCount) { font-size: clamp(9px, 1.73vw, 13px); padding: 4px 5px; }
#donorPhotoStage .donor-swipe-hint { max-width: calc(100% - 60px); }

/* Details scale within their columns; the action row always has three cells. */
#preview .previewinfo { padding: clamp(7px, 1.6vw, 12px); }
#preview .donor-heading {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(5px, 1.3vw, 10px); margin-bottom: 7px;
}
#preview .donor-title { min-width: 0; }
#preview .code { font-size: clamp(17px, 3.2vw, 24px); padding: 5px 7px; }
#preview .yearmake { font-size: clamp(22px, 5.35vw, 44px); }
#preview .truck { font-size: clamp(17px, 4.15vw, 29px); }
#preview .donor-lifecycle {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: start;
  margin: 0; font-size: clamp(10px, 1.73vw, 13px); padding: 4px 6px;
}
#preview .fullspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#preview .spec { font-size: clamp(12px, 2.26vw, 17px); padding-block: 6px; }
#preview .spec b { font-size: clamp(10px, 1.6vw, 12px); }
#preview .donor-vin { container-type: inline-size; grid-column: auto; }
#preview .donor-vin > span {
  font-size: clamp(12px, 3.5vw, 26px);
  font-size: clamp(12px, 8.6cqw, 28px); font-weight: 950;
  letter-spacing: -.035em; line-height: 1.15; white-space: nowrap;
}
#preview .publicnote { font-size: clamp(12px, 2vw, 15px); }
#preview .public-action-lane,
#privateSummaryActionLane .private-action-lane {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(4px, .8vw, 6px);
}
#preview .public-action-lane .btn,
#privateSummaryActionLane .private-action-lane .btn {
  grid-column: auto !important; min-width: 0; min-height: 44px; padding: 5px 3px;
  gap: clamp(3px, 1vw, 8px); font-size: clamp(10px, 1.73vw, 13px); line-height: 1.1;
}
#preview .public-action-lane svg,
#privateSummaryActionLane .private-action-lane svg { width: clamp(16px, 3.2vw, 24px); height: clamp(16px, 3.2vw, 24px); flex: none; }
#privateSummaryActionLane #allPhotosVideos { grid-column: auto !important; }
#donorPrivateSummary h3 { font-size: clamp(13px, 2.4vw, 18px); }
#donorPrivateSummary .donor-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#donorPrivateSummary .donor-summary-box { min-height: 44px; padding: 4px clamp(4px, 1.2vw, 9px); }
#donorPrivateSummary .donor-summary-box span { font-size: clamp(9px, 1.46vw, 11px); }
#donorPrivateSummary .donor-summary-box b { font-size: clamp(16px, 3.2vw, 24px); overflow-wrap: normal; white-space: nowrap; }

/* Navigation is one bounded row, including iPhone's bottom safe area. */
body.chief-cockpit .wrap { padding-bottom: calc(var(--manco-nav-height) + env(safe-area-inset-bottom) + 8px); }
body.chief-cockpit .cockpit-bottom-v2 {
  width: min(100%, 960px); left: 50%; right: auto; transform: translateX(-50%);
  height: calc(var(--manco-nav-height) + env(safe-area-inset-bottom)); min-height: 0;
  padding: 3px 2px calc(3px + env(safe-area-inset-bottom));
}
body.chief-cockpit .cockpit-bottom-v2 > button {
  min-width: 0; min-height: 0; height: 100%; padding: 1px; gap: 1px;
  font-size: clamp(9px, 1.8vw, 13px); line-height: 1.05;
}
body.chief-cockpit .cockpit-bottom-v2 .cockpit-bottom-icon { width: clamp(18px, 3.2vw, 24px) !important; height: clamp(18px, 3.2vw, 24px) !important; }
body.chief-cockpit .cockpit-bottom-v2 svg { width: clamp(18px, 3.2vw, 24px) !important; height: clamp(18px, 3.2vw, 24px) !important; }
body.chief-cockpit .cockpit-bottom-v2 .cockpit-bottom-label { min-width: 0; max-height: 2.1em; overflow: hidden; }
body.chief-cockpit :is(.cockpit-bottom-overlay, .cockpit-hub-overlay, .lightbox, .part-modal, .compare-modal, .gate) { bottom: calc(var(--manco-nav-height) + env(safe-area-inset-bottom)); }

@media (max-width: 520px) {
  .cockpit-approved-header .cockpit-header-account {
    left: 5%; bottom: 2px; width: 31%;
    grid-template-columns: minmax(0, 1fr) 26px; gap: 3px; padding: 4px;
  }
  .cockpit-approved-header .cockpit-header-account :is(strong, b) { font-size: clamp(8px, 2.3vw, 11px); }
  .cockpit-approved-header .cockpit-header-account time { font-size: clamp(8px, 2.05vw, 10px); }
  .cockpit-approved-header .cockpit-header-avatar { width: 26px; height: 26px; min-height: 26px; font-size: 10px; }
  .cockpit-approved-header .top-tools { left: 38.5%; width: 57.5%; top: calc(50% - 4vw); height: 44px; }
  .cockpit-approved-header .top-tools :is(.top-tool, #openHub) { font-size: 8px; padding: 3px 1px; gap: 2px; }
  #preview .public-action-lane .btn,
  #privateSummaryActionLane .private-action-lane .btn { flex-direction: column; gap: 2px; }
}

/* Photo controls sit immediately below the image, above Chief's fixed bar. */
#lightbox, #partModal { --manco-photo-clearance: 0px; }
body.chief-cockpit #lightbox,
body.chief-cockpit #partModal {
  --manco-photo-clearance: calc(var(--manco-nav-height) + env(safe-area-inset-bottom) + 12px);
  bottom: var(--manco-photo-clearance);
}
#lightbox {
  grid-template-rows: minmax(0, max-content) auto;
  align-content: center;
  justify-items: center;
  padding: 12px;
}
#lightbox .lb-stage {
  display: flex; align-items: center; justify-content: center;
  height: auto; max-width: 960px;
}
#lightbox #lbImg {
  width: auto; height: auto;
  max-height: calc(100vh - var(--manco-photo-clearance) - 108px);
  max-height: calc(100dvh - var(--manco-photo-clearance) - 108px);
}
#lightbox .lb-toolbar { width: 100%; max-width: 960px; }
#partModal .part-card {
  max-height: calc(100vh - var(--manco-photo-clearance) - 24px);
  max-height: calc(100dvh - var(--manco-photo-clearance) - 24px);
}
#partModal .part-photo-close-row { position: sticky; top: 12px; height: 0; z-index: 11; }
#partModal .part-photo-close-row #partDone {
  position: absolute; top: -12px; right: 0;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 2px solid #7ac6ec; border-radius: 11px;
  background: linear-gradient(135deg, #fff, #86d1f4); color: #123d69;
  font-size: 28px; line-height: 1;
}

/* Phones keep Ask beside the status, directly below the part description. */
@media (max-width: 620px) {
  #parts .part {
    grid-template-columns: 54px minmax(0, 1fr) minmax(50px, auto);
    grid-template-areas: "thumb copy price";
    gap: 6px; padding: 6px;
  }
  #parts .part-copy { grid-area: copy; }
  #parts .part > .price { grid-area: price; align-self: start; min-width: 0; }
  #parts .part-actions { grid-area: price; align-self: end; justify-content: flex-end; }
  #parts .partname { font-size: 15px; line-height: 1.15; }
  #parts .part .small { font-size: 11px; line-height: 1.2; }
  #parts .public-phone-status-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px;
  }
  #parts .public-part-status { min-width: 0; font-size: 11px; font-weight: 900; color: #187443; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #parts .public-part-status[data-state="reserved"] { color: #936008; }
  #parts .public-part-status[data-state="sold"] { color: #185e9e; }
  #parts .public-phone-status-actions .ask { flex: none; min-width: 44px; min-height: 30px; padding: 4px 6px; font-size: 11px; }
  #parts .part-actions .compare-mini { margin-top: 0; padding: 5px 3px; font-size: 9px; min-height: 30px; }
}

@media (max-width: 480px) {
  #preview .donor-heading { gap: 5px; }
  #preview .code { padding: 4px 5px; }
  #preview .donor-lifecycle { padding: 4px; }
}