/* Shared ContentHub sidebar geometry, for Files and BannerAds. */
:root{--hub-sidebar-width:210px;--hub-sidebar-padding:12px}
.bh-shell{grid-template-columns:var(--hub-sidebar-width) minmax(0,1fr)}
.bh-sidebar{padding:0 var(--hub-sidebar-padding);gap:0;background:var(--side);border-right:1px solid var(--line)}
.bh-brand{height:132px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:27px 0 15px}
.bh-brand img{width:118px;height:auto}
.bh-main-nav{display:block}
.bh-main-nav a,.sidebar .banner-entry{display:flex;align-items:center;min-height:40px;margin:4px 0;padding:9px 12px;gap:12px;border-radius:6px;font-size:14px;font-weight:400;color:var(--text);text-decoration:none;white-space:nowrap}
.bh-main-nav a.active{background:var(--hover);font-weight:600}
.bh-main-nav svg,.sidebar .banner-entry svg{width:19px;height:19px;flex:none}
.bh-tree-heading{margin:28px 10px 10px;font-size:11px;letter-spacing:.5px}
.bh-sidebar-bottom{margin-top:auto;padding:16px 10px;font-size:11px}
@media(min-width:1600px){:root{--hub-sidebar-width:224px}}
@media(min-width:781px) and (max-width:1150px){:root{--hub-sidebar-width:188px;--hub-sidebar-padding:9px}.bh-main-nav a{font-size:13px}}
@media(max-width:780px){
 :root{--hub-sidebar-width:48px;--hub-sidebar-padding:5px}
 .bh-shell{display:grid;height:100dvh;grid-template-columns:48px minmax(0,1fr)}
 .bh-sidebar{position:relative;max-height:none;height:100dvh;padding:0 5px;border-bottom:0;border-right:1px solid var(--line);overflow:visible}
 .bh-brand{display:flex;height:70px;padding:15px 1px 5px}.bh-brand img{width:34px}
 .bh-main-nav{display:block}.bh-main-nav a,.sidebar .banner-entry{padding:8px 0;min-height:36px;justify-content:center;gap:0}
 .bh-main-nav a span,.sidebar .banner-entry span{display:none}
 .bh-sidebar .bh-tree-heading,.bh-sidebar #bh-tree,.bh-sidebar-bottom{display:none}
 .bh-main{height:100dvh;overflow:auto}.bh-topbar{position:sticky;top:0;padding:10px;gap:8px}
 .bh-navigation-open #bh-tree{display:block;position:fixed;z-index:20;left:48px;top:64px;bottom:16px;width:min(285px,calc(100vw - 64px));background:var(--side);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px #0002;padding:12px;overflow:auto;animation:bh-appear .2s ease-out}
}
/* BannerAds is a section in the shared main menu. */
.hub-menu-divider{height:1px;background:var(--line);margin:12px 10px}
@media(max-width:780px){.hub-menu-divider{margin:10px 2px}}

/* One inset for title, toolbar, browser and footer in both sections. */
:root{--hub-content-inset:20px}
.app-shell .toolbar{margin-inline:var(--hub-content-inset)}
.app-shell :is(.file-area,.file-footer,.hub-titlebar){padding-inline:var(--hub-content-inset)}
@media(min-width:781px) and (max-width:1150px){:root{--hub-content-inset:14px}}
@media(max-width:780px){:root{--hub-content-inset:7px}}

/* Identical controls, not just matching outer gutters. */
#app :is(.toolbar,.ad-toolbar){height:58px;min-height:58px;flex-shrink:0;padding:0;border:0}
#app :is(.toolbar .new-button,.ad-toolbar .ad-new){padding:3px 5px 3px 0!important;min-height:32px;gap:9px;font-size:14px;font-weight:500;border:1px solid transparent;line-height:normal}
#app :is(.new-plus,.ad-new>span){width:29px;height:29px;flex:none;margin:0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;line-height:1}
#app :is(.new-plus,.ad-new>span) svg{width:20px;height:20px;stroke-width:1.8}
#app :is(.toolbar-divider,.ad-tool-divider){height:26px;width:1px;flex:none;padding:0;margin:0 5px;border:0;background:var(--line)}
#app :is(.table-head,.ad-table-head){height:38px;min-height:38px;padding:0 8px;font-size:12px;font-weight:500}
#app :is(:not(.grid-files)>.file-row,.ad-files:not(.ad-grid)>.ad-row){height:46px;min-height:46px;padding:0 8px;font-size:14px}
@media(max-width:780px){
 #app :is(.toolbar,.ad-toolbar){height:42px;min-height:42px}
 #app :is(.toolbar .new-button,.ad-toolbar .ad-new){min-height:27px;font-size:11px!important;gap:5px}
 #app :is(.new-plus,.ad-new>span){width:23px;height:23px}
 #app :is(.toolbar-divider,.ad-tool-divider){height:19px;margin:0 3px}
 #app :is(.table-head,.ad-table-head){height:32px;min-height:32px;padding:0 4px;font-size:11px}
 #app :is(:not(.grid-files)>.file-row,.ad-files:not(.ad-grid)>.ad-row){height:42px;min-height:42px;padding:0 4px;font-size:12px}
}