/* ==========================================================================
   CjForum (com_cjforum) · extension bridge · Studio community kit
   Sections 1-5 are kit-owned (edit template-studio/kit/community/tpl/media/css/ext/
   cjforum.css, then sync-kit.mjs for all three templates); section 6 is the template's.
   Loaded on forum pages, {DISCUSSTOPIC} embeds and around CjForum modules; Bootstrap is
   off there. Roots: #cjforum-root (.cjforum-container, [data-template], .cjf-tpl-*) and
   #cjforum-editor-host. Fills that carry text use --ts-link with --ec-bg text (AA in
   every preset); hsl(from ...) feeds the forum's bare HSL triplets behind @supports.
   ========================================================================== */

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

/* Sticky rails ([data-sidebar-sticky]) sit under the template's sticky offset
   (0 in app mode, where the site header is static). */
#cjforum-root {
    --cjf-sidebar-top: calc(var(--ts-sticky-offset, 0px) + 16px);
    /* The forum writes its one site theme inline; !important lets each template's own
       accent win, so a theme imported for one template never tints another's forum. */
    --theme-primary: var(--ts-link) !important;
    --theme-primary-hover: color-mix(in oklab, var(--ts-link) 86%, var(--ec-fg)) !important;
    --theme-primary-foreground: var(--ec-bg) !important;
}

@supports (color: hsl(from red h s l)) {
    /* Classic (default): shadcn bare-HSL variables; Classic only (others reuse --accent/--border/--ring as whole colours). 1,2,0 beats .cjforum-container.dark. */
    #cjforum-root[data-template="classic"].cjforum-container,
    #cjforum-root[data-template="classic"] .cjforum-container {
        --background: from var(--ec-bg) h s l;
        --foreground: from var(--ec-fg) h s l;
        --card: from var(--ec-surface) h s l;
        --card-foreground: from var(--ec-fg) h s l;
        --popover: from var(--ec-surface) h s l;
        --popover-foreground: from var(--ec-fg) h s l;
        --primary: from var(--ts-link) h s l;
        --primary-foreground: from var(--ec-bg) h s l;
        --secondary: from var(--ec-surface-2) h s l;
        --secondary-foreground: from var(--ec-fg) h s l;
        --muted: from var(--ec-surface-2) h s l;
        --muted-foreground: from var(--ec-fg-2) h s l;
        --accent: from var(--ts-tint) h s l;
        --accent-foreground: from var(--ts-on-tint) h s l;
        --destructive: from var(--ts-danger) h s l;
        --destructive-foreground: from var(--ts-danger-bg) h s l;
        --border: from var(--ec-border) h s l;
        --input: from var(--ts-control) h s l;
        --ring: from var(--ts-focus) h s l;
        --radius: var(--ec-btn-radius);
    }
}

/* Forum search (hero and bar): its slate/blue palette, neutral scale mapped per scheme (it reads the scale both ways), plus its fixed fills and system font. */
#cjforum-root {
    --search-primary: var(--ts-focus);
    --search-primary-light: var(--ts-focus);
    --search-primary-dark: var(--ts-focus);
    --search-glass-light: var(--ec-surface);
    --search-glass-medium: var(--ec-surface);
    --search-glass-dark: var(--ec-surface);
    --search-glass-medium-dark: var(--ec-surface);
    --search-neutral-50: var(--ec-surface-2);
    --search-neutral-100: var(--ec-surface-2);
    --search-neutral-200: var(--ec-border);
    --search-neutral-300: var(--ec-border);
    --search-neutral-400: var(--ec-fg-2);
    --search-neutral-500: var(--ec-fg-2);
    --search-neutral-600: var(--ec-fg-2);
    --search-neutral-700: var(--ec-fg);
    --search-neutral-800: var(--ec-fg);
    --search-neutral-900: var(--ec-fg);
    --search-shadow-light: none;
    --search-shadow-medium: none;
    --search-shadow-heavy: none;
}

[class~="dark"] #cjforum-root,
#cjforum-root[class~="dark"] {
    --search-neutral-100: var(--ec-fg);
    --search-neutral-200: var(--ec-fg);
    --search-neutral-300: var(--ec-fg-2);
    --search-neutral-600: var(--ts-control);
    --search-neutral-700: var(--ec-border);
    --search-neutral-800: var(--ec-surface-2);
}

#cjforum-root .search-container .search-box.search-box,
#cjforum-root .search-container .search-box.search-box:focus-within {
    border-color: var(--ts-control) !important;
    background: var(--ec-surface) !important;
    box-shadow: none !important;
    transform: none !important;
}

