/* Mobile Community search surface. */

.community-explore-backdrop {
    display: none;
    width: 100%;
    min-height: calc(100vh - var(--mobile-app-header-height, 140px) - 74px);
    padding: 0 0 18px;
    background: var(--community-bg);
    box-sizing: border-box;
}

.community-explore-backdrop.is-open {
    display: block;
}

body.community-explore-open #community-room-rail,
body.community-explore-open #community-feed-modes,
body.community-explore-open #arena-grid {
    display: none !important;
}

.community-explore-sheet {
    width: 100%;
    max-width: 520px;
    min-height: calc(100vh - var(--mobile-app-header-height, 140px) - 92px);
    max-height: none;
    border-radius: 0;
    background: var(--community-bg);
    border: 0;
    box-shadow: none;
    color: var(--community-text);
    overflow: hidden;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-x: hidden;
    touch-action: pan-y;
    margin: 0 auto;
}

.community-explore-kicker {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--community-muted);
    font-weight: 950;
    margin-bottom: 8px;
}

/* No pill: the search row is just an icon, the field, and a hairline under it.
   The filled + bordered capsule was the loudest container on the screen. */
.community-explore-search {
    height: 52px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--community-border);
    background: transparent;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    margin-bottom: 14px;
}

.community-explore-search i {
    color: var(--community-muted);
    font-size: 16px;
}

#community-explore-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--community-text) !important;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0;
    caret-color: var(--primary-color);
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: var(--community-text) !important;
    user-select: text;
    -webkit-user-select: text;
}

#community-explore-input::placeholder {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    opacity: 1;
}

.community-explore-clear {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--community-text);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.community-explore-sheet.has-query .community-explore-clear {
    display: inline-flex;
}

.community-explore-room-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    padding: 0 0 12px;
    margin-right: 0;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}

.community-explore-room-rail::-webkit-scrollbar {
    display: none;
}

/* Room filters read as plain text with an underline on the active one, the way
   a tab row does — a scrolling strip of bordered capsules was pure chrome. */
