MediaWiki:Citizen.css: Difference between revisions

Line 1:

/* ~~============================================================~~

/* SpiritVale Wiki — Citizen.css */

SpiritVale Wiki — Citizen.css

/* Theme tokens, Citizen skin overrides, and global chrome polish. */

~~Blue System v0.4 (Citizen theme -> SV token bridge)~~

~~- Anchors to site swatch: #1F2937~~

~~- Day: darker “light mode” (still readable, not washed out)~~

~~- Night: deeper dark mode~~

~~- Exports Citizen theme vars -> Common.css --sv-ui-~~* ~~tokens~~

~~- Mobile (<=500): no frosted glass~~ / ~~no transparency~~

~~- Codex~~/~~MediaWiki message banners: unified via~~ global ~~override at EOF~~

~~============================================================~~ */

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

0) Shared ~~tweaks~~

/* 1) Shared tokens */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

:root{

--transform-image-hover:none;

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

1) ~~DARK MODE (~~Night~~) — deeper than site swatch~~

/* 2) Night mode */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

:root.skin-theme-clientpref-night{

--color-progressive-oklch__h:225 !important;

--color-progressive-oklch__c:0.170 !important;

--color-progressive-oklch__l:62% !important;

~~/* Citizen surfaces */~~

--color-surface-0:#0f172a !important;

--color-surface-1:#1f2937 !important;

--color-surface-1:#1f2937 !important; ~~/* site swatch */~~

--color-surface-2:#273449 !important;

--color-surface-3:#2e3f59 !important;

--color-surface-4:#364a69 !important;

~~/* Keep Citizen internal OKLCH aligned */~~

--color-surface-0-oklch__l:10% !important;

--color-surface-0-oklch__c:0.040 !important;

~~/* Text (bright, readable) */~~

--color-emphasized:#f5f9ff !important;

--color-base:#d7e2f4 !important;

--color-subtle:#b6c6e0 !important;

~~/* Links (blue-only) */~~

--color-link:#6aa6ff !important;

--color-link--hover:#8cbcff !important;

--color-link--active:#4f98ff !important;

--color-visited:#8cbcff !important;

--color-visited--hover:#b0d0ff !important;

--color-visited--active:#6aa6ff !important;

--background-color-base-fixed:var(--color-surface-0) !important;

~~/* Export -> SV tokens (Common.css uses these everywhere) */~~

--sv-ui-bg0:var(--color-surface-0);

--sv-ui-bg1:var(--color-surface-1);

--sv-ui-bg2:var(--color-surface-2);

--sv-ui-bg3:var(--color-surface-3);

--sv-ui-line1:#3b4b63;

--sv-ui-line2:#4b6388;

--sv-ui-text1:var(--color-emphasized);

--sv-ui-text2:var(--color-base);

--sv-ui-text3:var(--color-subtle);

--sv-ui-accent:var(--color-link);

--sv-ui-accent2:var(--color-visited);

--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

2) ~~LIGHT MODE (~~Day~~) — the site swatch becomes the canvas~~

/* 3) Day mode */

