/* nav.css -- the app header: brand, mode nav, header actions, user menu.
 * Loaded after base.css and before app.css; see the note at the top of base.css.
 */
.app-header {
  height: 70px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 290px 1fr 310px;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  /* No `gap` here. It was 12px, and flex gap applies between EVERY child -- so the
     space meant to separate the cube from the wordmark was also prising ".ING" off
     "3DPACK", which is one word. The separation belongs to the cube, so the cube
     carries it. (The `margin-left: 0` further down was an earlier attempt at this;
     a margin cannot cancel a gap.) */
  font-weight: 760;
  font-size: 24px;
  letter-spacing: -.6px;
  /* The mockup drew this as a div. It is a link here -- the wordmark should go
     home -- which brings the UA underline and link colour with it. */
  text-decoration: none;
  color: var(--text);
}
.brand-cube {
  margin-right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--accent-fill-1), var(--accent-fill-2));
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px var(--accent-glow-c);
}
.brand span:nth-child(2) {
  color: var(--text);
}
.brand span:nth-child(3) {
  color: var(--primary);
}
.main-nav {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  gap: 10px;
}
.nav-item {
  min-width: 118px;
  height: 100%;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  font-weight: 590;
  position: relative;
  border-radius: 9px 9px 0 0;
  cursor: pointer;
}
.nav-item:hover {
  background: var(--surface-2);
  color: var(--primary);
}
.nav-item.active {
  color: var(--primary);
  background: var(--primary-soft);
}
.nav-item.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.icon-button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  border-radius: 9px;
  position: relative;
}
.icon-button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.badge-dot {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--surface);
}
.user-menu {
  display: flex;
  align-items: center;
}
/* The whole block is the button, so the target is the avatar, the name and the
   chevron together rather than a chevron the size of a fingernail. */
.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 4px 8px 4px 4px;
  margin: 0;
  border-radius: 999px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.user-trigger:hover {
  background: var(--surface-2);
}
.user-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* The chevron turns over when the menu is open, so the control says which way it
   goes before it is pressed. */
.user-trigger .icon {
  transition: transform .15s ease;
  color: var(--muted);
}
.user-trigger:has(+ .user-popover:popover-open) .icon {
  transform: rotate(180deg);
}

/* A popover is in the top layer, so it is positioned against the viewport and not
   against the header -- `position: absolute` under `.user-menu` would do nothing.
   The header is a fixed-height bar with a known padding, which is what these two
   numbers are: 70px tall, 24px of it. */
.user-popover {
  position: fixed;
  top: 74px;
  right: 24px;
  left: auto;
  bottom: auto;
  margin: 0;
  padding: 6px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.user-popover .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-popover .menu-item:hover {
  background: var(--surface-2);
}
.user-popover .menu-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.user-popover .menu-item .icon {
  color: var(--muted);
  flex: none;
}
.user-popover form {
  margin: 0;
}
/* The mockup drew a generic person here in two pseudo-elements -- a head and a pair
   of shoulders, the same stranger for every account. Initials off the address are at
   least the user's own, and a provider's photo covers them when there is one. */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  /* The photo arrives from a third party at an unknown moment; without this the
     circle is briefly a rectangle of someone's face. */
  isolation: isolate;
}
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.user-copy {
  min-width: 125px;
}
.user-copy strong {
  display: block;
  font-size: 13px;
}
.user-copy small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
/* Who signed in during this page's life, without the menu the server would have
   rendered. Deliberately plain: it states the fact and offers nothing, because the
   actions behind the real menu need a page the server built. */
.nav-identity {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
  position: absolute;
  right: 0;
  bottom: 1px;
}
.plan-chip {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

/* ── Theme toggle ───────────────────────────────────────────────────────────────
 * The surface this replaces had no toggle at all: dark mode followed the OS and a
 * user could not override it. Shares the .icon-button shape; only one of the two
 * glyphs is ever shown, chosen from the root data-theme rather than from JS state,
 * so it cannot disagree with the theme actually applied.
 */
#theme-toggle .icon-sun {
  display: none;
}
:root[data-theme='dark'] #theme-toggle .icon-sun {
  display: block;
}
:root[data-theme='dark'] #theme-toggle .icon-moon {
  display: none;
}