MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:05, 6 November 2026

/* Bconomy Wiki: Classic and After Dark.
 * Palettes: packages/state/src/schemas/theme.ts and gamedata/themes.ts.
 * Classic is the default; After Dark is selected manually.
 * Screen only: printed articles retain the skin's normal print styling.
 */
@media screen {
  /* Google Fonts CDN URLs are independent of game builds and wiki hostname. */
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcraVGwCKd6xB.woff2") format("woff2");
  }
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPxWnVaFrNlJz.woff2") format("woff2");
  }
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaFrNlJz.woff2") format("woff2");
  }
  html:root {
    --bc-font: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bc-page: #000c25;
    --bc-surface: #272b48;
    --bc-raised: #35345a;
    --bc-text: #f5f5ff;
    --bc-muted: #b8b7c9;
    --bc-border: #504e6d;
    --bc-accent: #17006b;
    --bc-primary: #0059ff;
    /* Lighter blue keeps text links readable on Classic surfaces. */
    --bc-link: #9cbdff;
    --bc-link-hover: #c4d8ff;
    --bc-visited: #c8b4ff;
    --bc-selected: #2d3d6f;
    --bc-info: #123d51;
    --bc-success: #123d31;
    --bc-warning: #493a20;
    --bc-error: #492133;
  }

  html:root.skin-theme-clientpref-night {
    --bc-page: #090b12;
    --bc-surface: #161a25;
    --bc-raised: #252a38;
    --bc-text: #f8f7ff;
    --bc-muted: #b7b4c8;
    --bc-border: #3c4254;
    --bc-accent: #5c1fbc;
    --bc-primary: #5c1fbc;
    --bc-link: #c084fc;
    --bc-link-hover: #deb8ff;
    --bc-visited: #b9a5d8;
    --bc-selected: #252a38;
    --bc-info: #102f3c;
    --bc-success: #103728;
    --bc-warning: #42321c;
    --bc-error: #3e1b2a;
  }
}

