/* JustiX v0.7.9.9 — Spatial Integrity / overlap prevention audit
   Scope: all app surfaces. Does not alter navy/gold identity. */

/* 1) Universal resilience for grid/flex children and long legal text */
:where(.app-shell,.main,.content,.view,.glass,.glass-soft,.panel,.card,.hero,
       .court-layout,.court-main,.court-side,.settings-grid,.settings-card,
       .jx64-panel,.jx64-metric-card,.jx64-party,.jx791-role-shell,.jx791-live-shell,
       .jx79-role-card,.jx-context-card,.jx66-footer,
       .learning-layout,.talent-layout,.passport-layout,.backend-hero,.beta-hero,
       .prod-hero,.prod-grid,.prod-panel) *{box-sizing:border-box;min-width:0}

:where(p,li,dd,.setting p,.speech p,.evidence-item p,.timeline-item p,
       .jx791-transcript p,.jx79-role-head p,.jx-context-card p,
       .legal-body p,.jx-legal-body p){overflow-wrap:anywhere;word-break:normal}

:where(svg,.avatar,.case-icon,.jx64-party-icon,.jx791-role-icon,.jx791-party-icon,
       .jx79-role-option-icon,.jx79-summary-icon){flex:0 0 auto}

/* 2) Tabs / segmented navigation: never stack labels on top of each other */
.tabs,.segment,.jx791-tabs,.learning-tabs,.talent-tabs,.passport-tabs,.beta-tabs{
  min-width:0;
}
.tabs,.jx791-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
}
.tabs button,.jx791-tabs>span{
  min-width:0!important;
  width:100%!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.15!important;
}
.jx791-tabs>span{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:12px 6px!important;
  font-size:clamp(13px,1.25vw,18px)!important;
}
.jx791-tabs small{
  display:block!important;
  margin:0!important;
  font-size:clamp(10px,.9vw,13px)!important;
  line-height:1.15!important;
  white-space:normal!important;
  text-align:center!important;
}

/* Courtroom right rail tabs from the main engine */
.court-side>.tabs{padding:8px 8px 0!important;gap:4px!important}
.court-side>.tabs button{padding:9px 5px!important;font-size:clamp(8px,.75vw,11px)!important;line-height:1.2!important}

/* Horizontal tab families that can legitimately overflow */
.learning-tabs,.talent-tabs,.passport-tabs,.beta-tabs{
  display:flex!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  gap:5px!important;
}
.learning-tabs button,.talent-tabs button,.passport-tabs button,.beta-tabs button{
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
}

/* 3) Cards: reserve independent zones for icon, heading, copy and values */
.jx64-metric-card{height:auto!important;min-height:138px!important;align-items:start!important}
.jx64-metric-copy{display:grid!important;align-content:start!important;gap:5px!important}
.jx64-metric-copy h3,.jx64-metric-copy p,.jx64-metric-copy strong{margin:0!important;max-width:100%!important}
.jx64-metric-copy p{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important}

.jx64-party,.jx791-party{height:auto!important;min-height:116px!important;align-items:center!important}
.jx64-party-copy,.jx791-party>div:last-child{min-width:0!important}
.jx64-party strong,.jx791-party strong{white-space:normal!important;line-height:1.2!important}

/* 4) Live hearing image / judge label: prevent duplicate or shifted overlays */
.jx791-judge-photo{position:relative!important;isolation:isolate;overflow:hidden!important}
.jx791-judge-photo:before{z-index:1!important;pointer-events:none!important}
.jx791-judge-meta{position:absolute!important;left:18px!important;right:18px!important;bottom:16px!important;z-index:3!important;display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;gap:14px!important;align-items:center!important}
.jx791-judge-meta>*{min-width:0!important}
.jx791-judge-meta .jx791-role-icon,.jx791-judge-meta .jx791-party-icon{margin:0!important;justify-self:center!important;align-self:center!important}
.jx791-judge-meta strong,.jx791-judge-meta b{display:block!important;white-space:normal!important;line-height:1.15!important}
.jx791-judge-meta span{display:block!important;white-space:normal!important;line-height:1.3!important}

