/* ==========================================================================
   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) */
/* Forme: bar and search on venue surfaces, Mona Sans headings, bubble cards and avatars; colours from media/integrations/cjforum-theme-forme.json. */
/* Body and UI text keep normal tracking (§1.2 #2: -0.02em is for display sizes only); the forum
   sets -0.025em on its whole container and on every button. */
#cjforum-root {
    font-stretch: var(--fm-disp-stretch);
}

#cjforum-root:is(.cjforum-container, [data-template]),
#cjforum-root .cjforum-container,
#cjforum-root .cjforum-container [class*="btn-"] {
    letter-spacing: normal;
}

#cjforum-root header.sticky {
    border-color: var(--ec-border);
    background-color: var(--ec-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#cjforum-root .search-box {
    border-radius: var(--ec-btn-radius);
}

#cjforum-root :is(h1, h2) {
    font-family: var(--ec-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Alegreya headings keep normal tracking (CjForum tightens every h3 by 0.025em). */
#cjforum-root :is(h3, h4, h5, h6) {
    letter-spacing: normal;
}

#cjforum-root [class*="rounded-lg"][class*="border-[var(--theme-border)]"],
#cjforum-root [class*="rounded-xl"][class*="border-[var(--theme-border)]"] {
    border-radius: var(--fm-r-bubble);
}

#cjforum-root :is(img, span:has(> img)).rounded-full {
    border-radius: var(--fm-r-avatar);
}

/* Members without a photo: the site's initials bubble (tone = user id % 5, body-end.php) instead
   of the generic silhouette; the image stays for its alt text. Online people wear the ring. */
#cjforum-root span[data-fm-initials] {
    container-type: inline-size;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background-color: var(--fm-avatar-1);
    color: var(--fm-avatar-fg);
}

#cjforum-root span[data-fm-initials] > img {
    position: absolute;
    opacity: 0;
}

#cjforum-root span[data-fm-initials]::after {
    content: attr(data-fm-initials) / "";
    font: 700 max(0.625rem, 40cqi) / 1 var(--ec-font-body);
}

#cjforum-root span[data-fm-initials][data-fm-tone="1"] { background-color: var(--fm-avatar-2); }
#cjforum-root span[data-fm-initials][data-fm-tone="2"] { background-color: var(--fm-avatar-3); }
#cjforum-root span[data-fm-initials][data-fm-tone="3"] { background-color: var(--fm-avatar-4); }
#cjforum-root span[data-fm-initials][data-fm-tone="4"] { background-color: var(--fm-avatar-5); }
#cjforum-root span[data-fm-initials][data-fm-tone="5"] { background-color: var(--fm-avatar-2); }

#cjforum-root span[data-fm-online] {
    overflow: visible;
    box-shadow: 0 0 0 2px var(--ec-bg), 0 0 0 4px var(--fm-signal);
}

/* Primary = marigold + ink in both schemes (§2.4); the guest card's Sign in and the welcome card's Start are outline (one marigold per viewport, §9). */
#cjforum-root [class*="!bg-primary"] {
    background-color: var(--ec-accent) !important;
    box-shadow: inset 0 0 0 1px var(--fm-signal);
    color: var(--ec-accent-fg) !important;
}

#cjforum-root :is(.text-center > .flex-wrap > [class*="!bg-primary"], .justify-center > [class~="bg-[var(--theme-primary)]"]) {
    border: 1.5px solid var(--fm-control);
    background-color: transparent !important;
    box-shadow: none;
    color: var(--ec-fg) !important;
}

/* Type floor (§9.5): meta 15px, UI 16px, posts 18/28; the H1 is the page scale (§9, 36 to 56px). */
#cjforum-root :is(.text-xs, [class~="text-[10px]"], [class~="text-[11px]"], [class~="text-[12px]"]) {
    font-size: 0.9375rem;
    line-height: 1.33;
}

#cjforum-root .text-sm {
    font-size: 1rem;
    line-height: 1.5;
}

#cjforum-root .reply-content {
    font-size: 1.125rem;
    line-height: 1.556;
}

