/* Camera guide owns only this overlay. Existing panels, renderer and input
   controls keep their layout and event ownership. */
.wb-camera-guide {
  position: absolute; z-index: 5; top: 10px; right: 10px;
  width: min(278px, calc(100% - 20px)); max-height: calc(50% - 10px);
  display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; overscroll-behavior: contain; touch-action: pan-y;
  color: var(--ink, #e6f6ff); background: rgba(4, 18, 31, .96);
  border: 1px solid var(--line2, #396276); border-radius: 10px;
  box-shadow: 0 6px 20px #0004; font: 400 12.5px/1.55 var(--font, sans-serif);
  pointer-events: auto; scrollbar-width: thin;
}
.wb-camera-guide > details { min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.wb-camera-guide:has(> .wb-camera-guide-recovery:not([hidden])) { overflow: auto; }
.wb-camera-guide-recovery { flex: 0 0 auto; padding: 10px 12px; overflow-wrap: anywhere; border-bottom: 1px solid #396276; }
.wb-camera-guide-recovery[hidden] { display: none; }
.wb-camera-guide-recovery summary { min-height: 44px; align-content: center; cursor: pointer; }
.wb-camera-guide-recovery:not([hidden]) + details { flex: 0 0 auto; max-height: 280px; }
@media (min-width:721px) {
  /* A short stage cannot put recovery below the view pad. The measured left
     band clears existing controls and scrolls without growing past the stage. */
  .wb[data-workspace="imported"][data-workspace-ui="guided"][data-guide-dock="recovery"] .wb-camera-guide {
    top:var(--wb-guide-top); right:var(--wb-guide-right); bottom:auto; left:auto;
    width:var(--wb-guide-width); max-width:var(--wb-guide-width); max-height:var(--wb-guide-room);
  }
}
.wb-camera-guide-live { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #396276; }
.wb-camera-guide-live[hidden] { display: none; }
.wb-camera-guide-live > div { min-width: 0; flex: 1; }
.wb-camera-guide-live-title { display: block; color: #a0efff; font-size: 11px; }
.wb-camera-guide-live .wb-camera-guide-live-status { margin: 2px 0 0; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.wb-camera-guide-live .wb-camera-guide-live-release { margin: 3px 0 0; color: #ffe39d; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.wb-camera-guide-live button { flex: 0 0 88px; font-size: 11px; padding: 6px; }
.wb-camera-guide[data-phase="tracking"] .wb-camera-guide-live-status { color: #a1f3d1; }
.wb-camera-guide[data-phase="release"] .wb-camera-guide-live-status { color: #ffe39d; }
.wb-camera-guide-summary {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; box-sizing: border-box; list-style: none; cursor: pointer;
  background: #071d2e; color: var(--cyan2, #a0efff); font-size: 13px; font-weight: 700;
}
.wb-camera-guide-summary::-webkit-details-marker { display: none; }
.wb-camera-guide details[open] .wb-camera-guide-chevron { transform: rotate(180deg); }
.wb-camera-guide-body { padding: 10px 12px 12px; overflow-wrap: anywhere; }
.wb-camera-guide p { margin: 0 0 9px; }
.wb-camera-guide-eyebrow { color: var(--cyan2, #a0efff); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.wb-camera-guide-step { padding: 8px; border-left: 2px solid var(--cyan, #64dff4); background: #183348; }
.wb-camera-guide-actions, .wb-camera-guide-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 9px 0; }
.wb-camera-guide-modes [data-guide="palm_explode"] { grid-column: 1 / -1; }
.wb-camera-guide button {
  min-width: 0; min-height: 44px; box-sizing: border-box; padding: 8px 7px; border: 1px solid #4b7285; border-radius: 6px;
  color: #e8f7ff; background: #142d3e; font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation;
}
.wb-camera-guide button[aria-pressed="true"] { color: #d5fff5; border-color: #77e6c5; background: #143d37; }
.wb-camera-guide button:disabled { opacity: .55; cursor: default; }
.wb-camera-guide :is(button,summary):focus-visible { outline: 2px solid #b3f6ff; outline-offset: -3px; }
.wb-camera-guide-instructions { padding-left: 19px; margin: 12px 0; }
.wb-camera-guide-instructions li + li { margin-top: 7px; }
.wb-camera-guide-limit, .wb-camera-guide-scope { color: #c4d7e2; font-size: 11.5px; }
.wb-camera-guide-speech { display: flex; align-items: center; gap: 8px; }
.wb-camera-guide-speech button { flex: 0 0 auto; min-width: 88px; }
.wb-camera-guide-speech span, .wb-camera-guide-speech-status { color: #c4d7e2; font-size: 11px; }
.wb-camera-guide-speech-status:not(:empty) { margin: 8px 0 0; }
.wb-camera-guide-practice { margin: 8px 0 12px; border: 1px solid #396276; border-radius: 6px; }
.wb-camera-guide-practice-summary { display: flex; align-items: center; min-height: 44px; padding: 0 8px; cursor: pointer; color: #a0efff; font-weight: 700; }
.wb-camera-guide-practice-body { padding: 0 8px 8px; }
.wb-camera-guide-practice-title { display: block; margin-bottom: 6px; font-size: 12px; }
.wb-camera-guide-practice-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0; }
.wb-camera-guide-practice-actions [hidden], .wb-camera-guide-practice-current[hidden], .wb-camera-guide-practice-bar[hidden], .wb-camera-guide-practice-bar [hidden] { display: none; }
.wb-camera-guide .wb-camera-guide-practice-current { margin: 4px 0 0; font-size: 10.5px; line-height: 1.3; color: #ffe39d; }
.wb-camera-guide-practice-scope, .wb-camera-guide-practice-local { color: #c4d7e2; font-size: 11px; }
.wb-camera-guide-practice-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid #396276; }
.wb-camera-guide-practice-bar-title { min-width: 0; flex: 1; color: #ffe39d; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.wb-camera-guide-practice-bar button { flex: 0 0 96px; padding: 6px; font-size: 11px; }
.wb-camera-guide-practice-bar:has(.wb-camera-guide-practice-bar-actions) {
  display: grid; gap: 6px; padding: 8px 10px; min-height: 52px;
  flex: 0 0 auto;
}
/* One scrolling region keeps the practice controls and their review card
   reachable together, even when a narrow stage allows only a short guide. */
.wb-camera-guide:has(.wb-camera-guide-practice-bar:not([hidden])) { overflow-y: auto; }
.wb-camera-guide:has(.wb-camera-guide-practice-bar:not([hidden])) > details { min-height: 44px; flex: 0 0 auto; overflow: visible; }
.wb-camera-guide-practice-bar-heading { min-width: 0; }
.wb-camera-guide-practice-bar-heading .wb-camera-guide-practice-bar-title { display: block; font-weight: 650; }
.wb-camera-guide .wb-camera-guide-practice-bar-status { margin: 3px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.wb-camera-guide-practice-bar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wb-camera-guide-practice-bar-actions button { width: 100%; min-width: 44px; min-height: 44px; font-size: 12px; }
.wb-camera-guide .wb-camera-guide-practice-bar-note { margin: 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.wb-camera-guide-practice-bar-title:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wb-camera-guide-practice-bar[hidden] { display: none; }
.wb-camera-guide-practice-limits > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: #c4d7e2; font-size: 11px; }
.wb-camera-guide-practice-summary::after, .wb-camera-guide-practice-limits > summary::after { content: '⌄'; margin-left: auto; padding-left: 6px; }
.wb-camera-guide-practice[open] > summary::after, .wb-camera-guide-practice-limits[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 1100px) {
  .wb-camera-guide { top: calc(var(--ft, 0px) + 12px); right: calc(var(--fr, var(--fr0, 0px)) + 68px); max-width: calc(100% - var(--fl, var(--fl0, 0px)) - var(--fr, var(--fr0, 0px)) - 92px); max-height: min(400px, calc(50% - 12px)); }
}
@media (max-width: 479px) {
  .wb-camera-guide { top: 8px; right: 8px; width: min(260px, calc(100% - 16px)); }
}
.wb-camera-safety { display:none; }
@media(max-width:859.98px) {
  .wb-camera-safety:not([hidden]) { position:sticky; top:0; z-index:12; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; padding:6px 12px; background:#081e2d; border-block:1px solid #417b8c; }
  .wb-camera-safety-status { flex:1 1 180px; margin:0; font-size:12px; line-height:1.4; color:#ffe39d; }
  .wb-camera-safety > div { display:flex; gap:8px; }
  .wb-camera-safety button { min-height:44px; min-width:100px; padding:7px 10px; border:1px solid #75c7dc; border-radius:8px; background:#0b3043; color:#effcff; font-size:13px; font-weight:650; }
  .wb-camera-safety button:disabled { opacity:.5; cursor:default; }
  .wb[data-workspace-ui="guided"]:has(> .wb-camera-safety:not([hidden])) .wb-tabs { top:var(--wb-camera-safety-h,80px); }
  .wb[data-workspace-ui="guided"]:has(> .wb-camera-safety:not([hidden])) :is(a[href],button,input,select,textarea,summary,[tabindex],h2,h3,h4) { scroll-margin-top:calc(var(--wb-bar,0px) + var(--wb-camera-safety-h,80px) + 12px); }
}

.wb-camera-guide-actions [data-guide="robot-sample"] { grid-column: 1 / -1; }

/* Text labels keep preparation, gesture, release and result distinct. */
.wb-camera-guide-startup { display:grid; gap:5px; margin:0 0 10px; }
.wb-camera-guide-startup > div { padding:7px 8px; border:1px solid #396276; border-radius:6px; }
.wb-camera-guide-startup strong,.wb-camera-guide-startup span { display:block; }
.wb-camera-guide-startup strong { font-size:12px; }
.wb-camera-guide-startup span { font-size:11.5px; }
.wb-camera-guide-startup [data-state="current"] { border-width:2px; background:#183348; }
.wb-camera-guide-core { margin:9px 0; padding:9px; border:1px solid #75c7dc; border-radius:7px; background:#0b2536; }
.wb-camera-guide-core-title { display:block; margin-bottom:7px; font-size:13px; }
.wb-camera-guide-core p { display:grid; grid-template-columns:34px minmax(0,1fr); gap:7px; margin:0; padding:6px 0; border-top:1px solid #396276; }
.wb-camera-guide-core p > strong { color:#a0efff; }
.wb-camera-guide-core [data-guide-core="stop"] > strong { color:#ffe39d; }
.wb-camera-guide-core [data-guide-core="result"] > strong { color:#a1f3d1; }
.wb-camera-guide-precision { margin:9px 0; }
.wb-camera-guide-precision > strong { display:block; margin-bottom:5px; }
.wb-camera-guide-precision-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.wb-camera-guide-precision-options button { min-height:44px; }
.wb-camera-guide .wb-camera-guide-precision-current { margin:6px 0 3px; font-weight:700; }
.wb-camera-guide .wb-camera-guide-precision-note,.wb-camera-guide .wb-camera-guide-precision-status { font-size:11.5px; color:#c4d7e2; }
.wb-camera-guide-precision-status:empty { display:none; }
.wb-camera-guide-detail { border-top:1px solid #396276; margin:8px 0; }
.wb-camera-guide-detail > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font-weight:650; color:#c4d7e2; }
.wb-camera-guide :is(.wb-camera-guide-startup,.wb-camera-guide-core,.wb-camera-guide-precision)[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) {
  .wb-camera-guide,.wb-camera-guide * { scroll-behavior:auto; transition:none; animation:none; }
}
@media(forced-colors:active) {
  .wb-camera-guide-startup > div,.wb-camera-guide-core,.wb-camera-guide-core p,.wb-camera-guide-detail { border-color:CanvasText; background:Canvas; color:CanvasText; }
  .wb-camera-guide-core p > strong,.wb-camera-guide-core-title,.wb-camera-guide-precision > strong { color:CanvasText; }
  .wb-camera-guide-precision-options button[aria-pressed="true"] { border:3px solid Highlight; color:ButtonText; background:ButtonFace; }
  .wb-camera-guide-startup [data-state="current"] { outline:1px solid Highlight; }
}