/**
 * The Help Center (Support Board). Support Board paints its text with the colours of a light page and injects that
 * stylesheet after the theme's, so on the kit's dark theme its words are dark on dark: its knowledge base sits on
 * the theme's surface, and its ticket desk mixes a dark field (its Title input is #0d1220) with the page's own
 * white panel. These rules put Support Board's front end back on the kit's tokens there. Support Board's own light
 * theme is left exactly as it ships.
 *
 * @package ATS
 */

/* ---------- the knowledge base ---------- */

/* Body text. */
[data-theme="dark"] .sb-articles-page p,
[data-theme="dark"] .sb-articles-page li,
[data-theme="dark"] .sb-articles-page dt,
[data-theme="dark"] .sb-articles-page dd,
[data-theme="dark"] .sb-articles-page small,
[data-theme="dark"] .sb-articles-page .sb-subtitle,
[data-theme="dark"] .sb-articles-page .sb-articles-category-count { color: var(--ats-muted) !important; }

/* Headings, including the category cards' titles. */
[data-theme="dark"] .sb-articles-page h1,
[data-theme="dark"] .sb-articles-page h2,
[data-theme="dark"] .sb-articles-page h3,
[data-theme="dark"] .sb-articles-page h4,
[data-theme="dark"] .sb-articles-page h5,
[data-theme="dark"] .sb-articles-page h6 { color: var(--ats-fg) !important; }

/* The search field. */
[data-theme="dark"] .sb-articles-page input,
[data-theme="dark"] .sb-articles-page textarea,
[data-theme="dark"] .sb-articles-page select {
	color: var(--ats-fg) !important;
	background-color: var(--m2-card) !important;
	border-color: var(--ats-border-field) !important;
}

/* ---------- the ticket desk ---------- */

[data-theme="dark"] .sb-tickets,
[data-theme="dark"] .sb-tickets .sb-panel-main { color: var(--ats-fg) !important; background-color: var(--m2-card) !important; }

[data-theme="dark"] .sb-tickets .sb-title,
[data-theme="dark"] .sb-tickets .sb-top,
[data-theme="dark"] .sb-tickets label,
[data-theme="dark"] .sb-tickets p { color: var(--ats-fg) !important; }

[data-theme="dark"] .sb-tickets input,
[data-theme="dark"] .sb-tickets textarea,
[data-theme="dark"] .sb-tickets select {
	color: var(--ats-fg) !important;
	background-color: var(--ats-bg) !important;
	border-color: var(--ats-border-field) !important;
}

/* Links and placeholders, in both areas. */
[data-theme="dark"] .sb-articles-page a,
[data-theme="dark"] .sb-tickets a { color: var(--ats-accent-text) !important; }

[data-theme="dark"] .sb-articles-page input::placeholder,
[data-theme="dark"] .sb-articles-page textarea::placeholder,
[data-theme="dark"] .sb-tickets input::placeholder,
[data-theme="dark"] .sb-tickets textarea::placeholder { color: var(--ats-muted) !important; }

/* Support Board's own placeholder spans (the message box) read at the kit's muted text in the dark theme too. */
[data-theme="dark"] .sb-tickets :where(.sb-input-text, .sb-editor-cnt) > span{ color:var(--ats-muted) !important; }
/* Support Board fills the knowledge base after load: its room is held from the first paint, so the footer does not
   jump down the page (it measured a 0.6 layout shift on a phone). */
#sb-articles{ min-block-size:min(70vh, 720px); }
/* The ticket desk's editor and its two buttons stayed Support Board white in the dark theme. */
[data-theme="dark"] .sb-tickets .sb-editor{ background:var(--ats-surface) !important; color:var(--ats-fg) !important; border-color:var(--ats-border) !important; }
[data-theme="dark"] .sb-tickets .sb-editor :where(textarea, .sb-textarea, [contenteditable]){ background:transparent !important; color:var(--ats-fg) !important; }
.sb-tickets :where(.sb-new-ticket, .sb-create-ticket).sb-btn{ background:var(--ats-accent) !important; color:var(--ats-accent-ink) !important; border-color:transparent !important; }
/* The knowledge base's search header follows the theme (it stayed navy with white text in the light theme). */
.sb-articles-page .sb-articles-header{ background:radial-gradient(60% 140% at 80% 0%, color-mix(in oklab, var(--ats-accent) 14%, transparent), transparent 70%), var(--ats-surface) !important; color:var(--ats-fg) !important; border:1px solid var(--ats-border); border-radius:var(--ats-radius-lg); }
.sb-articles-page .sb-articles-header :where(h1, h2, h3, p, span, div):not(input){ color:inherit !important; }