/* HDcmsRw 1.20.1
   Public Coding Studio browser corrective.
   Preserve every existing feature. Reposition only:
   BUILD / DESIGN above SOURCE, SOURCE full device width, RUN / ENGINEERING below SOURCE.
   Restore the original LEVEL 6+ language experience and keep the 1.20 Programming Matrix after it.
*/

/* The Coding Studio is the primary workspace and may break out of the normal content max width. */
.hd1180-coding-shell{overflow:visible!important}
.hd1180-studio{
  width:calc(100vw - 24px)!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw + 12px)!important;
  margin-right:calc(50% - 50vw + 12px)!important;
}

/* Remove the legacy left / centre / right grid. Keep every child as a full width vertical stage. */
.hd1180-studio .studio-grid{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-template-areas:none!important;
  min-height:0!important;
  width:100%!important;
  max-width:none!important;
}
.hd1180-studio .studio-builder,
.hd1180-studio .studio-code,
.hd1180-studio .studio-engineering,
.hd1180-studio .studio-documentation,
.hd1180-studio .studio-output{
  grid-area:auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* 1. BUILD / DESIGN at the top of the coding workspace. */
.hd1180-studio .studio-builder{
  order:1!important;
  display:block!important;
  border-right:0!important;
  border-bottom:1px solid #243951!important;
  padding:16px 18px!important;
}
.hd1180-studio .studio-builder>[data-field-toolbox]{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
  gap:9px!important;
}
.hd1180-studio .studio-builder .real-language,
.hd1180-studio .studio-builder .environment-card{
  display:inline-grid;
  width:min(360px,100%);
  min-width:240px;
  margin:12px 12px 0 0!important;
  vertical-align:top;
}
.hd1180-studio .studio-builder .real-language[hidden]{display:none!important}
.hd1180-studio .studio-builder .account-action{
  width:auto!important;
  min-width:190px;
  margin:12px 8px 0 0!important;
}

/* 2. SOURCE is the full width primary coding area. */
.hd1180-studio .studio-code{
  order:2!important;
  display:block!important;
  border-right:0!important;
  border-bottom:1px solid #243951!important;
}
.hd1180-studio .studio-code .hl1-editor{
  min-height:clamp(500px,62vh,820px)!important;
  width:100%!important;
}
.hd1180-studio .studio-code .hl1-editor pre,
.hd1180-studio .studio-code .hl1-editor textarea{
  min-height:100%!important;
  width:100%!important;
  max-width:none!important;
}
/* The old layout used a large margin because the editor was in a side column. It is no longer needed. */
.hd1180-studio .studio-code .learner-note{
  margin:14px 16px 16px!important;
}

/* 3. RUN / ENGINEERING is moved intact below SOURCE. */
.hd1180-studio .studio-engineering{
  order:3!important;
  display:block!important;
  border-right:0!important;
  border-bottom:1px solid #243951!important;
  padding:16px 18px!important;
}
.hd1180-studio .studio-engineering>dl{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(130px,1fr))!important;
  gap:10px!important;
  margin:12px 0!important;
}
.hd1180-studio .studio-engineering>dl>div{
  display:grid!important;
  gap:4px!important;
  align-content:start;
  padding:10px 12px!important;
  border:1px solid #29415f!important;
  border-radius:10px;
  background:#0f2340;
}
.hd1180-studio .studio-engineering .variable-inspector{
  margin:14px 0 10px!important;
}
.hd1180-studio .studio-engineering .debug-controls{
  display:flex!important;
  flex-wrap:wrap;
  gap:8px!important;
  margin:10px 0!important;
}
.hd1180-studio .studio-engineering .system-map{
  margin-top:12px!important;
  padding-top:12px;
  border-top:1px solid #243951;
}

/* Preserve the original lower sections and order. */
.hd1180-studio .studio-documentation{order:4!important}
.hd1180-studio .studio-output{order:5!important}

/* Restore the original LEVEL 6+ visual language experience for browser users. */
.hd1180-real-language{display:block!important;visibility:visible!important}
.hd1180-real-language .language-strip{
  display:flex!important;
  grid-template-columns:none!important;
  gap:12px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  max-width:100%!important;
  padding:6px 2px 14px!important;
  scroll-snap-type:x proximity;
  scrollbar-gutter:stable;
}
.hd1180-real-language .language-strip button{
  flex:0 0 clamp(190px,20vw,260px)!important;
  min-width:190px!important;
  width:auto!important;
  text-align:left!important;
  white-space:normal!important;
  scroll-snap-align:start;
}
.hd1180-real-language .language-detail{
  display:grid!important;
  grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr)!important;
  gap:13px!important;
  visibility:visible!important;
}
.hd1180-real-language .language-detail pre{
  min-width:0!important;
  max-width:100%!important;
  overflow:auto!important;
}

/* The 1.20 Application Matched Programming Matrix remains an additional browser-visible section. */
.hd1200-matrix{
  display:block!important;
  visibility:visible!important;
  margin:30px 0!important;
}

@media(max-width:900px){
  .hd1180-studio{width:calc(100vw - 16px)!important;margin-left:calc(50% - 50vw + 8px)!important;margin-right:calc(50% - 50vw + 8px)!important}
  .hd1180-studio .studio-engineering>dl{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hd1180-real-language .language-detail{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .hd1180-studio{width:calc(100vw - 8px)!important;margin-left:calc(50% - 50vw + 4px)!important;margin-right:calc(50% - 50vw + 4px)!important;border-radius:14px!important}
  .hd1180-studio .studio-builder>[data-field-toolbox]{grid-template-columns:1fr!important}
  .hd1180-studio .studio-builder .real-language,
  .hd1180-studio .studio-builder .environment-card,
  .hd1180-studio .studio-builder .account-action{display:grid!important;width:100%!important;min-width:0!important;margin:9px 0 0!important}
  .hd1180-studio .studio-engineering>dl{grid-template-columns:1fr!important}
  .hd1180-studio .studio-code .hl1-editor{min-height:520px!important}
  .hd1180-real-language .language-strip button{flex-basis:82vw!important}
}