/* ==========================================================================
   Sociable (com_sociable) · extension bridge · Studio community kit
   --------------------------------------------------------------------------
   Sections 1-5 are kit-owned and byte-identical in Vesper, Quorum and Mimeo.
   Edit them in template-studio/kit/community/tpl/media/css/ext/sociable.css and
   run sync-kit.mjs for all three templates. Section 6 belongs to the template.

   Loaded by PageContext::useExtension('sociable') on pages that mount the SPA
   (option com_sociable, or the com_sociable.css asset) and by the chromes around
   mod_sociable_* modules. Bootstrap is OFF on Sociable pages (contract 2.1): its
   !important utilities would override the SPA's same-named Tailwind classes.

   App roots: every .sociable-app island: the mount #sociable-<view> plus the
   portals on <body> (#sociable-modal-root.sociable-app and one div.sociable-app
   per open dropdown). ThemeProvider writes the SPA palette INLINE on each
   island; author !important custom properties beat inline normal ones.

   Colour contract: the SPA uses --color-primary both as a fill (text on it is
   --color-text-inverse) and as text (links, active navigation). It maps to the
   link colour with the ground as its inverse: AA in every preset and scheme.
   Only --ec-* / --ts-* names are read, so no Sociable name (--color-*,
   --font-body) is ever declared on :root and none can resolve to itself.
   ========================================================================== */

/* 1. Variable map ----------------------------------------------------------- */

.sociable-app {
    --color-primary: var(--ts-link) !important;
    --color-primary-light: var(--ts-link-hover) !important;
    --color-primary-dark: var(--ts-link-hover) !important;
    --color-primary-rgb: var(--ts-link-rgb) !important;
    --color-bg-primary: var(--ec-bg) !important;
    --color-bg-secondary: var(--ec-surface-2) !important;
    --color-bg-tertiary: var(--ec-surface-2) !important;
    --color-surface: var(--ec-surface) !important;
    --color-surface-hover: var(--ec-surface-2) !important;
    --color-surface-border: var(--ec-border) !important;
    --color-surface-elevated: var(--ec-surface) !important;
    --color-border: var(--ec-border) !important;
    --color-control-border: var(--ts-control) !important;
    --color-text-primary: var(--ec-fg) !important;
    --color-text-secondary: var(--ec-fg-2) !important;
    --color-text-muted: var(--ec-fg-2) !important;
    --color-text-tertiary: var(--ec-fg-2) !important;
    --color-text-inverse: var(--ec-bg) !important;
    --color-success: var(--ts-success) !important;
    --color-success-light: var(--ts-success-bg) !important;
    --color-warning: var(--ts-warning) !important;
    --color-warning-light: var(--ts-warning-bg) !important;
    --color-error: var(--ts-danger) !important;
    --color-error-light: var(--ts-danger-bg) !important;
    --color-info: var(--ts-info) !important;
    --color-info-light: var(--ts-info-bg) !important;
    --font-body: var(--ec-font-body) !important;
    --font-heading: var(--ec-font-display) !important;
    --card-radius: var(--ec-radius) !important;
    --btn-radius: var(--ec-btn-radius) !important;
    --input-radius: var(--ec-btn-radius) !important;
}

/* The danger fill keeps --color-text-inverse (the ground) in the SPA; the
   danger tint is the AA text on it in both schemes. */
.sociable-app .btn-danger {
    color: var(--ts-danger-bg);
}

/* 2. Containment ------------------------------------------------------------ */

/* The SPA ships its own reset under .sociable-app (0,1,1); the
   template has no bare element rules (contract 2.4) and Bootstrap is off here
   (measured: zero template-caused computed-style changes inside the islands). */

/* Rich text (event, group, post): the SPA reset zeroes its margins; restore a flow rhythm (0,2,0 beats it). */
.sociable-app .prose > * + * {
    margin-block-start: 0.85em;
}

.sociable-app .prose :is(ul, ol) {
    padding-inline-start: 1.5em;
    list-style: disc;
}

.sociable-app .prose ol {
    list-style: decimal;
}

.sociable-app .prose blockquote {
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--ec-border);
}

/* 3. Leak neutralisers ------------------------------------------------------ */

/* None. Every Sociable selector is scoped to .sociable-app (verified in the
   built CSS and measured: zero changes outside the islands). */

/* 4. Default module markup -------------------------------------------------- */

/* The four modules print an inline <style> whose variables sit on an ID
   (#mod-sociable-<name>-<id>) and switch on html[data-color-scheme]; !important
   on the module class wins over both, and the tokens follow the page scheme. */
