/* A quiet gallery shared by city photos and observations. */
:is(#photo-dialog,#nature-dialog)::backdrop{background:#071720dc;backdrop-filter:blur(8px)}
.media-visual{min-width:0;background:#122630;display:flex;flex-direction:column}
.media-header{gap:24px}.media-header>div:first-child{flex:1}.media-header>.media-viewbar{display:flex;align-items:center;width:auto;flex-shrink:0;padding:0;color:var(--ink)}
.media-view-label{display:none}
.media-depth-options{display:flex;gap:3px;padding:4px;border:1px solid #dce5e9;border-radius:12px;background:#f0f4f6}
.media-depth-options button{font:inherit;font-size:14px;white-space:nowrap;min-height:38px;padding:8px 14px;border:0;border-radius:8px;color:#435e6b;background:transparent;cursor:pointer;transition:background .18s,color .18s}
.media-depth-options button:hover{background:#e0e9ed;color:var(--ink)}
.media-depth-options button[aria-pressed=true]{background:#e8f49b;color:#142b36;box-shadow:0 2px 8px #0002}
.media-depth-options button:disabled{opacity:.45;cursor:wait}
.media-depth-options button:focus-visible{outline:2px solid #28667c;outline-offset:2px}
.media-dialog .photo-stage,.media-dialog .photo-stage:has(img[hidden]),#nature-dialog .photo-stage:has(img[hidden]){height:clamp(260px,calc(100dvh - 278px),740px);min-height:0;background:radial-gradient(ellipse at 50% 40%,#35505c 0,#1f3844 46%,#122630 100%)}
.media-dialog :is(#city-photo,#city-nature){padding:clamp(16px,2.2vw,28px);filter:drop-shadow(0 20px 22px #0007)}
.media-dialog :is(#city-photo,#city-nature)[hidden],.photo-depth-view[hidden]{display:none}
.photo-depth-view{position:absolute;inset:0;width:100%;height:100%;outline:0;touch-action:none;cursor:grab;filter:drop-shadow(0 20px 22px #0007)}
.photo-depth-view:active{cursor:grabbing}
.photo-depth-view:focus-visible{outline:2px solid #e8f49b;outline-offset:-6px}
.media-dialog .photo-depth-status{font-size:12px;line-height:1.5;min-height:42px;margin:0;padding:12px 22px;color:#c2d4dc;text-align:center;background:#122630}
.photo-depth-status[data-state=ready]::before{content:'↔';display:inline-block;margin-right:8px;color:#e8f49b;font-size:16px;line-height:12px}
.photo-depth-status[data-state=loading]::before{content:'';display:inline-block;margin-right:8px;width:7px;height:7px;border-radius:50%;background:#e8f49b;animation:photo-breathe 1.5s ease-in-out infinite}
.media-info{max-height:clamp(375px,calc(100dvh - 220px),795px)}
.media-depth-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.65}
.media-depth-note summary{cursor:pointer;font-weight:600;min-height:30px;color:var(--ink)}
.media-dialog .media-depth-note p{font-size:12px;margin:10px 0}
.media-dialog.media-expanded .photo-stage{height:clamp(260px,calc(100dvh - 330px),790px);background:#172f3a}
.media-dialog.media-expanded :is(#city-photo,#city-nature){padding:0;filter:none}
@keyframes photo-breathe{50%{opacity:.3}}
@media(max-width:800px){
 .media-dialog .photo-stage,.media-dialog .photo-stage:has(img[hidden]),#nature-dialog .photo-stage:has(img[hidden]){height:46dvh;min-height:245px}
 .media-info{max-height:none}
 .media-header{flex-wrap:wrap;gap:14px}.media-header>div:first-child{flex-basis:100%}.media-header>.media-viewbar{width:100%;padding:0}.media-header .media-depth-options{width:100%}.media-header .media-depth-options button{flex:1}
 .media-dialog :is(#city-photo,#city-nature){padding:24px}
 .media-depth-options button{min-height:42px}
 .media-dialog.media-expanded .photo-stage{height:calc(100dvh - 325px);min-height:240px}
}
@media(max-width:540px){
 .media-header>.media-viewbar{width:calc(100% + 48px);margin-right:-48px}.media-header{padding-bottom:12px;gap:12px}
 .media-view-label{display:none}
 .media-depth-options{width:100%}
 .media-depth-options button{flex:1;padding:8px 10px;font-size:14px}
 .media-dialog .photo-depth-status{padding:10px 16px;min-height:52px;font-size:12px}
 .media-dialog .photo-stage,.media-dialog .photo-stage:has(img[hidden]),#nature-dialog .photo-stage:has(img[hidden]){height:42dvh;min-height:230px}
 .media-dialog :is(#city-photo,#city-nature){padding:20px}
 .media-dialog.media-expanded :is(#city-photo,#city-nature){padding:0}
 .media-dialog.media-expanded .photo-stage{height:calc(100dvh - 345px);min-height:200px}
}
@media(max-height:620px) and (min-width:801px){
 .media-header>.media-viewbar{padding:0}
 .media-dialog .photo-stage,.media-dialog .photo-stage:has(img[hidden]),#nature-dialog .photo-stage:has(img[hidden]){height:calc(100dvh - 225px);min-height:150px}
 .media-info{max-height:calc(100dvh - 175px)}
}