/* Fullscreen in-app 360° capture modal — ported from tour-builder/360-capture/360cap_v10.html.
   Everything is scoped under #cap360ios-modal / cap360ios- prefixed ids so nothing here can collide
   with the wizard's own styles (base.css, step1.css, etc.) or IDs (ui.js/state.js).
   Colors/type pull from base.css's :root tokens (loaded before this file) so the capture flow
   reads as part of the same product, not a bolted-on tool: --indigo/--indigo-lt for the primary
   accent and "needs attention" guidance, --green for "aligned/good," --bg/--surface for panels. */
#cap360ios-modal{position:fixed;inset:0;z-index:9999;display:none;background:var(--bg);
  font-family:var(--font);user-select:none;touch-action:none;overflow:hidden}
#cap360ios-modal.open{display:block}
#cap360ios-modal *{box-sizing:border-box}

#cap360ios-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#cap360ios-cv{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#cap360ios-flash{position:fixed;inset:0;background:#fff;opacity:0;z-index:50;pointer-events:none}

#cap360ios-close{position:fixed;top:14px;left:14px;z-index:30;width:36px;height:36px;
  border-radius:50%;background:rgba(0,0,0,.55);color:var(--text);border:none;font-size:20px;
  line-height:1;cursor:pointer}

#cap360ios-debug-toggle{position:fixed;bottom:14px;left:14px;z-index:30;width:32px;height:32px;
  border-radius:50%;background:rgba(0,0,0,.55);border:none;font-size:15px;line-height:1;cursor:pointer;
  opacity:.5}
#cap360ios-debug-panel{position:fixed;inset:0;z-index:40;background:var(--bg);
  display:flex;flex-direction:column;padding:14px}
#cap360ios-debug-log{flex:1;overflow-y:auto;color:#8ee68e;font-family:monospace;font-size:11px;
  line-height:1.5;white-space:pre-wrap;word-break:break-word}
#cap360ios-debug-actions{display:flex;gap:10px;padding-top:10px}
#cap360ios-debug-actions .cap360ios-btn{flex:1;min-width:0;padding:10px;font-size:13px}

/* Capture settings (rings/density/poles) -- gear icon lives only on the
   sel-screen (see that button's own comment for why), opens this
   full-screen panel over it. */
#cap360ios-settings-btn{position:absolute;top:14px;right:14px;z-index:11;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
#cap360ios-settings-panel{position:fixed;inset:0;z-index:40;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px}
#cap360ios-settings-panel h3{color:var(--text);font-size:var(--fs-heading);font-weight:var(--fw-semi)}
.cap360ios-settings-group{width:100%;max-width:300px;display:flex;flex-direction:column;gap:6px}
.cap360ios-settings-group>label{font-size:12px;color:var(--text-3);font-weight:var(--fw-semi)}
.cap360ios-settings-options{display:flex;gap:8px}
.cap360ios-settings-options button{flex:1;padding:10px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--text-3);
  font-family:var(--font);font-size:13px;font-weight:var(--fw-medium);cursor:pointer;line-height:1.3}
.cap360ios-settings-options button.selected{border-color:var(--indigo);background:rgba(124,58,237,.14);color:var(--text)}
.cap360ios-settings-options button small{display:block;font-size:10px;color:var(--text-4);font-weight:var(--fw-regular);margin-top:1px}
.cap360ios-settings-options button.selected small{color:var(--indigo-lt)}
#cap360ios-settings-total{font-size:12px;color:var(--text-4);text-align:center}
.cap360ios-settings-actions{display:flex;gap:10px;width:100%;max-width:300px}
.cap360ios-settings-actions .cap360ios-btn{flex:1;min-width:0}

#cap360ios-pill{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.72);color:var(--text);padding:11px 28px;border-radius:50px;
  font-size:var(--fs-md);font-weight:var(--fw-medium);z-index:5;backdrop-filter:blur(10px);
  white-space:nowrap;transition:background .2s,color .2s}
#cap360ios-pill.ok{background:rgba(16,185,129,.18);color:var(--green)}

#cap360ios-timer{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);
  font-size:32px;font-weight:var(--fw-bold);color:var(--green);z-index:5;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(16,185,129,.6);pointer-events:none;
  opacity:0;transition:opacity .12s}
#cap360ios-timer.on{opacity:1}

#cap360ios-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--border);z-index:6}
#cap360ios-progress-bar{height:100%;background:var(--indigo);width:0%;transition:width .3s}

/* Ring HUD: radial dial showing which of the current ring's yaw positions
   are captured (green arc), a live "you are here" dot while rotating
   (indigo), and the numeric N/total readout underneath -- replaces a plain
   "12/24" text-only counter with something that mirrors the actual physical
   act (spinning in a circle) instead of an abstract percentage. */
