/* TR Global v252 — mobile website cleanup
   Browser mobile is not the native app. Keep the secure workspace responsive,
   remove floating assistant controls, and make complex work pages usable on phones. */

/* Lily is a public-site assistant only. It must never float over an authenticated workspace. */
body[data-portal-page] .lily-assistant,
body[data-portal-page] [data-lily-assistant],
body.tr-account-workspace .lily-assistant,
body.tr-account-workspace [data-lily-assistant]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

@media(max-width:860px){
  html:not(.tr-native-app):not(.tr-pwa-standalone),
  html:not(.tr-native-app):not(.tr-pwa-standalone) body{max-width:100%;overflow-x:hidden!important}

  /* Secure browser workspace: one clean content column. Navigation lives in the bottom bar / drawer. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site){
    --tr-mobile-page-gutter:12px;
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
    background:#f5f7fb!important;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-layout{
    display:block!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    gap:0!important;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-sidebar{
    display:none!important;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-content,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) main,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-content>*{
    min-width:0!important;
    max-width:100%!important;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .container{
    width:calc(100% - (var(--tr-mobile-page-gutter) * 2))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .footer{display:none!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) #tr-utility-stack,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .tr-install-button,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) [data-tr-install]{display:none!important}

  /* Compact secure header. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .topline{display:none!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .nav{
    min-height:64px!important;height:auto!important;padding:8px 0!important;gap:8px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand{min-width:0!important;gap:8px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand-mark{width:38px!important;height:38px!important;flex:0 0 38px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand-name{min-width:0!important;max-width:145px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand-name strong{font-size:.78rem!important;white-space:normal!important;line-height:1.05!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand-name small{display:none!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .nav-toggle{margin-left:auto!important;min-height:42px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .tr-language-switcher{margin-left:0!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .tr-language-switcher select{min-width:78px!important;max-width:92px!important;height:38px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .nav-links{
    position:fixed!important;z-index:10020!important;top:68px!important;left:8px!important;right:8px!important;
    width:auto!important;max-height:calc(100dvh - 82px)!important;overflow:auto!important;padding:10px!important;
    border-radius:18px!important;background:#fff!important;box-shadow:0 22px 65px rgba(11,20,61,.22)!important
  }

  /* Mobile hero / dashboard rhythm. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-hero,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .mega-hero{padding:22px 0 18px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-hero-grid,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .dashboard-grid,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-grid-two,
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .style-buyer-grid{
    grid-template-columns:minmax(0,1fr)!important;gap:12px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(.portal-hero h1,.mega-hero h1){
    font-size:clamp(1.75rem,8.8vw,2.45rem)!important;line-height:1.02!important;letter-spacing:-.035em!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-hero .lead{font-size:.88rem!important;line-height:1.55!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .portal-section{padding-top:16px!important;padding-bottom:18px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(.portal-card,.mega-card,.dashboard-panel){
    min-width:0!important;max-width:100%!important;padding:14px!important;border-radius:18px!important
  }

  /* Toolbars and action areas should never create narrow side-by-side controls on a phone. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .style-commandbar,.portal-toolbar,.mega-toolbar,.document-carry-tools,.style-commercial-panel,.style-po-shortcut,
    .delivery-detail-head,.portal-card-head,.communication-active-inbox-head,.style-filter-bar-head
  ){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:10px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .style-commandbar,.portal-toolbar,.mega-toolbar,.document-carry-tools,.style-commercial-panel,.style-po-shortcut
  ) :is(.btn,.mega-btn,button,a[role="button"]){max-width:100%!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(.style-commandbar,.document-carry-tools)>.btn{width:100%!important;justify-content:center!important}

  /* Style Tracking is the densest workspace page: list and detail both become true phone-width cards. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-workspace{padding-bottom:8px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-buyer-grid{display:grid!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] :is(.style-list-panel,.style-detail-panel,.style-workspace-detail,.style-filter-bar){
    width:100%!important;min-width:0!important;max-width:100%!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards{grid-template-columns:minmax(0,1fr)!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-filter-grid{grid-template-columns:minmax(0,1fr)!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card{
    grid-template-columns:76px minmax(0,1fr)!important;gap:10px!important;min-height:0!important;padding:11px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card-image{width:76px!important;height:94px!important}

  /* Forms, tables and images must stay within the viewport. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-form,.mega-form-grid,.style-commercial-edit,.delivery-form-grid,.delivery-summary-grid,.delivery-upload-form,
    .qc-inspection-grid,.qc-support-grid,.account-settings-form,.account-create-form
  ){grid-template-columns:minmax(0,1fr)!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(input,select,textarea,button){max-width:100%}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(img,svg,video,canvas){max-width:100%}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-table-wrap,.document-table-wrap,.user-table-wrap,.table-wrap,.mega-table-wrap,.po-table-wrap,.tech-pack-table-wrap
  ){width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) table{font-size:.78rem}

  /* Browser mobile bottom navigation: 4 primary actions + More, never 6 squeezed items. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;
    min-height:70px!important;padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(255,255,255,.985)!important;box-shadow:0 -10px 30px rgba(17,19,74,.13)!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192 :is(a,button){
    min-height:56px!important;padding:5px 2px!important;border-radius:12px!important;gap:3px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192 svg{width:20px!important;height:20px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192 span{font-size:9.5px!important;line-height:1.08!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) .tr-mobile-drawer.tr-mobile-drawer-v192{
    left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:86dvh!important;
    border-radius:24px 24px 0 0!important;padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px))!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) .tr-mobile-drawer.tr-mobile-drawer-v192 .tr-mobile-drawer-group-links{grid-template-columns:1fr!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) .tr-mobile-drawer.tr-mobile-drawer-v192 .tr-mobile-drawer-grid :is(a,button){min-height:48px!important}

  /* Public phone website: responsive website, not a shrunken desktop canvas. */
  body.public-site{max-width:100%;overflow-x:hidden!important}
  body.public-site .container{width:calc(100% - 24px)!important;max-width:none!important}
  body.public-site .topline{display:none!important}
  body.public-site .nav{min-height:64px!important;height:auto!important;padding:8px 0!important;gap:8px!important}
  body.public-site .brand{min-width:0!important;gap:8px!important}
  body.public-site .brand-mark{width:40px!important;height:40px!important;flex:0 0 40px!important}
  body.public-site .brand-name{max-width:145px!important;min-width:0!important}
  body.public-site .brand-name strong{font-size:.8rem!important;line-height:1.05!important}
  body.public-site .brand-name small{display:none!important}
  body.public-site .nav-toggle{margin-left:auto!important;min-height:42px!important;padding:8px 10px!important}
  body.public-site .nav-links{left:8px!important;right:8px!important;top:70px!important;max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;border-radius:18px!important}
  body.public-site :is(.hero,.public-hero,.page-hero,.mega-public-hero){padding-top:42px!important;padding-bottom:42px!important}
  body.public-site :is(.hero-grid,.public-hero-grid,.page-hero-grid,.mega-public-grid){grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  body.public-site :is(.hero h1,.public-hero h1,.page-hero h1,.mega-public-hero h1){font-size:clamp(2rem,10vw,3rem)!important;line-height:1.02!important}
  body.public-site :is(.hero-actions,.public-hero-actions,.mega-hero-actions){display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:9px!important}
  body.public-site :is(.hero-actions,.public-hero-actions,.mega-hero-actions) :is(.btn,.mega-btn,a,button){width:100%!important;justify-content:center!important}
  body.public-site .footer-main{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  body.public-site .footer-bottom{align-items:flex-start!important;flex-direction:column!important}
}

@media(max-width:420px){
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site){--tr-mobile-page-gutter:9px}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .brand-name{max-width:118px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) .tr-language-switcher select{min-width:72px!important;max-width:78px!important;font-size:.64rem!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192 span{font-size:8.8px!important}
  body.public-site .brand-name{max-width:118px!important}
}

@media print{
  .lily-assistant,[data-lily-assistant],.tr-mobile-nav,.tr-mobile-drawer,.tr-mobile-drawer-backdrop{display:none!important}
}


/* =========================================================
   TR Global v356 — phone UI hardening
   Browser-only overrides. Desktop and native app layouts stay untouched.
   ========================================================= */
@media(max-width:860px){
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site){
    overflow-x:clip!important;
    -webkit-text-size-adjust:100%;
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-content,.portal-section,.portal-card,.mega-card,.dashboard-panel,.style-workspace,.style-client-board,
    .style-folder-browser,.style-filter-bar,.style-result-heading,.style-workspace-detail,.style-section,.style-panel,
    .tech-pack-workspace,.po-workspace,.communication-workspace,.delivery-workspace,.account-workspace
  ){min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

  /* Stop iOS/Android form zoom and clipped controls. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(input,select,textarea){
    width:100%;min-width:0;max-width:100%!important;font-size:16px!important;box-sizing:border-box!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) textarea{min-height:104px;resize:vertical}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(label,fieldset,details,summary){min-width:0!important;max-width:100%!important}

  /* Any complex two/three-column workspace becomes a true single column on a phone. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .mega-grid,.dashboard-grid,.portal-grid-two,.portal-grid-three,.style-admin-grid,.style-buyer-grid,.style-meta-grid,
    .style-read-grid,.style-sample-grid,.style-summary-picture-panel,.style-bom-card-grid,.style-commercial-edit,
    .delivery-summary-grid,.delivery-form-grid,.qc-inspection-grid,.qc-support-grid,.account-settings-grid,
    .tech-pack-form-grid,.tech-pack-core-image-grid,.communication-grid,.po-form-grid
  ){grid-template-columns:minmax(0,1fr)!important}

  /* Keep action rows tappable instead of squeezed/off-screen. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-actions,.mega-actions,.style-browse-actions,.style-summary-picture-actions,.style-drawer-actions,
    .style-po-shortcut-actions,.style-po-modal-actions,.tech-pack-actions,.communication-actions,.delivery-actions
  ){display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .style-summary-picture-actions,.style-drawer-actions,.style-po-shortcut-actions,.style-po-modal-actions
  ) :is(.btn,button,a){flex:1 1 150px;justify-content:center!important;min-height:44px}

  /* Phone-safe overlays/drawers. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(.style-po-modal,.modal,.portal-modal){padding:10px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(.style-po-modal>section,.modal>section,.portal-modal>section){
    width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:88dvh!important;overflow:auto!important;border-radius:20px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-details-drawer{
    display:block!important;background:rgba(7,20,71,.42)!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-details-drawer-backdrop{position:absolute!important;inset:0!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-details-drawer-panel{
    position:absolute!important;inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;height:min(82dvh,720px)!important;
    padding:18px 14px calc(20px + env(safe-area-inset-bottom,0px))!important;border-radius:22px 22px 0 0!important;box-shadow:0 -20px 70px rgba(7,20,71,.24)!important
  }

  /* Style Tracking: larger visual cards and predictable wrapping. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards{gap:10px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card{
    grid-template-columns:108px minmax(0,1fr)!important;gap:12px!important;min-height:158px!important;padding:12px!important;align-items:center!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card-image{
    width:108px!important;height:132px!important;border-radius:14px!important;background:#fff!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card-image>img{
    width:100%!important;height:100%!important;object-fit:contain!important;padding:4px!important;background:#fff!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-name-v356{
    display:-webkit-box!important;margin:0!important;color:#20284d!important;font-size:.82rem!important;font-weight:850!important;line-height:1.25!important;
    overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-card-chips{
    display:flex!important;flex-wrap:wrap!important;gap:4px!important;min-width:0!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-card-chips i{font-size:.58rem!important;padding:4px 6px!important;white-space:normal!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-meta{white-space:normal!important;line-height:1.35!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-card-footer{flex-direction:row!important;align-items:center!important;gap:6px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-card-footer .style-list-category{white-space:normal!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-card-open{white-space:nowrap!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-filter-bar{margin:10px 0!important;padding:12px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-filter-grid{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-filter-grid label:first-child{grid-column:auto!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-result-heading{padding:12px!important;margin-bottom:10px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-result-pagination>div{grid-template-columns:1fr!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-result-pagination .btn{min-height:44px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-summary-picture-media{width:100%!important;min-height:250px!important;max-height:430px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-summary-picture-media>img{object-fit:contain!important;background:#fff!important}

  /* Wide manufacturing tables stay readable by scrolling only the table, not the whole page. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .style-colour-breakdown-scroll,.style-table-wrap,.portal-table-wrap,.document-table-wrap,.user-table-wrap,.table-wrap,
    .mega-table-wrap,.po-table-wrap,.tech-pack-table-wrap,.component-booking-table-wrap
  ){display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-colour-breakdown-scroll table{min-width:760px!important}

  /* Mobile navigation/drawer must stay above page content and respect safe areas. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body.tr-account-workspace .tr-mobile-nav.tr-mobile-nav-v192{z-index:10050!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) .tr-mobile-drawer.tr-mobile-drawer-v192{z-index:10060!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) .tr-mobile-drawer-backdrop{z-index:10055!important}

  /* Public site mobile: prevent horizontal drift from feature/catalogue grids. */
  body.public-site :is(.section-grid,.feature-grid,.cards-grid,.catalogue-grid,.process-grid,.capability-grid,.footer-main){grid-template-columns:minmax(0,1fr)!important}
  body.public-site :is(.table-wrap,.portal-table-wrap,.document-table-wrap){width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
}

@media(max-width:430px){
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card{
    grid-template-columns:96px minmax(0,1fr)!important;gap:10px!important;padding:10px!important;min-height:144px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card-image{width:96px!important;height:118px!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-card-chips i:nth-child(n+4){display:none!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-card-footer{align-items:flex-start!important;flex-direction:column!important}
}

/* =========================================================
   TR Global v357 — final browser-phone audit refinements
   ========================================================= */
@media(max-width:860px){
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-toolbar-actions,.tech-pack-list-actions,.tech-pack-toolbar-actions,.po-list-actions,.invoice-list-actions,
    .delivery-actions,.account-actions,.style-view-toolbar,.style-browse-actions
  ){
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;min-width:0!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-toolbar-actions,.tech-pack-list-actions,.tech-pack-toolbar-actions,.po-list-actions,.invoice-list-actions,
    .delivery-actions,.account-actions
  ) :is(.btn,button,a){flex:1 1 140px;min-height:44px;justify-content:center!important}

  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-metrics,.clean-metrics,.mega-metrics,.dashboard-metrics
  ){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}

  /* Style Tracking — card/image-first phone layout. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] :is(
    .style-hierarchy-cards,.style-client-grid,.style-folder-grid,.style-browse-grid
  ){grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards{
    padding:6px 0!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card{
    width:100%!important;max-width:100%!important;overflow:hidden!important;text-align:left!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-list-card-content{
    min-width:0!important;width:100%!important;overflow:hidden!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-number-only{
    display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-number-only strong{
    min-width:0!important;font-size:1.02rem!important;line-height:1.15!important;overflow-wrap:anywhere!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-final-style-cards .style-number-only em{
    flex:0 0 auto!important;max-width:46%!important;font-size:.62rem!important;text-align:center!important;white-space:normal!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-name-v356{
    font-size:.88rem!important;line-height:1.3!important;margin-top:2px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-list-meta{
    overflow-wrap:anywhere!important;font-size:.7rem!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] :is(.style-grouping-grid,.style-commercial-create .style-grouping-grid){
    grid-template-columns:minmax(0,1fr)!important;gap:10px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-ratio-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-drawer-grid{
    grid-template-columns:minmax(0,1fr)!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] :is(.style-create-panel,.style-create-form,.style-workspace-collapsible){
    width:100%!important;max-width:100%!important;min-width:0!important
  }

  /* Tech Packs — keep the 1120px factory sheet inside its own scroller. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-tech-pack-page] :is(.tech-pack-builder-grid,.tech-pack-editor-card,.tech-pack-preview-panel){
    width:100%!important;max-width:100%!important;min-width:0!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-tech-pack-page] .tech-pack-preview-scroll{
    width:100%!important;max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-tech-pack-page] :is(.tech-pack-editor-head,.tech-pack-preview-head){
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:14px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-tech-pack-page] .tech-pack-editor-actions{
    display:grid!important;grid-template-columns:1fr!important;padding:12px!important;gap:8px!important
  }
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-tech-pack-page] .tech-pack-editor-actions :is(.btn,button,label){width:100%!important;justify-content:center!important;min-height:44px!important}

  /* Common workspace dialogs and editors. */
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .style-summary-editor-grid,.style-summary-editor-visual,.style-summary-editor-derived,.tech-pack-image-editor-grid,
    .account-settings-grid,.invoice-editor-grid,.po-editor-grid
  ){grid-template-columns:minmax(0,1fr)!important}
}

@media(max-width:430px){
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-portal-page]:not(.public-site) :is(
    .portal-metrics,.clean-metrics,.mega-metrics,.dashboard-metrics
  ){grid-template-columns:minmax(0,1fr)!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-ratio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html:not(.tr-native-app):not(.tr-pwa-standalone) body[data-style-page] .style-card-chips i:nth-child(n+5){display:none!important}
}