/* ============================================================================
   Memory Bible unified desktop shell — September 2026.
   Additive only: every rule is gated to >=1200px and body.desktopShellReady.
   The existing mobile bottom navigation and screen-specific DOM remain the source of
   truth; app-desktop.js mirrors their state into a persistent desktop top bar/sidebar.
   ============================================================================ */

#appDesktopShell { display: none; }

/* Settings may be opened from a still-mounted group detail on every viewport.
   The group is a later sibling at the shared detail-overlay tier (12), so give
   Settings an explicit overlay tier instead of relying on DOM order. */
#settingsOverlay.show { z-index: 220; }

@media (min-width: 1200px) {
  body.desktopShellReady.has-bottom-nav #appDesktopShell {
    display: block;
  }

  body.desktopShellReady.has-bottom-nav #bottomNavBar {
    display: none !important;
  }

  #adTopBar {
    position: fixed;
    z-index: 300;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 28px;
    background: linear-gradient(90deg, #102b4d 0%, #112844 100%);
    box-shadow: 0 2px 12px rgba(7, 22, 41, .18);
  }

  .adLogoBtn {
    width: 200px;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .adLogoBtn img {
    width: 184px;
    max-height: 37px;
    object-fit: contain;
    object-position: left center;
  }

  #adTopBarSearchHost {
    width: min(580px, 44vw);
    max-width: 580px;
    margin-left: clamp(0px, 4vw, 64px);
  }

  #adTopBarSearchHost .landingSearchWrap {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    display: flex !important;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(7,22,41,.14) !important;
  }

  #adTopBarSearchHost .landingSearchInputWrap {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #adTopBarSearchHost #landingSearchInput {
    height: 34px;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 66px 0 4px;
    border: 0;
    background: transparent;
    color: #3d4654;
    font-size: 13px;
  }

  #adTopBarSearchHost #landingSearchInput:focus { outline: none; }

  #adTopBarSearchHost #landingSearchBtn {
    order: 1;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #132f52;
    font-size: 18px;
  }

  #adTopBarSearchHost #landingVoiceSearchBtn { display: none; }

  #adTopBarSearchHost .landingSearchWrap::after {
    content: "Ctrl  K";
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid rgba(24,39,66,.12);
    border-radius: 5px;
    background: #f6f7f8;
    color: #6d7480;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
  }

  #adTopBarSearchHost #landingSearchSuggestions.show {
    position: fixed;
    z-index: 380;
    top: 54px;
    left: calc(246px + clamp(0px, 4vw, 64px));
    width: min(580px, 44vw);
    max-height: min(520px, calc(100vh - 72px));
    overflow-y: auto;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 30px rgba(7,22,41,.22);
  }

  #adTopBarSearchHost .landingSearchError {
    position: fixed;
    z-index: 381;
    top: 58px;
    left: calc(246px + clamp(0px, 4vw, 64px));
    width: min(580px, 44vw);
  }

  .adTopBarRight {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin-left: auto;
  }

  .adIconBtn,
  .adAvatarBtn {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }

  .adIconBtn { font-size: 21px; }
  .adIconBtn:hover,
  .adAvatarBtn:hover { background: rgba(255,255,255,.10); }

  .adNotifDot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border: 1.5px solid #112844;
    border-radius: 50%;
    background: #d8a62f;
  }

  .adAvatarInitials {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
  }

  #adSidebar {
    position: fixed;
    z-index: 300;
    top: 60px;
    bottom: 0;
    left: 0;
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 17px 10px 14px;
    overflow-y: auto;
    border-right: 1px solid rgba(24,39,66,.10);
    background: #fffdfa;
    box-shadow: 3px 0 12px rgba(24,39,66,.035);
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .adSidebarItem {
    position: relative;
    z-index: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #24364f;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
  }

  .adSidebarItem i {
    width: 24px;
    color: #64686f;
    font-size: 23px;
    text-align: center;
  }

  .adSidebarItem:hover { background: #f1ede4; color: #122d50; }
  .adSidebarItem.active {
    color: #fff;
    background: linear-gradient(135deg, #15385f, #102947);
    box-shadow: 0 5px 14px rgba(18,48,82,.18);
  }
  .adSidebarItem.active i { color: #fff; }
  .adSidebarSpacer { flex: 1 1 auto; }
  #adSettingsBtn { border-top: 1px solid rgba(24,39,66,.10); border-radius: 0; padding-top: 13px; }
  #adFeedbackBtn { min-height: 46px; color: #596270; }

  /* The unified shell replaces Home's and Groups' earlier page-local shells. */
  body.desktopShellReady #hdTopBar,
  body.desktopShellReady #hdSidebar,
  body.desktopShellReady #gdTopBar,
  body.desktopShellReady #gdSidebar { display: none !important; }

  /* Every primary application surface occupies the common desktop content region. */
  body.desktopShellReady.has-bottom-nav #app,
  body.desktopShellReady.has-bottom-nav #landingOverlay.show,
  body.desktopShellReady.has-bottom-nav .readerOverlay.show,
  body.desktopShellReady.has-bottom-nav .topicsOverlay.show,
  body.desktopShellReady.has-bottom-nav .detailOverlay.show,
  body.desktopShellReady.has-bottom-nav #pjGuidedFullOverlay.show,
  body.desktopShellReady.has-bottom-nav #verseImageOverlay.show {
    top: 60px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 210px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }

  body.desktopShellReady.has-bottom-nav #app {
    position: fixed;
    overflow: hidden;
    background-color: #faf8f2;
  }

  /* Settings can be opened while a group workspace (another detailOverlay) remains
     mounted. Give Settings an explicit layer above that later DOM sibling so it is
     visible, while retaining the shared desktop content bounds below the shell. */
  body.desktopShellReady.has-bottom-nav #settingsOverlay.show {
    z-index: 320;
  }

  body.desktopShellReady.has-bottom-nav #app > header {
    padding: 18px 34px 8px;
    color: #172f51;
  }

  body.desktopShellReady.has-bottom-nav #app .headerLeft .appHeaderLogo { display: none; }
  body.desktopShellReady.has-bottom-nav #app .headerLeft::after {
    content: "Memory Review";
    color: #172f51;
    font-family: 'Mongolian Baiti', 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 700;
  }

  body.desktopShellReady.has-bottom-nav #app #searchBar,
  body.desktopShellReady.has-bottom-nav #app #tagFilterBar,
  body.desktopShellReady.has-bottom-nav #app #listView {
    max-width: 1120px;
  }

  body.desktopShellReady.has-bottom-nav #app #stage {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 12px 36px;
  }

  body.desktopShellReady.has-bottom-nav #app footer {
    padding-bottom: 14px;
  }

  /* Home keeps the tested dashboard, but its outer grid now belongs to this shell. */
  body.v2Design.desktopShellReady.has-bottom-nav #landingOverlay.show {
    display: block;
    overflow: hidden;
    padding-bottom: 0;
    background: #faf8f2;
  }

  body.v2Design.desktopShellReady.has-bottom-nav #landingOverlay.show .landingContent {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 16px 18px 28px;
    overflow-y: auto;
    background: #faf8f2;
  }

  /* Groups keeps its real dashboard/content, without a second nested shell. */
  body.v2Design.desktopShellReady.has-bottom-nav #groupDetailOverlay.show {
    display: flex;
    overflow: hidden;
    background: #faf8f2;
  }

  body.v2Design.desktopShellReady.has-bottom-nav #groupDetailOverlay.show .groupWorkspaceModal {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 28px 32px 40px;
    overflow-y: auto;
  }

  /* Catalog, detail and reader pages use the width rather than a phone-sized center strip. */
  body.desktopShellReady.has-bottom-nav .topicsOverlay.show,
  body.desktopShellReady.has-bottom-nav .detailOverlay.show,
  body.desktopShellReady.has-bottom-nav .readerOverlay.show {
    background: #faf8f2;
  }

  body.desktopShellReady.has-bottom-nav .topicsOverlay.show .topicsModal {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px 30px 32px;
  }

  body.desktopShellReady.has-bottom-nav .topicsOverlay.show .topicsHeader {
    justify-content: space-between !important;
    margin-bottom: 18px;
  }

  body.desktopShellReady.has-bottom-nav .topicsOverlay.show .topicsHeader h2 {
    text-align: left;
  }

  body.desktopShellReady.has-bottom-nav .topicsGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  body.desktopShellReady.has-bottom-nav .detailOverlay.show .detailCard {
    width: calc(100% - 48px);
    max-width: 1240px;
    margin: 20px auto 30px;
    padding: 24px 28px 34px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(24,39,66,.07);
  }

  /* Church/Organization workspace — a full desktop dashboard instead of a phone card
     centered in a wide canvas. The organization identity and plan summary share the top
     row; leaders get the wide working column while group/access actions stay in a useful
     rail. Mobile continues to use the same DOM in its natural stacked order. */
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .topicsModal {
    width: 100%;
    max-width: 1500px;
    padding: 28px 34px 42px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .topicsHeader {
    max-width: 1360px;
    margin: 0 auto 22px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .topicsHeader h2 {
    text-align: left;
    font-size: 30px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .detailCard {
    width: 100%;
    max-width: 1360px;
    min-height: 0;
    margin: 0 auto;
    padding: 0 2px 36px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgOverviewGrid {
    grid-template-columns: minmax(0, 1.42fr) minmax(360px, .86fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgIdentityCard,
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgCurrentHero {
    min-height: 154px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgIdentityCard { padding: 24px 26px; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgIdentityIcon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 29px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgIdentityName {
    font-size: clamp(36px, 3vw, 46px);
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgIdentitySub { font-size: 13px; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgCurrentHero { padding: 22px 24px; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgCurrentHero .upgradeCurrentHeroTier { font-size: 29px; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
    gap: 26px;
    align-items: start;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgMainCol {
    grid-column: 1;
    grid-row: 1;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgSideCol {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 20px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgSeatGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgSectionAddBtn { display: inline-flex; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgSeatUsageCard { padding: 15px 18px; }
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay .churchOrgSeatRow { min-height: 72px; padding: 12px 14px; }

  /* Start/seat-only states use the same wide canvas and stronger hierarchy even though
     their controls remain unchanged. */
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgStartView,
  body.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgSeatOnlyView {
    max-width: 920px;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid rgba(24,39,66,.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(24,39,66,.06);
  }
  body.darkMode.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgStartView,
  body.darkMode.desktopShellReady.has-bottom-nav #churchOrgOverlay #churchOrgSeatOnlyView {
    border-color: var(--dm-line);
    background: var(--dm-panel);
  }

  /* The Verse Image creator is opened by the Groups "Memory Verse" block flow.
     It is a bespoke full-screen surface rather than a standard topics/detail overlay,
     so it previously kept inset:0 and its left-side tools disappeared underneath the
     persistent desktop sidebar. Give it the same usable desktop canvas as every other
     primary surface, then let the wide toolbar use the room instead of horizontally
     scrolling like the phone layout. */
  body.desktopShellReady.has-bottom-nav #verseImageOverlay.show .pjDrawingFullHeader {
    min-height: 64px;
    padding: 10px 24px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageOverlay .verseImageMainTabs {
    align-self: center;
    width: min(860px, calc(100% - 48px));
    max-width: none;
    margin: 12px auto 0;
    overflow: visible;
  }

  body.desktopShellReady.has-bottom-nav #verseImageOverlay .verseImageMainTabs > button {
    flex: 1 1 0;
    min-height: 50px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageOverlay .verseImageTabPanel {
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageOverlay .verseImageBgOptions {
    width: min(1040px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
    border: 1px solid rgba(24,39,66,.10);
    border-radius: 14px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageOverlay .verseImagePreviewScroll {
    padding: 22px 32px 30px;
  }

  /* Curated Art becomes a two-column desktop library. Each category is a compact card
     with a real thumbnail grid instead of another horizontal scroller. Expanding a
     category promotes it to the full row so large sets stay easy to scan. */
  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay.show .topicsModal {
    width: min(100%, 1320px);
    max-width: 1320px;
    padding: 24px 30px 34px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 18px;
    padding: 2px 2px 28px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategory {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(24,39,66,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(24,39,66,.06);
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategory:has(.verseImageArtRow.expanded) {
    grid-column: 1 / -1;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategoryHeader h3 {
    color: #182742;
    font-family: 'Mongolian Baiti', 'Playfair Display', Georgia, serif;
    font-size: 18px;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtSeeAllBtn {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(24,39,66,.12);
    border-radius: 10px;
    color: #17385e;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtRow,
  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtRow.expanded {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    overflow: visible;
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategory:has(.verseImageArtRow.expanded) .verseImageArtRow {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtRow .verseImageArtThumb {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  body.darkMode.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategory {
    border-color: var(--dm-line);
    background: var(--dm-panel);
    box-shadow: none;
  }

  body.darkMode.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtCategoryHeader h3,
  body.darkMode.desktopShellReady.has-bottom-nav #verseImageArtPickerOverlay .verseImageArtSeeAllBtn {
    color: var(--dm-ink);
  }

  body.desktopShellReady.has-bottom-nav .readerOverlay.show .readerModal {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    margin: 0 auto;
    border-right: 1px solid rgba(24,39,66,.08);
    border-left: 1px solid rgba(24,39,66,.08);
    background: #fff;
    box-shadow: 0 0 30px rgba(24,39,66,.06);
  }

  body.desktopShellReady.has-bottom-nav .readerOverlay.show .readerHeader {
    padding: 14px 30px 10px;
  }

  body.desktopShellReady.has-bottom-nav .readerOverlay.show .readerBody {
    box-sizing: border-box;
    padding: 28px clamp(44px, 8vw, 150px) 50px;
    border-radius: 16px 16px 0 0;
    font-size: 18px;
    line-height: 1.85;
  }

  body.desktopShellReady.has-bottom-nav footer,
  body.desktopShellReady.has-bottom-nav .topicsModal,
  body.desktopShellReady.has-bottom-nav .landingOverlay {
    padding-bottom: 24px;
  }

  body.desktopShellReady.has-bottom-nav .toast {
    bottom: 24px;
  }

  /* Study / My Stuff / More become desktop flyout panels rather than mobile sheets. */
  body.desktopShellReady.has-bottom-nav #bottomNavStudyBubbles,
  body.desktopShellReady.has-bottom-nav #bottomNavMyStuffBubbles,
  body.desktopShellReady.has-bottom-nav #bottomNavMoreBubbles {
    z-index: 360;
    inset: 60px 0 0 210px;
    padding: 16px 0 0 16px;
    align-items: flex-start;
    justify-content: flex-start;
    background: rgba(9,30,53,.18);
  }

  body.desktopShellReady.has-bottom-nav #bottomNavStudyBubbles .myStuffSheetModal,
  body.desktopShellReady.has-bottom-nav #bottomNavMyStuffBubbles .myStuffSheetModal,
  body.desktopShellReady.has-bottom-nav #bottomNavMoreBubbles .myStuffSheetModal {
    width: min(620px, calc(100vw - 254px));
    max-height: calc(100vh - 92px);
    padding: 18px 20px 22px;
    border: 1px solid rgba(24,39,66,.10);
    border-radius: 16px;
    animation: none;
    box-shadow: 0 18px 44px rgba(9,30,53,.22);
  }

  body.desktopShellReady.has-bottom-nav .myStuffSheetHandle { display: none; }
  body.desktopShellReady.has-bottom-nav .myStuffToolGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Better use of wide space in common list/card surfaces. */
  body.desktopShellReady.has-bottom-nav .notesList,
  body.desktopShellReady.has-bottom-nav .activityList,
  body.desktopShellReady.has-bottom-nav .settingsList {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
  }

  /* Members (openMembers/#membersOverlay — the app-wide "everyone using this app"
     directory, not a group's own People tab) used to inherit the same single-column,
     1120px-capped list every plain text list above gets — reasonable for Notes/Settings,
     but a directory of member rows (avatar + name + a couple of stats, most of each
     row's own width already empty) doesn't need to read top-to-bottom like prose, so it
     just wasted the desktop shell's width and forced excess scrolling. #membersOverlay's
     .detailCard widens past the shared 1240px .detailOverlay cap, and each .memberRowV2
     becomes its own bordered card in a responsive grid instead of one divided list. */
  body.desktopShellReady.has-bottom-nav #membersOverlay.show .detailCard {
    max-width: 1400px;
  }
  body.desktopShellReady.has-bottom-nav .membersListCard {
    background: none;
    box-shadow: none;
    padding: 0;
  }
  /* #membersList is an id-only div (no .membersList class actually exists in the markup —
     the shared "wide list" rule above used to reference that same nonexistent class, so
     it silently never applied here either), hence the id selector rather than a class. */
  body.desktopShellReady.has-bottom-nav #membersList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  body.desktopShellReady.has-bottom-nav #membersList .notesEmpty {
    grid-column: 1 / -1;
  }
  body.desktopShellReady.has-bottom-nav .memberRowV2 {
    align-items: center;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(24,39,66,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(24,39,66,.06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  body.desktopShellReady.has-bottom-nav .memberRowV2:hover {
    transform: translateY(-2px);
    border-color: rgba(201,155,63,.55);
    box-shadow: 0 11px 26px rgba(24,39,66,.10);
  }
  body.darkMode.desktopShellReady.has-bottom-nav .memberRowV2 {
    background: var(--dm-panel);
    border-color: var(--dm-line);
    box-shadow: none;
  }
  body.darkMode.desktopShellReady.has-bottom-nav .memberRowV2:hover {
    border-color: rgba(213,168,72,.5);
  }

  body.darkMode.desktopShellReady #adSidebar {
    border-right-color: var(--dm-line);
    background: var(--dm-panel);
  }

  body.darkMode.desktopShellReady .adSidebarItem,
  body.darkMode.desktopShellReady .adSidebarItem i { color: var(--dm-ink-muted); }
  body.darkMode.desktopShellReady .adSidebarItem:hover { background: rgba(247,236,213,.08); color: var(--dm-ink); }
  body.darkMode.desktopShellReady .adSidebarItem.active,
  body.darkMode.desktopShellReady .adSidebarItem.active i { color: #fff; }
  body.darkMode.desktopShellReady .adSidebarItem.active { background: linear-gradient(135deg, #193c62, #102844); }
  body.darkMode.desktopShellReady #adSettingsBtn { border-top-color: var(--dm-line); }
  body.darkMode.desktopShellReady.has-bottom-nav #app,
  body.darkMode.desktopShellReady.has-bottom-nav #landingOverlay.show,
  body.darkMode.desktopShellReady.has-bottom-nav .readerOverlay.show,
  body.darkMode.desktopShellReady.has-bottom-nav .topicsOverlay.show,
  body.darkMode.desktopShellReady.has-bottom-nav .detailOverlay.show,
  body.darkMode.v2Design.desktopShellReady.has-bottom-nav #groupDetailOverlay.show,
  body.darkMode.v2Design.desktopShellReady.has-bottom-nav #landingOverlay.show .landingContent {
    background-color: var(--dm-bg);
  }
}

/* A 3rd member card column comfortably fits once the widened 1400px .detailCard itself
   has the room (2 columns down to 1200px would otherwise leave each card overly wide). */
@media (min-width: 1500px) {
  body.desktopShellReady.has-bottom-nav #membersList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) and (max-width: 1320px) {
  #adSidebar { width: 196px; }
  body.desktopShellReady.has-bottom-nav #app,
  body.desktopShellReady.has-bottom-nav #landingOverlay.show,
  body.desktopShellReady.has-bottom-nav .readerOverlay.show,
  body.desktopShellReady.has-bottom-nav .topicsOverlay.show,
  body.desktopShellReady.has-bottom-nav .detailOverlay.show,
  body.desktopShellReady.has-bottom-nav #pjGuidedFullOverlay.show,
  body.desktopShellReady.has-bottom-nav #verseImageOverlay.show { left: 196px !important; }
  #adTopBarSearchHost { margin-left: 0; width: min(560px, 44vw); }
  #adTopBarSearchHost #landingSearchSuggestions.show,
  #adTopBarSearchHost .landingSearchError { left: 242px; width: min(560px, 44vw); }
  body.desktopShellReady.has-bottom-nav #bottomNavStudyBubbles,
  body.desktopShellReady.has-bottom-nav #bottomNavMyStuffBubbles,
  body.desktopShellReady.has-bottom-nav #bottomNavMoreBubbles { left: 196px; }
}