#cap360ios-ring-wrap{position:fixed;top:14px;right:14px;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:2px}
#cap360ios-ring-inner{position:relative;width:64px;height:64px}
#cap360ios-ring-hud{width:64px;height:64px;display:block}
#cap360ios-ring-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text);font-size:13px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
#cap360ios-shot-label{position:static;color:var(--text-3);
  font-size:11px;font-weight:var(--fw-semi);letter-spacing:.3px;text-align:center;white-space:nowrap}

/* Rough live panorama preview -- top-left, below the close button, so it
   doesn't collide with the ring HUD (top-right) or the close/debug buttons
   (top-left corner itself, bottom-left). */
#cap360ios-live-preview-wrap{position:fixed;top:60px;left:14px;z-index:6;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#cap360ios-live-preview-label{color:var(--text-4);font-size:10px;font-weight:var(--fw-semi);
  letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#cap360ios-live-preview{width:128px;height:64px;display:block;border-radius:var(--radius-xs);
  background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.25)}

/* Sensor-mode/angle readout -- developer diagnostic only, never shown to
   real users; kept in the DOM (still written to every frame) so it stays
   easy to re-enable for debugging without touching capture360.js. */
#cap360ios-dbg{display:none;position:fixed;top:28px;left:56px;color:var(--text-4);
  font-size:10px;font-family:monospace;z-index:20;pointer-events:none;line-height:1.7}

#cap360ios-modal .cap360ios-screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(9,9,11,.92);
  padding:28px;gap:16px;text-align:center}
#cap360ios-modal .cap360ios-screen h2{color:var(--text);font-size:var(--fs-heading);font-weight:var(--fw-semi);margin-bottom:4px}
#cap360ios-modal .cap360ios-screen p{color:var(--text-3);font-size:var(--fs-base);line-height:var(--lh-base);max-width:300px}
#cap360ios-modal .cap360ios-btn{display:block;padding:14px 36px;border-radius:50px;border:none;
  font-size:var(--fs-md);font-weight:var(--fw-semi);cursor:pointer;min-width:180px;font-family:var(--font)}
#cap360ios-modal .cap360ios-btn-main{background:var(--indigo);color:#fff}
#cap360ios-modal .cap360ios-btn-main:hover{background:var(--indigo-dk)}
#cap360ios-modal .cap360ios-btn:disabled{background:var(--surface-3);color:var(--text-4);cursor:default;opacity:.7}
#cap360ios-modal .cap360ios-btn:disabled:hover{background:var(--surface-3)}
#cap360ios-modal .cap360ios-btn-sec{background:transparent;color:var(--text-3);border:1px solid var(--border);margin-top:4px}
#cap360ios-modal select{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:11px 14px;
  border-radius:var(--radius-sm);font-size:var(--fs-base);width:100%;max-width:300px;appearance:none}

/* Camera picker: pick by looking at an actual shot from each lens instead
   of a device name -- device labels are often meaningless ("camera 3,
   facing back") and don't tell a real user anything, but a photo does. */
#cap360ios-cam-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.cap360ios-cam-thumb{position:relative;border:2px solid var(--border);border-radius:var(--radius-sm);
  overflow:hidden;padding:0;background:var(--surface);cursor:pointer;aspect-ratio:4/3}
.cap360ios-cam-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cap360ios-cam-thumb.selected{border-color:var(--indigo)}
.cap360ios-cam-thumb .cap360ios-cam-thumb-check{position:absolute;top:4px;right:4px;width:18px;height:18px;
  border-radius:50%;background:var(--indigo);color:#fff;display:none;align-items:center;justify-content:center;font-size:11px}
.cap360ios-cam-thumb.selected .cap360ios-cam-thumb-check{display:flex}

#cap360ios-done-screen{overflow-y:auto;justify-content:flex-start;padding-top:40px}
#cap360ios-done-screen h2{margin-bottom:0}
#cap360ios-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  width:100%;max-width:400px;margin:4px 0}
#cap360ios-photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-xs);background:var(--surface)}
#cap360ios-render-panel{width:100%;max-width:400px;margin-top:8px;display:none;flex-direction:column;align-items:center;gap:6px}
#cap360ios-render-bar{width:100%;height:4px;background:var(--surface-3);border-radius:2px}
#cap360ios-render-fill{height:4px;background:var(--indigo);border-radius:2px;width:0%;transition:width .1s}
#cap360ios-equi-canvas{width:100%;border-radius:var(--radius-xs);background:var(--bg);display:none}
#cap360ios-viewer3d{display:none;width:100%;max-width:400px;height:260px;border-radius:var(--radius-sm);overflow:hidden;margin-top:6px;background:var(--bg)}