/* The photograph uses the space left after the controls, never a minimum viewport height. */
body #lightbox{inset:0;width:100%;height:100dvh;max-height:100dvh;overflow:hidden}
body #lightbox .viewer-layout:not(.comments-open){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 48px auto;height:100%;min-height:0;overflow:hidden;padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left))}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-header{position:static;height:52px;min-height:0}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-stage{grid-column:1;grid-row:2;display:flex;min-height:0;min-width:0;height:100%;overflow:hidden;padding:8px 0}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-stage>img{width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain}
body #lightbox .viewer-layout:not(.comments-open)>.viewer-filmstrip{grid-column:1;grid-row:3;height:48px;min-height:0;max-height:48px;margin:0;padding:4px 2px;overflow-x:auto;overflow-y:hidden;scroll-padding:4px}
body #lightbox .viewer-thumb{height:38px;min-height:0;width:58px;flex-basis:58px}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-footer{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(180px,1fr) minmax(480px,1.6fr);align-items:center;gap:12px;margin:0;padding:10px 0;min-height:0;max-height:none;overflow:visible}
body #lightbox .lightbox-footer h2{font-size:clamp(21px,2vw,29px);line-height:1.15}
body #lightbox .lightbox-footer #lightbox-category{font-size:10px;line-height:1.4;margin-top:4px}
body #lightbox .viewer-owner-tools{gap:6px;margin-top:6px;padding-top:6px}
body #lightbox .viewer-owner-tools>button{min-height:36px;padding:6px 10px;font-size:11px}
body #lightbox .lightbox-bottom-right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:8px 12px;padding:0;border:0;border-radius:0;background:transparent;max-width:none}
body #lightbox .viewer-playback-controls{grid-column:1;grid-row:1;flex-wrap:nowrap;justify-content:flex-start;gap:8px;min-width:0}
body #lightbox #lightbox-count{flex:0 0 auto;width:auto;text-align:start;font-size:10px}
body #lightbox .lightbox-playback{min-width:86px;width:auto;height:40px;min-height:40px;padding:7px 10px;font-size:12px;gap:6px}
body #lightbox .slideshow-speed--viewer select{width:76px;min-height:40px;height:40px;padding:6px;font-size:12px}
body #lightbox .viewer-reaction-controls{grid-column:1;grid-row:2;display:flex;gap:6px;align-items:center;justify-content:flex-start}
body #lightbox .lightbox-reactions{display:contents}
body #lightbox .lightbox-reactions>span{flex:1 1 0;min-width:0}
body #lightbox .viewer-reaction-controls .favorite-photo{flex:0 0 40px;width:40px;min-width:40px;min-height:40px;height:40px;padding:6px;grid-area:auto}
body #lightbox .favorite-photo .control-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body #lightbox :is(.photo-like-button,.photo-comment-button){width:100%;min-width:0;min-height:40px;height:40px;padding:6px 9px;gap:5px;font-size:12px;flex-wrap:nowrap}
body #lightbox .photo-purchase-actions{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;padding:0;border:0}
body #lightbox .photo-purchase-actions>a{min-height:40px;padding:7px 10px;font-size:12px;line-height:1.2}
body #lightbox .studio-lightbox-story{margin-top:5px;font-size:11px}
body #lightbox .studio-lightbox-story[open],body #lightbox .studio-share-panel:not([hidden]){position:absolute;z-index:10;inset:auto 18px 14px;max-height:45dvh;overflow:auto;padding:14px;background:var(--warm-dark,#242018);border:1px solid #a8927470;border-radius:10px;box-shadow:0 6px 32px #0005}

