/* 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}
}

/* HDcmsRw 1.20.2
   Industry Language Coding Matching Matrix browser enhancement.
   Preserve all existing Coding Studio sections and language generators.
   Replace only the multi-column matrix card presentation with one governed language selector
   and one large full-width selected-language coding viewport below HL1 Authority.
*/
.hd1202-matrix{overflow:visible!important}
.hd1202-language-selector{
  margin-top:18px;
  border:1px solid #173457;
  border-radius:18px;
  overflow:hidden;
  background:#07172f;
  color:#eef6ff;
}
.hd1202-language-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding:18px 20px;
  background:#0c2140;
  border-bottom:1px solid #29415f;
}
.hd1202-language-head span{display:block;color:#70d9ff;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.hd1202-language-head h4{margin:5px 0 4px;font-size:22px;color:#fff}
.hd1202-language-head p{margin:0;color:#c4d4e8}
.hd1202-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hd1202-tools button,.hd1202-actions button{
  border:1px solid #4674a7;
  background:#102a4c;
  color:#fff;
  border-radius:9px;
  padding:8px 11px;
  font-weight:800;
  cursor:pointer;
}
.hd1202-tools button.is-active{background:#3769f5;border-color:#557ef6}
.hd1202-language-picker{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 20px;
  background:#0a1b34;
  border-bottom:1px solid #29415f;
}
.hd1202-language-picker label{display:grid;gap:6px;min-width:min(420px,100%);font-weight:850;color:#fff}
.hd1202-language-picker label>span{font-size:13px;color:#a9c0dc}
.hd1202-language-picker select{
  width:min(520px,100%);
  min-height:44px;
  border:1px solid #55789e;
  border-radius:10px;
  background:#f8fbff;
  color:#10233e;
  padding:9px 12px;
  font:700 14px/1.2 system-ui,sans-serif;
}
.hd1202-picker-context{display:flex;gap:8px;flex-wrap:wrap}
.hd1202-picker-context span,.hd1202-selected-context{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border-radius:999px;
  background:#17365e;
  color:#d9e7f7;
  font-size:12px;
  font-weight:800;
}
.hd1202-selected-language{padding:0 20px 20px;background:#07172f;color:#edf5ff}
.hd1202-selected-language>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 0 12px}
.hd1202-selected-language>header>div:first-child>span{color:#70d9ff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.hd1202-selected-language h5{margin:4px 0;font-size:22px;color:#fff}
.hd1202-selected-language header p{margin:0;color:#a9c0dc}
.hd1202-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.hd1202-meta>div{display:grid;gap:4px;padding:11px 12px;border:1px solid #29415f;border-radius:10px;background:#0f2340}
.hd1202-meta b{font-size:12px;color:#78e7ae}.hd1202-meta span{color:#e7f0fb;overflow-wrap:anywhere}
.hd1202-code-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 12px;background:#0c2140;border:1px solid #29415f;border-bottom:0;border-radius:12px 12px 0 0}
.hd1202-code-head b{color:#fff}.hd1202-code-head span{color:#9db4d4;font-size:12px;text-align:right}
.hd1202-language-source,
.hd1200-hl1-authority pre{
  width:100%!important;
  max-width:none!important;
  height:clamp(500px,62vh,920px)!important;
  min-height:500px!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable both-edges;
  white-space:pre!important;
  overscroll-behavior:contain;
}
.hd1202-language-source{
  margin:0;
  border:1px solid #29415f;
  border-radius:0 0 12px 12px;
  padding:16px;
  background:#020915;
  color:#f7fbff;
  font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  tab-size:2;
}
.hd1202-selected-language.is-expanded .hd1202-language-source{height:82vh!important;min-height:620px!important}
.hd1202-lang-output{display:grid;gap:4px;margin-top:13px;padding:11px 12px;border:1px solid #24513e;border-radius:10px;background:#0d2d24}
.hd1202-lang-output b{color:#75e7ac}.hd1202-lang-output span{color:#eafff3}
.hd1202-build-guide{margin-top:12px;border-top:1px solid #29415f;padding-top:10px}.hd1202-build-guide summary{cursor:pointer;font-weight:850;color:#fff}.hd1202-build-guide p{color:#cfdeef}
.hd1202-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}

/* Make the primary Studio source and original selected language example taller too, while preserving their vertical scrollbars. */
.hd1180-studio .studio-code .hl1-editor{height:clamp(540px,64vh,940px)!important;min-height:540px!important}
.hd1180-studio .studio-code .hl1-editor pre,
.hd1180-studio .studio-code .hl1-editor textarea{height:100%!important;overflow:auto!important}
.hd1180-real-language .language-detail pre{height:clamp(440px,56vh,820px)!important;min-height:440px!important;overflow:auto!important}

/* Local selected-language theme mirrors the main Studio control concept. */
.hd1202-selected-language[data-editor-theme="light"] .hd1202-language-source{background:#f8fbff;color:#142033;border-color:#b8c9dc}
.hd1202-selected-language[data-editor-theme="contrast"] .hd1202-language-source{background:#000;color:#fff;border-color:#fff}
.hd1202-selected-language[data-editor-theme="contrast"] .hd1202-code-head{background:#000;border-color:#fff;color:#fff}

@media(max-width:800px){
  .hd1202-language-head{display:grid;grid-template-columns:1fr}
  .hd1202-tools{justify-content:flex-start}
  .hd1202-language-picker{display:grid;grid-template-columns:1fr;align-items:stretch}
  .hd1202-language-picker label,.hd1202-language-picker select{width:100%;min-width:0}
  .hd1202-meta{grid-template-columns:1fr}
  .hd1202-language-source,.hd1200-hl1-authority pre{height:clamp(420px,56vh,760px)!important;min-height:420px!important}
  .hd1180-studio .studio-code .hl1-editor{height:clamp(460px,58vh,800px)!important;min-height:460px!important}
  .hd1180-real-language .language-detail pre{height:clamp(400px,52vh,720px)!important;min-height:400px!important}
}
@media(max-width:520px){
  .hd1202-language-head,.hd1202-language-picker,.hd1202-selected-language{padding-left:12px;padding-right:12px}
  .hd1202-language-head h4,.hd1202-selected-language h5{font-size:18px}
  .hd1202-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .hd1202-tools button{width:100%}
  .hd1202-language-source,.hd1200-hl1-authority pre{height:54vh!important;min-height:360px!important}
  .hd1180-studio .studio-code .hl1-editor{height:56vh!important;min-height:380px!important}
  .hd1180-real-language .language-detail pre{height:50vh!important;min-height:350px!important}
}