/* The header every hdadmin.com site wears: the family row, the section row,
   the narrow-screen menu and the account chip with its notifications. The
   three apps import this from packages/ui. The docs carry a copy that
   build.sh refreshes into apps/docs/shared/stylesheets/chrome.css from
   here, so edit THIS file, never the copy */

:root {
  --bg: #0e1119;
  --panel: #0b1120;
  --border: rgba(125, 151, 255, 0.14);
  --text: #eef1fb;
  --muted: #97a0b8;
  --blue-soft: #5c7cff;
  --link: #7d97ff;
  --danger: #ff6b81;
  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --grad-1: #22307c;
  --grad-2: #1a2560;
  --grad-3: #131b48;
  --tint: 92, 124, 255;
  --strong-tint: 51, 95, 255;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
}

/* ---- the two rows ---- */

/* Above the page AND the modal fade (z 10), so popups dim everything below
   the topbar items. The gradient spans BOTH rows like the docs header, so
   the translucent tabs bar renders navy over it, and the tinted border and
   blue shadow sit under the tabs as the docs' glow underline */
.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 55%, var(--grad-3) 100%);
  border-bottom: 1px solid rgba(var(--tint), 0.25);
  box-shadow: 0 4px 24px rgba(var(--strong-tint), 0.15);
}

/* Material's canonical 48px header scale, sized to how the docs read */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
}

.topbar-spacer {
  flex: 1 1 0;
  min-width: 8px;
}

.brand-home {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* No CSS radius. The logo PNG carries its own corners, and re-rounding a
   24px render shaves the square into looking cropped */
.brand-home .brand-mark {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

/* The family, the sites in their fixed order, set exactly like the section
   row below. The one you are on is simply bold */
.family {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin-left: 2px;
}

.family-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  opacity: 0.7;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 250ms ease;
}

.family-link:hover {
  opacity: 1;
  color: #fff;
}

.family-link:focus-visible {
  outline-offset: -3px;
  border-radius: 8px;
  opacity: 1;
}

.family-link-active {
  opacity: 1;
  font-weight: 700;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* The section row, the site's own pages */
.tabs {
  background: rgba(14, 17, 25, 0.6);
  border-bottom: 1px solid #232c3e;
}

.tabs > .container {
  display: flex;
  align-items: center;
  height: 48px;
  overflow: visible;
}

/* Material's link model: white at 0.7, full strength on hover, no recolour */
.tab {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  opacity: 0.7;
  transition: opacity 250ms ease;
}

/* The first label's own padding would push its text off the container line */
.tab:first-child {
  margin-left: -12px;
}

.tab:hover:not(.tab-active) {
  opacity: 1;
}

/* The popout marker on a tab that opens a new page */
.tab-ext {
  margin-left: 6px;
  flex-shrink: 0;
}

/* Inset so the tabs row's scroll clipping can't slice the ring */
.tab:focus-visible {
  outline-offset: -3px;
  border-radius: 8px;
  opacity: 1;
}

.tab-active {
  opacity: 1;
  font-weight: 600;
}

/* Sits before the first pushRight item and eats the slack, sending it and
   everything after it to the right-hand end */
.tab-spacer {
  flex: 1;
}

/* ---- the narrow-screen menu, in the topbar like the docs drawer ---- */

.nav-menu {
  display: none;
  align-items: center;
  min-width: 0;
}

.nav-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.nav-menu-btn:hover,
.nav-menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
}

/* The section you are on, beside the mark where the family row was */
.nav-menu-title {
  display: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anchored to the chrome rather than the button, so it spans the screen and
   sits directly under the bar whether or not the tab row is showing */
.nav-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  padding: 8px 0 12px;
  background: var(--panel);
  border-bottom: 1px solid rgba(var(--tint), 0.25);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  animation: rise-in var(--dur-fast) var(--ease-out) both;
}

.nav-menu-panel > .container {
  display: flex;
  flex-direction: column;
}

/* The full lockup heads the family list, where there is room for the name
   beside the mark */
.nav-menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.nav-menu-brand img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* The site's own pages, stepped in under its name */
.nav-menu-sub {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.nav-menu-item-sub {
  padding-left: 30px;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.nav-menu-item:hover {
  background: rgba(var(--tint), 0.08);
}

.nav-menu-item-active,
.nav-menu-item-active:hover {
  color: var(--link);
  background: rgba(var(--tint), 0.14);
}

/* Below this the labels stop fitting, so both rows give way to the menu.
   Every site shares the number so they never disagree about where mobile
   starts */
@media (max-width: 780px) {
  .tabs,
  .family {
    display: none;
  }

  .nav-menu {
    display: flex;
  }

  .nav-menu-title {
    display: block;
  }
}

/* ---- the account chip ---- */

.profile-menu {
  position: relative;
}

.profile-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.profile-chip:hover,
.profile-chip[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}

.nb-avatar {
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  object-fit: cover;
}

/* A tinted initial stands in when someone has no headshot, or when the one
   we have stops loading */
.nb-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--hue, 225) 45% 34%);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1;
}

.profile-avatar {
  flex-shrink: 0;
}

.profile-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name is what pushes the topbar past narrow screens, the avatar
   carries the meaning on its own there */
@media (max-width: 560px) {
  .profile-name {
    display: none;
  }
}

.profile-caret {
  opacity: 0.7;
  transition: transform var(--dur-fast) ease;
}

.profile-caret-open {
  transform: rotate(180deg);
}

/* The unread count, anchored to the chip's corner */
.profile-badge {
  position: absolute;
  top: -3px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  /* The tabs are stacking contexts (opacity) painted after the topbar, so
     without this they draw over the open menu */
  z-index: 2;
  min-width: 320px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid rgba(var(--tint), 0.18);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(var(--tint), 0.06), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 32px
    rgba(var(--tint), 0.08);
  animation: rise-in var(--dur-fast) var(--ease-out) both;
}

@media (max-width: 400px) {
  .profile-dropdown {
    min-width: 0;
    width: calc(100vw - 32px);
  }
}

.profile-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.profile-item:hover {
  background: rgba(var(--tint), 0.1);
  color: var(--text);
}

.profile-item-danger,
.profile-item-danger:hover {
  color: var(--danger);
}

.topbar-signin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.topbar-signin:hover {
  background: rgba(255, 255, 255, 0.18);
}

.topbar-signin:disabled {
  opacity: 0.7;
  cursor: default;
}

/* The docs render the chip from a script, so the slot holds its width from
   the cookie until then and the header never shifts */
.nb-account {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.nb-account[data-nb-signed="1"]:empty {
  min-width: 132px;
}

.nb-account[data-nb-signed="0"]:empty {
  min-width: 86px;
}

/* ---- notifications, the feed above the menu items ---- */

.profile-dropdown-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 10px 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.notice-clear {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
}

.notice-clear:hover {
  text-decoration: underline;
}

.profile-notices {
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.notice-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notice-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

.notice-row:hover {
  background: rgba(var(--tint), 0.08);
}

.notice-row-unseen {
  background: rgba(var(--tint), 0.1);
}

.notice-actor {
  flex-shrink: 0;
  display: inline-flex;
}

.notice-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.notice-line {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.35;
}

.notice-when {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}

.notice-empty {
  margin: 6px 10px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
}

.notice-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--tint), 0.12);
  font-size: 15px;
}

/* ---- the dashboard's demo pill, explained on hover ---- */

.demo-tag {
  position: relative;
  margin-left: 0;
  cursor: help;
}

.demo-tag::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  z-index: 30;
}

.demo-tag:hover::after,
.demo-tag:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}