/* ==========================================================================
   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) */
/* Quorum (spec §9): square, flat, ruled; colours/faces in integrations/cjforum-theme-quorum.json. */
#cjforum-root :is([class~="rounded"], [class*="rounded-"]:not([class~="rounded-full"]), .filter-button, [class*="bg-[var(--theme-warning)]"], button > span[class~="bg-blue-600"], div[class~="rounded-full"][class~="px-3"]) { border-radius: 0; }
#cjforum-root [class*="shadow"]:not(:focus-visible) { box-shadow: none; }
#cjforum-root button > span[class~="bg-blue-600"] { box-shadow: 0 0 0 2px var(--ec-surface); }
#cjforum-root { --search-radius-md: 0; --search-radius-xl: 0; }
#cjforum-root header.sticky { border-bottom: 1px solid var(--ec-border); background: var(--ec-surface); backdrop-filter: none; }
#cjforum-root .cjforum-container header [class~="w-7"][class~="bg-gradient-to-br"] { background: var(--ts-link); color: var(--ec-bg); }
#cjforum-root .cjforum-container header [class~="w-7"] > svg { color: inherit; }
#cjforum-root .page-hero { border: 0; border-top: var(--q-rule-w) solid var(--q-rule); }
#cjforum-root :is(.page-hero, .page-hero .theme-container, .page-hero .theme-container > [class~="px-4"]) { padding-inline: 0; }
/* Dashboard welcome (guest and member): one board cell under the 2px rule; stats in the overview numerals; 48px buttons from the left. */
#cjforum-root [class~="lg:col-span-12"] > .w-full.w-full > :is(.text-center, [class~="border"]) { margin: 0; padding: var(--q-s5); border: 1px solid var(--ec-border); border-top: var(--q-rule-w) solid var(--q-rule); background: var(--ec-surface); }
#cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] :is(p, .text-center, .justify-center) { text-align: start; justify-content: flex-start; }
#cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] .text-center > [class~="text-xl"] { font: 800 2.5rem/0.9 var(--ec-font-display); }
/* The welcome card's own action row only (a child of the card): Quorum buttons, 48px, 16/600, labels centred; the app's primary keeps the accent pair, the others are the secondary (transparent, 2px ink rule). */
#cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .flex-wrap > :is(button, a) { justify-content: center; min-block-size: 3rem; padding-inline: 1.25rem; border: var(--ts-btn-border-width) solid var(--ts-btn-secondary-border); background: var(--ts-btn-secondary-bg); color: var(--ts-btn-secondary-fg); font-size: 1rem; font-weight: 600; }
#cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .flex-wrap > [class*="bg-[var(--theme-primary)]"] { border-color: var(--ts-btn-primary-border); background: var(--ts-btn-primary-bg) !important; color: var(--ts-btn-primary-fg) !important; }
#cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .flex-wrap > :not([class*="bg-[var(--theme-primary)]"]):hover { border-color: var(--ts-btn-secondary-hover-border); background: var(--ts-btn-secondary-hover-bg); color: var(--ts-btn-secondary-hover-fg); }
#cjforum-root :is(.page-hero, .text-center, .text-center :is(.mx-auto, .justify-center)) { margin-inline: 0; text-align: start; justify-content: flex-start; }
#cjforum-root .text-center > [class*="rounded-"][class~="mx-auto"]:first-child, #cjforum-root .grid > .text-center > [class~="rounded-lg"]:first-child { display: none; }
#cjforum-root h1 { font: 700 clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem)/1 var(--ec-font-display); font-size: clamp(2.5rem, 2.3vw + 1.9rem, 3.5rem) !important; letter-spacing: 0; }
#cjforum-root h2 { font: 700 1.75rem/1.1 var(--ec-font-display); }
#cjforum-root h3:not([class*="group-hover"], [class*="line-clamp"]) { font: 700 1.5rem/1.1 var(--ec-font-display); }
#cjforum-root h3:not([class*="group-hover"], [class*="line-clamp"]) > svg { display: none; }
#cjforum-root .grid > .text-center > [class~="text-2xl"] { font: 800 2.5rem/0.9 var(--ec-font-display); }
#cjforum-root :is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]) { font-size: 0.875rem; line-height: 1.35; }
/* Titles and excerpts that can wrap read at 16px (addendum A4.1); single-line meta stays 14px. */
#cjforum-root :is(h3[class~="text-sm"], a[class~="text-sm"][class*="font-medium"], p[class*="line-clamp"]) { font-size: 1rem; line-height: 1.4; }
#cjforum-root .search-container.search-container .filter-button { border-radius: 0 !important; }
@media (width < 48rem) { #cjforum-root .flex-1.min-w-0 > .flex.items-center:has(> button) { flex-wrap: wrap; } #cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .flex-wrap > :is(button, a) { flex: 1 1 100%; } #cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .justify-between:first-child { flex-wrap: wrap; gap: var(--q-s2); } #cjforum-root [class~="lg:col-span-12"] > .w-full > [class~="border"] > .justify-between:first-child > .flex > [class~="w-10"] { display: none; } #cjforum-root .search-container .search-box.search-box { padding-inline: var(--q-s4) !important; } }
/* Dashboard: both columns are one gap-ruled board (1px hairlines, no gaps between cards); a
   card list inside a cell is rows split by hairlines, not a second frame. */
#cjforum-root .grid-cols-12:has(> [class*="lg:col-span-4"]) { gap: 1px; padding: 1px; background: var(--ec-border); }
#cjforum-root .grid-cols-12 > [class*="lg:col-span-"]:not(.lg\:col-span-12) { display: flex; flex-direction: column; gap: 1px; padding: 0; background: var(--ec-border); }
#cjforum-root .grid-cols-12 > [class*="lg:col-span-"]:not(.lg\:col-span-12) > :nth-last-child(1 of :not(:empty)) { flex: 1 0 auto; }
#cjforum-root .grid-cols-12:not(:has(> [class*="lg:col-span-4"])) > [class*="lg:col-span-"] { align-self: start; }
#cjforum-root .space-y-3:has(> a[class~="border"]) { display: grid; gap: 1px; padding: 0; background: var(--ec-border); }
#cjforum-root .grid-cols-12 > [class*="lg:col-span-"]:not(.lg\:col-span-12) > * { margin: 0; padding: var(--q-s5); background: var(--ec-surface); }
#cjforum-root .grid-cols-12 > * > * > [class~="border"]:not(.text-center), #cjforum-root .space-y-3 > a[class~="border"] { margin: 0; padding: 0; border: 0; }
#cjforum-root .space-y-3 > a[class~="border"] { padding: 1rem; background: var(--ec-surface); }
#cjforum-root .space-y-3 > a[class~="border"]:hover { background: var(--q-hover); }
#cjforum-root .grid-cols-12 > * > :empty { display: none; }
/* Thread: 68ch measure, numbered posts, the Solved rule. */
#cjforum-root :is(.page-hero .prose, .reply-content) { max-inline-size: 68ch; }
/* Real ordinals: the opening post is 01, replies count on from the page offset (the forum's
   replies-per-page, --q-cjf-per-page from the head partial; the page from the pager). Past page 9
   the page is unknown to CSS and the numerals are left out rather than restarted. */
#cjforum-root .divide-y:has(> [id^="reply-"]) { counter-reset: q-post calc((var(--q-cjf-page, 1) - 1) * var(--q-cjf-per-page, 10) + 1); }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 2"][aria-current="page"]) { --q-cjf-page: 2; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 3"][aria-current="page"]) { --q-cjf-page: 3; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 4"][aria-current="page"]) { --q-cjf-page: 4; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 5"][aria-current="page"]) { --q-cjf-page: 5; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 6"][aria-current="page"]) { --q-cjf-page: 6; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 7"][aria-current="page"]) { --q-cjf-page: 7; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 8"][aria-current="page"]) { --q-cjf-page: 8; }
#cjforum-root:has(nav[aria-label="Pagination"] [aria-label="Page 9"][aria-current="page"]) { --q-cjf-page: 9; }
#cjforum-root [id^="reply-"] > article::before { counter-increment: q-post; position: absolute; top: 1rem; inset-inline-end: 3.5rem; color: var(--ec-fg-2); font: 700 1.75rem/1 var(--ec-font-display); }
#cjforum-root:is(:not(:has(nav[aria-label="Pagination"])), :has(nav[aria-label="Pagination"] [aria-label^="Page "][aria-current="page"]:is([aria-label="Page 1"], [aria-label="Page 2"], [aria-label="Page 3"], [aria-label="Page 4"], [aria-label="Page 5"], [aria-label="Page 6"], [aria-label="Page 7"], [aria-label="Page 8"], [aria-label="Page 9"]))) [id^="reply-"] > article::before { content: counter(q-post, decimal-leading-zero); }
#cjforum-root:has([id^="reply-"]) .page-hero { position: relative; }
#cjforum-root:has([id^="reply-"]) .page-hero::after { content: "01"; position: absolute; top: var(--q-s5); inset-inline-end: 3.5rem; color: var(--ec-fg-2); font: 700 1.75rem/1 var(--ec-font-display); }
#cjforum-root:has([id^="reply-"]) .page-hero h1 { padding-inline-end: 6rem; }
@media (width < 48rem) { #cjforum-root:has([id^="reply-"]) .page-hero::after { content: none; } #cjforum-root:has([id^="reply-"]) .page-hero h1 { padding-inline-end: 0; } }
#cjforum-root [id^="reply-"][class*="border-[var(--theme-success)]"] > article::before { top: 3.5rem; }
/* Accepted answer: the 6px success rule, one tag on a success-soft strip; no corner badge, no side bar. */
#cjforum-root [id^="reply-"][class*="border-[var(--theme-success)]"] { border-top: 6px solid var(--q-success); border-inline-start-width: 0; background: none; }
#cjforum-root [id^="reply-"][class*="border-[var(--theme-success)]"] > .absolute, #cjforum-root [id^="reply-"] > article > .absolute.left-0 { display: none; }
#cjforum-root [id^="reply-"] > article > div > .mb-3:first-child:has(> [class*="bg-[var(--theme-success)]"]) { margin: calc(-1 * var(--q-s5)) calc(-1 * var(--q-s5)) var(--q-s4); padding: var(--q-s2) var(--q-s5); background: var(--q-success-soft); }
#cjforum-root [id^="reply-"] > article > div > .mb-3:first-child > [class*="bg-[var(--theme-success)]"] { padding: 0; border: 0; background: none; color: var(--q-success); font-size: 0.875rem; font-weight: 600; }
/* The replies are cells of one board: the list's own frame and inset go, one hairline between posts. */
#cjforum-root .w-full:has(> .space-y-4 > [class~="border"] > .divide-y > [id^="reply-"]) { padding-inline: 0; padding-block-end: 0; }
#cjforum-root .space-y-4:has(> [class~="border"] > .divide-y > [id^="reply-"]) > :not([class~="border"]) { padding-inline: var(--q-s5); }
#cjforum-root .space-y-4:has(> [class~="border"] > .divide-y > [id^="reply-"]) > :last-child:not([class~="border"]) { padding-block-end: var(--q-s5); }
#cjforum-root .space-y-4 > [class~="border"]:has(> .divide-y > [id^="reply-"]) { margin: 0; border: 0; border-radius: 0; }
#cjforum-root .space-y-4 > [class~="border"]:has(> .divide-y > [id^="reply-"]):not(:last-child) { border-bottom: 1px solid var(--ec-border); }
#cjforum-root [id^="reply-"] > article { border-bottom: 0; }
#cjforum-root [id^="reply-"] > article > div[class~="py-4"] { padding: var(--q-s5); }
#cjforum-root:has([id^="reply-"][class*="border-[var(--theme-success)]"]) .page-hero { border-top: 6px solid var(--q-success); }
#cjforum-root img[src$="default-avatar.svg"] { filter: grayscale(1); }
/* Initials avatars (§6.6): body-end marks the app's silhouettes with the member's initials and tone. */
#cjforum-root span[data-q-initials] { align-items: center; justify-content: center; container-type: inline-size; border-color: transparent; background: var(--q-avatar-1); color: #fff; }
#cjforum-root span[data-q-initials] > img { position: absolute; inset: 0; opacity: 0; }
#cjforum-root span[data-q-initials]::after { content: attr(data-q-initials) / ""; font: 700 38cqi/1 var(--ec-font-body); letter-spacing: 0; }
#cjforum-root span[data-q-tone="1"] { background: var(--q-avatar-2); }
#cjforum-root span[data-q-tone="2"] { background: var(--q-avatar-3); }
#cjforum-root span[data-q-tone="3"] { background: var(--q-avatar-4); }
#cjforum-root span[data-q-tone="4"] { background: var(--q-avatar-5); }
#cjforum-root span[data-q-tone="5"] { background: var(--q-avatar-6); }
.ts-app--cjforum:has(#cjforum-root main nav[class~="mb-4"]) .ts-row[data-ts-row="breadcrumbs"] { display: none; }
/* Contrast: full-opacity names/labels; page ground on success and warning fills. */
#cjforum-root :is(a.cursor-not-allowed.opacity-50, [class*="text-[var(--theme-text-secondary)]"] :is(.opacity-75, span.opacity-60), nav.opacity-80) { opacity: 1; }
#cjforum-root a.cursor-not-allowed.opacity-50 { color: inherit; }
#cjforum-root .bg-red-50 > .tabular-nums { color: var(--q-danger); }
#cjforum-root [class~="bg-amber-50"] [class~="text-amber-600"] { color: var(--ts-link); }
#cjforum-root :is([class*="bg-[var(--theme-success)]"] > .text-white, [class*="bg-[var(--theme-warning)]"].text-white) { color: var(--ec-bg); }
/* @ts-kit section-6 end */