/* In the photo: the design drawn into a site photo, with before and after (photo-view.js). */
.pv-backdrop{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(13,28,40,.6);font-family:var(--font)}
.pv-backdrop.show{display:flex}
.pv-sheet{width:min(1400px,100%);height:min(980px,calc(100dvh - 36px));display:flex;flex-direction:column;background:#fff;border-radius:var(--ev-radius-lg);box-shadow:0 24px 70px #0b1d2c59;overflow:hidden;color:var(--ink)}
.pv-head{display:flex;align-items:flex-start;gap:12px;padding:16px 20px 14px;background:var(--ev-navy);color:#fff}
.pv-head>div{flex:1;min-width:0}
.pv-head h2{margin:0;font-size:var(--text-xl);font-weight:700;letter-spacing:-.01em}
.pv-head p{margin:4px 0 0;max-width:86ch;font-size:var(--text-ui);line-height:1.5;color:var(--ev-on-navy)}
.pv-x{flex:none;width:var(--btn-h);height:var(--btn-h);display:grid;place-items:center;border:0;border-radius:var(--btn-r);background:#ffffff14;color:#fff;cursor:pointer}
.pv-x:hover{background:#ffffff26}
.pv-x svg{width:18px;height:18px}
.pv-stage{position:relative;flex:1;min-height:0;background:var(--ev-navy-2);touch-action:none;user-select:none;-webkit-user-select:none}
.pv-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv-split{position:absolute;width:44px;margin-left:-22px;cursor:ew-resize;display:flex;justify-content:center;outline:none}
.pv-split::before{content:"";width:3px;height:100%;background:#fff;box-shadow:0 0 0 1px #0b1d2c40,0 2px 10px #0b1d2c66}
.pv-split span{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#fff;box-shadow:0 2px 12px #0b1d2c59}
.pv-split span::before,.pv-split span::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.pv-split span::before{left:5px;border-right-color:var(--ev-navy)}
.pv-split span::after{right:5px;border-left-color:var(--ev-navy)}
.pv-split:focus-visible span{box-shadow:0 0 0 3px var(--ev-sky),0 2px 12px #0b1d2c59}
.pv-tag{position:absolute;padding:5px 12px;border-radius:999px;background:rgba(18,43,62,.86);color:#fff;font-size:var(--text-xs);font-weight:700;pointer-events:none}
.pv-load,.pv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;color:#fff;font-size:var(--text-sm);text-align:center}
.pv-load[hidden],.pv-empty[hidden]{display:none}
.pv-empty>div{max-width:52ch;display:grid;gap:16px;justify-items:center}
.pv-empty p{margin:0;line-height:1.6;color:var(--ev-on-navy)}
.pv-empty b{color:#fff}
.pv-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #ffffff40;border-top-color:#fff;animation:pv-spin .8s linear infinite}
@keyframes pv-spin{to{transform:rotate(360deg)}}
.pv-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.pv-seg{display:inline-flex;padding:3px;border-radius:var(--btn-r);background:var(--panel);border:1px solid var(--line2)}
.pv-seg button{min-height:calc(var(--btn-h) - 8px);padding:0 14px;border:0;border-radius:6px;background:transparent;color:var(--dim);font:650 var(--btn-fs) var(--font);cursor:pointer}
.pv-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #10283c26}
.pv-seg button:disabled{opacity:.5;cursor:default}
.pv-ground{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);font-weight:650;color:var(--dim)}
.pv-ground[hidden]{display:none}
.pv-ground select{min-height:var(--btn-h-sm);padding:0 8px;border:1px solid var(--field-border);border-radius:var(--btn-r);background:#fff;color:var(--field-ink);font:500 var(--text-ui) var(--font)}
.pv-msg{flex:1 1 220px;min-width:0;font-size:var(--text-xs);line-height:1.5;color:var(--dim)}
.pv-msg.warn{color:var(--ev-warn)}
.pv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.pv-acts .ev-btn,.pv-empty .ev-btn{min-height:var(--btn-h);padding:0 16px;gap:8px;border-radius:var(--btn-r);font-size:var(--btn-fs);font-weight:650;cursor:pointer}
.pv-acts .ev-btn svg{width:17px;height:17px}
.pv-acts .ev-btn:disabled{opacity:.5;cursor:default}
/* Photo positions (photo-pins.js): the photo's line in the Plans list, the bar while a pin is dropped, the plan chooser */
.pp-line{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.pp-line small{min-width:0;color:var(--dim)}
.pp-acts{display:flex;flex:none;gap:6px}
.pp-bar{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:290;transform:translateX(-50%);display:flex;align-items:center;flex-wrap:wrap;gap:10px;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:var(--ev-radius-lg);background:var(--ev-navy);color:#fff;box-shadow:0 12px 36px #0b1d2c59;font:500 var(--text-ui) var(--font)}
.pp-bar[hidden]{display:none}
.pp-bar span{flex:1 1 auto;min-width:0;line-height:1.4}
.pp-btn{min-height:var(--btn-h-sm);padding:0 14px;border:1px solid #ffffff40;border-radius:var(--btn-r);background:transparent;color:#fff;font:650 var(--btn-fs) var(--font);cursor:pointer}
.pp-btn:hover{background:#ffffff1a}
.pp-pick{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(13,28,40,.6);font-family:var(--font)}
.pp-pick[hidden]{display:none}
.pp-pick-card{width:min(460px,100%);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--ev-radius-lg);background:#fff;color:var(--ink);box-shadow:0 24px 70px #0b1d2c59}
.pp-pick-card h2{margin:0;font-size:var(--text-xl);font-weight:700}
.pp-pick-card p{margin:0;font-size:var(--text-ui);color:var(--dim)}
.pp-pick-list{display:grid;gap:8px;overflow:auto}
.pp-plan{display:flex;align-items:center;gap:12px;min-height:var(--btn-h);padding:8px 10px;border:1px solid var(--line2);border-radius:var(--btn-r);background:#fff;color:var(--ink);font:600 var(--text-ui) var(--font);text-align:left;cursor:pointer}
.pp-plan:hover{border-color:var(--accent)}
.pp-plan img{width:56px;height:40px;flex:none;object-fit:cover;border-radius:5px}
.pp-pick-card .pp-btn{align-self:flex-end;border-color:var(--line2);color:var(--ink)}
.pp-pick-card .pp-btn:hover{background:var(--panel)}
@media (max-width:1100px){
 .pv-backdrop{padding:10px}
 .pv-sheet{height:calc(100dvh - 20px)}
}
@media (max-width:700px){
 .pv-backdrop{padding:0}
 .pv-sheet{height:100dvh;border-radius:0}
 .pv-head{padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
 .pv-head p{font-size:var(--text-xs)}
 .pv-bar{padding-left:16px;padding-right:16px}
 .pv-seg{flex:1 1 100%}
 .pv-seg button{flex:1}
 .pv-msg{flex-basis:100%;order:3}
 .pv-acts{order:4;flex:1 1 100%;margin-left:0}
 .pv-acts .ev-btn{flex:1 1 auto;justify-content:center}
 .pp-bar{left:16px;right:16px;transform:none;max-width:none}
 .pp-pick{padding:0;align-items:flex-end}
 .pp-pick-card{border-radius:var(--ev-radius-lg) var(--ev-radius-lg) 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}