.community-explore-room-chip {
    min-width: auto;
    max-width: 180px;
    min-height: 34px;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    padding: 0 2px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.community-explore-room-chip.is-active {
    background: transparent;
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
    border-bottom-color: var(--primary-color, #ff4d2e);
    box-shadow: none;
}

.community-explore-room-name {
    font-size: 13px;
    line-height: 1;
    font-weight: 920;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.community-explore-room-count {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--community-muted);
    white-space: nowrap;
}

.community-explore-room-chip.is-active .community-explore-room-count {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
}

.community-explore-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--community-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 3px 1px 10px;
}

/* Text action, not a chip. */
.community-explore-feed-btn {
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary-color, #ff4d2e);
    -webkit-text-fill-color: var(--primary-color, #ff4d2e);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.community-explore-feed-btn i {
    font-size: 10px;
    opacity: 0.72;
}

.community-explore-results {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: grid;
    align-content: start;
    gap: 0;
    padding-right: 0;
    border-top: 1px solid var(--community-border);
    max-width: 100%;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.community-explore-section-label {
    padding: 14px 0 8px;
    color: var(--community-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.community-explore-result {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-bottom: 1px solid var(--community-border);
    background: transparent;
    color: var(--community-text);
    border-radius: 0;
    padding: 15px 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.community-explore-result-body {
    min-width: 0;
}

.community-explore-result-chevron {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 12px;
    opacity: 0.48;
}

.community-explore-result:active {
    background: color-mix(in srgb, var(--community-text) 4%, transparent);
}

.community-explore-result.is-room .community-explore-avatar {
    background: rgba(var(--primary-rgb), 0.15);
}

.community-explore-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--community-text) 7%, transparent);
    color: var(--community-text);
    font-size: 14px;
    font-weight: 950;
}

.community-explore-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-explore-result-title {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
    color: var(--community-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-copy {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 760;
    color: var(--community-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--community-faint);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--community-text) 7%, transparent);
    color: var(--community-muted);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.community-explore-empty {
    padding: 46px 16px 32px;
    text-align: center;
    color: var(--community-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.community-explore-empty strong {
    display: block;
    color: var(--community-text);
    font-size: 17px;
    line-height: 1.1;
    font-weight: 950;
    margin-bottom: 8px;
}

html[data-theme="light"] .community-explore-backdrop {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .community-explore-sheet {
    background: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] .community-explore-search {
    background: color-mix(in srgb, var(--community-text) 3%, #ffffff) !important;
    border-color: rgba(5, 5, 5, 0.14) !important;
    box-shadow: 0 8px 22px rgba(5, 5, 5, 0.045) !important;
}

html[data-theme="light"] .community-explore-search i,
html[data-theme="light"] .community-explore-clear {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] #community-explore-input {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] #community-explore-input::placeholder {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] .community-explore-room-chip,
html[data-theme="light"] .community-explore-feed-btn {
    background: #f4f4f4 !important;
    border-color: rgba(5, 5, 5, 0.16) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    box-shadow: none !important;
}

html[data-theme="light"] .community-explore-room-chip .community-explore-room-name {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .community-explore-room-chip .community-explore-room-count {
    color: rgba(5, 5, 5, 0.58) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active {
    background: var(--community-text) !important;
    border-color: var(--community-text) !important;
    color: var(--community-bg) !important;
    -webkit-text-fill-color: var(--community-bg) !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active .community-explore-room-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active .community-explore-room-count {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .community-explore-meta,
html[data-theme="light"] .community-explore-section-label,
html[data-theme="light"] .community-explore-result-meta,
html[data-theme="light"] .community-explore-result-copy,
html[data-theme="light"] .community-explore-empty {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] .community-explore-results,
html[data-theme="light"] .community-explore-result {
    border-color: var(--community-border) !important;
}

html[data-theme="light"] .community-explore-result-title,
html[data-theme="light"] .community-explore-empty strong {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] .community-explore-avatar {
    background: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] .community-explore-backdrop {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light-accent"] .community-explore-sheet {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
    box-shadow: 0 18px 42px rgba(5, 5, 5, 0.07) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] .community-explore-search,
html[data-theme="light-accent"] .community-explore-room-chip,
html[data-theme="light-accent"] .community-explore-feed-btn,
html[data-theme="light-accent"] .community-explore-result {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 6%, #ffffff 94%) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    box-shadow: none !important;
}

html[data-theme="light-accent"] .community-explore-room-chip.is-active {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, #ffffff 84%) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 28%, rgba(5, 5, 5, 0.16)) !important;
}

html[data-theme="light-accent"] .community-explore-search i,
html[data-theme="light-accent"] .community-explore-clear,
html[data-theme="light-accent"] #community-explore-input,
html[data-theme="light-accent"] .community-explore-result-title,
html[data-theme="light-accent"] .community-explore-empty strong,
html[data-theme="light-accent"] .community-explore-room-chip .community-explore-room-name {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] #community-explore-input::placeholder,
html[data-theme="light-accent"] .community-explore-meta,
html[data-theme="light-accent"] .community-explore-section-label,
html[data-theme="light-accent"] .community-explore-result-meta,
html[data-theme="light-accent"] .community-explore-result-copy,
html[data-theme="light-accent"] .community-explore-empty,
html[data-theme="light-accent"] .community-explore-room-chip .community-explore-room-count {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

/* Final roomy pass for the mobile Community search/list surface. */
html body.community-active #community-explore-backdrop.community-explore-backdrop {
    position: relative !important;
    inset: auto !important;
    z-index: 9001 !important;
    width: 100% !important;
    /* Continue beneath the floating dock so no blank strip appears above its rounded edge. */
    height: calc(100dvh - var(--mobile-app-header-height, 74px) - 44px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 560px !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

html body.community-active #community-explore-backdrop .community-explore-sheet {
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 14px 18px 0 !important;
    background: #ffffff !important;
}

html body.community-active #community-explore-backdrop .community-explore-search {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(9, 9, 11, 0.04) !important;
}

html body.community-active #community-explore-backdrop #community-explore-input {
    font-size: 16px !important;
    font-weight: 780 !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip {
    min-height: 34px !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-meta {
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 11px !important;
}

html body.community-active #community-explore-backdrop .community-explore-feed-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
}

html body.community-active #community-explore-backdrop .community-explore-results {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 2px 0 0 !important;
    border-top: 0 !important;
    overflow-y: auto !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 0 !important;
    margin: 10px 0 2px !important;
}

/* Was a rounded, gradient-filled, shadowed tile per result — the main source
   of container noise on this screen. Now a flat row. */
html body.community-active #community-explore-backdrop .community-explore-result {
    min-height: 0 !important;
    padding: 13px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 44px minmax(0, 1fr) 18px !important;
    gap: 12px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    min-height: 78px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-meta {
    margin: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    margin: 0 !important;
    line-height: 1.18 !important;
}

/* ============================================================
   Lighter search: every element was sized like a primary action.
   Chips are filters, not buttons — one scrolling row instead of
   four wrapped rows of pills. Counts live in the list below, so
   the chips and the "Room" kicker were saying it twice.
   ============================================================ */
html body.community-active #community-explore-backdrop .community-explore-search {
    height: 44px !important;
    margin-bottom: 10px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
}

html body.community-active #community-explore-backdrop #community-explore-input {
    font-size: 15px !important;
    font-weight: 600 !important;
}

html body.community-active #community-explore-backdrop .community-explore-search i {
    font-size: 14px !important;
}

/* One row that scrolls, rather than a block of stacked pills. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding: 0 0 10px !important;
    scrollbar-width: none !important;
}

/* Text filters with an underline on the active one — no capsules. */
html body.community-active #community-explore-backdrop .community-explore-room-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active {
    background: transparent !important;
    border-bottom-color: var(--primary-color, #ff4d2e) !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active .community-explore-room-name {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-name {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Rows carry a title and a preview; the icon tile and kicker were overhead. */
/* Flat rows on a hairline, no rounded tile per result. */
html body.community-active #community-explore-backdrop .community-explore-result {
    gap: 12px !important;
    min-height: 0 !important;
    padding: 13px 2px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    background: transparent !important;
}

html body.community-active #community-explore-backdrop .community-explore-avatar {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    font-size: 12.5px !important;
    font-weight: 450 !important;
    line-height: 1.25 !important;
    opacity: 0.72 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-meta {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    padding-top: 4px !important;
    opacity: 0.5 !important;
}

/* The scope line repeated the count already shown on every row. */
html body.community-active #community-explore-backdrop .community-explore-meta {
    font-size: 9px !important;
    letter-spacing: 0.11em !important;
    padding: 0 1px 8px !important;
}

html body.community-active #community-explore-backdrop .community-explore-feed-btn {
    height: 25px !important;
    font-size: 9px !important;
}

/* These two carried a min-height from earlier passes that outranked the
   heights above — .is-room by specificity, the field by property. */
/* The field is a flex item pinned by its basis, so height alone never moved it. */
/* Underline, not a filled box — this is the last .community-explore-search
   rule, so the flat treatment has to be declared here to stick. */
html body.community-active #community-explore-backdrop .community-explore-search {
    flex: 0 0 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 2px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    min-height: 58px !important;
    align-items: center !important;
}

/* The rail bleeds past the sheet's 18px gutter so chips scroll to the screen
   edge instead of stopping short, while the first chip still lines up with
   the search field above it. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    margin-right: -18px !important;
    margin-left: -18px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    scroll-padding-left: 18px !important;
}

/* The results list scrolls behind a floating bottom nav, so it needs its own
   clearance — without it the final row sits under the nav and cannot be read. */
html body.community-active #community-explore-backdrop .community-explore-results {
    padding-bottom: 132px !important;
    scroll-padding-bottom: 132px !important;
}

/* Post rows are the same object as room rows: same card, same padding, same
   vertical centring. They were inheriting neither. */
html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title,
html body.community-active #community-explore-backdrop .community-explore-result-copy,
html body.community-active #community-explore-backdrop .community-explore-result-meta {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-chevron {
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* The sheet clips overflow, which cut the rail's right-hand bleed. Only the
   vertical axis needs clipping here; the rail owns its own horizontal scroll. */
html body.community-active #community-explore-backdrop .community-explore-sheet {
    overflow-x: visible !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    width: calc(100% + 36px) !important;
    max-width: none !important;
}

/* The scope line repeated the per-room counts already on every row below, so
   only the feed action stays and the row collapses toward the rail above it. */
html body.community-active #community-explore-backdrop .community-explore-meta {
    justify-content: flex-end !important;
    padding: 0 0 4px !important;
}

html body.community-active #community-explore-backdrop .community-explore-meta > span {
    display: none !important;
}

html body.community-active #community-explore-backdrop .community-explore-sheet {
    gap: 10px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    padding-bottom: 2px !important;
}

