/* The Summrex top bar both apps share (capture/web/appbar.js; Tony, 2026-10-30): the logo that goes to the hub's home
   and the app switcher. Only the colour names both apps define are used (--card, --ink, --muted, --line, --accent). */
.brand { color: var(--ink); text-decoration: none; }
.brand .mark { fill: var(--accent); }
.brand .sub { color: var(--muted); font-weight: 400; }
.appswitch { position: relative; }
.appswitch[hidden] { display: none; }
.appswitch-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.appswitch-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.appswitch-btn:focus-visible, .appswitch-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.appswitch-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 300px; display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16); }
.appswitch-list[hidden] { display: none; }
.appswitch-link { display: grid; gap: 1px; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; min-height: 44px; align-content: center; }
.appswitch-link span { font-size: 13px; color: var(--muted); }
.appswitch-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.appswitch-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
.appswitch-link[aria-current="page"] strong::after { content: " (you are here)"; font-weight: 400; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) {
  .appswitch-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .appswitch-btn { padding: 8px 10px; }
  .appswitch-list { position: fixed; top: 56px; left: 12px; right: 12px; min-width: 0; }
}