/* =========================================================
   DROPPED DEAD DATES — SHARED RESIDENT SHELL
   SITE-SHELL-1B / SITE-SHELL-1C
   Profile pilot

   Load LAST so this shell can safely override the old
   header/mobile rules without deleting legacy CSS yet.
========================================================= */

:root {
  --resident-shell-green: #15fb00;
  --resident-shell-white: #f4f4f4;
  --resident-shell-muted: #9ba39b;
  --resident-shell-border:
    rgba(102, 255, 53, 0.28);
  --resident-shell-sidebar-width:
    230px;
}

body.resident-shell-page {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* =========================================================
   DESKTOP APP FRAME
========================================================= */

body.resident-shell-page
.page-wrapper {
  box-sizing: border-box !important;
  width:
    calc(
      100% -
      var(--resident-shell-sidebar-width)
    ) !important;
  max-width:
    calc(
      100% -
      var(--resident-shell-sidebar-width)
    ) !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin:
    0
    0
    0
    var(--resident-shell-sidebar-width) !important;
  padding: 0 !important;
}

/* =========================================================
   DESKTOP LEFT RAIL
   Mirrors the Resident Dashboard visual language.
========================================================= */

.resident-shell-sidebar {
  position: fixed;
  inset:
    0
    auto
    0
    0;
  z-index: 49990;

  box-sizing: border-box;
  display: block;

  width:
    var(--resident-shell-sidebar-width);
  height: 100vh;
  height: 100dvh;

  padding:
    18px
    14px
    30px;

  overflow-x: hidden;
  overflow-y: auto;

  color:
    var(--resident-shell-white);

  background:
    rgba(4, 5, 5, 0.985);

  border-right:
    1px
    solid
    var(--resident-shell-border);
}

.resident-shell-sidebar-brand {
  display: block !important;
  width: min(160px, 100%) !important;
  max-width: 160px !important;

  margin:
    0
    auto
    18px !important;
  padding: 0 !important;

  background:
    transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.resident-shell-sidebar-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.resident-shell-nav {
  display: grid;
  gap: 4px;

  width: 100%;
  margin: 0;
  padding: 0;
}

.resident-shell-nav-link {
  display: grid !important;
  grid-template-columns:
    26px
    minmax(0, 1fr)
    auto !important;
  align-items: center !important;
  gap: 8px !important;

  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding:
    9px
    11px !important;

  color: #dddddd !important;
  background:
    transparent !important;

  border:
    1px
    solid
    transparent !important;
  border-radius:
    7px !important;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
  font-size:
    0.86rem !important;
  font-weight:
    500 !important;
  line-height:
    1.25 !important;

  text-align: left !important;
  text-decoration:
    none !important;
  text-shadow:
    none !important;
}

.resident-shell-nav-link:hover,
.resident-shell-nav-link:focus-visible,
.resident-shell-nav-link.active {
  color:
    var(--resident-shell-green) !important;

  border-color:
    rgba(
      102,
      255,
      53,
      0.54
    ) !important;

  background:
    rgba(
      102,
      255,
      53,
      0.08
    ) !important;

  outline: none !important;
}

.resident-shell-nav-icon {
  display: grid;
  place-items: center;

  width: 26px;
  min-width: 26px;

  color: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.resident-shell-nav-label {
  min-width: 0;

  overflow-wrap: anywhere;
}

.resident-shell-badge {
  min-width: 24px;
  padding: 2px 7px;

  color: #ffffff;
  background: #7822aa;

  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.resident-shell-staff-badge {
  padding: 2px 6px;

  color: #061000;
  background:
    var(--resident-shell-green);

  border-radius: 999px;

  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.resident-shell-admin-link {
  color:
    var(--resident-shell-green) !important;

  border-color:
    rgba(
      102,
      255,
      53,
      0.34
    ) !important;

  background:
    linear-gradient(
      90deg,
      rgba(
        102,
        255,
        53,
        0.13
      ),
      rgba(
        102,
        255,
        53,
        0.025
      )
    ) !important;
}

.resident-shell-investigator-link {
  color: #c45cff !important;
}

.resident-shell-logout {
  margin-top: 8px !important;
}

/* =========================================================
   TOP UTILITY HEADER
   No avatar dropdown.
========================================================= */

body.resident-shell-page
header.site-header.resident-shell-top-header {
  position: relative !important;
  z-index: 50000 !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;
  align-items: center !important;
  gap: 18px !important;

  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 72px !important;

  margin: 0 !important;
  padding:
    10px
    22px !important;

  overflow: visible !important;

  background:
    rgba(
      6,
      6,
      6,
      0.96
    ) !important;

  border-bottom:
    1px
    solid
    rgba(
      21,
      251,
      0,
      0.22
    ) !important;

  box-shadow:
    0
    8px
    24px
    rgba(
      0,
      0,
      0,
      0.45
    ) !important;
}

body.resident-shell-page
.resident-shell-top-header
.logo-link {
  justify-self: start !important;

  display: flex !important;
  align-items: center !important;
  justify-content:
    flex-start !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    transparent !important;
  border: 0 !important;
}

body.resident-shell-page
.resident-shell-top-header
.site-logo {
  display: block !important;

  width: auto !important;
  height: 48px !important;
  max-width: 220px !important;

  object-fit: contain !important;
}

body.resident-shell-page
.resident-shell-top-header
.header-right {
  position: relative !important;
  z-index: 50001 !important;

  display: flex !important;
  align-items: center !important;
  justify-content:
    flex-end !important;
  gap: 12px !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

.resident-shell-zb-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  min-height: 38px !important;

  margin: 0 !important;
  padding:
    5px
    12px !important;

  color:
    var(--resident-shell-white) !important;
  background:
    #090a0a !important;

  border:
    1px
    solid
    var(--resident-shell-border) !important;
  border-radius:
    999px !important;

  font-size:
    0.9rem !important;
  font-weight:
    800 !important;

  text-decoration:
    none !important;
}

.resident-shell-zb-mark {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  color: #ffe082;
  background: #34290d;

  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 800;
}

body.resident-shell-page
.resident-shell-top-header
#notifBtn {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content:
    center !important;

  flex: 0 0 46px !important;

  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--resident-shell-green) !important;

  background:
    #050606 !important;

  border:
    1px
    solid
    rgba(
      21,
      251,
      0,
      0.46
    ) !important;
  border-radius:
    50% !important;

  font-size: 1.35rem !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

body.resident-shell-page
.resident-shell-top-header
#notifDropdown {
  position: absolute !important;

  top:
    calc(
      100% + 8px
    ) !important;

  right: 0 !important;
  left: auto !important;

  transform: none !important;

  box-sizing: border-box !important;

  width:
    min(
      340px,
      calc(
        100vw -
        var(
          --resident-shell-sidebar-width
        ) -
        32px
      )
    ) !important;
  max-width:
    calc(
      100vw -
      var(
        --resident-shell-sidebar-width
      ) -
      32px
    ) !important;
  max-height:
    min(
      65vh,
      440px
    ) !important;

  margin: 0 !important;
  padding: 8px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  background:
    rgba(
      7,
      7,
      7,
      0.98
    ) !important;

  border:
    1px
    solid
    rgba(
      21,
      251,
      0,
      0.42
    ) !important;
  border-radius:
    14px !important;

  box-shadow:
    0
    18px
    45px
    rgba(
      0,
      0,
      0,
      0.70
    ) !important;

  z-index: 100050 !important;
}

.resident-shell-menu-button {
  display: none;
}

/* =========================================================
   PROFILE FULL-BLEED TICKER CONTAINMENT
   The old Profile ticker uses 100vw. Inside the desktop
   shell that would bleed underneath the new left rail.
========================================================= */

body.resident-shell-page
.graveyard-ticker-wrap {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   MOBILE DRAWER
========================================================= */

.resident-shell-backdrop,
.resident-shell-drawer {
  display: none;
}

@media (max-width: 1180px)
and (min-width: 901px) {
  :root {
    --resident-shell-sidebar-width:
      200px;
  }
}

@media (max-width: 900px) {
  :root {
    --resident-shell-sidebar-width:
      0px;
  }

  body.resident-shell-page
  .page-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .resident-shell-sidebar {
    display: none !important;
  }

  body.resident-shell-drawer-open {
    overflow: hidden !important;
  }

  body.resident-shell-page
  header.site-header.resident-shell-top-header {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px !important;
    align-items: center !important;
    justify-content:
      stretch !important;

    width: 100% !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding:
      8px
      12px !important;

    gap: 10px !important;
  }

  .resident-shell-menu-button {
    appearance: none !important;

    display: grid !important;
    place-items: center !important;

    grid-column: 1 !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
      var(--resident-shell-green) !important;
    background:
      #050606 !important;

    border:
      1px
      solid
      rgba(
        21,
        251,
        0,
        0.46
      ) !important;
    border-radius:
      7px !important;

    font-size: 1.7rem !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  body.resident-shell-page
  .resident-shell-top-header
  .logo-link {
    grid-column: 2 !important;
    justify-self: center !important;

    width: auto !important;
    max-width: 100% !important;
  }

  body.resident-shell-page
  .resident-shell-top-header
  .site-logo {
    width: auto !important;
    height: 42px !important;
    max-width:
      min(
        100%,
        210px
      ) !important;
  }

  body.resident-shell-page
  .resident-shell-top-header
  .header-right {
    position: static !important;

    grid-column: 3 !important;
    justify-self: end !important;

    display: flex !important;
    justify-content:
      flex-end !important;

    width: 58px !important;
    min-width: 58px !important;

    margin: 0 !important;
  }

  .resident-shell-zb-pill {
    display: none !important;
  }

  body.resident-shell-page
  .resident-shell-top-header
  #notifBtn {
    flex: 0 0 58px !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    font-size: 1.6rem !important;
  }

  body.resident-shell-page
  .resident-shell-top-header
  #notifDropdown {
    top:
      calc(
        100% + 8px
      ) !important;

    left: 12px !important;
    right: 12px !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
  }

  body.resident-shell-page
  .graveyard-ticker-wrap {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left:
      calc(
        -50vw + 50%
      ) !important;
    margin-right:
      calc(
        -50vw + 50%
      ) !important;
  }

  .resident-shell-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100070 !important;

    display: block !important;

    background:
      rgba(
        0,
        0,
        0,
        0.74
      ) !important;

    backdrop-filter:
      blur(2px);
  }

  .resident-shell-backdrop[hidden] {
    display: none !important;
  }

  .resident-shell-drawer {
    position: fixed !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 100080 !important;

    display: block !important;

    box-sizing: border-box !important;

    width:
      min(
        88vw,
        380px
      ) !important;
    max-width: 88vw !important;

    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding:
      0
      0
      calc(
        28px +
        env(
          safe-area-inset-bottom
        )
      ) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    color: #ededed !important;

    background:
      linear-gradient(
        180deg,
        rgba(
          6,
          7,
          7,
          0.995
        ),
        rgba(
          2,
          3,
          3,
          0.995
        )
      ) !important;

    border-right:
      1px
      solid
      rgba(
        21,
        251,
        0,
        0.42
      ) !important;

    box-shadow:
      22px
      0
      55px
      rgba(
        0,
        0,
        0,
        0.62
      ) !important;

    transform:
      translateX(
        -105%
      ) !important;

    transition:
      transform
      220ms
      ease !important;
  }

  .resident-shell-drawer.open {
    transform:
      translateX(0) !important;
  }

  .resident-shell-drawer-head {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      48px;
    align-items: center;
    gap: 12px;

    min-height: 116px;

    padding:
      max(
        18px,
        env(
          safe-area-inset-top
        )
      )
      18px
      18px;

    border-bottom:
      1px
      solid
      rgba(
        255,
        255,
        255,
        0.12
      );
  }

  .resident-shell-drawer-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background:
      transparent !important;
    border: 0 !important;

    text-decoration:
      none !important;
  }

  .resident-shell-drawer-brand img {
    display: block;

    width: 92px;
    max-width: 42%;
    height: auto;
  }

  .resident-shell-drawer-brand span {
    min-width: 0;

    color:
      var(--resident-shell-green);

    font-family:
      'CreepsterLocal',
      'Creepster',
      cursive;
    font-size: 1.2rem;
    line-height: 1.05;
  }

  .resident-shell-drawer-close {
    appearance: none;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    color:
      var(--resident-shell-green);
    background: #080909;

    border:
      1px
      solid
      rgba(
        21,
        251,
        0,
        0.42
      );
    border-radius: 50%;

    font-size: 1.8rem;
    line-height: 1;

    cursor: pointer;
  }

  .resident-shell-drawer-nav {
    display: grid !important;
    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding:
      20px
      16px
      0 !important;

    box-sizing:
      border-box !important;
  }

  .resident-shell-drawer-nav
  .resident-shell-nav-link {
    display: grid !important;
    grid-template-columns:
      30px
      minmax(0, 1fr)
      auto !important;

    width: 100% !important;
    min-height: 62px !important;

    padding:
      12px
      14px !important;

    color: #e8e8e8 !important;
    background:
      rgba(
        14,
        15,
        15,
        0.96
      ) !important;

    border:
      1px
      solid
      rgba(
        74,
        121,
        67,
        0.52
      ) !important;
    border-radius:
      12px !important;

    font-size:
      1rem !important;
  }

  .resident-shell-drawer-nav
  .resident-shell-nav-link.active {
    color:
      var(--resident-shell-green) !important;

    border-color:
      rgba(
        21,
        251,
        0,
        0.38
      ) !important;

    background:
      linear-gradient(
        180deg,
        rgba(
          21,
          251,
          0,
          0.07
        ),
        rgba(
          10,
          12,
          10,
          0.98
        )
      ) !important;
  }

  .resident-shell-drawer-nav
  .resident-shell-admin-link {
    color:
      var(--resident-shell-green) !important;
  }

  .resident-shell-drawer-nav
  .resident-shell-investigator-link {
    color: #c45cff !important;
  }

  .resident-shell-drawer-nav
  .resident-shell-logout {
    margin-top: 6px !important;
  }
}

/* =========================================================
   HIDDEN / CONDITIONAL ITEMS
========================================================= */

body.resident-shell-page
.resident-shell-nav-link[hidden],
body.resident-shell-page
.resident-shell-nav-link.hidden,
body.resident-shell-page
.resident-shell-badge.hidden {
  display: none !important;
}

/* =========================================================
   SITE-SHELL-1C-2 — PROFILE PILOT CLEANUP
========================================================= */

/*
 * Profile is presentation-only now.
 *
 * The old edit/settings DOM stays mounted temporarily because
 * profile.js still contains compatibility logic that expects
 * those elements to exist.
 */
body.resident-shell-page
#foundingRewardsBanner,

body.resident-shell-page
#tabBtn-edit,

body.resident-shell-page
#tabBtn-settings,

body.resident-shell-page
#tab-edit,

body.resident-shell-page
#tab-settings {
  display: none !important;
}


