/* Stage 2 — Trauma + Surgery setup only. Live surgery simulator is untouched. */

body[data-stage1-view="sim"] #surgSetupScreen{
  --surg2-gap:var(--space-2,8px);
}

body[data-stage1-view="sim"] .surg2-setup-grid{
  display:grid;
  grid-template-columns:minmax(520px,.92fr) minmax(760px,1.28fr);
  gap:var(--surg2-gap);
  align-items:stretch;
  margin:0;
  min-height:0;
}

body[data-stage1-view="sim"] .surg2-scenario,
body[data-stage1-view="sim"] .surg2-config{
  min-width:0;
  min-height:0;
  align-self:stretch;
}

body[data-stage1-view="sim"] .surg2-scenario{
  display:flex;
  flex-direction:column;
  align-self:start;
  padding:var(--ui-panel-padding,8px);
}

body[data-stage1-view="sim"] .surg-scenario-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

body[data-stage1-view="sim"] .surg-scenario-head>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

body[data-stage1-view="sim"] .surg-scenario-head .label{
  font-size:.88rem;
  font-weight:700;
  color:#d8ffeb;
}

body[data-stage1-view="sim"] #surgScenarioName{
  color:#9dbbad;
  font-size:.78rem;
  font-weight:500;
}

body[data-stage1-view="sim"] #surgScenarioPresets{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(42px,auto);
  gap:5px;
  flex:0 0 auto;
  min-height:0;
  overflow:visible;
  margin:0 0 6px;
}

body[data-stage1-view="sim"] .surg-scenario-btn{
  min-width:0;
  min-height:42px;
  height:auto;
  padding:5px 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  text-align:left;
  white-space:normal;
  overflow:hidden;
}

body[data-stage1-view="sim"] .surg-scenario-btn b{
  line-height:1.15;
}

body[data-stage1-view="sim"] .surg-scenario-btn small{
  display:block;
  color:#9dbbad;
  font-size:.69rem;
  line-height:1.2;
  overflow-wrap:anywhere;
}

body[data-stage1-view="sim"] .surg-random-row{
  display:grid;
  grid-template-columns:minmax(190px,240px) minmax(180px,auto);
  gap:8px;
  align-items:end;
  justify-content:start;
  margin-top:0;
}

body[data-stage1-view="sim"] .surg-random-row select{width:100%}

body[data-stage1-view="sim"] .surg2-config{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  padding:var(--ui-panel-padding,8px);
  overflow:hidden;
}

body[data-stage1-view="sim"] .surg2-config-title{
  margin:0 0 6px;
  padding-bottom:6px;
  border-bottom:1px solid #285f48;
}

body[data-stage1-view="sim"] .surg2-patient-core{
  padding-bottom:6px;
  margin-bottom:6px;
  border-bottom:1px solid #183b2c;
}

body[data-stage1-view="sim"] .surg2-patient-core>.grid2,
body[data-stage1-view="sim"] .surg2-patient-core>.grid3{
  gap:8px;
}

body[data-stage1-view="sim"] .surg2-patient-core>.compact-fields{margin-top:7px}

body[data-stage1-view="sim"] #surgSetupScreen select,
body[data-stage1-view="sim"] #surgSetupScreen input:not([type="checkbox"]):not([type="radio"]){
  min-height:38px;
  line-height:1.2;
}

body[data-stage1-view="sim"] #surgSetupScreen select{
  height:38px;
  padding:6px 30px 6px 10px;
}

body[data-stage1-view="sim"] #surgSetupScreen input:not([type="checkbox"]):not([type="radio"]){padding:6px 10px}

body[data-stage1-view="sim"] .surg2-config-lower{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(430px,1fr) minmax(280px,330px);
  gap:12px;
  align-items:stretch;
}

