/* ── Shell header ─────────────────────────────────────────────────────── */
.shell-header {
  background: var(--wh);
  color: var(--heading);
  padding: 0 22px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,113,175,.07);
  position: sticky;
  top: 3px; /* sit below the accent bar */
  z-index: 100;
}

.shell-header__home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.shell-header__home-link:hover { opacity: .85; }

.shell-header__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}

.shell-header__breadcrumb {
  font-size: .82rem;
  color: var(--st);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-header__logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* PI-33 — logo.jpg carries a baked-in white matte (JPEGs can't be transparent),
   so on the dark header it reads as a raw white box. Until a transparent /
   white-wordmark asset lands (AC #4), frame it as an intentional white chip in
   dark mode: the padding+background extend the same white seamlessly and round
   the corners, and the shadow lifts it off the navy. Light mode leaves it alone
   (the header is already white, so the matte is invisible). */
:root[data-theme="dark"] .shell-header__logo {
  background: var(--on-brand);
  padding: 4px 9px;
  border-radius: 7px;
  box-sizing: content-box;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}

/* Same chip when "System" mode resolves to dark via the OS. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .shell-header__logo,
  :root:not([data-theme]) .shell-header__logo {
    background: var(--on-brand);
    padding: 4px 9px;
    border-radius: 7px;
    box-sizing: content-box;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
  }
}

/* ── Shell footer ─────────────────────────────────────────────────────── */
.shell-footer {
  background: var(--wh);
  border-top: 1px solid var(--border);
  padding: 10px 32px;
  text-align: center;
  font-size: .73rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Main content area ────────────────────────────────────────────────── */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Header right-side group (nav + user menu) ───────────────────────── */
.shell-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Header nav icons (Option C app-bar) ─────────────────────────────── */
.shell-header__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--heading);
}

/* ── User menu (round avatar + dropdown) ─────────────────────────────── */
.user-menu {
  position: relative;
  flex-shrink: 0;
}
.user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--vb);
  color: var(--on-brand);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: box-shadow .12s, transform .12s;
}
.user-menu__avatar:hover {
  box-shadow: 0 2px 8px rgba(0,113,175,.35);
  transform: translateY(-1px);
}
.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--wh);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(18,39,74,.18);
  padding: 6px;
  z-index: 200;
  animation: userMenuIn .14s ease;
}
@keyframes userMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.user-menu__info {
  padding: 12px 14px 10px;
}
.user-menu__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.user-menu__name {
  flex: 1;
  min-width: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu__cred-download {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--wash);
  color: var(--accent);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.user-menu__cred-download:hover {
  background: var(--chip);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,113,175,.15);
}
.user-menu__email {
  font-size: .78rem;
  color: var(--st);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* PI-33 — Appearance (theme) control in the account dropdown */
.user-menu__theme {
  padding: 8px 14px 10px;
}
.user-menu__theme-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.theme-toggle {
  display: flex;
  gap: 2px;
  background: var(--chip);
  border-radius: 8px;
  padding: 3px;
}
.theme-toggle__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 700;
  color: var(--st);
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.theme-toggle__btn:hover { color: var(--heading); }
.theme-toggle__btn[aria-checked="true"] {
  background: var(--surface);
  color: var(--heading);
  box-shadow: 0 1px 3px rgba(18, 39, 74, .16);
}
.theme-toggle__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.theme-toggle__icon { font-size: .82rem; line-height: 1; }
.user-menu__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.user-menu__logout:hover { background: var(--danger-tint); }
.user-menu__logout-icon { font-size: 1rem; }
.nav-link {
  display: grid;
  place-items: center;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--heading);
  text-decoration: none;
  transition: background .12s, color .12s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  flex-shrink: 0;
}
.nav-link__icon { line-height: 1; }
.nav-link:hover { background: rgba(18,39,74,.06); }
/* Current section renders as a navy-filled tile (mockup "home" treatment) */
.nav-link.active { background: var(--dn); color: var(--on-brand); }
.nav-count-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--or);
  color: var(--on-or);
  border-radius: 9px;
  font-size: .6rem;
  font-weight: 800;
  padding: 0 4px;
  min-width: 14px;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

/* ── Gear icon nav button ────────────────────────────────────────────── */
.nav-link--gear {
  font-size: 1rem;
  transition: background .12s, color .12s;
}