#cjforum-root .search-container .search-box.search-box:focus-within {
    outline: 2px solid var(--ts-focus);
    outline-offset: 2px;
}

/* Every forum control shows the template's focus ring: several (app-bar buttons, menu items)
   carry focus:outline-none and no ring of their own (WCAG 2.4.7). The search field is drawn by
   its box above. */
#cjforum-root :is(a[href], button, input:not(.search-input), select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: 2px;
}

#cjforum-root .search-container.search-container :is(.search-input, .filter-button, .search-clear-button, .suggestion-title) {
    background-color: transparent !important;
    color: var(--ec-fg) !important;
    font-family: inherit !important;
}

#cjforum-root .search-container.search-container :is(.filter-button, .search-clear-button) {
    border-color: var(--ts-control) !important;
}

#cjforum-root .search-container.search-container :is(.filter-button, .search-clear-button) svg {
    color: currentColor !important;
    stroke: currentColor !important;
}

#cjforum-root .search-container .search-input::placeholder {
    color: var(--ec-fg-2) !important;
}

/* Community (.cjf-tpl-community): whole colours; 1,1,0/1,2,0 beat [data-theme]; --font-ui is inline (hence !important); --sidebar* stays the forum's. */
#cjforum-root.cjf-tpl-community,
#cjforum-root.cjf-tpl-community .cjforum-container {
    --bg: var(--ec-bg);
    --bg-subtle: var(--ec-surface);
    --surface: var(--ec-surface);
    --surface-2: var(--ec-surface-2);
    --surface-hover: var(--ec-surface-2);
    --text: var(--ec-fg);
    --text-2: var(--ec-fg-2);
    --text-3: var(--ec-fg-2);
    --border: var(--ec-border);
    --border-strong: var(--ts-control);
    --ring: var(--ts-focus);
    --accent: var(--ts-link);
    --accent-hover: var(--ts-link-hover);
    --accent-soft: var(--ts-tint);
    --accent-softer: var(--ec-surface-2);
    --accent-contrast: var(--ec-bg);
    --ok: var(--ts-success);
    --ok-soft: var(--ts-success-bg);
    --warn: var(--ts-warning);
    --warn-soft: var(--ts-warning-bg);
    --danger: var(--ts-danger);
    --danger-soft: var(--ts-danger-bg);
    --info: var(--ts-info);
    --info-soft: var(--ts-info-bg);
    --r-sm: var(--ec-btn-radius);
    --r-md: var(--ec-btn-radius);
    --r-lg: var(--ec-radius);
    --r-xl: var(--ec-radius);
    --font-mono: var(--ts-font-mono);
    --font-ui: var(--ec-font-body) !important;
}

/* Pulse internal template (.cjf-tpl-pulse). */
#cjforum-root.cjf-tpl-pulse,
#cjforum-root.cjf-tpl-pulse .cjforum-container {
    --font-display: var(--ec-font-display);
    --font-body: var(--ec-font-body);
    --bg: var(--ec-bg);
    --surface: var(--ec-surface);
    --surface-2: var(--ec-surface-2);
    --nav-bg: var(--ec-bg);
    --text: var(--ec-fg);
    --text-2: var(--ec-fg-2);
    --text-3: var(--ec-fg-2);
    --border: var(--ec-border);
    --edge: var(--ts-control);
    --ring: var(--ts-focus);
    --accent: var(--ts-link);
    --accent-hover: var(--ts-link-hover);
    --accent-soft: var(--ts-tint);
    --accent-softer: var(--ec-surface-2);
    --accent-ink: var(--ec-bg);
    --ok: var(--ts-success);
    --warn: var(--ts-warning);
    --danger: var(--ts-danger);
    --info: var(--ts-info);
    --r-card: var(--ec-radius);
    --r-el: var(--ec-btn-radius);
}

/* Broadsheet internal template (.cjf-tpl-broadsheet), including its --color-*
   aliases (declared on the forum root only, never on :root). */
