/* RemySpace — profile.css
   Profile page layout. #remyspace-profile is a containment wrapper that
   isolates user-customizable design (colors/fonts/custom CSS) from the
   global site header/nav — nothing here or in a user's custom CSS can
   escape this box. See ProfileRenderer::renderStyle() for the CSS
   variables set on #remyspace-profile, and ProfileRenderer::buildViewModel()
   for how modules are grouped into the layout markup below. */

body.rs-body-profile-page {
    background-attachment: fixed;
}

#remyspace-profile {
    position: relative;
    isolation: isolate;
    contain: layout style;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    max-width: var(--profile-max-width, 1040px);
    margin: 0 auto;
    padding: var(--profile-padding, 12px);
    background: var(--profile-bg, #fff);
    font-family: var(--profile-font, Arial, sans-serif);
    font-size: var(--profile-font-scale, 100%);
    line-height: var(--profile-line-height, 1.4);
    letter-spacing: var(--profile-letter-spacing, 0);
    color: var(--profile-text, #222);
}
#remyspace-profile a { color: var(--profile-link, #3b5998); }
#remyspace-profile a:visited { color: var(--profile-link-visited, #5b7bbd); }
#remyspace-profile * { max-width: 100%; }
#remyspace-profile img, #remyspace-profile iframe, #remyspace-profile video, #remyspace-profile table {
    max-width: 100% !important;
}
/* Global containment net: even if user CSS or an embed tries to force a
   huge fixed width, nothing inside the profile box can widen the page. */
#remyspace-profile, #remyspace-profile * {
    min-width: 0;
}

.rs-profile-banner {
    margin: calc(var(--profile-padding, 12px) * -1) calc(var(--profile-padding, 12px) * -1) var(--profile-section-spacing, 14px);
    background-color: var(--module-bg, #eee);
}

/* --- Effects canvas: decorative, non-interactive, layered behind content --- */
.rs-effects-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
    .rs-effects-canvas { display: none; }
}
.rs-effect-scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.05) 3px);
}
.rs-effect-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.rs-effect-glow #remyspace-profile,
.rs-effect-neon_glow #remyspace-profile {
    box-shadow: 0 0 24px var(--profile-accent, #3b5998);
}
@keyframes rs-animated-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.rs-effect-animated_gradient body.rs-body-profile-page {
    background-size: 400% 400%;
    animation: rs-animated-gradient 18s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
    .rs-effect-animated_gradient body.rs-body-profile-page { animation: none; }
}

/* --- Custom cursors --- */
.rs-cursor-pointer_classic #remyspace-profile,
.rs-cursor-pointer_classic #remyspace-profile * { cursor: url('/assets/images/cursors/classic.svg') 2 2, auto; }
.rs-cursor-pointer_star #remyspace-profile,
.rs-cursor-pointer_star #remyspace-profile * { cursor: url('/assets/images/cursors/star.svg') 4 4, auto; }
.rs-cursor-pointer_heart #remyspace-profile,
.rs-cursor-pointer_heart #remyspace-profile * { cursor: url('/assets/images/cursors/heart.svg') 4 4, auto; }
.rs-cursor-pointer_retro #remyspace-profile,
.rs-cursor-pointer_retro #remyspace-profile * { cursor: url('/assets/images/cursors/retro.svg') 1 1, auto; }
@media (max-width: 640px) {
    /* Custom cursors are meaningless on touch devices. */
    [class*="rs-cursor-"] #remyspace-profile,
    [class*="rs-cursor-"] #remyspace-profile * { cursor: auto !important; }
}