/*
 * The actual Profile display pane always remains visible.
 */
body.resident-shell-page
#tab-profile {
  display: block !important;
}


/* =========================================================
   TEMPORARY TABLET / NARROW DESKTOP PROFILE FIX

   The desktop Resident rail still exists from 901px upward.
   At those widths the old two-column question/answer layout
   gets squeezed too tightly.

   Stack question above answer until the future Profile
   mockup redesign replaces this layout.
========================================================= */

@media (min-width: 901px) and (max-width: 1180px) {

  body.resident-shell-page
  .details-list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }


  body.resident-shell-page
  .details-list dt {
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }


  body.resident-shell-page
  .details-list dd {
    width: 100% !important;
    min-width: 0 !important;

    margin:
      -2px
      0
      10px !important;

    box-sizing: border-box !important;

    overflow-wrap: anywhere !important;
  }

}


/* =========================================================
   MOBILE DRAWER — RESIDENT IDENTITY

   Match the Resident Dashboard:
   avatar | username | close
            View Profile
========================================================= */

.resident-shell-drawer-profile {
  display: grid;

  grid-template-columns:
    72px
    minmax(0, 1fr)
    58px;

  align-items: center;

  gap: 14px;

  min-height: 132px;

  padding:
    max(20px, env(safe-area-inset-top))
    24px
    20px;

  box-sizing: border-box;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.12);
}