/* The section label earns its place (Rooms vs Posts) but not the space around it. */
html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 2px 0 0 !important;
    margin: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-results {
    gap: 7px !important;
}

/* Scope row: the rail and the feed action are the same decision — what am I
   looking at — so they share a line. The rail still bleeds to the screen edge;
   the button stays inside the gutter and does not scroll away with the chips. */
html body.community-active #community-explore-backdrop .community-explore-scope-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-scope-row .community-explore-room-rail {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: -18px !important;
    padding-right: 4px !important;
    padding-bottom: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-scope-row .community-explore-meta {
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* View feed moved to the Posts header: it is the step from browsing results to
   the room's feed, so it belongs with the posts, not among the filter chips
   where it read as one. The rail gets its full bleed back. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    width: calc(100% + 36px) !important;
    margin-right: -18px !important;
    margin-left: -18px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action .community-explore-feed-btn {
    flex: 0 0 auto !important;
    height: 25px !important;
    font-size: 9px !important;
}

/* The label is a flex item in the column results list, so it collapsed to zero
   width and took the button with it. */
html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action {
    width: 100% !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
}

/* [hidden] loses to the display rules above, so the scope row kept its box and
   left a gap between the chips and the first section. */
html body.community-active #community-explore-backdrop .community-explore-meta[hidden] {
    display: none !important;
}