body[data-stage1-view="sim"] .surg2-control-column{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

body[data-stage1-view="sim"] .surg2-injury{
  min-width:0;
  padding-right:2px;
}

body[data-stage1-view="sim"] .surg2-injury>h2{
  margin:0 0 7px;
}

body[data-stage1-view="sim"] .surg2-injury>.grid3.compact-fields{
  gap:8px;
  align-items:end;
}

body[data-stage1-view="sim"] .surg2-injury>.statusline{
  gap:7px;
  margin:7px 0 8px;
  flex-wrap:wrap;
}

body[data-stage1-view="sim"] .surg2-zone-internal{
  position:absolute!important;
  width:1px!important;
  min-width:0!important;
  max-width:1px!important;
  height:1px!important;
  min-height:0!important;
  max-height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

body[data-stage1-view="sim"] .surg2-advanced{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:7px;
}

body[data-stage1-view="sim"] .surg2-collapse{
  min-width:0;
  border:1px solid #183b2c;
  border-radius:6px;
  background:#07150f;
  overflow:hidden;
}

body[data-stage1-view="sim"] .surg2-collapse>summary{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  cursor:pointer;
  line-height:1.2;
  list-style:none;
  font-weight:700;
}

body[data-stage1-view="sim"] .surg2-collapse>summary::-webkit-details-marker{display:none}
body[data-stage1-view="sim"] .surg2-collapse>summary::before{
  content:"▸";
  width:12px;
  flex:0 0 12px;
  color:#9dbbad;
  text-align:center;
  transition:transform .12s ease;
}
body[data-stage1-view="sim"] .surg2-collapse[open]>summary::before{transform:rotate(90deg)}

body[data-stage1-view="sim"] .surg2-collapse>.grid2,
body[data-stage1-view="sim"] .surg2-collapse>.organ-grid{
  margin:0 9px 9px 28px;
  width:calc(100% - 37px);
}

body[data-stage1-view="sim"] .surg2-collapse>.grid2{gap:8px}
body[data-stage1-view="sim"] .surg2-collapse>.grid2 + .grid2{margin-top:8px}

body[data-stage1-view="sim"] .surg2-mannequin-region{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:12px;
  border-left:1px solid #183b2c;
}

body[data-stage1-view="sim"] .surg2-overview-source{display:none!important}

body[data-stage1-view="sim"] .surg2-body{
  position:relative;
  flex:0 0 auto;
  height:min(434px,100%);
  width:auto;
  max-width:100%;
  aspect-ratio:250 / 472;
  margin:0 auto;
}

body[data-stage1-view="sim"] .surg2-part{
  position:absolute;
  display:grid;
  place-items:center;
  border:1px solid #3d8464;
  background:#0b2419;
  color:#d8ffeb;
  text-align:center;
  cursor:pointer;
  border-radius:13px;
  font:inherit;
  font-size:clamp(.62rem,calc(.48rem + .26vh),.76rem);
  line-height:1.15;
  transition:border-color .15s,background .15s,box-shadow .15s;
  overflow:hidden;
}

body[data-stage1-view="sim"] .surg2-part:hover,
body[data-stage1-view="sim"] .surg2-part:focus-visible,
body[data-stage1-view="sim"] .surg2-part.sel{
  border-color:#a8ffcf;
  background:#174431;
  box-shadow:0 0 14px var(--shadow);
  outline:none;
}

body[data-stage1-view="sim"] .surg2-part.head{left:36%;top:1.06%;width:28%;height:14.83%;border-radius:50%}
body[data-stage1-view="sim"] .surg2-part.chest{left:28%;top:17.37%;width:44%;height:25%}
body[data-stage1-view="sim"] .surg2-part.groin{left:32.8%;top:43.43%;width:34.4%;height:12.29%}
body[data-stage1-view="sim"] .surg2-part.larm{left:7.2%;top:18.22%;width:18.8%;height:25.42%}
body[data-stage1-view="sim"] .surg2-part.rarm{right:7.2%;top:18.22%;width:18.8%;height:25.42%}
body[data-stage1-view="sim"] .surg2-part.lhand{left:3.6%;top:44.7%;width:19.2%;height:11.02%}
body[data-stage1-view="sim"] .surg2-part.rhand{right:3.6%;top:44.7%;width:19.2%;height:11.02%}
body[data-stage1-view="sim"] .surg2-part.lleg{left:28.4%;top:57.2%;width:19.2%;height:31.78%}
body[data-stage1-view="sim"] .surg2-part.rleg{right:28.4%;top:57.2%;width:19.2%;height:31.78%}
body[data-stage1-view="sim"] .surg2-part.lfoot{left:22.8%;top:90.47%;width:24.8%;height:9.53%}
body[data-stage1-view="sim"] .surg2-part.rfoot{right:22.8%;top:90.47%;width:24.8%;height:9.53%}

body[data-stage1-view="sim"] .surg2-final-actions{
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto!important;
  padding-top:8px;
  border-top:1px solid #183b2c;
}

body[data-stage1-view="sim"] .surg2-final-actions .sim-start-btn{min-width:190px}

/* Reuse the setup checkbox language from First Aid. */
body[data-stage1-view="sim"] #surgSetupScreen input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:17px!important;
  height:17px;
  min-width:17px;
  margin:0;
  display:inline-grid;
  place-content:center;
  border:1px solid #3d8464;
  border-radius:4px;
  background:#06110c;
  vertical-align:middle;
  cursor:pointer;
}
body[data-stage1-view="sim"] #surgSetupScreen input[type="checkbox"]::before{
  content:"";
  width:8px;
  height:5px;
  border-left:2px solid #06110c;
  border-bottom:2px solid #06110c;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
}
body[data-stage1-view="sim"] #surgSetupScreen input[type="checkbox"]:checked{
  background:#6bf4b1;
  border-color:#a8ffcf;
  box-shadow:0 0 8px var(--shadow);
}
body[data-stage1-view="sim"] #surgSetupScreen input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}

