/**
 * WP Tea — appearance (light / dark).
 * Dark mode flips theme.json semantic tokens so has-*-background-color
 * blocks follow without rewriting content. Pattern: cocoBook html.cb-dark.
 */

html {
	color-scheme: light;
}

html.wptea-dark {
	color-scheme: dark;
}

/*
 * Semantic palette only. Named black/white/accent stay as authored
 * (Powder-compat sections that intentionally use black stay black).
 */
html.wptea-dark {
	--wp--preset--color--base: #1c1c1c;
	--wp--preset--color--contrast: #e8e8e8;
	--wp--preset--color--neutral: #242424;
	--wp--preset--color--quaternary: #2a2a2a;
	/* Soften tea green on dark paper for link/button contrast. */
	--wp--preset--color--primary: #4fd45a;
	--wp--preset--color--secondary: #a3e635;
	--wp--preset--color--tertiary: #d9f99d;
	--wp--preset--color--accent: #4fd45a;
	--wp--preset--color--accent-80: #4fd45acc;
	--wp--preset--color--accent-60: #4fd45a99;
	--wp--preset--color--accent-50: #4fd45a80;
	--wp--preset--color--accent-20: #4fd45a33;
	--wp--preset--color--accent-10: #4fd45a1a;
	/* Core link blue (#3858e9) fails contrast on dark paper. */
	--wp--preset--color--custom-blue: #8ab4ff;
	--wptea-link: #8ab4ff;
	--wptea-muted: #b0b0b0;
	--wptea-line: rgba(255, 255, 255, 0.18);
}

html.wptea-dark body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/*
 * has-base-color was white ink on black chrome (footer titles).
 * After token flip base is dark paper — restore light ink.
 */
html.wptea-dark .has-base-color {
	color: #e8e8e8 !important;
}

html.wptea-dark a:where(:not(.wp-element-button)) {
	color: var(--wptea-link);
}

html.wptea-dark a:where(:not(.wp-element-button)):hover {
	color: #b3d0ff;
}

/* Chrome / meta links stay ink, not link-blue. */
html.wptea-dark .wp-block-navigation a,
html.wptea-dark .wp-block-navigation .wp-block-navigation-item__content,
html.wptea-dark .wp-block-site-title a,
html.wptea-dark .wp-block-loginout a,
html.wptea-dark .wp-block-post-title a,
html.wptea-dark .wp-block-post-author-name a,
html.wptea-dark .wp-block-post-terms a,
html.wptea-dark .wp-block-post-date a,
html.wptea-dark .wptea-appearance-toggle,
html.wptea-dark .has-base-color a:where(:not(.wp-element-button)),
html.wptea-dark .wp-block-cover .wp-block-heading a:where(:not(.wp-element-button)),
html.wptea-dark .wp-block-cover__inner-container a:where(:not(.wp-element-button)) {
	color: #e8e8e8;
}

html.wptea-dark .has-base-color a:where(:not(.wp-element-button)):hover,
html.wptea-dark .wp-block-cover .wp-block-heading a:where(:not(.wp-element-button)):hover,
html.wptea-dark .wp-block-cover__inner-container a:where(:not(.wp-element-button)):hover {
	color: #fff;
}

html.wptea-dark .wp-block-post-author-name a:hover,
html.wptea-dark .wp-block-post-terms a:hover,
html.wptea-dark .wp-block-navigation a:hover,
html.wptea-dark .wp-block-loginout a:hover {
	color: var(--wptea-link);
}

/* Muted meta / footer chrome on dark paper. */
html.wptea-dark .wp-block-post-date,
html.wptea-dark .wp-block-post-author-name,
html.wptea-dark .wp-block-post-terms,
html.wptea-dark .wp-block-latest-posts__post-date,
html.wptea-dark .wp-block-latest-comments__comment-date {
	color: var(--wptea-muted);
}

html.wptea-dark .has-contrast-background-color,
html.wptea-dark .has-contrast-background-color p,
html.wptea-dark .has-contrast-background-color li,
html.wptea-dark .has-contrast-background-color .wp-block-heading:not(.has-base-color) {
	color: #c8c8c8;
}