.mod-sociable-feed {
    --sfeed-bg: var(--ec-surface) !important;
    --sfeed-border: var(--ec-border) !important;
    --sfeed-border-soft: var(--ec-border) !important;
    --sfeed-text: var(--ec-fg) !important;
    --sfeed-muted: var(--ec-fg-2) !important;
    --sfeed-muted-hover: var(--ec-fg) !important;
    --sfeed-media-bg: var(--ec-surface-2) !important;
    --sfeed-primary: var(--ts-link) !important;
    --sfeed-primary-soft: var(--ts-tint) !important;
    --sfeed-shadow: var(--ts-overlay-shadow) !important;
}

.mod-sociable-groups {
    --sgroups-bg: var(--ec-surface) !important;
    --sgroups-border: var(--ec-border) !important;
    --sgroups-border-soft: var(--ec-border) !important;
    --sgroups-text: var(--ec-fg) !important;
    --sgroups-muted: var(--ec-fg-2) !important;
    --sgroups-placeholder: var(--ec-fg-2) !important;
    --sgroups-media-start: var(--ec-surface-2) !important;
    --sgroups-media-end: var(--ec-surface-2) !important;
    --sgroups-primary: var(--ts-link) !important;
    --sgroups-primary-soft: var(--ts-tint) !important;
    --sgroups-shadow: var(--ts-overlay-shadow) !important;
}

.mod-sociable-members {
    --smem-radius: var(--ec-radius) !important;
    --smem-card-bg: var(--ec-surface) !important;
    --smem-border: var(--ec-border) !important;
    --smem-primary: var(--ts-link) !important;
    --smem-primary-hover: var(--ts-link-hover) !important;
    --smem-text: var(--ec-fg) !important;
    --smem-muted: var(--ec-fg-2) !important;
    --smem-badge-bg: var(--ec-surface-2) !important;
    --smem-badge-text: var(--ec-fg) !important;
    --smem-verified: var(--ts-info) !important;
    --smem-shadow: var(--ec-shadow) !important;
    --smem-shadow-hover: var(--ts-overlay-shadow) !important;
}

.mod-sociable-notifications {
    --snot-primary: var(--ts-link) !important;
    --snot-primary-hover: var(--ts-link-hover) !important;
    --snot-bg: var(--ec-surface) !important;
    --snot-border: var(--ec-border) !important;
    --snot-text: var(--ec-fg) !important;
    --snot-muted: var(--ec-fg-2) !important;
    --snot-unread-bg: var(--ts-tint) !important;
    --snot-unread-dot: var(--ts-signal) !important;
    --snot-shadow: var(--ts-overlay-shadow) !important;
    --snot-hover: var(--ec-surface-2) !important;
    --snot-item-border: var(--ec-border) !important;
    --snot-item-hover: var(--ec-surface-2) !important;
    --snot-unread-hover: var(--ec-surface-2) !important;
    --snot-scrollbar: var(--ts-control) !important;
    --snot-badge-border: var(--ec-surface) !important;
    --snot-radius: var(--ec-radius) !important;
}

/* The feed card's author and time links sit on 19.5px lines, stacked: each
   gets a 24px target (WCAG 2.5.8). */
.mod-sociable-feed :is(.sfeed-card__author, .sfeed-card__time-link) {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
}

/* Group-type badges are hard-coded light hex pairs; the type is also written
   as text, so the badge becomes a neutral tag that works in both schemes. */
.mod-sociable-groups .sgroup-badge {
    border-radius: var(--ec-btn-radius);
    background: var(--ec-surface-2) !important;
    color: var(--ec-fg) !important;
}

/* Filled buttons hard-code white text on the primary fill (groups "Join",
   members "View profile", and the outline buttons' hover fill): the text on
   the link-colour fill is the ground. */
.mod-sociable-groups .sgroup-btn,
.mod-sociable-groups .sgroup-btn:hover,
.mod-sociable-members .smem-btn--primary,
.mod-sociable-members .smem-btn--primary:hover,
.mod-sociable-members .smem-btn--outline:hover {
    color: var(--ec-bg) !important;
}

/* The unread count: the danger pair instead of #ef4444 on white text. */
.mod-sociable-notifications .snot-badge {
    background: var(--ts-danger) !important;
    color: var(--ts-danger-bg) !important;
}

/* A 340px dropdown centred on a bell near the right edge runs off a phone:
   pin it to the trigger's inline end and cap it to the viewport. */
@media (max-width: 30rem) {
    .mod-sociable-notifications .snot-panel--dropdown {
        inset-inline: auto 0 !important;
        min-inline-size: 0 !important;
        inline-size: min(340px, calc(100dvw - 2rem)) !important;
        transform: none !important;
        transform-origin: top right !important;
    }
}

