/*
 * ProductionBench V2: responsive layer over the reference pb.css (loaded after it).
 *
 * The reference demo lays out many sections with inline `grid-template-columns` styles that pb.css
 * cannot collapse, so at phone width they stay two-column (hero headlines one word per line) or push
 * the page sideways (store filters, terms/privacy table of contents, cart/checkout sidebars, podcast
 * player). Build prompt §0.8/§11 require these pages to work at 390 with no horizontal scroll.
 *
 * Every rule here is phone/tablet only (≤760px), so desktop and 820px tablet stay pixel-identical to
 * the reference. Documented in docs/demo-only-removed.md → "Responsive fixes".
 */
@media (max-width: 760px) {
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  [style*="grid-template-columns:minmax(0,2fr) minmax(0,1fr)"],
  [style*="grid-template-columns:260px minmax(0,1fr)"],
  [style*="grid-template-columns:240px minmax(0,1fr)"],
  [style*="grid-template-columns:200px minmax(0,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* The audio waveform has a fixed bar count; let it clip inside its track instead of widening the page. */
  .audio .bars {
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  /* Inline display sizes beat pb.css's own 640px h1 step; bring them to the same scale. */
  h1[style*="font-size:72px"],
  h1[style*="font-size:64px"],
  h1[style*="font-size:60px"],
  h1[style*="font-size:56px"] {
    font-size: 44px !important;
    line-height: 46px !important;
  }
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"] {
    font-size: 40px !important;
    line-height: 42px !important;
  }
}

/* App pages (client + workbench), build prompt §3.5: the page header is one row (title left, actions right,
   no wrap) and "below 1100px it wraps". The side nav leaves ~580px for content at tablet width, so headers,
   long labels and queue tables must give way there. Desktop (>1100px) keeps the reference's single row. */
@media (max-width: 1100px) {
  .main > .between:first-child { flex-wrap: wrap; max-width: 100%; }
  .main > .between:first-child > div { min-width: 0; max-width: 100%; }
  .main > .between:first-child > div:first-child { flex: 1 1 100%; }
  .main > .between:first-child .lbl, .main > .between:first-child p { white-space: normal; overflow-wrap: anywhere; }
  .main > .between:first-child > .row { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .qlist, .qlist .scroll { max-width: 100%; overflow-x: auto; }
}

/* Workbench receiving rows and wizard buttons wrap at phone width. */
@media (max-width: 760px) {
  .tl .rcv-row { flex-wrap: wrap; gap: 4px 12px; }
  .tl .rcv-row > span { min-width: 0; }
  .tl .rcv-row > span:nth-child(2) { flex: 1 1 180px; overflow-wrap: anywhere; }
  .tf-nav { flex-wrap: wrap; }
}

/* Logo: the app header (client + workbench) shows the lockup larger on wide screens; phones keep 44px. */
@media (min-width:821px){.apphead .topbar .logo img{height:54px!important}}

/* Ticket Overview: status + summary left, items right; one column on tablets and phones. */
.tab.ov-grid.on{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start}
@media (max-width:1100px){.tab.ov-grid.on{grid-template-columns:minmax(0,1fr)}}

/* Ticket page fits the window on desktop (body.fit, set by wb-money.js): header and tab bars stay put, the open tab
   fills the rest, and long content scrolls inside its own column instead of the page. Phones keep page scroll. */
@media (min-width:1101px){
  body.fit .main{height:calc(100vh - var(--apphead-h,96px) - env(safe-area-inset-top,0px));overflow:hidden;padding-bottom:16px;gap:16px}
  body.fit .main>*{flex-shrink:0}
  body.fit .main>.tab.on{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.fit .main>.tab.ov-grid.on{overflow:hidden;grid-template-rows:minmax(0,1fr);align-items:stretch}
  body.fit .ov-grid.on>*{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  body.fit .ov-grid.on>*>.card{flex:none}
  body.fit #ov-summary-card,body.fit #ov-items{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.fit #ov-summary-card>.tl,body.fit #ov-items>.ov-list{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
  body.fit #bench-tabs.on{display:flex;flex-direction:column;overflow:hidden}
  body.fit #bench-tabs>.subtabs{flex:none}
  body.fit #bench-tabs>.subpane:not([hidden]){flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body.fit #bench-tabs>[data-subpane=assessment]:not([hidden]){display:flex;flex-direction:column;gap:12px;overflow:hidden}
  body.fit .assess-grid{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
  body.fit .assess-grid>*{overflow-y:auto;min-height:0;overscroll-behavior:contain}
  body.fit #to-quote-card{position:static;flex:none;box-shadow:none}
  /* inside a scrolling column nothing shrinks: the column scrolls instead */
  body.fit .assess-grid>*>*,body.fit .ov-list>*,body.fit #ov-summary-card>.tl>*,body.fit .main>.tab.on>*,body.fit #bench-tabs>.subpane>*{flex-shrink:0}
}
@media (min-width:1101px){
  body.fit .main>.tab.on:has(> #quote-builder){display:flex;flex-direction:column;overflow:hidden}
  body.fit #quote-builder{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
  body.fit #quote-builder>.card{overflow-y:auto;min-height:0}
  /* only the lists scroll; the custom line (left) and Subtotal / Save / Send (right) stay pinned at the bottom */
  body.fit #quote-builder #qb-results,body.fit #quote-builder .qb-scroll{flex:1 1 0;min-height:200px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
  body.fit #quote-builder .qb-custom,body.fit #quote-builder .qb-foot{position:static}
  body.fit #quote-builder>.card>*{flex-shrink:0}
}
@media (min-width:1101px){
  body.fit .main>.tab.bill-grid.on{overflow:hidden;grid-template-rows:minmax(0,1fr);align-items:stretch}
  body.fit .bill-grid.on>.card{overflow-y:auto;min-height:0;overscroll-behavior:contain}
  body.fit .bill-grid.on>.card>*{flex-shrink:0}
}

/* IBM Plex Mono is loaded at 500 only: never let the browser fake a bolder weight (Safari smears it into a struck-through look on prices). */
.mono,.mono *{font-synthesis-weight:none}

/* App menu (client + workbench): ≤1024px the section rail becomes a slide-out drawer opened by the top-bar
   menu button (markup: transform.ts appDrawer; behaviour: pb.js). Desktop keeps the fixed rail. */
.menubtn{display:none}
.side-head,.side-foot,.side-scrim{display:none}
@media (max-width:1024px){
  .menubtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:var(--radius-t,6px);background:transparent;color:var(--ink);cursor:pointer;padding:0}
  .menubtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .topbar{flex-wrap:nowrap;gap:10px}
  .topbar>.logo{margin-right:auto;min-width:0}
  .topbar>.row{flex-wrap:nowrap;min-width:0}
  .shell>.side{position:fixed!important;top:0;left:0;bottom:0;z-index:70;width:min(320px,86vw);height:100dvh!important;max-height:none;flex-direction:column!important;flex-wrap:nowrap!important;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:0 0 40px rgba(0,0,0,.45)}
  body.menu-open .shell>.side{transform:none;visibility:visible;transition:transform .22s ease}
  .shell>.side .lbl{display:block!important}
  .shell>.side a{min-height:44px;padding:10px 12px!important;font-size:16px!important}
  .side-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 4px 0}
  .side-head .lbl{padding:0 12px!important}
  .side-head .menubtn{color:var(--on-rail);border-color:rgba(255,255,255,.18)}
  .side-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5)}
  .side-scrim[hidden]{display:none}
  .shell>.main{flex-basis:100%}
  body.menu-open{overflow:hidden}
}
/* Phones: the top bar is menu · logo · notifications; who, the organization switcher, Account and Sign out move
   into the drawer's foot. */
@media (max-width:640px){
  .apphead .topbar{padding:8px 12px}
  .apphead .topbar .logo img{height:34px!important}
  .apphead .topbar .who,.apphead .topbar select.orgsw,.apphead .topbar>.row>a.btn.quiet{display:none!important}
  .side-foot{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
  .side-who{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--on-rail);font-size:14px;line-height:19px}
  .side-who .muted{color:var(--on-rail-link)!important;opacity:.85}
  .side-foot select.orgsw{margin:4px 12px;width:calc(100% - 24px);min-height:44px;font-size:16px}
  .apphead .bell{min-width:44px;min-height:44px}
}

/* Phones and portrait tablets: app tables become cards (one per row, each value under its column label; pb.js labels
   the cells and keeps labelling rows added later). Phones: label beside value; tablets: two fields per row. */
@media (max-width:900px){
  table.rtable,table.rtable tbody,table.rtable tr,table.rtable td{display:block;width:auto;box-sizing:border-box}
  table.rtable{width:100%!important;min-width:0!important;table-layout:auto}
  table.rtable thead,table.rtable tr.rhead{display:none}
  table.rtable tr{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-t,6px);padding:8px 12px;margin:0 0 10px}
  table.rtable tr.sel{border-color:var(--review)}
  table.rtable td{position:relative;padding:5px 0 5px 104px;min-height:26px;border:0;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;min-width:0;max-width:none!important}
  table.rtable td::before{content:attr(data-label);position:absolute;left:0;top:7px;width:96px;font:500 11px/14px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  table.rtable td[data-label=""],table.rtable td[colspan]{padding-left:0}
  table.rtable td[data-label=""]::before,table.rtable td[colspan]::before{display:none}
  table.rtable td:empty{display:none}
  .scroll:has(>table.rtable),.main :has(>table.rtable){overflow:visible}
}
@media (min-width:641px) and (max-width:900px){
  table.rtable tr:not(.rhead){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;padding:12px 16px}
  table.rtable td{padding:0}
  table.rtable td::before{position:static;display:block;width:auto;margin-bottom:2px}
  table.rtable td[colspan]{grid-column:1/-1}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .kpi{padding:12px 14px}
  .kpi b{font-size:30px;line-height:32px}
}

/* Tablets + phones (responsive review 2026-10-16). */
/* Headings never land under the sticky app bar when a page scrolls to a field. */
html{scroll-padding-top:calc(var(--apphead-h,0px) + 12px)}
@media (max-width:1024px){
  /* Tab rows stay one row and scroll sideways instead of wrapping into ragged lines. */
  .tabs,.subtabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
  .tabs>*,.subtabs>*{flex:none;white-space:nowrap;scroll-snap-align:start}
  /* Top bar: avatar only (name / role live in Account); buttons never break. */
  .apphead .topbar .who>span:not(.avatar){display:none}
  .apphead .topbar .btn{white-space:nowrap}
  /* Wide tables scroll inside their card instead of being cut off; IDs and dates don't break. */
  :is(.main,main,.sec,.card,article) :has(>table){max-width:100%;overflow-x:auto}
  th[colspan],td[colspan]{white-space:normal!important}
  .main td.mono,.main td.mono a,.main td .mono,.main th{white-space:nowrap}
  .main td a[href*="/tickets/"]{white-space:nowrap}
}
/* Switches keep their shape when the label wraps (cookies, settings). */
.toggle input{flex:none}
.toggle{align-items:flex-start}
.toggle>span{min-width:0;padding-top:3px}
/* Intake item cards: In the box / Missing gets its own row on phones instead of squeezing the description. */
@media (max-width:640px){
  .in-item{flex-wrap:wrap}
  .in-item>div:not(.seg2){flex:1 1 calc(100% - 90px)}
  .in-item>.seg2{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr}
}
/* Page headers whose title or actions carry inline flex sizes (Activity): title takes its own row, then actions. */
@media (max-width:1100px){
  .main > .between:first-child > div:first-child{flex:1 1 100%!important}
  .main > .between:first-child > .row{flex:1 1 100%!important;justify-content:flex-start!important}
  .main > .between:first-child h1{overflow-wrap:anywhere}
}
@media (max-width:640px){
  .main > .between:first-child > .row > .input,.main > .between:first-child > .row > select{flex:1 1 140px;max-width:none!important;width:auto!important}
}
/* Tablet portrait: sidebar layouts (cart, checkout, kits, course, product options) stack; label/value lists inside
   half-width cards put the label above the value instead of squeezing both. */
@media (max-width:900px){
  [style*="grid-template-columns:minmax(0,2fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,3fr) minmax(0,2fr)"],
  [style*="grid-template-columns:minmax(0,1fr) 360px"],
  [style*="grid-template-columns:minmax(0,1fr) 340px"],
  [style*="grid-template-columns:minmax(0,1fr) 320px"],
  [style*="grid-template-columns:260px minmax(0,1fr)"],
  [style*="grid-template-columns:240px minmax(0,1fr)"],
  [style*="grid-template-columns:200px minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:1024px){
  .grid2 .tl>div,.grid2 .card .tl>div{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* The sample report's waveform clips inside its track at every width (it spilled out of the card on tablets). */
.audio{min-width:0}
.audio .bars{min-width:0;overflow:hidden}
/* Long status badges wrap inside card cells instead of pushing the page sideways (gear, content). */
@media (max-width:900px){table.rtable .badge{white-space:normal;max-width:100%;height:auto}}
/* Checkout on tablets and phones: the order summary comes before the form and the button. */
@media (max-width:900px){section:has(>#checkout-form)>aside{order:-1}}
/* Touch screens have no Enter key to press: hide the flows' "press Enter ↵" hint. */
@media (hover:none) and (pointer:coarse){.tf-nav>span.small.muted{display:none}}