#cjforum-root .page-hero .prose {
    max-inline-size: 68ch;
    font-size: 1.1875rem;
    line-height: 1.58;
}

#cjforum-root h1 {
    font-size: var(--fm-t-h1-page);
    line-height: 1.07;
    text-wrap: balance;
}

#cjforum-root h1[class*="!text-"] {
    font-size: var(--fm-t-h1-page) !important;
    line-height: 1.07 !important;
}

/* Page heads start on the forum bar's edge (the hero added 28-32px of its own inset). */
#cjforum-root :is(.page-hero, .page-hero > .theme-container) {
    padding-inline: 0;
}

/* Thread and new-topic heads (§9.5) are M 40/48, 28/34 on phones; the page scale is for index heads. */
#cjforum-root :is(.page-hero .mb-6:has(+ .prose), .max-w-5xl > .flex > div) > h1 {
    font-size: clamp(1.75rem, 1.3375rem + 1.69vw, 2.5rem);
    line-height: 1.2;
}

/* One search field, bell and avatar per screen, as on Sociable pages (contract 5.3): the forum bar keeps
   its forum search and forum bell, the header's bell stands down and its site search is the icon
   button (layout.css); the bar's avatar menu
   (Profile, Settings, Logout) stands down for the header account menu (Your threads, Sign out;
   forum settings are the bell's Preferences tab). */
.ts-app--cjforum .ts-header__modules .ts-account__bell,
#cjforum-root header.sticky div.relative:has(> button > span > img) {
    display: none;
}

/* The forum prints its own trail: the breadcrumbs row stands down. */
.ts-app--cjforum .ts-row[data-ts-row="crumbs"] {
    display: none;
}

/* Contrast (1.4.3): half-opacity names and 75% stat labels at full opacity; ground-colour text on the success badge. */
#cjforum-root a.cursor-not-allowed.opacity-50,
#cjforum-root [class*="text-[var(--theme-text-secondary)]"] .opacity-75 {
    opacity: 1;
}

#cjforum-root a.cursor-not-allowed.opacity-50 {
    color: inherit;
}

#cjforum-root [class*="bg-[var(--theme-success)]"] > .text-white {
    color: var(--ec-bg);
}
/* No signal colours as decoration (§1.3): the app-bar tile is lit, stat icons fg-2. */
#cjforum-root [class*="from-blue-"] {
    background: var(--ts-tint);
    color: var(--ts-on-tint);
}

#cjforum-root .rounded-lg:is([style*="--theme-info"], [style*="--theme-success"]) {
    color: var(--ec-fg-2) !important;
}
/* Thread (§9.5): each reply is a speech-bubble card whose 4px tail corner points at a 48px bubble
   avatar; no flat divided list, no row hover fill. */
#cjforum-root :has(> .divide-y > [data-reply-id]) {
    border: 0;
    background: none;
}

#cjforum-root .divide-y:has(> [data-reply-id]) {
    display: grid;
    gap: 0.5rem;
}

#cjforum-root .divide-y > [data-reply-id],
#cjforum-root [data-reply-id] > article {
    border: 0;
}

#cjforum-root [data-reply-id] > article > div {
    padding: 0.75rem 0;
    background: none;
}

#cjforum-root [data-reply-id] > article > div > .flex > .shrink-0 {
    inline-size: 4.5rem;
}

#cjforum-root [data-reply-id] > article > div > .flex > .flex-1 {
    padding: 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
}

#cjforum-root [data-reply-id] span.rounded-full:has(> img) {
    inline-size: 3rem;
    block-size: 3rem;
    border-color: var(--ec-border);
}

/* Accepted answer: one label strip at the top of the bubble and a success edge (55% in dark,
   solid in light, §9.5); CjForum's second, solid corner badge stands down. */
#cjforum-root [data-reply-id] .absolute.top-4.right-4:has(> [class*="bg-[var(--theme-success)]"]) {
    display: none;
}

#cjforum-root [data-reply-id]:has(.absolute.top-4.right-4 > [class*="bg-[var(--theme-success)]"]) article {
    border-inline-start: 0;
}

