/*
 * The Main Space staging beta
 * A compact, early-social-web-inspired portal layout layered over Friendspace's
 * existing components. This file is intentionally loaded only by newsfeed.html.
 */

:root {
    --main-space-paper: #fffdf9;
    --main-space-cream: #fff7ed;
    --main-space-rule: #e7ded3;
    --main-space-ink: #202b3c;
    --main-space-orange: #f26419;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.newsfeed-container,
.feed-shell,
.feed-center,
.feed-center > *,
.friendspace-social-compass,
.friendspace-identity-beta {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

body {
    background:
        linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
        repeating-linear-gradient(0deg, #eef2f5 0, #eef2f5 1px, transparent 1px, transparent 26px),
        #edf1f4;
}

/* A bulletin should feel like a site-wide wire, not another floating card. */
.friendspace-bulletin {
    border-top: 1px solid #f5cda9;
    border-bottom: 1px solid #f2b47b;
    background: #fffaf3;
    box-shadow: 0 2px 7px rgba(97, 52, 20, .07);
}

.friendspace-bulletin-inner {
    min-height: 44px;
}

.friendspace-bulletin-title {
    align-self: stretch;
    padding: 0 1rem;
    border-right: 1px solid #f4c79f;
    color: #9a3412;
    background: #ffedd5;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -.01em;
}

.friendspace-bulletin-catchup {
    padding: .45rem .7rem;
    border: 1px solid #fed7aa;
    border-radius: 4px;
    background: #fff;
}

/* The three columns now read like a personal portal rather than three large cards. */
.feed-shell {
    gap: .85rem !important;
}

.feed-sidebar {
    max-height: calc(100vh - 7.7rem);
}

.friendspace-your-corner,
.friendspace-around-panel,
.friendspace-side-module,
.friendspace-story-deck,
.friendspace-circle-checkin,
.friendspace-composer,
.friendspace-post-card {
    border-radius: 7px !important;
}

.friendspace-your-corner {
    padding: .75rem !important;
    box-shadow: 0 4px 14px rgba(68, 47, 32, .07);
}

.friendspace-corner-title {
    margin: -.75rem -.75rem .65rem;
    padding: .55rem .75rem .5rem;
    background: linear-gradient(90deg, #fff0dc, #fffaf3);
}

.friendspace-your-corner .flex.items-center.gap-3 {
    gap: .6rem;
}

.friendspace-your-corner .grid.grid-cols-3 {
    margin-top: .6rem !important;
    margin-bottom: .5rem !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.friendspace-corner-profile-link {
    margin-bottom: .25rem;
    padding: .3rem .1rem .45rem;
}

.friendspace-corner-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .08rem .2rem;
}

.friendspace-corner-group-label {
    grid-column: 1 / -1;
    margin: .38rem .3rem .08rem;
    padding-top: .3rem;
    border-top: 1px dotted #d7dee7;
}

.friendspace-corner-group-label:first-child {
    border-top: 0;
}

.friendspace-your-corner .feed-mini-link {
    min-height: 30px;
    gap: .25rem;
    padding: .3rem;
    border-radius: 4px;
    font-size: .72rem;
}

.friendspace-your-corner .feed-mini-link:hover {
    background: #fff0df;
}

.friendspace-side-module {
    overflow: hidden;
    padding: .72rem !important;
    border: 1px solid var(--main-space-rule);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .045);
}

.friendspace-side-module .feed-module-title {
    margin: -.72rem -.72rem .6rem !important;
    padding: .48rem .68rem;
    border-bottom: 1px solid #f0d8c4;
    color: var(--main-space-ink);
    background: linear-gradient(90deg, #fff7ed, #fff);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .91rem;
}

.friendspace-music-connections-module {
    border-top: 3px solid #7c3aed;
}

/* Give the center a clear editorial sequence regardless of the legacy DOM order. */
.feed-center {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

#echo-stories-strip { order: 1; }
.friendspace-social-compass { order: 2; }
#inner-circle-spotlight-strip { order: 3; }
.friendspace-conversations-heading { order: 4; }
#post-composer { order: 5; }
#main-feed-container { order: 6; }

.friendspace-story-deck {
    min-height: 82px;
    padding: .55rem .65rem;
    border: 1px solid var(--main-space-rule);
    border-top: 3px solid var(--main-space-orange);
    background: var(--main-space-paper);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .045);
}

.friendspace-section-heading h2 {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--main-space-ink);
}

/* Compass identity and controls share one tidy row on desktop. */
.friendspace-social-compass {
    top: 4.35rem;
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.9fr);
    align-items: center;
    gap: .8rem;
    padding: .62rem .75rem;
    border-radius: 7px;
    border-left: 4px solid var(--main-space-orange);
    background: rgba(255, 253, 249, .96);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
}

.friendspace-compass-identity h2 {
    font-family: Georgia, 'Times New Roman', serif;
}

.friendspace-compass-copy {
    display: block;
    max-width: 33rem;
    margin-top: .16rem;
    font-size: .67rem;
    line-height: 1.28;
}

.friendspace-social-compass #feed-topic-preferences-panel {
    grid-column: 1 / -1;
}

.friendspace-social-compass .friendspace-feed-tabs button {
    min-height: 32px;
    border-radius: 4px !important;
}

.friendspace-circle-checkin {
    min-height: 72px;
    border-color: #e8d8c7;
    border-left: 4px solid #e0a319;
    background: linear-gradient(90deg, #fffbeb, #fff 48%);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}

/* The stream receives a proper destination masthead. */
.friendspace-conversations-heading {
    position: relative;
    align-items: center;
    margin: .3rem 0 0;
    padding: .68rem .8rem;
    border: 1px solid #d9c8b8;
    border-bottom: 3px solid var(--main-space-orange);
    border-radius: 7px 7px 0 0;
    background: linear-gradient(100deg, #29364a, #3a495f);
}

.friendspace-conversations-heading p {
    color: #fdba74;
}

.friendspace-conversations-heading h2 {
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.08rem;
}

.friendspace-conversations-heading > span {
    color: #dbe4ee;
}

/* Posting begins as a status bar and opens into the full creation studio on intent. */
.friendspace-composer {
    margin-bottom: .85rem !important;
    padding: .7rem .8rem !important;
    border-top: 0;
    border-color: #d9c8b8;
    border-radius: 0 0 7px 7px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .055);
}

.friendspace-composer:not(.is-expanded) .friendspace-composer-header,
.friendspace-composer:not(.is-expanded) .friendspace-composer-details {
    display: none;
}

.friendspace-composer:not(.is-expanded) .friendspace-rich-editor-toolbar,
.friendspace-composer:not(.is-expanded) .friendspace-rich-editor-footer {
    display: none;
}

.friendspace-composer:not(.is-expanded) .friendspace-rich-editor-surface {
    min-height: 42px;
    height: 42px;
    padding: .52rem .7rem;
    overflow: hidden;
}

.friendspace-composer:not(.is-expanded) textarea {
    min-height: 44px;
    height: 44px;
    padding: .65rem .8rem;
    border-radius: 4px;
    background: #fffdf9;
}

.friendspace-composer.is-expanded {
    padding: .9rem !important;
}

.friendspace-composer.is-expanded textarea {
    min-height: 88px;
}

.friendspace-composer.is-expanded .friendspace-rich-editor-surface {
    min-height: 108px;
}

.friendspace-post-card {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.friendspace-around-panel {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.friendspace-around-header {
    padding: .68rem .8rem .6rem;
    background: linear-gradient(90deg, #fff0dc, #fffaf3);
}

.friendspace-around-section {
    padding: .8rem;
}

@media (max-width: 1180px) {
    .friendspace-social-compass {
        grid-template-columns: minmax(170px, .7fr) minmax(0, 1.8fr);
    }
}

@media (max-width: 820px) {
    body { background: #f1f4f7; }

    .friendspace-bulletin-title {
        padding: 0 .6rem;
        font-size: .82rem;
    }

    .friendspace-bulletin-title span {
        display: none;
    }

    .friendspace-social-compass {
        display: block;
        grid-template-columns: none;
        border-left-width: 1px;
        border-top: 3px solid var(--main-space-orange);
    }

    .newsfeed-container { width: 100%; }
    .feed-shell,
    .feed-center { width: 100%; }

    .friendspace-feed-tabs {
        display: flex;
        width: 100%;
        max-width: 100%;
        padding-bottom: .2rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .friendspace-feed-tabs::-webkit-scrollbar { display: none; }
    .friendspace-feed-tabs > button { flex: 0 0 auto; white-space: nowrap; }

    .friendspace-compass-identity {
        padding-bottom: .45rem;
    }

    .friendspace-conversations-heading {
        border-radius: 5px 5px 0 0;
    }
}

@media (max-width: 640px) {
    .newsfeed-container {
        width: 100%;
        max-width: 100%;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .feed-center > * { width: 100%; }

    .friendspace-story-deck {
        margin-right: 0;
        margin-left: 0;
        padding: .45rem;
    }

    .friendspace-circle-checkin {
        min-height: 82px;
    }

    .friendspace-composer:not(.is-expanded) textarea {
        min-height: 44px;
    }
}