/* The bar at the top: title, search, page actions, notifications, account. */
.topbar { display: flex; align-items: center; gap: var(--sp-3); height: var(--top-h); padding: 0 var(--sp-3) 0 var(--sp-4); }
.topbar-spacer { flex: 1; }
.page-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.page-actions { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topsearch { display: flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3); min-width: 220px; max-width: 360px; flex: 0 1 320px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--muted); text-align: left; }
.topsearch:hover { color: var(--text); border-color: var(--muted); }
.topsearch-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topsearch kbd { font: 500 var(--fs-xs) var(--font); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600;
  font-size: var(--fs-sm); cursor: pointer; color: var(--text); }
.avatar:hover { border-color: var(--accent); }
.notif { padding: var(--sp-4); max-width: 420px; align-self: flex-end; margin-top: calc(-1 * var(--grid-gap) + var(--sp-2)); position: relative; z-index: 5; }
/* while the main page is being edited the bar says so */
body.editing-main .topbar { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.edit-badge { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }