/* Shared SciTopus header, matched to the existing periodic-table page. */
.site-header{height:59px;min-height:59px;gap:20px;padding:9px 32px;background:#f6f7f5;color:#20312e;border-bottom:1px solid #d9e0db!important}
.site-header .brand{display:flex;align-items:center;gap:9px;flex:none;font-size:22px;line-height:1;font-weight:700;letter-spacing:-.6px;color:inherit}
.site-header .brand img{display:block;width:33px;height:33px;object-fit:contain;flex:none}
.site-header .brand span{color:inherit}
.header-label{display:block;min-width:0;padding-left:20px;border-left:1px solid #d9e0db;font-size:13px;color:#5b6d67;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-header nav.header-actions{display:flex;align-items:center;gap:18px;margin-left:auto;font-size:15px;flex:none}
.header-actions .quiet{padding:8px;color:#5b6d67}
#theme-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;color:#5b6d67}
#theme-button:hover{background:#d9e0db}
#theme-button svg{display:block}
#theme-button .theme-sun,:root[data-theme=dark] #theme-button .theme-moon{display:none}
:root[data-theme=dark] #theme-button .theme-sun{display:block}
:root[data-theme=dark] .site-header{background:#141c1b;color:#e6eee9;border-bottom-color:#34443c!important}
:root[data-theme=dark] .header-label{border-left-color:#34443c;color:#a7b8af}
:root[data-theme=dark] .header-actions .quiet,:root[data-theme=dark] #theme-button{color:#a7b8af}
:root[data-theme=dark] #theme-button:hover{background:#34443c}
main#app{height:calc(100dvh - 59px)}

/* Each counter uses its contents instead of reserving an oversized first column. */
.atlas-heading{gap:18px;padding:18px 32px 13px}
.atlas-heading>div:first-child{min-width:0}
.totals{flex:0 0 auto;gap:22px;align-items:flex-start;text-align:left;padding:0;font-size:12px}
.totals>span,.totals>span:first-child{display:flex;flex-direction:column;flex:0 0 auto;width:max-content;min-width:0;max-width:none;margin:0;padding:0}
.totals strong{font-size:26px;line-height:1.15;font-weight:400;margin-bottom:3px}

/* Controls flow consecutively from the left; smaller screens wrap whole fields. */
.toolbar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;padding:0 32px;margin-bottom:8px}
.toolbar>*{flex:0 0 auto;margin:0;min-width:0}
.toolbar .search-wrap{width:clamp(230px,24vw,330px)}
.toolbar .section-filter{width:215px;max-width:none}
.toolbar .orientation-controls,.toolbar .branch-display{width:auto;justify-content:flex-start;margin:0}
.toolbar .orientation-controls button,.toolbar .branch-display button{font-size:12px;padding:8px 10px}
.toolbar .video-mode{width:220px;margin:0;min-height:0}
.toolbar .scale-picker{width:180px}
.toolbar .search-wrap input,.toolbar select{height:38px;font-size:13px}
.toolbar .section-filter select,.toolbar .scale-picker select{width:100%;max-width:none;padding:9px 26px 9px 11px}
.toolbar .video-mode select{font-size:13px}
.map-topline{justify-content:flex-start;height:29px;padding:0 32px}
.map-topline #breadcrumbs{max-width:100%}

@media(min-width:1600px){.site-header{padding-inline:42px}.atlas-heading,.toolbar{padding-inline:42px}.map-topline{padding-inline:42px}}
@media(min-width:801px) and (max-width:1400px){.toolbar .search-wrap{width:clamp(220px,20vw,250px)}.toolbar .section-filter{width:185px}.toolbar .orientation-controls button,.toolbar .branch-display button{padding-inline:6px}.toolbar .video-mode{width:190px}.toolbar .scale-picker{width:170px}}
@media(max-width:800px){
 .site-header{height:64px;min-height:64px;padding:12px 16px;gap:13px}
 .site-header .brand{font-size:21px;gap:9px}
 .site-header .brand img{width:29px;height:29px}
 .header-label{padding-left:13px;font-size:12px;flex:0 1 auto}
 .site-header nav.header-actions{gap:8px;font-size:12px}
 .header-actions .quiet{padding:8px 5px}
 main#app{height:calc(100dvh - 64px)}
 .atlas-heading{padding:12px 16px 10px;gap:12px;align-items:flex-start}
 .totals{gap:16px;font-size:10px;padding:0}
 .totals>span:last-child{display:none}
 .totals strong{font-size:20px}
 .toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:0 12px;margin-bottom:7px}
 .toolbar .search-wrap{width:100%;grid-column:1/-1;grid-row:1}
 .toolbar .section-filter{width:100%;grid-column:1/-1;grid-row:2}
 .toolbar .orientation-controls{width:100%;grid-column:1;grid-row:3;justify-content:space-between}
 .toolbar .branch-display{width:100%;grid-column:2;grid-row:3;justify-content:space-between}
 .toolbar .video-mode{width:100%;grid-column:1;grid-row:4}
 .toolbar .scale-picker{width:100%;grid-column:2;grid-row:4}
 .toolbar .orientation-controls button,.toolbar .branch-display button{font-size:10px;padding:8px 5px}
 .toolbar .search-wrap input,.toolbar select,.toolbar .video-mode select{height:34px;font-size:11px}
 .toolbar .section-filter select,.toolbar .scale-picker select{font-size:11px;padding:8px 22px 8px 9px}
 .map-topline{height:27px;padding-inline:12px}
 .map-topline #breadcrumbs{max-width:100%}
}
@media(max-width:380px){.site-header{padding-inline:12px;gap:10px}.site-header .brand{font-size:20px;gap:6px}.header-label{padding-left:10px}.site-header nav.header-actions{gap:4px}.atlas-heading{padding-inline:12px;gap:9px}.atlas-heading h1{font-size:24px}.totals{gap:12px}.totals strong{font-size:18px}.toolbar .orientation-controls button,.toolbar .branch-display button{font-size:9px;padding-inline:3px}}