MediaWiki:Common.css: Difference between revisions

Latest revision as of 10:35, 13 October 2026

/* =====================================================================
 * HUIJIA FUN (EN) - MediaWiki:Common.css (applies to all skins)
 * Design language: VGR Design System - v2
 *
 * v2: Main Page cards, comments and profile pages are written from scratch for this site;
 *     all pink is gone; no resources are loaded from other wikis, and no other site
 *     is named in these comments.
 *
 * Attribution:
 *   - Moegirlpedia MediaWiki:Gadget-site-styles.css (CC BY-NC-SA 3.0): spoiler blackout, info boxes
 *   - Wikipedia MediaWiki:Common.css (CC BY-SA): hlist, navbox, navbar, collapseButton
 * ===================================================================== */


/* =====================================================================
 * 1. Fonts
 * ===================================================================== */

/* Pre-Diphic Mono: the in-world language of the VGR series.
   The font file lives on huijia.fun. Browsers only load a cross-origin font when the server
   sends an Access-Control-Allow-Origin header, so /fonts/ on huijia.fun must allow
   https://en.huijia.fun (or upload the same file under en.huijia.fun/fonts/ and point here). */
@font-face {
  font-family: "Pre-Diphic Mono";
  src: url("https://huijia.fun/fonts/PreDiphicMono-1.1.woff2") format("woff2");
  font-display: swap;
}
/* !important: theme templates set fonts with !important on sidebars, headings, tables, etc.; without it .pd loses */
.pd {
  font-family: "Pre-Diphic Mono", sans-serif !important;
  font-feature-settings: "rlig" 1, "ccmp" 1 !important;
  line-height: 1;
}

/* {{PD}} vertical text: Module:PreDiphic splits the text into fixed-length columns (.pd-col);
   columns run left to right and wrap to a new row at the right edge of the content, no scrollbar */
.pd-cols {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  vertical-align: top;
  max-width: 100%;
  column-gap: 0.25em;
  row-gap: 0.75em;
}
/* Each column stays within the visible window height (minus header and margins); the
   height parameter overrides this cap. 100svh = visible height with the mobile address bar
   shown, matching the column logic in Common.js; browsers without svh fall back to 100vh. */