#cjforum-root.cjf-tpl-broadsheet,
#cjforum-root.cjf-tpl-broadsheet .cjforum-container {
    --font-heading: var(--ec-font-display);
    --font-display: var(--ec-font-display);
    --font-body: var(--ec-font-body);
    --bg: var(--ec-bg);
    --surface: var(--ec-surface);
    --surface-2: var(--ec-surface-2);
    --nav-bg: var(--ec-bg);
    --text: var(--ec-fg);
    --text-2: var(--ec-fg-2);
    --text-3: var(--ec-fg-2);
    --border: var(--ec-border);
    --divider: var(--ec-border);
    --edge: var(--ts-control);
    --ring: var(--ts-focus);
    --accent: var(--ts-link);
    --accent-hover: var(--ts-link-hover);
    --accent-soft: var(--ts-tint);
    --accent-softer: var(--ec-surface-2);
    --accent-ink: var(--ec-bg);
    --accent-text: var(--ts-link);
    --ok: var(--ts-success);
    --warn: var(--ts-warning);
    --danger: var(--ts-danger);
    --info: var(--ts-info);
    --r-card: var(--ec-radius);
    --r-el: var(--ec-btn-radius);
    --color-bg: var(--ec-bg);
    --color-surface: var(--ec-surface);
    --color-text: var(--ec-fg);
    --color-divider: var(--ec-border);
    --color-accent: var(--ts-link);
}

/* Ledger internal template (.cjf-tpl-ledger). --font is written inline by the
   shell, hence !important. */
#cjforum-root.cjf-tpl-ledger,
#cjforum-root.cjf-tpl-ledger .cjforum-container {
    --paper: var(--ec-bg);
    --paper-2: var(--ec-surface-2);
    --surface: var(--ec-surface);
    --ink: var(--ec-fg);
    --ink-2: var(--ec-fg-2);
    --muted: var(--ec-fg-2);
    --faint: var(--ts-control);
    --line: var(--ec-border);
    --line-2: var(--ts-control);
    --accent: var(--ts-link);
    --accent-ink: var(--ec-bg);
    --green: var(--ts-success);
    --blue: var(--ts-info);
    --clay: var(--ts-danger);
    --warn: var(--ts-warning);
    --r: var(--ec-radius);
    --mono: var(--ts-font-mono);
    --font: var(--ec-font-body) !important;
}

/* Community's white text on accent fills (marks, badges, banner, sign-in aside) takes the accent's contrast colour; the banner gradient becomes the flat accent (AA). */
#cjforum-root.cjf-tpl-community :is(.brand-mark, .fbrand .mark, .nav-badge, .checkbox.on, .seg-pill.active),
#cjforum-root.cjf-tpl-community :is(.fbanner, .auth-aside),
#cjforum-root.cjf-tpl-community :is(.fbanner, .auth-aside) :is(h1, h2, h3, p) {
    color: var(--accent-contrast);
}

#cjforum-root.cjf-tpl-community :is(.fbanner, .auth-aside) {
    background: var(--accent);
}

/* The banner's search button is styled inline (white fill, accent text). */
#cjforum-root.cjf-tpl-community .fbanner .hsearch > .btn {
    background: var(--ec-bg) !important;
    color: var(--ec-fg) !important;
}

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

/* Restore Preflight semantics inside the islands where a later template rule of equal weight would win (0,0,1). */
:where(#cjforum-root, #cjforum-editor-host) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

:where(#cjforum-root) :is(p, blockquote, figure, dl, dd, hr, pre) {
    margin: 0;
}

:where(#cjforum-root) a {
    color: inherit;
    text-decoration: inherit;
}

:where(#cjforum-root) :is(button, input, select, textarea) {
    font: inherit;
    color: inherit;
}

:where(#cjforum-root) :is(img, svg) {
    vertical-align: middle;
}

/* Rich text in posts and replies: the reset above and Preflight zero its margins; restore a flow rhythm. */
:where(#cjforum-root) .prose > * + * {
    margin-block-start: 0.85em;
}

:where(#cjforum-root) .prose :is(ul, ol) {
    padding-inline-start: 1.5em;
    list-style: disc;
}

:where(#cjforum-root) .prose ol {
    list-style: decimal;
}

:where(#cjforum-root) .prose blockquote {
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--ec-border);
}

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

/* The parked editor (fixed, opacity 0, aria-hidden until a composer claims it) stays
   focusable: hidden, its iframe and Toggle Editor button leave the tab order. */
.cjforum-editor-host:not(.is-active) {
    visibility: hidden;
}

/* The template's chrome declares Preflight-affected properties explicitly (contract 2.4).
   The forum's React markup also hard-codes Tailwind greys, slates and blues: they follow the
   scheme (surfaces, text, borders; blue = the link colour, hues on icons too). */
#cjforum-root :is([class~="bg-white"], [class*="dark:bg-gray-"], [class*="dark:bg-slate-"], [class*="dark:bg-neutral-"], [class*="dark:bg-zinc-"]) {
    background-color: var(--ec-surface);
}

#cjforum-root :is([class*="text-gray-7"], [class*="text-gray-8"], [class*="text-gray-9"], [class*="text-slate-7"], [class*="text-slate-9"], [class*="text-neutral-9"]) {
    color: var(--ec-fg);
}

