/* Custom Photo (/photo/) — editor card + explainer, on top of the site's styles.css. */
[hidden] { display:none !important; }
.ph-page { padding-bottom:56px; }
.ph-hero { padding:6px 0 22px; }
.ph-hero h1 { font-size:clamp(34px,5vw,56px); margin:8px 0 0; }
.ph-hero .lede { max-width:60ch; color:var(--ink-2); font-size:17px; margin:14px 0 0; }
.ph-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:34px; }
@media (min-width:960px) {
  .ph-layout { grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:56px; align-items:start; }
  .ph-app { position:sticky; top:20px; }
}

/* app card */
.ph-card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow:var(--shadow-sm); }
.ph-card + .ph-card { margin-top:12px; }
.ph-card h2 { font-size:24px; margin-bottom:8px; }
.ph-lead { margin:0 0 16px; color:var(--ink-2); }
.ph-code-row { display:flex; gap:8px; }
#code-input { flex:1; min-width:0; font:600 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; text-transform:uppercase;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
#code-input:focus { outline:none; border-color:var(--ink); }
.ph-btn { appearance:none; border:0; border-radius:12px; padding:12px 18px; font:600 16px var(--body); cursor:pointer;
  background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.ph-btn:disabled { opacity:.5; cursor:default; }
.ph-btn-red { background:var(--red); }
.ph-btn-red:hover { background:var(--red-dark); }
.ph-btn-ghost { background:#f1eee6; color:var(--ink); }
.ph-wide { width:100%; margin-top:14px; padding:15px; font-size:17px; }
.ph-link { appearance:none; border:0; background:none; color:var(--red); font:inherit; cursor:pointer; padding:0; margin-left:auto; }
.ph-error { color:var(--red); margin:10px 0 0; font-size:15px; }
.ph-muted { color:var(--muted); font-size:14px; }
.ph-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ph-device { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.ph-device #device-name { font-weight:700; }
.ph-stage-wrap { display:flex; justify-content:center; padding:22px 0 8px; background:radial-gradient(circle at 50% 45%,#2a2d33,#111316 70%); border-radius:14px; }
.ph-stage { position:relative; width:min(68vw,320px); aspect-ratio:1; border-radius:50%; overflow:hidden; background:#000;
  box-shadow:0 0 0 10px #1b1d21,0 0 0 12px #3b4046,0 16px 40px rgba(0,0,0,.5); margin-bottom:22px; touch-action:none; }
.ph-stage.rect { border-radius:18%; }
.ph-stage canvas { width:100%; height:100%; display:block; cursor:grab; }
.ph-pick-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#e9ebee; font-weight:600; cursor:pointer; background:rgba(0,0,0,.35); }
.ph-pick-btn { width:76px; height:76px; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.ph-pick-icon { width:38px; height:38px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ph-pick-text { font-size:17px; margin-top:6px; }
.ph-pick-sub { font-size:13px; font-weight:500; color:#c9ced4; }
.ph-keep { margin:0 0 14px; padding:12px 14px; border-left:4px solid var(--red); background:#fff3ea; border-radius:10px; font-size:15px; line-height:1.45; }
.ph-hint { text-align:center; margin:10px 0 0; color:var(--muted); font-size:14px; }
.ph-controls { margin-top:10px; }
.ph-controls > label { display:flex; align-items:center; gap:12px; font-size:15px; margin:10px 0; }
.ph-controls input[type=range] { flex:1; accent-color:var(--red); }
.ph-row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ph-row .ph-btn { flex:1; }
.ph-privacy { margin:16px 0 0; font-size:13px; color:var(--muted); }
.ph-steps { list-style:none; padding:0; margin:14px 0; }
.ph-steps li { position:relative; padding:9px 0 9px 34px; color:var(--muted); }
.ph-steps li::before { content:""; position:absolute; left:4px; top:12px; width:16px; height:16px; border-radius:50%; border:2px solid var(--line); }
.ph-steps li.active { color:var(--ink); font-weight:600; }
.ph-steps li.active::before { border-color:var(--red); border-top-color:transparent; animation:ph-spin 1s linear infinite; }
.ph-steps li.done { color:var(--ink); }
.ph-steps li.done::before { background:var(--green); border-color:var(--green); }
.ph-steps li.done::after { content:""; position:absolute; left:10px; top:15px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
@keyframes ph-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .ph-steps li.active::before { animation:none; } }

/* explainer */
.ph-info h2 { font-size:26px; margin:0 0 14px; }
.ph-info > h2:not(:first-child) { margin-top:38px; }
.ph-how { list-style:none; counter-reset:ph; padding:0; margin:0; display:grid; gap:14px; }
.ph-how li { counter-increment:ph; position:relative; padding:2px 0 0 46px; color:var(--ink-2); font-size:15.5px; }
.ph-how li::before { content:counter(ph); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:#fff; font:700 15px/32px var(--display); text-align:center; }
.ph-how b { color:var(--ink); display:block; font-size:16px; }
.ph-privacy-card { margin-top:38px; background:var(--ink); color:#e9ebee; border-radius:18px; padding:24px 22px; }
.ph-privacy-card h2 { color:#fff; }
.ph-privacy-card ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ph-privacy-card li { position:relative; padding-left:30px; font-size:15px; color:#b9bec5; }
.ph-privacy-card li::before { content:""; position:absolute; left:2px; top:5px; width:16px; height:16px; border-radius:50%; background:var(--green); }
.ph-privacy-card li::after { content:""; position:absolute; left:8px; top:8px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ph-privacy-card b { color:#fff; }
.ph-privacy-more { margin:16px 0 0; font-size:14px; color:#9aa0a7; }
.ph-privacy-more a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ph-needs { margin:0; padding-left:20px; color:var(--ink-2); font-size:15.5px; display:grid; gap:6px; }
.ph-faq { border-top:1px solid var(--line); padding:12px 0; }
.ph-faq:last-child { border-bottom:1px solid var(--line); }
.ph-faq summary { cursor:pointer; font-weight:600; list-style:none; position:relative; padding-right:26px; }
.ph-faq summary::-webkit-details-marker { display:none; }
.ph-faq summary::after { content:"+"; position:absolute; right:4px; top:-2px; font:400 22px var(--display); color:var(--red); }
.ph-faq[open] summary::after { content:"−"; }
.ph-faq p { margin:8px 0 0; color:var(--ink-2); font-size:15px; }

/* Delivery progress: time-based while the watch has not checked in, part-based while it downloads */
.ph-eta { margin:4px 0 14px; }
.ph-eta-bar { height:8px; border-radius:4px; background:#ece7df; overflow:hidden; }
.ph-eta-bar span { display:block; height:100%; width:0; background:var(--red); border-radius:4px; transition:width .9s ease; }
.ph-eta p { margin:7px 0 0; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ph-eta.done .ph-eta-bar span { background:#2e9d5b; }

.ph-presets { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.ph-presets button { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:7px 13px; font-size:14px; font-weight:600; cursor:pointer; }
.ph-presets button.on { background:var(--ink); color:#fff; border-color:var(--ink); }