@media(min-width:1500px) and (max-height:900px){
  body.stage2-surgery-setup-active #surgSetupScreen{--surg2-gap:6px}
  body.stage2-surgery-setup-active #surgSetupScreen>.sim-setup-head{padding-block:6px}
  body.stage2-surgery-setup-active .surg2-scenario,
  body.stage2-surgery-setup-active .surg2-config{padding-top:9px;padding-bottom:9px}
  body.stage2-surgery-setup-active #surgScenarioPresets{gap:6px;margin-bottom:6px}
  body.stage2-surgery-setup-active .surg-scenario-btn{min-height:62px;padding-block:6px}
  body.stage2-surgery-setup-active .surg2-patient-core{padding-bottom:5px;margin-bottom:5px}
  body.stage2-surgery-setup-active .surg2-config-lower{gap:10px}
  body.stage2-surgery-setup-active .surg2-advanced{gap:5px;margin-top:5px}
  body.stage2-surgery-setup-active .surg2-collapse>summary{min-height:32px;padding-block:5px}
  body.stage2-surgery-setup-active .surg2-injury>.statusline{margin:5px 0 6px}
  body.stage2-surgery-setup-active .surg2-final-actions{padding-top:6px}
}

@media(min-width:1500px) and (max-height:820px){
  body.stage2-surgery-setup-active .surg-scenario-head .label,
  body.stage2-surgery-setup-active .surg2-config-title{
    position:sticky;
    top:0;
    z-index:3;
    background:#10281d;
  }
  body.stage2-surgery-setup-active #surgScenarioPresets{flex:none}
  body.stage2-surgery-setup-active .surg-random-row{margin-top:6px}
}

@media(max-width:1450px){
  body[data-stage1-view="sim"] .surg2-setup-grid{
    grid-template-columns:minmax(460px,.9fr) minmax(680px,1.15fr);
  }
}

@media(max-width:1180px){
  body[data-stage1-view="sim"] .surg2-setup-grid{grid-template-columns:1fr}
  body[data-stage1-view="sim"] #surgScenarioPresets{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-stage1-view="sim"] .surg2-config-lower{grid-template-columns:1fr}
  body[data-stage1-view="sim"] .surg2-mannequin-region{
    padding:12px 0 0;
    border-left:0;
    border-top:1px solid #183b2c;
    min-height:360px;
  }
}

@media(max-width:760px){
  body[data-stage1-view="sim"] #surgScenarioPresets{grid-template-columns:1fr}
  body[data-stage1-view="sim"] .surg-random-row{grid-template-columns:1fr}
  body[data-stage1-view="sim"] .surg2-patient-core>.grid2,
  body[data-stage1-view="sim"] .surg2-patient-core>.grid3,
  body[data-stage1-view="sim"] .surg2-injury>.grid3,
  body[data-stage1-view="sim"] .surg2-collapse>.grid2{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  body[data-stage1-view="sim"] .surg2-collapse>summary::before{transition:none}
}