MediaWiki:Citizen.css: Difference between revisions

(5 intermediate revisions by the same user not shown)

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~~

/* Canonical ownership map */

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

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

- ~~Night: deeper dark mode~~

/* Citizen.css is the theme/chrome layer. It owns: */

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

/* - skin tokens and color-role overrides */

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

/* - Citizen shell/chrome presentation */

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

/* - theme-aware polish for globally shared UI */

/* - global safety exceptions tied to the skin itself */

/* */

/* Citizen.css does NOT own: */

/* - module layout for GameInfo, PatchHighlights, or other feature blocks */

/* - template-local layout for Definitions, ClassInfobox, etc. */

/* - the definition of what each breakpoint means */

/* */

/* Responsive cleanup note: Citizen.css now maps its viewport-specific rules */

/* to the canonical SpiritVale six-viewpoint ladder. It should still avoid */

/* owning module/template layout behavior. */

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

/* Canonical ladder */

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

/* - default: <640px */

/* - sm: >=640px */

/* - md: >=768px */

/* - lg: >=1024px */

/* - xl: >=1280px */

/* - 2xl: >=1536px */

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

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

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);

}

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

/* 6) Search trigger */

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

.citizen-search-trigger{

transition:transform 0.15s ease-in-out;

}

.citizen-search-trigger:hover{

transform:translateY(-2px);

}

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

/* 7) Dropdown readability */

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

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 .cdx-menu,

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

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

color:#0b1a33 !important;

}

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

/* 8) Native select readability */

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

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;

}

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

/* 9) Message banners */

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

: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;

}

: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){

color:inherit !important;

}

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

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

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

text-decoration:underline;

text-underline-offset:2px;

}

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

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

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

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

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

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

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

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

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

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

}

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

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

: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;

}

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

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

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

background:#3e1d17 !important;

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

border-color:#ff3b30 !important;

.~~citizen~~-~~search-trigger~~{

color:#ffffff !important;

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

}

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

background:#172d26 !important;

border-color:#18c37e !important;

color:#ffffff !important;

}

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

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;

}

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

/* 10) Diff highlights */

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

.diff-addedline .diffchange{

background:#172d26 !important;

color:#ffffff !important;

}

.~~citizen~~-~~search-trigger~~:~~hover{~~

~~transform~~:~~translateY(-2px)~~;

.diff-deletedline .diffchange{

background:#3e1d17 !important;

color:#ffffff !important;

}

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

.diff-addedline .diffchange a,

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

.diff-addedline .diffchange a:visited,

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

.diff-deletedline .diffchange a,

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

.diff-deletedline .diffchange a:visited{

:~~root{~~

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

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

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

}

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

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

.diff-addedline .diffchange a:hover,

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

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

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

.diff-deletedline .diffchange a:hover,

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

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

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

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

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

}

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

/* 11) Default viewpoint safety (<640px) */

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

/* Mobile glass removal stays theme-owned and is mapped to the default */

/* viewpoint of the canonical ladder. */

@media (max-width:639px){

: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
+/* Canonical ownership map                                                     */
-- Day: darker “light mode” (still readable, not washed out)
+/* -------------------------------------------------------------------------- */
-- Night: deeper dark mode
+/* Citizen.css is the theme/chrome layer. It owns:                             */
-- Exports Citizen theme vars -> Common.css --sv-ui-* tokens
+/* - skin tokens and color-role overrides                                      */
-- Mobile (<=500): no frosted glass / no transparency
+/* - Citizen shell/chrome presentation                                         */
-============================================================ */
+/* - theme-aware polish for globally shared UI                                 */
+/* - global safety exceptions tied to the skin itself                          */
+/*                                                                            */
+/* Citizen.css does NOT own:                                                   */
+/* - module layout for GameInfo, PatchHighlights, or other feature blocks      */
+/* - template-local layout for Definitions, ClassInfobox, etc.                 */
+/* - the definition of what each breakpoint means                              */
+/*                                                                            */
+/* Responsive cleanup note: Citizen.css now maps its viewport-specific rules   */
+/* to the canonical SpiritVale six-viewpoint ladder. It should still avoid     */
+/* owning module/template layout behavior.                                     */
+/* -------------------------------------------------------------------------- */
+/* Canonical ladder                                                            */
+/* -------------------------------------------------------------------------- */
+/* - default: <640px                                                           */
+/* - sm:      >=640px                                                          */
+/* - md:      >=768px                                                          */
+/* - lg:      >=1024px                                                         */
+/* - xl:      >=1280px                                                         */
+/* - 2xl:     >=1536px                                                         */
+/* -------------------------------------------------------------------------- */
-/* ------------------------------------------------------------
-) 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);
+}
+/* -------------------------------------------------------------------------- */
+/* 6) Search trigger */
+/* -------------------------------------------------------------------------- */
+.citizen-search-trigger{
+  transition:transform 0.15s ease-in-out;
+}
+.citizen-search-trigger:hover{
+  transform:translateY(-2px);
+}
+/* -------------------------------------------------------------------------- */
+/* 7) Dropdown readability */
+/* -------------------------------------------------------------------------- */
+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 .cdx-menu,
+body.skin-citizen .cdx-menu-item__text,
+body.skin-citizen .cdx-menu-item__label{
+  color:#0b1a33 !important;
+}
+/* -------------------------------------------------------------------------- */
+/* 8) Native select readability */
+/* -------------------------------------------------------------------------- */
+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;
+}
+/* -------------------------------------------------------------------------- */
+/* 9) Message banners */
+/* -------------------------------------------------------------------------- */
+: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;
+}
+: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){
+  color:inherit !important;
+}
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a,
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited{
+  color:var(--color-link) !important;
+  text-decoration:underline;
+  text-underline-offset:2px;
 }