.pd-col {
  writing-mode: vertical-lr;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* Single vertical span (the typer page's "Copy as HTML" output): top-aligned, within window height */
.pd-v {
  writing-mode: vertical-lr;
  vertical-align: top;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* Huiwen Mincho: work titles and chapter titles (--font-display).
   The file name is percent-encoded so this file stays ASCII-only. */
@font-face {
    font-family: 'Huiwen';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93.woff2') format('woff2');
    font-display: swap;
}

/* Yuesong: line 3 of the old file was missing its opening comment mark, so this rule
   never took effect. Kept now that it is fixed; delete it once no page uses it. */
@font-face {
    font-family: 'Yuesong';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');
    font-display: swap;
}

/* Retired fonts: two hotlinked fonts (one from another wiki's file server, one from a
   Fandom image server), plus GuZhangHei and Rubik 80s Fade, which the VGR Design System
   no longer uses. If a page still needs one, upload the font file to this site first. */

/* Material Icons (Google, Apache 2.0): .md icons in info boxes, the upload page, etc.
   The loli.net mirror keeps them loading for visitors in mainland China. */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.md, .md-lg, .md-md, .md-sm, .material-icons {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    user-select: none;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.md-lg { font-size: 60px; }
.md-md { font-size: 30px; }
.md-sm { font-size: 10px; }


/* =====================================================================
 * 2. VGR tokens (site default = Archive Zone "paper" palette)
 *    Theme templates (Theme-HJ, Theme-STR, Theme-VGR...) only reset a few of these.
 * ===================================================================== */
:root {
    --paper: #F3F5F1;
    --paper-raised: #FFFFFF;
    --paper-sunk: #E7ECE5;
    --ink: #16211B;
    --ink-muted: #4C5A51;
    --rule: #C9D3CA;
    --rule-strong: #7E8B81;
    --heading-bar: #C8D8C8;
    --dot: #A3B1A8;
    --accent: #025F32;
    --accent-fill: #025F32;
    --on-accent: #FFFFFF;
    --accent-tint: #DCEBD9;
    --link: #0B6B3A;
    --link-new: #A8432F;
    --focus: #002F9C;

    --font-display: Huiwen, "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
    --font-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    --font-sans: "Source Sans 3", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --radius-xs: 2px;
    --radius-sm: 4px;

    /* Primary-color variables read by the skin and extensions: all point to Huijia Green */
    --color-primary: var(--accent);
    --color-progressive: var(--accent);
    --background-color-progressive: var(--accent-fill);
    --border-color-progressive: var(--accent);
}

html.skin-theme-clientpref-night {
    --paper: #111613;
    --paper-raised: #18201B;
    --paper-sunk: #0C100E;
    --ink: #E4EBE5;
    --ink-muted: #A2B0A6;
    --rule: #2A352E;
    --rule-strong: #667A6C;
    --heading-bar: #2F4033;
    --dot: #2A352E;
    --accent: #C1E1A6;
    --accent-fill: #3B7E3D;
    --accent-tint: #1C2B21;
    --link: #8FD3A8;
    --link-new: #F0907E;
    --focus: #8FB0FF;
}

body { accent-color: var(--accent); }


/* =====================================================================
 * 3. General utilities
 * ===================================================================== */

.mw-collapsible.mw-collapsed { max-height: none; }

p { word-break: normal; }

cite { font-style: normal; }

.res-img img { max-width: 100%; height: auto; }

/* Custom link: underline on hover */
.custom-link { text-decoration: none; color: inherit; }
.custom-link:hover { text-decoration: underline; color: var(--link); }

/* Two-column layouts
   In the old #left-column-0.3 the "." was read as a class selector, so those rules never
   matched. The escaped form below matches id="left-column-0.3" without changing any page. */
#left-column        { float: left;  width: 49%; }
#right-column       { float: right; width: 49%; }
#left-column-full   { float: left;  width: 50%; }
#right-column-full  { float: right; width: 50%; }
#middle-column-full { margin: 0 auto; width: 50%; }
#left-column-0\.3   { float: left;  width: 29%; }
#left-column-0\.7   { float: left;  width: 69%; }
#right-column-0\.3  { float: right; width: 29%; }
#right-column-0\.7  { float: right; width: 69%; }

@media screen and (max-width: 850px) {
    #left-column, #right-column,
    #left-column-full, #right-column-full, #middle-column-full,
    #left-column-0\.3, #left-column-0\.7,
    #right-column-0\.3, #right-column-0\.7,
    #user-page-left, #user-page-right {
        float: none;
        width: 100%;
    }
}

/* Main Page: hide the page title, page tabs, variant menu and category bar */
body.page-Main_Page #firstHeading,
body.page-Main_Page #siteSub,
body.page-Main_Page li#ca-talk,
body.page-Main_Page li#ca-watch,
body.page-Main_Page li#ca-unwatch,
body.page-Main_Page li#ca-history,
body.page-Main_Page li#ca-nstab-main,
body.page-Main_Page li#ca-viewsource,
body.page-Main_Page li#ca-view,
body.page-Main_Page #p-variants,
body.page-Main_Page #p-variants-desktop-label,
body.page-Main_Page #catlinks-sidebar,
body.page-Main_Page #mw-normal-catlinks { display: none !important; }

/* Scroll-to-top / bottom buttons */
img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }
img#scrollUpButton:hover { transform: scale(1.1); }
img#scrollUpButton:active { transform: scale(.95); }
img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }
img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }

/* Repost badge */
.repost-circle {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
}
.repost-circle a.external {
    background: none !important;
    padding-right: 0 !important;
    color: var(--accent) !important;
}


/* =====================================================================
 * 4. Spoiler blackout (adapted from Moegirlpedia)
 * ===================================================================== */
