/* One app bar. Calendar styles never reposition shared navigation. */
:root { --app-edge:40px; --app-measure:1280px; --appbar-row:76px; --appbar-height:var(--appbar-row); scrollbar-gutter:stable; }
.shell { width:100%; min-height:100svh; margin:0; display:flex; flex-direction:column; }
:root[data-calendar-view=grid]:not([data-mode=agent]) .calendar-open { overflow:hidden; }
:root[data-calendar-view=grid]:not([data-mode=agent]) .calendar-open .shell { height:100svh; }
.skip { position:fixed; top:8px; left:8px; transform:translateY(-150%); background:var(--surface); padding:10px; z-index:20; }
.skip:focus { transform:translateY(0); }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-rows:var(--appbar-row); align-items:center; column-gap:16px; width:100%; height:var(--appbar-height); flex:0 0 var(--appbar-height); padding:0 max(var(--app-edge),calc((100% - var(--app-measure))/2)); background:var(--page); }
.brand-group { grid-area:1 / 1; display:grid; grid-template-columns:44px 44px; gap:6px; align-items:center; min-width:0; }
.brand-group .brand { grid-area:1 / 1 / auto / -1; }
.brand-group .mode-cycle { grid-area:1 / 1; }
.brand-group #settings-button { grid-area:1 / 2; }
.topbar-context { grid-area:1 / 2; display:flex; align-items:center; gap:12px; }
.topbar-actions { grid-area:1 / 3; display:flex; align-items:center; justify-self:end; gap:6px; }
.topbar .icon-button { width:44px; height:44px; min-height:44px; padding:0; flex:0 0 44px; }
.topbar-actions > button { min-height:44px; }
.topbar-actions > [hidden], .brand-group > #settings-button[hidden] { display:inline-flex !important; visibility:hidden; }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; font-size:16px; font-weight:700; }
.view-switcher { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--sure-radius); background:transparent; }
.view-switcher button { min-width:68px; min-height:32px; padding:3px 12px; border:0; border-radius:3px; background:transparent; color:var(--muted); }
.view-switcher button[aria-pressed=true] { background:var(--tint); color:var(--accent); }
.view-switcher button:hover { color:var(--ink); background:var(--hover); }
.topbar-context:not(:has(> :not([hidden]))), [data-mode=agent] .topbar-context, [data-calendar-view=agenda] .topbar-context { display:none; }
@media (max-width:720px) {
  :root:has(.topbar-context > #view-switcher:not([hidden])):not([data-mode=agent])[data-calendar-view=grid] { --appbar-height:calc(var(--appbar-row) + 48px); }
  .topbar { grid-template-columns:94px minmax(0,1fr); }
  .topbar-actions { grid-area:1 / 2; gap:4px; }
  .topbar-context { grid-area:2 / 1 / auto / -1; justify-self:center; height:48px; align-self:start; }
  .view-switcher button { min-width:65px; }
}
@media (max-width:600px) {
  :root { --app-edge:20px; --appbar-row:68px; }
}