/* Shared site shell (all pages). Chunk B: fixed top bar. Sits under the planner's full-screen layers (they hide it) and its popups. */
:root{--sbh:calc(60px + env(safe-area-inset-top))}
html{scroll-padding-top:var(--sbh)}
#sitebar{position:-webkit-sticky;position:sticky;top:0;z-index:2000;box-sizing:border-box;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;height:var(--sbh);
  padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--line)}
#sitebar .sbname{margin:0;text-align:center;font-size:17px;font-weight:700;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sitebar .sb{width:44px;height:44px;box-sizing:border-box;border-radius:12px;border:1.5px solid var(--line);background:var(--ctl);color:var(--acc);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sitebar .sb.logo{border-color:#fa954988;background:#fa954914}#sitebar .sb.logo[aria-current]{cursor:default}
#sitebar .sb.menu{justify-self:end}#sitebar .sb:active{transform:scale(.96)}
/* the bar now covers the notch: the planner header no longer needs its own safe-area top margin */
body.has-sitebar #controls{margin-top:12px}
/* planner full-screen has its own top bar */
body.fs #sitebar{display:none}
/* Chunk C: dropdown menu */
#sitebar .sb.menu.on{background:var(--acc);color:#1e1f22;border-color:var(--acc)}
#sitedim{position:fixed;inset:var(--sbh) 0 0;background:#000b;z-index:1990;opacity:0;pointer-events:none;transition:opacity .2s}
#sitemenu{position:fixed;top:var(--sbh);left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));max-width:560px;margin:0 auto;z-index:1995;max-height:calc(100vh - var(--sbh) - 16px);overflow:auto;
  background:var(--panel);border:1.5px solid var(--acc);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 14px 40px #000c;transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s;color:var(--acc)}
body.sitemenu #sitedim,body.sitemenu #sitemenu{opacity:1;pointer-events:auto}body.sitemenu #sitemenu{transform:none}
#sitemenu .acct{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
#sitemenu .login{flex:1;min-height:44px;border:1.5px solid var(--acc);border-radius:10px;background:var(--ctl);color:var(--acc);font:inherit;font-weight:700;font-size:15px;text-align:left;padding:0 14px;cursor:pointer}
#sitemenu .sb{width:44px;height:44px;box-sizing:border-box;border-radius:12px;border:1.5px solid var(--line);background:var(--ctl);color:var(--acc);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#sitemenu ul{list-style:none;margin:0;padding:6px}
#sitemenu .mi{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border-radius:10px;color:var(--acc);text-decoration:none;font-size:15px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sitemenu .mi svg{flex:0 0 22px}#sitemenu .mi.cur{background:#fa954924}
#sitemenu .mi.soon{opacity:.45;cursor:default}#sitemenu .mi .tag{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;border:1px solid currentColor;border-radius:6px;padding:1px 6px}
#sitemenu .sep{height:1px;background:var(--line);margin:6px 14px}