/* ============================================================
   SOCIAL — Social tab, Friends / Settings sheets, About modal
   (social.js, sheet.js, index.html). Bundled with styles.css by
   minify.js; loaded as its own <link> on QA.

   Narrow vs wide follows the main app's toolbar split (see
   isMobileToolbar, app.js): ≤640px, html.native-app and
   html.chip-overflow are "narrow".
   ============================================================ */

/* ── Generic sheet / drawer (sheet.js) ─────────────────────────
   Wide: right-hand drawer, same chrome as My Gigs' #mg-settings-panel.
   Narrow: bottom sheet. ─────────────────────────────────────── */
.fn-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(50, 30, 20, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.fn-sheet-backdrop--open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.fn-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    width: min(90vw, 400px);
    background: #ffffff;
    border-left: 2px solid #C070B8;
    box-shadow: -4px 0 24px rgba(192, 38, 163, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    font-family: 'Poppins', sans-serif;
    color: #3e352e;
}
.fn-sheet--open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
}
.fn-sheet--instant { transition: none !important; }

.fn-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #c070b8;
    flex-shrink: 0;
}
.fn-sheet-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0 6px 0 -6px; padding: 0;
    border: none; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fn-sheet-back:hover { background: rgba(255, 255, 255, 0.2); }
.fn-sheet-back[hidden] { display: none; }
.fn-sheet-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fn-sheet-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-right: 12px; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fn-sheet-info:hover { background: rgba(255, 255, 255, 0.2); }
.fn-sheet-info[hidden] { display: none; }
.fn-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fn-sheet-close:hover { background: rgba(255, 255, 255, 0.2); }

