/* Functional adapters only; original page/component styles live in assets/css and design-preview.css. */
.reference-layout #liveStatus:empty{display:none}
.reference-layout #liveStatus{padding-block:12px;white-space:pre-wrap}
.reference-layout .activity-carousel,.reference-layout .club-carousel-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reference-layout .activity-carousel>.activity-card,.reference-layout .club-carousel-track>.activity-card{scroll-snap-align:start}
.reference-layout .activity-card .activity-info span{align-items:flex-start}
.reference-layout .club-carousel-area{min-height:360px}
.reference-layout .live-description{white-space:pre-wrap}
.reference-layout .live-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reference-layout .live-form-grid label{min-width:0}
.reference-layout #liveActivityForm>label{display:block;margin-block:16px}
.reference-layout #liveActivityForm input,.reference-layout #liveActivityForm select,.reference-layout #liveActivityForm textarea{margin-top:6px}
.reference-layout [data-live-feedback]{white-space:pre-wrap;overflow-wrap:anywhere}
.reference-layout #guestReference{overflow-wrap:anywhere}
.reference-layout .live-table-wrap{overflow:auto}
.reference-layout .live-actions{display:flex;flex-wrap:wrap;gap:10px}
.reference-layout #liveBook label{display:block;margin-block:16px}
.reference-layout .detail-card #calendarDownload{margin:0 24px 24px}
.reference-layout .community-tabs>a{text-decoration:none}
.reference-layout .site-footer{max-width:none}
.reference-layout #liveEditor .modal-header h2{font-size:1.25rem}
[data-bs-theme=dark] .reference-layout .detail-card,[data-bs-theme=dark] .reference-layout .registration-modal{background:var(--nature-sage);color:var(--nature-ink)}
@media(max-width:600px){.reference-layout .live-form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reference-layout .activity-carousel,.reference-layout .club-carousel-track{scroll-behavior:auto}}

/* Keep the footer action identical to the dashboard, including detail-page breakpoints. */
.reference-layout .site-footer .detail-back{gap:9px;padding:10px 16px;font-size:.9rem}
@media(max-width:420px){.reference-layout .site-footer .detail-back{gap:5px;padding:8px 10px;font-size:.78rem}}
.reference-layout #clubResults .activity-card{width:100%}
/* Compact the locked panel without changing the original lock component. */
.reference-layout #clubActivities{min-height:0;padding-bottom:32px}
.reference-layout #clubActivities .club-heading{margin-bottom:20px}
.reference-layout #clubActivities .club-carousel-area:not(.logged-in){min-height:260px}
/* Account navigation follows the original Manage buttons in both themes. */
.reference-layout #connectedTabs{flex-wrap:wrap;overflow:visible;gap:10px}
.reference-layout #connectedTabs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:10px 15px;border:1px solid color-mix(in srgb,var(--nature-muted) 25%,var(--nature-sage));border-radius:8px;color:var(--nature-muted);background:var(--nature-sage);font-size:.85rem;line-height:1.5;font-weight:600;text-decoration:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
@media(hover:hover){.reference-layout #connectedTabs a:hover{background:color-mix(in srgb,var(--nature-sage) 85%,var(--nature-muted));border-color:var(--nature-muted);color:var(--nature-ink)}}
.reference-layout #connectedTabs a[aria-current=page]{background:#315a4c;border-color:#315a4c;color:#f7f8ef}
.reference-layout #connectedTabs a:active{background:#244638;border-color:var(--nature-muted);color:#f7f8ef;box-shadow:inset 0 2px 4px #0003}
.reference-layout #connectedTabs a:focus-visible{outline:3px solid #a0b594;outline-offset:3px}
@media(max-width:575px){.reference-layout #connectedTabs a{padding:9px 12px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.reference-layout #connectedTabs a{transition:none}}
.reference-layout #liveRoster .journey-badge{color:var(--nature-ink);background:var(--nature-sage)}
/* Only mouse users get the team drag affordance; mobile uses Move menus. */
@media(pointer:coarse){.reference-layout #liveRoster .participant-tile{cursor:default}.reference-layout #liveRoster .participant-tile>.bi-grip-vertical{display:none}}
.member-referral-picker .dropdown-menu{min-width:0;border-radius:12px;background:var(--nature-sage);color:var(--nature-ink);border:1px solid var(--nature-muted)}
.member-referral-picker .member-referral-results{max-height:240px;overflow-y:auto}
.member-referral-picker .dropdown-item{min-height:44px;color:var(--nature-ink)}
.member-referral-picker .dropdown-item:hover,.member-referral-picker .dropdown-item:focus{background:var(--nature-moss);color:var(--nature-ink)}
.member-referral-picker input{font-size:16px}

/* Reserve navigation space while the verified account role loads. */
.reference-layout #connectedTabs .account-tab-placeholder{display:block;width:130px;height:44px;border-radius:8px;background:var(--nature-sage);opacity:.55}
.reference-layout #connectedTabs .account-tab-placeholder:nth-child(2){width:148px}
.reference-layout #connectedTabs .account-tab-placeholder:nth-child(4){width:93px}
@media(max-width:575px){.reference-layout #connectedTabs .account-tab-placeholder{width:125px}}

/* Roomier activity editor, scoped so participant dialogs remain unchanged. */
.reference-layout #liveEditor .activity-editor-dialog{width:calc(100% - 32px);max-width:1040px;margin:24px auto}
.reference-layout #liveActivityForm .modal-body{padding:24px}
.reference-layout #liveActivityForm .live-form-grid{gap:24px;margin-bottom:24px;align-items:start}
.reference-layout #liveActivityForm .modal-body>label{display:block;margin-top:20px}
.reference-layout #liveActivityForm .activity-image-field{grid-column:1/-1;min-width:0}
.reference-layout .activity-image-preview{display:block;width:100%;max-width:360px;height:180px;object-fit:cover;border-radius:12px;margin-top:12px}
.reference-layout #liveActivityForm small{display:block;margin-top:8px}
@media(max-width:600px){.reference-layout #liveEditor .activity-editor-dialog{width:calc(100% - 16px);margin:8px auto}.reference-layout #liveActivityForm .modal-body{padding:16px}.reference-layout #liveActivityForm .live-form-grid{gap:16px}}