MediaWiki:Common.css: Difference between revisions

Latest revision as of 18:09, 7 June 2026

/* ═══════════════════════════════════════════════════════
   BOINC Synergy — sitewide styles
   MediaWiki:Common.css
═══════════════════════════════════════════════════════ */

/* ── FONT ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

body, .mw-body, .mw-body-content {
    font-family: 'Inter', sans-serif;
}

/* ── CSS VARIABLES — light mode ─────────────────────── */
:root {
    /* purple ramp */
    --bs-purple-50:  #EEEDFE;
    --bs-purple-200: #AFA9EC;
    --bs-purple-400: #534AB7;
    --bs-purple-800: #3C3489;
    --bs-purple-900: #26215C;

    /* teal ramp */
    --bs-teal-50:  #E1F5EE;
    --bs-teal-200: #5DCAA5;
    --bs-teal-400: #1D9E75;
    --bs-teal-800: #085041;

    /* coral ramp */
    --bs-coral-50:  #FAECE7;
    --bs-coral-200: #F0997B;
    --bs-coral-400: #D85A30;
    --bs-coral-800: #4A1B0C;

    /* blue ramp */
    --bs-blue-50:  #E6F1FB;
    --bs-blue-200: #85B7EB;
    --bs-blue-400: #378ADD;
    --bs-blue-800: #042C53;

    /* green ramp */
    --bs-green-50:  #EAF3DE;
    --bs-green-200: #C0DD97;
    --bs-green-800: #173404;

    /* amber ramp */
    --bs-amber-50:  #FAEEDA;
    --bs-amber-200: #FAC775;
    --bs-amber-800: #412402;

    /* pink ramp */
    --bs-pink-50:  #FBEAF0;
    --bs-pink-200: #F4C0D1;
    --bs-pink-800: #4B1528;

    /* gray ramp */
    --bs-gray-50:  #F1EFE8;
    --bs-gray-200: #D3D1C7;
    --bs-gray-400: #888780;
    --bs-gray-800: #2C2C2A;
    --bs-gray-850: #444441;

    /* semantic */
    --bs-page-bg:      #ffffff;
    --bs-text-primary: #1a1a1a;
    --bs-text-muted:   #555555;

    /* link colours — light mode (darkened for contrast) */
    --bs-link:         #3730A3;   /* deep indigo */
    --bs-link-hover:   #1e1a5e;   /* near-navy */
    --bs-link-visited: #5B52B8;   /* mid-purple, distinct from unvisited */
}

/* ── CSS VARIABLES — dark mode ──────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bs-purple-50:  #1e1a3a;
        --bs-purple-200: #534AB7;
        --bs-purple-400: #AFA9EC;
        --bs-purple-800: #CECBF6;
        --bs-purple-900: #EEEDFE;

        --bs-teal-50:  #0a2a1f;
        --bs-teal-200: #0F6E56;
        --bs-teal-400: #5DCAA5;
        --bs-teal-800: #9FE1CB;

        --bs-coral-50:  #2a100a;
        --bs-coral-200: #993C1D;
        --bs-coral-400: #F0997B;
        --bs-coral-800: #F5C4B3;

        --bs-blue-50:  #091824;
        --bs-blue-200: #185FA5;
        --bs-blue-400: #85B7EB;
        --bs-blue-800: #B5D4F4;

        --bs-green-50:  #111f08;
        --bs-green-200: #3B6D11;
        --bs-green-800: #C0DD97;

        --bs-amber-50:  #1f1608;
        --bs-amber-200: #854F0B;
        --bs-amber-800: #FAC775;

        --bs-pink-50:  #200d14;
        --bs-pink-200: #72243E;
        --bs-pink-800: #F4C0D1;

        --bs-gray-50:  #1a1a18;
        --bs-gray-200: #444441;
        --bs-gray-400: #888780;
        --bs-gray-800: #D3D1C7;
        --bs-gray-850: #B4B2A9;

        --bs-page-bg:      #121212;
        --bs-text-primary: #e8e8e8;
        --bs-text-muted:   #aaaaaa;

        /* link colours — dark mode */
        --bs-link:         #AFA9EC;   /* purple-200: soft lilac, readable on dark */
        --bs-link-hover:   #CECBF6;   /* purple-800 (dark-mode): lighter on hover */
        --bs-link-visited: #7F77DD;   /* mid-purple, distinct from unvisited */
    }
}