/* Share bar of plg_content_sociable (after articles; not overridable, and it
   ships no CSS): its SVGs carry no width/height. */
.sociable-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-block: 1.5rem;
}

.sociable-share-label {
    color: var(--ec-fg-2);
    font-weight: 600;
}

.sociable-share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sociable-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 44px;
    min-inline-size: 44px;
    justify-content: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ts-control);
    border-radius: var(--ec-btn-radius);
    background: var(--ec-surface);
    color: var(--ec-fg);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.sociable-share-btn:hover {
    border-color: var(--ec-fg);
    color: var(--ec-fg);
}

.sociable-share-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.sociable-share-icon svg {
    display: block;
    inline-size: 1.1em;
    block-size: 1.1em;
}

.sociable-share-buttons--sm .sociable-share-btn {
    padding-inline: 0.625rem;
    font-size: 0.875rem;
}

.sociable-share-buttons--lg .sociable-share-btn {
    padding-inline: 1.125rem;
    font-size: 1.0625rem;
}

/* 5. Page frame ------------------------------------------------------------- */

/* Below 768px the SPA pulls itself out of the content column by half of
   --bs-gutter-x on each side (default 15px); twice the template gutter makes
   the breakout land exactly on the viewport edges. */
.ts-app--sociable #ts-main {
    --bs-gutter-x: calc(2 * var(--ec-gut));
}

/* The SPA toolbar carries its own search and bell: the template's header copies
   (the account block's bell, the header search, a mod_sociable_notifications
   bell) stand down on Sociable pages (contract 5.3). */
.ts-app--sociable .ts-header__modules :is(.ts-account__bell, .ts-search--header, .mod-sociable-notifications) {
    display: none;
}

/* Below 1024px the SPA pins a 60px bottom navigation to the viewport: the page
   footer keeps its last line clear of it. */