/* type="search" paints its own clear control next to the custom one. */
html body.community-active #community-explore-backdrop #community-explore-input::-webkit-search-cancel-button,
html body.community-active #community-explore-backdrop #community-explore-input::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* ============================================================
   Breathing room. The earlier pass to make this lighter went too
   far: 58px rows separated by 7px with a 12px radius read as
   compressed rather than tidy — the corners nearly touch, so the
   eye sees one dense block instead of distinct results.
   Height comes from padding rather than a min-height, so a row
   with a long title grows instead of clipping.
   ============================================================ */
html body.community-active #community-explore-backdrop .community-explore-results {
    /* 2px stacked the rows into a solid block. The hairline does the dividing,
       so the gap only has to give each result room to breathe. */
    gap: 10px !important;
    padding-bottom: 132px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    /* Keep a floor: without one the row collapsed to 28px, shorter than the 34px
       avatar it contains. Padding adds to this so a two-line result still grows.
       No radius or side padding — rows run edge to edge under a hairline. */
    min-height: 66px !important;
    gap: 14px !important;
    padding: 16px 2px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: center !important;
}

/* Separation now comes from the row's own border-bottom; this inset shadow
   would draw a second line directly above it. */
html body.community-active #community-explore-backdrop .community-explore-result + .community-explore-result {
    box-shadow: none !important;
}

html body.community-active #community-explore-backdrop .community-explore-result:last-child {
    border-bottom: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result:active {
    background: color-mix(in srgb, var(--community-text) 4%, transparent) !important;
}

/* The label was tight against the row above it; give each section its own start. */
html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 20px 2px 8px !important;
    opacity: 0.45 !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label:first-child {
    padding-top: 6px !important;
}

/* Room and post rows share a first-line rhythm. */
html body.community-active #community-explore-backdrop .community-explore-result-body {
    gap: 4px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title {
    line-height: 1.25 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    line-height: 1.3 !important;
    opacity: 0.66 !important;
}

/* The field and the chips were 20px apart and the chips 30px from the results;
   even that spacing out settles the top of the sheet. */
html body.community-active #community-explore-backdrop .community-explore-sheet {
    gap: 14px !important;
    padding-top: 16px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    padding-bottom: 0 !important;
}