/* The accepted edge: solid success in light, 55% in dark (3.38:1 on the surface). */
#cjforum-root {
    --fm-accepted: var(--fm-success);
}

:root[data-color-scheme="dark"] #cjforum-root {
    --fm-accepted: color-mix(in srgb, var(--fm-success) 55%, transparent);
}

#cjforum-root [data-reply-id]:has(.absolute.top-4.right-4 > [class*="bg-[var(--theme-success)]"]) article > div > .flex > .flex-1 {
    border-color: var(--fm-accepted);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

/* The label strip sits on the bubble's top edge (the avatar column is 4.5rem + the 12px gap). */
#cjforum-root [data-reply-id] .mb-3:has(> [class*="bg-[var(--theme-success)]/10"]:only-child) {
    margin: 0 0 0 5.25rem;
}

#cjforum-root [data-reply-id] .mb-3 > [class*="bg-[var(--theme-success)]/10"]:only-child {
    display: flex;
    gap: 0.375rem;
    inline-size: 100%;
    min-block-size: 2rem;
    padding: 0 1.25rem;
    border: 1px solid var(--fm-accepted);
    border-block-end: 0;
    border-radius: var(--fm-r-tail) var(--ec-radius) 0 0;
    background-color: var(--fm-success-bg);
    color: var(--fm-success);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Topic stats: a mini mullion frame of tiles, the figure as a numeral over its caption. */
#cjforum-root .space-y-3:has(> .justify-between > .flex > .w-8.h-8[style]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fm-mullion);
    padding: var(--fm-mullion);
    overflow: clip;
    border-radius: var(--fm-r-bubble-s);
    background-color: var(--ec-border);
}

#cjforum-root .space-y-3:has(> .justify-between > .flex > .w-8.h-8[style]) > * {
    margin: 0;
}

#cjforum-root .space-y-3 > .justify-between:has(> .flex > .w-8.h-8[style]) {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.75rem;
    background-color: var(--ec-surface);
}

#cjforum-root .space-y-3 > .justify-between > .flex > .w-8.h-8[style] {
    display: none;
}

#cjforum-root .space-y-3 > .justify-between:has(> .flex > .w-8.h-8[style]) > span {
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-xs);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

#cjforum-root .space-y-3:has(> .justify-between > .flex > .w-8.h-8[style]) > .border-t {
    grid-column: 1 / -1;
    padding: 0.75rem;
    border: 0;
    background-color: var(--ec-surface);
}
/* Counts (§1.2 #6): Mona 800 numerals over small labels; the forum overview and welcome card. */
#cjforum-root .grid[class*="grid-cols-4"] > .text-center > div[class*="font-[var(--theme-font-semibold)]"] {
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-s);
    font-weight: var(--fm-num-weight);
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
}

#cjforum-root .grid.mb-6[class*="grid-cols-4"] > .text-center > div[class*="font-[var(--theme-font-semibold)]"] {
    font-size: var(--fm-t-numeral-xs);
}

/* Topic author: its counts as the same mini mullion (numeral over label), View Profile as the
   Forme outline button (44px). */
#cjforum-root .grid.grid-cols-2.gap-2.text-xs {
    gap: var(--fm-mullion);
    padding: var(--fm-mullion);
    overflow: clip;
    border-radius: var(--fm-r-bubble-s);
    background-color: var(--ec-border);
}

#cjforum-root .grid.grid-cols-2.gap-2.text-xs > .justify-between {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    background-color: var(--ec-surface);
}

#cjforum-root .grid.grid-cols-2.gap-2.text-xs > .justify-between > span:last-child {
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: var(--fm-num-weight);
    line-height: 1.1;
    font-variant-numeric: lining-nums tabular-nums;
}

#cjforum-root a.block.w-full.h-8 {
    block-size: auto;
    min-block-size: 2.75rem;
    border: 1.5px solid var(--ts-btn-secondary-border);
    border-radius: var(--ec-btn-radius);
    color: var(--ts-btn-secondary-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 2.5rem;
}
/* @ts-kit section-6 end */