.resident-shell-drawer-profile img {
  display: block;

  width: 72px;
  height: 72px;

  margin: 0;
  padding: 0;

  object-fit: cover;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 50%;
}


.resident-shell-drawer-identity {
  min-width: 0;
}


.resident-shell-drawer-identity strong {
  display: block;

  overflow: hidden;

  color: #ffffff;

  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.15;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.resident-shell-drawer-identity a {
  display: inline-block;

  margin-top: 7px;
  padding: 0;

  color: #c45cff;

  background: transparent;
  border: 0;

  font-size: 0.95rem;

  text-decoration: underline;
}


/*
 * Larger mobile/tablet drawer identity,
 * matching the proportions of the Dashboard drawer.
 */
@media (min-width: 521px) and (max-width: 900px) {

  .resident-shell-drawer-profile {
    grid-template-columns:
      92px
      minmax(0, 1fr)
      72px;

    min-height: 168px;

    padding:
      max(30px, env(safe-area-inset-top))
      34px
      24px;
  }


  .resident-shell-drawer-profile img {
    width: 92px;
    height: 92px;
  }


  .resident-shell-drawer-identity strong {
    font-size: 1.7rem;
  }


  .resident-shell-drawer-identity a {
    font-size: 1.28rem;
  }

}

/* =========================================================
   SITE-SHELL-1D — RESIDENT DASHBOARD BRIDGE
========================================================= */

/*
 * Do not show the injected shared navigation
 * above the Dashboard authentication gate.
 */
body.resident-shell-page.auth-pending
.resident-shell-sidebar,

body.resident-shell-page.auth-pending
.resident-shell-drawer,

body.resident-shell-page.auth-pending
.resident-shell-backdrop {
  display: none !important;
}


/*
 * The old Dashboard layout expected its own sidebar
 * as column one. The shared shell now owns that space.
 */
body.courtyard-page.resident-shell-page
.courtyard-layout {
  display: block !important;

  grid-template-columns:
    none !important;

  width: 100% !important;
  min-width: 0 !important;
}


/*
 * Desktop: move the entire Dashboard application
 * beside the fixed shared Resident rail.
 */
@media (min-width: 901px) {

  body.courtyard-page.resident-shell-page
  .courtyard-app {
    width:
      calc(
        100% -
        var(
          --resident-shell-sidebar-width
        )
      ) !important;

    max-width:
      calc(
        100% -
        var(
          --resident-shell-sidebar-width
        )
      ) !important;

    margin:
      0
      0
      0
      var(
        --resident-shell-sidebar-width
      ) !important;

    min-width: 0 !important;
  }


  /*
   * This old margin existed because the Dashboard's
   * ZB/bell/avatar controls floated over the page.
   * The shared header now occupies normal page space.
   */
  body.courtyard-page.resident-shell-page
  .courtyard-main
  > #profileIncompleteNotice:not(.hidden),

  body.courtyard-page.resident-shell-page
  .courtyard-main
  > #residentBuilderCard:not(.hidden) {
    margin-top:
      0 !important;
  }

}