.fn-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
    /* Its one child (.soc-friends / .soc-send etc.) stretches to fill this,
       so a sticky .soc-foot inside it actually pins to the sheet's bottom
       edge instead of just trailing the content with a gap below it. */
    display: flex;
    flex-direction: column;
}
.soc-friends, .soc-send { flex: 1; }
.fn-sheet-body::-webkit-scrollbar { width: 6px; }
.fn-sheet-body::-webkit-scrollbar-track { background: #f5f5f5; }
.fn-sheet-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Narrow sheets' top edge: level with the top of the main tabs, so the
   logo/tagline header stays visible above (--fn-sheet-top is measured by
   syncSheetTop, sheet.js). Top and bottom both pinned, so every sheet is the
   same fixed height whatever it holds — switching tabs, typing a search or a
   section opening/closing doesn't resize it under the user. Capped so a
   short landscape screen still gets a usable sheet. Shared with the filter
   #settings-panel (styles.css). */
:root { --fn-sheet-top-clamped: min(var(--fn-sheet-top, 15dvh), 40dvh); }

/* Narrow: bottom sheet. Duplicated for html.native-app (which is forced
   narrow at any width) since a class selector can't live inside the
   media query. */
@media (max-width: 640px) {
    .fn-sheet {
        top: var(--fn-sheet-top-clamped);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(192, 38, 163, 0.2);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(192, 38, 163, 0.12);
        transform: translateY(100%);
    }
    .fn-sheet--open { transform: none; }
    .fn-sheet-header { border-radius: 16px 16px 0 0; }
    .fn-sheet-body {
        padding-bottom: calc(24px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }
}
html.native-app .fn-sheet {
    top: var(--fn-sheet-top-clamped);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(192, 38, 163, 0.2);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(192, 38, 163, 0.12);
    transform: translateY(100%);
}
html.native-app .fn-sheet--open { transform: none; }
html.native-app .fn-sheet-header { border-radius: 16px 16px 0 0; }
html.native-app .fn-sheet-body {
    padding-bottom: calc(24px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
#sheet-people .soc-pane { flex: 1 0 auto; display: flex; flex-direction: column; }
#sheet-people .soc-pane[hidden] { display: none; }

/* ── Sheet content primitives (match My Gigs' .panel-* look) ── */
.fn-section {
    padding: 16px 18px;
    border-bottom: 1px solid #f0f0f0;
}
.fn-section:last-child { border-bottom: none; }
/* received (Invitations) pairs with Sent requests right below it, read as
   one unit. */
.soc-collapsible[data-section="received"] { border-bottom: none; padding-bottom: 4px; }
.fn-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4537E;
    margin-bottom: 12px;
}
/* plain tally after a section title; red pill when the section needs acting on */
.fn-section-count {
    display: inline-block;
    margin-left: 2px;
    color: #b08aa5;
    font-size: 10px;
    letter-spacing: 0;
}
.fn-help {
    font-size: 14px;
    line-height: 1.5;
    color: #8a7a6a;
    margin: 0 0 10px;
}
.fn-help:last-child { margin-bottom: 0; }
/* An inline "here" link in help text (Send / Add to List sheet) */
.fn-help a.soc-inline-link { color: #c83dac; font-weight: 600; text-decoration: underline; }

.fn-field-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.fn-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #8a7a6a;
    margin-bottom: 4px;
}
/* A field's label on the same line as its input, inside a .fn-field-row —
   bold rather than the muted stacked-above .fn-field-label, since here it's
   the only cue for what the field is (Name, Username). */
.fn-field-label-inline {
    font-weight: 700;
    font-size: 14px;
    color: #3e352e;
    align-self: center;
    flex-shrink: 0;
}
.fn-field-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    min-height: 1.2em;
}
.fn-count {
    flex-shrink: 0;
    font-size: 11px;
    color: #aaa;
    font-variant-numeric: tabular-nums;
}

.fn-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    color: #3e352e;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.fn-input::placeholder { color: #aaa; }
.fn-input:focus {
    border-color: #C070B8;
    box-shadow: 0 0 0 3px rgba(192, 112, 184, 0.12);
}
.fn-input:disabled { opacity: 0.6; }
.fn-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.fn-search-row {
    position: relative;
    margin-top: 10px;
}
.fn-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #a8659a;
    pointer-events: none;
    display: flex;
}
.fn-input--search { padding-left: 32px; }
.fn-search-row + .fn-help { margin-top: 6px; }

.fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid #ddd0da;
    border-radius: 8px;
    background: #faf7f9;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.fn-btn:hover:not(:disabled) { background: #f0e8ee; border-color: #C070B8; color: #7a1f68; }
.fn-btn:disabled { opacity: 0.45; cursor: default; }
.fn-btn--primary {
    background: #c83dac;
    border-color: #c83dac;
    color: #fff;
}
.fn-btn--primary:hover:not(:disabled) { background: #a82e90; border-color: #a82e90; color: #fff; }
.fn-btn--danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.fn-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.fn-btn--sm { padding: 5px 10px; font-size: 12px; }
.fn-btn.is-busy { opacity: 0.8; }

/* Settings toggle rows — the switch the account menu used to carry */
.fn-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fn-toggle-row:disabled { cursor: default; }
.fn-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fn-toggle-label { font-size: 14px; font-weight: 600; color: #3e352e; }
.fn-toggle-help { font-size: 13px; line-height: 1.4; color: #8a7a6a; }
/* One heading over a stack of switches (Settings → Sharing → Stay anonymous) */
.fn-toggle-group { padding: 6px 0; }
.fn-toggle-pair { padding-left: 14px; }
.fn-toggle-pair .fn-toggle-label { font-weight: 400; }
/* A labelled choice from a short list (Settings → Notifications: off / immediately / daily summary / both) */
.fn-select-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 0;
}
.fn-select {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    color: #3e352e;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fn-select:focus {
    border-color: #C070B8;
    box-shadow: 0 0 0 3px rgba(192, 112, 184, 0.12);
}
.fn-toggle {
    display: inline-flex;
    align-items: center;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #e7e0d8;
    padding: 0.125rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.fn-toggle-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
    display: block;
}

.fn-msg { font-size: 13px; line-height: 1.4; }
.fn-msg--error { color: #dc2626; }
.fn-msg--ok { color: #15803d; }
.fn-error-bar {
    margin: 10px 18px 0;
    padding: 8px 10px;
    background: #fdf3f3;
    border: 1px solid #fca5a5;
    border-radius: 8px;
}

.fn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 18px;
    font-size: 14px;
    color: #8a7a6a;
    text-align: center;
}
.fn-loading--sm { padding: 10px 0 0; font-size: 13px; }
/* The app's standard loading indicator — same rising/falling bars as the
   splash screen and Event Feed/My Gigs loaders, reusing index.html's
   `splash-bar` keyframe (it's on the page globally, since social.css is
   loaded there too) rather than a circular spinner. Used inside .fn-loading
   panels; the in-button busy spinner below is a separate, smaller thing. */
.fn-loading-bars {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
    height: 14px;
    vertical-align: middle;
}
.fn-loading-bars span {
    width: 3px;
    height: 100%;
    border-radius: 1.5px;
    background: #c83dac;
    transform-origin: bottom;
    opacity: 0.85;
    animation: splash-bar 0.90s ease-in-out infinite;
}
.fn-loading-bars span:nth-child(2) { animation-duration: 0.72s; }
.fn-loading-bars span:nth-child(3) { animation-duration: 1.00s; }
.fn-loading-bars span:nth-child(4) { animation-duration: 0.80s; }
.fn-loading-bars span:nth-child(5) { animation-duration: 0.85s; }
.fn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(200, 61, 172, 0.25);
    border-top-color: #c83dac;
    border-radius: 50%;
    animation: fn-spin 0.7s linear infinite;
    vertical-align: middle;
}
.fn-btn--primary .fn-spinner, .fn-btn--danger .fn-spinner, .soc-btn--primary .fn-spinner {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}
@keyframes fn-spin { to { transform: rotate(360deg); } }
/* Soc.busy: spinner over the button's own (hidden) label, so it doesn't resize */
.is-busy { position: relative; }
.is-busy-label { visibility: hidden; display: contents; }
.is-busy-spinner { position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; }

/* ── People rows (search hits, invitations, friends) ─────────── */
.soc-list { margin-top: 8px; }
.soc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(192, 38, 163, 0.07);
}
.soc-row:last-child { border-bottom: none; }
.soc-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5d0f0;
    color: #7a1f68;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.soc-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.soc-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.soc-row-name {
    font-size: 14px;
    font-weight: 600;
    color: #3e352e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soc-row-sub {
    font-size: 12px;
    color: #9c8478;
    margin-top: 1px;
}
/* A row waiting on you — an invitation (personRowHtml / groupRowHtml
   urgent), a group with people asking to join — just that row tinted
   red, never the section around it. */
.soc-row--urgent {
    background: #fde4e4;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}
/* ...and a brief flash when the tab is shown (Soc.scrollToUrgent), so it's
   noticed: two pulses of a stronger red easing back to the tint. */
@keyframes soc-row-flash {
    0%, 50%, 100% { background-color: #fde4e4; }
    25%, 75% { background-color: #f8b4b4; }
}
.soc-row--flash { animation: soc-row-flash 1.2s ease-in-out 0.15s; }
@keyframes soc-row-flash-dark {
    0%, 50%, 100% { background-color: #34241f; }
    25%, 75% { background-color: #5a2f28; }
}
html.dark .soc-row--flash { animation-name: soc-row-flash-dark; }
@media (prefers-reduced-motion: reduce) { .soc-row--flash { animation: none; } }
/* A suggested row (Soc.suggestedRow): the name a shade lighter than the
   rows that are yours, so it reads as an offer. */
.soc-row--suggested .soc-row-name { color: #8a7a6a; }
html.dark .soc-row--suggested .soc-row-name { color: #a3968a; }
.soc-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.soc-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f0e8ee;
    color: #7a1f68;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Inline confirm — replaces the row's normal content, like the Add Event
   dialog's delete confirmation. */
.soc-row--confirm { padding: 6px 0; }
.soc-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: #fdf3f3;
    border: 1px solid #fca5a5;
    border-radius: 8px;
}
.soc-confirm-text {
    flex: 1 1 140px;
    font-size: 14px;
    color: #b91c1c;
}

.fn-notice-bar { background: #ecfdf3; border-color: #86efac; }

/* A share link's dialog (social-core.js linkModal) — the Sign in dialog's
   look (#auth-modal: dimmed backdrop, .alerts-modal-card, round ✕, full-
   width pink button), but above the sheets it opens over. */
.soc-link-modal {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 30, 20, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.soc-link-modal.is-open { opacity: 1; }
.soc-link-modal-card { position: relative; text-align: center; }
.soc-link-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid #e7e0d8; background: transparent; color: #6b5f58;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.12s;
}
.soc-link-modal-close:hover { background: rgba(80, 60, 40, 0.08); }
.soc-link-modal-head {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin: 0 2rem 1rem; color: #c83dac;
}
.soc-link-modal-head svg { flex-shrink: 0; }
.soc-link-modal-head h2 {
    margin: 0; font-size: 1.0625rem; font-weight: 700; color: #3e352e;
    font-family: 'Poppins', sans-serif; overflow-wrap: anywhere;
}
.soc-link-modal-text { margin: 0 0 0.25rem; font-size: 0.9375rem; line-height: 1.5; color: #4f463c; font-family: 'DM Sans', sans-serif; }
.soc-link-modal-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #6b5f58; font-family: 'DM Sans', sans-serif; }
.soc-link-modal-err { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #b91c1c; }
/* The dialog's text box (linkModal input — the username step). */
.soc-link-modal-input { display: block; width: 100%; margin-top: 0.75rem; }
.soc-link-modal-btn {
    width: 100%; margin-top: 0.625rem; padding: 0.625rem 1rem;
    background: transparent; color: #6b5f58; border: 1px solid #e7e0d8; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 600; font-family: 'Poppins', sans-serif;
    cursor: pointer; transition: background 0.15s;
}
.soc-link-modal-btn:hover { background: rgba(80, 60, 40, 0.06); }
.soc-link-modal-btn--primary { margin-top: 1.25rem; background: #c83dac; color: #fff; border-color: #c83dac; }
.soc-link-modal-btn--primary:hover { background: #a82e90; }
.soc-link-modal-btn:disabled { opacity: 0.7; cursor: default; }

/* Create-a-group form */
.soc-field { display: block; width: 100%; margin-bottom: 8px; }
.soc-field-msg { align-self: center; }
.soc-field--right { justify-content: flex-end; }

/* ── Social view ─────────────────────────────────────────────── */
#social-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fbf7f0;
}
/* Full-width scroller so the scrollbar sits at the page edge, like the
   Event Feed (which scrolls the document). Same 1rem side gutter as
   #main-content's px-4. */
#social-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem;
}
/* The top gutter goes on the content, not the scroller: a sticky day-group
   bar pins to the scroller's padding edge, so padding up here would leave
   a strip above the bar for cards to scroll through. */
#social-scroll > * { padding-top: 1rem; }
/* Centred prompt — sign-in nudge in the view, "choose a username" in the sheet */
.soc-empty {
    text-align: center;
    max-width: 360px;
    margin: 2.5rem auto 0;
    padding: 0 1rem;
    font-family: 'Poppins', sans-serif;
}
.soc-empty--sheet { margin-top: 2rem; padding-bottom: 1rem; }
.soc-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    background: #f5d0f0;
    color: #c83dac;
    display: flex;
    align-items: center;
    justify-content: center;
}
.soc-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: #3e352e;
    margin: 0 0 0.5rem;
}
.soc-empty-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b5f58;
    margin: 0 0 1rem;
}
.soc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.soc-btn--primary { background: #c83dac; color: #fff; }
.soc-btn--secondary { background: transparent; color: #c83dac; border: 1.5px solid #c83dac; }
.soc-btn--secondary:hover { background: rgba(200, 61, 172, 0.08); }
.soc-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Username / friends / groups gap prompt (social-feed.js socialGapHtml) — a
   .promo-card (styles.css), but its text is short enough to usually sit on
   the same line as the button rather than stacked above it. */
.soc-gap-card .promo-card-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/* One short line, so the × sits centred on it rather than in the top corner */
.soc-gap-card .promo-card-close { top: 50%; transform: translateY(-50%); }

/* Unread dot on the Social top-nav tab (social-core.js setSocialTabDot):
   blue for "something changed since you last looked", red when it's
   actually waiting on you (a request to approve/decline) — see also the
   same red on .soc-invite-badge below, for the Friends button. */
.top-nav-icon { position: relative; }
.soc-tab-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3d6ec7;
    box-shadow: 0 0 0 2px #fbf7f0;
}
.soc-tab-dot--urgent { background: #dc2626; }
.soc-btn--primary:hover { background: #a82e90; }

/* Wide action bar (#bar-social, sticky header) — hidden whenever the
   narrow toolbar is in charge, exactly like #bar-mygigs. */
@media (max-width: 640px) {
    #bar-social { display: none !important; }
}
html.native-app #bar-social, html.chip-overflow #bar-social { display: none !important; }

.soc-invite-badge {
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}
/* The narrow-bar equivalents (index.html) are plain .mob-badge instances,
   which default to the brand pink for a plain count (venues/genres) — these
   are always a count of things waiting on this account to approve or
   decline, so recolor just the fill to match .soc-tab-dot--urgent. */
[data-soc-badge] { background: #dc2626; }

/* Narrow action bar — last flex child of the fixed #social-view, so it
   sits at the bottom without needing its own position:fixed. Same
   chrome as #mobile-bottom-bar. Shown only where #bar-social is hidden. */
#social-bottom-bar {
    display: none;
    flex-shrink: 0;
    flex-direction: column;
    background: #fbf7f0;
    border-top: 1px solid #e7e0d8;
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
#social-bottom-bar[hidden] { display: none !important; }
@media (max-width: 640px) {
    #social-bottom-bar { display: flex; }
}
html.native-app #social-bottom-bar, html.chip-overflow #social-bottom-bar { display: flex; }
#social-bottom-bar .mob-icon-btn:disabled, #bar-social button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* Narrow search bar (social-feed.js expandSocialSearch) — the same strip
   as the Event Feed's expanded #search-container on mobile (styles.css),
   but as the bar's first row rather than position:fixed, so the feed
   above just gets shorter instead of needing extra bottom padding. */
#social-search-row {
    display: none;
    background: #fbf7f0;
    border-bottom: 1px solid #e7e0d8;
    padding: 6px 8px;
}
#social-bottom-bar[data-search-expanded="true"]:not([data-mode="profile"]) #social-search-row { display: flex; }
[data-soc-search-input]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#social-bottom-icons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 4rem;
    padding: 0 4px;
}


/* ── Activity feed + a friend's gigs (#social-content) ────────── */
/* Day-group bar — same look as the Event Feed's group headings (app.js
   buildGroupEl, inline-styled there). Sticky inside #social-scroll. */
.soc-group-heading {
    background: #C070B8;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 15;
    margin-top: 0;
}
.soc-gig-list { display: flex; flex-direction: column; gap: 8px; }
.soc-feed-msg { margin: 1rem 0; }

/* Card wrapper reuses the Event Feed card's tailwind classes (border /
   bg-white/50) so dark mode maps the same. */
.soc-act-card { font-family: 'Poppins', sans-serif; }
/* The why-it's-here line across the top of a feed card (social-feed.js
   activityCardHtml, slotted in above the card's header by ui.js
   createEventHTML): one sentence in the social blue on the same light
   pink as the promo cards (styles.css .promo-card), like the who lines
   under the card — the names, groups and lists in it are tappable but
   not pills (see the .soc-who rules further down, which cover this too). */
.soc-act-head {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(145deg, #f9d4f3 0%, #f0b8e8 100%);
    font-size: 12px;
    font-weight: 600;
    color: var(--soc-blue);
    min-width: 0;
    cursor: pointer;
}
html.dark .soc-act-head { background: linear-gradient(145deg, #3a2334 0%, #4a2340 100%); }.soc-act-user { display: inline-flex; align-items: center; min-width: 0; }
/* The reason a gig was sent (social-feed.js reasonHtml): plain text in the
   social blue after a dash — "Sam sent you – Join me?" in an activity head,
   "Sent to you by Sam – Join me?" on a card's who line. Never for FYI. */
.soc-reason { margin-left: 4px; color: var(--soc-blue); font-weight: 700; white-space: nowrap; }

/* Social lines on cards: a one-line count summary while collapsed, the
   named lines (soc-fs-detail) once expanded */
/* Everything social on a card — the collapsed counts, the expanded who
   lines, +N, a sender's reason — is one blue, the counterpart to the app's
   pink, so it reads as one system rather than a colour per tag type. A
   soft, pastel-ish steel blue rather than a saturated one, to sit with
   the card titles; --soc-blue-soft is its tint for pill backgrounds. */
:root { --soc-blue: #3d82b8; --soc-blue-soft: #e4f0fa; --soc-blue-line: rgba(61, 130, 184, 0.4); }
html.dark { --soc-blue: #8ec5ee; --soc-blue-soft: #1c3a4d; --soc-blue-line: rgba(142, 197, 238, 0.45); }
.soc-fs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--soc-blue); font-family: 'Poppins', sans-serif; }
.soc-fs[hidden], [data-event-id].is-expanded:not(.soc-names-fit) .soc-fs { display: none; }
.soc-fs-counts { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* the named lines, shown here instead of the counts when they fit across (fitCard) */
.soc-fs-names.soc-who-list { display: none; flex: 1 1 100%; min-width: 0; padding: 0; margin: 0; }
.soc-names-fit .soc-fs-counts { display: none; }
.soc-names-fit .soc-fs-names.soc-who-list { display: flex; }
.soc-names-fit .soc-fs-detail { display: none; }
/* The counts are all one colour (the line's own) — no per-type tint. */
.soc-sum-dot { color: #c9bcae; }
.soc-fs-detail.soc-who-list { margin: 0 0 12px; padding: 0; }
.soc-fs-detail[hidden] { display: none; }
.soc-fs-detail .soc-who { font-family: 'Poppins', sans-serif; }
/* Group members view: back link + group name above the lists */
/* rename row, then the delete control right-aligned with the same 8px rhythm as the fields */
/* A labelled form (create a group, a group's settings): labels in one
   column, their controls lined up in the next. Each .soc-form-row is just
   its two cells (display: contents), so a row can be hidden as a whole. */
.soc-form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
}
.soc-form-row { display: contents; }
.soc-form-row[hidden] { display: none; }
.soc-form-label { font-size: 14px; font-weight: 700; color: #3e352e; }
.soc-form-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soc-form-control > .fn-btn { flex-shrink: 0; align-self: stretch; }
.soc-form .fn-select { padding: 8px 10px; font-size: 14px; }
.soc-form-value { font-size: 14px; color: #3e352e; }
.soc-form-hint { font-size: 13px; color: #8a7a6a; }
/* The rename message sits under the name box, taking no room while empty. */
.soc-form-row--msg > .fn-msg:empty { display: none; }
.soc-form-row--msg > span:first-child { display: none; }
.soc-form-row--msg > .fn-msg { grid-column: 2; margin-top: -6px; }
.soc-form-actions { margin-top: 16px; align-items: center; }
/* Delete group / Delete list / Leave / Unfollow: on the left, with a bit
   of air above so it doesn't sit hard against the fields. */
.soc-settings-foot { display: flex; justify-content: flex-start; margin-top: 18px; }
/* same height as Rename, which the field row stretches to the input */
.soc-settings-foot > .fn-btn { box-sizing: border-box; min-height: calc(14px * 1.5 + 16px + 2px); }
.soc-settings-foot .soc-confirm { flex: 1; }

/* Sections that need the user to act are opened (.soc-collapsible--urgent,
   social-core.js sectionHtml) but not marked — the red goes on the specific
   row waiting on you (.soc-row--urgent: an invitation, a group with people
   asking to join), not the title or the rest of the section. */
.soc-act-verb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-act-from { flex-shrink: 0; }
/* Person pill — every name in the feed / rollups, tappable */
.soc-name-pill {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 7px;
    border: none;
    border-radius: 999px;
    background: #f5d0f0;
    color: #7a1f68;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
button.soc-name-pill:hover { background: #efb8e6; }
.soc-name-pill--me { background: #e7e0d8; color: #4f463c; cursor: default; }
.soc-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; vertical-align: middle; }
.soc-act-head .soc-pills { flex: 1 1 auto; }
.soc-act-verb--tight { flex: 0 0 auto; }
.soc-act-groupbtn {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 7px;
    border: none;
    border-radius: 999px;
    background: #e9e2f7;
    color: #5b3d8c;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.soc-act-groupbtn:hover { background: #dccff2; }
/* A list's pill: the group pill in the recommend tint */
.soc-act-listbtn { background: #f5d0f0; color: #7a1f68; }
.soc-act-listbtn:hover { background: #efb8e6; }
.soc-avatar--list { background: #f5d0f0; color: #7a1f68; }
/* The gig at the top of Send to Friends / Add to List: the same title and
   venue line as its Event Feed card (ui.js createEventHTML — h3
   font-semibold text-base leading-snug #111, p text-xs font-medium
   text-stone-500, both Poppins) so it's recognisably the same gig. */
.soc-add-title { padding: 16px 18px 12px; border-bottom: 1px solid #f0f0f0; }
.soc-add-title-name { font-size: 16px; font-weight: 600; color: #111; line-height: 1.375; }
.soc-add-title-sub { margin-top: 2px; font-size: 12px; font-weight: 500; color: #78716c; }
html.dark .soc-add-title { border-color: #332c24; }
html.dark .soc-add-title-name { color: #ece5db; }
html.dark .soc-add-title-sub { color: #a3968a; }
/* The Social filter tree: same no-caret / no-select rules as the venue tree (styles.css) */
#social-filter-container, #social-filter-container .node-header-toggle, #social-filter-container .node-toggle-btn { user-select: none; -webkit-user-select: none; caret-color: transparent; }
#social-filter-container .node-chevron-icon { transition: transform 0.12s ease-in-out; }
.soc-who-list { padding: 0 12px 9px; margin-top: -4px; display: flex; flex-direction: column; gap: 2px; }
/* every line fits across one row (fitWhoGroup) */
.soc-who-list.is-row { flex-direction: row; flex-wrap: nowrap; gap: 12px; }
.soc-who-list.is-row .soc-who--fit { flex: 0 0 auto; overflow: visible; }
.soc-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--soc-blue); }
/* One line: pills that don't fit hide behind +N until tapped (fitWhoLines) */
.soc-who--fit { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.soc-who--fit .soc-who-label { flex-shrink: 0; white-space: nowrap; }
.soc-who--fit .soc-pills { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.soc-who--fit .soc-pills > * { flex-shrink: 0; white-space: nowrap; }
.soc-who--fit .soc-pills > [hidden] { display: none; }
.soc-who--fit.is-open, .soc-who--fit.is-open .soc-pills { flex-wrap: wrap; overflow: visible; }
.soc-more {
    flex-shrink: 0;
    padding: 1px 7px;
    border: 1px solid var(--soc-blue);
    border-radius: 999px;
    background: transparent;
    color: var(--soc-blue);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.soc-more:hover { background: var(--soc-blue-soft); }
.soc-more[hidden] { display: none; }
/* Labels ("3 going", "Sent to you by", "On") all in the line's own colour —
   no per-type tint. The names after them are plain tappable text rather
   than the activity feed's pills: same blue, no background, a faint
   underline to say they're links. A sender's reason keeps its small pill. */
.soc-who-label { font-weight: 700; margin-right: 4px; } /* a single space after the colon */
.soc-who .soc-name-pill, .soc-who .soc-act-groupbtn,
.soc-act-head .soc-name-pill, .soc-act-head .soc-act-groupbtn {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--soc-blue-line);
    text-underline-offset: 2px;
}
.soc-who button.soc-name-pill:hover, .soc-who .soc-act-groupbtn:hover,
.soc-act-head button.soc-name-pill:hover, .soc-act-head .soc-act-groupbtn:hover { background: none; text-decoration-color: currentColor; }
.soc-who .soc-name-pill--me, .soc-act-head .soc-name-pill--me { color: inherit; text-decoration: none; }
/* Names on a who line (and the recipients of your own send on its head)
   are separated by the same dot as the collapsed counts ("Charlie · Sam").
   The dot lives on the item after it, so a trailing item hidden behind
   +N (fitWhoLines) takes its dot with it. */
.soc-who-item { display: inline-flex; align-items: center; min-width: 0; }
.soc-who .soc-pills, .soc-act-head .soc-pills { gap: 0; }
.soc-who .soc-who-item + .soc-who-item::before, .soc-act-reason + .soc-act-reason::before { content: '·'; margin: 0 6px; color: #c9bcae; }
html.dark .soc-who .soc-who-item + .soc-who-item::before, html.dark .soc-act-reason + .soc-act-reason::before { color: #52483d; }
/* On a feed card's head the dot is between reasons, so the names within
   one reason are a sentence instead: "Alice, Bob are interested". */
.soc-act-head .soc-who-item:not(:last-child)::after { content: ','; margin-right: 5px; }
/* Several reasons for one gig share its head (social-feed.js
   activityCardHtml), wrapping onto more rows only when they don't fit. */
.soc-act-head--multi { flex-wrap: wrap; row-gap: 2px; }
.soc-act-reason { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.soc-act-reason .soc-act-verb { flex: 0 1 auto; }
.soc-who .soc-reason, .soc-act-head .soc-reason { font-weight: inherit; }
/* "You added to lists A, B, C" (social-feed.js activityHeadHtml): plain
   inline text that word-wraps like a sentence — no flex columns, and every
   name shown in full, never ellipsised. */
.soc-act-flow { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.5; }
.soc-act-flow .soc-act-user, .soc-act-flow .soc-pills, .soc-act-flow .soc-who-item { display: inline; }
.soc-act-flow .soc-act-user, .soc-act-flow .soc-act-verb { margin-right: 5px; }
.soc-act-flow .soc-act-verb { white-space: normal; overflow: visible; }
.soc-act-head .soc-act-flow .soc-name-pill, .soc-act-head .soc-act-flow .soc-act-groupbtn {
    display: inline; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; text-align: left;
}

.soc-ev-title .status-icon { display: inline-block; vertical-align: -1px; margin-left: 5px; color: #c83dac; }

/* Event line — mirrors .event-chrome in ui.js createEventHTML */
.soc-ev {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 10px;
}
.soc-ev--link { cursor: pointer; }
.soc-ev--link:hover .soc-ev-title { color: #c83dac; }
.soc-ev--link:focus-visible { outline: 2px solid #c83dac; outline-offset: -2px; border-radius: 6px; }
.soc-ev-main { flex: 1; min-width: 0; }
.soc-ev-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
    color: #111;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.soc-ev-venue {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: #78716c;
    margin: 2px 0 0;
}
.soc-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
}
.soc-tag--added { color: #b45309; background: #fef3c7; }
.soc-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 2rem;
    color: #878582;
    font-weight: 700;
    line-height: 1;
}
.soc-date-day, .soc-date-mon { font-size: 10px; letter-spacing: 0.06em; }
.soc-date-num { font-size: 12px; }
.soc-date-tba { font-size: 10px; letter-spacing: 0.06em; color: #a8a29e; }
.soc-ev-chevron { flex-shrink: 0; color: #a8a29e; }
/* Tag ▾ on Social event lines — same picker as the feed card's */
.soc-tag-wrap { position: relative; flex-shrink: 0; margin-left: 4px; }
.soc-tag-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #c83dac;
    background: rgba(255, 255, 255, 0.6);
    color: #c83dac;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
.soc-tag-btn:hover, .soc-tag-btn[aria-expanded="true"] { background: #fdeef9; }
.soc-tag-picker {
    position: fixed;
    min-width: 9rem;
    z-index: 9999;
    background: #fff;
}
.soc-tag-picker .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Friend / group / list view: its title is a .soc-group-heading bar
   (social-view.js headHtml) — name on the left with the kind's icon, the
   tally small on the right, wrapping under it when the bar's too narrow. */
.soc-friend-head { gap: 6px 12px; flex-wrap: wrap; font-family: 'Poppins', sans-serif; }
.soc-friend-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.soc-friend-name svg { flex-shrink: 0; }
.soc-friend-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: -4px 0 -4px -4px; flex-shrink: 0;
    border-radius: 999px; color: inherit; background: rgba(255, 255, 255, 0.18);
}
.soc-friend-back:hover { background: rgba(255, 255, 255, 0.3); }
.soc-friend-sub { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.soc-gig-section { margin-bottom: 18px; }
.soc-gig-section .fn-section-title { font-family: 'Poppins', sans-serif; margin-left: 2px; }

/* The Help sheet's copy (social-settings.js renderHelp). */
.soc-info { padding: 16px 18px; }
.soc-info h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4537E;
    margin: 18px 0 4px;
}
.soc-info h3:first-of-type { margin-top: 0; }
.soc-info p { font-size: 14px; line-height: 1.5; color: #6b5f58; margin: 0; }
.soc-info p + p { margin-top: 8px; }
.soc-info .soc-info-intro { margin-bottom: 14px; }
.soc-info strong { font-weight: 600; color: #3d332d; }
.soc-info .soc-info-note { margin-top: 16px; text-align: center; font-weight: 600; color: #3d332d; }

/* Friend rows in the Friends sheet: avatar + name open their gigs */
.soc-row-main--link {
    padding: 2px 6px 2px 2px;
    margin: -2px 0 -2px -2px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
.soc-row-main--link:hover { background: rgba(200, 61, 172, 0.08); }
.soc-row-main--link:hover .soc-row-name { color: #c83dac; }
.soc-row-open { display: inline-block; vertical-align: -2px; margin-left: 5px; color: #b07090; }
.soc-row-main--link:hover .soc-row-open { color: #c83dac; }

/* Group avatar (people icon instead of an initial) + "via group" tag on feed cards */
.soc-avatar--group { background: #e9e2f7; color: #5b3d8c; }
.soc-act-group {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e9e2f7;
    color: #5b3d8c;
}

.soc-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #3e352e;
    cursor: pointer;
    user-select: none;
}
.soc-filter-check input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #c83dac;
    flex-shrink: 0;
    cursor: pointer;
}

/* Friends | Groups | Lists tab strip at the top of the sheet — same look as the
   filter panel's Venues | Genres tabs (.tab-btn, styles.css). */
.soc-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}
.soc-tab {
    flex: 1;
    position: relative;
    padding: 0.5rem 0.25rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.soc-tab.active { color: #D4537E; }
.soc-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: #D4537E;
}
/* Positioned against the label text itself (syncPeopleBadges), not the
   flex-1 tab button, so the dot sits right at the corner of "Friends" /
   "Groups" / "Lists" instead of out at the far edge of a wide button. */
.soc-tab-label { position: relative; }

/* Round action buttons under an expanded Friends / Groups / Your lists
   section (social-core.js roundActionsHtml) — "Add a friend", "Join a
   group" / "Create a group", "Find a list" / "Create a list". Tapping one
   opens a screen that replaces the sheet's content in place, same idea as
   the sheet's own Back button. */
.soc-round-actions {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 14px 0 6px;
}
.soc-round-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.soc-round-action-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #c83dac;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(200, 61, 172, 0.35);
    transition: background 0.15s;
}
.soc-round-action:hover .soc-round-action-icon { background: #a82e90; }
.soc-round-action-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b5f58;
    text-align: center;
}

/* A person or group row waiting on you (social-core.js personRowHtml /
   groupRowHtml urgent) — the same pinky-red tint either way, plus a small
   dot by the name so it also matches the tab-level dots. */
.soc-urgent-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dc2626;
    margin-left: 6px;
    vertical-align: middle;
}
.soc-pane[hidden] { display: none; }

/* Friends & Groups sheet: panes fill the body so a footer can sit at the
   bottom even when the list above is short. The sheets with a .soc-foot
   (the Friends / Groups / Lists tabs, Add a friend, a group's and a
   list's settings) drop the body's own
   bottom padding too — the foot carries its own padding and safe-area
   inset, so the body's would stack under it and leave the round button
   sat high in the bar. */
#sheet-people .fn-sheet-body, #sheet-add-friend .fn-sheet-body,
#sheet-group-settings .fn-sheet-body, #sheet-list-settings .fn-sheet-body { padding-bottom: 0; }
#sheet-people .soc-pane:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
#sheet-people .soc-pane > div { flex: 1; }
.soc-friends { display: flex; flex-direction: column; }
.soc-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 12px 18px;
    padding-bottom: calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    background: #fff;
    border-top: 1px solid #f0f0f0;
}
/* A round action (Share outside app) pinned in the foot bar instead of a
   full-width button — the foot's own padding already gives it room. */
.soc-foot .soc-round-actions { padding: 0; }

/* Collapsible section (Create a group) */
.soc-collapsible-hd {
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: transparent;
    justify-content: space-between;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
/* Every collapsible section title (Friends / Groups / Lists tabs, a
   group's or list's settings, Send to Friends…): a faint band of the brand
   pink, translucent so it takes the sheet's own tone, running edge to edge
   rather than bare text. */
.soc-collapsible-hd {
    /* bleed out through the section's 18px side padding to the sheet's edges */
    width: calc(100% + 36px);
    margin: 0 -18px;
    padding: 6px 18px;
    background: rgba(200, 61, 172, 0.07);
}
html.dark .soc-collapsible-hd { background: rgba(224, 106, 200, 0.12); }
.soc-collapsible-chevron { color: #b07090; transition: transform 0.15s; }
.soc-collapsible.is-open .soc-collapsible-chevron { transform: rotate(180deg); }
.soc-collapsible-body { padding-top: 12px; }
.soc-collapsible-hd > span { display: inline-flex; align-items: center; gap: 8px; }
/* Same pill as the feed's "today" label; dark colours come from styles.css's
   .text-red-600 / .bg-red-50 overrides. */
.soc-action-tag { font-family: 'Poppins', sans-serif; letter-spacing: 0.04em; }
html.dark .soc-action-tag.text-red-600 { color: #f0a0a0; }
html.dark .soc-action-tag.text-violet-600 { color: #c9b6f0; background: #3a2f52; }
.soc-collapsible-body[hidden] { display: none; }
.soc-filter-check.is-disabled { opacity: 0.4; cursor: default; }
.soc-filter-check.is-disabled input { cursor: default; }

/* Send to Friends / Add to List sheet: event at the top, collapsible
   sections, the button pinned below (with a labelled reason picker when
   it's people you're sending to). */
.soc-send { display: flex; flex-direction: column; min-height: 100%; }
.soc-send-body { flex: 1; }
.soc-send-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}
#soc-send-reason { flex: 1; min-width: 0; }
/* A checkbox row list (Friends / Groups / Lists picks, filter-checkbox
   style) — same row shape as the Venues/Genres filter tree, including its
   gap between rows, rather than the tighter default .soc-list spacing. */
.soc-check-list { display: flex; flex-direction: column; gap: 0.75rem; }
.soc-check-list + .soc-check-list { margin-top: 0.75rem; }

/* ── A friend's poster — full-screen overlay iframe ─────────── */
.soc-poster-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    flex-direction: column;
    background: #fbf7f0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.soc-poster-overlay--open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}
.soc-poster-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    padding-top: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    background: #c070b8;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}
.soc-poster-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soc-poster-body { position: relative; flex: 1; min-height: 0; }
/* Person / group view — same overlay chrome; the poster overlay sits above it */
/* Bars swap between the feed buttons and Back / View as poster while a
   person's or group's gigs are showing (social.js setProfileBar). */
#bar-social[data-mode="profile"] #bar-social-buttons > :not(.soc-bar-profile), #social-bottom-bar[data-mode="profile"] .mob-icon-btn:not(.soc-bar-profile) { display: none !important; }
#bar-social:not([data-mode="profile"]) #bar-social-buttons > .soc-bar-profile, #social-bottom-bar:not([data-mode="profile"]) .soc-bar-profile { display: none !important; }
.soc-empty-note { padding: 2px 0 6px; }
.soc-poster-loading {
    position: absolute;
    inset: 0;
    justify-content: center;
}
.soc-poster-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
    opacity: 0;
    transition: opacity 0.2s;
}
.soc-poster-frame.is-ready { opacity: 1; }

/* ── About modal ─────────────────────────────────────────────── */
#about-modal-card {
    display: flex;
    flex-direction: column;
    max-height: min(90dvh, 640px);
    padding: 1.25rem 0 0;
}
.about-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem 1.5rem;
    flex-shrink: 0;
}
.about-modal-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #D4537E;
    margin: 0;
}
.about-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #a8659a;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.about-modal-close:hover { background: #fdf2f8; color: #c83dac; }
#about-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 0.5rem;
}
#about-modal #about-footer-row {
    flex-shrink: 0;
    border-top: 1px solid #e7e0d8;
    padding: 0.65rem 1.5rem;
}

/* ── First-visit help (POC) — #tab-help-modal, the About modal's card ── */
#tab-help-modal-card {
    display: flex;
    flex-direction: column;
    max-height: min(90dvh, 640px);
    padding: 1.25rem 0 0;
}
#tab-help-scroll { flex: 1; overflow-y: auto; }
#tab-help-scroll .soc-info { padding: 0 1.5rem 1rem; }
/* The tab's name is the modal's own heading, bigger than the About title,
   so the copy's small h3 repeat of it goes. */
#tab-help-modal-title { font-size: 20px; }
#tab-help-scroll .soc-info h3 { display: none; }
#tab-help-footer-row {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e7e0d8;
    padding: 0.75rem 1.5rem;
}
#tab-help-ok-btn {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: #c83dac;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
#tab-help-ok-btn:hover { background: #a8318f; }

/* ── Dark mode ───────────────────────────────────────────────── */
html.dark .fn-sheet-backdrop { background: rgba(237, 229, 218, 0.28); }
html.dark .fn-sheet {
    background: #211c17;
    border-left-color: #e06ac8;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    color: #ded3c5;
}
html.dark .fn-sheet-body { background: #211c17; }
html.dark .fn-sheet-body::-webkit-scrollbar-track { background: #211c17; }
html.dark .fn-sheet-body::-webkit-scrollbar-thumb { background: #52483d; }
@media (max-width: 640px) {
    html.dark .fn-sheet { border-top-color: rgba(224, 106, 200, 0.3); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); }
}
html.dark.native-app .fn-sheet { border-top-color: rgba(224, 106, 200, 0.3); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); }

html.dark .fn-section { border-color: #332c24; }
html.dark .fn-section-title { color: #e06ac8; }
html.dark .soc-info h3 { color: #e06ac8; }
html.dark .soc-info p { color: #a3968a; }
html.dark .soc-info strong, html.dark .soc-info .soc-info-note { color: #ede5da; }
html.dark .fn-section-count { color: #a3968a; }
html.dark .fn-help { color: #a3968a; }
html.dark .fn-help a.soc-inline-link { color: #e06ac8; }
html.dark .fn-field-label { color: #a3968a; }
html.dark .fn-field-label-inline { color: #ede5da; }
html.dark .fn-count { color: #736657; }
html.dark .fn-input {
    background: #2b251e;
    border-color: #463d33;
    color: #ede5da;
}
html.dark .fn-input::placeholder { color: #9a8d80; }
html.dark .fn-select { background: #2b251e; border-color: #463d33; color: #ede5da; }
html.dark .fn-select:focus { border-color: #e06ac8; box-shadow: 0 0 0 3px rgba(224, 106, 200, 0.18); }
html.dark .fn-input:focus { border-color: #e06ac8; box-shadow: 0 0 0 3px rgba(224, 106, 200, 0.18); }
html.dark .fn-search-icon { color: #d093b8; }
html.dark .fn-btn { background: #332c24; border-color: #52463a; color: #c9bcae; }
html.dark .fn-btn:hover:not(:disabled) { background: #3a2334; border-color: #e06ac8; color: #e06ac8; }
html.dark .fn-btn--primary { background: #c83dac; border-color: #c83dac; color: #fff; }
html.dark .fn-btn--primary:hover:not(:disabled) { background: #e06ac8; border-color: #e06ac8; color: #211c17; }
html.dark .fn-btn--danger { background: #b0433a; border-color: #b0433a; color: #fff; }
html.dark .fn-btn--danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; }
html.dark .fn-msg--error { color: #f0a0a0; }
html.dark .fn-msg--ok { color: #7fd39a; }
html.dark .fn-error-bar { background: #34241f; border-color: #7f3a3a; }
html.dark .fn-loading { color: #a3968a; }
html.dark .fn-spinner { border-color: rgba(224, 106, 200, 0.25); border-top-color: #e06ac8; }

html.dark .soc-row { border-color: rgba(224, 106, 200, 0.12); }
html.dark .soc-avatar { background: #4a2340; color: #f0d9e8; }
html.dark .soc-row-name { color: #ede5da; }
html.dark .soc-row-sub { color: #a3968a; }
html.dark .soc-row--urgent { background: #34241f; }
html.dark .soc-urgent-dot { background: #f0908a; }
html.dark .soc-round-action-icon { background: #e06ac8; color: #211c17; }
html.dark .soc-round-action:hover .soc-round-action-icon { background: #d093b8; }
html.dark .soc-round-action-label { color: #b3a698; }
html.dark .soc-chip { background: #3a2334; color: #e06ac8; }
html.dark .soc-confirm { background: #34241f; border-color: #7f3a3a; }
html.dark .soc-confirm-text { color: #f0908a; }
html.dark .soc-link-modal { background: rgba(237, 229, 218, 0.28); }
html.dark .soc-link-modal-head h2 { color: #ede5da; }
html.dark .soc-link-modal-text { color: #ded3c5; }
html.dark .soc-link-modal-note { color: #b3a698; }
html.dark .soc-link-modal-err { color: #ff8a80; }
html.dark .soc-link-modal-close, html.dark .soc-link-modal-btn { border-color: #463d33; color: #b3a698; }
html.dark .soc-link-modal-close:hover, html.dark .soc-link-modal-btn:hover { background: rgba(237, 229, 218, 0.08); }
html.dark .soc-link-modal-btn--primary { background: #c83dac; border-color: #c83dac; color: #fff; }
html.dark .soc-link-modal-btn--primary:hover { background: #a82e90; }

html.dark #social-view { background: #211c17; }
html.dark .soc-tab-dot { box-shadow: 0 0 0 2px #2b251e; background: #6ea3e6; }
html.dark .soc-tab-dot--urgent { background: #f0908a; }
html.dark .soc-invite-badge, html.dark [data-soc-badge] { background: #f0908a; }
html.dark .soc-btn--secondary { color: #e06ac8; border-color: #e06ac8; }
html.dark .soc-empty-icon { background: #4a2340; color: #e06ac8; }
html.dark .soc-empty-title { color: #ede5da; }
html.dark .soc-empty-text { color: #b3a698; }
html.dark #social-bottom-bar { background: #2b251e; border-top-color: #3a332b; }
html.dark #social-search-row { background: #211c17; border-bottom-color: #3a332b; }
html.dark .soc-search-clear { color: #9a8d80; }
html.dark .soc-search-clear:hover { color: #ede5da; }
html.dark .fn-toggle-label { color: #ede5da; }
html.dark .fn-toggle-help { color: #a3968a; }
html.dark .fn-toggle { background: #514639; }
html.dark .soc-ev-title { color: #ece5db; }
html.dark .soc-ev--link:hover .soc-ev-title { color: #e06ac8; }
html.dark .soc-ev-venue { color: #a3968a; }
html.dark .soc-tag--added { color: #fbbf24; background: #3d3014; }
html.dark .soc-date { color: #a09d99; }
html.dark .soc-ev-chevron { color: #736657; }
html.dark .soc-row-main--link:hover { background: rgba(224, 106, 200, 0.1); }
html.dark .soc-row-main--link:hover .soc-row-name { color: #e06ac8; }
html.dark .soc-poster-overlay { background: #211c17; }
html.dark .soc-sum-dot { color: #52483d; }
html.dark .soc-tag-btn { background: rgba(255,255,255,0.06); border-color: #e06ac8; color: #e06ac8; }
html.dark .soc-tag-btn:hover, html.dark .soc-tag-btn[aria-expanded="true"] { background: #3a2334; }
html.dark .soc-tag-picker { background: #332c24; border-color: #6b3560; }
html.dark .soc-tag-picker button:hover { background: #3a2334; }
html.dark .soc-send-foot { border-color: #332c24; }
html.dark .soc-send-foot, html.dark .soc-foot { background: #211c17; border-color: #332c24; }
html.dark .soc-avatar--group, html.dark .soc-act-group, html.dark .soc-act-groupbtn { background: #3a2f52; color: #c9b6f0; }
html.dark .soc-act-groupbtn:hover { background: #4a3d68; }
html.dark .soc-act-listbtn, html.dark .soc-avatar--list { background: #4a2342; color: #f0b8e6; }
html.dark .soc-act-listbtn:hover { background: #5c2c52; }
html.dark .soc-name-pill { background: #4a2340; color: #f0d9e8; }
html.dark button.soc-name-pill:hover { background: #5e2c52; }
html.dark .soc-name-pill--me { background: #3f362c; color: #ded3c5; }
html.dark .soc-who .soc-name-pill, html.dark .soc-who .soc-act-groupbtn, html.dark .soc-who .soc-act-listbtn,
html.dark .soc-act-head .soc-name-pill, html.dark .soc-act-head .soc-act-groupbtn, html.dark .soc-act-head .soc-act-listbtn { background: none; color: inherit; }
html.dark .soc-who button.soc-name-pill:hover, html.dark .soc-who .soc-act-groupbtn:hover,
html.dark .soc-act-head button.soc-name-pill:hover, html.dark .soc-act-head .soc-act-groupbtn:hover { background: none; }
html.dark .soc-who .soc-name-pill--me { color: inherit; }
html.dark .fn-notice-bar { background: #1f3326; border-color: #2f6b52; }
html.dark .soc-filter-check { color: #ede5da; }
html.dark .soc-form-label, html.dark .soc-form-value { color: #ede5da; }
html.dark .soc-form-hint { color: #a3968a; }
html.dark .soc-tabs { background: #2b251e; border-bottom-color: #463d33; }
html.dark .soc-tab { color: #9a8d80; }

html.dark .about-modal-title { color: #e06ac8; }
html.dark .about-modal-close { color: #b3a698; }
html.dark .about-modal-close:hover { background: #3a2334; color: #e06ac8; }
html.dark #about-modal #about-footer-row { border-top-color: #463d33; }
html.dark #tab-help-footer-row { border-top-color: #463d33; }
html.dark #tab-help-ok-btn { background: #b8469f; }
html.dark #tab-help-ok-btn:hover { background: #d055b6; }

/* ── Safety: report / block / terms / delete account (social-safety.js) ── */
.soc-safety { padding: 16px 18px; }
.soc-safety .fn-help { margin: 0 0 10px; }
.soc-safety .fn-btn { margin-top: 6px; }
/* Sheet bodies are flex columns; .fn-input's flex: 1 would stretch a field to fill the sheet. */
.soc-safety .fn-input { flex: none; }
.soc-safety a { color: #c83dac; text-decoration: underline; }

/* The ⋯ on a person / list / group row, and in a profile view's heading. */
.soc-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #8a7a6a;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.soc-more-btn:hover, .soc-more-btn:focus-visible { background: rgba(80, 60, 40, 0.08); color: #3e352e; }
.soc-friend-head-end { display: inline-flex; align-items: center; gap: 4px; }
.soc-friend-head .soc-more-btn { width: 26px; height: 26px; color: rgba(255, 255, 255, 0.85); }
.soc-friend-head .soc-more-btn:hover, .soc-friend-head .soc-more-btn:focus-visible { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* The ⋯ dropdown (social-safety.js openMoreMenu): fixed by its button, above
   every sheet (.fn-sheet tops out at 10003). */
.soc-more-menu {
    position: fixed;
    z-index: 10050;
    min-width: 11rem;
    padding: 4px;
    background: #fff;
    border: 1px solid #c83dac;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(50, 30, 20, 0.18);
}
.soc-more-menu .soc-more-item { padding: 9px 10px; font-size: 13px; border-radius: 6px; white-space: nowrap; }
.soc-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #3e352e;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.soc-more-item:hover, .soc-more-item:focus-visible { background: #f6f0f4; }
.soc-more-item--danger { color: #b91c1c; }

/* Checkbox / radio rows: the terms agreement and the report reasons. */
.soc-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: #3e352e;
    cursor: pointer;
}
.soc-check-row input { width: 16px; height: 16px; accent-color: #c83dac; flex-shrink: 0; }
.soc-report-reasons { margin: 4px 0 12px; }
.soc-report-note { resize: vertical; min-height: 4.5em; }
.soc-info-list { list-style: disc; margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #6b5f58; }
.soc-info-list li { margin-bottom: 4px; }

/* Settings → Account: blocked people, delete account. */
.soc-settings-delete { margin-top: 16px; }
.soc-settings-links { font-size: 13px; margin-top: 12px; color: #8a7a6a; }
.soc-settings-links a { color: #c83dac; }

html.dark .soc-more-btn { color: #a3968a; }
html.dark .soc-more-btn:hover, html.dark .soc-more-btn:focus-visible { background: rgba(255, 255, 255, 0.08); color: #ede5da; }
html.dark .soc-friend-head .soc-more-btn { color: rgba(255, 255, 255, 0.85); }
html.dark .soc-more-menu { background: #2b251e; border-color: #e06ac8; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
html.dark .soc-more-item { color: #ede5da; }
html.dark .soc-more-item:hover, html.dark .soc-more-item:focus-visible { background: #3a2334; }
html.dark .soc-more-item--danger { color: #f87171; }
html.dark .soc-check-row { color: #ede5da; }
html.dark .soc-info-list { color: #a3968a; }
html.dark .soc-safety a, html.dark .soc-settings-links a { color: #e06ac8; }
html.dark .soc-settings-links { color: #a3968a; }