/* Shared navigation controls matching the Stories With a Purpose index. */
:root{--nav-bg:#fffaf0;--nav-surface:#fff;--nav-ink:#23304c;--nav-muted:#6d7180;--nav-line:#e7dcc7;--nav-main:#1d3157;--nav-accent:#d99a32;--nav-soft:#f4e7c9;--nav-focus:#886312}
html[data-theme="dark"]{--nav-bg:#10182a;--nav-surface:#1b2740;--nav-ink:#f5ecd9;--nav-muted:#b9bfd0;--nav-line:#354461;--nav-main:#f4d38b;--nav-accent:#f0bc5c;--nav-soft:#293958;--nav-focus:#f5bd5d}
.brandmark{width:40px;height:40px;flex:0 0 40px;aspect-ratio:1;border-radius:50%;display:inline-grid;place-items:center;background:#f4ca73;color:#15203c;box-shadow:0 0 26px #f5bd5d55;font-size:21px;line-height:1}
.topbar .brand,.activities-header .brand{display:inline-flex;align-items:center;gap:10px;color:var(--nav-ink);text-decoration:none;font-weight:750}
.topbar nav,.activities-header nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.language-control,.theme-control,.activities-header nav button{min-height:36px!important;padding:6px 11px!important;border-radius:999px!important;background:var(--nav-surface)!important;color:var(--nav-ink)!important;border:1px solid var(--nav-line)!important;font:600 .82rem/1.3 system-ui,sans-serif!important}
.activities-header .icon-label{display:inline-flex;align-items:center;gap:8px}.activities-header .icon-label svg,.activities-header .control-icon{width:16px;height:16px;flex:none}
.language-control:hover,.theme-control:hover,.activities-header nav button:hover{border-color:var(--nav-accent)!important;background:var(--nav-soft)!important}
.activity-navigation{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:28px 0 6px;padding:20px 0 4px;border-top:1px solid var(--nav-line)}
.activity-navigation button{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border:1px solid var(--nav-line);border-radius:999px;background:var(--nav-surface);color:var(--nav-main);font:700 .9rem/1.3 system-ui,sans-serif;cursor:pointer}
.activity-navigation button:hover{border-color:var(--nav-accent);background:var(--nav-soft)}
.activity-navigation button:focus-visible,.topbar button:focus-visible,.activities-header nav button:focus-visible{outline:3px solid var(--nav-focus);outline-offset:3px}
.activity-navigation .icon-label svg{width:18px;height:18px;flex:none}
.activity-navigation .icon-label{display:inline-flex}
@media(max-width:600px){.activity-navigation{display:grid;grid-template-columns:1fr;gap:9px;margin-top:22px}.activity-navigation button{width:100%;min-height:46px}.topbar{gap:10px}.topbar nav{gap:7px}}