/* TR Global v101 responsive text and small-screen hardening
   Build: 20260628-responsive-hardening-v101
   Purpose: stop UI text, translated labels, forms, cards and tables from
   clipping or forcing horizontal page overflow on 320px+ browser/app screens. */

:root{
  --tr-mobile-gutter:14px;
  --tr-mobile-control-min:44px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}
html,body{width:100%;max-width:100%}
body{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,picture,video,canvas,svg,iframe{max-width:100%}
img,video{height:auto}
iframe{width:100%}

/* Flex and grid children must be allowed to shrink. */
:where(
  .container,.nav,.topline-inner,.hero-grid,.page-hero-grid,.public-page-hero-grid,
  .portal-layout,.portal-content,.portal-card,.portal-toolbar,.portal-card-head,
  .portal-hero-grid,.portal-grid-two,.portal-metrics,.auth-grid,.auth-card,
  .mega-grid,.mega-card,.mega-heading,.mega-toolbar,.mega-item,.mega-item-main,
  .mega-form,.mega-form-grid,.mega-field,.mega-public-grid,.mega-case,
  .dashboard-grid,.dashboard-card,.production-main-grid,.production-line-card,
  .delivery-workspace-grid,.client-file-card,.communication-center-page,
  .style-workspace,.style-card,.style-category-body,.style-summary-card,
  .invoice-layout,.invoice-card,.order-summary-content,.order-summary-table-wrap,
  .team-chat-shell,.team-chat-conversation,.team-chat-details,
  .tr-productivity-shell,.tr-productivity-card,.tr-command-results,
  .footer-main,.footer-bottom,.tr-legal-footer-bar
)>*{min-width:0}

/* Prefer normal word boundaries. Break only genuinely unbroken data strings. */
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,legend,summary,blockquote){
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:auto;
}
:where(a,button,label,strong,small,span,td,th){
  word-break:normal;
  overflow-wrap:break-word;
}
:where(
  [data-file-name],.file-name,.document-name,.client-file-main h4,
  .team-chat-attachment-copy,.mega-item strong,.style-code,.po-number,
  .email-address,a[href^="mailto:"],a[href^="tel:"],code,pre
){overflow-wrap:anywhere;word-break:break-word;hyphens:none}