.heimu,
.heimu rt { background-color: #252525; }
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited { color: #252525; }
.heimu,
.heimu a,
a .heimu,
.heimu a.new { color: #252525; text-shadow: none; }
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }


/* =====================================================================
 * 5. Info boxes
 * ===================================================================== */
.infoBox {
    margin: 10px auto;
    width: 80%;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.infoBox a { word-break: normal; }
.infoBoxTitle {
    margin: 3px auto;
    padding: 6px 0 0;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
}
.infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }
.infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }
.infoBoxContent { border: 0; background: var(--paper-sunk); }
.infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }

@media screen and (max-width: 850px) {
    .infoBox { float: unset !important; width: 100% !important; clear: both; }
    .infobox { width: 100%; margin: 0 0 2em; }
}
@media screen and (min-width: 851px) {
    .infobox { width: 300px; margin: 1em 0 30px 30px; }
}

.fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.35em 1.625em 0.75em;
}

/* Upload page: info box layout fix */
.mw-special-Upload i.md { display: flex; }
.mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }


/* =====================================================================
 * 6. Tables
 * ===================================================================== */
table.wikitable {
    width: 100%;
    margin: 1em 0;
    background: var(--paper-raised);
    color: var(--ink);
    border: none;
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.95em;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    color: var(--ink);
    padding: 9px 12px;
    line-height: 1.6;
    border: none;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.wikitable > tbody > tr:last-of-type > td { border-bottom: none; }
table.wikitable > tbody > tr:hover td { background: var(--accent-tint); }

/* Light green table (old class name kept, now reads the variables) */
table.wikitable-green { background: var(--accent-tint); }
.wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }
.wikitable-green td { background: var(--paper-raised); }

@media screen and (max-width: 768px) {
    table.wikitable { display: block; overflow-x: auto; }
}


/* =====================================================================
 * 7. hlist / navbox / navbar (adapted from Wikipedia)
 * ===================================================================== */
.hlist dl, .hlist ol, .hlist ul { margin: 0; }
.hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }
.hlist dt:after { content: ": "; }
.hlist dd:after, .hlist li:after { content: " \00B7 "; font-weight: bold; }
.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }
.hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }
.hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: " ("; }
.hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: ")"; }
.hlist.hnum ol li { counter-increment: level1; }
.hlist.hnum ol li:before { content: counter(level1) " "; }
.hlist.hnum ol ol li { counter-increment: level2; }
.hlist.hnum ol ol li:before { content: counter(level2) " "; }

/* The old file defined a blue-violet navbox and then overrode it with pink; merged into one set */
.navbox {
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.navbox-inner, .navbox-subgroup { width: 100%; }
.navbox-subgroup { background: var(--paper-raised); }
.navbox-list { border-color: var(--paper-raised); }
.navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }
.navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }
th.navbox-group { white-space: nowrap; text-align: right; }
.navbox-even { background: var(--paper); }
.navbox-odd { background: transparent; }
table.navbox + table.navbox { margin-top: -1px; }
.navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,
.navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }
.navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }
.navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }
ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }

.navbar { display: inline; font-weight: normal; }
.navbar ul { display: inline; white-space: nowrap; }
.navbar li { word-spacing: -0.125em; }
.navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }
.navbox .navbar { display: block; }
.navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }

.collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }
.navbox .collapseButton { width: 8em; }

@media screen and (max-width: 850px) {
    th.navbox-group { white-space: normal; }
    th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }
}


/* =====================================================================
 * 8. Page components (VGR Design System)
 *    Usable on any page; their look is set by the "component tokens" below.
 *    The defaults here are the Archive Zone (paper) look; Theme-STR and Theme-VGR only reset these tokens,
 *    so the same markup automatically takes on each zone's look under a different theme.
 *
 *    Components:
 *      .vgr-title-block (-cn / -en / -sub / -tagline)   hub title block; pages with one hide the default title and TOC
 *      #rec-anchors / .rec-anchors                     anchor bar at the top
 *      .rec-section                                    section (only adjusts heading spacing)
 *      .rec-grid + .rec-grid-2 / .rec-grid-4            entry grid
 *      .rec-card (.rec-card-title) / .rec-link          card with description / compact link
 *      .rec-subhead                                    small label above a group of cards (not a real heading, not in the TOC)
 *      .rec-intro                                      epigraph or series introduction (Kai script, left rule)
 *      .novel-track / .novel-chap (.chap-no / -pd / -title / -desc, .chap-upcoming)   horizontal chapter track
 *      .rec-soon                                       Coming Soon placeholder
 *      .work-full                                      cover image floated right
 *    The old mini-block / mini-block-list / mini-block-title classes still work.
 * ===================================================================== */