@media screen {
  /* Higher specificity than the skin's day/night token definitions. */
  html:root:root {
    color-scheme: dark;
    --color-base: var(--bc-text);
    --color-base-fixed: var(--bc-text);
    --color-base--hover: var(--bc-text);
    --color-emphasized: var(--bc-text);
    --color-subtle: var(--bc-muted);
    --color-neutral: var(--bc-text);
    --color-base--subtle: var(--bc-muted);
    --color-placeholder: var(--bc-muted);
    --color-disabled: var(--bc-muted);
    --color-inverted: #ffffff;
    --color-inverted-fixed: #ffffff;
    --color-progressive: var(--bc-link);
    --color-progressive--hover: var(--bc-link-hover);
    --color-progressive--active: var(--bc-link-hover);
    --color-progressive--focus: var(--bc-link);
    --color-link: var(--bc-link);
    --color-link--hover: var(--bc-link-hover);
    --color-link--active: var(--bc-link-hover);
    --color-link--focus: var(--bc-link);
    --color-link--visited: var(--bc-visited);
    --color-link--visited--hover: var(--bc-link-hover);
    --color-visited: var(--bc-visited);
    --color-visited--active: var(--bc-link-hover);
    --color-destructive: #ff9aac;
    --color-destructive--hover: #ffc0cb;
    --color-destructive--active: #ffc0cb;
    --color-link-red: #ff9aac;
    --color-link-red--hover: #ffc0cb;
    --color-link-red--active: #ffc0cb;
    --color-link-red--visited: #e7a1b7;
    --color-link-red--visited--hover: #ffc0cb;
    --color-error: #ff9aac;
    --color-warning: #ffd38b;
    --color-success: #8ce0b6;
    --background-color-base: var(--bc-surface);
    --background-color-base-fixed: var(--bc-surface);
    --background-color-neutral: var(--bc-raised);
    --background-color-neutral-subtle: var(--bc-page);
    --background-color-interactive: var(--bc-raised);
    --background-color-interactive--hover: var(--bc-selected);
    --background-color-interactive--active: var(--bc-selected);
    --background-color-interactive-subtle: var(--bc-surface);
    --background-color-interactive-subtle--hover: var(--bc-raised);
    --background-color-interactive-subtle--active: var(--bc-selected);
    --background-color-progressive: var(--bc-primary);
    --background-color-progressive--hover: var(--bc-accent);
    --background-color-progressive--active: var(--bc-accent);
    --background-color-progressive--focus: var(--bc-primary);
    --background-color-progressive-subtle: var(--bc-selected);
    --background-color-progressive-subtle--hover: var(--bc-raised);
    --background-color-progressive-subtle--active: var(--bc-selected);
    --background-color-notice-subtle: var(--bc-raised);
    --background-color-warning-subtle: var(--bc-warning);
    --background-color-error-subtle: var(--bc-error);
    --background-color-destructive-subtle: var(--bc-error);
    --background-color-success-subtle: var(--bc-success);
    --background-color-disabled: var(--bc-raised);
    --background-color-disabled-subtle: var(--bc-surface);
    --background-color-button-quiet--hover: var(--bc-raised);
    --background-color-button-quiet--active: var(--bc-selected);
    --border-color-base: var(--bc-border);
    --border-color-subtle: var(--bc-border);
    --border-color-muted: var(--bc-border);
    --border-color-divider: var(--bc-border);
    --border-color-emphasized: var(--bc-muted);
    --border-color-interactive: var(--bc-border);
    --border-color-interactive--hover: var(--bc-link);
    --border-color-interactive--active: var(--bc-link);
    --border-color-input: var(--bc-border);
    --border-color-input--hover: var(--bc-link);
    --border-color-input-binary: var(--bc-muted);
    --border-color-input-binary--checked: var(--bc-link);
    --border-color-input-binary--hover: var(--bc-link-hover);
    --border-color-input-binary--active: var(--bc-link-hover);
    --border-color-progressive: var(--bc-link);
    --border-color-progressive--hover: var(--bc-link-hover);
    --border-color-progressive--active: var(--bc-link-hover);
    --box-shadow-color-progressive--focus: var(--bc-link);
    --box-shadow-color-inverted: var(--bc-page);
    --filter-invert-icon: 1;
    --font-family-base: var(--bc-font);
    --font-family-heading: var(--bc-font);
    background-color: var(--bc-page);
    color: var(--bc-text);
    accent-color: var(--bc-link);
  }

  /* Classic uses dark surfaces while retaining MediaWiki's day preference.
     Match the native night-mode icon treatment, preserving semantic colors,
     pre-inverted icons and checkbox ticks. After Dark uses the native rule. */
  html.skin-theme-clientpref-day .skin-invert-image img,
  html.skin-theme-clientpref-day .skin-invert,
  html.skin-theme-clientpref-day .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert),
  html.skin-theme-clientpref-day .oo-ui-indicatorElement-indicator {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Older anonymous Automatic cookies use Classic, independent of the device. */
  html.skin-theme-clientpref-os .skin-invert-image img,
  html.skin-theme-clientpref-os .skin-invert,
  html.skin-theme-clientpref-os .oo-ui-iconElement-icon:not(.oo-ui-image-progressive):not(.oo-ui-image-destructive):not(.oo-ui-checkboxInputWidget-checkIcon):not(.oo-ui-image-invert):not(.mw-no-invert),
  html.skin-theme-clientpref-os .oo-ui-indicatorElement-indicator {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Section editing controls are reserved for signed-in readers. */
  body.bc-anonymous .mw-editsection { display: none; }

  /* Keep the two manual palettes and omit the skin's beta annotation. */
  #skin-client-prefs-skin-theme .cdx-radio:has(input[value="os"]),
  #skin-client-prefs-skin-theme .vector-menu-heading > span {
    display: none;
  }

  body, .mw-page-container, .vector-header-container,
  body .vector-header, body .vector-sticky-header, .vector-column-start,
  .vector-column-end, .mw-footer, .vector-main-menu-container,
  .vector-sticky-pinned-container {
    background-color: var(--bc-page);
    color: var(--bc-text);
  }

  .mw-body {
    background-color: var(--bc-page);
    color: var(--bc-text);
  }

  /* MediaWiki also gives its empty popup portal the vector-body class.
     Apply panel geometry only to article content inside the main element. */
  .mw-body > .vector-body {
    align-self: start;
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--bc-surface);
    color: var(--bc-text);
    border: 1px solid var(--bc-border);
    border-top: 3px solid var(--bc-primary);
    border-radius: 10px;
    padding: 10px 16px 16px;
    line-height: 1.7;
    box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
  }
  /* The Main Page retains its original top inset. */
  .page-Main_Page .mw-body > .vector-body {
    padding-top: 20px;
  }

  body, body .mw-body h1, body .mw-body h2, body .mw-body h3,
  body .mw-body .mw-heading, body .vector-body {
    font-family: var(--bc-font);
  }
  body .vector-header {
    min-height: 64px;
    border-bottom: 1px solid var(--bc-border);
  }
  /* Match the app menu's 35px icon, 110px wordmark, 7px gap and 3px top offset.
     A shared unit keeps both images and their spacing proportional on phones. */
  body .vector-header { flex-wrap: nowrap; }
  .vector-header:not(.vector-header-search-toggled) .vector-header-end { flex-shrink: 0; }
  .vector-header-search-toggled .vector-header-end,
  .vector-header-search-toggled .vector-search-box,
  .vector-header-search-toggled .cdx-search-input__input-wrapper,
  .vector-header-search-toggled .cdx-text-input { min-width: 0; }
  .vector-header .vector-header-start { min-width: 0; }
  .vector-header-start > .vector-main-menu-landmark { flex-shrink: 0; }
  .mw-logo {
    --bc-brand-unit: 1px;
    display: inline-flex;
    align-items: center;
    gap: calc(7 * var(--bc-brand-unit));
    height: 48px;
    width: calc(152 * var(--bc-brand-unit));
    min-width: calc(35 * var(--bc-brand-unit));
    flex: 0 1 auto;
    container: bc-header-brand / inline-size;
    color: var(--bc-text);
    white-space: nowrap;
  }
  .mw-logo::before {
    content: "";
    display: block;
    width: calc(35 * var(--bc-brand-unit));
    height: calc(35 * var(--bc-brand-unit));
    flex: 0 0 calc(35 * var(--bc-brand-unit));
    background: url("https://assets.bconomy.net/brand/outlinethin.webp") center / contain no-repeat;
  }
  .mw-logo .mw-logo-container {
    display: block;
    width: calc(110 * var(--bc-brand-unit));
    max-width: none;
    flex: none;
    /* Center alignment accounts for the wordmark's taller 3:1 canvas. */
    transform: translateY(calc(3.833333 * var(--bc-brand-unit)));
  }
  .mw-logo .mw-logo-container::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    background: url("https://assets.bconomy.net/brand/wordmark.webp") center / contain no-repeat;
    filter: invert(1);
  }
  /* Keep the native home link's full name available to assistive technology. */
  .mw-logo strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body .mw-logo, body .mw-logo:visited { color: var(--bc-text); }
  /* Both themes use dark headers; invert only the black wordmark, once. */
  body .mw-logo .skin-invert { filter: none; }
  .vector-header .cdx-text-input__input { border-radius: 6px 0 0 6px; }
  .vector-header .cdx-search-input__end-button { border-radius: 0 6px 6px 0; }

  /* Undo both halves of Vector's optical TOC offset for boxed sidebars. */
  .skin-vector-2022 .vector-column-start,
  .vector-column-start .vector-main-menu-container { margin-inline: 0; }
  .vector-sticky-pinned-container::after { display: none; }
  .vector-header .vector-menu-content { background-color: transparent; }

  /* Align the menu button and brand with the header's left edge. */
  @media (min-width: 1120px) {
    body .vector-header .vector-header-start { justify-content: flex-start; }
  }

  /* Boxed sidebars align with the title instead of Vector's toolbar offset. */
  @media (min-width: 1120px) {
    .skin-vector-2022 .vector-column-start,
    .skin-vector-2022 .vector-column-end {
      margin-top: 0;
      border-top: 0;
    }
    .skin-vector-2022 .vector-page-titlebar { padding-top: 0; }
  }

  /* Keep native pinning and scrolling, with equal panel sizing and spacing. */
  body .vector-pinned-container {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 16px;
    background-color: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  body .vector-pinned-container .vector-pinnable-element,
  body .vector-pinned-container .vector-menu-content {
    background-color: transparent;
  }
  .vector-pinned-container .vector-pinnable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0 0 10px;
  }
  .vector-pinned-container .vector-pinnable-header-label { min-width: 0; }
  .vector-pinned-container .vector-pinnable-header-toggle-button { flex-shrink: 0; }
  .vector-main-menu .mw-list-item a,
  .vector-page-tools .mw-list-item a,
  .vector-toc .vector-toc-link,
  .bc-section-panel li > a,
  .bc-section-panel li > span {
    border-radius: 5px;
    padding: 6px 8px;
    line-height: 1.4;
  }
  /* Fill every row; only nested labels receive hierarchy indentation.
     Put collapse buttons at the end so all top-level labels align. */
  .skin-vector-2022 .vector-toc .vector-toc-contents,
  .skin-vector-2022 .vector-toc .vector-toc-list,
  .skin-vector-2022 .vector-toc .vector-toc-list-item {
    margin-inline: 0;
    padding-inline: 0;
  }
  .skin-vector-2022 .vector-toc .vector-toc-list-item { --bc-toc-indent: 0px; }
  .skin-vector-2022 .vector-toc .vector-toc-level-2 { --bc-toc-indent: 12px; }
  .skin-vector-2022 .vector-toc .vector-toc-level-3 { --bc-toc-indent: 24px; }
  .skin-vector-2022 .vector-toc .vector-toc-level-4 { --bc-toc-indent: 36px; }
  .skin-vector-2022 .vector-toc .vector-toc-level-5 { --bc-toc-indent: 48px; }
  .skin-vector-2022 .vector-toc .vector-toc-level-6 { --bc-toc-indent: 60px; }
  .skin-vector-2022 .vector-toc .vector-toc-link {
    box-sizing: border-box;
    width: 100%;
    padding-inline-start: calc(8px + var(--bc-toc-indent));
  }
  .skin-vector-2022 .vector-toc .vector-toc-list-item:has(> .vector-toc-toggle) > .vector-toc-link {
    padding-inline-end: 32px;
  }
  .skin-vector-2022 .vector-toc .vector-toc-link .vector-toc-text {
    width: auto;
    padding: 0;
  }
  .skin-vector-2022 .vector-toc .vector-toc-toggle {
    top: 5px;
    left: auto;
    right: auto;
    inset-inline-end: 2px;
  }

  .vector-main-menu .mw-list-item a:hover,
  .vector-page-tools .mw-list-item a:hover,
  .vector-toc .vector-toc-link:hover,
  .vector-toc .vector-toc-list-item-active > .vector-toc-link,
  .bc-section-panel li > a:hover,
  .bc-section-panel li > a:focus-visible,
  .bc-section-panel .bc-section-current > a {
    background-color: var(--bc-selected);
    color: var(--bc-text);
    text-decoration: none;
  }
  .vector-main-menu .mw-list-item a,
  .vector-page-tools .mw-list-item a { display: block; }
  .vector-pinnable-header-label { font-weight: 600; }
  .vector-page-titlebar { padding: 10px 0 12px; }
  .mw-body h1 { letter-spacing: -.6px; }
  .mw-body h2 { padding-bottom: .35em; font-weight: 400; }
  .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { font-weight: 400; }
  /* The heading wrapper owns vertical spacing in modern MediaWiki. */
  .mw-body .mw-heading h2, .mw-body .mw-heading h3 { margin-block: 0; }
  /* The article card supplies the outer inset; empty subtitles add no gap. */
  .mw-body > .vector-body > #contentSub:has(> #mw-content-subtitle:only-child:empty) { margin-top: 0; }
  .mw-body > .vector-body > #mw-content-text { margin-top: 0; }
  .mw-body .mw-parser-output > :first-child,
  .mw-body .mw-parser-output > :nth-child(1 of :not(style, link, meta, .bc-infobox, .bc-section-nav--moved)) {
    margin-block-start: 0;
  }
  /* Trim the first heading's native padding and optically offset its font leading. */
  .mw-body .mw-parser-output > .mw-heading:first-child {
    padding-block-start: 0;
    margin-block-start: -.4em;
  }
  /* Final block and thumbnail margins must not add to the card's bottom inset. */
  .mw-body .mw-parser-output > :last-child { margin-block-end: 0; }
  .vector-sticky-header-context-bar,
  .vector-sticky-header-context-bar-primary { font-family: var(--bc-font); }
  .mw-editsection { font-size: 12px; font-weight: 400; }
  .vector-page-toolbar { margin-bottom: 12px; }
  .vector-dropdown-content { border: 1px solid var(--bc-border); border-radius: 8px; }
  .vector-dropdown-content .vector-menu-content { border-radius: 8px; }

  body .cdx-button:not(.cdx-button--action-progressive):not(.cdx-button--action-destructive) {
    color: var(--bc-text);
  }
  body .cdx-button--weight-normal:not(.cdx-button--action-progressive),
  body .cdx-search-input__end-button {
    background-color: var(--bc-raised);
    border-color: var(--bc-border);
  }
  .mw-ui-button, .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
    border-radius: 6px;
  }
  .mw-ui-progressive, .oo-ui-flaggedElement-progressive.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
    background-color: var(--bc-primary);
    border-color: var(--bc-primary);
    color: #fff;
  }
  .wikitable { font-size: .95em; }
  .wikitable th, .wikitable td { padding: .65em .85em; }
  .wikitable > tbody > tr:nth-child(even) > td { background-color: var(--bc-surface); }
  figure[typeof~="mw:File/Thumb"], .mw-parser-output .thumbinner {
    box-sizing: border-box;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  figure[typeof~="mw:File/Thumb"] > figcaption { padding: 12px 16px; color: var(--bc-muted); }
  .catlinks { padding: 12px 16px; border-radius: 6px; margin-top: 24px; }
  /* {{Guide link}} footer: same box as the category links below it. */
  .mw-parser-output .bc-guide-link {
    padding: 12px 16px;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
    margin-top: 24px;
    background-color: var(--bc-raised);
    color: var(--bc-text);
  }
/* Section trees ({{… sidebar}}): in-page box, moved into the sidebar by MediaWiki:Common.js. */
.mw-parser-output .bc-section-nav {
  float: right;
  clear: right;
  width: 220px;
  margin: 0 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  background-color: var(--bc-raised);
  color: var(--bc-text);
}
.mw-parser-output .bc-section-nav-title {
  font-weight: bold;
}
.mw-parser-output .bc-section-nav ul {
  margin: 4px 0 0 1em;
}
@media (max-width: 640px) {
  .mw-parser-output .bc-section-nav {
    float: none;
    width: auto;
    margin: 0 0 16px;
  }
}
@media (min-width: 1120px) {
  .mw-parser-output .bc-section-nav--moved {
    display: none;
  }
}
  /* Section links share the Contents row geometry and full-width highlights. */
  .bc-section-panel { font-size: 0.875rem; line-height: 1.6; }
  .bc-section-panel > ul { margin: 0; padding: 0; list-style: none; }
  .bc-section-panel li { --bc-section-indent: 0px; margin: 0; padding: 0; }
  .bc-section-panel .bc-section-depth-2 { --bc-section-indent: 12px; }
  .bc-section-panel .bc-section-depth-3 { --bc-section-indent: 24px; }
  .bc-section-panel .bc-section-depth-4 { --bc-section-indent: 36px; }
  .bc-section-panel .bc-section-depth-5 { --bc-section-indent: 48px; }
  .bc-section-panel .bc-section-depth-6 { --bc-section-indent: 60px; }
  .bc-section-panel li > a,
  .bc-section-panel li > span {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding-inline-start: calc(8px + var(--bc-section-indent));
  }
  .bc-section-panel .vector-pinnable-header-label a { color: inherit; }
  .bc-section-panel .bc-section-current > a,
  .bc-section-panel .vector-pinnable-header-label.bc-section-current a { font-weight: bold; color: var(--bc-text); }
  .bc-section-panel .bc-section-label > span { color: var(--bc-muted); }
  .bc-section-panel--collapsed .vector-pinnable-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  @media (max-width: 1119px) { .bc-section-panel { display: none; } }

  /* {{Bconomy navbox}}: topic links at the bottom of reference articles. */
  .mw-parser-output .bc-navbox {
    padding: 12px 16px;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
    margin-top: 24px;
    background-color: var(--bc-raised);
    color: var(--bc-text);
  }
  .mw-parser-output .bc-navbox-title { font-weight: bold; text-align: center; }
  .mw-parser-output .bc-navbox-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  .mw-parser-output .bc-navbox-table th,
  .mw-parser-output .bc-navbox-table td { padding: 6px 0; vertical-align: top; border-top: 1px solid var(--bc-border); }
  .mw-parser-output .bc-navbox-table th { padding-right: 16px; text-align: right; white-space: nowrap; color: var(--bc-muted); }
  .mw-parser-output .bc-navbox-table .mw-selflink { font-weight: bold; }
  @media (max-width: 640px) {
    .mw-parser-output .bc-navbox-table th,
    .mw-parser-output .bc-navbox-table td { display: block; text-align: left; }
    .mw-parser-output .bc-navbox-table td { border-top: 0; padding-top: 0; }
  }
  .mw-footer { color: var(--bc-muted); }
  .mw-footer li { line-height: 1.6; }

  .mw-body h1, .mw-body h2, .mw-body h3,
  .vector-pinnable-header-label, .vector-menu-heading {
    color: var(--bc-text);
    font-family: inherit;
  }

  .mw-body h1 { font-weight: 400; }
  .mw-body h2 { border-color: var(--bc-border); }
  .vector-page-titlebar, .vector-page-toolbar,
  .vector-pinnable-header, .vector-menu-heading,
  .vector-toc, .catlinks, .mw-footer { border-color: var(--bc-border); }

  a { color: var(--bc-link); }
  a:visited { color: var(--bc-visited); }
  a:hover, a:focus { color: var(--bc-link-hover); }
  a.new, a.new:visited { color: #ff9aac; }
  /* Discussion tabs are normal navigation even before a talk page is created. */
  #ca-talk:not(.selected) a { color: var(--bc-link); }
  #ca-talk:not(.selected) a:visited { color: var(--bc-visited); }
  #ca-talk:not(.selected) a:hover,
  #ca-talk:not(.selected) a:focus { color: var(--bc-link-hover); }
  .vector-menu-tabs .selected a,
  .vector-toc .vector-toc-list-item-active > .vector-toc-link {
    color: var(--bc-text);
    border-color: var(--bc-link);
  }

  .vector-dropdown-content, .vector-menu-content,
  .vector-pinnable-element, .vector-search-box .cdx-menu {
    color: var(--bc-text);
    background-color: var(--bc-page);
  }
  .vector-dropdown-content { background-color: var(--bc-surface); }
  .vector-dropdown-content .vector-pinnable-element,
  .vector-dropdown-content .vector-menu-content {
    background-color: transparent;
  }
  .vector-pinnable-header-toggle-button,
  .vector-appearance-pinnable-header .cdx-button {
    color: var(--bc-muted);
    background-color: var(--bc-raised);
  }

  .wikitable, .catlinks, .toc, pre,
  .mw-parser-output code, .mw-parser-output .mw-code,
  .mw-parser-output .thumbinner, .mw-parser-output .thumbcaption,
  figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
    background-color: var(--bc-raised);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  .wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--bc-selected);
    color: var(--bc-text);
  }
  .wikitable > tr > th, .wikitable > tr > td,
  .wikitable > * > tr > th, .wikitable > * > tr > td {
    border-color: var(--bc-border);
  }
  .mw-parser-output figure img, .mw-parser-output .thumbimage {
    max-width: 100%;
    height: auto;
  }
  .mw-parser-output { overflow-wrap: break-word; }
  .mw-parser-output pre { box-sizing: border-box; max-width: 100%; overflow-x: auto; }
  .editOptions, #wikiPreview, .mw-editform .editOptions {
    background-color: var(--bc-raised);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  textarea, input[type="text"], input[type="search"], select {
    background-color: var(--bc-page);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  :focus-visible { outline-color: var(--bc-link); }
  ::selection { background-color: var(--bc-accent); color: #fff; }

  /* Let the brand use the space remaining beside the header controls. */
  @media (max-width: 480px) {
    body .vector-header { gap: 8px; }
    body .vector-header .vector-header-start { gap: 8px; }
  }
  /* The complete brand needs 152px, or 121.6px at the existing mobile scale.
     These queries measure its allocated width rather than the viewport. */
  @media (min-width: 720px) {
    @container bc-header-brand (width < 151.99px) {
      .mw-logo .mw-logo-container { display: none; }
    }
  }
  @media (max-width: 719px) {
    @container bc-header-brand (width < 121.59px) {
      .mw-logo .mw-logo-container { display: none; }
    }
  }

  @media (max-width: 719px) {
    .mw-body > .vector-body { border-radius: 0; }
    .mw-logo { --bc-brand-unit: .8px; }
    .mw-body h1 { font-size: 1.8em; letter-spacing: -.3px; }
    .wikitable th, .wikitable td { padding: .5em .6em; }
    .mw-parser-output figure[typeof~="mw:File/Thumb"] {
      float: none;
      margin-inline: auto;
    }
  }
}
@media screen {
  /* Main-page panels use the same surfaces and accents as the wiki shell. */
  .bc-home { container: bc-home / inline-size; }
  .bc-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
  }
  .bc-home-panel {
    min-width: 0;
    overflow: hidden;
    background-color: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
  }
  .bc-home-panel > .mw-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bc-border);
  }
  .mw-body .bc-home-panel h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
  }
  .bc-home-panel .mw-editsection {
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
  }
  .bc-home-panel-body { padding: 16px; }
  .bc-home-panel-body > :first-child { margin-top: 0; }
  .bc-home-panel-body > :last-child { margin-bottom: 0; }
  .bc-home-hero {
    grid-column: 1 / -1;
    background-color: var(--bc-selected);
    border-top: 3px solid var(--bc-primary);
    padding: 20px;
    text-align: center;
  }
  .bc-home-hero > .mw-heading {
    display: block;
    border: 0;
    padding: 0;
  }
  .mw-body .bc-home-hero h2 { font-size: clamp(1.6rem, 3.5cqi, 2.15rem); }
  .bc-home-hero .mw-editsection { display: block; margin-top: 4px; }
  .bc-home-hero .bc-home-panel-body { padding: 12px 0 0; }
  .bc-home-more { margin-top: 16px; text-align: end; }
  .bc-home-pages { display: flex; flex-direction: column; }
  .bc-home-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: center;
    gap: 12px;
    flex: 1;
    padding: 20px 16px;
  }
  .bc-home-tile { min-width: 0; }
  .bc-home-tile > a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 140px;
    padding: 16px 8px;
    background-color: var(--bc-raised);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
  }
  .bc-home-tile-label {
    display: block;
    align-self: stretch;
  }
  .bc-home-tile > a::before {
    content: "";
    display: block;
    flex: none;
    width: 64px;
    height: 64px;
    background: var(--bc-home-icon) center / contain no-repeat;
  }
  .bc-home-tile > a:hover, .bc-home-tile > a:focus-visible {
    background-color: var(--bc-selected);
    border-color: var(--bc-link);
    color: var(--bc-link-hover);
  }
  .bc-home-tile-start { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u1f44b.png"); }
  .bc-home-tile-items { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u1f392.png"); }
  .bc-home-tile-pets { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u1f43e.png"); }
  .bc-home-tile-farm { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u1f331.png"); }
  .bc-home-tile-museum { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u1f3db.png"); }
  .bc-home-tile-relay { --bc-home-icon: url("https://cdn.jsdelivr.net/gh/googlefonts/[email protected]/png/128/emoji_u26a1.png"); }
  .bc-home-navigation { margin-top: 16px; }
  .bc-home-navigation > .mw-heading { background-color: var(--bc-selected); }
  .bc-home-nav-body dl {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    margin: 0;
  }
  .bc-home-nav-body dt, .bc-home-nav-body dd {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bc-border);
  }
  .bc-home-nav-body dt { background-color: var(--bc-raised); font-weight: 600; }
  .bc-home-nav-body dd { min-width: 0; }
  .bc-home-nav-body dl > :nth-last-child(-n + 2) { border-bottom: 0; }

  @container bc-home (max-width: 900px) {
    .bc-home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .bc-home-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @container bc-home (max-width: 640px) {
    .bc-home-grid { grid-template-columns: minmax(0, 1fr); }
    .bc-home-hero { padding: 16px; }
    .bc-home-nav-body dl { grid-template-columns: 6.5rem minmax(0, 1fr); }
    .bc-home-nav-body dt, .bc-home-nav-body dd { padding: 10px 12px; }
  }
  @container bc-home (max-width: 380px) {
    .bc-home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-home-nav-body dl { display: block; }
    .bc-home-nav-body dt { border-bottom: 0; }
    .bc-home-nav-body dl > dd:last-child { border-bottom: 0; }
  }
}
@media screen {
  /* Changelog articles and the chronological index share column measurements.
     The remaining width belongs to Changes (or the index's source link). */
  .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: anywhere;
  }
  .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr > :is(th, td) {
    box-sizing: border-box;
    padding-inline: .75em;
    vertical-align: top;
  }
  .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr:first-child > th:first-child {
    width: 10rem !important;
  }
  .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr:first-child > th:nth-child(2) {
    width: 12rem !important;
  }
  .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr > :first-child {
    white-space: nowrap;
  }
  @media (max-width: 719px) {
    .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr:first-child > th:first-child {
      width: 22% !important;
    }
    .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr:first-child > th:nth-child(2) {
      width: 28% !important;
    }
    .mw-parser-output :is(.mw-heading2:has(> #Changelog) + table.wikitable, .bc-version-year table.wikitable) > :is(thead, tbody) > tr > :is(th, td) {
      padding-inline: .6em;
      white-space: normal;
    }
  }
}
@media screen {
  /* Theme treatment stays separate from the synchronized item definitions. */
  .mw-parser-output table.bc-infobox > caption {
    box-sizing: border-box;
    padding: .65em .75em;
    border: 1px solid var(--bc-border);
    border-bottom: 0;
    background-color: color-mix(in srgb, var(--bc-surface) 85%, #000);
    color: var(--bc-text);
  }
  .mw-parser-output .bc-item-infobox .bc-item-picture {
    padding-block: 16px;
  }
}
@media screen {
  /* Main Page keeps its navigation category for topic discovery without a footer box. */
  .page-Main_Page .catlinks { display: none; }
}

@media screen {
  /* Infobox artwork shares Exquisite Trunk's size; inline icons keep theirs. */
  .mw-parser-output :is(.bc-infobox, .infobox) img:not(.bc-item-inline-icon img) {
    width: 128px;
    height: 128px;
    max-width: 100%;
    object-fit: contain;
  }
}