/*
 * Mobile: shared sidebar disappears, so Dashboard
 * returns to the full viewport width.
 */
@media (max-width: 900px) {

  body.courtyard-page.resident-shell-page
  .courtyard-app {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

}

/* =========================================================
   SITE-SHELL-1D-2 — FINAL SHARED HEADER ALIGNMENT
========================================================= */


/* =========================================================
   DESKTOP
   The Resident rail already contains the DDD logo.
   Keep only utilities in the upper-right header.
========================================================= */

@media (min-width: 901px) {

  body.resident-shell-page
  .resident-shell-top-header
  .logo-link {
    display: none !important;
  }


  body.resident-shell-page
  header.site-header.resident-shell-top-header {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  .header-right {
    grid-column: 2 !important;

    justify-self: end !important;

    width: auto !important;
  }

}


/* =========================================================
   MOBILE
   Old mobile.css assigns order/width rules to every
   .site-header. Reset them here so every migrated page uses:

   hamburger | centered logo | notification bell
========================================================= */

@media (max-width: 900px) {

  body.resident-shell-page
  header.site-header.resident-shell-top-header {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px !important;

    grid-template-rows:
      72px !important;

    align-items:
      center !important;

    min-height:
      88px !important;
  }


  body.resident-shell-page
  .resident-shell-menu-button {
    order:
      0 !important;

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    align-self:
      center !important;

    justify-self:
      start !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  .logo-link {
    order:
      0 !important;

    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      center !important;

    justify-self:
      center !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  .header-right {
    order:
      0 !important;

    grid-column:
      3 !important;

    grid-row:
      1 !important;

    align-self:
      center !important;

    justify-self:
      end !important;

    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  #notifBtn {
    order:
      0 !important;

    margin:
      0 !important;
  }

}

/* =========================================================
   SITE-SHELL-1D-3 — FINAL MOBILE PARITY

   Profile's existing signed-in mobile header is the
   approved visual source of truth.

   Standard:
   [ 58px hamburger ] [ 190px max logo ] [ 58px bell ]
   102px minimum header height
========================================================= */

@media (max-width: 820px) {

  body.resident-shell-page
  header.site-header.resident-shell-top-header {
    display: grid !important;

    grid-template-columns:
      64px
      minmax(0, 1fr)
      64px !important;

    grid-template-rows:
      auto !important;

    align-items:
      center !important;

    width:
      100% !important;

    max-width:
      100% !important;

    height:
      auto !important;

    min-height:
      102px !important;

    margin:
      0 !important;

    padding:
      10px
      12px !important;

    gap:
      8px !important;

    box-sizing:
      border-box !important;
  }


  /* ---------- Hamburger ---------- */

  body.resident-shell-page
  .resident-shell-menu-button {
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    justify-self:
      start !important;

    align-self:
      center !important;

    display:
      grid !important;

    place-items:
      center !important;

    width:
      58px !important;

    height:
      58px !important;

    min-width:
      58px !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    background:
      #0a0b0b !important;

    border:
      1px solid
      rgba(
        21,
        251,
        0,
        0.38
      ) !important;

    border-radius:
      12px !important;

    font-size:
      2rem !important;

    line-height:
      1 !important;
  }


  /* ---------- Center logo ---------- */

  body.resident-shell-page
  .resident-shell-top-header
  .logo-link {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    justify-self:
      stretch !important;

    align-self:
      center !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    width:
      100% !important;

    max-width:
      100% !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  .site-logo {
    display:
      block !important;

    width:
      min(
        190px,
        48vw
      ) !important;

    max-width:
      190px !important;

    height:
      auto !important;

    max-height:
      82px !important;

    margin:
      0 auto !important;

    object-fit:
      contain !important;
  }


  /* ---------- Notification side ---------- */

  body.resident-shell-page
  .resident-shell-top-header
  .header-right {
    grid-column:
      3 !important;

    grid-row:
      1 !important;

    justify-self:
      end !important;

    align-self:
      center !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      flex-end !important;

    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;

    height:
      58px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    gap:
      0 !important;
  }


  body.resident-shell-page
  .resident-shell-top-header
  #notifBtn {
    flex:
      0
      0
      58px !important;

    width:
      58px !important;

    height:
      58px !important;

    min-width:
      58px !important;

    min-height:
      58px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    font-size:
      1.6rem !important;
  }

}


/* =========================================================
   VISITOR PROFILE TAB SAFETY

   mobile.css explicitly forces .subtabs to display:flex.
   This stronger shared-shell rule makes "hidden" authoritative.
========================================================= */

body.resident-shell-page
#subtabs.hidden {
  display:
    none !important;
}