/* ── LINKS ──────────────────────────────────────────── */
/* Scope to .mw-body-content so MediaWiki nav chrome is unaffected */
.mw-body-content a,
.mw-body-content a:link {
    color: var(--bs-link);
    text-decoration: none;
}

.mw-body-content a:visited {
    color: var(--bs-link-visited);
}

.mw-body-content a:hover,
.mw-body-content a:focus {
    color: var(--bs-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── INFOBOX — suppress phantom leading paragraphs ── */
/* Use descendant selector (space, not >) so Minerva's
   .mf-section-0 wrapper doesn't break the match        */
.mw-parser-output p:empty,
.mw-parser-output p:has(> br:only-child) {
    display: none;
    margin: 0;
    padding: 0;
}

.mw-parser-output br:first-child {
    display: none;
}

.mw-parser-output > br:first-child {
    display: none;
}

/* ══════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════ */
.bs-hero {
    border: 0.5px solid var(--bs-purple-200);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bs-purple-50) 0%, var(--bs-teal-50) 100%);
    padding: 2rem 2rem 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.bs-hero-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--bs-purple-800);
    letter-spacing: -0.5px;
    margin: 0.75rem 0 0.25rem;
}

.bs-hero-subtitle {
    font-size: 1.05rem;
    color: var(--bs-purple-400);
    margin-bottom: 1rem;
}

.bs-hero-btn {
    display: inline-block;
    border: 2px solid var(--bs-purple-400);
    border-radius: 8px;
    padding: 0.6rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    background: var(--bs-purple-50);
}

.bs-hero-note {
    font-size: 0.85rem;
    color: var(--bs-purple-400);
    margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════
   STATS RIBBON
══════════════════════════════════════════════════════ */
.bs-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.bs-stat {
    flex: 1;
    min-width: 140px;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
    border: 0.5px solid;
}

.bs-stat-number {
    font-size: 1.6rem;
    font-weight: 500;
}

.bs-stat-label {
    font-size: 0.8rem;
}

.bs-stat-purple {
    background: var(--bs-purple-50);
    border-color: var(--bs-purple-200);
}
.bs-stat-purple .bs-stat-number { color: var(--bs-purple-800); }
.bs-stat-purple .bs-stat-label  { color: var(--bs-purple-400); }

.bs-stat-teal {
    background: var(--bs-teal-50);
    border-color: var(--bs-teal-200);
}
.bs-stat-teal .bs-stat-number { color: var(--bs-teal-800); }
.bs-stat-teal .bs-stat-label  { color: var(--bs-teal-400); }

.bs-stat-coral {
    background: var(--bs-coral-50);
    border-color: var(--bs-coral-200);
}
.bs-stat-coral .bs-stat-number { color: var(--bs-coral-800); }
.bs-stat-coral .bs-stat-label  { color: var(--bs-coral-400); }

.bs-stat-blue {
    background: var(--bs-blue-50);
    border-color: var(--bs-blue-200);
}
.bs-stat-blue .bs-stat-number { color: var(--bs-blue-800); }
.bs-stat-blue .bs-stat-label  { color: var(--bs-blue-400); }

.bs-stat-pink {
    background: var(--bs-pink-50);
    border-color: var(--bs-pink-200);
}
.bs-stat-pink .bs-stat-number { color: var(--bs-pink-800); }
.bs-stat-pink .bs-stat-label  { color: var(--bs-pink-200); }

/* ══════════════════════════════════════════════════════
   QUOTE CALLOUT
══════════════════════════════════════════════════════ */
.bs-quote {
    margin: 1em 2em;
    padding: 0.5em 1em;
    border-left: 3px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
}

.bs-quote-source {
    text-align: right;
    margin-top: 0.5em;
    opacity: 0.85;
}

/* ══════════════════════════════════════════════════════
   DEFINITION CALLOUT
══════════════════════════════════════════════════════ */
.bs-definition {
    border-left: 3px solid var(--bs-purple-400);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--bs-purple-50);
    border-radius: 0 8px 8px 0;
    color: var(--bs-purple-800);
}