/* ---------- 8.0 Component tokens (defaults = Archive Zone) ---------- */
:root {
    --c-radius: 0;                                   /* corners of cards, anchor buttons and the title block */
    --c-mark: "■";                                   /* zone mark: Archive ■ / Worldview ◈ / Canon ∴ */
    --c-label-font: var(--font-sans);                /* small labels (rec-subhead, chapter numbers, Coming Soon) */
    --c-label-size: 12px;
    --c-label-weight: 700;
    --c-label-spacing: 0.12em;
    --c-soon-style: normal;                          /* font style of Coming Soon (italic in the Canon Zone) */
    --c-intro-border: 3px solid var(--accent);       /* left rule of the epigraph */
    --c-title-bg: radial-gradient(var(--dot) 0px, transparent 1px) 0 0 / 20px 20px, var(--paper-sunk);
    --c-title-top: 2px solid var(--accent);          /* top rule of the title block */
    --c-title-shadow: none;                          /* title block lintel (Canon Zone only) */
    --c-title-ink: var(--ink);
    --c-title-en-ink: var(--accent);
    --c-chap-bg: var(--paper-raised);                /* chapter card background */
    --c-chap-bg-hover: var(--paper-sunk);
    --c-chap-top: 2px solid var(--accent);
    --c-chap-lintel: transparent;                    /* second thin lintel line on chapter cards (Canon Zone only) */
}

/* ---------- 8.1 Legacy class names: mini-block (still used by Main Page subtemplates; delete once everything uses rec-*) ---------- */
.mini-block {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
}
.mini-block p { margin: 0 0 1em; }
.mini-block p:last-child { margin: 0; }
.mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }
.mini-block-container ul { margin: 0; padding: 0; }
.mini-block-container li { list-style: none; margin: 0; }
.mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }
.mini-block-container li a:hover { color: var(--accent); }
.mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }
@media screen and (max-width: 850px) {
    .mini-block-container { flex-direction: column; }
}

/* ---------- 8.2 Title block: pages that have one hide the default title and TOC (screen readers still read the title)
   A title block inside .vgr-demo (examples on theme doc pages) does not trigger the hiding ---------- */
.mw-body:has(.vgr-title-block:not(.vgr-demo *)) h1.firstHeading,
#content:has(.vgr-title-block:not(.vgr-demo *)) h1.firstHeading {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0 !important; padding: 0 !important;
}
.mw-body:has(.vgr-title-block:not(.vgr-demo *)) #toc,
.mw-body:has(.vgr-title-block:not(.vgr-demo *)) .toc,
#content:has(.vgr-title-block:not(.vgr-demo *)) #toc,
#content:has(.vgr-title-block:not(.vgr-demo *)) .toc { display: none !important; }

.vgr-title-block {
    box-sizing: border-box;
    text-align: center;
    padding: 48px 16px 32px;
    margin: 0 0 24px;
    border: 1px solid var(--rule);
    border-top: var(--c-title-top);
    border-radius: var(--c-radius);
    box-shadow: var(--c-title-shadow);
    background: var(--c-title-bg);
}
.vgr-title-cn {
    font-family: var(--font-display);
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: var(--c-title-ink);
    margin-bottom: 0.3em;
    text-wrap: balance;
}
.vgr-title-en {
    font-family: var(--font-latin, "Cormorant Garamond"), "Noto Serif SC", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-title-en-ink);
    margin-bottom: 1em;
}
.vgr-title-sub {
    font-family: var(--font-body, var(--font-serif));
    font-size: 16px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.vgr-title-sub a:not(.new) {
    color: var(--link) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--rule-strong);
}
.vgr-title-sub a:not(.new):hover { border-bottom-color: var(--link); }
.vgr-title-sub i { font-style: italic; color: var(--ink); }
.vgr-title-tagline {
    font-family: var(--font-scripture, "LXGW WenKai Screen", KaiTi, serif);
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    max-width: 36em;
    margin: 24px auto 0;
}
/* Divider: "— zone mark —" */
.vgr-title-tagline::before {
    content: var(--c-mark);
    display: block;
    width: 12em;
    margin: 0 auto 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    background:
        linear-gradient(var(--rule-strong), var(--rule-strong)) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(var(--rule-strong), var(--rule-strong)) right center / calc(50% - 16px) 1px no-repeat;
}

