/* The simulator page (sim.html). */
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
#app { position: fixed; inset: 0; }
canvas { display: block; }

/* Label layer (CSS2DRenderer mounts its own container into #app) */
.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
  color: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
  transform: translate(-50%, -50%); text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.label.node  { background: rgba(120, 40, 60, 0.75); border-color: rgba(255,140,170,0.4); }
.label.airway-major { background: rgba(30, 70, 110, 0.78); border-color: rgba(120,180,255,0.5); }
.label.airway-seg   { background: rgba(28, 52, 78, 0.66); border-color: rgba(120,180,255,0.3); font-weight: 500; font-size: 10px; }
.label.vessel{ background: rgba(90, 40, 40, 0.7); }
.label.lobe  { background: rgba(40, 55, 50, 0.6); font-weight: 500; }
.label.heart { background: rgba(90, 40, 50, 0.7); }
.label.esophagus { background: rgba(110, 80, 60, 0.7); border-color: rgba(200,168,144,0.4); }

/* Panels */
.panel {
  position: fixed; background: var(--panel); backdrop-filter: blur(8px);
  border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45); user-select: none;
}
#titlebar { top: 14px; left: 14px; padding: 10px 16px; }
#titlebar h1 { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
#titlebar p { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
#titlebar .back { display: inline-block; margin-top: 6px; font-size: 11px; text-decoration: none; }
#titlebar .back:hover { text-decoration: underline; }

#controls { top: 14px; right: 14px; width: 230px; max-height: calc(100vh - 28px); overflow-y: auto; }
#controls h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin: 10px 0 6px; }
#controls h2:first-child { margin-top: 0; }
.row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; cursor: pointer; }
.row input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.row .swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.row label { cursor: pointer; flex: 1; }
.slider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); padding: 4px 0; }
.slider input { flex: 1; accent-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  background: #1c2733; color: var(--text); border: 1px solid var(--panel-border); width: 100%;
}
.btn:hover { background: #243241; }
.btn.active { background: var(--accent); color: #04121f; border-color: var(--accent); }
.btn.warn.active { background: var(--accent-warn); border-color: var(--accent-warn); }
.btn.disabled { opacity: 0.38; pointer-events: none; }

#modebar { bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; }
#modebar .btn { width: auto; padding: 8px 14px; }

#legend { bottom: 14px; left: 14px; width: 230px; max-height: 42vh; overflow-y: auto; }
#legend h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; }
.legrow { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.legrow .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

#scopehud {
  position: fixed; inset: 0; pointer-events: none; display: none;
}
#scopehud.on { display: block; }
/* In EBUS the optical image is a small inset, so the window-centred aiming furniture would sit
   over the ultrasound instead of over the picture it belongs to. */
#scopehud.inset-optics #crosshair, #scopehud.inset-optics #aimChip { display: none; }
#crosshair {
  position: fixed; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%);
  border: 1px solid rgba(120, 255, 180, 0.5); border-radius: 50%;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: rgba(120,255,180,0.5);
}
#crosshair::before { left: 50%; top: 4px; bottom: 4px; width: 1px; transform: translateX(-50%); }
#crosshair::after  { top: 50%; left: 4px; right: 4px; height: 1px; transform: translateY(-50%); }
#scopehud .tag { position: fixed; left: 16px; bottom: 16px; font-size: 12px; color: #9effc4;
  background: rgba(0,0,0,0.5); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(120,255,180,0.25); }
/* Which ostium pushing in from here would enter. Teaching scaffold — hidden in assessment mode. */
#aimChip { position: fixed; top: calc(50% + 34px); left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 0.02em; color: #9effc4; white-space: nowrap;
  background: rgba(4,14,10,0.55); border: 1px solid rgba(120,255,180,0.28);
  padding: 2px 10px; border-radius: 999px; display: none; }
#aimChip.on { display: block; }
#scopehud .hint { position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--text); background: rgba(0,0,0,0.55); padding: 6px 12px; border-radius: 6px; }
#metricsHud { position: fixed; top: 76px; left: 16px; font-size: 12px; line-height: 1.5;
  color: #9effc4; background: rgba(0,0,0,0.5); padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(120,255,180,0.25); min-width: 150px; }
#metricsHud #hudLocation { font-weight: 700; font-size: 13px; color: #c9ffe0; }
#metricsHud #hudStats { color: var(--text-dim); font-size: 11px; margin-top: 2px; }
#metricsHud #hudContacts.hit { color: var(--accent-warn); font-weight: 700; }
#metricsHud.no-scaffold #hudLocation { display: none; }
#objectiveBanner { position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
  max-width: 60%; text-align: center; font-size: 12px; line-height: 1.4; color: #cfe4ff;
  background: rgba(20,40,64,0.72); border: 1px solid rgba(120,180,255,0.35);
  padding: 6px 14px; border-radius: 8px; display: none; }
#objectiveBanner.on { display: block; }
#objectiveBanner b { color: #fff; }
#objectiveBanner.done-pass { background: rgba(24,64,40,0.82); border-color: rgba(120,255,180,0.5); color: #d6ffe6; }
#objectiveBanner.done-fail { background: rgba(72,36,36,0.82); border-color: rgba(255,150,150,0.5); color: #ffdede; }