/* Controls should wrap at spaces rather than splitting words or clipping. */
:where(
  .btn,.mega-btn,.mega-tab,.nav-toggle,.nav-cta,
  .portal-sidebar a,.portal-sidebar button,.portal-toolbar button,
  .form-actions button,.hero-actions a,.hero-actions button,
  .admin-product-subnav a,.managed-catalogue-filter button,
  .notification-filter-row button,.style-tab,.document-tab
){
  max-width:100%;
  min-width:0;
  height:auto;
  white-space:normal;
  line-height:1.25;
  text-align:center;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Status labels and chips can use two lines instead of leaving the card. */
:where(
  .mega-pill,.status-pill,.status-badge,.role-badge,.portal-role-badge,
  .catalogue-status,.managed-meta span,.client-file-topline span,
  .client-file-meta span,.production-line-id strong,.production-line-id span,
  .footer-badges span,.notification-badge,.style-status,.delivery-status
){
  max-width:100%;
  white-space:normal;
  line-height:1.25;
  text-align:center;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Forms and long native controls must never impose a desktop minimum width. */
:where(input,select,textarea,button){max-width:100%;min-width:0}
:where(input,select,textarea){width:100%}
:where(input[type="checkbox"],input[type="radio"]){width:auto;max-width:none}
:where(fieldset,label,.mega-field,.portal-form label,.form label){min-width:0}
:where(pre,code){max-width:100%}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Keep horizontal movement inside data components, never on the whole page. */
:where(
  .table-wrap,.mega-table-wrap,.invoice-items-scroll,.invoice-doc-scroll,
  .order-summary-table-wrap,.production-table-wrap,.style-table-wrap,
  .document-table-wrap,.user-table-wrap,.portal-table-wrap
){
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:900px){
  :where(.mega-toolbar,.portal-toolbar,.form-actions,.hero-actions,.mega-hero-actions,
    .card-actions,.client-row-actions,.invoice-list-actions,.invoice-buyer-actions,
    .qc-report-actions,.qc-image-actions,.delivery-file-actions,.production-actions,
    .style-collapse-actions,.style-main-save-bar,.outreach-actions){
    flex-wrap:wrap;
    max-width:100%;
  }

  /* Any table without a dedicated wrapper still becomes locally scrollable. */
  main table:not(.tr-app-card-table){
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:700px){
  :root{--tr-mobile-gutter:12px}

  .container{width:min(calc(100% - 24px),1460px)!important}

  h1,.hero h1,.page-hero h1,.portal-hero h1,.auth-copy h1,
  .mega-hero h1,.mega-public-hero h1{
    font-size:clamp(2rem,10.5vw,3rem)!important;
    line-height:1.06!important;
    letter-spacing:-.04em;
  }
  h2{font-size:clamp(1.55rem,7.2vw,2.25rem)}
  h3{overflow-wrap:break-word}

  :where(.mega-kicker,.v095-kicker,.public-kicker,.tr-app-welcome-eyebrow,
    .page-eyebrow,.hero-eyebrow){letter-spacing:.08em!important}

  :where(.portal-card,.mega-card,.auth-card,.account-recovery-card,
    .managed-catalogue-toolbar,.team-edit-note,.fabric-note-card,
    .fabric-crosslink-card){padding:16px!important}

  :where(.mega-toolbar,.portal-toolbar){display:grid;grid-template-columns:1fr;width:100%}
  :where(.mega-toolbar input,.mega-toolbar select,.portal-toolbar input,
    .portal-toolbar select,.portal-toolbar button){width:100%;min-width:0!important}

  :where(.mega-form-grid,.portal-form,.production-batch-form,.production-item-form,
    .delivery-form-grid,.delivery-summary-grid,.delivery-upload-form,
    .client-file-form,.qc-inspection-grid,.qc-support-grid,
    .account-settings-form,.account-create-form,.client-contact-v097){
    grid-template-columns:minmax(0,1fr)!important;
  }
  :where(.mega-field,.mega-field.third,.mega-field.full,
    .portal-form>*,.production-batch-form>*,.production-item-form>*,
    .delivery-form-grid>*,.delivery-summary-grid>*,.delivery-upload-form>*,
    .client-file-form>*,.qc-inspection-grid>*,.qc-support-grid>*){
    grid-column:1/-1!important;
    min-width:0!important;
  }

  :where(.hero-actions,.mega-hero-actions,.form-actions,.account-access-actions,
    .mega-step-actions,.outreach-actions){
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
    align-items:stretch;
  }
  :where(.hero-actions,.mega-hero-actions,.form-actions,.account-access-actions,
    .mega-step-actions,.outreach-actions) :where(.btn,.mega-btn,button,a){
    width:100%;
    justify-content:center;
  }

  .mega-progress{grid-template-columns:1fr!important}
  .mega-progress-step{padding:10px;white-space:normal}
  .mega-file-row{align-items:flex-start;flex-direction:column}
  .mega-search-box{display:grid;gap:9px}
  .mega-search-box input{padding:14px 15px}
  .mega-search-box button{position:static;width:100%}
  .mega-bar-row{grid-template-columns:1fr!important;gap:5px}
  .mega-bar-row>:last-child{justify-self:start}

  .footer-bottom,.tr-legal-footer-bar{display:flex;flex-wrap:wrap;gap:8px 14px}
  .tr-legal-footer-links{display:flex;flex-wrap:wrap;gap:8px 14px}

  body.public-site .nav{width:min(calc(100% - 16px),1460px)!important;gap:6px}
  body.public-site .nav-toggle{min-height:42px;padding:9px 10px;font-size:.78rem}
  body.public-site .tr-language-switcher select{min-width:82px;max-width:94px;padding-left:8px;padding-right:25px}
  body.public-site .nav-links{top:82px;left:10px;right:10px;max-height:calc(100dvh - 94px);overflow-y:auto}

  .portal-sidebar a,.portal-sidebar button{min-height:44px;display:flex;align-items:center}

  /* User-facing text should not be forced into narrow no-wrap cells. */
  :where(.role-save-cell,.style-collapse-actions,.team-chat-file-pill,
    .order-sheet-po,.order-sheet-vendor,.order-sheet-origin,
    .order-sheet-quantity,.order-sheet-money){white-space:normal}

  /* Preserve intentional spreadsheet-style tables as local scrollers. */
  :where(.order-summary-table,.production-table,.invoice-doc-table,.mega-table){
    white-space:normal;
    max-width:none;
  }
}

@media (max-width:480px){
  .container{width:min(calc(100% - 20px),1460px)!important}
  :where(.portal-card,.mega-card,.auth-card,.account-recovery-card){border-radius:18px!important;padding:14px!important}
  :where(.mega-item,.client-file-card,.delivery-file-card,.production-line-card){padding:13px!important;border-radius:17px!important}

  :where(.btn,.mega-btn,.nav-toggle,.portal-sidebar a,.portal-sidebar button,
    .form-actions button,.hero-actions a,.hero-actions button){min-height:var(--tr-mobile-control-min)}

  .mega-case-body{padding:18px}
  .mega-public-card div{padding:16px}
  .mega-trust-item{padding:15px}

  .brand-name{max-width:104px!important}
  body.public-site .tr-language-switcher select{min-width:76px;max-width:84px;font-size:.64rem}

  /* Avoid broken-looking mid-word wrapping in translated action labels. */
  :where(.btn,.mega-btn,.mega-tab,.nav-toggle,.nav-cta,
    .portal-sidebar a,.portal-sidebar button,.managed-catalogue-filter button){
    hyphens:none;
    overflow-wrap:break-word;
  }
}

@media (max-width:350px){
  .container{width:min(calc(100% - 16px),1460px)!important}
  body.public-site .brand-name{display:none!important}
  body.public-site .brand-mark{width:40px;height:40px;flex-basis:40px}
  body.public-site .tr-language-switcher select{min-width:72px;max-width:76px}
  body.public-site .nav-toggle{padding-inline:8px}
  h1,.hero h1,.page-hero h1,.portal-hero h1,.auth-copy h1,
  .mega-hero h1,.mega-public-hero h1{font-size:clamp(1.82rem,10vw,2.35rem)!important}
}

/* Native app-specific text handling. */
html.tr-native-app{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden!important;
}
html.tr-native-app body{max-width:100%!important;overflow-x:hidden!important}
html.tr-native-app :where(.portal-content,.portal-content>*,.portal-card,.mega-card,
  .tr-app-quick-actions,.tr-mobile-drawer,.tr-app-language-sheet){min-width:0!important;max-width:100%!important}
html.tr-native-app :where(.btn,.mega-btn,button:not(.tr-app-sheet-close):not(.tr-native-style-step)){
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}
html.tr-native-app :where(input,select,textarea){font-size:16px!important;min-width:0!important;max-width:100%!important}
html.tr-native-app .tr-mobile-nav span{
  max-width:100%;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.05!important;
  text-align:center;
}
html.tr-native-app .tr-app-welcome-brand>div,
html.tr-native-app .tr-app-feature>div{min-width:0}
html.tr-native-app .tr-app-welcome-brand strong,
html.tr-native-app .tr-app-welcome-brand small,
html.tr-native-app .tr-app-feature strong,
html.tr-native-app .tr-app-feature span{overflow-wrap:break-word;word-break:normal}

@media (max-width:420px){
  html.tr-native-app .tr-app-welcome{padding-left:14px!important;padding-right:14px!important}
  html.tr-native-app .tr-app-welcome h1{font-size:clamp(2.05rem,10.5vw,2.75rem)!important;letter-spacing:-.045em!important}
  html.tr-native-app .tr-app-welcome-top{gap:8px}
  html.tr-native-app .tr-app-welcome-brand img{width:46px;height:46px;flex:0 0 46px}
  html.tr-native-app .tr-app-welcome .tr-language-switcher select{min-width:88px!important;max-width:96px!important}
  html.tr-native-app .tr-mobile-nav{padding-left:3px!important;padding-right:3px!important}
  html.tr-native-app .tr-mobile-nav a,
  html.tr-native-app .tr-mobile-nav button{padding-left:2px!important;padding-right:2px!important}
  html.tr-native-app .tr-mobile-nav span{font-size:.57rem!important}
}

@media (max-width:360px){
  html.tr-native-app .tr-app-topbar{grid-template-columns:38px minmax(0,1fr) auto!important;gap:6px!important;padding-left:7px!important;padding-right:7px!important}
  html.tr-native-app .tr-app-topbar-brand,
  html.tr-native-app .tr-app-topbar-back,
  html.tr-native-app .tr-app-language-button,
  html.tr-native-app .tr-app-profile-dot{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  html.tr-native-app .tr-app-topbar-copy strong{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    max-height:2.25em!important;
    font-size:.88rem!important;
    line-height:1.1!important;
  }
  html.tr-native-app .tr-app-topbar-copy span{display:none!important}
  html.tr-native-app .tr-mobile-nav span{font-size:.54rem!important}
  html.tr-native-app .tr-app-welcome-brand small{font-size:.58rem}
}

/* Large-text accessibility must remain usable at phone widths. */
@media (max-width:700px){
  html.tr-text-large :where(.portal-toolbar,.mega-toolbar,.form-actions),
  html.tr-text-xlarge :where(.portal-toolbar,.mega-toolbar,.form-actions){grid-template-columns:1fr!important}
  html.tr-text-large :where(.btn,.mega-btn),
  html.tr-text-xlarge :where(.btn,.mega-btn){white-space:normal!important;height:auto!important}
}

@media print{
  html,body{overflow:visible!important}
  main table{display:table!important;overflow:visible!important}
}

/* Final small-screen containment fixes found by the 320px rendered-layout audit. */
body{margin:0}
:where(.outreach-shell,.outreach-toolbar,.outreach-kpis,.outreach-panel,.outreach-grid,
  .outreach-card,.outreach-card-head,.outreach-form,.outreach-inline,
  .outreach-performance-summary,.outreach-performance-grid){min-width:0;max-width:100%}
@media(max-width:700px){
  .portal-card-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important}
  .portal-card-head>:last-child{justify-self:start;max-width:100%}
  .outreach-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important}
  .outreach-toolbar .search-box{min-width:0!important;width:100%!important}
  .outreach-kpis{grid-template-columns:minmax(0,1fr)!important}
  .outreach-grid,.outreach-form,.outreach-mode,.outreach-performance-summary,.outreach-performance-grid{grid-template-columns:minmax(0,1fr)!important}
  .outreach-inline{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important}
  .outreach-inline>*{width:100%!important;min-width:0!important}
  .outreach-card-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important}
  .outreach-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .outreach-actions>*{width:100%!important}
}

/* Public confidentiality cards: avoid splitting compound words into fragments. */
.v096-confidential-points span{overflow-wrap:break-word!important;word-break:normal!important}
@media(max-width:420px){.v096-confidential-points{grid-template-columns:minmax(0,1fr)!important}}

/* Native table fallback: contain desktop tables before card conversion JS runs. */
html.tr-native-app :where(.portal-table-wrap,.invoice-items-scroll,.outreach-table-wrap){
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
}
html.tr-native-app table.tr-app-card-table td{
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* Specificity override for native v101's earlier overflow:visible table rule. */
html.tr-native-app body .portal-table-wrap,
html.tr-native-app body .invoice-items-scroll,
html.tr-native-app body .outreach-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
}

/* Keep the process-page account heading intact on the narrowest app screens. */
@media(max-width:360px){
  .process-showcase-account{padding:18px!important}
  .process-showcase-account strong{font-size:1.5rem!important;overflow-wrap:normal!important;word-break:normal!important}
}

/* Large-text mode: give catalogue labels full rows rather than breaking words. */
@media(max-width:420px){
  html.tr-text-large .premium-catalogue .apparel-tabs,
  html.tr-text-xlarge .premium-catalogue .apparel-tabs,
  html.tr-text-large .catalogue-redesign .apparel-tabs,
  html.tr-text-xlarge .catalogue-redesign .apparel-tabs,
  html.tr-text-large .apparel-tabs,
  html.tr-text-xlarge .apparel-tabs{
    grid-template-columns:minmax(0,1fr)!important;
    border-radius:24px!important;
  }
  html.tr-text-large .apparel-tab,
  html.tr-text-xlarge .apparel-tab{
    width:100%!important;
    min-width:0!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    white-space:normal!important;
  }
  html.tr-text-large .premium-catalogue .style-drawer,
  html.tr-text-xlarge .premium-catalogue .style-drawer{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html.tr-text-large .premium-catalogue .style-link,
  html.tr-text-xlarge .premium-catalogue .style-link{
    overflow-wrap:normal!important;
    word-break:normal!important;
    white-space:normal!important;
  }
}

/* Large-text catalogue cards also need a single full-width column. */
@media(max-width:420px){
  html.tr-text-large .premium-catalogue .garment-grid,
  html.tr-text-xlarge .premium-catalogue .garment-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  html.tr-text-large .premium-catalogue .premium-program-card,
  html.tr-text-xlarge .premium-catalogue .premium-program-card,
  html.tr-text-large .premium-catalogue .premium-program-card[open],
  html.tr-text-xlarge .premium-catalogue .premium-program-card[open]{
    grid-column:1 / -1!important;
    min-width:0!important;
  }
}

/* Large-text product links: reserve the whole row for the label. */
@media(max-width:420px){
  html.tr-text-large .premium-catalogue .style-drawer,
  html.tr-text-xlarge .premium-catalogue .style-drawer{padding-left:10px!important;padding-right:10px!important}
  html.tr-text-large .premium-catalogue .style-link,
  html.tr-text-xlarge .premium-catalogue .style-link{
    display:block!important;
    width:100%!important;
    padding:10px!important;
  }
  html.tr-text-large .premium-catalogue .style-link:after,
  html.tr-text-xlarge .premium-catalogue .style-link:after{display:none!important}
}

/* Ultra-narrow fallback for compact webviews and split-screen windows. */
@media(max-width:300px){
  .premium-catalogue .apparel-tabs,
  .catalogue-redesign .apparel-tabs,
  .apparel-tabs{grid-template-columns:minmax(0,1fr)!important;border-radius:22px!important}
  .apparel-tab{width:100%!important;min-width:0!important;overflow-wrap:normal!important;word-break:normal!important}
  .premium-catalogue .garment-grid{grid-template-columns:minmax(0,1fr)!important}
  .premium-catalogue .premium-program-card,
  .premium-catalogue .premium-program-card[open]{grid-column:1 / -1!important;min-width:0!important}
  .premium-catalogue .style-drawer{grid-template-columns:minmax(0,1fr)!important;padding-left:10px!important;padding-right:10px!important}
  .premium-catalogue .style-link{display:block!important;width:100%!important;padding:10px!important;overflow-wrap:normal!important;word-break:normal!important}
  .premium-catalogue .style-link:after{display:none!important}
}

/* 2026-06-28 public-header text integrity hotfix.
   Prevents navigation labels and the brand from splitting mid-word. */
body.public-site .nav,body.public-site .nav *{min-width:0}
body.public-site .brand-name strong,body.public-site .brand-name small,
body.public-site .nav-links a,body.public-site .nav-cta,body.public-site .nav-toggle,
body.public-site .tr-language-switcher select{
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
body.public-site .nav-links a,body.public-site .nav-cta,body.public-site .nav-toggle{white-space:nowrap!important}
body.public-site .brand-name strong,body.public-site .brand-name small{white-space:nowrap!important}
@media(min-width:1281px){body.public-site .nav-links{flex-wrap:nowrap!important}}