/* Surgical Habitat — credibility-gate layout and interaction states. */

/* The setup deliberately reads top → level → pace → start on every desktop. */
.personalize.credible-compact-setup{width:min(1040px,100%)}
.credible-compact-setup .context-head{grid-template-columns:minmax(0,1fr) minmax(180px,280px)}
.credible-compact-setup form{width:min(860px,100%)}
.credible-compact-setup fieldset{padding:18px 0 14px}
.credible-compact-setup .choice-grid label>span{min-height:88px}
.credible-compact-setup .enter-button{width:100%;min-height:66px;margin-top:8px}

/* Keep the complete choice flow above the fold on shorter laptop viewports. */
@media(min-width:621px) and (max-height:760px){
  .personalize.credible-compact-setup{min-height:calc(100dvh - 104px);padding-top:14px;padding-bottom:10px}
  .credible-compact-setup .context-head{margin-top:6px}
  .credible-compact-setup .context-head h1{font-size:46px;margin:6px 0 3px}
  .credible-compact-setup .context-head p{margin-bottom:10px}
  .credible-compact-setup fieldset{padding:10px 0 8px}
  .credible-compact-setup .choice-grid label>span{min-height:72px;padding:10px 12px}
  .credible-compact-setup .enter-button{min-height:52px;margin-top:4px}
}

/* Port placement is a fixed working surface. Injected shell guidance is hidden here
   because the same task is already stated inside the spatial controller. */
.sim-stage:has(.hardening-ports){overflow:hidden!important;padding-block:10px!important}
.hardening-ports{height:100%!important;min-height:0!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;gap:7px!important}
.hardening-ports>.mission-objective,.hardening-ports>.pilot-interaction-guide,.hardening-ports>.source-note{display:none!important}
.hardening-port-heading h1{font-size:clamp(30px,3vw,48px)!important}
.hardening-port-workspace{grid-template-columns:minmax(0,1.45fr) minmax(315px,.72fr)!important}
.hardening-abdomen{min-height:360px!important}
.hardening-port-controls{gap:7px!important}
.hardening-keyboard button{transition:transform .1s,border-color .15s,background .15s}
.hardening-keyboard button.pressed{transform:translateY(3px);border-color:var(--hard-teal)!important;background:rgba(82,224,196,.18)!important;box-shadow:inset 0 3px 10px rgba(0,0,0,.45)}
.hardening-keyboard button.pressed kbd{border-bottom-width:1px;transform:translateY(2px)}
.hardening-port-site.responding{border-color:var(--hard-teal)!important;background:rgba(82,224,196,.24)!important;box-shadow:0 0 0 12px rgba(82,224,196,.1),0 0 34px rgba(82,224,196,.38)!important}
.hardening-port-trajectories line.previous,.hardening-internal-view line.previous{opacity:.22;stroke-width:3}
.hardening-port-trajectories line.active,.hardening-internal-view line.active{opacity:1;stroke:var(--hard-lime);stroke-width:7;filter:drop-shadow(0 0 5px rgba(219,232,111,.55))}
.hardening-internal-view line.active.camera{stroke:var(--hard-blue)}
.hardening-ports.is-complete .hardening-port-trajectories line,.hardening-ports.is-complete .hardening-internal-view line{opacity:.72;stroke-width:4;filter:none}

/* A Kelly must read as a ring-handled clamp: paired rings, ratchet, box lock,
   long narrow shanks and gently curved jaws. */