~~(“25% lighter than dark mode” concept: Day uses #1F2937 as surface~~-0)

/* -------------------------------------------------------------------------- */

------------------------------------------------------------ */

:root.skin-theme-clientpref-day{

--color-progressive-oklch__h:225 !important;

--color-progressive-oklch__c:0.170 !important;

--color-progressive-oklch__l:62% !important;

~~/* Citizen surfaces */~~

--color-surface-0:#1f2937 !important;

--color-surface-0:#1f2937 !important; ~~/* site swatch */~~

--color-surface-1:#273449 !important;

--color-surface-2:#2e3f59 !important;

--color-surface-3:#364a69 !important;

--color-surface-4:#3f5580 !important;

~~/* Align internal OKLCH */~~

--color-surface-0-oklch__l:18% !important;

--color-surface-0-oklch__c:0.040 !important;

~~/* IMPORTANT: keep text LIGHT in day mode since the canvas is still dark */~~

--color-emphasized:#f5f9ff !important;

--color-base:#d7e2f4 !important;

--color-subtle:#b6c6e0 !important;

~~/* Links (blue-only) */~~

--color-link:#8cbcff !important;

--color-link--hover:#b0d0ff !important;

--color-link--active:#6aa6ff !important;

--color-visited:#b0d0ff !important;

--color-visited--hover:#d2e6ff !important;

--color-visited--active:#8cbcff !important;

--background-color-base-fixed:var(--color-surface-0) !important;

~~/* Export -> SV tokens */~~

--sv-ui-bg0:var(--color-surface-0);

--sv-ui-bg1:var(--color-surface-1);

--sv-ui-bg2:var(--color-surface-2);

--sv-ui-bg3:var(--color-surface-3);

--sv-ui-line1:#4b6388;

--sv-ui-line2:#5f7fb4;

--sv-ui-text1:var(--color-emphasized);

--sv-ui-text2:var(--color-base);

--sv-ui-text3:var(--color-subtle);

--sv-ui-accent:var(--color-link);

--sv-ui-accent2:var(--color-visited);

--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

3) ~~AUTOMATIC MODE (~~OS)

/* 4) OS mode */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

@media (prefers-color-scheme:dark){

:root.skin-theme-clientpref-os{

--color-progressive-oklch__h:225 !important;

--color-progressive-oklch__c:0.170 !important;

--color-progressive-oklch__l:62% !important;

--color-surface-0:#0f172a !important;

--color-surface-1:#1f2937 !important;

--color-surface-2:#273449 !important;

--color-surface-3:#2e3f59 !important;

--color-surface-4:#364a69 !important;

--color-surface-0-oklch__l:10% !important;

--color-surface-0-oklch__c:0.040 !important;

--color-emphasized:#f5f9ff !important;

--color-base:#d7e2f4 !important;

--color-subtle:#b6c6e0 !important;

--color-link:#6aa6ff !important;

--color-visited:#8cbcff !important;

--color-link--hover:#8cbcff !important;

--color-link--active:#4f98ff !important;

--color-visited:#8cbcff !important;

--color-visited--hover:#b0d0ff !important;

--color-visited--active:#6aa6ff !important;

--background-color-base-fixed:var(--color-surface-0) !important;

--sv-ui-bg0:var(--color-surface-0);

--sv-ui-bg1:var(--color-surface-1);

--sv-ui-bg2:var(--color-surface-2);

--sv-ui-bg3:var(--color-surface-3);

--sv-ui-line1:#3b4b63;

--sv-ui-line2:#4b6388;

--sv-ui-text1:var(--color-emphasized);

--sv-ui-text2:var(--color-base);

--sv-ui-text3:var(--color-subtle);

--sv-ui-accent:var(--color-link);

--sv-ui-accent2:var(--color-visited);

--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);

}

@media (prefers-color-scheme:light){

:root.skin-theme-clientpref-os{

--color-progressive-oklch__h:225 !important;

--color-progressive-oklch__c:0.170 !important;

--color-progressive-oklch__l:62% !important;

--color-surface-0:#1f2937 !important;

--color-surface-1:#273449 !important;

--color-surface-2:#2e3f59 !important;

--color-surface-3:#364a69 !important;

--color-surface-4:#3f5580 !important;

--color-surface-0-oklch__l:18% !important;

--color-surface-0-oklch__c:0.040 !important;

--color-emphasized:#f5f9ff !important;

--color-base:#d7e2f4 !important;

--color-subtle:#b6c6e0 !important;

--color-link:#8cbcff !important;

--color-visited:#b0d0ff !important;

--color-link--hover:#b0d0ff !important;

--color-link--active:#6aa6ff !important;

--color-visited:#b0d0ff !important;

--color-visited--hover:#d2e6ff !important;

--color-visited--active:#8cbcff !important;

--background-color-base-fixed:var(--color-surface-0) !important;

--sv-ui-bg0:var(--color-surface-0);

--sv-ui-bg1:var(--color-surface-1);

--sv-ui-bg2:var(--color-surface-2);

--sv-ui-bg3:var(--color-surface-3);

--sv-ui-line1:#4b6388;

--sv-ui-line2:#5f7fb4;

--sv-ui-text1:var(--color-emphasized);

--sv-ui-text2:var(--color-base);

--sv-ui-text3:var(--color-subtle);

--sv-ui-accent:var(--color-link);

--sv-ui-accent2:var(--color-visited);

--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

4) ~~FORCE PAGE CANVAS BACKGROUNDS~~

/* 5) Page canvas */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

body.skin-citizen{

background-color:var(--color-surface-0) !important;

background-image:none !important;

color:var(--color-base) !important;

}

body.skin-citizen .citizen-body-container,

body.skin-citizen .citizen-page-container{

background-color:var(--color-surface-0) !important;

background-image:none !important;

}

body.skin-citizen .mw-body,

body.skin-citizen .mw-content-container{

background-color:transparent !important;

background-image:none !important;

}

body.skin-citizen .mw-parser-output{

color:var(--color-base);

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

~~5) Link visibility (keep obvious~~)

/* 6) Search trigger */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

~~body.skin~~-~~citizen .mw~~-~~parser~~-~~output a{~~

.citizen-search-trigger{

~~text~~-~~decoration:underline;~~

transition:transform 0.15s ease-in-out;

~~text~~-~~decoration~~-~~thickness:2px;~~

~~text~~-~~underline~~-~~offset:2px;~~

}

~~body~~.~~skin-~~citizen ~~.mw~~-~~parser~~-~~output a:hover~~{

~~text~~-~~decoration~~-~~thickness:3px~~;

}

~~/* ------------------------------------------------------------~~

~~6) Citizen search trigger micro-interaction~~

~~------------------------------------------------------------ */~~

~~.citizen-search-trigger{~~

~~transition:transform 0.15s ease-in-out;~~

}

.citizen-search-trigger:hover{

transform:translateY(-2px);

}

/* --------------~~----------------------------------------------~~

/* -------------------------------------------------------------------------- */

~~7) Mobile hard rule: no frosted glass / no transparency (<=500)~~

/* 7) Dropdown readability */

------------------------------------------------------------ */

/* -------------------------------------------------------------------------- */

~~@media (max-width:500px~~){

~~:root{~~

~~--backdrop-filter-frosted-glass:none !important;~~

~~--opacity-glass:1 !important;~~

}

~~body.skin-citizen .citizen-menu__card,~~

~~body.skin-citizen .citizen-drawer__card,~~

~~body.skin-citizen .citizen-search__form,~~

~~body.skin-citizen .citizen-search__footer{~~

~~background:var(--color-surface-1) !important;~~

~~-webkit-backdrop-filter:none !important;~~

~~backdrop-filter:none !important;~~

}

/* --------------~~----------------------------------------------~~

~~Dropdown menu readability (light menu panels need dark text)~~

------------------------------------------------------------ */

body.skin-citizen .oo-ui-menuSelectWidget,

body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-labelElement-label,

body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget,

body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget a{

body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget a,

~~color:#0b1a33 !important;~~

}

~~/* Codex menus (some widgets use these) */~~

body.skin-citizen .cdx-menu,

body.skin-citizen .cdx-menu-item__text,

body.skin-citizen .cdx-menu-item__label{

color:#0b1a33 !important;

}

/* ------------------------------------------------------------

/* -------------------------------------------------------------------------- */

Native <select~~> dropdown~~ readability ~~(Namespace selectors)~~

/* 8) Native select readability */

- ~~Flip to light background + dark text while open/focused~~

/* -------------------------------------------------------------------------- */

------------------------------------------------------------ */

body.skin-citizen select#namespace:focus,

body.skin-citizen select#mw-search-ns:focus,

body.skin-citizen select[name="namespace"]:focus{

background:#f3f8ff !important;

color:#0b1a33 !important;

}

body.skin-citizen select#namespace:focus option,

body.skin-citizen select#mw-search-ns:focus option,

body.skin-citizen select[name="namespace"]:focus option{

color:#0b1a33 !important;

}

~~/* ------------------------------------------------------------~~

~~SV UI extras (shared popover tuning tokens)~~

~~------------------------------------------------------------ */~~

~~:root{~~

~~--sv-ui-pop-bg:var(--sv-ui-bg0);~~

~~--sv-ui-pop-line:var(--sv-ui-line2);~~

~~--sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35)~~;

}

/* ~~============================================================~~

/* -------------------------------------------------------------------------- */

~~Codex + MediaWiki Message banners — GLOBAL OVERRIDE (all themes)~~

/* 9) Message banners */

- ~~One shared look for day/night/os~~

/* -------------------------------------------------------------------------- */

- ~~Uses Codex~~-~~style colors (notice~~/~~warning~~/~~error/success~~)

~~- White text; links in dark blue~~

~~- Strong override (beats other CSS locations)~~

~~============================================================~~ */

/* ~~Base (notice default)~~ */

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt):not(.cdx-message--inline){

background:#2a2c30 !important;

border:1px solid rgba(255,255,255,0.20) !important;

color:#ffffff !important;

}

~~/* Ensure inner content inherits (links overridden below) */~~

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt)

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) :where(.cdx-message__content,.mw-message-box__content,div,p,ul,li,span,strong,bdi){

:where(.cdx-message__content,.mw-message-box__content,div,p,ul,li,span,strong,bdi){

color:inherit !important;

}

~~/* Links */~~

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a,

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited{

color:~~#2f78ff~~ !important;

color:var(--color-link) !important;

text-decoration:underline;

text-underline-offset:2px;

}

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:hover,

:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited:hover{

color:var(--color-link--hover) !important;

}

~~/* Warning */~~

:where(.cdx-message--warning,.mw-message-box-warning,.mw-warning-with-logexcerpt):not(.cdx-message--inline){

background:#302617 !important;

border-color:#f5b000 !important;

color:#ffffff !important;

}

~~/* Error */~~

:where(.cdx-message--error,.mw-message-box-error):not(.cdx-message--inline){

background:#3e1d17 !important;

border-color:#ff3b30 !important;

color:#ffffff !important;

}

~~/* Success */~~

:where(.cdx-message--success,.mw-message-box-success):not(.cdx-message--inline){

background:#172d26 !important;

border-color:#18c37e !important;

color:#ffffff !important;

}

~~/* Icon tint (Codex-ish) */~~

.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{

.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{ ~~color:#f5b000 !important; }~~

color:#f5b000 !important;

~~.cdx-message.cdx-message--error:not(.cdx-message--inline)~~ ~~.cdx-message__icon{~~ color:#~~ff3b30~~ !important; }

}

~~.cdx-message.cdx-message--success:not(.cdx-message--inline) .cdx-message__icon{ color:#18c37e !important;~~ }

~~/* ============================================================~~

.cdx-message.cdx-message--error:not(.cdx-message--inline) .cdx-message__icon{

~~Diff highlights (history/compare) — match Codex~~ message ~~palette~~

color:#ff3b30 !important;

~~- Added lines: match~~ cdx-message--~~success~~

}

~~- Deleted lines~~: ~~match~~ cdx-message--~~error~~

~~============================================================ */~~

.cdx-message.cdx-message--success:not(.cdx-message--inline) .cdx-message__icon{

color:#18c37e !important;

}

/* -------------------------------------------------------------------------- */

/* 10) Diff highlights */

/* -------------------------------------------------------------------------- */

.diff-addedline .diffchange{

background:#172d26 !important; ~~/* success bg */~~

background:#172d26 !important;

color:#ffffff !important;

}

.diff-deletedline .diffchange{

background:#3e1d17 !important; ~~/* error bg */~~

background:#3e1d17 !important;

color:#ffffff !important;

}

~~/* Links inside diff highlights */~~

.diff-addedline .diffchange a,

.diff-addedline .diffchange a:visited,

.diff-deletedline .diffchange a,

.diff-deletedline .diffchange a:visited{

color:~~#2f78ff~~ !important;

color:var(--color-link) !important;

}

.diff-addedline .diffchange a:hover,

.diff-addedline .diffchange a:visited:hover,

.diff-deletedline .diffchange a:hover,

.diff-deletedline .diffchange a:visited:hover{

color:var(--color-link--hover) !important;

}

/* -------------------------------------------------------------------------- */

/* 11) Mobile glass removal */

/* -------------------------------------------------------------------------- */

@media (max-width:500px){

:root{

--backdrop-filter-frosted-glass:none !important;

--opacity-glass:1 !important;

}

body.skin-citizen .citizen-menu__card,

body.skin-citizen .citizen-drawer__card,

body.skin-citizen .citizen-search__form,

body.skin-citizen .citizen-search__footer{

background:var(--color-surface-1) !important;

-webkit-backdrop-filter:none !important;

backdrop-filter:none !important;

}

@@ Line 1: / Line 1: @@
-/* ============================================================
+/* SpiritVale Wiki — Citizen.css */
-SpiritVale Wiki — Citizen.css
+/* Theme tokens, Citizen skin overrides, and global chrome polish. */
-Blue System v0.4 (Citizen theme -> SV token bridge)
-- Anchors to site swatch: #1F2937
-- Day: darker “light mode” (still readable, not washed out)
-- Night: deeper dark mode
-- Exports Citizen theme vars -> Common.css --sv-ui-* tokens
-- Mobile (<=500): no frosted glass / no transparency
-- Codex/MediaWiki message banners: unified via global override at EOF
-============================================================ */
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) Shared tweaks
+/* 1) Shared tokens */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 :root{
---transform-image-hover:none;
+  --transform-image-hover:none;
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) DARK MODE (Night) — deeper than site swatch
+/* 2) Night mode */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 :root.skin-theme-clientpref-night{
---color-progressive-oklch__h:225 !important;
+  --color-progressive-oklch__h:225 !important;
---color-progressive-oklch__c:0.170 !important;
+  --color-progressive-oklch__c:0.170 !important;
---color-progressive-oklch__l:62% !important;
+  --color-progressive-oklch__l:62% !important;
-/* Citizen surfaces */
+  --color-surface-0:#0f172a !important;
---color-surface-0:#0f172a !important;
+  --color-surface-1:#1f2937 !important;
---color-surface-1:#1f2937 !important; /* site swatch */
+  --color-surface-2:#273449 !important;
---color-surface-2:#273449 !important;
+  --color-surface-3:#2e3f59 !important;
---color-surface-3:#2e3f59 !important;
+  --color-surface-4:#364a69 !important;
---color-surface-4:#364a69 !important;
-/* Keep Citizen internal OKLCH aligned */
+  --color-surface-0-oklch__l:10% !important;
---color-surface-0-oklch__l:10% !important;
+  --color-surface-0-oklch__c:0.040 !important;
---color-surface-0-oklch__c:0.040 !important;
-/* Text (bright, readable) */
+  --color-emphasized:#f5f9ff !important;
---color-emphasized:#f5f9ff !important;
+  --color-base:#d7e2f4 !important;
---color-base:#d7e2f4 !important;
+  --color-subtle:#b6c6e0 !important;
---color-subtle:#b6c6e0 !important;
-/* Links (blue-only) */
+  --color-link:#6aa6ff !important;
---color-link:#6aa6ff !important;
+  --color-link--hover:#8cbcff !important;
---color-link--hover:#8cbcff !important;
+  --color-link--active:#4f98ff !important;
---color-link--active:#4f98ff !important;
+  --color-visited:#8cbcff !important;
---color-visited:#8cbcff !important;
+  --color-visited--hover:#b0d0ff !important;
---color-visited--hover:#b0d0ff !important;
+  --color-visited--active:#6aa6ff !important;
---color-visited--active:#6aa6ff !important;
---background-color-base-fixed:var(--color-surface-0) !important;
+  --background-color-base-fixed:var(--color-surface-0) !important;
-/* Export -> SV tokens (Common.css uses these everywhere) */
+  --sv-ui-bg0:var(--color-surface-0);
---sv-ui-bg0:var(--color-surface-0);
+  --sv-ui-bg1:var(--color-surface-1);
---sv-ui-bg1:var(--color-surface-1);
+  --sv-ui-bg2:var(--color-surface-2);
---sv-ui-bg2:var(--color-surface-2);
+  --sv-ui-bg3:var(--color-surface-3);
---sv-ui-bg3:var(--color-surface-3);
+  --sv-ui-line1:#3b4b63;
---sv-ui-line1:#3b4b63;
+  --sv-ui-line2:#4b6388;
---sv-ui-line2:#4b6388;
+  --sv-ui-text1:var(--color-emphasized);
---sv-ui-text1:var(--color-emphasized);
+  --sv-ui-text2:var(--color-base);
---sv-ui-text2:var(--color-base);
+  --sv-ui-text3:var(--color-subtle);
---sv-ui-text3:var(--color-subtle);
+  --sv-ui-accent:var(--color-link);
---sv-ui-accent:var(--color-link);
+  --sv-ui-accent2:var(--color-visited);
---sv-ui-accent2:var(--color-visited);
+  --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
---sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) LIGHT MODE (Day) — the site swatch becomes the canvas
+/* 3) Day mode */
-(“25% lighter than dark mode” concept: Day uses #1F2937 as surface-0)
+/* -------------------------------------------------------------------------- */
------------------------------------------------------------- */
 :root.skin-theme-clientpref-day{
---color-progressive-oklch__h:225 !important;
+  --color-progressive-oklch__h:225 !important;
---color-progressive-oklch__c:0.170 !important;
+  --color-progressive-oklch__c:0.170 !important;
---color-progressive-oklch__l:62% !important;
+  --color-progressive-oklch__l:62% !important;
-/* Citizen surfaces */
+  --color-surface-0:#1f2937 !important;
---color-surface-0:#1f2937 !important; /* site swatch */
+  --color-surface-1:#273449 !important;
---color-surface-1:#273449 !important;
+  --color-surface-2:#2e3f59 !important;
---color-surface-2:#2e3f59 !important;
+  --color-surface-3:#364a69 !important;
---color-surface-3:#364a69 !important;
+  --color-surface-4:#3f5580 !important;
---color-surface-4:#3f5580 !important;
-/* Align internal OKLCH */
+  --color-surface-0-oklch__l:18% !important;
---color-surface-0-oklch__l:18% !important;
+  --color-surface-0-oklch__c:0.040 !important;
---color-surface-0-oklch__c:0.040 !important;
-/* IMPORTANT: keep text LIGHT in day mode since the canvas is still dark */
+  --color-emphasized:#f5f9ff !important;
---color-emphasized:#f5f9ff !important;
+  --color-base:#d7e2f4 !important;
---color-base:#d7e2f4 !important;
+  --color-subtle:#b6c6e0 !important;
---color-subtle:#b6c6e0 !important;
-/* Links (blue-only) */
+  --color-link:#8cbcff !important;
---color-link:#8cbcff !important;
+  --color-link--hover:#b0d0ff !important;
---color-link--hover:#b0d0ff !important;
+  --color-link--active:#6aa6ff !important;
---color-link--active:#6aa6ff !important;
+  --color-visited:#b0d0ff !important;
---color-visited:#b0d0ff !important;
+  --color-visited--hover:#d2e6ff !important;
---color-visited--hover:#d2e6ff !important;
+  --color-visited--active:#8cbcff !important;
---color-visited--active:#8cbcff !important;
---background-color-base-fixed:var(--color-surface-0) !important;
+  --background-color-base-fixed:var(--color-surface-0) !important;
-/* Export -> SV tokens */
+  --sv-ui-bg0:var(--color-surface-0);
---sv-ui-bg0:var(--color-surface-0);
+  --sv-ui-bg1:var(--color-surface-1);
---sv-ui-bg1:var(--color-surface-1);
+  --sv-ui-bg2:var(--color-surface-2);
---sv-ui-bg2:var(--color-surface-2);
+  --sv-ui-bg3:var(--color-surface-3);
---sv-ui-bg3:var(--color-surface-3);
+  --sv-ui-line1:#4b6388;
---sv-ui-line1:#4b6388;
+  --sv-ui-line2:#5f7fb4;
---sv-ui-line2:#5f7fb4;
+  --sv-ui-text1:var(--color-emphasized);
---sv-ui-text1:var(--color-emphasized);
+  --sv-ui-text2:var(--color-base);
---sv-ui-text2:var(--color-base);
+  --sv-ui-text3:var(--color-subtle);
---sv-ui-text3:var(--color-subtle);
+  --sv-ui-accent:var(--color-link);
---sv-ui-accent:var(--color-link);
+  --sv-ui-accent2:var(--color-visited);
---sv-ui-accent2:var(--color-visited);
+  --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
---sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) AUTOMATIC MODE (OS)
+/* 4) OS mode */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 @media (prefers-color-scheme:dark){
-:root.skin-theme-clientpref-os{
+  :root.skin-theme-clientpref-os{
---color-progressive-oklch__h:225 !important;
+    --color-progressive-oklch__h:225 !important;
---color-progressive-oklch__c:0.170 !important;
+    --color-progressive-oklch__c:0.170 !important;
---color-progressive-oklch__l:62% !important;
+    --color-progressive-oklch__l:62% !important;
---color-surface-0:#0f172a !important;
+    --color-surface-0:#0f172a !important;
---color-surface-1:#1f2937 !important;
+    --color-surface-1:#1f2937 !important;
---color-surface-2:#273449 !important;
+    --color-surface-2:#273449 !important;
---color-surface-3:#2e3f59 !important;
+    --color-surface-3:#2e3f59 !important;
---color-surface-4:#364a69 !important;
+    --color-surface-4:#364a69 !important;
---color-surface-0-oklch__l:10% !important;
+    --color-surface-0-oklch__l:10% !important;
---color-surface-0-oklch__c:0.040 !important;
+    --color-surface-0-oklch__c:0.040 !important;
---color-emphasized:#f5f9ff !important;
+    --color-emphasized:#f5f9ff !important;
---color-base:#d7e2f4 !important;
+    --color-base:#d7e2f4 !important;
---color-subtle:#b6c6e0 !important;
+    --color-subtle:#b6c6e0 !important;
---color-link:#6aa6ff !important;
+    --color-link:#6aa6ff !important;
---color-visited:#8cbcff !important;
+    --color-link--hover:#8cbcff !important;
+    --color-link--active:#4f98ff !important;
+    --color-visited:#8cbcff !important;
+    --color-visited--hover:#b0d0ff !important;
+    --color-visited--active:#6aa6ff !important;
---background-color-base-fixed:var(--color-surface-0) !important;
+    --background-color-base-fixed:var(--color-surface-0) !important;
---sv-ui-bg0:var(--color-surface-0);
+    --sv-ui-bg0:var(--color-surface-0);
---sv-ui-bg1:var(--color-surface-1);
+    --sv-ui-bg1:var(--color-surface-1);
---sv-ui-bg2:var(--color-surface-2);
+    --sv-ui-bg2:var(--color-surface-2);
---sv-ui-bg3:var(--color-surface-3);
+    --sv-ui-bg3:var(--color-surface-3);
---sv-ui-line1:#3b4b63;
+    --sv-ui-line1:#3b4b63;
---sv-ui-line2:#4b6388;
+    --sv-ui-line2:#4b6388;
---sv-ui-text1:var(--color-emphasized);
+    --sv-ui-text1:var(--color-emphasized);
---sv-ui-text2:var(--color-base);
+    --sv-ui-text2:var(--color-base);
---sv-ui-text3:var(--color-subtle);
+    --sv-ui-text3:var(--color-subtle);
---sv-ui-accent:var(--color-link);
+    --sv-ui-accent:var(--color-link);
---sv-ui-accent2:var(--color-visited);
+    --sv-ui-accent2:var(--color-visited);
---sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
+    --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
-}
+  }
 }
 @media (prefers-color-scheme:light){
-:root.skin-theme-clientpref-os{
+  :root.skin-theme-clientpref-os{
---color-progressive-oklch__h:225 !important;
+    --color-progressive-oklch__h:225 !important;
---color-progressive-oklch__c:0.170 !important;
+    --color-progressive-oklch__c:0.170 !important;
---color-progressive-oklch__l:62% !important;
+    --color-progressive-oklch__l:62% !important;
---color-surface-0:#1f2937 !important;
+    --color-surface-0:#1f2937 !important;
---color-surface-1:#273449 !important;
+    --color-surface-1:#273449 !important;
---color-surface-2:#2e3f59 !important;
+    --color-surface-2:#2e3f59 !important;
---color-surface-3:#364a69 !important;
+    --color-surface-3:#364a69 !important;
---color-surface-4:#3f5580 !important;
+    --color-surface-4:#3f5580 !important;
---color-surface-0-oklch__l:18% !important;
+    --color-surface-0-oklch__l:18% !important;
---color-surface-0-oklch__c:0.040 !important;
+    --color-surface-0-oklch__c:0.040 !important;
---color-emphasized:#f5f9ff !important;
+    --color-emphasized:#f5f9ff !important;
---color-base:#d7e2f4 !important;
+    --color-base:#d7e2f4 !important;
---color-subtle:#b6c6e0 !important;
+    --color-subtle:#b6c6e0 !important;
---color-link:#8cbcff !important;
+    --color-link:#8cbcff !important;
---color-visited:#b0d0ff !important;
+    --color-link--hover:#b0d0ff !important;
+    --color-link--active:#6aa6ff !important;
+    --color-visited:#b0d0ff !important;
+    --color-visited--hover:#d2e6ff !important;
+    --color-visited--active:#8cbcff !important;
---background-color-base-fixed:var(--color-surface-0) !important;
+    --background-color-base-fixed:var(--color-surface-0) !important;
---sv-ui-bg0:var(--color-surface-0);
+    --sv-ui-bg0:var(--color-surface-0);
---sv-ui-bg1:var(--color-surface-1);
+    --sv-ui-bg1:var(--color-surface-1);
---sv-ui-bg2:var(--color-surface-2);
+    --sv-ui-bg2:var(--color-surface-2);
---sv-ui-bg3:var(--color-surface-3);
+    --sv-ui-bg3:var(--color-surface-3);
---sv-ui-line1:#4b6388;
+    --sv-ui-line1:#4b6388;
---sv-ui-line2:#5f7fb4;
+    --sv-ui-line2:#5f7fb4;
---sv-ui-text1:var(--color-emphasized);
+    --sv-ui-text1:var(--color-emphasized);
---sv-ui-text2:var(--color-base);
+    --sv-ui-text2:var(--color-base);
---sv-ui-text3:var(--color-subtle);
+    --sv-ui-text3:var(--color-subtle);
---sv-ui-accent:var(--color-link);
+    --sv-ui-accent:var(--color-link);
---sv-ui-accent2:var(--color-visited);
+    --sv-ui-accent2:var(--color-visited);
---sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
+    --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
-}
+  }
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) FORCE PAGE CANVAS BACKGROUNDS
+/* 5) Page canvas */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
 body.skin-citizen{
-background-color:var(--color-surface-0) !important;
+  background-color:var(--color-surface-0) !important;
-background-image:none !important;
+  background-image:none !important;
-color:var(--color-base) !important;
+  color:var(--color-base) !important;
 }
 body.skin-citizen .citizen-body-container,
 body.skin-citizen .citizen-page-container{
-background-color:var(--color-surface-0) !important;
+  background-color:var(--color-surface-0) !important;
-background-image:none !important;
+  background-image:none !important;
 }
 body.skin-citizen .mw-body,
 body.skin-citizen .mw-content-container{
-background-color:transparent !important;
+  background-color:transparent !important;
-background-image:none !important;
+  background-image:none !important;
 }
 body.skin-citizen .mw-parser-output{
-color:var(--color-base);
+  color:var(--color-base);
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) Link visibility (keep obvious)
+/* 6) Search trigger */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
-body.skin-citizen .mw-parser-output a{
+.citizen-search-trigger{
-text-decoration:underline;
+  transition:transform 0.15s ease-in-out;
-text-decoration-thickness:2px;
-text-underline-offset:2px;
-}
-body.skin-citizen .mw-parser-output a:hover{
-text-decoration-thickness:3px;
 }
-/* ------------------------------------------------------------
-) Citizen search trigger micro-interaction
------------------------------------------------------------- */
-.citizen-search-trigger{
-transition:transform 0.15s ease-in-out;
-}
 .citizen-search-trigger:hover{
-transform:translateY(-2px);
+  transform:translateY(-2px);
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-) Mobile hard rule: no frosted glass / no transparency (<=500)
+/* 7) Dropdown readability */
------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
-@media (max-width:500px){
-:root{
---backdrop-filter-frosted-glass:none !important;
---opacity-glass:1 !important;
-}
-body.skin-citizen .citizen-menu__card,
-body.skin-citizen .citizen-drawer__card,
-body.skin-citizen .citizen-search__form,
-body.skin-citizen .citizen-search__footer{
-background:var(--color-surface-1) !important;
--webkit-backdrop-filter:none !important;
-backdrop-filter:none !important;
-}
-}
-/* ------------------------------------------------------------
-Dropdown menu readability (light menu panels need dark text)
------------------------------------------------------------- */
 body.skin-citizen .oo-ui-menuSelectWidget,
 body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-labelElement-label,
 body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget,
-body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget a{
+body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget a,
-color:#0b1a33 !important;
-}
-/* Codex menus (some widgets use these) */
 body.skin-citizen .cdx-menu,
 body.skin-citizen .cdx-menu-item__text,
 body.skin-citizen .cdx-menu-item__label{
-color:#0b1a33 !important;
+  color:#0b1a33 !important;
 }
-/* ------------------------------------------------------------
+/* -------------------------------------------------------------------------- */
-Native <select> dropdown readability (Namespace selectors)
+/* 8) Native select readability */
-- Flip to light background + dark text while open/focused
+/* -------------------------------------------------------------------------- */
------------------------------------------------------------- */
 body.skin-citizen select#namespace:focus,
 body.skin-citizen select#mw-search-ns:focus,
 body.skin-citizen select[name="namespace"]:focus{
-background:#f3f8ff !important;
+  background:#f3f8ff !important;
-color:#0b1a33 !important;
+  color:#0b1a33 !important;
 }
 body.skin-citizen select#namespace:focus option,
 body.skin-citizen select#mw-search-ns:focus option,
 body.skin-citizen select[name="namespace"]:focus option{
-color:#0b1a33 !important;
+  color:#0b1a33 !important;
-}
-/* ------------------------------------------------------------
-SV UI extras (shared popover tuning tokens)
------------------------------------------------------------- */
-:root{
---sv-ui-pop-bg:var(--sv-ui-bg0);
---sv-ui-pop-line:var(--sv-ui-line2);
---sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
 }
-/* ============================================================
+/* -------------------------------------------------------------------------- */
-Codex + MediaWiki Message banners — GLOBAL OVERRIDE (all themes)
+/* 9) Message banners */
-- One shared look for day/night/os
+/* -------------------------------------------------------------------------- */
-- Uses Codex-style colors (notice/warning/error/success)
-- White text; links in dark blue
-- Strong override (beats other CSS locations)
-============================================================ */
-/* Base (notice default) */
 :where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt):not(.cdx-message--inline){
-background:#2a2c30 !important;
+  background:#2a2c30 !important;
-border:1px solid rgba(255,255,255,0.20) !important;
+  border:1px solid rgba(255,255,255,0.20) !important;
-color:#ffffff !important;
+  color:#ffffff !important;
 }
-/* Ensure inner content inherits (links overridden below) */
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt)
-:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) :where(.cdx-message__content,.mw-message-box__content,div,p,ul,li,span,strong,bdi){
+:where(.cdx-message__content,.mw-message-box__content,div,p,ul,li,span,strong,bdi){
-color:inherit !important;
+  color:inherit !important;
 }
-/* Links */
 :where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a,
 :where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited{
-color:#2f78ff !important;
+  color:var(--color-link) !important;
-text-decoration:underline;
+  text-decoration:underline;
-text-underline-offset:2px;
+  text-underline-offset:2px;
+}
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:hover,
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited:hover{
+  color:var(--color-link--hover) !important;
 }
-/* Warning */
 :where(.cdx-message--warning,.mw-message-box-warning,.mw-warning-with-logexcerpt):not(.cdx-message--inline){
-background:#302617 !important;
+  background:#302617 !important;
-border-color:#f5b000 !important;
+  border-color:#f5b000 !important;
-color:#ffffff !important;
+  color:#ffffff !important;
 }
-/* Error */
 :where(.cdx-message--error,.mw-message-box-error):not(.cdx-message--inline){
-background:#3e1d17 !important;
+  background:#3e1d17 !important;
-border-color:#ff3b30 !important;
+  border-color:#ff3b30 !important;
-color:#ffffff !important;
+  color:#ffffff !important;
 }
-/* Success */
 :where(.cdx-message--success,.mw-message-box-success):not(.cdx-message--inline){
-background:#172d26 !important;
+  background:#172d26 !important;
-border-color:#18c37e !important;
+  border-color:#18c37e !important;
-color:#ffffff !important;
+  color:#ffffff !important;
 }
-/* Icon tint (Codex-ish) */
+.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{
-.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{ color:#f5b000 !important; }
+   color:#f5b000 !important;
-.cdx-message.cdx-message--error:not(.cdx-message--inline)   .cdx-message__icon{ color:#ff3b30 !important; }
+}
-.cdx-message.cdx-message--success:not(.cdx-message--inline) .cdx-message__icon{ color:#18c37e !important; }
-/* ============================================================
+.cdx-message.cdx-message--error:not(.cdx-message--inline) .cdx-message__icon{
-Diff highlights (history/compare) — match Codex message palette
+  color:#ff3b30 !important;
-- Added lines: match cdx-message--success
+}
-- Deleted lines: match cdx-message--error
-============================================================ */
+.cdx-message.cdx-message--success:not(.cdx-message--inline) .cdx-message__icon{
+  color:#18c37e !important;
+}
+/* -------------------------------------------------------------------------- */
+/* 10) Diff highlights */
+/* -------------------------------------------------------------------------- */
 .diff-addedline .diffchange{
-   background:#172d26 !important;   /* success bg */
+   background:#172d26 !important;
    color:#ffffff !important;
 }
 .diff-deletedline .diffchange{
-   background:#3e1d17 !important;   /* error bg */
+   background:#3e1d17 !important;
    color:#ffffff !important;
 }
-/* Links inside diff highlights */
 .diff-addedline .diffchange a,
 .diff-addedline .diffchange a:visited,
 .diff-deletedline .diffchange a,
 .diff-deletedline .diffchange a:visited{
-   color:#2f78ff !important;
+   color:var(--color-link) !important;
+}
+.diff-addedline .diffchange a:hover,
+.diff-addedline .diffchange a:visited:hover,
+.diff-deletedline .diffchange a:hover,
+.diff-deletedline .diffchange a:visited:hover{
+  color:var(--color-link--hover) !important;
+}
+/* -------------------------------------------------------------------------- */
+/* 11) Mobile glass removal */
+/* -------------------------------------------------------------------------- */
+@media (max-width:500px){
+  :root{
+    --backdrop-filter-frosted-glass:none !important;
+    --opacity-glass:1 !important;
+  }
+  body.skin-citizen .citizen-menu__card,
+  body.skin-citizen .citizen-drawer__card,
+  body.skin-citizen .citizen-search__form,
+  body.skin-citizen .citizen-search__footer{
+    background:var(--color-surface-1) !important;
+    -webkit-backdrop-filter:none !important;
+    backdrop-filter:none !important;
+  }
 }