/* "See it on your building": optional photo step on the door summary */
.viz-entry { display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; align-items: center; margin: 0 0 18px; padding: 14px 16px; border: 1px dashed #b9c6de; border-radius: 12px; background: var(--soft, #f3f6fb); }
.viz-entry[hidden] { display: none; }
.viz-entry__icon { width: 40px; height: 40px; fill: none; stroke: var(--blue, #0033a0); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viz-entry__text { display: grid; gap: 2px; line-height: 1.4; }
.viz-entry__text strong { color: var(--ink, #141b2b); font-size: 1.02rem; }
.viz-entry__text span { color: var(--muted, #5d677b); font-size: .92rem; }
.viz-entry__btn { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 8px 18px; background: #fff; }
@media (min-width: 560px) { .viz-entry { grid-template-columns: 40px 1fr auto; } .viz-entry__btn { grid-column: auto; } }

html.viz-open, html.viz-open body { overflow: hidden; }
.viz { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(5, 12, 30, .72); padding: 24px; }
.viz[hidden] { display: none; }
.viz__box { position: relative; display: flex; flex-direction: column; width: min(1200px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(11, 29, 68, .35); padding: 18px 22px 22px; }
.viz[data-view="pick"] .viz__box { width: min(560px, 100%); }
.viz__box > * { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .viz__box { animation: vizIn .18s ease-out; } @keyframes vizIn { from { opacity: 0; transform: translateY(8px); } } }
.viz__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.viz__head h2 { margin: 0; font-size: 1.7rem; }
.viz__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.viz__close svg { width: 22px; height: 22px; stroke: var(--ink, #141b2b); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.viz__close:hover { background: var(--soft, #f3f6fb); }
.viz__door { margin: 2px 0 12px; color: var(--muted, #5d677b); font-size: .92rem; line-height: 1.4; }
.viz__lead { margin: 0 0 16px; }
.viz__pick-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.viz__file { position: relative; flex: 1 1 200px; min-height: 52px; }
.viz__file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.viz__file:focus-within { outline: 3px solid var(--amber, #f5b82e); outline-offset: 2px; }
.viz__file--choose { background: #fff; color: var(--blue, #0033a0); border-color: var(--blue, #0033a0); }
/* no camera on a desktop: the "choose" button becomes the main one */
@media (hover: hover) and (pointer: fine) {
  .viz__file--camera { display: none; }
  .viz__file--choose { background: var(--amber, #f5b82e); color: var(--ink, #141b2b); border-color: transparent; }
}
.viz__drop { display: none; margin: 10px 0 0; text-align: center; color: var(--muted, #5d677b); font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .viz__drop { display: block; } }
.viz__pick.is-drop { outline: 3px dashed var(--blue, #0033a0); outline-offset: 8px; border-radius: 8px; }
.viz__pick.is-busy .viz__pick-btns { opacity: .6; pointer-events: none; }
.viz__error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8d1c12; font-weight: 600; line-height: 1.45; }
.viz__privacy { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--muted, #5d677b); font-size: .92rem; line-height: 1.4; }
.viz__privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.viz__fit { display: grid; gap: 14px; }
.viz__fit[hidden] { display: none; }
.viz__side { display: grid; gap: 12px; align-content: start; }
.viz__work { min-width: 0; display: flex; justify-content: center; }
.viz__stage { position: relative; max-width: 100%; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.viz__stage canvas { display: block; width: 100%; height: 100%; border-radius: 8px; background: #e9edf3; }
.viz__move { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; touch-action: none; pointer-events: none; }
.viz__move polygon { fill: rgba(0, 0, 0, 0.004); stroke: none; pointer-events: fill; cursor: grab; touch-action: none; }
.viz__move polygon.is-drag { cursor: grabbing; }
.viz__handle { position: absolute; left: -24px; top: -24px; z-index: 3; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.viz__handle span { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; background: rgba(0, 51, 160, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.viz__handle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; }
.viz__handle:focus-visible { outline: none; }
.viz__handle:focus-visible span, .viz__handle.is-drag span { border-color: var(--amber, #f5b82e); background: var(--blue, #0033a0); transform: scale(1.2); }
.viz__handle.is-drag { cursor: grabbing; }
.viz__edge { position: absolute; left: -36px; top: -22px; z-index: 2; width: 72px; height: 44px; padding: 0; border: 0; background: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.viz__edge--h { cursor: ns-resize; }
.viz__edge--v { cursor: ew-resize; }
.viz__edge span { position: absolute; left: 50%; top: 50%; width: 36px; height: 10px; margin: -5px 0 0 -18px; border-radius: 5px; border: 2px solid #fff; background: rgba(0, 51, 160, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); pointer-events: none; }
.viz__edge:focus-visible { outline: none; }
.viz__edge:focus-visible span, .viz__edge.is-drag span { border-color: var(--amber, #f5b82e); background: var(--blue, #0033a0); transform: scale(1.12); }
.viz.is-crossed .viz__handle span, .viz.is-crossed .viz__edge span { background: #c0392b; }
html.viz-moving, html.viz-moving * { cursor: grabbing !important; }
html.viz-ns, html.viz-ns * { cursor: ns-resize !important; }
html.viz-ew, html.viz-ew * { cursor: ew-resize !important; }
.viz__help { margin: 0; font-size: .95rem; line-height: 1.45; }
.viz.is-crossed .viz__help { color: #8d1c12; font-weight: 600; }
.viz__controls { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.viz__check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; }
.viz__check input { width: 20px; height: 20px; accent-color: var(--blue, #0033a0); }
.viz__range { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.viz__range input { width: 160px; accent-color: var(--blue, #0033a0); }
.viz__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.viz__actions .btn { min-height: 46px; padding: 10px 18px; }
.viz__btn-line { background: #fff; color: var(--blue, #0033a0); border-color: var(--blue, #0033a0); }
.viz__note { margin: 0; color: var(--muted, #5d677b); font-size: .9rem; line-height: 1.45; }
.viz__note[hidden] { display: none; }

/* phones: full screen */
@media (max-width: 640px) {
  .viz { padding: 0; align-items: stretch; }
  .viz__box, .viz[data-view="pick"] .viz__box { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }
  .viz__head h2 { font-size: 1.45rem; }
  .viz__actions .btn { flex: 1 1 auto; }
  .viz__range input { width: 130px; }
}
/* phones held sideways: photo on the left, controls on the right, everything in one screen */
@media (orientation: landscape) and (max-height: 540px) {
  .viz { padding: 0; align-items: stretch; }
  .viz__box, .viz[data-view="pick"] .viz__box { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 8px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
  .viz__head h2 { font-size: 1.3rem; }
  .viz__close { width: 44px; height: 40px; }
  .viz__door { margin: 0 0 6px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .viz[data-view="pick"] .viz__box { justify-content: flex-start; }
  .viz__fit { grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
  .viz__side { display: grid; gap: 8px; align-content: start; }
  .viz__help { font-size: .88rem; }
  .viz__controls { gap: 0 16px; }
  .viz__check, .viz__range { min-height: 40px; font-size: .92rem; }
  .viz__range input { width: 110px; }
  .viz__actions .btn { min-height: 44px; padding: 8px 14px; font-size: .95rem; }
  .viz__note { font-size: .82rem; }
  .viz__actions [data-viz-done] { display: none; } /* the close button at the top does the same, and space is tight */
}
/* desktop and tablets wide enough: controls beside a large photo */
@media (min-width: 1024px) and (min-height: 541px) {
  .viz__fit { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
  .viz__side { display: grid; gap: 14px; align-content: start; }
}