/* Page-matched viewport backgrounds and translucent app chrome. */
:root{--page-background:var(--paper);--bar-surface:oklch(.985 .009 127 / .86);--bar-ink:var(--ink);--bar-muted:oklch(.47 .028 170);--bar-active:oklch(.38 .06 173);--bar-line:oklch(.91 .014 155 / .65);--content-gutter:24px;--chrome:rgba(3,7,7,.82);--chrome-line:rgba(238,246,234,.11);--chrome-text:#eef3e9;--chrome-accent:#dceb94;--header-space:calc(70px + env(safe-area-inset-top,0px));--nav-space:calc(76px + env(safe-area-inset-bottom,0px))}
html{height:100%;background:var(--page-background);overscroll-behavior:none}
body{height:100%;height:100dvh;overflow:hidden;background:var(--page-background);overscroll-behavior:none}
.app-shell{width:100%;max-width:none;height:100%;margin:0;padding:0;box-shadow:none}
.mobile-app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;max-width:none;padding:0;background:var(--paper)}
#main{position:relative;flex:1;min-height:0;width:100%;overflow-y:auto;overflow-x:hidden;padding:var(--header-space) 0 var(--nav-space);scroll-padding-top:18px;scroll-padding-bottom:calc(var(--nav-space) + 18px);overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#main:focus{outline:none}
#main>.view{width:100%;max-width:760px;margin:0 auto;min-height:calc(100dvh - var(--header-space) - var(--nav-space))}
.app-header{position:absolute;inset:0 0 auto;z-index:45;height:var(--header-space);min-height:0;padding:calc(12px + env(safe-area-inset-top,0px)) 21px 11px;background:var(--bar-surface);border-bottom:0;backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%);color:var(--bar-ink)}
.bottom-nav{width:100%;max-width:none;left:0;right:0;transform:none;z-index:60;min-height:var(--nav-space);padding:8px max(12px,calc((100% - 560px)/2)) calc(8px + env(safe-area-inset-bottom,0px));background:var(--bar-surface);border-color:var(--bar-line);--muted:var(--bar-muted);--green:var(--bar-active);--lime:oklch(.91 .17 119);color:var(--bar-ink);backdrop-filter:blur(20px) saturate(115%);-webkit-backdrop-filter:blur(20px) saturate(115%)}
.fullscreen-control{position:fixed;z-index:70;top:calc(13px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:39px;height:39px;min-height:39px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink)}
body[data-chrome=dark] .fullscreen-control{border-color:var(--chrome-line);background:oklch(0 0 0 / .42);color:var(--chrome-text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fullscreen-control svg{width:18px;height:18px}
.has-fullscreen-control .app-header{padding-right:62px}
body[data-view=explore] #main,body[data-view=feed] #main{padding-top:0;padding-bottom:var(--nav-space)}
.world-explore{min-height:calc(100dvh - var(--nav-space))}
.world-top,.is-following .world-top{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:11px;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.has-fullscreen-control .world-topline{padding-right:39px}
.world-topline .icon-button{background:rgba(240,250,230,.025);border:1px solid rgba(240,250,230,.055)}
.earth-stage{height:clamp(280px,calc(100dvh - 420px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),580px)}
.is-following:not(.is-map) .earth-stage{height:clamp(280px,calc(100dvh - 406px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),580px)}
.world-explore.is-map .earth-stage{height:clamp(280px,calc(100dvh - 420px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),580px)}
.world-bottom-sheet,.is-following .world-bottom-sheet{border-top:1px solid rgba(255,255,255,.7)}
.world-feed{height:calc(100dvh - var(--nav-space));min-height:0}
.world-feed .feed-stack,.world-feed .feed-card{height:100%;min-height:0}
.world-feed-head{top:0;left:0;right:0;min-height:var(--header-space);padding:calc(12px + env(safe-area-inset-top,0px)) 17px 10px;align-items:center;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.world-feed-head>button:first-child{max-width:calc(100% - 50px);color:var(--chrome-text);background:transparent;padding-left:0;font-size:13px}
.has-fullscreen-control .world-feed-head{padding-right:60px}
.world-feed-head .icon-button{background:rgba(236,246,220,.06);border:1px solid var(--chrome-line)}
.feed-clear-context{top:calc(var(--header-space) + 7px)}
.world-feed-actions{top:calc(var(--header-space) + 46px)}
body[data-view=feed] .feed-view{height:calc(100dvh - var(--nav-space));min-height:0;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:8px}
.has-fullscreen-control .feed-view .feed-head{padding-right:43px}
.world-story-copy{bottom:42px}
.world-story-copy h1{font-size:clamp(26px,7.5vw,38px)}
dialog#sheet{max-height:calc(100dvh - env(safe-area-inset-top,0px) - 14px);max-width:560px;overflow-y:auto;overscroll-behavior:contain}
#sheet-body{padding-top:14px}
.sheet-heading{position:relative}
#toast{left:max(18px,calc((100% - 440px)/2));right:max(18px,calc((100% - 440px)/2));bottom:calc(var(--nav-space) + 13px);width:auto;max-width:none;z-index:90;transform:translateY(12px);border:1px solid rgba(225,244,205,.14);border-radius:17px;background:rgba(5,20,16,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:13px;line-height:1.45;box-shadow:0 8px 30px rgba(0,0,0,.18)}
#toast.show{transform:translateY(0)}
.has-app-motion button{transition-property:background-color,opacity,border-color,color}
.has-app-motion button:active{transform:none}
.has-app-motion #toast{transition:none}
@media(min-width:760px){
 #main>.view{padding-left:36px;padding-right:36px}
 .app-header{padding-left:32px;padding-right:32px}
 .has-fullscreen-control .app-header{padding-right:70px}
 .fullscreen-control{right:22px}
 .world-explore{height:calc(100dvh - var(--nav-space));min-height:560px}
 .world-top,.is-following .world-top{position:absolute;z-index:4;inset:0 0 auto;padding-left:27px;padding-right:27px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
 .world-search{max-width:370px}.world-layers{max-width:370px}
 .earth-stage,.is-following:not(.is-map) .earth-stage,.world-explore.is-map .earth-stage{height:100%;min-height:0;margin:0}
 .world-bottom-sheet,.is-following .world-bottom-sheet{position:absolute;left:24px;bottom:20px;width:330px;padding-bottom:7px;border-radius:22px;box-shadow:0 14px 50px rgba(0,0,0,.2)}
 .world-notebook,.is-following .world-notebook{position:absolute;z-index:6;bottom:20px;right:24px;width:280px;max-height:42%;overflow-y:auto;border-radius:17px;padding:8px 15px;background:rgba(248,246,237,.96);box-shadow:0 10px 36px rgba(0,0,0,.18)}
 .world-notebook>summary{border:0}
 .earth-tools,.is-following .earth-tools{right:26px;bottom:114px}
 .is-following.is-map .earth-tools{bottom:124px}
 .linked-observations{right:26px;bottom:78px}
 .world-explore.is-map .globe-hint{bottom:83px}
 .world-feed .feed-card>img{object-fit:cover}
 .world-story-copy{left:max(32px,calc((100% - 790px)/2));right:max(32px,calc((100% - 790px)/2));max-width:650px}
 .world-feed-actions{right:max(30px,calc((100% - 870px)/2));top:calc(var(--header-space) + 45px)}
 .world-story-copy h1{max-width:580px}
 .world-feed-head{padding-left:30px;padding-right:30px}
 .has-fullscreen-control .world-feed-head{padding-right:72px}
}
/* Original pocket-guide home, with the World journeys further down. */
#main>.classic-home{padding-top:20px}
.classic-home .intro{padding:9px 0 24px}
.classic-home .intro .eyebrow{font-size:.7rem;letter-spacing:1.8px}
.classic-home .intro h1{font-size:2.3rem;line-height:1.12;letter-spacing:-1.6px;font-weight:800}
.classic-home .location-button{width:100%;flex-wrap:wrap;text-align:left;row-gap:2px}
.classic-home .location-button strong{min-width:0;overflow-wrap:anywhere}
.classic-home .location-button .meta{font-size:.78rem}
.classic-home .local-card{min-height:248px}
.classic-home .local-card p{padding-right:34px}
.classic-home .home-map{isolation:isolate;z-index:0}
.classic-home .note-card .meta{display:flex;align-items:center;gap:5px;overflow-wrap:anywhere}
.classic-home .note-card .meta svg{width:16px;height:16px}
.classic-home .note-card .pill svg{width:15px;height:15px}
.classic-home .planet-portal{min-height:244px;justify-content:center}
.classic-home .portal-earth{right:-78px;top:-48px}
@media(max-width:360px){
 .classic-home .local-card{padding:20px}
 .classic-home .local-top{gap:5px;flex-wrap:wrap}
 .classic-home .local-top .pill{font-size:.61rem;padding:5px 8px}
 .classic-home .section-head{gap:8px}
 .classic-home .section-head h2{font-size:18px}
 .classic-home .notes-strip{gap:10px;grid-template-columns:1.1fr 1fr}
 .classic-home .note-card{padding:13px}
 .classic-home .map-caption{flex-wrap:wrap;gap:2px}
}
@media(min-width:1000px){
 #main>.world-home{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;align-items:start;padding-top:28px}
 .world-home>*{min-width:0}
 .world-home>.home-welcome{grid-column:1}
 .world-home>.home-around{grid-column:2;align-self:end}
 .world-home .home-around>.section-head{margin-top:0}
 .world-home .home-map{height:310px}
 .world-home>.home-field{grid-column:1;grid-row:2}
 .world-home>.home-world{grid-column:2;grid-row:2}
 .world-home>.saved-place-home,.world-home>.home-install,.world-home>.source-foot{grid-column:1 / -1}
 .world-home .note-card{min-height:310px}
}
@media(max-height:720px){
 .world-story-copy{bottom:36px}.world-story-copy h1{font-size:26px;margin-bottom:7px}.world-story-copy>p{font-size:12px;max-width:82%}.story-date{font-size:10px}.story-detail{margin-top:11px;min-height:54px;padding:9px 11px}.story-follow{min-height:31px}.story-credit{font-size:10px;margin-top:2px}.world-feed-actions{gap:6px}.world-feed-actions button{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){.has-app-motion button:active,button:active{transform:none}#main{scroll-behavior:auto}}

/* A short viewport keeps the complete action row visible; details scroll inside the card. */
@media(max-height:520px){
 .world-feed-actions{flex-direction:row;top:calc(var(--header-space) + 7px);right:18px;bottom:auto;gap:8px}
 .world-feed-actions button{width:38px;height:38px;min-height:38px}
 .world-story-copy{top:calc(var(--header-space) + 52px);bottom:34px;left:18px;right:18px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding:9px 10px;border-radius:13px;background:rgba(3,16,12,.3);scrollbar-width:thin}
 .world-story-copy>p{max-width:100%}
 .feed-clear-context{top:calc(var(--header-space) + 8px);left:18px;max-width:calc(100% - 224px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media(max-height:520px) and (min-width:520px){
 .world-feed .feed-card>img{width:100%;object-fit:cover}
 .world-feed .feed-card:after{background:linear-gradient(90deg,rgba(5,18,15,.1) 15%,rgba(5,18,15,.83) 42%,#05120f 58%)}
 .world-story-copy{top:calc(var(--header-space) + 8px);left:45%;right:max(20px,env(safe-area-inset-right,0px));bottom:37px;max-width:none;padding:0 8px 0 0;background:transparent;border-radius:0}
 .world-feed-actions{left:max(15px,env(safe-area-inset-left,0px));right:auto;top:auto;bottom:47px;gap:6px}
 .feed-clear-context{left:max(14px,env(safe-area-inset-left,0px));max-width:calc(43% - 60px)}
}

/* The same surface reaches the OS edges, page canvas, header and home indicator. */
html[data-chrome=dark]{--page-background:oklch(.20 .025 190);--bar-surface:oklch(0 0 0 / .50);--bar-ink:oklch(.96 .01 130);--bar-muted:oklch(.83 .025 155);--bar-active:oklch(.91 .17 119);--bar-line:oklch(1 0 0 / .10);color-scheme:dark}
html[data-chrome=light]{color-scheme:light}
body[data-chrome] .mobile-app{background:var(--page-background)}
.bottom-nav .nav-button.report svg{background:oklch(.38 .06 173);color:oklch(.91 .17 119)}
.bottom-nav{padding-left:max(12px,env(safe-area-inset-left,0px),calc((100% - 560px)/2));padding-right:max(12px,env(safe-area-inset-right,0px),calc((100% - 560px)/2))}
.app-header{padding-left:max(21px,env(safe-area-inset-left,0px));padding-right:max(21px,env(safe-area-inset-right,0px))}
.has-fullscreen-control .app-header{padding-right:calc(62px + env(safe-area-inset-right,0px))}
#main>.view{padding-left:max(var(--content-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--content-gutter),env(safe-area-inset-right,0px))}
.world-top,.is-following .world-top{padding-left:max(23px,env(safe-area-inset-left,0px));padding-right:max(23px,env(safe-area-inset-right,0px))}
.world-feed-head{padding-left:max(17px,env(safe-area-inset-left,0px));padding-right:max(17px,env(safe-area-inset-right,0px))}
.has-fullscreen-control .world-feed-head{padding-right:calc(60px + env(safe-area-inset-right,0px))}
/* The map and field-guide modes use the light surface, even when opened from the globe. */
html[data-chrome=light] .world-explore{background:var(--page-background);color:var(--ink)}
html[data-chrome=light] .world-topline .icon-button,html[data-chrome=light] .following-pill>button{color:var(--ink);border-color:var(--line)}
html[data-chrome=light] .world-search,html[data-chrome=light] .following-pill{color:var(--ink);background:var(--bar-surface);border-color:var(--line)}
html[data-chrome=light] .following-pill em{color:var(--muted)}
html[data-chrome=light] .journey-back{color:var(--ink)}
html[data-chrome=light] .world-layers>button{color:var(--ink);border-color:var(--line)}
html[data-chrome=light] .world-layers>button.active{background:var(--green);color:var(--paper);border-color:var(--green)}
body[data-chrome=light] .feed-view{background:var(--paper)}
/* Photos continue beneath the glass tabs; controls remain above the safe area. */
body[data-view=feed][data-chrome=dark] #main{padding-bottom:0}
.world-feed{height:100dvh;background:var(--page-background)}
.world-feed .empty-state{background:var(--page-background);padding-bottom:calc(var(--nav-space) + 60px)}
.world-feed .world-story-copy{bottom:calc(var(--nav-space) + 42px)}
.world-feed .feed-controls{bottom:var(--nav-space)}
dialog#sheet{color-scheme:light}
@media(min-width:760px){:root{--content-gutter:36px}.app-header{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}.has-fullscreen-control .app-header{padding-right:calc(70px + env(safe-area-inset-right,0px))}}
@media(max-height:720px){.world-feed .world-story-copy{bottom:calc(var(--nav-space) + 36px)}}
@media(max-height:520px){.world-feed .world-story-copy{bottom:calc(var(--nav-space) + 34px)}}
@media(max-height:520px) and (min-width:520px){.world-feed .world-story-copy{bottom:calc(var(--nav-space) + 37px)}.world-feed .world-feed-actions{bottom:calc(var(--nav-space) + 47px)}}
@media(prefers-reduced-transparency:reduce){.app-header,.bottom-nav,.fullscreen-control,body[data-chrome=dark] .fullscreen-control{background:var(--page-background);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Regular pages share the document scroll, just like the original pocket guide. */
html[data-layout=page]{height:auto;min-height:100%;overflow:visible}
body[data-layout=page]{height:auto;min-height:100dvh;overflow:visible}
body[data-layout=page] .app-shell{height:auto;min-height:100dvh}
body[data-layout=page] .mobile-app{display:block;height:auto;min-height:100dvh;overflow:visible}
body[data-layout=page] #main{overflow:visible;padding-top:0}
body[data-layout=page] .app-header{position:relative;inset:auto;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-layout=page] .fullscreen-control{position:absolute}

/* Installation uses the existing field-guide sheet and its safe-area layout. */
.install-invitation{display:grid;gap:14px;padding-top:14px}
.install-invitation>img{border-radius:19px}
.install-invitation .eyebrow{color:var(--green)}
.install-invitation .checklist{margin:0}
.install-invitation>.primary{margin-top:5px}
.install-invitation>.text-button{font-size:13px;justify-content:center}

/* Floating controls share the scene; no full-width header surface. */
.world-scene{position:relative;isolation:isolate}
.world-explore:before{inset:0;height:auto}
.world-top,.is-following .world-top,.world-feed-head{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.world-feed-head>button:first-child,.world-feed-head .icon-button{background:oklch(0 0 0 / .42);color:var(--chrome-text);border:1px solid var(--chrome-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.world-feed-head>button:first-child{padding-left:11px}
.world-explore.is-map .earth-stage{position:static;isolation:auto;margin-top:0}
.world-explore.is-map .world-top{pointer-events:none}
.world-explore.is-map .world-top button,.world-explore.is-map .following-pill{pointer-events:auto}
html[data-chrome=light] .world-topline h1,html[data-chrome=light] .follow-question{text-shadow:0 1px 3px var(--paper),0 0 12px var(--paper)}
html[data-chrome=light] .world-topline .icon-button,html[data-chrome=light] .journey-back,html[data-chrome=light] .world-layers>button:not(.active){background:var(--bar-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-chrome=light] .journey-back{padding:7px 11px;border-radius:24px}
@media(min-width:760px){.world-scene{height:100%}}
@media(prefers-reduced-transparency:reduce){.world-feed-head>button:first-child,.world-feed-head .icon-button{background:var(--night);backdrop-filter:none;-webkit-backdrop-filter:none}html[data-chrome=light] .world-top button,html[data-chrome=light] .following-pill{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}html[data-chrome=light] .world-layers>button.active{background:var(--green)}}

/* Native map zoom stays clear of the floating title and search. */
.world-street-map .leaflet-top.leaflet-left{top:calc(var(--header-space) + 116px);left:auto;right:18px}