/* The sticky page header: breadcrumb, search trigger, create and the viewer's avatar. */

.premium-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--border);
  background: var(--surface-translucent);
  backdrop-filter: blur(18px);
}

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.breadcrumb b {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.global-search-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 300px;
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.global-search-trigger b {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
}

.global-search-trigger kbd {
  padding: var(--space-0-5) var(--space-1-5);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.nav-toggle,
.theme-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
}

/* Notifications: a bell with the unread count. */
.notification-bell {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
}

.bell-count {
  position: absolute;
  top: calc(-1 * var(--space-1-5));
  right: calc(-1 * var(--space-1-5));
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
}

.nav-toggle {
  display: none;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

@media (max-width: 1100px) {
  .global-search-trigger {
    min-width: 220px;
  }
}

@media (max-width: 820px) {
  .premium-header {
    gap: var(--space-3);
    padding: 0 var(--space-4);
  }

  .nav-toggle {
    display: grid;
  }

  .breadcrumb {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .breadcrumb b,
  .breadcrumb span {
    display: none;
  }

  .header-actions > .avatar {
    display: none;
  }

  .global-search-trigger {
    width: 42px;
    min-width: 42px;
  }

  .global-search-trigger b,
  .global-search-trigger kbd,
  .header-actions .btn {
    display: none;
  }
}

/* Strips under the header: a demo organisation says so (and that it is still being built); an account
   whose email isn't confirmed is asked to confirm it. */
.notice-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-10);
  border-bottom: 1px solid var(--border-accent);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.demo-banner {
  padding: var(--space-2) var(--space-10);
  border-bottom: 1px solid var(--warning-border);
  background: var(--warning-soft);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 820px) {
  .notice-banner,
  .demo-banner {
    padding: var(--space-2) var(--space-4);
  }
}

/* Outside production and development (staging, a demo server), a label fixed in the corner of every page. */
.environment-banner {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  pointer-events: none;
  text-transform: uppercase;
}