/* ==========================================================================
   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) */
/* Mimeo: the forum as a zine page (palette, radius, body face: media/integrations/cjforum-theme-mimeo.json). */
#cjforum-root :is([class~="rounded"],[class~="rounded-sm"],[class~="rounded-md"],[class~="rounded-lg"],[class~="rounded-xl"],[class~="rounded-2xl"],[class~="rounded-r"],.filter-button){border-radius:2px}
#cjforum-root [class*="shadow"]:not(:focus-visible){box-shadow:none}
#cjforum-root span[class~="rounded-full"][class~="inline-flex"]{border-radius:2px}
#cjforum-root header.sticky{border-bottom:1px solid var(--ec-border);background:var(--ec-surface);-webkit-backdrop-filter:none;backdrop-filter:none}
#cjforum-root header.sticky .bg-gradient-to-br{background:var(--ec-accent);color:var(--ec-accent-contrast)}
#cjforum-root{--search-radius-md:2px;--search-radius-xl:2px;--search-shadow-light:0 0 0 0 transparent;--search-shadow-medium:0 0 0 0 transparent;--search-shadow-heavy:0 0 0 0 transparent;--search-primary:var(--ec-fg);--search-primary-light:var(--ec-fg)}
#cjforum-root .search-hero .search-box{border-color:var(--ec-border)!important}
/* The hero shares the page's left edge (breadcrumbs, rule, cards): its three stacked paddings go. */
#cjforum-root .page-hero{padding-inline:0;padding-block-start:1.125rem;border-top:2px solid var(--mm-rule-strong);background:transparent;text-align:start}
#cjforum-root .page-hero :is(.theme-container,.mx-auto,.text-center){margin-inline:0;padding:0;text-align:start}
#cjforum-root .page-hero{padding-block-end:0}
#cjforum-root .page-hero .theme-container>[class~="flex"]{padding-block-start:0}
#cjforum-root .page-hero nav[class~="mb-4"]{font-family:var(--ts-font-mono);font-weight:700}
#cjforum-root h1{font-family:var(--ec-font-display);font-size:clamp(2.25rem,1.4rem + 2.8vw,4rem)!important;font-weight:700;line-height:1!important;letter-spacing:-.015em;text-shadow:.04em .03em 0 var(--mm-misreg)}
#cjforum-root h2{font-family:var(--ec-font-display);font-size:1.75rem;font-weight:700;line-height:1.1}
#cjforum-root h3:not([class*="group-hover"],[class*="line-clamp"]){font-family:var(--ec-font-display);font-size:1.375rem;font-weight:700;line-height:1.15}
#cjforum-root .grid>.text-center>[class~="text-2xl"]{font-family:var(--ec-font-display);font-size:2.5rem;font-weight:700;line-height:1}
/* Two inks: stat and overview icons print in ink, not the forum's green/amber/info ramps;
   gradient avatars take the tag tint; status pills on the warning fill are yellow highlighter
   with ink (white on the Night edition's light amber was 1.67:1). */