.bs-definition-label {
    font-size: 0.85rem;
    color: var(--bs-purple-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.5rem;
}

/* ══════════════════════════════════════════════════════
   CTA BOX
══════════════════════════════════════════════════════ */
.bs-cta {
    border: 1.5px solid var(--bs-purple-400);
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    background: var(--bs-page-bg);
}

.bs-cta-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-purple-800);
    margin-bottom: 0.4rem;
}

.bs-cta-body {
    font-size: 0.9rem;
    color: var(--bs-text-muted);
    margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════════════
   COLLAPSIBLE PROJECT GROUPS
══════════════════════════════════════════════════════ */
.bs-group {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 0.5px solid;
}

.bs-group-toggle {
    font-weight: 500;
    font-size: 1rem;
}

/* colour variants — color set on the group itself covers all untagged child text */
.bs-group-teal   { background: var(--bs-teal-50);   border-color: var(--bs-teal-200);   color: var(--bs-teal-800);   }
.bs-group-teal   .bs-group-toggle { color: var(--bs-teal-800); }

.bs-group-purple { background: var(--bs-purple-50); border-color: var(--bs-purple-200); color: var(--bs-purple-800); }
.bs-group-purple .bs-group-toggle { color: var(--bs-purple-800); }

.bs-group-blue   { background: var(--bs-blue-50);   border-color: var(--bs-blue-200);   color: var(--bs-blue-800);   }
.bs-group-blue   .bs-group-toggle { color: var(--bs-blue-800); }

.bs-group-green  { background: var(--bs-green-50);  border-color: var(--bs-green-200);  color: var(--bs-green-800);  }
.bs-group-green  .bs-group-toggle { color: var(--bs-green-800); }

.bs-group-amber  { background: var(--bs-amber-50);  border-color: var(--bs-amber-200);  color: var(--bs-amber-800);  }
.bs-group-amber  .bs-group-toggle { color: var(--bs-amber-800); }

.bs-group-coral  { background: var(--bs-coral-50);  border-color: var(--bs-coral-200);  color: var(--bs-coral-800);  }
.bs-group-coral  .bs-group-toggle { color: var(--bs-coral-800); }

.bs-group-gray   { background: var(--bs-gray-50);   border-color: var(--bs-gray-200);   color: var(--bs-gray-800);   }
.bs-group-gray   .bs-group-toggle { color: var(--bs-gray-800); }

.bs-group-pink   { background: var(--bs-pink-50);   border-color: var(--bs-pink-200);   color: var(--bs-pink-800);   }
.bs-group-pink   .bs-group-toggle { color: var(--bs-pink-800); }

/* links inside groups — use the group's own ramp so they're readable on coloured backgrounds */
.bs-group-teal   .mw-body-content a,
.bs-group-teal   .mw-body-content a:link    { color: var(--bs-teal-800); }
.bs-group-teal   .mw-body-content a:visited { color: var(--bs-teal-400); }
.bs-group-teal   .mw-body-content a:hover   { color: var(--bs-teal-800); text-decoration: underline; }

.bs-group-purple .mw-body-content a,
.bs-group-purple .mw-body-content a:link    { color: var(--bs-purple-800); }
.bs-group-purple .mw-body-content a:visited { color: var(--bs-purple-400); }
.bs-group-purple .mw-body-content a:hover   { color: var(--bs-purple-800); text-decoration: underline; }

.bs-group-blue   .mw-body-content a,
.bs-group-blue   .mw-body-content a:link    { color: var(--bs-blue-800); }
.bs-group-blue   .mw-body-content a:visited { color: var(--bs-blue-400); }
.bs-group-blue   .mw-body-content a:hover   { color: var(--bs-blue-800); text-decoration: underline; }

.bs-group-green  .mw-body-content a,
.bs-group-green  .mw-body-content a:link    { color: var(--bs-green-800); }
.bs-group-green  .mw-body-content a:visited { color: var(--bs-green-800); }  /* fixed: was --bs-green-200, near-invisible on light bg */
.bs-group-green  .mw-body-content a:hover   { color: var(--bs-green-800); text-decoration: underline; }

.bs-group-amber  .mw-body-content a,
.bs-group-amber  .mw-body-content a:link    { color: var(--bs-amber-800); }
.bs-group-amber  .mw-body-content a:visited { color: var(--bs-amber-800); }  /* fixed: was --bs-amber-200, near-invisible on light bg */
.bs-group-amber  .mw-body-content a:hover   { color: var(--bs-amber-800); text-decoration: underline; }

.bs-group-coral  .mw-body-content a,
.bs-group-coral  .mw-body-content a:link    { color: var(--bs-coral-800); }
.bs-group-coral  .mw-body-content a:visited { color: var(--bs-coral-400); }
.bs-group-coral  .mw-body-content a:hover   { color: var(--bs-coral-800); text-decoration: underline; }

.bs-group-gray   .mw-body-content a,
.bs-group-gray   .mw-body-content a:link    { color: var(--bs-gray-800); }
.bs-group-gray   .mw-body-content a:visited { color: var(--bs-gray-400); }
.bs-group-gray   .mw-body-content a:hover   { color: var(--bs-gray-800); text-decoration: underline; }

.bs-group-pink   .mw-body-content a,
.bs-group-pink   .mw-body-content a:link    { color: var(--bs-pink-800); }
.bs-group-pink   .mw-body-content a:visited { color: var(--bs-pink-800); }  /* fixed: was --bs-pink-200, near-invisible on light bg */
.bs-group-pink   .mw-body-content a:hover   { color: var(--bs-pink-800); text-decoration: underline; }

/* project list table inside groups */
.bs-project-table {
    width: 100%;
    margin-top: 0.75rem;
    border: none;
    background: transparent;
}

.bs-project-table td {
    width: 50%;
    vertical-align: top;
    padding: 0.2rem 0.5rem 0.2rem 0;
    border: none;
    background: transparent;
}

.bs-group-note {
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.bs-group-teal   .bs-group-note { color: var(--bs-teal-800); }
.bs-group-purple .bs-group-note { color: var(--bs-purple-800); }
.bs-group-amber  .bs-group-note { color: var(--bs-amber-800); }
.bs-group-gray   .bs-group-note { color: var(--bs-gray-850); }
.bs-group-pink   .bs-group-note { color: var(--bs-pink-800); }

.bs-group-footer {
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

.bs-group-amber .bs-group-footer { color: var(--bs-amber-400); }
.bs-group-gray  .bs-group-footer { color: var(--bs-gray-400);  }

/* ══════════════════════════════════════════════════════
   HOW TO PARTICIPATE CARDS
══════════════════════════════════════════════════════ */
.bs-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 1.5rem;
}

.bs-step {
    flex: 1;
    min-width: 180px;
    border-radius: 8px;
    padding: 0.9rem 1rem;
    border: 0.5px solid;
}

.bs-step-title {
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.bs-step-body {
    font-size: 0.85rem;
}

.bs-step-purple {
    background: var(--bs-purple-50);
    border-color: var(--bs-purple-200);
}
.bs-step-purple .bs-step-title { color: var(--bs-purple-800); }
.bs-step-purple .bs-step-body  { color: var(--bs-purple-400); }

.bs-step-teal {
    background: var(--bs-teal-50);
    border-color: var(--bs-teal-200);
}
.bs-step-teal .bs-step-title { color: var(--bs-teal-800); }
.bs-step-teal .bs-step-body  { color: var(--bs-teal-400); }

.bs-step-blue {
    background: var(--bs-blue-50);
    border-color: var(--bs-blue-200);
}
.bs-step-blue .bs-step-title { color: var(--bs-blue-800); }
.bs-step-blue .bs-step-body  { color: var(--bs-blue-400); }

/* ══════════════════════════════════════════════════════
   FOOTER BAR
══════════════════════════════════════════════════════ */
.bs-footer-bar {
    border-top: 0.5px solid var(--bs-gray-200);
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--bs-gray-400);
    text-align: center;
}

/* ══════════════════════════════════════════════════════
   LICENSE BOX
══════════════════════════════════════════════════════ */
.license-box {
    padding: 6px 10px;
    border: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
    color: var(--bs-text-primary);
    font-size: 0.9em;
    margin: 0.5em 0;
    border-radius: 4px;
}

.license-box-title {
    font-weight: 500;
    margin-bottom: 0.3em;
}

/* ══════════════════════════════════════════════════════
   INFOBOX — light mode base
══════════════════════════════════════════════════════ */
table.bs-infobox {
    background: #ffffff;
    color: #202122;
    border: 1px solid #c8ccd1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

table.bs-infobox th,
table.bs-infobox td {
    background: #ffffff;
    color: #202122;
    padding: 4px 8px;
    border: none;
}

.bs-infobox-title {
    background: #2c3e50 !important;
    color: #ffffff !important;
    padding: 12px !important;
    font-size: 20px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

.bs-infobox-section {
    background: #eaecf0 !important;
    color: #202122 !important;
    padding: 6px !important;
    text-align: center !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

.bs-infobox-logo,
.bs-infobox-screenshot {
    text-align: center;
    padding: 12px;
    background: #f8f9fa !important;
    color: #202122 !important;
}

.bs-infobox-caption {
    font-size: 11px;
    color: #54595d;
    margin-top: 6px;
}

/* active status — green */
tr.bs-infobox-active th,
tr.bs-infobox-active td,
th.bs-infobox-active,
td.bs-infobox-active {
    background: #d4edda !important;
    color: #155724 !important;
}

/* inactive/other status — red */
tr.bs-infobox-inactive th,
tr.bs-infobox-inactive td,
th.bs-infobox-inactive,
td.bs-infobox-inactive {
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* completed / discontinued dates */
td.bs-infobox-ended {
    color: #b32424 !important;
    font-weight: 600 !important;
}

/* stats as of — purple tint */
th.bs-infobox-statsdate,
td.bs-infobox-statsdate {
    background: #e8d5f5 !important;
    color: #4a235a !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — ARTICLE PAGES & VECTOR LEGACY CHROME
   Applies when the OS/browser is set to dark mode.
   Targets skin-vector (legacy 2010) selectors.
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    /* ── Page shell ─────────────────────────────────── */
    html,
    body {
        background-color: #1a1a18;
        color: var(--bs-text-primary);
        color-scheme: dark;
    }
/* ── Stat ribbon — pink tile ────────────────────── */
.bs-stat-pink .bs-stat-label { color: var(--bs-pink-800); }

    /* ── Article content area ───────────────────────── */
    #content,
    .mw-body,
    .mw-body-content {
        background-color: #121212;
        border-color: #333331;
    }

    /* ensure core text elements get the light colour in dark mode */
    .mw-body-content p,
    .mw-body-content li,
    .mw-body-content dt,
    .mw-body-content dd {
        color: var(--bs-text-primary);
    }

    /* headings */
    #content h1, #content h2, #content h3,
    #content h4, #content h5, #content h6 {
        color: var(--bs-purple-900);
        border-bottom-color: #333331;
    }

    /* article title */
    #firstHeading {
        color: var(--bs-purple-900);
        border-bottom-color: #333331;
    }

    /* horizontal rules, table borders */
    #content hr  { border-color: #333331; }

    /* standard wikitables */
    #content table.wikitable,
    #content table.wikitable > * > tr > th,
    #content table.wikitable > * > tr > td {
        background-color: #1e1e1c;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }
    #content table.wikitable > * > tr > th {
        background-color: #2a2a28;
        color: var(--bs-gray-800);
    }

    /* infoboxes and floated tables */
    #content table {
        color: var(--bs-text-primary);
    }

    /* code / pre blocks */
    #content pre,
    #content code {
        background-color: #1e1e1c;
        color: #c8c4e8;
        border-color: #333331;
    }

    /* blockquotes */
    #content blockquote {
        border-left-color: var(--bs-purple-200);
        color: var(--bs-text-muted);
    }

/* ── Image / thumb frames ───────────────────────── */
    .thumb, 
    div.thumb, 
    .thumbinner, 
    div.thumbinner,
    figure.mw-halign-right, 
    figure.mw-halign-left,
    figure.mw-halign-none, 
    figure.mw-halign-center,
        .mw-parser-output figure {
        border-color: #3a3a38 !important;
        /* no background — transparent PNGs show through correctly */
}
    .thumbcaption,
    figcaption {
        color: var(--bs-text-muted) !important;
        background: transparent !important;
    }

    /* ── Edit page — textarea and toolbar ───────────── */
    #wpTextbox1,
    .mw-editfont-default,
    textarea.mw-editfont-default {
        background-color: #1e1e1c;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }
    #toolbar,
    #wpSummary,
    input#wpSummary {
        background-color: #252523;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }

    /* ── License box ────────────────────────────────── */
    /* Variables auto-remap via :root dark block above;
       explicit override ensures border/bg aren't
       overridden by any #content table rule above.    */
    .license-box {
        background: var(--bs-gray-50) !important;
        border-color: var(--bs-gray-200) !important;
        color: var(--bs-text-primary) !important;
    }

    /* ── Tabs (article / talk / edit / history) ─────── */
    #p-cactions,
    div#mw-head {
        background-color: #1a1a18;
    }

    /* inactive tabs — both namespaces (article/talk) and actions (edit/history/more) */
    #p-cactions li a,
    #p-namespaces li a,
    #ca-nstab-main a,
    #ca-talk a,
    #ca-edit a,
    #ca-ve-edit a,
    #ca-viewsource a,
    #ca-history a,
    #ca-watch a,
    li.collapsible a,
    #mw-head .vectorTabs li a,
    #mw-head .vectorMenu li a {
        background-color: #252523 !important;
        color: #b0aeA6 !important;
        border-color: #333331 !important;
    }

    /* active / selected tab */
    #p-cactions li.selected a,
    #p-namespaces li.selected a,
    #mw-head .vectorTabs li.selected a {
        background-color: #121212 !important;
        color: var(--bs-purple-900) !important;
        border-bottom-color: #121212 !important;
    }

    /* tab hover */
    #p-cactions li a:hover,
    #p-namespaces li a:hover,
    #mw-head .vectorTabs li a:hover,
    #mw-head .vectorMenu li a:hover {
        background-color: #2e2e2c !important;
        color: var(--bs-purple-400) !important;
    }

    /* tab background strip */
    #mw-head-base,
    div#mw-head-base {
        background-color: #252523;
        border-bottom: 1px solid #333331;
    }

    /* ── Watchlist star ─────────────────────────────── */
    #ca-watch a,
    #ca-unwatch a,
    li#ca-watch,
    li#ca-unwatch {
        background-color: #252523 !important;
        border-color: #333331 !important;
    }

    #ca-watch img,
    #ca-unwatch img,
    #ca-watch span,
    #ca-unwatch span {
        background-color: transparent !important;
    }

    #mw-panel,
    div#mw-panel {
        background-color: #1a1a18;
    }

    /* sidebar portlet headings (Navigation, Tools, etc.) */
    #mw-panel .portal h3 {
        color: var(--bs-gray-400);
        border-bottom: 1px solid #2e2e2c;
    }

    /* sidebar links */
    #mw-panel .portal a {
        color: var(--bs-link);
    }
    #mw-panel .portal a:visited {
        color: var(--bs-link-visited);
    }
    #mw-panel .portal a:hover {
        color: var(--bs-link-hover);
        text-decoration: underline;
    }

    /* ── Top toolbar / search bar ───────────────────── */
    #mw-head {
        background-color: #1a1a18;
        border-bottom: 1px solid #2e2e2c;
    }

    /* search input */
    #searchInput,
    #searchform input[type="search"],
    #searchform input[type="text"] {
        background-color: #252523;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }
    #searchInput::placeholder {
        color: var(--bs-text-muted);
    }

    /* search button */
    #mw-searchButton,
    #searchButton {
        background-color: #252523;
        border-color: #3a3a38;
        color: var(--bs-gray-800);
    }

    /* personal tools (login, preferences, etc.) */
    #pt-login a,
    #pt-userpage a,
    #pt-preferences a,
    #pt-logout a,
    #p-personal a {
        color: var(--bs-link);
    }
    #p-personal a:hover {
        color: var(--bs-link-hover);
    }

    /* ── Site footer ────────────────────────────────── */
    #footer {
        background-color: #1a1a18;
        border-top: 1px solid #2e2e2c;
        color: var(--bs-text-muted);
    }
    #footer a       { color: var(--bs-link); }
    #footer a:hover { color: var(--bs-link-hover); }

    /* ── Miscellaneous chrome ───────────────────────── */

    /* edit notices, system messages */
    .mw-editsection a          { color: var(--bs-link); }
    .mw-editsection a:hover    { color: var(--bs-link-hover); }

    /* category links at page bottom */
    #catlinks {
        background-color: #1e1e1c;
        border-color: #333331;
        color: var(--bs-text-muted);
    }
    #catlinks a       { color: var(--bs-link); }
    #catlinks a:hover { color: var(--bs-link-hover); }

    /* TOC */
    #toc {
        background-color: #1e1e1c;
        border-color: #333331;
        color: var(--bs-text-primary);
    }
    #toc a       { color: var(--bs-link); }
    #toc a:hover { color: var(--bs-link-hover); }

    /* notification / sitenotice bar */
    #siteNotice,
    #centralNotice {
        background-color: #1e1a3a;
        border-color: var(--bs-purple-200);
        color: var(--bs-purple-900);
    }

    /* diff view */
    .diff-addedline   { background-color: #0d2b0d; color: #b8e6b8; }
    .diff-deletedline { background-color: #2b0d0d; color: #e6b8b8; }
    .diff-context     { background-color: #1e1e1c; color: var(--bs-text-muted); }

    /* ── Infobox ────────────────────────────────────── */
    table.bs-infobox {
        background: #1e1e1c !important;
        color: var(--bs-text-primary) !important;
        border-color: #3a3a38 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    }

    table.bs-infobox th,
    table.bs-infobox td {
        background: #1e1e1c !important;
        color: var(--bs-text-primary) !important;
        border-color: #2e2e2c !important;
    }

    .bs-infobox-title {
        background: #1e1a3a !important;
        color: var(--bs-purple-900) !important;
    }

    table.bs-infobox th.bs-infobox-section,
    table.bs-infobox td.bs-infobox-section {
        background: #323230 !important;
        color: var(--bs-gray-850) !important;
        border-top: 1px solid #3a3a38 !important;
        border-bottom: 1px solid #3a3a38 !important;
    }

    table.bs-infobox .bs-infobox-logo,
    table.bs-infobox .bs-infobox-screenshot {
        background: #252523 !important;
        color: var(--bs-text-primary) !important;
    }

    table.bs-infobox .bs-infobox-caption {
        color: var(--bs-text-muted) !important;
    }

    /* active status — dark green */
    table.bs-infobox tr.bs-infobox-active th,
    table.bs-infobox tr.bs-infobox-active td,
    table.bs-infobox th.bs-infobox-active,
    table.bs-infobox td.bs-infobox-active {
        background: #0d2b0d !important;
        color: #7ee8a2 !important;
    }

    /* inactive status — dark red */
    table.bs-infobox tr.bs-infobox-inactive th,
    table.bs-infobox tr.bs-infobox-inactive td,
    table.bs-infobox th.bs-infobox-inactive,
    table.bs-infobox td.bs-infobox-inactive {
        background: #2b0d0d !important;
        color: #f5a8a8 !important;
    }

    /* completed / discontinued */
    table.bs-infobox td.bs-infobox-ended {
        color: #f5a8a8 !important;
    }

    /* stats as of — pale mauve background, bright purple text */
    table.bs-infobox th.bs-infobox-statsdate,
    table.bs-infobox td.bs-infobox-statsdate {
        background: #2d2040 !important;
        color: #C4BAFF !important;
    }

} /* end @media (prefers-color-scheme: dark) */