/* Surfer photos under each spot page. Uses the site's retro tokens. */
#spot-photos{margin:28px 0 8px;padding:0 14px}
@media (min-width:1000px){#spot-photos{padding:0}}
#spot-photos:empty{display:none}
.ph-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ph-head h2{margin:0;font:400 26px var(--display);color:var(--navy)}
.ph-add,.ph-send{border:2px solid var(--navy);background:var(--orange);color:#fff;border-radius:6px;padding:9px 14px;font:800 14px var(--body);cursor:pointer;box-shadow:3px 3px 0 var(--navy)}
.ph-add:hover,.ph-send:hover{background:var(--rust)}
.ph-add:active,.ph-send:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.ph-send:disabled{opacity:.6;cursor:wait}
.ph-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:14px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x mandatory}
.ph-strip:has(.ph-empty){display:block}
.ph-empty{margin:0;padding:18px;border:2px dashed var(--line);border-radius:6px;background:var(--cream);font:600 15px var(--body);color:var(--muted);grid-column:1/-1}
.ph-card{margin:0;background:var(--paper);border:2px solid var(--navy);border-radius:6px;padding:8px 8px 10px;box-shadow:4px 4px 0 var(--navy);scroll-snap-align:start;transform:rotate(-.6deg)}
.ph-card:nth-child(even){transform:rotate(.6deg)}
.ph-card button{all:unset;cursor:pointer;display:block;width:100%}
.ph-card button:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
.ph-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;filter:sepia(.12) saturate(.95)}
.ph-card figcaption{margin-top:8px;font:600 13px var(--narrow);color:var(--ink);line-height:1.3}
.ph-card figcaption span{color:var(--muted)}
.ph-modal{border:2px solid var(--navy);border-radius:8px;background:var(--paper);color:var(--ink);padding:18px;max-width:min(92vw,560px);width:100%;box-shadow:6px 6px 0 var(--navy)}
.ph-modal::backdrop{background:rgba(31,48,68,.6)}
.ph-view{max-width:min(94vw,980px)}
.ph-x{position:absolute;top:6px;right:8px;border:0;background:transparent;font:800 26px var(--body);color:var(--navy);cursor:pointer;line-height:1}
.ph-big{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;border-radius:4px;background:var(--sand)}
.ph-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:10px}
.ph-meta b{display:block;font:400 20px var(--display);color:var(--navy)}
.ph-meta small{font:600 13px var(--narrow);color:var(--muted)}
.ph-report{border:0;background:none;font:700 13px var(--narrow);color:var(--muted);text-decoration:underline;cursor:pointer;white-space:nowrap}
.ph-form{display:flex;flex-direction:column;gap:12px}
.ph-form h2{margin:0 24px 0 0;font:400 26px var(--display);color:var(--navy)}
.ph-form label{display:flex;flex-direction:column;gap:5px;font:800 13px var(--body);color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.ph-form label em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.ph-form input:not([type=checkbox]):not([type=file]),.ph-form select{font:600 16px var(--body);padding:10px 12px;border:2px solid var(--navy);border-radius:6px;background:var(--cream);color:var(--ink);text-transform:none;letter-spacing:0}
.ph-drop{position:relative;align-items:center;justify-content:center;min-height:120px;border:2px dashed var(--navy);border-radius:6px;background:var(--cream);cursor:pointer;text-align:center;padding:12px}
.ph-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ph-drop span{font:700 15px var(--body);color:var(--teal);text-transform:none;letter-spacing:0}
.ph-drop img{max-width:100%;max-height:180px;border-radius:4px}
.ph-check{flex-direction:row!important;align-items:flex-start;gap:8px!important;font:600 14px var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important}
.ph-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--orange)}
.ph-note{margin:0;font:600 13px var(--narrow);color:var(--muted)}
.ph-msg{margin:0;font:700 14px var(--body);color:var(--rust)}
.ph-msg:empty{display:none}
@media (max-width:560px){.ph-strip{grid-auto-columns:72%}.ph-modal{padding:14px}}