/**
 * Dark surfaces — Lab wave (Board session 38).
 * Remaps each surface’s local CSS vars onto tokens under html.dark.
 * Hardcoded leftovers get minimal overrides — no new JS / no parent logic.
 */

/* Opinions — reinforce soft after token flip */
html.dark .jf-op-hub,
html.dark .jf-op-single,
html.dark .jf-op-writer,
html.dark .jf-op-settings,
html.dark .jf-home-opinion {
  --jf-op-soft: color-mix(in srgb, var(--jf-op-border) 70%, var(--jf-op-bg));
}

/* —— Shared surface var remaps —— */
html.dark .jf-account {
  --jf-ac-ink: var(--jf-ink);
  --jf-ac-muted: var(--jf-muted);
  --jf-ac-line: var(--jf-border);
  --jf-ac-soft: var(--jf-bg);
}

html.dark .jf-ads-market,
html.dark .jf-ad-single,
html.dark .jf-ads-submit {
  --jf-ads-ink: var(--jf-ink);
  --jf-ads-soft: var(--jf-bg);
  --jf-ads-line: var(--jf-border);
}

html.dark .jf-biz-dir,
html.dark .jf-biz-single,
html.dark .jf-biz-submit {
  --jf-biz-ink: var(--jf-ink);
  --jf-biz-soft: var(--jf-bg);
  --jf-biz-line: var(--jf-border);
}

