/* Desktop composition only. Phone and tablet styles remain in app-shell.css. */
@media (min-width:1024px){
 :root{--desktop-rail:240px;--nav-space:0px}
 .app-shell{padding-left:var(--desktop-rail)}
 .desktop-nav{display:flex!important;position:fixed;inset:0 auto 0 0;z-index:65;width:var(--desktop-rail);height:100dvh;padding:28px 20px 22px;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-right:1px solid var(--line);color-scheme:light}
 .desktop-nav .wordmark{flex-shrink:0;font-size:20px;letter-spacing:-.8px;margin:0 0 35px;min-height:40px}
 .desktop-nav .brand-icon{width:24px;height:28px;margin-right:8px}
 .desktop-nav .brand-icon svg{width:24px;height:28px}
 .desktop-nav .wordmark sup{font-size:8px;letter-spacing:.6px}
 .desktop-links{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
 .desktop-nav .nav-button{width:100%;min-height:52px;margin:0;padding:14px 16px;gap:14px;flex-direction:row;justify-content:flex-start;border-radius:15px;color:var(--muted);font-size:14px;text-align:left}
 .desktop-nav .nav-button:hover,.desktop-journal:hover{background:var(--soft);color:var(--green)}
 .desktop-nav .nav-button.active{background:var(--soft);color:var(--green);font-weight:750}
 .desktop-nav .nav-button.active:after{display:none}
 .desktop-nav .nav-button.report svg{width:22px;height:22px;margin:0;padding:0;border-radius:0;background:none;color:var(--green)}
 .desktop-footer{margin-top:auto;padding-top:24px;flex-shrink:0}
 .desktop-journal{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border-radius:14px;color:var(--muted);font-size:13px;text-align:left}
 .desktop-journal.active{background:var(--soft);color:var(--green);font-weight:700}
 .desktop-journal svg{width:19px;height:19px}
 .desktop-nav .install-side{margin-top:14px;background:var(--soft);padding:16px;border-radius:19px}
 .desktop-nav .install-side h3{font-size:15px;line-height:1.4;margin-top:7px}
 .desktop-nav .install-side p{font-size:12px;line-height:1.5;margin:6px 0 10px}
 .desktop-nav .install-side .text-button{font-size:12px;min-height:36px;gap:8px}
 .bottom-nav{display:none}
 body[data-layout=page] .app-header,.app-header{display:none}
 .mobile-app{min-width:0;border-radius:0}
 #main{padding-top:0;padding-bottom:0}
 body[data-layout=page] #main{padding:32px 0}
 body[data-view=explore] #main{padding-bottom:0}
 .world-explore{height:100dvh}
 /* A portrait-sized story canvas gives photos the same focus as the pocket guide. */
 body[data-view=feed] .mobile-app{background:var(--paper)}
 body[data-view=feed] #main{padding:24px}
 .world-feed{width:100%;max-width:620px;height:calc(100dvh - 48px);margin:0 auto;border-radius:28px;overflow:hidden;isolation:isolate;box-shadow:0 12px 40px oklch(.2 .02 160 / .08)}
 .world-feed .feed-stack{border-radius:28px}
 .world-feed-head,.has-fullscreen-control .world-feed-head{padding-left:20px;padding-right:20px}
 .world-feed .world-story-copy{left:24px;right:70px;max-width:none;bottom:58px}
 .world-feed .world-feed-actions{right:18px;top:calc(var(--header-space) + 38px)}
 .world-feed .feed-controls{bottom:10px}
 .world-feed .world-story-copy h1{font-size:clamp(26px,2.4vw,34px)}
 body[data-view=feed] .feed-view{max-width:740px;margin:0 auto;height:calc(100dvh - 48px);padding:0 0 8px}
 body[data-view=feed] .fullscreen-control{color:var(--ink);background:var(--paper);border-color:var(--line);top:8px;right:8px}
 .desktop-extra{display:none!important}
 #toast{left:calc(var(--desktop-rail) + max(24px,(100vw - var(--desktop-rail) - 440px)/2));right:max(24px,(100vw - var(--desktop-rail) - 440px)/2);bottom:24px}
}
@media (min-width:1024px) and (max-width:1279px){
 #main>.classic-home{display:block;max-width:740px}
}
@media (min-width:1280px){
 body[data-view=feed] #main{padding-right:300px}
 body[data-view=feed] .desktop-extra{display:block!important;position:fixed;top:82px;right:28px;width:240px;max-height:calc(100dvh - 110px);overflow-y:auto;padding:0 0 16px;color:var(--ink);color-scheme:light}
 .desktop-extra .side-note{position:static}
 .desktop-extra .side-label{font-size:10px;letter-spacing:1.5px}
 .desktop-extra h2{font-size:19px;line-height:1.35;margin:14px 0}
 .desktop-extra p{font-size:13px;line-height:1.6;color:var(--muted)}
 .desktop-extra .guide-item{padding:20px 0}
 .desktop-extra .guide-item h3{font-size:13px}
 .desktop-extra .guide-item p{font-size:12px}
 .desktop-extra .relief-banner{padding:19px;display:block}
 .desktop-extra .relief-symbol{margin-bottom:13px}
 .desktop-extra .relief-banner strong{font-size:14px}
 .desktop-extra .relief-banner p{font-size:12px;color:var(--ink)}
 .desktop-extra .source-foot{text-align:left;font-size:11px}
}
@media (min-width:1024px) and (max-height:620px){
 .desktop-nav{padding-top:16px}.desktop-nav .wordmark{margin-bottom:14px}.desktop-links{gap:2px}.desktop-nav .nav-button{min-height:44px;padding-top:10px;padding-bottom:10px}.desktop-footer{padding-top:12px}
 .world-feed .world-feed-actions{flex-direction:row;left:20px;right:auto;top:68px;bottom:auto;gap:8px}
 .world-feed .world-story-copy{top:120px;bottom:46px;left:24px;right:24px;overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:12px;background:oklch(0 0 0 / .3)}
 .world-feed .world-story-copy h1{font-size:26px}
 .world-feed .feed-card>img{width:100%}
}