/*
 * OPC mobile v2 — parks + resource-hub structural adaptation.
 * Loaded after opc-mobile-native.css. Desktop remains untouched.
 */

.opc-v2-parks-header,
.opc-v2-resources-header,
.opc-v2-community-all,
.opc-v2-selected-tags {
  display: none;
}

@media (min-width: 821px) {
  .opc-community-card--selected > div > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 820px) {
  .opc-page.opc-mobile-ready[data-mobile-view="communities"] > .opc-header,
  .opc-page.opc-mobile-ready[data-mobile-view="resources"] > .opc-header {
    display: none;
  }

  .opc-page.opc-mobile-ready[data-mobile-view="communities"],
  .opc-page.opc-mobile-ready[data-mobile-view="resources"] {
    background: #f5f7fa;
  }

  /* Parks: purpose-built title/search/actions row */
  .opc-page[data-mobile-view="communities"] #communities.tcwf-section {
    padding: 0 0 calc(82px + env(safe-area-inset-bottom));
    background: #f5f7fa;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 var(--opc-mobile-gutter);
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .tcwf-section__header {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header {
    display: grid;
    width: calc(100% + (var(--opc-mobile-gutter) * 2));
    min-height: 54px;
    box-sizing: border-box;
    grid-template-columns: 108px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 7px;
    margin: 0 calc(var(--opc-mobile-gutter) * -1);
    padding: calc(5px + env(safe-area-inset-top)) var(--opc-mobile-gutter) 5px;
    border-bottom: 1px solid #e5e9f0;
    background: rgba(255, 255, 255, 0.98);
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header > strong {
    color: #0b1426;
    font-size: clamp(16px, 4.2vw, 19px);
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header form {
    position: relative;
    display: grid;
    min-width: 0;
    height: 44px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dfe4ec;
    border-radius: 23px;
    background: #fff;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header form > label,
  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header form > label {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header form > img {
    opacity: 0.7;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 12px;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header input::placeholder {
    color: #99a2b2;
    opacity: 1;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header form > button {
    position: absolute;
    inset: 0 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header > button {
    display: flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 2px 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #111827;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header > button span {
    font-size: 10px;
    line-height: 13px;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-community-tools {
    display: block;
    margin: 0 calc(var(--opc-mobile-gutter) * -1) 10px;
    padding: 0;
    background: #fff;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-community-tools .opc-mobile-chip-rail {
    gap: 8px;
    margin: 0;
    padding: 5px var(--opc-mobile-gutter) 6px;
    border-bottom: 1px solid #eaedf2;
    background: #fff;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-community-tools .opc-mobile-chip-rail button {
    min-width: 62px;
    min-height: 44px;
    padding: 0 14px;
    border-color: #ebedf1;
    border-radius: 9px;
    background: #f6f7f9;
    color: #1f2937;
    font-size: 13px;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-community-tools .opc-mobile-chip-rail button[aria-pressed="true"] {
    border-color: #dce8ff;
    background: #edf4ff;
    color: #0052d9;
    font-weight: 700;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-search-status {
    margin: 0;
    padding: 0 var(--opc-mobile-gutter);
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-search-status:empty {
    display: none;
  }

  /* Parks: reference-like featured rail */
  .opc-page[data-mobile-view="communities"] #community-showcase-grid {
    display: block;
    width: 100%;
    margin-top: 0;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid > .opc-community-tier {
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid #e8ebf0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(20, 39, 74, 0.035);
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid > .opc-community-tier:first-child {
    margin-top: 0;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__header,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__header {
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__header > div:first-child,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__header > div:first-child {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__header h3,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__header h3 {
    order: -1;
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__header > div:first-child > span,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__header > div:first-child > span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 7px;
    border-radius: 5px;
    background: #edf4ff;
    color: #0052d9;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__header p,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__header p,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-tier__controls > span:first-child,
  .opc-page[data-mobile-view="communities"] #community-showcase-grid .opc-community-runners__meta > span:first-child {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-community-all {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 2px;
    color: #5d687a;
    font-size: 11px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-community-all img {
    width: 14px;
    height: 14px;
    opacity: 0.72;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-flagship-frame {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-flagship-viewport {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 13px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-flagship-viewport::-webkit-scrollbar {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-flagship-track {
    display: flex;
    gap: 12px;
    transform: none !important;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship {
    position: relative;
    display: block;
    height: 176px;
    min-height: 176px;
    box-sizing: border-box;
    flex: 0 0 100%;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    background: #111827;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship:hover {
    transform: none;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.52) saturate(0.9);
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-label,
  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-card-demo {
    z-index: 3;
    top: 10px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: rgba(16, 24, 40, 0.76);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-label {
    left: 10px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-card-demo {
    right: 10px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-card__body {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    min-height: 0;
    grid-template-rows: 22px 15px 22px 44px;
    align-content: end;
    gap: 2px;
    padding: 42px 12px 4px;
    background: linear-gradient(180deg, transparent 18%, rgba(4, 10, 20, 0.18) 38%, rgba(4, 10, 20, 0.9) 100%);
    color: #fff;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-card__meta {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship h3 {
    height: 22px;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-card__body > p:not(.opc-community-card__meta) {
    display: block;
    height: 15px;
    min-height: 0;
    max-height: 15px;
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-tags {
    display: flex;
    height: 22px;
    min-height: 22px;
    gap: 5px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-tags li {
    display: inline-flex;
    min-height: 22px;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.42);
    color: #fff;
    font-size: 9px;
    line-height: 16px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-tags li:nth-child(n + 3) {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-tags img {
    width: 14px;
    height: 14px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-card-footer {
    display: flex;
    height: 44px;
    min-height: 44px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-footer-views {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-footer-views img {
    width: 15px;
    height: 15px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-footer-views strong,
  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-community-footer-views small {
    color: inherit;
    font-size: inherit;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-text-button {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: right;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-text-button {
    font-size: 0;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-card--flagship .opc-text-button::before {
    content: "申请入驻";
    font-size: 12px;
  }

  .opc-page[data-mobile-view="communities"] #communities .opc-community-flagship-side {
    display: none;
  }

  /* Parks: dense two-column selected directory */
  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-runners__meta {
    display: flex;
    align-items: center;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-runners__controls,
  .opc-page[data-mobile-view="communities"] #community-selected > .opc-section-more {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-runners__viewport {
    overflow: visible;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-runners__track {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    transform: none !important;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card {
    position: relative;
    display: flex;
    width: auto;
    min-width: 0;
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e6e9ee;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card[hidden] {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card > img {
    display: block;
    width: 100%;
    height: 60px;
    min-height: 60px;
    object-fit: cover;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card > div {
    display: flex;
    min-height: 108px;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 3px 8px 1px;
    overflow: hidden;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card > div > span {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 7px;
    display: block;
    max-width: calc(100% - 14px);
    min-height: 25px;
    overflow: hidden;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(16, 24, 40, 0.76);
    color: #fff;
    font-size: 9px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card h4 {
    display: -webkit-box;
    height: 17px;
    min-height: 17px;
    margin: 0;
    overflow: hidden;
    color: #131a27;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card > div > p {
    display: -webkit-box;
    height: 13px;
    min-height: 13px;
    max-height: 13px;
    margin: 1px 0 0;
    overflow: hidden;
    color: #7a8495;
    font-size: 9px;
    line-height: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-v2-selected-tags {
    display: flex;
    height: 19px;
    min-height: 19px;
    min-width: 0;
    gap: 4px;
    margin: 2px 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-v2-selected-tags li {
    min-width: 0;
    overflow: hidden;
    padding: 2px 5px;
    border-radius: 4px;
    background: #f3f5f8;
    color: #667085;
    font-size: 8px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card footer {
    display: flex;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    margin: auto 0 0;
    border-top: 1px solid #f0f1f4;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card footer strong {
    display: block;
    overflow: hidden;
    color: #677286;
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="communities"] #community-selected .opc-community-card footer button {
    width: auto;
    min-width: 62px;
    min-height: 44px;
    padding: 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0052d9;
    font-size: 10px;
    font-weight: 700;
  }

  .opc-page[data-mobile-view="communities"] #communities:has([data-mobile-community-city="all"][aria-pressed="true"]):has(.opc-mobile-search-status:empty) #community-selected .opc-community-card:nth-child(n + 5) {
    display: none;
  }

  .opc-page[data-mobile-view="communities"] #community-runners,
  .opc-page[data-mobile-view="communities"] #community-grid-legacy,
  .opc-page[data-mobile-view="communities"] #communities .opc-footnote {
    display: none !important;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card {
    display: grid;
    width: 100%;
    min-height: 44px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 4px 8px;
    border: 1px solid #d7e4f8;
    border-radius: 12px;
    background: #edf5ff;
    color: #152a4f;
    text-align: left;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card > img {
    width: 22px;
    height: 22px;
    margin: auto;
    filter: invert(27%) sepia(96%) saturate(2940%) hue-rotate(211deg) brightness(83%) contrast(111%);
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card strong {
    font-size: 12px;
    line-height: 18px;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card small {
    color: #66758e;
    font-size: 10px;
    line-height: 15px;
  }

  .opc-page[data-mobile-view="communities"] #communities > .tcwf-section__inner > .opc-mobile-location-card em {
    display: inline-flex;
    min-width: 80px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: #0052d9;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
  }

  .opc-page[data-mobile-view="communities"] .opc-mobile-dock {
    height: 62px;
    min-height: 62px;
    grid-template-rows: 56px;
  }

  /* Resources: title/search/notification/avatar bar */
  .opc-page[data-mobile-view="resources"] #resources.tcwf-section {
    padding: 0 0 calc(82px + env(safe-area-inset-bottom));
    background: #fff;
  }

  .opc-page[data-mobile-view="resources"] #resources > .tcwf-section__inner {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 var(--opc-mobile-gutter);
  }

  .opc-page[data-mobile-view="resources"] #resources > .tcwf-section__inner > .tcwf-section__header {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header {
    display: grid;
    width: calc(100% + (var(--opc-mobile-gutter) * 2));
    min-height: 58px;
    box-sizing: border-box;
    grid-template-columns: 90px minmax(0, 1fr) 40px 40px;
    gap: 5px;
    align-items: center;
    gap: 7px;
    margin: 0 calc(var(--opc-mobile-gutter) * -1);
    padding: calc(5px + env(safe-area-inset-top)) var(--opc-mobile-gutter) 5px;
    border-bottom: 1px solid #e5e9f0;
    background: rgba(255, 255, 255, 0.98);
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header > strong {
    color: #0b1426;
    font-size: clamp(17px, 4.6vw, 20px);
    font-weight: 700;
    line-height: 26px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header form {
    position: relative;
    display: grid;
    min-width: 0;
    height: 44px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dfe4ec;
    border-radius: 23px;
    background: #fff;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 12px;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header input::placeholder {
    color: #99a2b2;
    opacity: 1;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header form > button {
    position: absolute;
    inset: 0 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header > button {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header .opc-v2-resource-avatar {
    overflow: hidden;
    border: 1px solid #e5e8ee;
  }

  .opc-page[data-mobile-view="resources"] .opc-v2-resource-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .opc-page[data-mobile-view="resources"] .opc-mobile-resource-tabs {
    position: relative;
    z-index: 1;
    top: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 calc(var(--opc-mobile-gutter) * -1) 10px;
    padding: 0 var(--opc-mobile-gutter);
    overflow: visible;
    border-bottom: 1px solid #e6e9ee;
    background: #fff;
    backdrop-filter: none;
  }

  .opc-page[data-mobile-view="resources"] .opc-mobile-resource-tabs button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 0 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #202938;
    font-size: 13px;
    font-weight: 500;
  }

  .opc-page[data-mobile-view="resources"] .opc-mobile-resource-tabs button[aria-pressed="true"] {
    border: 0;
    background: transparent;
    color: #0052d9;
    font-weight: 700;
  }

  .opc-page[data-mobile-view="resources"] .opc-mobile-resource-tabs button[aria-pressed="true"]::after {
    position: absolute;
    right: 15%;
    bottom: -1px;
    left: 15%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #0052d9;
    content: "";
  }

  /* Resources: one large, horizontal expert card */
  .opc-page[data-mobile-view="resources"] #resources .opc-expert-library {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    scroll-margin-top: 60px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-subsection-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-subsection-heading > div:first-child {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-subsection-heading h3 {
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-subsection-heading p {
    display: block;
    max-width: 176px;
    overflow: hidden;
    color: #7a8496;
    font-size: 10px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-carousel-controls {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-viewport {
    width: calc(100% + var(--opc-mobile-gutter));
    margin-top: 0;
    overflow: hidden;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-track {
    align-items: start;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-page {
    min-width: 100%;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-page__grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: min(84vw, 328px);
    grid-auto-flow: column;
    gap: 10px;
    padding: 1px var(--opc-mobile-gutter) 7px 1px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-page__grid::-webkit-scrollbar {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card {
    position: relative;
    min-width: 0;
    height: 174px;
    min-height: 174px;
    max-height: 174px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px 12px;
    border: 1px solid #d7e5fb;
    border-radius: 12px;
    background: #f2f7ff;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card__identity {
    display: block;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card__identity > img {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 68px;
    height: 68px;
    border: 2px solid #c8daf7;
    border-radius: 50%;
    object-fit: cover;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card__identity > div {
    position: absolute;
    top: 10px;
    right: 12px;
    left: 90px;
    min-width: 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-tags span {
    min-height: 22px;
    padding: 2px 6px;
    border: 1px solid #d7e5fb;
    border-radius: 4px;
    background: #fff;
    color: #34527f;
    font-size: 9px;
    line-height: 16px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card h4 {
    margin-top: 2px;
    color: #111827;
    font-size: 17px;
    line-height: 23px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card__identity p {
    color: #66758e;
    font-size: 10px;
    line-height: 16px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card__intro {
    position: absolute;
    top: 70px;
    right: 12px;
    left: 90px;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #4f607a;
    font-size: 10px;
    line-height: 15px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-topic {
    position: absolute;
    top: 101px;
    right: 12px;
    left: 90px;
    display: flex;
    margin: 0;
    padding: 4px 7px;
    border-radius: 4px;
    background: #e7f0ff;
    color: #4e6486;
    font-size: 9px;
    line-height: 15px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-topic strong {
    flex: 0 0 auto;
    margin-right: 6px;
    color: #0052d9;
    font-size: inherit;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-topic span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card footer {
    position: absolute;
    right: 10px;
    bottom: 2px;
    left: 12px;
    display: flex;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
    margin: 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card footer > span {
    color: #6b7689;
    font-size: 10px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card footer > span strong {
    color: #0052d9;
    font-size: 15px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-expert-card .opc-text-button {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    min-height: 44px;
    flex: 0 0 86px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    background: #0052d9;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  .opc-page[data-mobile-view="resources"] #resources > .tcwf-section__inner > .opc-section-more {
    display: none;
  }

  /* Resources: three-up activity rail */
  .opc-page[data-mobile-view="resources"] #resources .opc-activity-hub {
    margin: 12px 0 0;
    scroll-margin-top: 60px;
  }

  .opc-page[data-mobile-view="resources"] #resources #activities > .opc-section-more {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-heading > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-heading .opc-meta-label {
    order: 2;
    margin: 0;
    color: #818b9c;
    font-size: 10px;
    letter-spacing: 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-heading h3 {
    color: #101828;
    font-size: 18px;
    line-height: 26px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-heading p,
  .opc-page[data-mobile-view="resources"] #resources .opc-activity-carousel-controls,
  .opc-page[data-mobile-view="resources"] #resources .opc-activity-arrow {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-carousel-frame {
    display: block;
    margin-top: 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-viewport {
    width: calc(100% + var(--opc-mobile-gutter));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-viewport::-webkit-scrollbar {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-grid {
    display: flex;
    gap: 8px;
    padding: 1px var(--opc-mobile-gutter) 7px 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card {
    position: relative;
    display: block;
    min-width: 0;
    height: 148px;
    min-height: 148px;
    max-height: 148px;
    box-sizing: border-box;
    flex: 0 0 clamp(108px, 29.5vw, 124px);
    overflow: hidden;
    border: 1px solid #e3e7ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    scroll-snap-align: start;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card > img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card > div {
    min-height: 76px;
    padding: 8px 8px 5px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card > div > span {
    position: absolute;
    top: 55px;
    left: 5px;
    max-width: calc(100% - 10px);
    min-height: 22px;
    overflow: hidden;
    padding: 3px 6px;
    border-radius: 4px;
    background: #006eff;
    color: #fff;
    font-size: 8px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card h4 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #172033;
    font-size: 10px;
    font-weight: 650;
    line-height: 15px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card p {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card dl {
    display: block;
    margin: 4px 38px 0 0;
    color: #7b8698;
    font-size: 8px;
    line-height: 13px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card dl div {
    display: block;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card dl div:nth-child(n + 3),
  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card dt {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-activity-card .tcwf-action {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #edf5ff url("./assets/icons/lucide/chevron-right.svg") center / 17px 17px no-repeat;
    color: transparent;
    font-size: 0;
  }

  /* Resources: four-up tool shelf; learning-specific sheet may override. */
  .opc-page[data-mobile-view="resources"] #resources .opc-resource-card--more {
    grid-column: 1 / -1;
    min-height: 0;
    margin-top: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-card--more .opc-resource-card__body {
    min-height: 0;
    padding: 0;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-card--more h4 {
    display: block;
    margin: 0 0 8px;
    color: #101828;
    font-size: 18px;
    line-height: 26px;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-card--more .opc-resource-card__body > p {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(78px, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0 0 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list::-webkit-scrollbar {
    display: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list a {
    display: flex;
    min-width: 78px;
    min-height: 106px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    text-decoration: none;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list a > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list a span {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list strong {
    overflow: hidden;
    color: #182033;
    font-size: 10px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list small {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: #006eff;
    font-size: 8px;
    line-height: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list p,
  .opc-page[data-mobile-view="resources"] #resources .opc-resource-tool-list em,
  .opc-page[data-mobile-view="resources"] #resources .opc-resource-card--more > .opc-resource-card__body > .opc-resource-action {
    display: none;
  }
}

@media (max-width: 374px) {
  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header,
  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header {
    grid-template-columns: auto minmax(82px, 1fr) 42px 42px;
    gap: 4px;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header > strong,
  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header > strong {
    font-size: 15px;
  }

  .opc-page[data-mobile-view="communities"] .opc-v2-parks-header > button,
  .opc-page[data-mobile-view="resources"] .opc-v2-resources-header > button {
    width: 42px;
    min-width: 42px;
  }
}