/**
 * Noribel overview topbar — brand skin (2026-09-05).
 * Full-width marine bar across the top of the shell: white Noribel wordmark
 * hard left, account button hard right. The sidebar starts below it.
 *
 * Pairs with the markup move in index.html, where .main__toolbar was lifted out
 * of <main> to become the first child of .shell.
 */

.shell {
  grid-template-rows: auto minmax(0, 1fr);
}

.main__toolbar--topbar {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 1.1rem 0 1.5rem;
  min-height: 4rem;
  flex-wrap: nowrap;
  gap: 1.25rem;
  background: var(--noribel-marine, #1c6c9e);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* The sidebar carried its own logo — the topbar owns it now */
.sidebar__brand {
  display: none;
}
.main__toolbar--topbar .main__toolbar-start {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}
.main__toolbar--topbar .main__toolbar-logo {
  display: block;
  width: 9.25rem;
  height: auto;
  filter: brightness(0) invert(1);
}
.main__toolbar--topbar .main__toolbar-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  border-radius: 6px;
}
.main__toolbar--topbar .main__toolbar-logo-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.main__toolbar--topbar .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

/* Actions hard right */
.main__toolbar--topbar .main__toolbar-actions {
  margin-left: auto;
  flex-wrap: nowrap;
}
.main__toolbar--topbar #toolbar-login-link {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}
.main__toolbar--topbar #toolbar-login-link:hover {
  background: rgba(255, 255, 255, 0.22);
}
.main__toolbar--topbar .avatar {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
/* the glyph sets its own colour (#1a6a9a), which on the marine bar was
   blue on blue */
.main__toolbar--topbar .avatar__glyph {
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/* The account dropdown now also holds the two library links */
.user-menu__dropdown .user-menu__item svg {
  flex: none;
}

/* Sidebar sits under the bar, so it must not also claim a full viewport */
.main-column {
  min-height: calc(100vh - 4rem);
}

@media (max-width: 900px) {
  .main__toolbar--topbar {
    padding-left: 0.9rem;
    padding-right: 0.75rem;
    gap: 0.75rem;
  }
  .main__toolbar--topbar .main__toolbar-logo {
    width: 7.5rem;
  }
}

/* ── No rail on the overview ──
   Overview / My Races are the page itself, and the two library links moved
   into the account menu — so the sidebar had nothing left to say.
   Scoped by loading: this sheet is only linked from index.html. */
.sidebar {
  display: none;
}
.shell {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Active-races metric card removed ──
   The same status shows on every race card, so the tile was duplicate.
   Hidden rather than deleted: the bundle still writes #metric-active-value. */
.metrics-toolbar {
  display: none;
}

/* ── Noribel wordmark above the events, Golazo-style ──
   Also does the work the hidden metric card used to: it pushes the events
   block down so the page opens with air instead of a panel edge. */
.overview-brand {
  display: flex;
  justify-content: center;
  padding: 2.25rem 1rem 1.75rem;
}
.overview-brand__logo {
  width: 15rem;
  max-width: 60vw;
  height: auto;
}

@media (max-width: 900px) {
  .overview-brand {
    padding: 1.5rem 1rem 1.25rem;
  }
  .overview-brand__logo {
    width: 11rem;
  }
}

/* Slogan removed — keep the brand mark only so race cards stay the focus. */
.overview-brand {
  flex-direction: column;
  align-items: center;
}
.overview-brand__slogan {
  display: none;
}

/* Same guard on the overview: the account dropdown sits inside the marine
   bar, so its items must not inherit white text. */
.main__toolbar--topbar .user-menu__dropdown,
.main__toolbar--topbar .user-menu__dropdown a,
.main__toolbar--topbar .user-menu__item {
  color: var(--text, #0f1222);
}
.main__toolbar--topbar .user-menu__dropdown {
  background: #ffffff;
}
.main__toolbar--topbar .user-menu__item--danger {
  color: #dc2626;
}