/* Focused phone Viewer. All rules stay inside the module; desktop briefs keep
   their existing layout and renderer styles. */
.vmv {
  --vmv-paper: var(--vnt-bg, #f2f2f3);
  --vmv-surface: var(--vnt-panel, #fff);
  --vmv-ink: var(--vnt-text, #1d1f20);
  --vmv-muted: var(--vnt-text-dim, #62676b);
  --vmv-line: var(--vnt-border, #dfe2e3);
  --vmv-accent: var(--accent, #5980a6);
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin: 0 auto;
  color: var(--vmv-ink);
  background: var(--vmv-paper);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vmv *, .vmv *::before, .vmv *::after { box-sizing: border-box; }
.vmv [hidden] { display: none !important; }
.vmv button, .vmv input, .vmv textarea { font: inherit; }
.vmv button, .vmv a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vmv button { min-height: 44px; cursor: pointer; border: 0; }
.vmv button:disabled { cursor: default; opacity: .45; }
.vmv a { color: var(--vmv-accent); text-decoration: none; }
.vmv a:hover { text-decoration: underline; }
.vmv button:focus-visible, .vmv a:focus-visible, .vmv input:focus-visible,
.vmv textarea:focus-visible, .vmv h1:focus-visible {
  outline: 3px solid var(--vmv-accent);
  outline-offset: 3px;
}
.vmv-header {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--vmv-line);
  background: var(--vmv-surface);
}
.vmv-back {
  flex: 0 0 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  margin-left: -10px;
  color: var(--vmv-ink) !important;
}
.vmv-project { flex: 1; min-width: 0; }
.vmv-project strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.vmv-eyebrow { font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--vmv-muted); }
.vmv-text-button { padding: 0 6px; background: transparent; color: var(--vmv-accent); font-size: 13px !important; white-space: nowrap; }
.vmv-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 20px; min-height: 48px; font-size: 12px; color: var(--vmv-muted); }
.vmv-main { padding: 8px 20px 16px; }
.vmv-shot-heading { display: flex; align-items: flex-start; gap: 12px; }
.vmv-shot-heading > div { flex: 1; min-width: 0; }
.vmv h1 { margin: 3px 0 8px; font-size: clamp(23px, 6vw, 29px); letter-spacing: -.03em; line-height: 1.13; font-weight: 650; }
.vmv-icon-button { flex: 0 0 44px; width: 44px; padding: 0; background: transparent; color: var(--vmv-ink); font-size: 22px; }
.vmv-shot-context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 15px; color: var(--vmv-muted); font-size: 12px; }
.vmv-shot-context > span:first-child { font-weight: 600; }
.vmv-status { margin-left: auto; font-size: 11px; padding: 3px 8px; border-radius: 20px; background: var(--vmv-surface); border: 1px solid var(--vmv-line); color: var(--vmv-muted); }
.vmv-status[data-status="done"] { color: #27603f; border-color: #a8c8b5; background: #edf6ef; }
.vmv-status[data-status="issue"] { color: #7b4716; border-color: #d5ba99; background: #fff5e9; }
.vmv-main > article > .vmv-warning { margin: 0 0 12px; }
.vmv-switch { display: flex; width: 184px; margin-bottom: 10px; padding: 3px; gap: 2px; background: var(--vmv-line); border-radius: 8px; }
.vmv-switch button { flex: 1; border-radius: 5px; background: transparent; color: var(--vmv-muted); min-height: 44px; font-size: 13px; }
.vmv-switch button[aria-pressed="true"] { color: var(--vmv-ink); background: var(--vmv-surface); box-shadow: 0 1px 2px #00000012; font-weight: 600; }
.vmv-visual { position: relative; width: 100%; min-width: 0; aspect-ratio: 11 / 7; height: auto; overflow: hidden; background: #e7ebeb; border: 1px solid var(--vmv-line); border-radius: 10px; }
.vmv-visual > * { max-width: 100%; }
.vmv-visual .mfv-map, .vmv-visual .brief-preview-map, .vmv-visual .mfv-visual-map,
.vmv-visual [data-vmv-map], .vmv-visual [data-vmv-preview] { height: 100% !important; min-height: 0 !important; }
.vmv-visual canvas, .vmv-visual img, .vmv-visual video { max-width: 100%; }
.vmv-visual-empty { height: 100%; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--vmv-muted); font-size: 13px; }
.vmv-location-actions { padding-top: 4px; }
.vmv-location-actions a { min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; width: fit-content; max-width: 100%; }
.vmv-location-actions a + a { margin-top: -4px; }
.vmv-location-actions p { margin: 0 0 14px; font-size: 11px; color: var(--vmv-muted); }
.vmv-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 14px 0; gap: 12px; border-top: 1px solid var(--vmv-line); border-bottom: 1px solid var(--vmv-line); }
.vmv-values dt { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--vmv-muted); margin-bottom: 3px; }
.vmv-values dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.vmv-instruction { font-size: 14px; margin: 14px 0 0; }
.vmv-warning { margin: 12px 0 0; font-size: 12px; color: #6f4b20; border-left: 3px solid #b58a51; padding: 8px 10px; background: #fff6e8; }
.vmv-feedback { padding: 0 20px; color: #804018; font-size: 13px; }
.vmv-feedback:empty { display: none; }
.vmv-feedback:not(:empty) { padding-bottom: 12px; }
.vmv-receipt { display: flex; align-items: center; gap: 12px; margin: 0 20px 14px; padding: 5px 10px 5px 12px; background: #e8f0ea; color: #285d3e; border-radius: 8px; font-size: 12px; }
.vmv-receipt > span { flex: 1; min-width: 0; }
.vmv-receipt button { padding: 0 6px; color: #245336; background: transparent; font-weight: 600; min-width: 48px; }
.vmv-footer { position: sticky; bottom: 0; z-index: 20; padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--vmv-line); background: var(--vmv-surface); }
.vmv-capture-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
.vmv-nav-button { width: 44px; height: 48px; border-radius: 8px; background: var(--vmv-paper); color: var(--vmv-ink); font-size: 28px !important; line-height: 1; }
.vmv-done { border-radius: 8px; min-height: 48px !important; padding: 10px 12px; background: var(--vmv-accent); color: white; font-size: 14px !important; font-weight: 600; }
.vmv-done:disabled { opacity: .7; }
.vmv-destinations { margin: 8px auto -8px; display: flex; justify-content: center; gap: 20px; }
.vmv-destinations > * { min-height: 44px; min-width: 80px; padding: 11px 8px; text-align: center; font-size: 12px; }
.vmv-destinations [aria-current="page"] { color: var(--vmv-ink); font-weight: 650; border-bottom: 2px solid var(--vmv-accent); }
.vmv-readonly { text-align: center; margin: 6px 0 0; font-size: 11px; color: var(--vmv-muted); }
.vmv-empty { padding: 42px 0; text-align: center; color: var(--vmv-muted); }
.vmv-empty h2 { margin: 0 0 8px; font-size: 22px; color: var(--vmv-ink); }
.vmv-sheet { position: fixed; inset: auto 0 0; width: min(100%, 680px); max-width: 680px; max-height: min(88dvh, 900px); margin: 0 auto; padding: 0 0 max(20px, env(safe-area-inset-bottom, 0px)); border: 1px solid var(--vmv-line); border-bottom: 0; border-radius: 16px 16px 0 0; color: var(--vmv-ink); background: var(--vmv-surface); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.vmv-sheet::backdrop { background: #14212a66; }
.vmv-sheet > header { position: sticky; top: 0; z-index: 2; padding: 14px 20px; display: flex; align-items: center; gap: 10px; background: var(--vmv-surface); border-bottom: 1px solid var(--vmv-line); }
.vmv-sheet h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vmv-sheet > header button { font-size: 28px; }
.vmv-list-tools { padding: 14px 20px 4px; }
.vmv-search { display: block; }
.vmv-search input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--vmv-line); border-radius: 7px; color: var(--vmv-ink); background: var(--vmv-paper); font-size: 16px; }
.vmv-filters { display: flex; gap: 4px; margin-top: 9px; }
.vmv-filters button { flex: 1; padding: 7px 4px; background: transparent; font-size: 12px; border-radius: 6px; white-space: nowrap; color: var(--vmv-muted); }
.vmv-filters button[aria-pressed="true"] { background: var(--vmv-paper); color: var(--vmv-ink); font-weight: 600; }
.vmv-shot-list { padding: 4px 12px; }
.vmv-list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 13px 8px; text-align: left; background: transparent; color: var(--vmv-ink); border-bottom: 1px solid var(--vmv-line) !important; }
.vmv-list-row.is-selected { border-radius: 8px; background: var(--vmv-paper); }
.vmv-list-ref { flex: 0 0 28px; align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 650; color: var(--vmv-accent); text-align: center; }
.vmv-list-copy { flex: 1; min-width: 0; }
.vmv-list-copy strong { display: block; font-size: 14px; font-weight: 600; }
.vmv-list-copy small { display: block; margin-top: 3px; font-size: 11px; color: var(--vmv-muted); }
.vmv-list-status { font-weight: 600; }
.vmv-no-results { margin: 20px 8px; color: var(--vmv-muted); font-size: 13px; }
.vmv-detail-content { padding: 18px 20px; max-width: 100%; }
.vmv-detail-content h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.vmv-detail-content p { margin: 8px 0 16px; }
.vmv-detail-content summary { min-height: 44px; padding: 11px 0; cursor: pointer; }
.vmv-detail-content img, .vmv-detail-content video, .vmv-detail-content iframe { max-width: 100%; }
.vmv-detail-content table { display: block; max-width: 100%; overflow-x: auto; }
.vmv-note-label { display: block; margin-top: 20px; font-size: 13px; font-weight: 600; }
.vmv-note-label textarea { display: block; resize: vertical; width: 100%; margin: 8px 0 12px; padding: 12px; border: 1px solid var(--vmv-line); border-radius: 8px; color: var(--vmv-ink); background: var(--vmv-paper); font-size: 16px; font-weight: 400; }
.vmv-issue { width: 100%; padding: 12px; background: var(--vmv-paper); color: var(--vmv-ink); font-size: 14px; border-radius: 8px; }
.vmv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 350px) {
  .vmv-header { padding-left: 12px; padding-right: 12px; }
  .vmv-main, .vmv-progress, .vmv-footer { padding-left: 14px; padding-right: 14px; }
  .vmv-values { gap: 8px; }
  .vmv-values dd { font-size: 13px; }
  .vmv-receipt { margin-left: 14px; margin-right: 14px; }
  .vmv-sheet > header, .vmv-list-tools, .vmv-detail-content { padding-left: 14px; padding-right: 14px; }
  .vmv-shot-context { gap: 6px 8px; }
  .vmv-status { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .vmv *, .vmv *::before, .vmv *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.vmv-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; background: #17232c; }
.vmv-preview-empty { height: 100%; display: grid; place-items: center; padding: 24px 22px 60px; font-size: 13px; color: var(--vmv-muted); text-align: center; }
.vmv-3d-link { position: absolute; right: 10px; bottom: 10px; z-index: 4; min-height: 44px; display: flex; align-items: center; padding: 10px 13px; border-radius: 7px; background: var(--vmv-surface); color: var(--vmv-accent); font-size: 12px; font-weight: 600; box-shadow: 0 2px 9px #00000015; }

.vmv-footer .vmv-feedback { padding: 0 0 10px; }
.vmv-footer .vmv-receipt { margin: 0 0 10px; }

.vmv-visual-content { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* The existing video route player includes its own transport. Let an expanded
   route grow instead of clipping its play/scrub controls inside the map frame. */
.vmv-visual:has(.mobile-video-player), .vmv-visual-content:has(.mobile-video-player) { height: auto; min-height: 180px; }
.vmv-visual .mobile-video-player { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--vmv-ink); background: var(--vmv-surface); }
.vmv-visual .mobile-video-3d-link { margin: 0; min-height: 44px; padding: 12px 14px; border-radius: 0; background: var(--vmv-accent); color: #fff; font-size: 13px; }
.vmv-visual .mobile-video-player-head { padding: 8px 12px; }
.vmv-visual .mobile-video-player-head b { color: var(--vmv-ink); }
.vmv-visual .mobile-video-player-head span { color: var(--vmv-muted); }
.vmv-visual .mobile-video-player-stage { height: clamp(170px, 28vh, 260px); aspect-ratio: auto; }
.vmv-visual .mobile-video-controls { padding: 6px 10px; gap: 8px; color: var(--vmv-muted); }
.vmv-visual .mobile-video-controls button { min-height: 44px; min-width: 44px; flex: 0 0 44px; }
.vmv-visual .mobile-video-controls input { min-width: 0; }
.vmv-visual .mobile-video-controls [data-mobile-route-time] { font-size: 11px; white-space: nowrap; }
.vmv-visual .mobile-route-fallback > summary { min-height: 44px; padding: 12px 14px; }
.vmv-visual .mobile-video-controls [data-mobile-route-time] { height: auto; overflow: visible; border-radius: 0; background: none; color: var(--vmv-muted); }
.vmv-visual .mobile-video-controls [data-mobile-route-play] { background: var(--vmv-accent); color: #fff; }

/* Maps retain their full geometry rather than cropping camera/route markers. */
.vmv-visual .mfv-map[data-brief-static-no-crop] .brief-static-map-img { object-fit: contain; }

.vmv-progress [data-vmv-schedule] { margin-left:auto; white-space:nowrap; text-decoration:none; }
.vmv-progress [data-vmv-progress] { min-width:0; flex:1; }
.vmv-progress .vmv-text-button { flex:none; }

/* Keep the full satellite pin/cone visible without letterboxing. */
.vmv-visual .mfv-map[data-brief-static-no-crop] { width:100%; padding:0; border:0; border-radius:0; }
.vmv-location-actions { margin-bottom:12px; }
.vmv-sheet .vmv-values { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }

/* Keep the complete stored camera frame and attribution readable on phones. */
.vmv-visual:has(.vmv-generated-frame), .vmv-visual-content:has(.vmv-generated-frame) { aspect-ratio: auto; height: auto; min-height: 0; overflow: visible; }
.vmv-visual [data-vmv-preview]:has(.vmv-generated-frame) { height: auto !important; }
.vmv-generated-frame > a { display: block; }
.vmv-generated-frame .vmv-preview-image { height: auto; }
.vmv-preview-attribution { margin: 0; padding: 8px 12px; color: #fff; background: #17232c; font: 12px/1.5 var(--font-body, sans-serif); overflow-wrap: anywhere; }
.vmv-visual-content:has(.vmv-generated-frame) .vmv-3d-link { position: static; box-shadow: none; border-radius: 0; }

/* The whole authorized plan stays visible while exact height/window selection
   lives in the position chooser. Projection uses the map image metadata. */
.vmv-switch { width:100%; }
.vmv-map-context { margin:0 0 10px; font-size:12px; color:var(--vmv-muted); }
.vmv-plan-map, .vmv-map-overlay { position:absolute; inset:0; }
.vmv-visual:has(.vmv-plan-map) { aspect-ratio:auto; }
.vmv-plan-map { position:relative; aspect-ratio:11 / 7; }
.vmv-plan-map .mfv-map { position:absolute; inset:0; margin:0; height:100%; min-height:0 !important; }
.vmv-plan-map .brief-static-map-img { width:100%; height:100%; object-fit:contain !important; }
.vmv-map-overlay { pointer-events:none; }
.vmv-map-position { width:44px; height:44px; position:absolute; transform:translate(-50%,-50%); min-width:44px; min-height:44px; padding:5px 8px; border:2px solid #fff !important; border-radius:50%; background:#213a4c; color:#fff; box-shadow:0 2px 6px #0007; pointer-events:auto; font-size:13px !important; font-weight:650; }
.vmv-map-position span { display:block; font-size:9px; line-height:1.1; }
.vmv-map-position.is-active { background:#b4ddc2; color:#102116; border-color:#173f27 !important; outline:3px solid #fff; outline-offset:2px; z-index:2; }
.vmv[data-can-log="true"] .vmv-capture-actions { grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px; gap:8px; }
.vmv-reshoot { min-height:48px !important; padding:10px 5px; border:1px solid var(--vmv-accent) !important; border-radius:8px; background:var(--vmv-surface); color:#244b68; font-weight:650; font-size:14px !important; }

.vmv-done { background:#315b77; }

/* Retained manual references reserve space for their provenance warning. */
.vmv-visual:has(.capture-geometry-note),
.vmv-visual-content:has(.capture-geometry-note) { aspect-ratio:auto; height:auto; min-height:0; overflow:visible; }
.vmv-visual [data-vmv-preview]:has(.capture-geometry-note),
.vmv-visual [data-vmv-preview-frame]:has(.capture-geometry-note) { height:auto !important; }
.vmv-visual:has(.capture-geometry-note) .vmv-preview-image { height:auto; object-fit:contain; }
.vmv-visual-content:has(.capture-geometry-note) .vmv-3d-link { position:static; box-shadow:none; border-radius:0; }

/* Saved 360 references are flat frames belonging to the selected height. */
.vmv-visual:has(.vmv-saved-references) { aspect-ratio:auto; }
.vmv-saved-references { padding:12px; }
.vmv-reference-intro { margin:0 0 8px; font-size:13px; line-height:1.45; }
.vmv-saved-references .capture-geometry-note { display:block; margin-bottom:8px; }
.vmv-reference-strip { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; }
.vmv-reference-frame { flex:0 0 90%; margin:0; scroll-snap-align:start; }
.vmv-reference-frame img { display:block; width:100%; height:auto; object-fit:contain; }
.vmv-reference-frame figcaption { padding:6px 0; font-size:12px; font-weight:600; }
.vmv-reference-unavailable { display:none; padding:24px 12px; margin:0; font-size:13px; line-height:1.5; }
.vmv-reference-frame .is-preview-image-failed ~ .vmv-reference-unavailable { display:block; }

.vmv-visual:has(.vmv-saved-references) .vmv-3d-link { position:static; display:flex; width:fit-content; margin:0 12px 12px; }

/* The app locks body scrolling. Keep capture content scrollable independently
   of the navigation bar, including with Safari's changing browser chrome. */
.vmv { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.vmv-header, .vmv-progress, .vmv-footer { flex: 0 0 auto; }
.vmv-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.vmv-footer { position: relative; bottom: auto; }
.vmv-main > article > .vmv-values { margin-bottom: 14px; }

.vmv-height-group { border-bottom: 1px solid var(--vmv-line); }
.vmv-height-group > summary { cursor: pointer; padding: 14px 8px; min-height: 48px; }
.vmv-height-group > summary strong { font-size: 15px; }
.vmv-height-group > summary span { margin-left: 10px; font-size: 12px; color: var(--vmv-muted); }
.vmv-height-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 0 8px 14px; }
.vmv-height-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 6px; min-height: 60px !important; border: 1px solid var(--vmv-line) !important; border-radius: 7px; color: var(--vmv-ink); background: var(--vmv-paper); }
.vmv-height-tile strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.vmv-height-tile small { font-size: 11px; }
.vmv-height-tile.is-selected { color: #fff; background: #315b77; border-color: #315b77 !important; }
.vmv-height-tile .vmv-list-status { font-size: 10px; }