#cjforum-root [style*="color: var(--theme-success)"],#cjforum-root [style*="color: var(--theme-warning)"],#cjforum-root [style*="color: var(--theme-info)"],#cjforum-root [class~="w-10"][style*="color: var(--theme-primary)"]{background-color:var(--ec-surface-2)!important;color:var(--ec-fg-2)!important}
#cjforum-root :is([class*="text-amber-"],[class*="text-orange-"],[class*="text-yellow-"],[class*="text-green-"],[class*="text-emerald-"],[class*="text-purple-"],[class*="text-violet-"]){color:var(--ec-fg-2)}
#cjforum-root [class*="rounded-full"][class*="bg-gradient-to-"]{background:var(--mm-tag-bg);color:var(--mm-tag-fg)}
#cjforum-root [class~="bg-[var(--theme-warning)]"]{border-color:var(--mm-yellow);background-color:var(--mm-yellow);color:var(--mm-yellow-ink)}
/* The report (flag) button stays as quiet as its like/share neighbours. */
#cjforum-root [class~="bg-[var(--theme-warning)]/10"]{border-color:var(--ec-border);background-color:var(--ec-surface);color:var(--ec-fg-2)}
#cjforum-root [class~="bg-[var(--theme-warning)]/10"]:hover{background-color:var(--ec-surface-2);color:var(--ec-fg)}
/* One card treatment: every bordered panel and the category index are paper sheets. */
#cjforum-root :is(div,section,aside)[class~="border"][class*="border-[var(--theme-border)]"],#cjforum-root .space-y-3:has(>a[class~="border"]){border:1px solid var(--ec-border);border-radius:2px;background:var(--ec-surface)}
#cjforum-root .space-y-3>a[class~="border"]{margin:0;border:0;border-bottom:1px dashed var(--mm-rule);border-radius:0;background:transparent}
#cjforum-root .space-y-3>a[class~="border"]:last-child{border-bottom:0}
#cjforum-root .space-y-3>a[class~="border"]:hover{background:var(--ec-surface-2)}
#cjforum-root [id^="reply-"][class*="border-[var(--theme-success)]"]{border-inline-start:2px solid var(--mm-success)}
.ts-app--cjforum:has(#cjforum-root main nav[class~="mb-4"]) .ts-row[data-ts-row="breadcrumbs"]{display:none}
#cjforum-root a.cursor-not-allowed.opacity-50,#cjforum-root [class*="text-[var(--theme-text-secondary)]"] .opacity-75,#cjforum-root main nav[class~="opacity-80"],#cjforum-root span[class~="opacity-60"],#cjforum-root [class~="opacity-90"]{opacity:1}
/* Member welcome: body copy and actions start at the left edge; the timestamp keeps one line and wraps under the greeting. */
#cjforum-root :is(p,[class~="p-6"])[class~="text-center"]{text-align:start}
#cjforum-root [class~="p-6"][class~="text-center"]>[class~="mx-auto"]{margin-inline:0}
#cjforum-root [class~="p-6"][class~="text-center"]>[class~="justify-center"]{justify-content:flex-start}
#cjforum-root p[class~="text-center"]~[class~="justify-center"]{justify-content:flex-start}
#cjforum-root [class~="justify-between"]>[class~="text-xs"]{flex:none;white-space:nowrap}
#cjforum-root [class~="justify-between"]:has(>[class~="text-xs"]){flex-wrap:wrap;gap:.25rem .75rem}
#cjforum-root a.cursor-not-allowed.opacity-50{color:inherit}
#cjforum-root .bg-red-50>.tabular-nums{color:var(--mm-error)}
#cjforum-root [class*="bg-[var(--theme-success)]"]>.text-white{color:var(--mm-success-fg)}
/* TinyMCE chrome on carbon, not oxide-dark navy. */
[data-color-scheme="dark"] .tox :is(.tox-editor-header,.tox-menubar,.tox-toolbar__primary,.tox-toolbar-overlord,.tox-toolbar__overflow,.tox-statusbar,.tox-edit-area__iframe,.tox-sidebar,.tox-view-wrap,.tox-view-wrap__slot-container){background:var(--ec-surface)!important;border-color:var(--ec-border)!important}
[data-color-scheme="dark"] .tox .tox-tbtn--bespoke{background:var(--ec-surface-2)!important}
[data-color-scheme="dark"] .tox.tox-tinymce{border-color:var(--ec-border)}
/* The shared "no photo" avatar (default-avatar.svg): Mimeo's avatar disc with an ink
   silhouette, not a violet-blue gradient. */
#cjforum-root span:has(> img[src$="/default-avatar.svg"]) {
    border-radius: 50%;
    background-color: var(--mm-avatar-a);
}

#cjforum-root img[src$="/default-avatar.svg"] {
    border-radius: 50%;
    background-color: var(--mm-avatar-a-fg);
    object-position: 999px 0;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 23c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E") center 70% / 64% no-repeat;
}
/* The zine type scale: every byline, timestamp and count (the app's 12px text-xs) in Courier 700
   15, 12-14px descriptions and labels at 16, rail topic titles Zilla 18; "new topic" is one process action in action blue everywhere. */
#cjforum-root :is(span,a,div,time)[class~="text-xs"]{font-family:var(--ts-font-mono);font-size:.9375rem;font-weight:700;line-height:1.35}
#cjforum-root p:is([class~="text-xs"],[class~="text-sm"]){font-size:1rem;line-height:1.5}
#cjforum-root :is(a,button)[class~="text-sm"]{font-size:1rem}
#cjforum-root :is(a[class~="mb-1"],h3)[class~="text-sm"][class*="font-medium"]{font-family:var(--ec-font-display);font-size:1.125rem;font-weight:700;line-height:1.25}
#cjforum-root a[href*="view=topicform"]>button{background-color:var(--mm-action)!important;color:var(--mm-action-fg)!important}
/* @ts-kit section-6 end */