/* ==========================================================
   ACCEL AIR / A·TEMP — QUOTE BUILDER
   BREAKPOINTS
   Responsive overrides for parts 01-06. Part 08 carries its own, because
   those rules have to win against it.

   Part 7 of 9. Loaded by index.html in numbered order and
   CASCADES IN THAT ORDER — a rule here can be overridden by any later
   part, so keep the <link> tags in sequence and add new parts at the
   position they belong, not at the end.
   ========================================================== */
/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* Very large desktops — hold ~80% but cap the line length */
@media(min-width:1900px){
  :root{--wrapW:78%}
  body{font-size:16px}
}

/* Small desktop / large laptop — slim the sidebar before stacking */
@media(max-width:1280px){
  :root{--wrapW:90%}
  .wrap{grid-template-columns:minmax(0,1fr) 332px;gap:var(--s4)}
}

/* Tablet landscape and below — single column, ticket becomes a normal block */
@media(max-width:960px){
  :root{--wrapW:94%}
  .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:110px}
  /* Stacked, the ticket is the one thing a rep scrolls back to — give it air
     and let it keep the elevation it had as a sidebar. */
  .ticket{margin-top:var(--s2)}
  .ticket{position:static;top:auto;margin-top:2px}
  .ticket-scroll{max-height:none;overflow:visible;padding:0;margin:0}
  .mobile-bar{display:flex}
}

/* Tablet portrait */
@media(max-width:768px){
  :root{--hdrH:62px}
  .hdr{padding:10px 14px}
  .doc-meta{grid-template-columns:minmax(84px,auto) minmax(0,1fr)}
  .modal-overlay{padding:16px 10px}
}

/* Phone */
@media(max-width:640px){
  :root{--wrapW:100%;--gutter:13px;--hdrH:60px}
  body{font-size:14.5px}
  .card{padding:var(--s4) var(--s4);margin-bottom:var(--s3);border-radius:var(--r)}
  .card-label{margin-bottom:var(--s3)}
  /* One question per row on a phone — two would squeeze the pill sets */
  .field-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  /* 16px inputs stop iOS Safari zooming the page on focus */
  input.inp,select.inp,textarea.inp{font-size:16px;padding:10px 12px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .check-grid,.disc-grid{grid-template-columns:minmax(0,1fr)}
  #photoSlots{grid-template-columns:minmax(0,1fr)}
  .hdr-controls{width:100%;justify-content:flex-start}
  .hdr-div{display:none}
  .pill-btn{padding:7px 14px;flex:1 1 auto;text-align:center}
  .split-list{max-height:min(440px,58vh)}
  .modal-overlay{padding:0}
  .modal-inner{border-radius:0;min-height:100%;max-width:none}
  .doc-hdr{gap:10px;padding:16px}
  .doc-hdr .dh-tplpick{flex-direction:column}
  .doc-actionbar{padding:14px 16px}
  .doc-actionbar .dh-actions{flex-direction:column}
  .doc-body{padding:16px}
  .doc-footer{margin-top:16px}
  /* Custom line items stack into a bordered mini-card */
  .custom-row{grid-template-columns:minmax(0,1fr) 84px 40px;gap:8px;padding:10px;border:1.5px solid var(--line);border-radius:10px}
  .custom-row .cr-desc{grid-column:1/-1}
  .custom-row .fl{display:block}
  /* Same treatment for the decommission rows */
  .decom-row{grid-template-columns:minmax(0,1fr) 40px;gap:8px;padding:10px 10px 12px;
    border:1.5px solid var(--line);border-radius:10px;align-items:end}
  .decom-row .dr-n{grid-column:1/-1;text-align:left;padding:0 0 2px}
  .decom-row .dr-type,.decom-row .dr-f{grid-column:1/-1}
  .decom-row .cr-del{grid-column:2;grid-row:2}
  .decom-row .dr-type{grid-row:2}
  .decom-row .fl{display:block}
  .pair-row{grid-template-columns:minmax(0,1fr) 52px;row-gap:4px}
  .pair-row .pr-sel{grid-column:1/-1}
}

/* Small phone */
@media(max-width:420px){
  .toast-wrap{top:10px;width:calc(100vw - 20px)}
  .toast{padding:11px}
  :root{--gutter:11px}
  .hdr-sub{display:none}
  .brand-logo{height:calc(22px * var(--logo-scale,1))}
  .prod-row{padding:10px 12px;row-gap:6px}
  .prod-row .pr-info{flex:1 1 100%}
  .prod-row .pr-price{text-align:left;min-width:0;flex:1 1 auto}
  .prod-row .pr-priceSub{display:inline;margin-left:5px}
  .multi-pkg{padding:12px}
  .multi-pkg .mp-price,.multi-pkg .mp-priceSub{text-align:left}
  .ticket-actions{grid-template-columns:minmax(0,1fr)}
  .mobile-bar .mb-jump{display:none}
  .sys-inline{flex:1 1 100%}
  .thumb{width:66px;height:66px}
}

/* Coarse pointers (touch) — enlarge tap targets */
@media(pointer:coarse){
  .qty-btn{width:36px;height:36px}
  .qty-btn.sm{width:32px;height:32px;font-size:.95rem}
  .opt-pill{padding:10px 17px;font-size:.84rem}
  .check-item .ci-head{padding:13px}
  .cr-del{height:44px}
  .sys-inline{padding:16px 10px}
  /* A finger cannot hover, so the lift just flickers on tap */
  .opt-pill:hover,.sys-card:hover,.multi-pkg:hover,.btn-add:hover,.btn-primary:hover:not(:disabled){transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms}
  .toast,.toast.out{animation:none}
  .opt-pill:hover,.sys-card:hover,.multi-pkg:hover,.btn-add:hover,
  .btn-primary:hover:not(:disabled){transform:none}
}