html.wptea-dark .has-contrast-background-color a:where(:not(.wp-element-button)):not(.wpcc-link) {
	color: #d4d4d4;
}

html.wptea-dark .has-contrast-background-color a:where(:not(.wp-element-button)):not(.wpcc-link):hover {
	color: #fff;
}

/* Site logo wordmark is dark-ink PNG; keep cup hue, lift ink. */
html.wptea-dark .wp-block-site-logo img,
html.wptea-dark .custom-logo {
	filter: invert(1) hue-rotate(180deg);
}

/* Forms / inputs that inherit OS dark but sit on flipped paper. */
html.wptea-dark input,
html.wptea-dark textarea,
html.wptea-dark select {
	background-color: #242424;
	color: #e8e8e8;
	border-color: #3a3a3a;
}

html.wptea-dark input::placeholder,
html.wptea-dark textarea::placeholder {
	color: #a1a1a1;
}

/* Hardcoded light surfaces in base/blocks/plugins. */
html.wptea-dark .wp-block-categories-dropdown select,
html.wptea-dark .wp-block-categories select {
	color: #e8e8e8;
	background-color: #242424;
	border-color: #3a3a3a;
}

html.wptea-dark {
	--wenpai-page-like-btn-bg: #2a2a2a;
	--wenpai-page-like-btn-fg: #c8c8c8;
	--wenpai-page-like-btn-bg-hover: #333;
	--wenpai-page-like-count-bg: #1c1c1c;
	--wenpai-page-like-count-fg: #c8c8c8;
	--wenpai-page-like-count-border: #3a3a3a;
}

html.wptea-dark b,
html.wptea-dark strong,
html.wptea-dark th,
html.wptea-dark .wp-block-post-title a,
html.wptea-dark a {
	border-bottom-color: var(--wptea-line);
}

html.wptea-dark hr,
html.wptea-dark .wp-block-separator:not(.is-style-dots) {
	border-color: var(--wptea-line);
	color: var(--wptea-line);
	background-color: var(--wptea-line);
}