#cjforum-root :is([class*="text-gray-4"], [class*="text-gray-5"], [class*="text-gray-6"], [class*="text-slate-4"], [class*="text-slate-5"], [class*="text-slate-6"], [class*="text-neutral-5"], [class*="text-neutral-6"]) {
    color: var(--ec-fg-2);
}

#cjforum-root :is([class*="border-gray-"], [class*="border-slate-"], [class*="border-neutral-"]) {
    border-color: var(--ec-border);
}

#cjforum-root :is([class*="text-blue-"], [class*="text-indigo-"], [class*="text-purple-"], [class*="text-green-"], [class*="text-emerald-"], [class*="text-orange-"], [class*="text-sky-"]) {
    color: var(--ts-link);
}

/* Blue: only a bare solid fill (bg-blue-500/600/700) becomes the link fill; every other bare
   blue (bg-blue-50/100, bg-blue-500/10 ...) and the forum's dark tints stay tints; hover-only
   classes change nothing at rest. */
#cjforum-root :is([class^="bg-blue-"], [class*=" bg-blue-"]),
:root[data-color-scheme="dark"] #cjforum-root [class*="dark:bg-blue-"]:not([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]) {
    background-color: var(--ts-tint);
    color: var(--ts-on-tint);
}

#cjforum-root [class*="hover:bg-blue-"]:hover {
    background-color: var(--ts-tint);
}

#cjforum-root :is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]),
#cjforum-root :is([class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"]):hover {
    background-color: var(--ts-link);
    color: var(--ec-bg);
}

/* The report dialog's solid orange action (white on orange-600 is 3.6:1): the primary pair. */
#cjforum-root :is([class~="bg-orange-600"], [class~="bg-orange-700"], [class~="hover:bg-orange-700"]:hover) {
    background-color: var(--ts-btn-primary-bg, var(--ec-accent));
    color: var(--ts-btn-primary-fg, var(--ec-accent-fg));
}

#cjforum-root :is([class~="bg-green-50"], [class~="bg-emerald-50"], [class~="bg-purple-50"], [class~="bg-indigo-50"], [class~="bg-orange-50"], [class~="bg-amber-50"], [class~="bg-yellow-50"], [class~="bg-red-50"], [class~="bg-pink-50"], [class~="bg-sky-50"]) {
    background-color: var(--ec-surface-2);
}

#cjforum-root :is([class^="bg-blue-"], [class*=" bg-blue-"]) :is(svg, [class*="text-blue-"]) {
    color: inherit;
}

/* Switches (peer-checked:bg-primary): off = control-border track, on = accent track. */
#cjforum-root [class*="peer-checked:bg-primary"] {
    background-color: var(--ts-control);
}

#cjforum-root .peer:checked ~ [class*="peer-checked:bg-primary"] {
    background-color: var(--ec-accent);
}

/* Red (liked, destructive): the template's danger pair, never Tailwind red. */
#cjforum-root [class*="text-red-"] {
    color: var(--ts-danger);
}

#cjforum-root :is([class~="bg-red-50"], [class~="bg-red-100"]),
:root[data-color-scheme="dark"] #cjforum-root [class*="dark:bg-red-9"] {
    background-color: var(--ts-danger-bg);
}

#cjforum-root [class*="border-red-"] {
    border-color: var(--ts-danger);
}

/* A bare `border` (or an arbitrary colour that did not compile) keeps Preflight's #e5e7eb:
   zero specificity, so any utility colour still wins. */
:where(#cjforum-root, #cjforum-editor-host) :where(*, ::before, ::after) {
    border-color: var(--ec-border);
}

/* The hero search glyph is #3c3c3c !important in the forum's CSS (1.5:1 on a dark field). */
#cjforum-root .search-container.search-container .search-icon {
    color: var(--ec-fg-2) !important;
    stroke: currentColor !important;
}

#cjforum-root [class*="!bg-neutral-900"] {
    border-color: var(--ts-control) !important;
    background-color: var(--ts-tint) !important;
    color: var(--ts-on-tint) !important;
}

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

/* mod_cjforum, mod_cjforumtopusers, mod_topicform print Bootstrap markup: add what the bridge lacks (shrink-0/grow, .text-dark, avatars) and Bootstrap behaviours on BS-off pages. */
.mod-cjforum .shrink-0,
.mod-cjforumtopusers .flex-shrink-0 {
    flex-shrink: 0;
}

.mod-cjforum .grow,
.mod-cjforumtopusers .flex-grow-1 {
    flex-grow: 1;
    min-inline-size: 0;
}

.mod-cjforum .text-dark {
    color: var(--ec-fg) !important;
}

