/* WINDOWS LAB CONTROLS — static source of truth. */
/* Main Windows Lab groups: only the active one is visible via the section picker. */
.window-controls .lab-control-group{
  margin:0 0 4px!important;
  border-radius:9px!important;
}
.window-controls .lab-control-group>summary{
  position:relative!important;
  top:auto!important;
  min-height:28px!important;
  padding:4px 8px!important;
  font-size:11.5px!important;
  line-height:1.15!important;
}
.window-controls .lab-control-group>summary::-webkit-details-marker,
.window-controls .control-subgroup>summary::-webkit-details-marker{display:none}
.window-controls .group-arrow{font-size:13px!important;line-height:1!important}
.window-controls .lab-control-body{padding:5px 8px 8px!important}
.window-controls .lab-control-body>label,
.window-controls .control-subgroup-body>label{
  margin:8px 0!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.window-controls input[type=range]{margin-top:5px!important}
.window-controls .hint,
.window-controls .button-control-note{font-size:11px!important;line-height:1.35!important}
.window-controls .compact-heading{margin:2px 0 4px!important;min-height:24px!important}
.window-controls .compact-heading h3{font-size:12px!important;margin:0!important}

/* One-line large-section selector. Native select is intentional: compact and reliable on iPhone. */
.control-section-picker{
  display:flex!important;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:38px;
  margin:0 0 6px!important;
  padding:5px 7px!important;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.control-section-picker-label{
  flex:0 0 auto;
  font-size:11px;
  line-height:1;
  color:#8f9db1;
  white-space:nowrap;
}
.control-section-select{
  flex:1 1 auto;
  min-width:0;
  height:28px;
  margin:0!important;
  padding:2px 28px 2px 8px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:8px!important;
  background-color:rgba(255,255,255,.055)!important;
  color:#eef4ff!important;
  font:600 12px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif!important;
}
.window-controls.section-picker-active>details.lab-control-group[hidden]{display:none!important}
.window-controls.section-picker-active>details.lab-control-group:not([hidden]){
  display:block!important;
  margin-top:0!important;
}
.window-controls.section-picker-active>details.lab-control-group:not([hidden])>summary{display:none!important}
.window-controls.section-picker-active>details.lab-control-group:not([hidden])>.lab-control-body{
  display:block!important;
  padding-top:4px!important;
}

/* Second-level accordion: each open subgroup exposes at most four controls. */
.control-subgroups{display:grid;gap:4px;margin-top:5px}
.control-subgroup{
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
}
.control-subgroup>summary{
  min-height:25px;
  padding:3px 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  list-style:none;
  font-size:11px;
  line-height:1.1;
  color:#b8c4d5;
  user-select:none;
}
.control-subgroup[open]>summary{color:#eef4ff;background:rgba(255,255,255,.035)}
.control-subgroup .group-arrow{transition:transform .16s ease}
.control-subgroup[open] .group-arrow{transform:rotate(90deg)}
.control-subgroup-body{padding:3px 7px 6px}
.button-control-note{margin:3px 0 7px;color:#8d9aaf}

/* Fullscreen is useful but should not occupy tuning space. */
.window-view-actions-bottom{
  margin:10px 0 2px!important;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.window-view-actions-bottom #winFullscreen{font-size:12px;padding:8px 11px}

@media(max-width:800px){
  .control-section-picker{min-height:36px;padding:4px 6px!important}
  .control-section-picker-label{font-size:10.5px}
  .control-section-select{height:28px;font-size:12px!important}
  .control-subgroup>summary{min-height:24px;padding:3px 6px}
}
main>header{display:none!important}

.lab-tabs .lab-nav-fullscreen{margin-left:auto}
        @media(max-width:800px){
          body:has(#windowsLab:not([hidden])){
            height:100dvh!important;
            overflow:hidden!important;
          }
          body:has(#windowsLab:not([hidden])) main{
            width:100%!important;
            max-width:none!important;
            height:100dvh!important;
            min-height:0!important;
            margin:0!important;
            padding:4px 12px 0!important;
            display:grid!important;
            grid-template-columns:1fr!important;
            grid-template-rows:24px minmax(0,1fr)!important;
            gap:0!important;
            overflow:hidden!important;
          }
          body:has(#windowsLab:not([hidden])) main>header,
          body:has(#windowsLab:not([hidden])) main>footer{display:none!important}
          body:has(#windowsLab:not([hidden])) .lab-tabs{
            grid-column:1!important;
            grid-row:1!important;
            display:flex!important;
            align-items:center!important;
            gap:14px!important;
            width:100%!important;
            height:24px!important;
            min-height:24px!important;
            margin:0!important;
            padding:0 2px!important;
          }
          body:has(#windowsLab:not([hidden])) .lab-tabs button{
            appearance:none!important;
            -webkit-appearance:none!important;
            width:auto!important;
            height:24px!important;
            min-height:24px!important;
            margin:0!important;
            padding:0!important;
            border:0!important;
            border-radius:0!important;
            background:transparent!important;
            box-shadow:none!important;
            color:#8794a8!important;
            font:500 11px/24px -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif!important;
            white-space:nowrap!important;
          }
          body:has(#windowsLab:not([hidden])) .lab-tabs button[aria-pressed=true]{
            color:#eef4ff!important;
            font-weight:650!important;
          }
          body:has(#windowsLab:not([hidden])) .lab-tabs .lab-nav-fullscreen{
            margin-left:auto!important;
            color:#9ab5d8!important;
            font-size:10.5px!important;
          }
          body:has(#windowsLab:not([hidden])) #windowsLab{
            --lab-preview-height:56%;
            grid-column:1!important;
            grid-row:2!important;
            width:100%!important;
            height:100%!important;
            min-height:0!important;
            display:grid!important;
            grid-template-columns:1fr!important;
            grid-template-rows:var(--lab-preview-height) 10px minmax(0,1fr)!important;
            gap:0!important;
            overflow:hidden!important;
          }
          body:has(#windowsLab:not([hidden])) #windowsLab .window-workspace{
            grid-row:1!important;
            position:relative!important;
            top:auto!important;
            align-self:stretch!important;
            width:100%!important;
            height:100%!important;
            min-height:0!important;
            max-height:none!important;
            margin:0!important;
            padding:2px 0 0!important;
            overflow:hidden!important;
            background:#101216!important;
            box-shadow:none!important;
          }
          body:has(#windowsLab:not([hidden])) #windowsLab .mobile-lab-splitter{
            grid-row:2!important;
            position:relative!important;
            width:100%!important;
            height:10px!important;
            min-height:10px!important;
            margin:0!important;
            padding:0!important;
            background:#101216!important;
            cursor:ns-resize!important;
            touch-action:none!important;
            z-index:120!important;
          }
          body:has(#windowsLab:not([hidden])) #windowsLab .mobile-lab-splitter::after{
            content:"";
            position:absolute;
            left:50%;
            top:4px;
            width:38px;
            height:2px;
            border-radius:2px;
            transform:translateX(-50%);
            background:rgba(150,164,184,.45);
          }
          body:has(#windowsLab:not([hidden])) #windowsLab .window-controls{
            grid-row:3!important;
            position:relative!important;
            z-index:100!important;
            width:100%!important;
            max-width:none!important;
            height:100%!important;
            min-height:0!important;
            max-height:none!important;
            margin:0!important;
            padding:4px 0 max(10px,env(safe-area-inset-bottom))!important;
            overflow-x:hidden!important;
            overflow-y:auto!important;
            overscroll-behavior:contain!important;
            -webkit-overflow-scrolling:touch!important;
            background:#101216!important;
          }
          body:has(#windowsLab:not([hidden])) .window-view-actions-bottom{display:none!important}

          /* TRUE FULLSCREEN: only the live phone/workspace remains. */
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) main{
            padding:0!important;
            grid-template-rows:minmax(0,1fr)!important;
          }
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) .lab-tabs,
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) #windowsLab .mobile-lab-splitter,
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) #windowsLab .window-controls{
            display:none!important;
          }
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) #windowsLab{
            grid-column:1!important;
            grid-row:1!important;
            grid-template-rows:minmax(0,1fr)!important;
            width:100vw!important;
            height:100dvh!important;
            min-height:100dvh!important;
            gap:0!important;
          }
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) #windowsLab .window-workspace{
            grid-row:1!important;
            width:100%!important;
            height:100dvh!important;
            min-height:100dvh!important;
            max-height:none!important;
            margin:0!important;
            padding:0!important;
          }
          body.windows-test-fullscreen:has(#windowsLab:not([hidden])) #winExitFullscreen{
            display:block!important;
            position:absolute!important;
            left:max(10px,env(safe-area-inset-left))!important;
            top:max(10px,env(safe-area-inset-top))!important;
            z-index:1000!important;
          }
        }