/* No top bar (owner request, 2 Nov 2026: "put buttons above line in settings
   and remove white bar"). The Connected status, Share this page and Report a
   bug moved from the top bar into the menu (app/index.html, .sidebar-actions),
   one row just above the divider over Settings; app/sidebar-nav.js places that
   divider block straight after them. Loaded after sidebar-nav.css so neither
   it nor extensions.css grows. */

/* The page title stays on the page, unboxed and not sticky: no band, no line.
   The event page names the event in its own header, so it starts at the top. */
.topbar{position:static;height:auto;min-height:0;padding:24px 34px 6px;border-bottom:0;background:transparent;backdrop-filter:none}
body[data-event-page] .topbar{display:none}

/* The menu row: status on the left, the two round buttons on the right. */
.sidebar-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px;padding:0 10px}
.sidebar-actions .connection-status{margin-right:auto;color:rgba(255,255,255,.8);font:500 13px/1.25 "Bricolage Grotesque",sans-serif}
.sidebar-actions .connection-status-icon{width:18px;height:18px;font-size:10px;box-shadow:0 0 0 3px rgba(31,157,106,.28)}
.sidebar-actions .share-page-button,.sidebar-actions .bug-report-button{position:static;width:32px;height:32px}
.sidebar-actions .share-page-button svg,.sidebar-actions .bug-report-button svg{width:16px;height:16px}
.sidebar-actions .share-page-button{border-color:rgba(255,255,255,.18);background:transparent;color:#c9c9cf}
.sidebar-actions .share-page-button:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff}
.sidebar-actions .share-page-button:focus-visible,.sidebar-actions .bug-report-button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Collapsed rail: the same three, stacked as icons; "Connected" stays readable
   to screen readers and as the status's tooltip. */
@media(min-width:761px){
  .app-shell.sidebar-collapsed .sidebar-actions{flex-direction:column;gap:8px;padding:0}
  .app-shell.sidebar-collapsed .sidebar-actions .connection-status{margin:0 0 2px}
  .app-shell.sidebar-collapsed .sidebar-actions .connection-status>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* With the three gone, the right side holds only the Branch picker. */
.top-actions:has(> .branch-control[hidden]){display:none}

/* Phone: the drawer holds the row at touch size; the page keeps only the menu
   button and the title, with no band behind them. On the event page the menu
   button sits on the header's top-left corner, in the header's ink, with the header's words moved down below it. */
@media(max-width:760px){
  .sidebar-actions{gap:8px}
  .sidebar-actions .share-page-button,.sidebar-actions .bug-report-button{width:40px;height:40px}
  .topbar{align-items:center;padding:10px 16px 4px}
  .mobile-menu{width:44px;height:44px;margin-left:-10px;color:var(--ink)}
  body[data-event-page] .topbar{display:block;position:absolute;top:0;left:0;z-index:5;padding:2px 0 0 14px}
  body[data-event-page] .mobile-menu{margin:0;color:var(--menu-event-ink,#fff)}
  body[data-event-page] #view>.event-head:first-child{padding-top:52px}
}