-/* ------------------------------------------------------------
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:hover,
-) Link visibility (keep obvious)
+:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited:hover{
------------------------------------------------------------- */
+  color:var(--color-link--hover) !important;
-body.skin-citizen .mw-parser-output a{
-text-decoration:underline;
-text-decoration-thickness:2px;
-text-underline-offset:2px;
 }
-body.skin-citizen .mw-parser-output a:hover{
-text-decoration-thickness:3px;
+: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;
 }
-/* ------------------------------------------------------------
+:where(.cdx-message--error,.mw-message-box-error):not(.cdx-message--inline){
-) Citizen search trigger micro-interaction
+  background:#3e1d17 !important;
------------------------------------------------------------- */
+  border-color:#ff3b30 !important;
-.citizen-search-trigger{
+  color:#ffffff !important;
-transition:transform 0.15s ease-in-out;
+}
+:where(.cdx-message--success,.mw-message-box-success):not(.cdx-message--inline){
+  background:#172d26 !important;
+  border-color:#18c37e !important;
+  color:#ffffff !important;
+}
+.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{
+  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;
+}
+/* -------------------------------------------------------------------------- */
+/* 10) Diff highlights */
+/* -------------------------------------------------------------------------- */
+.diff-addedline .diffchange{
+  background:#172d26 !important;
+  color:#ffffff !important;
 }
-.citizen-search-trigger:hover{
-transform:translateY(-2px);
+.diff-deletedline .diffchange{
+  background:#3e1d17 !important;
+  color:#ffffff !important;
 }
-/* ------------------------------------------------------------
+.diff-addedline .diffchange a,
-) Mobile hard rule: no frosted glass / no transparency (<=500)
+.diff-addedline .diffchange a:visited,
------------------------------------------------------------- */
+.diff-deletedline .diffchange a,
-@media (max-width:500px){
+.diff-deletedline .diffchange a:visited{
-:root{
+  color:var(--color-link) !important;
---backdrop-filter-frosted-glass:none !important;
---opacity-glass:1 !important;
 }
-body.skin-citizen .citizen-menu__card,
-body.skin-citizen .citizen-drawer__card,
+.diff-addedline .diffchange a:hover,
-body.skin-citizen .citizen-search__form,
+.diff-addedline .diffchange a:visited:hover,
-body.skin-citizen .citizen-search__footer{
+.diff-deletedline .diffchange a:hover,
-background:var(--color-surface-1) !important;
+.diff-deletedline .diffchange a:visited:hover{
--webkit-backdrop-filter:none !important;
+  color:var(--color-link--hover) !important;
-backdrop-filter:none !important;
 }
+/* -------------------------------------------------------------------------- */
+/* 11) Default viewpoint safety (<640px)                                      */
+/* -------------------------------------------------------------------------- */
+/* Mobile glass removal stays theme-owned and is mapped to the default        */
+/* viewpoint of the canonical ladder.                                         */
+@media (max-width:639px){
+  :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;
+  }
 }