/* ---------- 8.3 Anchor bar ---------- */
#rec-anchors, .rec-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 16px 0 32px;
}
/* MediaWiki wraps the lines of links in a <p>; take that layer out of layout so the gap applies to each link */
#rec-anchors > p, .rec-anchors > p { display: contents; }
#rec-anchors a, .rec-anchors a {
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--c-radius);
    color: var(--ink) !important;
    font-family: var(--font-body, var(--font-serif));
    font-size: 15px;
    letter-spacing: 0.06em;
    text-decoration: none !important;
    background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#rec-anchors a:hover, .rec-anchors a:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
}

/* ---------- 8.4 Sections: since MediaWiki 1.43 headings are wrapped in .mw-heading, so both structures are covered ---------- */
.rec-section > h2,
.rec-section > .mw-heading2 { margin-top: 48px !important; }

/* ---------- 8.5 Entry grid and cards ---------- */
.rec-grid,
.rec-grid.mini-block-list,
.rec-grid.mini-block-container {
    display: grid;
    gap: 12px;
    margin: 0.8em 0 1.2em;
}
.rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media screen and (max-width: 850px) {
    .rec-grid-2 { grid-template-columns: 1fr; }
    .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card with description: one line on the left. Selectors include .mini-block to beat the legacy styles above */
.rec-card,
.mini-block.rec-card {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0 8px 14px;
    background: none;
    border: none;
    border-left: 2px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
.rec-card:hover { border-left-color: var(--accent); }
.rec-card-title,
.rec-card .mini-block-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.rec-card-title a:not(.new),
.rec-card .mini-block-title a:not(.new) { color: var(--ink) !important; }
.rec-card-title a:not(.new):hover,
.rec-card .mini-block-title a:not(.new):hover { color: var(--accent) !important; }
/* Themes color body text through #mw-content p, so this needs the same specificity to turn muted */
.rec-card, .rec-card p,
#mw-content .rec-card, #mw-content .rec-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-muted);
}
.rec-card p { margin: 0; }

/* Compact link */
.rec-link,
.mini-block.rec-link {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 7px 0 7px 14px;
    background: none;
    border: none;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
.rec-link a:not(.new) { color: var(--ink) !important; }
.rec-link:hover { border-left-color: var(--accent); }
.rec-link p, .rec-card .mini-block-title + p { margin: 0; }

/* ---------- 8.6 Small labels and epigraphs ---------- */
.rec-subhead {
    font-family: var(--c-label-font);
    font-size: var(--c-label-size);
    font-weight: var(--c-label-weight);
    letter-spacing: var(--c-label-spacing);
    text-transform: uppercase;
    color: var(--accent);
    margin: 24px 0 8px;
}
.rec-intro,
#mw-content .rec-intro {
    font-family: var(--font-scripture, "LXGW WenKai Screen", KaiTi, serif);
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink);
    text-align: left;
    margin: 8px 0 24px;
    padding: 4px 0 4px 16px;
    border-left: var(--c-intro-border);
}

