/* JustiX PB 0.8.5.1 — layout integrity + resizable sidebar
   Purpose: prevent text clipping/overflow and give desktop users direct control of sidebar width. */
:root{
  --sidebar-expanded:248px;
  --jx-sidebar-min:218px;
  --jx-sidebar-max:338px;
}

/* Desktop sidebar: narrower default + draggable divider */
.sidebar{position:relative;min-width:0}
.sidebar-resizer{
  position:absolute;z-index:90;top:12px;right:-5px;bottom:12px;width:10px;
  cursor:col-resize;touch-action:none;background:transparent;border:0;padding:0;
}
.sidebar-resizer::before{
  content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(212,175,55,.28) 12%,rgba(83,143,184,.55) 50%,rgba(212,175,55,.28) 88%,transparent);
  transition:width .15s ease,background .15s ease,box-shadow .15s ease
}
.sidebar-resizer::after{
  content:"";position:absolute;left:1px;top:50%;width:7px;height:42px;transform:translateY(-50%);
  border-radius:999px;background:#10243a;border:1px solid rgba(212,175,55,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)
}
.sidebar-resizer:hover::before,.sidebar-resizer.is-dragging::before{width:2px;left:4px;background:#d4af37;box-shadow:0 0 12px rgba(212,175,55,.28)}
.sidebar-resizer:focus-visible{outline:2px solid #d4af37;outline-offset:2px}
body.jx-sidebar-resizing,body.jx-sidebar-resizing *{cursor:col-resize!important;user-select:none!important}
body.jx-sidebar-collapsed .sidebar-resizer{display:none!important}

/* Never allow content to escape its card/grid cell. */
:where(.jx64-panel,.jx64-participants,.jx64-party,.phase-console,.phase-copy,.turn-card,.hearing-actions,.immersive-note,.immersive-note>div,.immersive-features,.court-side,.engine-side,.engine-lower-grid,.engine-scorecard,.judge-log,.session-card){min-width:0;max-width:100%;box-sizing:border-box}
:where(.jx64-party,.phase-console,.turn-card,.immersive-note,.engine-scorecard,.judge-log,.session-card) :where(h1,h2,h3,h4,p,span,small,b,strong){max-width:100%}
:where(.phase-copy p,.turn-card small,.immersive-note p,.jx64-party span,.session-result p,.decision-item span){overflow-wrap:break-word;word-break:normal}

/* Live participant cards: preserve complete role names instead of cutting words. */
.jx64-panel{container-type:inline-size}
.jx64-participants{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch}
.jx64-party{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;padding:12px!important;overflow:hidden}
.jx64-party-icon{width:42px!important;height:42px!important;min-width:42px!important}
.jx64-party strong{
  display:block!important;font-size:clamp(11px,1.05cqi,13px)!important;line-height:1.18!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:normal!important;word-break:keep-all!important;hyphens:none!important
}
.jx64-party span{font-size:11px!important;line-height:1.35!important;white-space:normal!important}
@container (max-width:370px){
  .jx64-participants{grid-template-columns:1fr!important}
  .jx64-party{grid-template-columns:40px minmax(0,1fr)!important}
}

/* Hearing stage: copy gets priority; controls reflow before text becomes a narrow column. */
.phase-console{
  grid-template-columns:64px minmax(320px,1fr) minmax(250px,330px) auto!important;
  gap:18px!important;align-items:center!important;padding:18px!important;overflow:hidden
}
.phase-index{align-self:center}
.phase-copy{align-self:center;padding-right:4px}
.phase-copy h3{font-size:clamp(16px,1.35vw,21px)!important;line-height:1.2!important;margin:4px 0 8px!important;overflow-wrap:break-word;word-break:normal}
.phase-copy p{font-size:12px!important;line-height:1.55!important;margin:0!important;color:var(--muted)}
.turn-card{padding:14px 16px!important;align-self:stretch;align-content:center}
.turn-card small{font-size:11px!important;line-height:1.45!important}
.phase-console>.primary-btn,.phase-console>button{white-space:nowrap;justify-self:end}

@media(max-width:1280px){
  .phase-console{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    grid-template-areas:"idx copy action" "idx turn turn"!important;
    align-items:start!important
  }
  .phase-console .phase-index{grid-area:idx}
  .phase-console .phase-copy{grid-area:copy}
  .phase-console .turn-card{grid-area:turn;width:100%}
  .phase-console>.primary-btn,.phase-console>button{grid-area:action;align-self:center}
}
@media(max-width:760px){
  .phase-console{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;grid-template-areas:"idx copy" "turn turn" "action action"!important;gap:12px!important;padding:14px!important}
  .phase-console>.primary-btn,.phase-console>button{justify-self:stretch!important;width:100%!important}
  .phase-copy h3{font-size:17px!important}
}

/* 3D module description: content first, feature chips below; no compressed paragraph column. */
.immersive-note{
  grid-template-columns:48px minmax(0,1fr)!important;
  grid-template-areas:"mark copy" "mark features"!important;
  column-gap:16px!important;row-gap:10px!important;align-items:start!important;padding:18px!important
}
.immersive-note>.immersive-mark{grid-area:mark;width:44px!important;height:44px!important}
.immersive-note>div:not(.immersive-features){grid-area:copy;min-width:0}
.immersive-note b{font-size:14px!important;line-height:1.3!important;display:block}
.immersive-note p{font-size:12px!important;line-height:1.58!important;margin:5px 0 0!important;max-width:74ch!important}
.immersive-features{grid-area:features!important;justify-content:flex-start!important;gap:8px!important}
.immersive-features span{font-size:11px!important;padding:6px 10px!important;white-space:nowrap}
@media(max-width:650px){
  .immersive-note{grid-template-columns:1fr!important;grid-template-areas:"copy" "features"!important;padding:15px!important}
  .immersive-note>.immersive-mark{display:none!important}
  .immersive-note p{max-width:none!important}
}

/* Lower cards and generic legal modules: avoid squeeze and clipping. */
.engine-lower-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,.9fr) minmax(250px,.8fr)!important;gap:16px!important}
@media(max-width:1180px){.engine-lower-grid{grid-template-columns:1fr 1fr!important}.engine-lower-grid>*:first-child{grid-column:1/-1}}
@media(max-width:760px){.engine-lower-grid{grid-template-columns:1fr!important}.engine-lower-grid>*{grid-column:auto!important}}

/* Desktop only: sidebar width is user-resizable. Tablet/mobile keep the drawer behavior. */
@media(min-width:921px){
  .app{grid-template-columns:var(--sidebar-expanded) minmax(0,1fr)!important}
  .sidebar{width:100%!important}
}
@media(max-width:920px){.sidebar-resizer{display:none!important}}