/* ==========================================================================
   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) */
/* Mimeo: 2px corners, no soft shadows, Zilla heads, the zine type scale (labels 16, running text 16,
   meta Courier 700 15), two inks (amber is the yellow highlighter, a venue a tag, a coverless profile
   hatched magenta). The first block also reaches the portals on <body> (create dialog, dropdowns). */
:is(#ts-main .sociable-app,#sociable-modal-root,body>.sociable-app){
--color-accent:var(--mm-yellow);--color-accent-text:var(--ec-fg);--color-accent-bg:var(--ec-surface-2);
& :is([class~="rounded-lg"],[class~="rounded-xl"],[class~="rounded-2xl"],[class*="rounded-["],.sociable-event-card__date,.sociable-event-card__chip,kbd),& :is(button,a,span[class*="px-"],input,div[class*="px-"],div[class*="p-0.5"])[class~="rounded-full"]{border-radius:2px}
& [class*="shadow-"]:not(:focus-visible){box-shadow:none}
& :is(button,select,textarea,input:not([class~="border-0"])):focus-visible,& div[class*="focus-within:"]:has(>input:focus-visible){outline:3px solid var(--ts-focus);outline-offset:2px}
& button:not([class~="w-9"]){min-block-size:1.5rem;font-size:1rem;line-height:1.25}
& :is(p,input)[class*="text-[1"]:not([class*="text-[11"]),& p:is([class~="text-xs"],[class~="text-sm"]){font-size:1rem;line-height:1.5}
& :is(p,span,div)[class*="text-[11"]:not(button *){font:700 .9375rem/1.4 var(--ts-font-mono);white-space:nowrap}
& .flex:has(>[class*="text-[11px]"]+button){flex-wrap:wrap}
& div.justify-center.text-white[style*="background-color"]{background-color:var(--mm-avatar-a)!important;color:var(--mm-avatar-a-fg)}
& [class*="border-[color-mix(in_srgb,var(--color-accent)"]{border-color:var(--ec-border)}
& [class*="text-[var(--color-accent)]"]{color:var(--ec-fg-2)}
}
#ts-main .sociable-app{
& :is(.sociable-event-card__meta,.sociable-event-card__attendance>span,.sociable-event-card__host,.sociable-events__type>span){font:700 .9375rem/1.4 var(--ts-font-mono)}
& :is(h1,h2){font-weight:700;line-height:1.05;letter-spacing:-.01em}
& h1{font-size:clamp(2rem,1.5rem + 1.6vw,2.75rem);text-shadow:.04em .03em 0 var(--mm-misreg)}
& :is(.sociable-event-card__title,h3[class*="text-[13.5px]"]){font-size:1.375rem;font-weight:700;line-height:1.2;text-wrap:pretty}
& [class~="card"] p[class~="line-clamp-2"]{font-size:1rem;line-height:1.5}
& [class*="rounded-full"][class*="min-w-[16px]"]{background-color:var(--mm-yellow);color:var(--mm-yellow-ink)}
& span[class~="mb-3"][class*="color-success-bg"]{background-color:var(--mm-tag-bg);color:var(--mm-tag-fg)}
& div[class~="h-9"][class*="focus-within:border"]:has(>input){min-block-size:2.75rem}
& div[class~="h-9"][class*="focus-within:border"]>input{font-size:1rem}
/* The masthead keeps search, bell and account menu; the app bar only its messages tool (wide screens). */
& header.sticky{border-block-end:1px dashed var(--mm-rule);background:transparent;& :is(a[href="#/"],a[href$="notifications"],div[class~="md:flex"][class~="flex-1"],div[class~="flex-1"][class~="md:hidden"],[class~="gap-1"]>button,button[class*="lg:hidden"],.relative.inline-block),&:not(:has(a[href$="messages"])){display:none}& [class~="h-14"]>[class~="gap-1"]{margin-inline-start:auto}&>div[class*="px-"]{padding-inline:0 .5rem}@media (width < 60rem){display:none}}
& :is(main[class*="px-"],main>div[class~="px-2"],.sociable-events,aside>div[class~="px-3"]){padding-inline:0}
@media (width < 48rem){& main[class*="px-"][class]{padding-inline:var(--ec-gut)}}
@media (width >= 48rem){& [class~="-mt-7"]>[class~="flex-1"]{padding-block-start:1.75rem}}
@media (width >= 64rem){& aside+main[class*="px-"]{padding-inline-start:1.5rem}}
& :is(.sociable-events__header,main>div>div[class~="justify-between"]:first-child){& h1{font-size:clamp(2.25rem,1.4rem + 2.8vw,4rem)}& h1+p{margin-block-start:.75rem;font-size:1.0625rem;line-height:1.55}&:has(h1){margin-block-start:0;padding-block-start:1.125rem;border-block-start:2px solid var(--mm-rule-strong)}}
& main>div[class~="py-2"]{padding-block-start:0}
& :is(.sociable-event-card__rsvp,[class~="card"] [class~="mt-[11px]"],div[class~="md:pb-1.5"][class~="flex-shrink-0"],[class~="card"][class~="p-5"]>[class~="relative"][class~="w-full"],button[class~="w-9"]~button[class~="rounded-full"]){--color-primary:var(--mm-action)!important;--color-primary-dark:var(--mm-action-hover)!important;--color-primary-light:var(--mm-action-hover)!important;--color-text-inverse:var(--mm-action-fg)!important}
/* The event date as the poster voice (design 6.9): on the cover, in its own 4rem track on a wide
   compact card, else a row stamp above the title. Cards in a row share a bottom edge; a time never breaks. */
