:root{--atlas-nav-height:52px}
body.has-atlas-nav{padding-top:var(--atlas-nav-height)}
#atlasNavigation{position:fixed;inset:0 0 auto;z-index:1000;height:var(--atlas-nav-height);display:flex;align-items:center;justify-content:center;gap:18px;padding:5px 16px;background:#faf9f2;border-bottom:1px solid #c2cdbc;box-shadow:0 2px 12px #20382b12;color:#203b32;font:600 13px/1.25 system-ui,sans-serif;box-sizing:border-box}
#atlasNavigation .atlas-nav-primary,#atlasNavTopics{display:flex;align-items:center;gap:5px}
#atlasNavigation a,#atlasNavToggle{display:block;color:#294939;text-decoration:none;padding:10px 12px;border:1px solid transparent;border-radius:6px;white-space:nowrap;min-height:38px;box-sizing:border-box;font:inherit;background:transparent;text-align:center}
#atlasNavigation a:hover,#atlasNavToggle:hover{background:#e6ebdf}
#atlasNavigation a[aria-current=page]{background:#294c3c;color:#fff}
#atlasNavigation a:focus-visible,#atlasNavToggle:focus-visible{outline:3px solid #b66e34;outline-offset:1px}
#atlasNavToggle{display:none;cursor:pointer}
body.atlas-nav-2d>main{height:calc(100dvh - var(--atlas-nav-height) - 48px);min-height:0}
body.atlas-nav-3d #map{top:var(--atlas-nav-height)}
body.atlas-nav-3d>header,body.atlas-nav-3d #sceneTools{top:calc(var(--atlas-nav-height) + 16px)}
body.atlas-nav-3d #sceneTools{max-height:calc(100dvh - var(--atlas-nav-height) - 100px)}
body.atlas-nav-les>.viewer{height:calc(100dvh - var(--atlas-nav-height))}
@media(max-width:900px){
 #atlasNavigation{gap:8px;justify-content:space-between;padding:5px 8px;font-size:12px}
 #atlasNavigation a,#atlasNavToggle{padding:10px 9px}
 #atlasNavToggle{display:block}
 #atlasNavToggle.has-current{background:#e1e9da;border-color:#78936f}
 #atlasNavTopics{display:none;position:absolute;top:calc(var(--atlas-nav-height) - 1px);right:8px;width:min(360px,calc(100vw - 16px));grid-template-columns:1fr 1fr;padding:9px;background:#faf9f2;border:1px solid #bccab7;border-radius:0 0 10px 10px;box-shadow:0 9px 20px #173a3026;gap:5px}
 #atlasNavigation.is-open #atlasNavTopics{display:grid}
 #atlasNavTopics a{border-color:#d8dfd0;text-align:left;white-space:normal}
}
@media(max-width:740px){body.atlas-nav-2d>main{height:calc(100dvh - var(--atlas-nav-height) - 44px)}}
@media(max-width:660px){
 body.atlas-nav-3d>header{top:calc(var(--atlas-nav-height) + 8px)}
 body.atlas-nav-3d #sceneTools{top:auto;max-height:58dvh}
 body.atlas-nav-3d #probe{top:calc(var(--atlas-nav-height) + 8px)}
}

/* The time atlas has one header: title and all navigation/actions together. */
body.atlas-nav-2d>header[hidden]{display:none!important}
body.atlas-nav-2d>main{height:calc(100dvh - var(--atlas-nav-height));min-height:0}
.atlas-nav-2d #atlasNavigation{justify-content:space-between}
.atlas-nav-2d #atlasNavigation .atlas-nav-primary{min-width:0;gap:20px}
.atlas-nav-2d #atlasNavigation .brand{padding:6px 0;border:0;text-align:left;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.atlas-nav-2d #atlasNavigation .eyebrow{font-size:10px;letter-spacing:.16em;white-space:nowrap}
.atlas-nav-2d #atlasNavToggle{display:block;flex-shrink:0;cursor:pointer;border-color:#bccab7}
.atlas-nav-2d #atlasNavTopics{display:none;position:absolute;top:calc(var(--atlas-nav-height) - 1px);right:8px;width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - var(--atlas-nav-height) - 12px);overflow:auto;grid-template-columns:1fr 1fr;padding:10px;background:#faf9f2;border:1px solid #bccab7;border-radius:0 0 10px 10px;box-shadow:0 9px 20px #173a3026;gap:6px}
.atlas-nav-2d #atlasNavigation.is-open #atlasNavTopics{display:grid}
.atlas-nav-2d #atlasNavTopics a{text-align:left;white-space:normal;border-color:#d8dfd0}
#atlasNavigation .atlas-nav-actions{grid-column:1/-1;display:grid;gap:5px;border-top:1px solid #c9d2c2;padding-top:9px;margin-top:3px}
#atlasNavigation .atlas-nav-actions button{font:inherit;text-align:left;min-height:40px;padding:9px 12px;border:1px solid #d8dfd0;border-radius:6px;background:transparent;color:#294939;cursor:pointer}
#atlasNavigation .atlas-nav-actions button:hover{background:#e6ebdf}
#atlasNavigation .atlas-nav-actions button:focus-visible{outline:3px solid #b66e34;outline-offset:1px}
@media(max-width:740px){.atlas-nav-2d #atlasNavigation .eyebrow{display:none}.atlas-nav-2d #atlasNavigation .brand{font-size:12px}.atlas-nav-2d #atlasNavigation .brand span{padding:0 5px}}