/* ---------- 8.7 Horizontal chapter track ---------- */
.novel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--rule-strong) var(--paper-sunk);
}
.novel-track::-webkit-scrollbar { height: 6px; }
.novel-track::-webkit-scrollbar-track { background: var(--paper-sunk); }
.novel-track::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.novel-track::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Chapter card: the background and the lintel gap share --c-chap-bg and change together on hover, so no seam shows between the lines */
.novel-chap {
    --chap-bg: var(--c-chap-bg);
    flex: 0 0 232px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px;
    background: var(--chap-bg);
    border: 1px solid var(--rule);
    border-top: var(--c-chap-top);
    border-radius: var(--c-radius);
    box-shadow:
        inset 0 4px 0 var(--chap-bg),
        inset 0 5px 0 var(--c-chap-lintel);
    transition: border-color 0.2s ease;
}
.novel-chap:hover {
    --chap-bg: var(--c-chap-bg-hover);
    border-color: var(--rule-strong);
    border-top-color: var(--accent);
}
.novel-chap .chap-no {
    font-family: var(--c-label-font);
    font-size: var(--c-label-size);
    font-weight: var(--c-label-weight);
    letter-spacing: var(--c-label-spacing);
    color: var(--accent);
    margin: 4px 0 6px;
}
.novel-chap .chap-pd {
    font-family: var(--font-latin, "Cormorant Garamond"), "Noto Serif SC", serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-muted);
}
.novel-chap .chap-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 2px 0 8px;
}
.novel-chap .chap-title a:not(.new) { color: var(--ink) !important; }
.novel-chap .chap-title a:not(.new):hover { color: var(--accent) !important; }
.novel-chap .chap-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-muted);
}
.novel-chap.chap-upcoming,
.novel-chap.chap-upcoming:hover {
    border: 1px dashed var(--rule-strong);
    box-shadow: none;
    background: transparent;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--ink-muted);
}

/* ---------- 8.8 Coming Soon placeholder: zone mark above ---------- */
.rec-soon {
    border: 1px dashed var(--rule-strong);
    border-radius: var(--c-radius);
    font-family: var(--c-label-font);
    font-style: var(--c-soon-style);
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 28px;
    text-align: center;
    color: var(--ink-muted);
}
.rec-soon::before {
    content: var(--c-mark);
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 8px;
}

/* ---------- 8.9 Cover image floated right ---------- */
.work-full { overflow: hidden; }
.work-full #image { float: right; width: 200px; margin: 0 0 10px 16px; }

/* ---------- 8.10 Phones (≤850px) ---------- */
@media screen and (max-width: 850px) {
    .vgr-title-block { padding: 32px 12px 24px; }
    .vgr-title-en { font-size: 15px; letter-spacing: 0.16em; }
    .novel-chap { flex-basis: 78%; }
    .work-full #image { float: none; width: 100%; max-width: 280px; margin: 0 0 12px; }
}


/* =====================================================================
 * 9. Forms, notifications, profile pages
 * ===================================================================== */
textarea {
    border-radius: var(--radius-sm);
    box-shadow: none;
    background-color: transparent;
    border: 1px solid var(--rule-strong);
    outline: none;
}
textarea:hover { border-color: var(--accent); }
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus);
}

.mw-notification {
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);
}

.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}

/* Profile pages (SocialProfile): colors and shapes only; layout is left to the extension */
.profile-tab-on { border-bottom: 2px solid var(--accent); }
.profile-tab a, .profile-tab-on a { color: var(--ink) !important; }
#profile-toggle-button {
    background-color: var(--accent-fill);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
}
#profile-toggle-button a { color: var(--on-accent); }
#profile-toggle-button:hover { background-color: #3B7E3D; }
.profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }
#profile-image img,
.c-avatar img,
.profile-info img { border-radius: 50%; }


/* =====================================================================
 * 10. Comments (FlowThread): site colors only; layout is left to the extension
 * ===================================================================== */
#flowthread .comment-submit {
    color: var(--on-accent);
    background-color: var(--accent-fill);
    border: 0;
    text-shadow: none;
}
#flowthread .comment-submit:hover { background-color: #3B7E3D; }
#flowthread .comment-toolbar {
    background-color: var(--paper-sunk);
    border-color: var(--rule);
}
#flowthread .comment-replybox > .comment-body { border-color: var(--rule-strong); }
#flowthread .comment-user,
#flowthread .comment-user a { color: var(--ink-muted); }
#flowthread .comment-like[liked],
#flowthread .comment-report[reported] { color: var(--accent); }


/* =====================================================================
 * 11. Notice box {{Notice}}: .vgr-notice
 *     All colors read the theme variables, so it works under Theme-HJ / Theme-STR / Theme-VGR.
 *     Default = zone color; is-warning = pending / warning; is-danger = spoiler / error.
 *     There is always a text label on the left, so color is never the only signal.
 * ===================================================================== */
