/* Compiler-style workspace; colours and controls use the shared site theme. */
html:has(#scsstocss),body:has(#scsstocss) { height:100dvh; overflow:hidden!important; }
body:has(#scsstocss) { display:flex; flex-direction:column; }
body:has(#scsstocss)>#header,body:has(#scsstocss)>#footer-wrapper { flex-shrink:0; }
#scsstocss { flex:1 1 0; min-height:0; margin:0!important; background:#fff; }
#scsstocss [hidden] { display:none!important; }
#scsstocss .sc-panels { height:100%; display:grid; grid-template-columns:minmax(0,var(--sc-split,50%)) 8px minmax(0,1fr); overflow:hidden; }
#scsstocss section { display:flex; flex-direction:column; min-width:0; min-height:0; }
#scsstocss .sc-source-panel { container-type:inline-size; }
#scsstocss .sc-heading { min-height:47px; flex-shrink:0; }
#scsstocss .sc-heading .nav-link { padding:.1rem 1rem; }
#scsstocss .sc-code { position:relative; flex:1; min-height:0; display:flex; background:#1e1e1e; }
#scsstocss .sc-output-code { background:#fff; }
#scsstocss .sc-monaco { flex:1; min-width:0; min-height:0; overflow:hidden; }
#scsstocss .sc-input { flex:1; min-height:0; width:100%; resize:none; border:0; padding:12px; font:15px/1.6 Consolas,monospace; color:#d4d4d4; background:#1e1e1e; outline:0; }
#scsstocss #sc-output { background:#fff; color:#253545; }
#scsstocss .sc-output-note { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:#fff; text-align:center; pointer-events:none; }
#scsstocss .sc-separator { background:#f1f1f1; cursor:col-resize; touch-action:none; }
#scsstocss .sc-separator:is(:hover,:focus-visible) { background:#ddd; outline:2px solid var(--bs-secondary); outline-offset:-2px; }
#scsstocss .sc-stacked { grid-template-columns:1fr; grid-template-rows:minmax(0,var(--sc-split,50%)) 8px minmax(0,1fr); }
#scsstocss .sc-stacked .sc-separator { cursor:row-resize; }
#scsstocss .svg-icon { flex-shrink:0; vertical-align:middle; }
#scsstocss .dropdown-menu { min-width:235px; max-height:calc(100dvh - 165px); overflow:auto; z-index:1050; }
#scsstocss .dropdown-menu,#scsstocss .dropdown-item { font-size:13px; line-height:1.45; }
#scsstocss .dropdown-menu .svg-icon { width:18px; height:18px; }
#scsstocss .dropdown-item { border-radius:var(--bs-border-radius); }
#scsstocss .dropdown-item:not(:disabled):is(:hover,:focus-visible) { background:var(--bs-gray-200,#e9ecef); color:var(--bs-dropdown-link-color,#253545); }
#scsstocss #sc-style { width:auto; }
#scsstocss #sc-feedback { max-height:25dvh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#scsstocss:fullscreen { height:100dvh; }
@media(max-width:767.98px) {
 #scsstocss .sc-panels,#scsstocss .sc-stacked { grid-template-columns:1fr; grid-template-rows:1fr; }
 #scsstocss .sc-output-panel,#scsstocss .sc-separator,#scsstocss .sc-desktop-control { display:none; }
 #scsstocss.sc-show-output .sc-source-panel { display:none; }
 #scsstocss.sc-show-output .sc-output-panel { display:flex; }
 #scsstocss .sc-input { font-size:16px; }
}
@container(max-width:430px) { #sc-convert span { display:none; } }