/* ==========================================================================
   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) */
/* @ts-kit section-6 end */