.vgr-notice {
    --notice-c: var(--zone-accent, var(--accent));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 1em 0;
    padding: 12px 16px;
    background: var(--paper-sunk);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--notice-c);
    border-radius: 0;
}
/* Amber: mixed with the current text color, so it darkens on light themes and lightens on dark ones */
.vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }
/* Red: each theme's red-link color */
.vgr-notice.is-danger { --notice-c: var(--link-new); }

.vgr-notice-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 3em;
    padding-top: 3px;
}
.vgr-notice-tag {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--notice-c);
}
.vgr-notice-icon { line-height: 1; color: var(--notice-c); }
.vgr-notice-icon .md,
.vgr-notice-icon .md-lg,
.vgr-notice-icon .md-md,
.vgr-notice-icon .material-icons { font-size: 26px; }
.vgr-notice-icon img { max-width: 32px; height: auto; }

.vgr-notice-main { min-width: 0; }
.vgr-notice-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
}
#mw-content .vgr-notice-body,
#mw-content .vgr-notice-body p,
.vgr-notice-body,
.vgr-notice-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-muted);
}
.vgr-notice-body > p + p { margin-top: 0.5em; }
.vgr-notice-below {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-muted);
}


/* =====================================================================
 * 12. Infobox {{Infobox}}: .vgr-infobox
 *     The fact table on the right of an article. All colors read the theme variables;
 *     square corners, no shadow; full width on phones.
 * ===================================================================== */
table.vgr-infobox {
    float: right;
    clear: right;
    width: 300px;
    margin: 0 0 1em 1.5em;
    border-collapse: collapse;
    background: var(--paper-raised);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--zone-accent, var(--accent));
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
}
table.vgr-infobox th.vgr-infobox-title {
    padding: 10px 12px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: var(--accent-tint);
}
table.vgr-infobox .vgr-infobox-media td {
    padding: 12px;
    text-align: center;
}
table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }
.vgr-infobox-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-muted);
}
table.vgr-infobox th[scope="row"] {
    width: 5.5em;
    padding: 7px 8px 7px 12px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    background: transparent;
    border-top: 1px solid var(--rule);
}
table.vgr-infobox td {
    padding: 7px 12px 7px 8px;
    vertical-align: top;
    border-top: 1px solid var(--rule);
}
table.vgr-infobox .vgr-infobox-media td { border-top: none; }
table.vgr-infobox td p { margin: 0; }
/* {{Infobox2}}: group subheadings */
table.vgr-infobox .vgr-infobox-group th {
    padding: 6px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--zone-accent, var(--accent));
    background: var(--paper-sunk);
    border-top: 1px solid var(--rule);
}
@media screen and (max-width: 850px) {
    table.vgr-infobox {
        float: none;
        width: 100%;
        margin: 0 0 1.5em;
    }
}


/* =====================================================================
 * 13. Click-to-load video and audio (video and audio widgets): .vgr-media
 *     Before the click there is only a button and no request is made; the player is created on click.
 * ===================================================================== */
.vgr-media-load {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--on-accent);
    background: var(--accent-fill);
    border: none;
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.vgr-media-load:hover { background: #3B7E3D; }
.vgr-media-load:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Play triangle drawn with borders, no icon font needed */
.vgr-media-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

/* Video: holds a 16:9 slot before loading; after loading it uses the video's own ratio */
.vgr-media-video {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1em;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
}
.vgr-media-video.is-loaded {
    display: block;
    aspect-ratio: auto;
    background: #000;
    border: none;
}
.vgr-media-video video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
}

/* Audio: small inline button; a caption can follow it directly */
.vgr-media-audio {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    margin: 4px 8px 4px 0;
}
.vgr-media-audio .vgr-media-load {
    padding: 5px 12px;
    font-size: 13px;
}
.vgr-media-audio .vgr-media-icon { border-width: 5px 0 5px 8px; }
.vgr-media-audio audio {
    height: 36px;
    max-width: 100%;
}