html.dark .jf-afrah-market,
html.dark .jf-afrah-submit,
html.dark .jf-afrah-single {
  --jf-afrah-ink: var(--jf-ink);
  --jf-afrah-muted: var(--jf-muted);
  --jf-afrah-line: var(--jf-border);
  --jf-afrah-soft: color-mix(in srgb, var(--jf-primary) 8%, var(--jf-bg));
  --jf-as-ink: var(--jf-ink);
  --jf-as-muted: var(--jf-muted);
  --jf-as-line: var(--jf-border);
  --jf-as-soft: color-mix(in srgb, var(--jf-primary) 8%, var(--jf-bg));
  --jf-as1-ink: var(--jf-ink);
  --jf-as1-muted: var(--jf-muted);
  --jf-as1-line: var(--jf-border);
  --jf-as1-soft: color-mix(in srgb, #c45c26 10%, var(--jf-bg));
}

html.dark .jf-wafayat-market,
html.dark .jf-wafayat-submit,
html.dark .jf-wafayat-single {
  --jf-waf-ink: var(--jf-ink);
  --jf-waf-muted: var(--jf-muted);
  --jf-waf-line: var(--jf-border);
  --jf-waf-soft: var(--jf-bg);
  --jf-ws-ink: var(--jf-ink);
  --jf-ws-muted: var(--jf-muted);
  --jf-ws-line: var(--jf-border);
  --jf-ws-soft: var(--jf-bg);
}

html.dark .jf-news-list {
  --jf-news-ink: var(--jf-ink);
  --jf-news-soft: var(--jf-bg);
  --jf-news-line: var(--jf-border);
}

html.dark .jf-mub-list,
html.dark .jf-mubasher {
  --jf-mub-ink: var(--jf-ink);
  --jf-mub-soft: var(--jf-bg);
  --jf-mub-line: var(--jf-border);
}

/* —— Common white / soft islands that ignore local vars —— */
html.dark .jf-account__card,
html.dark .jf-account__section,
html.dark .jf-account__panel,
html.dark .jf-ads-market__hero,
html.dark .jf-ads-card,
html.dark .jf-ads-submit__compose,
html.dark .jf-ads-submit__hero,
html.dark .jf-ads-submit__step,
html.dark .jf-ads-banner,
html.dark .jf-biz-dir__hero,
html.dark .jf-biz-card,
html.dark .jf-biz-submit__compose,
html.dark .jf-biz-submit__hero,
html.dark .jf-biz-submit__step,
html.dark .jf-afrah-market__hero,
html.dark .jf-afrah-card,
html.dark .jf-afrah-submit__panel,
html.dark .jf-afrah-submit__compose,
html.dark .jf-wafayat-market__hero,
html.dark .jf-wafayat-card,
html.dark .jf-wafayat-submit__panel,
html.dark .jf-wafayat-submit__compose,
html.dark .jf-news-list__hero,
html.dark .jf-ad-single__hero-ph,
html.dark .jf-fahras__card,
html.dark .jf-fahras__hero,
html.dark .jf-platforms__card,
html.dark .jf-empty {
  background: var(--jf-card);
  border-color: var(--jf-border);
  color: var(--jf-ink);
}

html.dark .jf-account__title,
html.dark .jf-ads-market__title,
html.dark .jf-biz-dir__title,
html.dark .jf-afrah-market__title,
html.dark .jf-wafayat-market__title,
html.dark .jf-news-list__title,
html.dark .jf-ad-single__title,
html.dark .jf-fahras__title {
  color: var(--jf-ink);
}

html.dark .jf-account__sub,
html.dark .jf-ads-market__sub,
html.dark .jf-biz-dir__sub,
html.dark .jf-afrah-market__sub,
html.dark .jf-wafayat-market__sub,
html.dark .jf-news-list__sub {
  color: var(--jf-muted);
}

/* Inputs / selects on dark */
html.dark .jf-ads-submit__input,
html.dark .jf-ads-submit__textarea,
html.dark .jf-ads-submit__select,
html.dark .jf-biz-submit__input,
html.dark .jf-biz-submit__textarea,
html.dark .jf-biz-submit__select,
html.dark .jf-account input:not([type="checkbox"]):not([type="radio"]),
html.dark .jf-account textarea,
html.dark .jf-account select,
html.dark .jf-op-settings input:not([type="checkbox"]):not([type="radio"]),
html.dark .jf-op-settings textarea,
html.dark .jf-op-settings select {
  background: var(--jf-bg);
  border-color: var(--jf-border);
  color: var(--jf-ink);
}

html.dark .jf-ads-submit__input::placeholder,
html.dark .jf-ads-submit__textarea::placeholder,
html.dark .jf-biz-submit__input::placeholder,
html.dark .jf-biz-submit__textarea::placeholder {
  color: var(--jf-muted);
}

/* Sticky bars / dock already tokenized — ensure submit bars */
html.dark .jf-ads-submit__bar,
html.dark .jf-biz-submit__bar {
  background: color-mix(in srgb, var(--jf-card) 92%, transparent);
  border-top-color: var(--jf-border);
}

/* Chips / toolbar */
html.dark .jf-ads-market__chip,
html.dark .jf-biz-dir__chip,
html.dark .jf-afrah-market__chip,
html.dark .jf-wafayat-market__chip {
  background: color-mix(in srgb, var(--jf-card) 90%, transparent);
  border-color: var(--jf-border);
  color: var(--jf-ink);
}

html.dark .jf-ads-market__chip.is-active,
html.dark .jf-biz-dir__chip.is-active {
  color: var(--jf-primary);
  border-color: color-mix(in srgb, var(--jf-primary) 45%, var(--jf-border));
}

/* Single news / article shells without local vars */
html.dark .jf-article,
html.dark .jf-single,
html.dark .jf-post {
  color: var(--jf-ink);
}

html.dark .jf-article__title,
html.dark .jf-single__title {
  color: var(--jf-ink);
}

/* Auth / phase cards */
html.dark .jf-auth-card,
html.dark .jf-login-card,
html.dark .jf-card {
  background: var(--jf-card);
  border-color: var(--jf-border);
  color: var(--jf-ink);
}

/* Chat lab */
html.dark .jf-chat-drawer,
html.dark .jsc-shell,
html.dark body.jf-chat-lab .jsc-panel {
  background: var(--jf-card);
  color: var(--jf-ink);
  border-color: var(--jf-border);
}

/* Polls */
html.dark .jf-poll,
html.dark .jf-polls-lab {
  background: var(--jf-card);
  color: var(--jf-ink);
  border-color: var(--jf-border);
}

/* Fahras / platforms leftovers */
html.dark .jf-fahras,
html.dark .jf-platforms {
  color: var(--jf-ink);
}

html.dark .jf-fahras a,
html.dark .jf-platforms a {
  color: var(--jf-ink);
}

/* Search panel */
html.dark .jf-search-panel {
  background: var(--jf-card);
  border-top-color: var(--jf-border);
}

html.dark .jf-search-panel input[type="search"] {
  background: var(--jf-bg);
  border-color: var(--jf-border);
  color: var(--jf-ink);
}

/* Breadcrumbs */
html.dark .jf-breadcrumbs,
html.dark .jf-breadcrumbs a {
  color: var(--jf-muted);
}

html.dark .jf-breadcrumbs [aria-current="page"] {
  color: var(--jf-ink);
}