.mod-cjforum .badge.bg-info {
    background-color: var(--ts-info-bg) !important;
    color: var(--ts-info) !important;
}

.mod-cjforum .badge.bg-info .text-dark {
    color: inherit !important;
}

/* Topic titles and member names read as headings of their rows: body colour,
   underlined on hover and focus (the list is a list of links, nothing else). */
.mod-cjforum .topics-list > .d-flex > .grow > a,
.mod-cjforumtopusers .flex-grow-1 > a {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mod-cjforum .topics-list > .d-flex > .grow > a:is(:hover, :focus-visible),
.mod-cjforumtopusers .flex-grow-1 > a:is(:hover, :focus-visible) {
    color: var(--ts-link);
    text-decoration: underline;
}

.mod-cjforum .nav-link {
    overflow-wrap: anywhere;
    text-align: start;
}

.mod-cjforum .topics-list img,
.mod-cjforumtopusers img {
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* Declared explicitly so the modules read the same on a forum, GPS or Sociable
   page (whose Preflight zeroes link decoration and hr margins) as elsewhere. */
.mod-cjforum .forum-info a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.mod-cjforum .topics-list > hr {
    margin-block: 0.5rem;
    border: 0;
    border-block-start: 1px solid var(--ec-border);
    opacity: 1;
}

/* Bootstrap-off pages (ts-bs-off): the markup's layout, tabs and labels. */
.ts-bs-off .mod-cjforum .d-flex,
.ts-bs-off .mod-cjforumtopusers .d-flex {
    display: flex;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.ts-bs-off .mod-cjforum .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    border-block-end: 1px solid var(--ec-border);
}

.ts-bs-off .mod-cjforum .nav-link {
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-block-end: var(--ts-tab-indicator-width, 3px) solid transparent;
    background: none;
    color: var(--ec-fg-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ts-bs-off .mod-cjforum .nav-link:hover {
    color: var(--ec-fg);
}

.ts-bs-off .mod-cjforum .nav-link.active {
    border-block-end-color: var(--ts-tab-indicator, var(--ts-signal));
    color: var(--ec-fg);
}

.ts-bs-off .mod-cjforum .tab-content > .tab-pane:not(.active) {
    display: none;
}

.ts-bs-off .mod-cjforum .list-inline,
.ts-bs-off .mod-cjforum .forum-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.75rem;
    margin: 0.25rem 0;
    padding: 0;
    list-style: none;
}

.ts-bs-off :is(.mod-cjforum, .mod-cjforumtopusers) :is(.text-muted, .small) {
    color: var(--ec-fg-2);
    font-size: 0.875rem;
}

.ts-bs-off :is(.mod-cjforum, .mod-cjforumtopusers) .badge {
    display: inline-block;
    padding: 0.2em 0.55em;
    border-radius: var(--ec-btn-radius);
    background: var(--ec-surface-2);
    color: var(--ec-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 39.9999rem) {
    .ts-bs-off :is(.mod-cjforum, .mod-cjforumtopusers) .d-none {
        display: none;
    }
}

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

/* The forum on the template ground: transparent mount, Classic's gradient page = ground, boot loader without #fff/#0b0d10 (1,3,1 beats its inline 1,3,0). */
#cjforum-root.cjforum-container,
#cjforum-root .cjforum-container {
    background-color: transparent;
}

#cjforum-root[data-template="classic"] .cjforum-container .bg-gradient-to-br.min-h-screen {
    background: var(--ec-bg);
}

html:root[data-color-scheme] #cjforum-root:not([data-cjforum-state="loaded"]) {
    background: var(--ec-bg);
}

html:root[data-color-scheme] #cjforum-root .cjf-boot {
    color: var(--ec-fg-2);
}

/* Narrow screens: Community's 1fr tracks, Pulse's hidden links pushing sign-in off screen, unwrapped card-head filters and Classic toolbar (vendor behaviour). */
#cjforum-root.cjf-tpl-community .flayout > * {
    min-inline-size: 0;
}

/* Classic's board toolbar (search, two sort selects, count, view switch) is one
   unwrapped row: 411px wide on a 390px phone. */
#cjforum-root div:has(> .theme-select-wrapper) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

#cjforum-root.cjf-tpl-community .card-head {
    flex-wrap: wrap;
}

#cjforum-root.cjf-tpl-community .seg {
    max-inline-size: 100%;
    overflow-x: auto;
}

@media (max-width: 48.75rem) {
    #cjforum-root.cjf-tpl-pulse .pnav-links {
        display: none;
    }
}

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* @ts-kit section-6 end */