@media(max-width:1000px){
 body #lightbox .viewer-layout:not(.comments-open)>.lightbox-footer{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 0}
 body #lightbox .viewer-photo-info{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 12px;align-items:center}
 body #lightbox .viewer-photo-info>h2{grid-column:1;grid-row:1}
 body #lightbox .viewer-photo-info>#lightbox-category{grid-column:1;grid-row:2}
 body #lightbox .viewer-owner-tools{grid-column:1;grid-row:4;flex-wrap:wrap;margin:0;padding:0;border:0}
 body #lightbox .studio-lightbox-story{grid-column:1;grid-row:3}
 body #lightbox .lightbox-bottom-right{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto}
 body #lightbox .viewer-playback-controls{grid-column:1;grid-row:1}
 body #lightbox .viewer-reaction-controls{grid-column:2;grid-row:1}
 body #lightbox .photo-purchase-actions{grid-column:3;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Compact chrome gives the photograph the largest remaining area. */
body #lightbox .viewer-layout:not(.comments-open){grid-template-rows:44px minmax(0,1fr) 34px auto;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-header{height:44px;gap:8px}
body #lightbox .lightbox-header-actions :is(button,a){height:36px;min-height:36px;font-size:10px;padding-block:5px}
body #lightbox .lightbox-header>#photo-share{flex:0 0 auto;height:36px;min-height:36px;padding:5px 12px;font-size:10px;white-space:nowrap}
body #lightbox .lightbox-header>.lightbox-brand{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #lightbox .fullscreen-button{flex:0 0 auto;width:auto;min-width:44px;padding-inline:10px;gap:6px;white-space:nowrap}
body #lightbox #fullscreen-label{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:nowrap;font:11px/1.2 var(--sans);flex:0 0 auto}
body #lightbox .fullscreen-button>span:last-child{flex:0 0 auto;font-size:18px;line-height:1}
body #lightbox .lightbox-header .close{width:36px;height:36px;font-size:24px!important}
body #lightbox .lightbox-brand{font-size:10px}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-stage{padding:3px 0}
body #lightbox .viewer-layout:not(.comments-open)>.viewer-filmstrip{height:34px;max-height:34px;padding:2px 0;border-top:0;gap:5px}
body #lightbox .viewer-thumb{height:28px;width:42px;flex-basis:42px;padding:2px;border-radius:4px}
body #lightbox .viewer-layout:not(.comments-open)>.lightbox-footer{padding:6px 0;gap:8px}
body #lightbox .lightbox-footer h2{font-size:20px;line-height:1.1}
body #lightbox .lightbox-footer #lightbox-category{font-size:9px;line-height:1.3;margin-top:3px}
body #lightbox .viewer-owner-tools{width:100%;justify-content:space-between;margin-top:4px;padding-top:4px;gap:5px}
body #lightbox .viewer-owner-tools .photo-editor-inline{order:-2}
body #lightbox .viewer-owner-tools>button{min-height:30px;padding:4px 8px;font-size:10px}
body #lightbox .studio-lightbox-story{font-size:10px;line-height:1.2;margin-top:3px}
body #lightbox .lightbox-bottom-right{gap:6px 10px}
body #lightbox .lightbox-playback{height:34px;min-height:34px;min-width:72px;padding:5px 8px;font-size:11px}
body #lightbox .slideshow-speed--viewer select{width:66px;height:34px;min-height:34px;font-size:11px}
body #lightbox .viewer-reaction-controls .favorite-photo{height:34px;min-height:34px;min-width:34px;width:34px;flex-basis:34px}
body #lightbox :is(.photo-like-button,.photo-comment-button){height:34px;min-height:34px;padding:5px 8px;font-size:11px}
body #lightbox .photo-purchase-actions{gap:6px}
body #lightbox .photo-purchase-actions>a{min-height:34px;padding:5px 8px;font-size:11px}
@media(min-width:1100px){
 body #lightbox .viewer-layout:not(.comments-open)>.lightbox-footer{grid-template-columns:minmax(180px,1fr) minmax(0,3fr);align-items:center}
 body #lightbox .lightbox-bottom-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:12px}
 body #lightbox .viewer-playback-controls{width:auto;flex:0 0 auto;gap:6px}
 body #lightbox .viewer-reaction-controls{width:auto;flex:0 1 auto;gap:5px}
 body #lightbox .lightbox-reactions>span{flex:0 1 auto}
 body #lightbox .photo-purchase-actions{display:flex;flex-direction:row;flex:0 1 auto;gap:6px;width:auto}
 body #lightbox .photo-purchase-actions>a{white-space:nowrap}
}
@media(max-width:700px){
 body #lightbox .lightbox-brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body #lightbox .lightbox-header-actions :is(button,a){height:40px;min-height:40px}
 body #lightbox .lightbox-header>#photo-share{height:40px;min-height:40px}
 body #lightbox .viewer-owner-tools>button{min-height:36px}
 body #lightbox .lightbox-bottom-right{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 40px;gap:5px 7px}
 body #lightbox .viewer-playback-controls{grid-column:1;grid-row:1;justify-content:flex-start;gap:4px}
 body #lightbox .viewer-reaction-controls{grid-column:2;grid-row:1;justify-content:flex-end;width:auto;gap:4px}
 body #lightbox .lightbox-reactions>span{flex:0 0 auto}
 body #lightbox .viewer-reaction-controls .favorite-photo{width:40px;min-width:40px;height:40px;min-height:40px;flex-basis:40px}
 body #lightbox :is(.photo-like-button,.photo-comment-button){min-width:44px;width:auto;height:40px;min-height:40px;padding:5px 6px;gap:3px}
 body #lightbox :is(.photo-like-label,.photo-comment-label){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body #lightbox .lightbox-playback{height:40px;min-height:40px;min-width:66px;padding:5px 6px;font-size:11px}
 body #lightbox .slideshow-speed--viewer select{width:62px;height:40px;min-height:40px;font-size:16px}
 body #lightbox .photo-purchase-actions{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}
 body #lightbox .photo-purchase-actions>a{min-height:40px;font-size:11px}
}
@media(max-width:360px){body #lightbox .lightbox-playback{min-width:40px;width:40px}body #lightbox .lightbox-playback .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(orientation:landscape) and (max-height:600px){
 body #lightbox .viewer-layout:not(.comments-open){grid-template-columns:minmax(0,1fr) clamp(210px,27vw,260px);grid-template-rows:40px minmax(0,1fr) 32px;column-gap:8px}
 body #lightbox .viewer-layout:not(.comments-open)>.lightbox-header{height:40px}
 body #lightbox .viewer-layout:not(.comments-open)>.viewer-filmstrip{height:32px;max-height:32px}
 body #lightbox .lightbox-bottom-right{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px}
 body #lightbox .viewer-playback-controls{grid-column:1;grid-row:1;justify-content:center}
 body #lightbox .viewer-reaction-controls{grid-column:1;grid-row:2;justify-content:center;width:100%}
 body #lightbox .lightbox-reactions>span{flex:1 1 0}
 body #lightbox .photo-purchase-actions{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 body #lightbox .photo-purchase-actions>a{white-space:normal;font-size:10px}
}
/* Short landscape screens put all controls beside the image. */
@media(orientation:landscape) and (max-height:600px){
 body #lightbox .viewer-layout:not(.comments-open){grid-template-columns:minmax(0,1fr) clamp(210px,27vw,260px);grid-template-rows:40px minmax(0,1fr) 32px;column-gap:8px;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
 body #lightbox .viewer-layout:not(.comments-open)>.lightbox-header{grid-column:1/-1;height:40px}
 body #lightbox .viewer-layout:not(.comments-open)>.viewer-filmstrip{grid-column:1;grid-row:3;height:32px;max-height:32px;padding:2px}
 body #lightbox .viewer-layout:not(.comments-open)>.lightbox-footer{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;margin:0;padding:4px 0;border:0;overflow:hidden}
 body #lightbox .viewer-photo-info{display:flex;gap:0}
 body #lightbox .lightbox-footer h2{font-size:21px}
 body #lightbox .studio-lightbox-story{display:none}
 body #lightbox .viewer-owner-tools{margin-top:4px;gap:4px}
 body #lightbox .viewer-owner-tools>button{min-height:32px;padding:4px 7px;font-size:10px}
 body #lightbox .lightbox-bottom-right{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:6px}
 body #lightbox .viewer-playback-controls{grid-column:1;grid-row:1;justify-content:center;gap:6px}
 body #lightbox .viewer-reaction-controls{grid-column:1;grid-row:2}
 body #lightbox .photo-purchase-actions{grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 body #lightbox .photo-purchase-actions>a{font-size:11px}
}