/* Core AD layout containment fix
   Keep the whole application inside the viewport. Oversized technical diagrams
   may scroll inside .stage, but they must not widen the document itself. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.top,.subbar,.layout{width:100%;max-width:100%;min-width:0}

/* Desktop balance: give the Selected Concept panel more reading width while the
   center learning canvas remains fluid. */
.layout{
  grid-template-columns:clamp(220px,16vw,280px) minmax(0,1fr) clamp(360px,25vw,420px);
}
.sidebar,.main,.right{min-width:0;max-width:100%}
.main,.canvas,.canvas-head,.head{min-width:0;max-width:100%}

/* Long prose, labels and source text must wrap instead of increasing grid
   min-content width. */
.right,.right p,.right .sub,.right .quote,.right .source,.main,.canvas{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Global view-toggle standard: always render each label as two centered words.
   This applies to every Core AD module and prevents mid-word wrapping. */
.canvas-head>div:last-child{flex:0 0 auto}
.view-toggle{flex-wrap:nowrap;width:max-content}
.view-btn{
  min-width:84px;
  text-align:center;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.2;
}
.view-btn-line{
  display:block;
  white-space:nowrap;
  text-align:center;
}

/* The diagram area is the only place where horizontal scrolling is allowed
   when a technical diagram genuinely needs more width. */
.stage{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-x:contain;
}

/* Header must also remain inside the viewport at narrower desktop widths. */
.brand{min-width:0;flex:0 1 auto}
.topnav{min-width:0;flex-wrap:wrap;row-gap:6px}
.pill{flex:0 0 auto}

@media(max-width:1400px){
  .layout{grid-template-columns:clamp(210px,17vw,240px) minmax(0,1fr) clamp(330px,25vw,380px)}
  .main{padding-left:24px;padding-right:24px}
}

@media(max-width:1150px){
  .layout{grid-template-columns:210px minmax(0,1fr) 320px}
  .main{padding-left:20px;padding-right:20px}
  .right{padding-left:18px;padding-right:18px}
}

/* On smaller screens, stack the explanation panel instead of forcing the
   complete three-column desktop grid beyond the viewport. */
@media(max-width:980px){
  .layout{grid-template-columns:210px minmax(0,1fr)}
  .right{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line)}
}