.hardening-kelly{left:4%!important;top:16px!important;width:82%!important;height:56px!important}
.hardening-kelly .ring{left:0!important;width:34px!important;height:27px!important;border-width:4px!important}
.hardening-kelly .ring.one{top:1px!important;transform:rotate(-5deg)}
.hardening-kelly .ring.two{top:27px!important;transform:rotate(5deg)}
.hardening-kelly:before{content:'';position:absolute;left:25px;top:23px;width:32px;height:11px;background:repeating-linear-gradient(90deg,#c2cdcf 0 3px,transparent 3px 6px);transform:rotate(2deg)}
.hardening-kelly .joint{left:48px!important;top:22px!important;width:15px!important;height:15px!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #233238}
.hardening-kelly .shank{left:60px!important;top:28px!important;width:62%!important;height:5px!important}
.hardening-kelly .shank.one{transform:rotate(-4deg)!important}.hardening-kelly .shank.two{transform:rotate(5deg)!important}
.hardening-kelly .jaw{right:-3px!important;width:44px!important;height:5px!important;background:repeating-linear-gradient(90deg,#e4eaeb 0 4px,#8e9a9d 4px 5px)!important}
.hardening-kelly .jaw.one{top:18px!important;transform:rotate(-8deg)!important;border-radius:60% 10px 2px 20%}
.hardening-kelly .jaw.two{top:34px!important;transform:rotate(8deg)!important;border-radius:20% 2px 10px 60%}

/* The monitor moves from an obviously wrong parked location into two subtle,
   clinically legible sightline targets and remains there after release. */
.hardening-sightline-target{inset:0!important;height:auto!important;border:0!important;background:none!important}
.hardening-sightline-target:before{display:none!important}
.hardening-sightline-target>i{position:absolute;width:112px;height:74px;border:2px dashed rgba(219,232,111,.55);background:rgba(219,232,111,.025)}
.hardening-sightline-target .target-a{left:30%;top:16%;transform:rotate(5deg)}
.hardening-sightline-target .target-b{right:30%;top:16%;transform:rotate(-5deg)}
.hardening-sightline-target svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hardening-sightline-target path{fill:none;stroke:rgba(219,232,111,.25);stroke-width:2;stroke-dasharray:8 9}
.hardening-sightline-target span{bottom:auto!important;top:12%!important}
.credible-room-scene.monitors-ready .credible-room-monitor.left{left:30%!important;top:16%!important;transform:rotate(5deg)!important;border-color:var(--hard-teal)!important}
.credible-room-scene.monitors-ready .credible-room-monitor.right{right:30%!important;top:16%!important;transform:rotate(-5deg)!important;border-color:var(--hard-teal)!important}

/* Instrument cards: 2×2 contextual bank, no visual overflow, local binary feedback. */
.density-critical-view .dissect-work{grid-template-columns:minmax(0,1.6fr) minmax(360px,.72fr)!important}
.dissect-instruments{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.dissect-instruments button{grid-template-rows:68px auto auto!important;min-height:150px!important;overflow:hidden!important;padding:8px!important}
.dissect-instruments button>.instrument-suction{width:340px!important;max-width:none!important;transform:scale(.42)!important;transform-origin:center!important;margin:-12px 0 -18px calc(50% - 170px)!important}
.dissect-instruments button>.surgical-instrument:not(.instrument-suction){max-width:none!important;transform:scale(.55)!important;margin:-10px 0 -16px calc(50% - 115px)!important}
.dissect-instruments button.selection-wrong{border:2px solid var(--sim-red)!important;background:rgba(231,125,108,.13)!important;box-shadow:inset 4px 0 var(--sim-red)}
.dissect-instruments button.selection-correct{border:2px solid var(--sim-teal)!important;background:rgba(82,224,196,.13)!important;box-shadow:inset 4px 0 var(--sim-teal)}
.credibility-card-feedback{position:absolute;z-index:8;left:7px;right:7px;bottom:7px;padding:6px;background:#081012;color:var(--sim-red);font:700 7px var(--mono);font-style:normal;text-align:center}
.selection-correct .credibility-card-feedback{color:var(--sim-teal)}
.dissect-chapter:not(.instrument-decision-active) .dissect-instruments:not(.decision-open){display:none!important}

/* The neck remains the anchor. These short colored continuations remove the
   floating-tube reading while preserving large, tappable targets. */
.dissect-field.revealed .structure.duct:before,.divide-field .divide-structure.duct:before{content:'';position:absolute;z-index:-1;left:-48px;top:19px;width:58px;height:12px;border-radius:12px;background:var(--sim-duct);transform:rotate(-7deg);transform-origin:right}
.dissect-field.revealed .structure.artery:before,.divide-field .divide-structure.artery:before{content:'';position:absolute;z-index:-1;left:-42px;top:19px;width:52px;height:9px;border-radius:10px;background:var(--sim-artery);transform:rotate(12deg);transform-origin:right}
.credibility-continuity-key{position:absolute;z-index:23;left:12px;bottom:12px;display:grid;gap:4px;padding:8px 10px;background:rgba(5,10,12,.9);font:700 7px var(--mono)}
.credibility-continuity-key span{position:static!important}.credibility-continuity-key .duct{color:var(--sim-duct)}.credibility-continuity-key .artery{color:var(--sim-artery)}

/* Port removal is explicitly an external skin view using the same patient-space
   coordinates as placement. Patient right therefore stays screen-left. */
.credibility-port-removal>.mission-objective,.credibility-port-removal>.pilot-interaction-guide{display:none!important}
.credibility-removal-head{display:flex;align-items:end;justify-content:space-between;gap:18px}
.credibility-removal-head h1{margin:4px 0!important;font-size:clamp(34px,4vw,58px)!important}
.credibility-removal-head p{margin:0;color:var(--hard-muted);font-size:12px}
.credibility-removal-head>div:last-child{display:grid;gap:3px;width:min(430px,42%);padding:11px 13px;border-left:3px solid var(--hard-blue);background:rgba(139,173,255,.08)}
.credibility-removal-head span{color:var(--hard-blue);font:700 8px var(--mono)}.credibility-removal-head b{font-size:13px}
.credibility-removal-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.62fr);gap:10px;margin-top:10px}
.credibility-abdomen{position:relative;min-height:clamp(430px,56vh,650px);overflow:hidden;border:1px solid #5a4644;border-radius:48% 48% 25% 25%/23% 23% 12% 12%;background:radial-gradient(ellipse at 50% 46%,#8f6653 0,#6f4b40 55%,#3a2929 100%);box-shadow:inset 0 0 70px rgba(0,0,0,.34)}
.credibility-abdomen .orient{position:absolute;z-index:20;padding:5px 7px;background:rgba(5,10,12,.88);color:#fff;font:700 8px var(--mono)}
.credibility-abdomen .head{left:50%;top:9px;transform:translateX(-50%)}.credibility-abdomen .feet{left:50%;bottom:9px;transform:translateX(-50%)}
.credibility-abdomen .right{left:10px;top:50%;transform:translateY(-50%);color:var(--hard-lime)}.credibility-abdomen .left{right:10px;top:50%;transform:translateY(-50%)}
.credibility-abdomen .costal{position:absolute;left:16%;right:16%;top:18%;height:74px;border-top:2px solid rgba(244,220,197,.33);border-radius:50%}.credibility-abdomen .midline{position:absolute;left:50%;top:18%;bottom:13%;width:1px;background:rgba(255,255,255,.1)}
.credibility-abdomen .umbilicus{position:absolute;left:50%;top:62%;width:20px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:#3f2928;box-shadow:inset 0 3px 4px rgba(0,0,0,.45)}
.credibility-removal-port{position:absolute;z-index:8;transform:translate(-50%,-50%);width:58px;height:58px;border:2px solid #d8e0df;border-radius:50%;background:rgba(9,16,18,.75);color:white;cursor:pointer}
.credibility-removal-port i{position:absolute;left:50%;top:-18px;width:11px;height:70px;transform:translateX(-50%) rotate(-7deg);border-radius:6px;background:linear-gradient(90deg,#6c797c,#e4e9e9,#6b787b)}
.credibility-removal-port span{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);min-width:170px;padding:5px 7px;background:rgba(5,10,12,.9);font:700 7px var(--mono)}
.credibility-removal-port.sim-next{border-color:var(--hard-lime);box-shadow:0 0 0 8px rgba(219,232,111,.12);animation:simPulse 1.5s infinite}
.credibility-removal-port.removed{border-color:var(--hard-teal);background:rgba(82,224,196,.12)}.credibility-removal-port.removed i{display:none}.credibility-removal-port.removed span{color:var(--hard-teal)}
.credibility-camera-state{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--hard-blue);background:rgba(5,10,12,.91);color:var(--hard-blue);font:700 8px var(--mono)}
.credibility-camera-state i{width:9px;height:9px;border-radius:50%;background:var(--hard-blue);box-shadow:0 0 12px var(--hard-blue)}.credibility-camera-state.last{border-color:var(--hard-lime);color:var(--hard-lime)}
.credibility-removal-logic{display:grid;align-content:start;gap:8px;padding:15px;border:1px solid var(--hard-line);background:var(--hard-panel)}
.credibility-removal-logic>span{color:var(--hard-blue);font:700 8px var(--mono)}.credibility-removal-logic h2{margin:0;font-size:24px}.credibility-removal-logic p{margin:0 0 8px;color:var(--hard-muted);font-size:12px;line-height:1.5}
.credibility-removal-logic>div{display:grid;gap:6px}.credibility-removal-logic>div span{padding:9px;border:1px solid var(--hard-line);color:#697674;font:700 8px var(--mono)}.credibility-removal-logic>div .current{border-color:var(--hard-lime);color:var(--hard-lime)}.credibility-removal-logic>div .done{border-color:var(--hard-teal);color:var(--hard-teal)}

/* Closure retains the figure-of-eight after it is made, then visibly moves into
   Monocryl skin closure and the final Dermabond swipe for every role. */
.hardening-closure.resident.step-2 .closure-fascia .bite.first,.hardening-closure.resident.step-3 .closure-fascia .bite,.hardening-closure.resident.step-4 .closure-fascia .bite,.hardening-closure.resident.step-5 .closure-fascia .bite,.hardening-closure.resident.step-6 .closure-fascia .bite{opacity:1}
.hardening-closure.resident.step-3 .closure-fascia .edge.left,.hardening-closure.resident.step-4 .closure-fascia .edge.left,.hardening-closure.resident.step-5 .closure-fascia .edge.left,.hardening-closure.resident.step-6 .closure-fascia .edge.left{left:13%}
.hardening-closure.resident.step-3 .closure-fascia .edge.right,.hardening-closure.resident.step-4 .closure-fascia .edge.right,.hardening-closure.resident.step-5 .closure-fascia .edge.right,.hardening-closure.resident.step-6 .closure-fascia .edge.right{right:13%}
.hardening-closure.student.step-4 .closure-skin .adhesive,.hardening-closure.resident.step-6 .closure-skin .adhesive{opacity:1}
.closure-material-grid.adhesive button{min-height:64px}

@media(max-width:1000px){
  .sim-stage:has(.hardening-ports){overflow:auto!important}
  .hardening-ports{height:auto!important;min-height:720px!important}
  .hardening-port-workspace,.credibility-removal-layout,.density-critical-view .dissect-work{grid-template-columns:1fr!important}
  .hardening-abdomen{min-height:430px!important}
  .credibility-removal-head{align-items:start;flex-direction:column}.credibility-removal-head>div:last-child{width:100%}
}

@media(max-width:620px){
  .credible-compact-setup .context-head{grid-template-columns:1fr}.credible-compact-setup .choice-grid.three{grid-template-columns:1fr}
  .hardening-keyboard span{display:none}.hardening-port-status{grid-template-columns:1fr 1fr}
  .dissect-instruments{grid-template-columns:1fr 1fr!important}.dissect-instruments button{min-height:132px!important}
  .credibility-abdomen{min-height:390px}.credibility-removal-port span{min-width:110px;font-size:6px}
}
