.rail-community-group { border: 0; }
.rail-community-group > summary { cursor: pointer; list-style: none; }
.rail-community-group > summary::-webkit-details-marker { display: none; }
.rail-community-group .rail-heading { min-height: 32px; margin: 0; }
.rail-community-group .rail-heading svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .16s ease; }
.rail-community-group:not([open]) .rail-heading svg { transform: rotate(-90deg); }
.rail-see-all { display: block; margin-top: 5px; padding: 7px 10px; color: var(--accent-2); font-size: 10px; }
#shell-main.shell-loading { opacity: .45; pointer-events: none; }
#shell-main { transition: opacity .14s ease; }
:root[data-theme] body.feed-tab-pending .home-topbar{-webkit-backdrop-filter:none;backdrop-filter:none}
body.feed-tab-pending .home-topbar .brand-mark{position:fixed;z-index:40;top:calc(50% - 24px);left:50%;width:72px;height:48px;margin-left:-36px;transform-origin:50% 100%;animation:feed-muxi-pounce 1.05s cubic-bezier(.45,0,.55,1) infinite}
body.feed-tab-pending .home-topbar .brand::after{content:"";display:block;flex:0 0 46px;width:46px;height:31px;background:url('/branding/mushimu-mark-39b6fd7200f458a2ed68a347dc6333e9.svg') center/contain no-repeat}
:root[data-theme="light"] body.feed-tab-pending .home-topbar .brand::after{background-image:url('/branding/mushimu-mark-light-80ad6cce30b08a46fe1f3e0ebb97c7fd.svg')}
@keyframes feed-muxi-pounce{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}12%{transform:translateY(2px) rotate(-5deg) scale(1.12,.82)}35%{transform:translateY(-22px) rotate(3deg) scale(.92,1.08)}52%{transform:translateY(-25px) rotate(-2deg) scale(1,1)}72%{transform:translateY(1px) rotate(4deg) scale(1.12,.84)}84%{transform:translateY(-4px) rotate(-2deg) scale(.96,1.04)}}
/* Keep the shell responsive and show a destination placeholder during navigation. */
#shell-main .shell-route-loader{display:flex;flex-direction:column;gap:20px;max-width:920px;min-height:390px;padding:18px 12px 32px;margin:0 auto}
.shell-route-loading-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted,#a7adba)}
.shell-route-loading-label::before{content:"";display:block;width:17px;height:17px;flex:none;border:2px solid rgba(244,122,96,.2);border-top-color:var(--accent,#F47A60);border-radius:50%;animation:shell-route-spin .75s linear infinite}
.shell-route-skeleton{display:flex;flex-direction:column;gap:14px;width:100%}
.shell-route-skeleton-card{display:flex;flex-direction:column;gap:13px;min-height:104px;padding:19px;border:1px solid rgba(127,132,156,.16);border-radius:14px;background:rgba(127,132,156,.035)}
.shell-route-skeleton-line{display:block;height:12px;max-width:100%;border-radius:7px;background:linear-gradient(100deg,rgba(127,132,156,.10) 20%,rgba(127,132,156,.23) 45%,rgba(127,132,156,.10) 70%);background-size:200% 100%;animation:shell-route-shimmer 1.5s ease-in-out infinite}
.shell-route-skeleton-line:nth-child(1){width:43%;height:17px}
.shell-route-skeleton-line:nth-child(2){width:91%}
.shell-route-skeleton-line:nth-child(3){width:66%}
.shell-route-skeleton-card:nth-child(2) .shell-route-skeleton-line:first-child{width:57%}
@keyframes shell-route-spin{to{transform:rotate(360deg)}}
@keyframes shell-route-shimmer{to{background-position-x:-200%}}
@media(prefers-reduced-motion:reduce){.shell-route-loading-label::before,.shell-route-skeleton-line,body.feed-tab-pending .home-topbar .brand-mark{animation:none}}
.home-shell > #shell-main { width: 100%; max-width: none; min-width: 0; margin: 0; }
.home-shell > #shell-main.single,.home-shell > #shell-main.thread,.home-shell > #shell-main.explore-shell,.home-shell > #shell-main.communities-page { width: 100%; min-width: 0; margin: 0; padding: 0 0 80px; }
.home-shell > #shell-main .community-head { margin-top: 0; }
.home-shell > #shell-main.post-main,.home-shell > #shell-main.profile-shell,.home-shell > #shell-main.community-page-v2 { padding-top: 0; padding-bottom: 80px; }
.home-shell > #shell-main .community-home-link,.home-shell > #shell-main .shell-home-fallback { display: none; }
.home-nav a.active { box-shadow: inset 3px 0 0 var(--accent); }

.home-feed .mixed-item.feed-item-hidden > :not(.feed-hidden-placeholder){display:none!important}
.feed-hidden-placeholder{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid #263241;border-radius:12px;background:#101720;color:#8f99a8;font-size:13px}
.feed-hidden-placeholder::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:999px;background:#596579}
.feed-hidden-placeholder>span{margin-right:auto}
.feed-hidden-show{border:1px solid #343f52;border-radius:999px;background:#171e29;color:#c9d0db;min-height:34px;padding:6px 13px;font:inherit;font-weight:700;cursor:pointer}
.feed-hidden-show:hover{border-color:rgba(244,122,96,.35);background:var(--accent-soft);color:#FFD8CF}
.feed-hidden-show:disabled{opacity:.55;cursor:wait}

/* Mobile shell: brand + search in the header, account actions in the bottom navigation. */
@media(max-width:680px){
    .home .home-topbar{
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        gap:12px;
        min-height:72px;
        padding:10px 16px;
        align-items:center;
    }
    .home .home-topbar .brand{
        display:flex;
        align-items:center;
        justify-self:start;
        flex:0 0 auto;
        margin:0;
        font-size:23px;
        line-height:1;
    }
    .home .home-topbar .brand-name{
        display:none;
    }
    .home .home-topbar .brand-mark{
        display:block;
        white-space:nowrap;
    }
    .home .home-topbar .compact-account{
        display:none;
    }
    .home .home-topbar .header-search{
        display:flex;
        width:100%;
        max-width:none;
        min-width:0;
        margin:0;
        height:46px;
        justify-self:stretch;
    }
    .home .home-topbar .header-search input{
        width:100%;
        min-width:0;
        font-size:16px;
    }
    .home .feed-header{
        top:60px;
    }
    .home .mobile-bottom-nav .mobile-nav-icon{
        position:relative;
        width:28px;
        height:28px;
        display:grid;
        place-items:center;
    }
    .home .mobile-bottom-nav .mobile-nav-icon svg{
        width:25px;
        height:25px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    .home .mobile-notification-count{
        position:absolute;
        top:-5px;
        right:-8px;
        min-width:17px;
        height:17px;
        padding:0 4px;
        display:grid;
        place-items:center;
        border:2px solid #151E29;
        border-radius:999px;
        background:var(--accent);
        color:var(--accent-ink,#0C1117);
        font-size:10px;
        line-height:1;
    }
    .home .mobile-profile-avatar{
        width:29px;
        height:29px;
        display:grid;
        place-items:center;
        overflow:hidden;
        border-radius:8px;
        background:linear-gradient(135deg,#F47A60,#FF9F87);
        border:1px solid rgba(255,255,255,.16);
        box-shadow:0 0 0 2px rgba(244,122,96,.08);
        color:var(--accent-ink,#0C1117);
        font-size:11px;
        font-weight:800;
    }
    .home .mobile-profile-avatar img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
    }
    .home .mobile-profile-avatar.avatar-variant-official img{
        width:82%;
        height:82%;
        object-fit:contain;
    }
    .feed-hidden-placeholder{margin:0 8px;border-radius:10px;min-height:54px;padding:10px 13px}
    .feed-hidden-show{min-height:38px;padding-inline:14px}
}

/* Every page uses the same mobile account entry points and translation control. */
@media(max-width:680px){
    .home .home-topbar { grid-template-columns:auto minmax(0,1fr) auto; }
    .home .home-topbar .compact-account { display:flex; grid-column:3; grid-row:1; }
    .home .home-topbar .header-search { order:0; grid-column:2; grid-row:1; }
    /* The account menu is the only place with sign-out, so it stays reachable on mobile. */
    .home .home-topbar .compact-account > :not(.global-translation):not(.muxi-indicator):not(.account-popover):not(.notification-button):not(.theme-toggle-button) { display:none; }
    .home .home-topbar .account-popover-menu { top:78px; }
    .home .home-topbar .translation-menu-trigger { width:44px; height:44px; }
    .home .home-topbar .muxi-indicator{width:auto;min-width:44px;height:44px;padding:0 9px;justify-content:center;gap:6px}
    .home .home-topbar .muxi-indicator-label{display:inline;font-size:11px;line-height:1;font-variant-numeric:tabular-nums}
    .home .home-topbar .muxi-indicator-art{width:32px;height:32px}
}

@media(max-width:390px){
    .home .home-topbar{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding-inline:10px}
    .home .home-topbar .compact-account{gap:4px}
    .home .home-topbar .header-search{height:44px}
}

/* Size the mobile dock from its actual links, including the signed-out state. */
@media(max-width:680px){
    body.home .mobile-bottom-nav{
        position:fixed;
        z-index:30;
        left:12px;
        right:12px;
        bottom:max(10px,env(safe-area-inset-bottom));
        display:grid;
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        gap:2px;
        padding:6px;
        border:1px solid rgba(127,132,156,.20);
        border-radius:24px;
        background:rgba(18,23,32,.93);
        box-shadow:0 12px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.035);
        backdrop-filter:blur(20px) saturate(1.18);
    }
    .home .mobile-bottom-nav > a{
        width:auto;
        min-width:0;
        height:auto;
        min-height:64px;
        margin:0;
        padding:6px 2px;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:center;
        gap:4px;
        border:0;
        border-radius:14px;
        box-shadow:none;
        color:#8f99aa;
        transition:background .15s ease,color .15s ease,transform .12s ease;
    }
    .home .mobile-bottom-nav > a:hover,
    .home .mobile-bottom-nav > a.active{background:rgba(244,122,96,.11);color:#FFD8CF}
    .home .mobile-bottom-nav > a:active{transform:scale(.96)}
    .home .mobile-bottom-nav > a > small{
        position:static;
        width:100%;
        height:auto;
        margin:0;
        clip:auto;
        overflow:visible;
        white-space:nowrap;
        overflow-wrap:normal;
        word-break:normal;
        text-overflow:clip;
        text-align:center;
        font-size:10px;
        line-height:1.2;
    }
    .home .mobile-bottom-nav > .mobile-create{
        width:50px;
        height:54px;
        min-height:54px;
        justify-self:center;
        align-self:center;
        justify-content:center;
        padding:0;
        border:1px solid rgba(255,255,255,.18);
        border-radius:17px;
        background:linear-gradient(145deg,#FF8D73,#E9664F);
        color:#0C1117;
        box-shadow:0 7px 18px rgba(217,102,79,.30),inset 0 1px 0 rgba(255,255,255,.18);
    }
    .home .mobile-bottom-nav > .mobile-create > svg{
        width:28px;
        height:28px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
    }
    .home .mobile-bottom-nav > .mobile-create > small{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
        border:0;
    }
    .home .mobile-bottom-nav .mobile-nav-icon,
    .home .mobile-bottom-nav .mobile-profile-avatar{flex:none;height:28px}
    .home .home-shell{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}

@media(max-width:360px){
    .home .mobile-bottom-nav > a > small{font-size:10px}
}

/* The desktop rail is hidden below 880px; keep primary destinations reachable on tablets. */
@media (min-width:681px) and (max-width:880px){
    .home .home-shell{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
    .home .mobile-bottom-nav{
        position:fixed;
        z-index:30;
        left:50%;
        bottom:max(14px,env(safe-area-inset-bottom));
        transform:translateX(-50%);
        width:min(560px,calc(100vw - 32px));
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        gap:4px;
        padding:7px;
        border:1px solid rgba(127,132,156,.2);
        border-radius:20px;
        background:rgba(18,23,32,.95);
        box-shadow:0 12px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.035);
        backdrop-filter:blur(20px) saturate(1.18);
    }
    .home .mobile-bottom-nav>a{
        display:flex;
        min-width:0;
        min-height:54px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        border-radius:14px;
        color:var(--muted);
        font-size:19px;
    }
    .home .mobile-bottom-nav>a.active{background:rgba(244,122,96,.12);color:#FFB19E}
    .home .mobile-bottom-nav>a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .home .mobile-bottom-nav>a>small{font-size:10px;line-height:1.1}
    .home .mobile-bottom-nav .mobile-nav-icon{width:28px;height:28px;display:grid;place-items:center}
    .home .mobile-bottom-nav .mobile-nav-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .home .mobile-bottom-nav .mobile-profile-avatar{width:28px;height:28px;display:grid;place-items:center;overflow:hidden;border-radius:8px;font-size:11px;font-weight:800}
    .home .mobile-bottom-nav .mobile-profile-avatar img{width:100%;height:100%;object-fit:cover}
    .home .mobile-bottom-nav>.mobile-create{width:48px;height:48px;min-height:48px;justify-self:center;align-self:center;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:linear-gradient(145deg,#FF8D73,#E9664F);color:#0C1117;box-shadow:0 7px 18px rgba(217,102,79,.3)}
    .home .mobile-bottom-nav>.mobile-create>svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
    .home .mobile-bottom-nav>.mobile-create>small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    body.composer-standalone .composer-page{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
}

/* The mobile dock should read as a dark, high-contrast surface with Mushimu coral controls. */
@media(max-width:680px){
    .home .mobile-bottom-nav{
        border-color:rgba(255,255,255,.16);
        background:linear-gradient(145deg,rgba(39,44,54,.76),rgba(9,12,17,.78) 62%,rgba(22,17,19,.76));
        box-shadow:0 14px 38px rgba(0,0,0,.48),0 2px 10px rgba(244,122,96,.06),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.035);
        -webkit-backdrop-filter:blur(26px) saturate(1.45);
        backdrop-filter:blur(26px) saturate(1.45);
    }
    body.home .mobile-bottom-nav>a{color:#FF9A81}
    body.home .mobile-bottom-nav>a:hover,
    body.home .mobile-bottom-nav>a.active{background:rgba(244,122,96,.15);color:#FFD0C5}
    body.home .mobile-bottom-nav>a:focus-visible{outline:2px solid var(--accent,#F47A60);outline-offset:2px}
}

.post-card { cursor: pointer; }