/* HOP — Progress photos (photos.js). Uses the app's colour variables, so light and dark both work. */
.ph-main{ gap:14px; padding-top:14px; }
.ph-lead{ margin:0; font-size:17px; line-height:1.45; color:var(--text-muted); }
.ph-fine{ margin:0; font-size:14px; line-height:1.45; color:var(--text-faint); text-align:center; }
.ph-test-note{ color:var(--warning); }
.ph-main .btn svg{ vertical-align:-5px; margin-right:4px; }
.ph-cam-btn{ background:var(--accent-500); color:#fff; border-color:transparent; }
.ph-cam-btn:active{ background:var(--accent-600); }

/* tabs */
.ph-tabs, .ph-mode{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:14px; border:1px solid var(--border); }
.ph-tab{ flex:1; border:0; background:transparent; color:var(--text-muted); font:inherit; font-weight:700; font-size:16px; padding:10px 6px; border-radius:10px; cursor:pointer; }
.ph-tab span{ display:inline-block; min-width:20px; padding:0 6px; margin-left:4px; border-radius:10px; background:var(--surface-3); color:var(--text-muted); font-size:13px; line-height:20px; }
.ph-tab.is-on{ background:var(--surface); color:var(--accent-600); box-shadow:var(--shadow-sm); }
.ph-tab.is-on span{ background:var(--accent-100); color:var(--accent-600); }

/* empty / message cards */
.ph-empty{ padding:22px 18px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.ph-empty h2{ margin:0; font-size:21px; }
.ph-empty p{ margin:0; color:var(--text-muted); font-size:16.5px; line-height:1.45; }
.ph-empty-guide{ width:96px; height:128px; margin:0 auto; background:#16233a; border-radius:12px; padding:4px; }

/* the guides drawn small (how-to page) */
.ph-guide{ display:block; }
.ph-guide-dark{ background:#16233a; border-radius:12px; width:100%; height:auto; }
.ph-figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ph-fig{ margin:0; text-align:center; }
.ph-fig figcaption{ margin-top:6px; font-weight:700; font-size:15px; color:var(--text-muted); }
.ph-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:phs; }
.ph-steps li{ counter-increment:phs; position:relative; padding:12px 14px 12px 52px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:3px; }
.ph-steps li::before{ content:counter(phs); position:absolute; left:14px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--accent-100); color:var(--accent-600); font-weight:800; display:flex; align-items:center; justify-content:center; }
.ph-steps b{ font-size:17px; }
.ph-steps span{ font-size:15.5px; line-height:1.4; color:var(--text-muted); }
.ph-note{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.ph-note label{ margin:0; }
.ph-note textarea{ width:100%; }

/* gallery */
.ph-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 12px; padding:4px 2px; }
.ph-polaroid{ display:block; padding:8px 8px 0; background:#fff; border:0; border-radius:6px; box-shadow:0 3px 12px rgba(16,26,44,.18); transform:rotate(var(--ph-tilt,0deg)); cursor:pointer; text-align:left; font:inherit; color:#14233b; min-width:0; }
.ph-polaroid:active{ transform:rotate(var(--ph-tilt,0deg)) scale(.98); }
.ph-pic{ display:block; position:relative; aspect-ratio:3/4; overflow:hidden; background:#dfe6ef; border-radius:2px; }
.ph-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph-pic.is-hidden img{ filter:blur(20px) saturate(.6); transform:scale(1.2); }
.ph-cap{ display:flex; flex-direction:column; gap:1px; padding:8px 2px 10px; min-height:52px; }
.ph-cap b{ font-size:15px; font-weight:700; }
.ph-cap i{ font-style:normal; font-size:13.5px; color:#5b6b84; }

/* one photo */
.ph-viewer{ background:#0b1220; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; width:100%; }
.ph-viewer img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-viewer-meta{ display:flex; justify-content:space-between; align-items:baseline; font-size:17px; }
.ph-viewer-meta span{ color:var(--text-muted); }
.ph-pager{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ph-pager .btn[disabled]{ opacity:.4; }
.ph-del{ color:var(--danger); }

/* compare */
.ph-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ph-pick label{ font-size:13px; margin:0; }
.ph-pick select{ display:block; width:100%; margin-top:4px; font:inherit; font-size:16px; padding:10px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); }
.ph-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.ph-chip{ border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:14.5px; font-weight:600; padding:8px 12px; border-radius:20px; cursor:pointer; }
.ph-chip:active{ background:var(--surface-2); }
.ph-side{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ph-side figure{ margin:0; min-width:0; }
.ph-frame{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#0b1220; border-radius:12px; }
.ph-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph-side figcaption{ display:flex; flex-direction:column; align-items:center; margin-top:6px; font-weight:700; font-size:15px; }
.ph-side figcaption i{ font-style:normal; font-weight:500; font-size:13.5px; color:var(--text-muted); }
.ph-slide{ display:flex; flex-direction:column; gap:10px; }
.ph-slide-frame{ touch-action:pan-y; }
.ph-slide-frame .ph-over{ clip-path:inset(0 calc(100% - var(--ph-cut,50%)) 0 0); }
.ph-handle{ position:absolute; top:0; bottom:0; left:var(--ph-cut,50%); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none; }
.ph-tag{ position:absolute; top:8px; padding:3px 8px; border-radius:10px; background:rgba(0,0,0,.55); color:#fff; font-size:13px; font-weight:700; pointer-events:none; }
.ph-tag-l{ left:8px; } .ph-tag-r{ right:8px; }
.ph-range{ width:100%; accent-color:var(--accent-500); height:32px; }
.ph-facts{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:16px; text-align:center; }
.ph-facts span{ color:var(--text-muted); font-size:15px; }

/* the camera layer */
body.ph-cam-open{ overflow:hidden; }
.ph-cam{ position:fixed; inset:0; z-index:80; background:#000; color:#fff; display:flex; flex-direction:column; --ph-chrome:236px; padding-bottom:env(safe-area-inset-bottom,0px); }
.ph-cam-top{ display:flex; align-items:center; justify-content:space-between; padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px; min-height:54px; }
.ph-cam-title{ font-weight:800; font-size:18px; letter-spacing:.02em; }
.ph-cam-x, .ph-cam-space{ width:42px; height:42px; }
.ph-cam-x{ border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ph-cam-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 8px; }
.ph-cam-frame{ position:relative; overflow:hidden; border-radius:14px; background:#111; aspect-ratio:3/4; width:min(100%, calc((100vh - var(--ph-chrome)) * .75)); width:min(100%, calc((100dvh - var(--ph-chrome)) * .75)); max-height:100%; }
.ph-cam-video, .ph-cam-shot, .ph-cam-ghost{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph-cam-video.is-mirror{ transform:scaleX(-1); }
.ph-cam-ghost{ opacity:.38; pointer-events:none; }
.ph-guide-full{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; pointer-events:none; }
.ph-cam-count{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:128px; font-weight:800; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6); background:rgba(0,0,0,.18); }
.ph-cam-notebar{ position:absolute; left:0; right:0; bottom:0; padding:6px 10px; font-size:13px; background:rgba(0,0,0,.5); text-align:center; }
.ph-cam-chips{ display:flex; gap:8px; justify-content:center; padding:10px 8px 4px; flex-wrap:wrap; }
.ph-cam-chip{ border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:14px; font-weight:600; padding:7px 13px; border-radius:20px; cursor:pointer; }
.ph-cam-chip.is-on{ background:#fff; color:#0a1f4f; border-color:#fff; }
.ph-cam-bar{ display:flex; align-items:center; justify-content:space-around; padding:8px 18px 14px; }
.ph-cam-side{ width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ph-cam-shutter{ width:76px; height:76px; border-radius:50%; border:4px solid #fff; background:transparent; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ph-cam-shutter span{ width:56px; height:56px; border-radius:50%; background:#fff; display:block; }
.ph-cam-shutter:active span{ background:#d6dde8; }
.ph-cam-review{ padding:12px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.ph-cam-date{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px; font-weight:600; color:#fff; margin:0; }
.ph-cam-date input{ font:inherit; font-size:16px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; color-scheme:dark; }
.ph-cam-btns{ display:flex; gap:10px; }
.ph-cam-btns .btn{ flex:1; }
.ph-cam-col{ flex-direction:column; }
.ph-cam-ok{ margin:0; text-align:center; font-weight:700; font-size:18px; }
.ph-cam .btn-secondary{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.ph-cam .btn-ghost{ color:#cfe6f7; }
.ph-cam-none{ display:flex; align-items:center; justify-content:center; background:#16233a; }
.ph-cam-msg{ position:absolute; left:14px; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; text-align:center; background:rgba(0,0,0,.6); padding:14px; border-radius:12px; }
.ph-cam-msg span{ font-size:14.5px; color:#d6e0ee; line-height:1.4; }

@media (max-height:640px){ .ph-cam{ --ph-chrome:200px; } .ph-cam-shutter{ width:64px; height:64px; } .ph-cam-shutter span{ width:46px; height:46px; } }
@media (prefers-reduced-motion: reduce){ .ph-polaroid{ transition:none; } }