html.wptea-dark .is-style-shadow-light {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/*
 * Cover dim / solid bars authored as contrast (was near-black).
 * After token flip contrast is light ink — keep these surfaces dark.
 */
html.wptea-dark .wp-block-cover__background.has-contrast-background-color,
html.wptea-dark .wp-block-cover .has-contrast-background-color,
html.wptea-dark .wp-block-group.has-contrast-background-color:not(.has-base-color),
html.wptea-dark .wp-block-columns.has-contrast-background-color {
	background-color: #0a0a0a !important;
}

html.wptea-dark pre,
html.wptea-dark .wp-block-code,
html.wptea-dark .wp-block-preformatted {
	background-color: #242424;
	color: #e8e8e8;
}

html.wptea-dark .wp-block-table td,
html.wptea-dark .wp-block-table th {
	border-color: rgba(255, 255, 255, 0.12);
}

html.wptea-dark .comment-body,
html.wptea-dark .wp-block-comment-template .comment,
html.wptea-dark .wp-block-post-comments-form {
	color: #e8e8e8;
}

/*
 * Hardcoded light modules (theme.json / inline / plugin CSS).
 * Token flip alone cannot reach these.
 */

/* Article headings locked to #1a1a1a in blocks.css. */
html.wptea-dark .wp-block-post-content.wptea-content :is(h1, h2, h3, h4, h5, h6),
html.wptea-dark .wp-block-post-content.wptea-content :is(h1, h2, h3, h4, h5, h6).wp-block-heading,
html.wptea-dark .wptea-content.wp-block-post-content :is(h1, h2, h3, h4, h5, h6),
html.wptea-dark .wptea-content.wp-block-post-content :is(h1, h2, h3, h4, h5, h6).wp-block-heading,
html.wptea-dark .wp-block-heading:not(.has-base-color):not(.has-primary-color):not(.has-secondary-color) {
	color: #e8e8e8 !important;
}

html.wptea-dark .wp-block-post-title,
html.wptea-dark .wp-block-post-title a {
	color: #e8e8e8 !important;
}

/* Footnotes / 名词解释 box (global styles #f2f2f2). */
html.wptea-dark .wp-block-footnotes,
html.wptea-dark ol.wp-block-footnotes,
html.wptea-dark :root :where(.wp-block-footnotes),
html.wptea-dark :where(.wp-block-footnotes) {
	background-color: #242424 !important;
	color: #c8c8c8 !important;
	border-color: var(--wptea-line) !important;
}

html.wptea-dark .wp-block-footnotes a,
html.wptea-dark .wp-block-footnotes li {
	color: #d0d0d0;
}

html.wptea-dark .wp-block-footnotes a {
	color: var(--wptea-link);
}

/* List dotted rules — beat blocks.css #e9e9e9. */
html.wptea-dark .wptea-content.wp-block-post-content li,
html.wptea-dark .entry-content .wp-block-group.is-vertical.is-layout-flex li,
html.wptea-dark .wp-block-latest-posts.wp-block-latest-posts__list li,
html.wptea-dark .wp-block-latest-comments li,
html.wptea-dark .wp-block-categories li,
html.wptea-dark .wp-block-archives li {
	border-bottom-color: var(--wptea-line) !important;
}

/*
 * Light photo modules (home fog / 热点推送, etc.): keep the photo.
 * Invert the layer; re-invert direct children so cards / text stay normal.
 * Do NOT wipe to solid #111 — that was rejected (全黑).
 */
html.wptea-dark .wp-block-group.has-background[style*="background-image"] {
	filter: invert(1);
}
html.wptea-dark .wp-block-group.has-background[style*="background-image"] > * {
	filter: invert(1);
}

/*
 * Partner / gray wordmarks are mid-gray (~143). Plain invert darkens them;
 * force white silhouette for dark paper.
 */
html.wptea-dark img[src*="logo-gray"],
html.wptea-dark img[src*="-logo-gray"],
html.wptea-dark img[src*="wp-logo-gray"] {
	filter: brightness(0) invert(1);
	opacity: 0.78;
}

/*
 * List bullets: core/icon and Outermost icon-block both author #3858e9.
 * Dark: soft link blue on dark paper.
 */
html.wptea-dark .wp-block-icon svg[style*="#3858e9"],
html.wptea-dark .wp-block-icon svg[style*="color:#3858e9"],
html.wptea-dark .wp-block-icon svg.has-text-color[style*="3858e9"],
html.wptea-dark .icon-container.has-icon-color[style*="#3858e9"],
html.wptea-dark .icon-container[style*="color:#3858e9"],
html.wptea-dark .wp-block-outermost-icon-block .icon-container[style*="3858e9"] {
	color: var(--wptea-link) !important;
}

html.wptea-dark .icon-container.has-icon-color[style*="#3858e9"] svg,
html.wptea-dark .icon-container[style*="color:#3858e9"] svg,
html.wptea-dark .wp-block-outermost-icon-block .icon-container[style*="3858e9"] svg {
	color: inherit !important;
	fill: currentColor !important;
}

/* Inline light fills authored in block markup. */
html.wptea-dark .has-background[style*="background-color:#f8f8f8"],
html.wptea-dark .has-background[style*="background-color:#f4f4f4"],
html.wptea-dark .has-background[style*="background-color:#f3f3f3"],
html.wptea-dark .has-background[style*="background-color:#f2f2f2"],
html.wptea-dark .has-background[style*="background-color:#f0f0f0"],
html.wptea-dark .has-background[style*="background-color:#e8ecef"],
html.wptea-dark .has-background[style*="background-color:#e4e4e4"],
html.wptea-dark .has-background[style*="background-color:#dedede"],
html.wptea-dark .has-background[style*="background-color:#ffffff"],
html.wptea-dark .has-background[style*="background-color:#fff;"],
html.wptea-dark .has-background[style*="background-color: #f8f8f8"],
html.wptea-dark .has-background[style*="background-color: #f4f4f4"],
html.wptea-dark .has-background[style*="background-color: #f3f3f3"],
html.wptea-dark .has-background[style*="background-color: #f2f2f2"],
html.wptea-dark .has-background[style*="background-color: #f0f0f0"],
html.wptea-dark .has-background[style*="background-color: #e4e4e4"] {
	background-color: #242424 !important;
}

/* Soft promo chips that also set a muted text color inline. */
html.wptea-dark .has-background[style*="background-color:#f8f8f8"][style*="color:#8b8b8b"],
html.wptea-dark .has-background[style*="color:#8b8b8b"] {
	color: #a1a1a1 !important;
}

/*
 * Light: theme.json button radius was 0 (sharp bricks). Round CTAs to 8px.
 * !important beats global styles; preserve authored pills (35/50/999).
 */
.wp-block-button__link,
.wp-element-button {
	border-radius: 8px !important;
}

.wp-block-button__link[style*="border-radius:35px"],
.wp-block-button__link[style*="border-radius: 35px"],
.wp-element-button[style*="border-radius:35px"],
.wp-element-button[style*="border-radius: 35px"] {
	border-radius: 35px !important;
}

.wp-block-button__link[style*="border-radius:50px"],
.wp-block-button__link[style*="border-radius: 50px"],
.wp-element-button[style*="border-radius:50px"],
.wp-element-button[style*="border-radius: 50px"] {
	border-radius: 50px !important;
}

.wp-block-button__link[style*="border-radius:999px"],
.wp-block-button__link[style*="border-radius: 999px"],
.wp-element-button[style*="border-radius:999px"],
.wp-element-button[style*="border-radius: 999px"] {
	border-radius: 999px !important;
}

/*
 * Buttons in dark.
 * Light authors many CTAs as near-black fill (contrast / black) or outline
 * with quaternary border. After token flip those become light bricks or
 * #2a2a2a borders that vanish on dark paper — ghost outline for all of them.
 * Keep brand fills (primary / secondary / tertiary / accent).
 */
html.wptea-dark .wp-block-button__link.has-contrast-background-color,
html.wptea-dark .wp-element-button.has-contrast-background-color,
html.wptea-dark .wp-block-button__link.has-black-background-color,
html.wptea-dark .wp-element-button.has-black-background-color,
html.wptea-dark .wp-block-button.is-style-outline .wp-block-button__link,
html.wptea-dark .wp-block-button__link.has-quaternary-border-color,
html.wptea-dark .wp-block-button__link.has-neutral-border-color {
	background-color: transparent !important;
	background-image: none !important;
	color: #e8e8e8 !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

html.wptea-dark .wp-block-button__link.has-contrast-background-color:hover,
html.wptea-dark .wp-block-button__link.has-contrast-background-color:focus,
html.wptea-dark .wp-element-button.has-contrast-background-color:hover,
html.wptea-dark .wp-element-button.has-contrast-background-color:focus,
html.wptea-dark .wp-block-button__link.has-black-background-color:hover,
html.wptea-dark .wp-block-button__link.has-black-background-color:focus,
html.wptea-dark .wp-element-button.has-black-background-color:hover,
html.wptea-dark .wp-element-button.has-black-background-color:focus,
html.wptea-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
html.wptea-dark .wp-block-button.is-style-outline .wp-block-button__link:focus,
html.wptea-dark .wp-block-button__link.has-quaternary-border-color:hover,
html.wptea-dark .wp-block-button__link.has-quaternary-border-color:focus,
html.wptea-dark .wp-block-button__link.has-neutral-border-color:hover,
html.wptea-dark .wp-block-button__link.has-neutral-border-color:focus {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Brand fill CTAs stay filled (do not ghost). */
html.wptea-dark .wp-block-button__link.has-primary-background-color,
html.wptea-dark .wp-block-button__link.has-secondary-background-color,
html.wptea-dark .wp-block-button__link.has-tertiary-background-color,
html.wptea-dark .wp-block-button__link.has-accent-background-color,
html.wptea-dark .wp-element-button.has-primary-background-color,
html.wptea-dark .wp-element-button.has-secondary-background-color,
html.wptea-dark .wp-element-button.has-tertiary-background-color,
html.wptea-dark .wp-element-button.has-accent-background-color,
html.wptea-dark .wp-block-search__button {
	border-width: 0 !important;
	border-radius: 8px;
}

html.wptea-dark .wp-block-separator[style*="#e4e4e4"],
html.wptea-dark .wp-block-separator[style*="background-color:#e4e4e4"],
html.wptea-dark .wp-block-separator[style*="#f0f0f0"],
html.wptea-dark .wp-block-separator[style*="background-color:#f0f0f0"],
html.wptea-dark .wp-block-separator[style*="#f2f2f2"],
html.wptea-dark .wp-block-separator[style*="background-color:#f2f2f2"] {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.14) !important;
}

/* Light linear-gradient cards (author bio, 近期评论, etc.). */
html.wptea-dark .wp-block-columns.has-background[style*="linear-gradient"],
html.wptea-dark .wp-block-group.has-background[style*="linear-gradient"] {
	background: linear-gradient(131deg, #2a2a2a 34%, #222 78%) !important;
	border-color: #3a3a3a !important;
	color: #e8e8e8 !important;
}

html.wptea-dark .wp-block-group.has-background[style*="linear-gradient"] a:where(:not(.wp-element-button)) {
	color: var(--wptea-link);
}

html.wptea-dark .wp-block-latest-comments__comment-excerpt,
html.wptea-dark .wp-block-latest-comments__comment-meta {
	color: var(--wptea-muted);
}

html.wptea-dark .wp-block-separator[style*="#dedede"],
html.wptea-dark .wp-block-separator[style*="background-color:#dedede"] {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.14) !important;
}

/* Inline light borders on cards / shortlink / related. */
html.wptea-dark .has-border-color[style*="#e8ecef"],
html.wptea-dark .has-border-color[style*="#f0f0f0"],
html.wptea-dark .has-border-color[style*="#e3e3e3"],
html.wptea-dark .has-border-color[style*="#e4e4e4"],
html.wptea-dark .has-border-color[style*="#dedede"],
html.wptea-dark .has-border-color[style*="#eee"],
html.wptea-dark .has-border-color[style*="#ddd"],
html.wptea-dark .wp-block-group.has-border-color[style*="#e8ecef"],
html.wptea-dark .wp-block-group.has-border-color[style*="#f0f0f0"],
html.wptea-dark .wp-block-group.has-border-color[style*="#e3e3e3"] {
	border-color: rgba(255, 255, 255, 0.16) !important;
}

/* WP ULike (legacy thumbs) — match page-like tokens. */
html.wptea-dark .wpulike-default button.wp_ulike_btn,
html.wptea-dark .wpulike-default button.wp_ulike_btn:focus,
html.wptea-dark .wpulike-default button.wp_ulike_btn:hover {
	background-color: #2a2a2a !important;
	color: #c8c8c8 !important;
}

html.wptea-dark .wpulike-default .count-box {
	background-color: #1c1c1c !important;
	color: #c8c8c8 !important;
}

html.wptea-dark .wpulike-default .count-box::before {
	border-color: transparent transparent #3a3a3a #3a3a3a !important;
}

html.wptea-dark .wpulike-default .wp_ulike_put_image::after {
	filter: invert(1);
}

/*
 * Product comments / 参与讨论.
 * MU gate CSS historically forced white paper + #0a0a0a ink (even under .dark).
 * Dark tokens live in the MU html.wptea-dark block; keep a belt-and-braces copy here
 * so theme-only deploys still read correctly.
 */
html.wptea-dark .wptea-pc-discuss,
html.wptea-dark .wptea-pc-comments.wptea-pc-discuss {
	background: #242424 !important;
	color: #e8e8e8 !important;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.35) !important;
}

html.wptea-dark .wptea-pc-comments,
html.wptea-dark .wptea-pc-discuss__text,
html.wptea-dark .wptea-pc-comments .pc-item,
html.wptea-dark .wptea-pc-comments .pc-body,
html.wptea-dark .wptea-pc-comments .pc-cooked,
html.wptea-dark .wptea-pc-comments .pc-cooked p {
	color: #e8e8e8 !important;
}

html.wptea-dark .wptea-pc-comments .wptea-pc-fallback,
html.wptea-dark .wptea-pc-fallback {
	color: #a1a1a1 !important;
}

html.wptea-dark .wptea-pc-comments .wptea-pc-fallback a {
	color: #e8e8e8 !important;
	border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}

html.wptea-dark .wptea-pc-comments .pc-empty {
	background: #1c1c1c !important;
	color: #c8c8c8 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

html.wptea-dark .wptea-pc-comments .pc-empty strong {
	color: #e8e8e8 !important;
}

html.wptea-dark .wptea-pc-comments .pc-sub,
html.wptea-dark .wptea-pc-comments .pc-label-text,
html.wptea-dark .wptea-pc-comments .pc-hint,
html.wptea-dark .wptea-pc-comments .pc-meta,
html.wptea-dark .wptea-pc-comments .pc-empty p {
	color: #b0b0b0 !important;
}

html.wptea-dark .wptea-pc-comments .pc-session,
html.wptea-dark .wptea-pc-comments .pc-session-guest,
html.wptea-dark .wptea-pc-comments .pc-session-login,
html.wptea-dark .wptea-pc-comments .pc-session-sync {
	background: #2a2a2a !important;
	color: #c8c8c8 !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
}

html.wptea-dark .wptea-pc-comments .pc-session a,
html.wptea-dark .wptea-pc-comments .pc-session-login a {
	color: #e8e8e8 !important;
}

html.wptea-dark .wptea-pc-comments .pc-shell,
html.wptea-dark .wptea-pc-comments .pc-panel,
html.wptea-dark .wptea-pc-comments .pc-panel-inline {
	--pc-paper: #242424 !important;
	--pc-tile: #1c1c1c !important;
	--pc-field: #1c1c1c !important;
	--pc-hover: #2a2a2a !important;
	--pc-ink: #e8e8e8 !important;
	--pc-muted: #a1a1a1 !important;
	--pc-faint: #7a7a7a !important;
	--pc-line: #3a3a3a !important;
	--pc-reply-bg: #1c1c1c !important;
	--pc-reply-muted: #a1a1a1 !important;
	--pc-reply-name: #e8e8e8 !important;
	--pc-reply-line: #3a3a3a !important;
	background-color: transparent !important;
	color: #e8e8e8 !important;
	color-scheme: dark !important;
}

html.wptea-dark .wptea-pc-comments a:not(.wptea-pc-discuss__btn):not(.wptea-pc-btn) {
	color: #e8e8e8 !important;
	border-bottom-color: rgba(255, 255, 255, 0.28) !important;
}

html.wptea-dark .wptea-pc-comments textarea,
html.wptea-dark .wptea-pc-comments input:not([type="submit"]):not([type="button"]),
html.wptea-dark .wptea-pc-comments .pc-field,
html.wptea-dark .wptea-pc-comments .pc-composer textarea {
	background-color: #1c1c1c !important;
	color: #e8e8e8 !important;
	border-color: #3a3a3a !important;
}

/* WPCC language chips stay dark chrome. */
html.wptea-dark span#wpcs_original_link,
html.wptea-dark span#wpcs_zh-cn_link,
html.wptea-dark span#wpcs_zh-tw_link,
html.wptea-dark span#wpcs_zh-hk_link {
	color: #c8c8c8;
	border-color: rgba(255, 255, 255, 0.28);
}

/* Toggle — icon-only square next to loginout. */
.wptea-appearance-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wptea-appearance-toggle:hover,
.wptea-appearance-toggle:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
	border-color: color-mix(in srgb, currentColor 36%, transparent);
	outline: none;
}

.wptea-appearance-toggle:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
}

.wptea-appearance-toggle__icon {
	display: none;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.wptea-appearance-toggle[data-mode="light"] [data-icon="sun"],
.wptea-appearance-toggle[data-mode="dark"] [data-icon="moon"] {
	display: block;
}

/* Legacy label (cached HTML) — hide if still present. */
.wptea-appearance-toggle__label {
	display: none !important;
}

/* Mobile menu row: keep toggle with login. */
.wptea-mobile-menu .wptea-appearance-toggle {
	margin-top: 0.5rem;
}

html.wptea-dark .wptea-appearance-toggle {
	border-color: rgba(255, 255, 255, 0.16);
}

html.wptea-dark .wptea-appearance-toggle:hover,
html.wptea-dark .wptea-appearance-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.wptea-appearance-toggle {
		transition: none;
	}
}