/* 5) Tables / dense rows: scroll rather than collapse columns onto each other */
.table,.case-table,.beta-table,.talent-table,.passport-table{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.table-row,.beta-row{min-width:0}
.case-data{grid-template-columns:minmax(220px,1.6fr) minmax(72px,.55fr) minmax(92px,.65fr) minmax(135px,.8fr) minmax(48px,.35fr) 38px!important}
.case-data>*{min-width:0!important}
.case-data .title{min-width:0!important}.case-data .title>div{min-width:0!important}
.case-data .title b,.case-data .title span{white-space:normal!important;overflow-wrap:anywhere}

/* 6) Forms / settings: labels and controls must not collide */
.setting{gap:14px!important;align-items:center!important}
.setting>div{min-width:0!important}
.setting>button,.setting>select,.setting>.select{flex:0 0 auto!important;max-width:48%!important}
select,.select,input,textarea,button{max-width:100%}

/* 7) Top bar and action groups */
.topbar,.top-actions,.page-head,.hero-actions,.beta-actions,.backend-account-actions{min-width:0}
.top-actions{flex-wrap:wrap!important;justify-content:flex-end!important;row-gap:7px!important}
.search{min-width:180px!important}

/* 8) Footer / legal areas */
.jx66-footer-top>*{min-width:0!important}
.jx66-footer nav button{white-space:normal!important;text-align:left!important;line-height:1.25!important}
.jx66-footer-bottom{min-width:0!important}
.jx66-copyright,.jx66-motto{white-space:normal!important;overflow-wrap:anywhere!important}

/* 9) Global legal context modal */
.jx-context-card{overflow:auto!important;max-height:calc(100dvh - 30px)!important}
.jx-context-grid>*{min-width:0!important}
.jx-context-jurisdiction strong,.jx-context-jurisdiction span{white-space:normal!important;overflow-wrap:anywhere!important}
.jx-context-language-row{align-items:start!important}

/* 10) Role selector modal: fully scrollable, no fixed lower-content clipping */
.jx79-role-modal{overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.jx79-role-card{max-height:none!important;overflow:visible!important;margin:auto!important}
.jx791-role-setup,.jx791-live-shell{min-width:0!important}
.jx79-role-grid>*{min-width:0!important}
.jx79-role-option h3,.jx79-role-option p{white-space:normal!important;overflow-wrap:anywhere!important}

/* 11) Responsive recomposition */
@media(max-width:1180px){
  .case-data{grid-template-columns:minmax(210px,1.5fr) minmax(70px,.55fr) minmax(88px,.65fr) minmax(120px,.8fr) minmax(44px,.3fr) 36px!important}
  .setting{align-items:flex-start!important}
}

@media(max-width:920px){
  .top-actions{width:auto!important;max-width:100%!important}
  .search{min-width:0!important}
  .case-table,.table{overflow-x:auto!important}
  .case-data{min-width:760px!important}
  .jx-context-language-row{grid-template-columns:1fr!important}
  .jx-context-language-row select{width:100%!important}
  .jx791-tabs>span{font-size:14px!important;padding:10px 4px!important}
  .jx791-tabs small{font-size:10px!important}
}

@media(max-width:720px){
  .tabs,.jx791-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .jx791-tabs{border-radius:16px!important;overflow:visible!important}
  .jx791-tabs>span{min-height:54px!important;border-bottom:1px solid rgba(83,157,204,.18)}
  .jx791-transcript{border-top:1px solid rgba(83,157,204,.22)!important;border-radius:16px!important;margin-top:8px}
  .setting{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .setting>button,.setting>select,.setting>.select{max-width:100%!important;width:100%!important;justify-self:stretch!important}
  .jx791-judge-meta{grid-template-columns:52px minmax(0,1fr)!important;left:14px!important;right:14px!important;bottom:12px!important;gap:10px!important}
  .jx64-metric-card{min-height:0!important}
}

@media(max-width:480px){
  .tabs,.jx791-tabs{grid-template-columns:1fr 1fr!important}
  .jx791-tabs>span{font-size:13px!important}
  .jx791-tabs small{font-size:9.5px!important}
  .top-actions .primary-btn{width:100%!important}
  .jx-context-card{padding:18px 14px!important}
  .jx-context-grid{grid-template-columns:1fr!important}
}