@import url("./dark-theme.css");
@import url("./theme-toggle.css");
@font-face {font-family: Newsreader; src: url("./fonts/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-display: swap;}
@font-face {font-family: Manrope; src: url("./fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap;}

/* Shared by My work, Operations, Opportunities, and Pitches. The page must not
   supply separate header layout or active-link rules. */
.hub-shell {
  --shell-surface: #fff; --shell-text: #14232d; --shell-secondary: #52616b;
  --shell-border: #cdd6dd; --shell-hover: #e7edf1; --shell-coral: #f15a50; --shell-focus: #146c94;
  position: relative; z-index: 20; background: var(--shell-surface); color: var(--shell-text);
  border-bottom: 1px solid var(--shell-border); font: 16px/1.6 Manrope, sans-serif;
}
html[data-theme="dark"] .hub-shell {
  --shell-surface: var(--ws-surface); --shell-text: var(--ws-text); --shell-secondary: var(--ws-secondary);
  --shell-border: var(--ws-border); --shell-hover: var(--ws-subtle); --shell-coral: var(--dark-coral); --shell-focus: var(--ws-focus);
}
.hub-shell *, .hub-shell *::before, .hub-shell *::after {box-sizing: border-box; min-width: 0;}
.hub-shell [hidden] {display: none !important;}
.hub-shell .hub-shell-inner {width: calc(100% - 96px); max-width: 1600px; min-height: 56px; margin: auto; display: flex; align-items: center; gap: 32px;}
.hub-shell .hub-shell-brand {display: inline-flex; align-items: center; flex: none; gap: 11px; color: var(--shell-text); font: 750 16px/1.6 Manrope, sans-serif; letter-spacing: -.03em; text-decoration: none;}
.hub-shell-mark {width: 19px; height: 19px; border-radius: 5px 11px 11px 11px; background: var(--shell-coral); transform: rotate(-10deg);}
.hub-shell .hub-shell-nav {display: flex; align-items: center; gap: 24px; padding: 0; border: 0; border-radius: 0; background: transparent;}
.hub-shell .hub-shell-link {position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 56px; padding: 16px 0; border-radius: 0; background: transparent; color: var(--shell-secondary); font: 650 14px/1.6 Manrope, sans-serif; white-space: nowrap; text-decoration: none; transform: none; box-shadow: none; transition: color 120ms ease, background-color 120ms ease;}
.hub-shell .hub-shell-link:hover {background: var(--shell-hover); color: var(--shell-text);}
.hub-shell .hub-shell-link.is-active {color: var(--shell-text); box-shadow: inset 0 -2px var(--shell-coral);}
.hub-shell :focus-visible {outline: 3px solid var(--shell-focus); outline-offset: 3px;}
.hub-shell .hub-shell-link:focus-visible {outline-offset: -3px;}
.hub-shell .hub-shell-unread {min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; border: 0; border-radius: 999px; background: var(--shell-coral); color: #17171b; font: 800 11px/1 Manrope, sans-serif; box-shadow: none;}
.hub-shell-actions {position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto;}
.hub-shell .hub-shell-profile {appearance: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 13px 5px 6px; border: 1px solid var(--shell-border); border-radius: 999px; background: transparent; color: var(--shell-text); font: 650 14px/1.6 Manrope, sans-serif; cursor: pointer;}
.hub-shell .hub-shell-profile:hover {background: var(--shell-hover);}
.hub-shell .hub-shell-avatar {width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--shell-coral); color: #17171b; font: 800 12px/1 Manrope, sans-serif;}
.hub-shell-profile-name {max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hub-shell .hub-shell-menu {position: absolute; top: calc(100% + 10px); right: 0; z-index: 2; width: min(288px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--shell-border); border-radius: 10px; background: var(--shell-surface); color: var(--shell-text); box-shadow: 0 16px 40px #0003;}
.hub-shell .hub-shell-role {font: 700 12px/1.5 Manrope, sans-serif; color: var(--shell-secondary); letter-spacing: normal; text-transform: none; margin: 0 0 6px;}
.hub-shell .hub-shell-email {font: 400 14px/1.6 Manrope, sans-serif; color: var(--shell-secondary); overflow-wrap: anywhere; margin: 0 0 12px;}
.hub-shell .hub-shell-signout {appearance: none; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--shell-border); border-radius: 6px; background: transparent; color: var(--shell-text); font: 650 14px/1.5 Manrope, sans-serif; text-align: left; cursor: pointer;}
.hub-shell .hub-shell-signout:hover {background: var(--shell-hover);}
@media (max-width: 1100px) {
  .hub-shell .hub-shell-inner {width: calc(100% - 48px); flex-wrap: wrap; gap: 0 20px;}
  .hub-shell .hub-shell-brand {min-height: 56px;}
  .hub-shell .hub-shell-nav {order: 3; width: 100%; flex-wrap: wrap; gap: 24px;}
  .hub-shell .hub-shell-link {min-height: 44px; padding: 10px 0;}
  .hub-shell-profile-name {display: none;}
}
@media (max-width: 620px) {
  .hub-shell .hub-shell-inner {width: calc(100% - 32px); gap: 0 12px;}
  .hub-shell .hub-shell-nav {gap: 16px;}
  .hub-shell .hub-shell-link {font-size: 13px;}
  .hub-shell .hub-shell-profile {padding-right: 5px;}
}
@media (prefers-reduced-motion: reduce) {.hub-shell .hub-shell-link {transition: none;}}