/* Site bar (2 November 2026): one top bar for every website page. Home, Guides, Training, What it does, About, Site Notes,
   Councils, the terms, the privacy notice and My profile all show the same navy bar (Ben, 4 November 2026, in place of the
   light stone bar): the reversed logo (which goes Home), six links with the page you are on underlined in sky blue, then
   Help, a round profile button with your initials that opens a small menu, and a sky blue My projects. On Guides, Training
   and My profile opened from a project, the sky blue button reads Back to project. Below 1100 px the links fold behind Menu; below 700 px Help and Profile show as icons and
   My projects moves into the menu. The planner's own pages (Overview, Markup and the rest) keep their side menu.
   Home draws this bar from home.js and opens its menu with a script (.sb-row.is-open); the plain pages use a <details>
   menu, so they need no script. */
.sb{display:block;position:sticky;top:0;z-index:60;padding:0;background:var(--ev-navy);border-bottom:1px solid var(--ev-navy-2);color:#fff;font-family:var(--font);letter-spacing:normal;--focus:var(--ev-sky)}
.sb *{box-sizing:border-box}
.sb a,.sb button,.sb summary{color:inherit;text-decoration:none;font-family:inherit}
.sb :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sb-row{position:relative;display:flex;align-items:center;gap:8px;max-width:1350px;min-height:76px;margin:0 auto;padding:0 32px}
.sb-brand{display:flex;align-items:center;gap:11px;flex:none;font-size:var(--text-base);font-weight:750;letter-spacing:-.5px;line-height:1.15;white-space:nowrap;color:#fff}
.sb-brand img{display:block;width:36px;height:36px}
.sb-brand small{display:block;margin-top:3px;font-size:.5em;font-weight:650;letter-spacing:1.5px;color:var(--ev-on-navy)}
.sb-links{display:flex;align-items:center;gap:24px;margin:0 16px 0 auto}
.sb-links>a,.sb-links>button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;border-bottom:2px solid transparent;background:none;font-size:var(--text-ui);font-weight:600;color:var(--ev-on-navy);white-space:nowrap;cursor:pointer}
.sb-links>a:hover,.sb-links>button:hover{color:#fff}
.sb-links>[aria-current]{color:#fff;border-bottom-color:var(--ev-sky)}
.sb-links>.sb-phone{display:none}
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:42px;padding:0 14px;border:1px solid #ffffff33;border-radius:9px;background:#ffffff14;font-size:var(--text-ui);font-weight:650;line-height:1.2;color:#fff;white-space:nowrap;cursor:pointer}
.sb-btn:hover{border-color:#ffffff59;background:#ffffff24}
.sb-btn svg{width:17px;height:17px;flex:none}
.sb-btn .ev-pin-head{width:18px;height:21px;stroke:none}
.sb .sb-cta{border-color:var(--ev-sky);background:var(--ev-sky);color:var(--ev-sky-ink)}
.sb .sb-cta:hover{border-color:var(--ev-sky-hover);background:var(--ev-sky-hover)}
.sb-menu{display:none}
.sb-menu>summary{list-style:none;width:44px;padding:0}
.sb-menu>summary::-webkit-details-marker{display:none}
.sb-menu[open]>summary,.sb-row.is-open>.sb-menu,.sb-acct[open]>summary{border-color:var(--ev-sky);background:#ffffff24;color:#fff}
.sb-panel{display:flex}
/* The open menu: a panel under the bar, one link to a row. */
.sb-menu[open]>.sb-panel,.sb-row.is-open>.sb-links{position:absolute;top:calc(100% - 6px);right:24px;z-index:70;display:flex;flex-direction:column;align-items:stretch;gap:0;width:320px;margin:0;padding:6px;border:1px solid #dfe7ee;border-radius:16px;background:#fff;box-shadow:0 18px 40px #10283c2e}
.sb-menu[open]>.sb-panel>a,.sb-row.is-open>.sb-links>a,.sb-row.is-open>.sb-links>button{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border:0;border-radius:0;font-size:var(--text-base);font-weight:600;color:var(--ink);text-align:left}
.sb-menu[open]>.sb-panel>a+a,.sb-row.is-open>.sb-links>*+*{border-top:1px solid #edf2f6}
.sb-menu[open]>.sb-panel>a::after,.sb-row.is-open>.sb-links>*::after{content:'';width:7px;height:7px;margin-right:4px;border-right:1.6px solid #8aa0b2;border-bottom:1.6px solid #8aa0b2;transform:rotate(-45deg)}
.sb-menu[open]>.sb-panel>a[aria-current],.sb-row.is-open>.sb-links>[aria-current]{color:var(--accentText)}
.sb-panel>.sb-phone{display:none}
/* The profile button: a round button with your initials (or a person when the profile has no name), opening a small menu of
   the profile's three tabs. A <details> on every page, so it needs no script; site-bar.js fills the initials on the plain
   pages and home.js on Home and My profile. */
.sb-acct{position:relative;flex:none}
.sb-acct>summary{list-style:none;width:42px;padding:0;border-radius:50%;font-size:var(--text-xs);font-weight:750;letter-spacing:.4px}
.sb-acct>summary::-webkit-details-marker{display:none}
.sb-acct>summary [data-sb-initials]{display:inline-flex;align-items:center;justify-content:center}
.sb-acct-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:70;display:flex;flex-direction:column;width:260px;padding:6px;border:1px solid #dfe7ee;border-radius:16px;background:#fff;box-shadow:0 18px 40px #10283c2e;color:var(--ink)}
.sb-acct-panel>p{margin:0;padding:10px 14px 8px;border-bottom:1px solid #edf2f6;font-size:var(--text-xs);color:var(--dim);line-height:1.4}
.sb-acct-panel>p b{display:block;font-size:var(--text-sm);color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-acct-panel>a,.sb-acct-panel>button{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;border:0;background:none;font-size:var(--text-sm);font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.sb-acct-panel>a+a,.sb-acct-panel>button+button{border-top:1px solid #edf2f6}
.sb-acct-panel>a:hover,.sb-acct-panel>button:hover{color:var(--accentText)}
.sb-acct-panel>a::after,.sb-acct-panel>button::after{content:'';width:7px;height:7px;margin-right:4px;border-right:1.6px solid #8aa0b2;border-bottom:1.6px solid #8aa0b2;transform:rotate(-45deg)}
@media(max-width:1100px){
 .sb-row{gap:8px;padding:0 24px}
 .sb-links{display:none}
 .sb-row>.sb-help{margin-left:auto}
 .sb-menu{display:block}
 button.sb-menu{display:inline-flex;width:44px;padding:0}
}
@media(max-width:700px){
 .sb{position:static}
 .sb-row{gap:6px;min-height:64px;padding:0 16px}
 .sb-brand{gap:8px;font-size:var(--text-sm)}
 .sb-brand img{width:30px;height:30px}
 .sb-brand small{letter-spacing:1px}
 .sb-label{display:none}
 .sb-btn{width:42px;padding:0}
 .sb .sb-cta{display:none}
 .sb-menu[open]>.sb-panel,.sb-row.is-open>.sb-links{right:12px;left:12px;width:auto}
 .sb-acct{position:static}
 .sb-acct-panel{top:calc(100% - 6px);right:12px;left:12px;width:auto}
 .sb-panel>.sb-phone,.sb-row.is-open>.sb-links>.sb-phone{display:flex}
}
@media(max-width:520px){
 .sb-row{padding:0 12px}
 .sb-brand{gap:6px}
 .sb-brand img{width:26px;height:26px}
 .sb-brand small{letter-spacing:.3px}
 .sb-btn{width:40px;min-height:40px}
 .sb-acct>summary{width:40px}
}
@media print{.sb{display:none}}