/* Panel chrome for the EBUS layout. The borders/captions are DOM, not GL: they inherit the
   app's CSS vocabulary, they give the inset a free click target for promote-to-primary, and a
   rounded-rect SDF in three separate fragment shaders would be a lot of code for a worse
   result. The passes paint their own corners the app background colour so the seam is
   invisible underneath. */
.panelchrome { position: fixed; border: 1px solid var(--panel-border); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55); z-index: 12; cursor: pointer; display: none;
  transition: border-color .12s ease; }
.panelchrome:hover { border-color: rgba(120,255,180,.5); }
.panelchrome.primary { border-color: rgba(255,255,255,.05); box-shadow: none; cursor: default; }
.panelchrome .cap { position: absolute; left: 9px; top: 7px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); pointer-events: none; }
.panelchrome.primary .cap { color: rgba(215,224,234,.45); }
/* "The image is not live" — a warning, so amber rather than the accent green a status would use.
   pointer-events:none for the same reason .cap has it: the primary chrome is set to
   pointerEvents:'none' by the compositor, but that does NOT inherit to a child left at the default
   auto, and this badge sits over the sector where click-to-identify has to land.
   Top-CENTRE while full-bleed: the ultrasound's own labels claim both top corners (they are pushed
   ±26 px out from their anchor into a left and a right gutter), and centre is free by construction.
   On an inset no labels are drawn at all, so the top-right corner is clear there. */
.panelchrome .frozen { position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  display: none; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #ffcf7a; background: rgba(48,30,6,.78); border: 1px solid rgba(255,190,90,.55);
  border-radius: 4px; padding: 2px 8px; pointer-events: none; white-space: nowrap; }
.panelchrome .frozen.on { display: block; }
.panelchrome .frozen.inset { left: auto; right: 8px; transform: none; letter-spacing: .06em;
  padding: 1px 5px; }

/* The ultrasound's own overlay: labels + leader lines, in beam coordinates. */
#usOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 14; display: none; }
#usOverlay.on { display: block; }
#usOverlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.us-label { position: absolute; left: 0; top: 0; font-size: 11px; line-height: 1.25;
  color: #dff1ff; background: rgba(6,14,22,.62); border: 1px solid rgba(120,190,255,.35);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; pointer-events: none;
  transform: translate3d(0,0,0); }
.us-label.node { color: #ffe3ec; border-color: rgba(255,120,160,.5); background: rgba(40,8,18,.66); }
.us-label.reveal { color: #fff; border-color: rgba(120,255,180,.75); background: rgba(6,30,20,.8); }
#usReadout { position: fixed; font-size: 11px; color: #cfe4ff; letter-spacing: .04em;
  pointer-events: none; z-index: 14; display: none; }
#usReadout.on { display: block; }
#usReadout b { color: #fff; font-weight: 600; }
#usReadout .dim { color: var(--text-dim); }

/* Control-panel pieces UIManager builds: the per-lobe sub-toggles under "Lung parenchyma", the case
   picker, and the survey banner's progress count. */
.lobe-toggles { margin: 1px 0 4px 22px; border-left: 1px solid var(--panel-border); padding-left: 8px; }
.lobe-toggles .row { padding: 1px 0; }
.lobe-toggles .lobe-name { font-size: 11px; color: var(--text-dim); }
.lobe-toggles .lobe-key { opacity: 0.6; }
#caseSelectInput { width: 100%; background: #0e151d; color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 6px; padding: 6px; font-size: 12px; margin-bottom: 6px; }
.btn.guide { margin-top: 4px; }
.survey-count { opacity: .6; }

/* The bronchoscopy reference overlay (ui/BronchAtlas.js). It starts below the metrics HUD's resting
   height; UIManager nudges `top` to the HUD's real bottom. */
#atlasPanel { left: 14px; top: 142px; width: 256px; z-index: 20; }
#atlasPanel .atlas-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
#atlasPanel .atlas-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
#atlasTitle { font-size: 13px; font-weight: 700; }
#atlasPanel .atlas-nav { display: flex; gap: 4px; }
#atlasPanel .atlas-nav .btn { width: 26px; padding: 4px 0; }
#atlasSvg { background: #0e151d; border: 1px solid var(--panel-border); border-radius: 8px; padding: 4px; }
#atlasSvg svg { display: block; }
#atlasCount { font-size: 10px; color: var(--text-dim); text-align: right; margin-top: 3px; }
#atlasCount .here-dot { color: var(--accent); }
#atlasNote { font-size: 11px; line-height: 1.45; color: var(--text); margin-top: 4px; }
#atlasPanel .atlas-source { font-size: 9.5px; color: var(--text-dim); margin-top: 6px; }

#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; background: var(--bg); z-index: 50; }
#loading .spinner { width: 36px; height: 36px; border: 3px solid #223; border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite; }
#loading p { color: var(--text-dim); font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }

.kbd { font-size: 10px; border-radius: 3px; padding: 1px 4px; }