@media (max-width: 63.9999rem) {
    .ts-app--sociable .ts-footer {
        padding-block-end: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* The pre-hydration placeholder ("Loading..." under an empty spinner div) ships
   no CSS: a quiet, centred, reserved block instead of a bare line. */
:is(.sociable-feed__loading, .sociable-groups__loading, .sociable-group__loading,
    .sociable-events__loading, .sociable-event__loading, .sociable-profile__loading,
    .sociable-notifications__loading, .sociable-topic__loading, .sociable-login__loading,
    .sociable-register__loading) {
    display: grid;
    place-items: center;
    min-block-size: 12rem;
    color: var(--ec-fg-2);
}

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* Vesper: Mona Sans headings at 125% (the kit maps --font-heading to the display face), avatars as
   bubbles, cards with the speech-bubble corner. */
.sociable-app {
    font-stretch: var(--vs-disp-stretch);
}

.sociable-app :is(h1, h2, h3) {
    letter-spacing: -0.01em;
}

/* Page head (§9): the app's page title (Groups, Events, a profile name) is the Mona page H1,
   36 to 56px like every inner page. */
html .sociable-app.sociable-app h1 {
    font-size: var(--vs-t-h1-page);
    line-height: 1.07;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* The cards carry their radius inline (var(--card-radius)), hence the one !important. */
.sociable-app :is(article[class*="bg-[var(--color-surface)]"], .sociable-event-card, div[class~="card"]) {
    border-start-start-radius: var(--vs-r-tail) !important;
}

/* Initials avatars: Sociable's inline palette (blue, purple, orange...) becomes the Vesper avatar
   tones with cream/ink letters (§1.2.4, AA), in the bubble shape. */
.sociable-app div.justify-center.text-white[style*="background-color"] {
    color: var(--vs-avatar-fg) !important;
    background-color: var(--vs-avatar-1) !important;
}

.sociable-app :is(div, span)[class*="rounded-full"]:has(> div.justify-center.text-white[style]) {
    border-radius: var(--vs-r-avatar);
}

.sociable-app div.justify-center.text-white[style*="39, 174, 96)"],
.sociable-app div.justify-center.text-white[style*="63, 81, 181)"] {
    background-color: var(--vs-avatar-2) !important;
}

.sociable-app div.justify-center.text-white[style*="231, 76, 60)"],
.sociable-app div.justify-center.text-white[style*="233, 30, 99)"] {
    background-color: var(--vs-avatar-3) !important;
}

.sociable-app div.justify-center.text-white[style*="155, 89, 182)"] {
    background-color: var(--vs-avatar-4) !important;
}

.sociable-app div.justify-center.text-white[style*="243, 156, 18)"] {
    background-color: var(--vs-avatar-5) !important;
}

/* Sociable's accent chips draw its own amber (#e08e00) mixed into text on a 12% tint: 3.4-3.7:1
   in the light scheme. They take the venue's accent-ink on the lit tint (a checked pair). */
html .sociable-app {
    --color-accent-text: var(--vs-accent-ink);
    --color-accent-bg: var(--vs-lit);
}
/* One brand per page (§5): the SPA toolbar's own logo and site name stand down under the
   Vesper header; its search and bell stay. */
.sociable-app header a.flex-none:has(> span[class*="rounded-[10px]"]) {
    display: none;
}

/* One marigold solid per viewport (§9): the header CTA is it, so the app's primary fills
   (Create, Create group, Join, Going) are lit buttons: lit ground, fg text, control edge. */
.sociable-app :is(button, a)[class*="bg-[var(--color-primary)]"] {
    border: 1.5px solid var(--vs-control);
    background-color: var(--vs-lit);
    color: var(--ec-fg);
}

/* Profile cover (§9.6): no marigold gradient, a surface-2 window with a mullion frame. */
.sociable-app div[class~="h-[150px]"][style*="linear-gradient"] {
    border-block-end: var(--vs-mullion) solid var(--ec-border);
    background: var(--ec-surface-2) !important;
}

/* Type floor (§3.3): the app's 11-13.5px meta and actions read at 15px, small UI at 16px (:root: the
   app re-injects its globals after this file, same 0,2,0). */
:root .sociable-app :is(.text-xs, [class~="text-[11px]"], [class~="text-[11.5px]"], [class~="text-[12px]"], [class~="text-[12.5px]"]) {
    font-size: 0.9375rem;
    line-height: 1.33;
}

:root .sociable-app :is(.text-sm, [class~="text-[13px]"], [class~="text-[13.5px]"]) {
    font-size: 1rem;
    line-height: 1.4;
}

/* Event cards: meta at 15px, title A 19/24, and no all-caps month on the date chip (§1.3). */
.sociable-app .sociable-event-card :is(.sociable-event-card__meta, .sociable-event-card__host, .sociable-event-card__attendance, .sociable-event-card__details, .sociable-event-card__chip) {
    font-size: 0.9375rem;
}

.sociable-app .sociable-event-card .sociable-event-card__title {
    font-size: 1.1875rem;
    line-height: 1.26;
}

.sociable-app .sociable-event-card .sociable-event-card__month {
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
}
/* Avatars stay outside the type floor: initials scale with the disc (40%, never under 10px). */
:root .sociable-app [class*="rounded-full"]:has(> div.justify-center.text-white[style]) {
    container-type: inline-size;
    line-height: 1;
}

:root .sociable-app [class*="rounded-full"] > div.justify-center.text-white[style] {
    font-size: max(0.625rem, 40cqi);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* Stacked attendees (§6.5): 24px discs inside a 2px ground ring, overlapping by 4px only. */
.sociable-app .sociable-event-card__avatars > [class*="rounded-full"] {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-end: -0.25rem;
    border: 2px solid var(--ec-surface);
}

/* Presence is the marigold ring (§1.2 #5): Sociable's green status dot becomes the ring round
   the avatar (the dot keeps its label for assistive tech, drawn off). */
.sociable-app [class*="rounded-full"]:has(> span[aria-label][class*="bg-[var(--color-success)]"]) {
    box-shadow: 0 0 0 2px var(--ec-bg), 0 0 0 4px var(--vs-signal);
}

.sociable-app span[aria-label][class*="ring-2"][class*="bg-[var(--color-success)]"] {
    clip-path: inset(50%);
}

/* Profile head (§9.6): the avatar wears the ring while its member is in (template script); Sociable's
   corner check, clipped by the circle to a green dot, stands down for the Verified chip by the name. */
.sociable-app div.rounded-full[class*="ring-4"] > span[class*="bg-[var(--color-success)]"]:not([aria-label]) {
    display: none;
}

.sociable-app div.rounded-full[class*="ring-4"][data-vs-online] {
    box-shadow: 0 0 0 2px var(--ec-surface), 0 0 0 4px var(--vs-signal);
}
/* One account avatar per screen (the Vesper header's, whose menu has the profile and settings):
   the SPA's user menu stands down at every width; below 60rem its hamburger too (its bottom bar
   keeps the app's sections). */
.sociable-app header .relative.inline-block:has(> div > button[aria-haspopup], > div > button[class*="min-h-[44px]"]) {
    display: none;
}

@media (max-width: 59.9999rem) {
    .sociable-app header button[aria-label][class*="lg:hidden"]:first-child {
        display: none;
    }
}
/* @ts-kit section-6 end */