& .sociable-event-card__date{min-inline-size:4rem;padding:.5rem .625rem;background-color:var(--mm-fluoro);color:var(--mm-yellow-ink)}
& .sociable-event-card__month{color:inherit;font:700 .9375rem/1 var(--ts-font-mono);text-transform:uppercase}
& .sociable-event-card__day{color:inherit;font:700 2.5rem/1 var(--ec-font-display)}
& .sociable-event-card--cover{position:relative}
& .sociable-event-card__chips{justify-content:flex-end}
& .sociable-event-card--cover .sociable-event-card__body{grid-template-columns:minmax(0,1fr)}
& .sociable-event-card--cover .sociable-event-card__date{position:absolute;inset:.75rem auto auto .75rem}
& .sociable-event-card--compact .sociable-event-card__body{grid-template-columns:4rem minmax(0,1fr) auto}
& .sociable-event-card:not(.sociable-event-card--cover,.sociable-event-card--compact){& .sociable-event-card__body{grid-template-columns:minmax(0,1fr)}& .sociable-event-card__date{flex-direction:row;align-items:baseline;justify-self:start;gap:.5rem}& .sociable-event-card__actions{grid-column:auto}}
@container sociable-event-card (max-width: 36rem){& .sociable-event-card--compact{& .sociable-event-card__body{grid-template-columns:minmax(0,1fr)}& .sociable-event-card__date{flex-direction:row;align-items:baseline;justify-self:start;gap:.5rem}& .sociable-event-card__actions{grid-column:auto}}}
& .sociable-events__grid{align-items:stretch}
& .sociable-events__grid>.sociable-event-card{display:flex;flex-direction:column}
& .sociable-events__grid>.sociable-event-card>.sociable-event-card__body{flex:1;grid-template-rows:1fr auto}
& .sociable-event-card__meta time{white-space:nowrap}
& :is(.sociable-event-card__avatars,[class~="-space-x-2"]){display:inline-flex;padding-inline-start:4px;&>div,&>:not([hidden])~:not([hidden]){inline-size:1.75rem;block-size:1.75rem;margin-inline:-4px 0;border:2px solid var(--ec-surface);box-sizing:content-box}&>div>div{font:700 .6875rem var(--ts-font-mono);letter-spacing:0}&>div:nth-child(3n+2)>div[style]{background-color:var(--mm-avatar-b)!important;color:var(--mm-avatar-b-fg)}&>div:nth-child(3n)>div[style]{background-color:var(--mm-avatar-c)!important;color:var(--mm-avatar-c-fg)}}
& [style*="linear-gradient(120deg, var(--color-primary)"]{background:repeating-linear-gradient(135deg,transparent 0 7px,rgb(0 0 0/.12) 7px 9px),var(--ec-accent)!important}
}
html .sociable-app.sociable-app span:has(>img[src$="/default-avatar.svg"]){border-radius:50%;background-color:var(--mm-avatar-a)}
html .sociable-app.sociable-app img[src$="/default-avatar.svg"]{border-radius:50%;background-color:var(--mm-avatar-a-fg);object-position:999px 0;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 23c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E") center 70%/64% no-repeat}
.ts-app--sociable.ts-app--sociable .ts-header__modules .ts-account__bell{display:inline-flex}
.ts-app--sociable.ts-app--sociable .ts-header__modules .ts-search--header{display:block}
@media (width < 60rem){.ts-app--sociable.ts-app--sociable .ts-header__modules .ts-search--header{display:contents}}
.sociable-app{--color-primary-bg:var(--ec-surface-2)!important}
/* @ts-kit section-6 end */