/* --- Identity module --- */
.rs-profile-identity-inner { text-align: center; }
.rs-profile-photo {
    width: 100%;
    max-width: 150px;
    border: var(--module-border-width, 1px) var(--module-border-style, solid) var(--module-border, #a7b6c9);
    background: #fff;
    display: block;
    margin: 0 auto 8px;
}
.rs-online-indicator, .rs-offline-indicator { font-size: 12px; margin: 4px 0; }
.rs-online-indicator { color: var(--profile-online, #2e9e4a); }
.rs-offline-indicator { color: var(--profile-muted, #66707d); }
.rs-profile-display-name { font-family: var(--profile-name-font, inherit); font-size: 20px; margin-bottom: 2px; text-align: center; }
.rs-founder-badge {
    display: inline-block;
    font-size: 10px;
    background: var(--profile-accent, #3b5998);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
}
.rs-profile-username { color: var(--profile-muted, #66707d); font-size: 12px; margin-bottom: 6px; text-align: center; }
.rs-profile-headline { font-style: italic; color: var(--profile-accent, #3b5998); margin-bottom: 8px; text-align: center; }
.rs-profile-meta { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; text-align: center; }
.rs-profile-meta li { padding: 2px 0; color: var(--profile-muted, #66707d); }
.rs-profile-meta li a { color: var(--profile-link, #3b5998); }
.rs-profile-edit-link { margin-top: 8px; text-align: center; }

/* --- Status/mood module --- */
.rs-profile-status-module { font-size: 13px; }
.rs-profile-status { font-style: italic; margin: 0 0 4px; }
.rs-profile-mood { margin: 0; color: var(--profile-muted, #66707d); }

/* --- Contact box --- */
.rs-contact-box {
    border: var(--module-border-width, 1px) var(--module-border-style, solid) var(--module-border, #a7b6c9);
    border-radius: var(--module-border-radius, 2px);
    background: var(--module-bg, #f5f7fa);
    padding: 10px;
}
.rs-contact-box-header {
    font-size: 13px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--module-border, #a7b6c9);
    color: var(--profile-text, #222);
}
.rs-contact-actions { list-style: none; margin: 0; padding: 0; }
.rs-contact-actions li { margin-bottom: 6px; }
.rs-contact-actions button { width: 100%; }
.rs-contact-status { font-size: 11px; margin: 8px 0 0; min-height: 14px; color: var(--rs-success-text); }
.rs-contact-status-error { color: var(--rs-error-text); }
.rs-friend-add, .rs-friend-accept, .rs-friend-decline, .rs-friend-cancel, .rs-friend-remove,
.rs-safety-block, .rs-safety-unblock, .rs-safety-report { cursor: pointer; }

/* --- Generic module box chrome --- */
.profile-section {
    border: var(--module-border-width, 1px) var(--module-border-style, solid) var(--module-border, #a7b6c9);
    border-radius: var(--module-border-radius, 2px);
    margin-bottom: var(--profile-section-spacing, 14px);
    background: var(--module-bg, #fff);
    box-shadow: var(--module-shadow, none);
}
.profile-section-header {
    font-family: var(--profile-section-header-font, inherit);
    background: var(--module-header-bg, #3b5998);
    color: var(--module-header-text, #fff);
    padding: 7px 10px;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid var(--module-border, #a7b6c9);
    margin: 0;
}
.profile-section-body, .rs-box-body {
    padding: 10px 12px;
    font-size: 13px;
    word-break: break-word;
}
.rs-module:last-child.profile-section,
.rs-profile-column > .profile-section:last-child { margin-bottom: 0; }

/* --- Layout: two-column grids (classic/wide/compact/left/right sidebar) --- */
.rs-profile-columns { display: grid; gap: var(--profile-gap, 16px); align-items: start; }
.rs-profile-columns-two { grid-template-columns: 30fr 70fr; }
.rs-layout-equal-columns .rs-profile-columns-two { grid-template-columns: 1fr 1fr !important; }
.rs-layout-left-sidebar .rs-profile-columns-two { grid-template-columns: 240px 1fr !important; }
.rs-layout-right-sidebar .rs-profile-columns-two { grid-template-columns: 1fr 240px !important; }
.rs-layout-right-sidebar .rs-profile-column-sidebar-last { order: 2; }
.rs-profile-columns-three { grid-template-columns: 1fr 1fr 1fr; }
.rs-layout-magazine .rs-profile-columns-three { grid-template-columns: 2fr 1fr 1fr; }
.rs-profile-columns-single { display: block; }
.rs-profile-columns-single .rs-module { margin-bottom: var(--profile-section-spacing, 14px); max-width: 100%; }
.rs-profile-column { min-width: 0; }

/* --- Layout: freeform CSS Grid --- */
.rs-profile-grid-freeform {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 32px;
    gap: var(--profile-gap, 16px);
}
.rs-profile-grid-freeform .rs-module { min-width: 0; overflow: hidden; }

@media (max-width: 640px) {
    .rs-profile-columns-two,
    .rs-layout-equal-columns .rs-profile-columns-two,
    .rs-layout-left-sidebar .rs-profile-columns-two,
    .rs-layout-right-sidebar .rs-profile-columns-two,
    .rs-profile-columns-three,
    .rs-layout-magazine .rs-profile-columns-three {
        grid-template-columns: 1fr !important;
    }
    .rs-layout-right-sidebar .rs-profile-column-sidebar-last { order: 0; }
    .rs-profile-grid-freeform {
        display: block;
    }
    .rs-profile-grid-freeform .rs-module {
        margin-bottom: var(--profile-section-spacing, 14px);
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* --- Embeds (Spotify/YouTube) --- */
.rs-embed-wrapper { margin-bottom: 8px; }
.rs-embed-wrapper:last-child { margin-bottom: 0; }
.rs-embed-title { font-size: 12px; color: var(--profile-muted, #66707d); margin: 0 0 4px; }
.rs-embed-wrapper iframe { display: block; width: 100%; border: 0; }

/* --- Image / photo modules --- */
.rs-image-module { margin: 0 0 10px; }
.rs-image-module:last-child { margin-bottom: 0; }
.rs-image-module img { display: block; height: auto; }
.rs-image-module figcaption { font-size: 11px; color: var(--profile-muted, #66707d); margin-top: 2px; }
.rs-align-left { text-align: left; }
.rs-align-center { text-align: center; }
.rs-align-center img { margin: 0 auto; }
.rs-align-right { text-align: right; }
.rs-align-right img { margin-left: auto; }
.rs-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.rs-photo-grid-img { width: 100%; height: 72px; object-fit: cover; border: 1px solid var(--module-border, #a7b6c9); max-width: 100%; display: block; }
.rs-photos-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
.rs-photos-module-grid a { display: block; min-width: 0; }
.rs-photos-module-grid img { width: 100%; height: 64px; object-fit: cover; border: 1px solid var(--module-border, #a7b6c9); max-width: 100%; display: block; }
.rs-photos-module-meta,
.rs-photos-module-view-all { margin: 8px 0 0; font-size: 12px; }

/* --- Top Friends --- */
.rs-top-friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.rs-top-friends-grid li { text-align: center; }
.rs-top-friends-grid a { display: block; text-decoration: none; color: var(--top-friends-label, var(--profile-link, #3b5998)); }
.rs-top-friend-photo { width: 100%; max-width: 60px; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--module-border, #a7b6c9); display: block; margin: 0 auto 4px; }
.rs-top-friend-name { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Profile links --- */
.rs-profile-links-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rs-profile-links-list li { padding: 3px 0; }

/* --- Quote / heading / divider / button-link / spacer content modules --- */
.rs-quote-module { margin: 0; padding: 8px 12px; font-style: italic; border-left: 3px solid var(--profile-accent, #3b5998); }
.rs-quote-module cite { display: block; margin-top: 4px; font-size: 11px; font-style: normal; color: var(--profile-muted, #66707d); }
.rs-heading-module { margin: 0 0 6px; font-family: var(--profile-heading-font, inherit); }
.rs-divider-module { border: none; border-top-width: 2px; border-color: var(--module-border, #a7b6c9); }
.rs-divider-solid { border-top-style: solid; }
.rs-divider-dashed { border-top-style: dashed; }
.rs-divider-dotted { border-top-style: dotted; }
.rs-divider-double { border-top-style: double; border-top-width: 4px; }
.rs-button-module-link { display: inline-block; }
.rs-user-html { font-size: 13px; }

/* --- Empty states --- */
.rs-empty-state { font-size: 12px; color: var(--profile-muted, #66707d); font-style: italic; margin: 0; }

/* --- Share controls --- */
.rs-profile-share-controls,
.rs-profile-share-box {
    margin-top: var(--profile-section-spacing, 14px);
    text-align: center;
}
.rs-profile-share-box { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.rs-share-status { font-size: 11px; color: var(--rs-success-text); }

/* --- Static legal/info pages (unrelated to the design system, kept here for now) --- */
.rs-static-page-content { font-size: 13px; line-height: 1.6; }
.rs-static-page-content h2 { margin-top: 16px; }
.rs-static-page-content p { margin-bottom: 10px; }