/* ==========================================================================
   JACTF Wiki — "Holocron" Star Wars / Jedi Academy Theme
   Inspired by the revamped Newmod site (Holocron design)
   Supports automatic light/dark mode (prefers-color-scheme + light-dark())
   and manual theme switching via Vector client preferences & header toggle.
   ========================================================================== */

:root {
  /* Raw light & dark palette tokens (Newmod Holocron s-slate g3) */
  --ac-l: #0369a1;
  --ac-d: #4cc9ff;
  --ac-hover-l: #0284c7;
  --ac-hover-d: #7dd3fc;

  --bg-l: #f3f6fb;
  --bg-d: #0d1422;
  --bg-elev-l: #ffffff;
  --bg-elev-d: #111a2e;

  --fg-l: #0b1220;
  --fg-d: #e8eef9;

  /* Muted text tuned for >= 4.5:1 WCAG AA contrast on both bg and surface */
  --mut-l: #475569;
  --mut-d: #94a3b8;

  --sf-l: rgba(255, 255, 255, 0.82);
  --sf-d: rgba(255, 255, 255, 0.045);

  --sf2-l: #e9eef6;
  --sf2-d: rgba(255, 255, 255, 0.03);

  --bd-l: #cbd5e1;
  --bd-d: rgba(255, 255, 255, 0.10);

  /* >= 3:1 non-text contrast token for interactive control boundaries */
  --bd-ui-l: #64748b;
  --bd-ui-d: #64748b;

  --on-l: #ffffff;
  --on-d: #04121c;

  /* Red link (Sith crimson) & visited link tokens */
  --red-l: #b91c1c;
  --red-d: #f87171;
  --vis-l: #075985;
  --vis-d: #38bdf8;

  --scrollbar-track-l: #e2e8f0;
  --scrollbar-track-d: #0b111e;
  --scrollbar-thumb-l: #64748b;
  --scrollbar-thumb-d: #475569;

  /* Default (Light) fallback assignments */
  --color-scheme: light;
  --ac: var(--ac-l);
  --ac-hover: var(--ac-hover-l);
  --bg: var(--bg-l);
  --bg-elev: var(--bg-elev-l);
  --fg: var(--fg-l);
  --mut: var(--mut-l);
  --sf: var(--sf-l);
  --sf2: var(--sf2-l);
  --bd: var(--bd-l);
  --bd-ui: var(--bd-ui-l);
  --on: var(--on-l);
  --red-link: var(--red-l);
  --vis-link: var(--vis-l);
  --scrollbar-track: var(--scrollbar-track-l);
  --scrollbar-thumb: var(--scrollbar-thumb-l);

  /* Typography & layout primitives */
  --hf: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bf: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mf: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rad: 14px;
  --navh: 82px;

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

/* Fallback for browsers without light-dark() when OS prefers dark */
@media (prefers-color-scheme: dark) {
  :root {
    --color-scheme: dark;
    --ac: var(--ac-d);
    --ac-hover: var(--ac-hover-d);
    --bg: var(--bg-d);
    --bg-elev: var(--bg-elev-d);
    --fg: var(--fg-d);
    --mut: var(--mut-d);
    --sf: var(--sf-d);
    --sf2: var(--sf2-d);
    --bd: var(--bd-d);
    --bd-ui: var(--bd-ui-d);
    --on: var(--on-d);
    --red-link: var(--red-d);
    --vis-link: var(--vis-d);
    --scrollbar-track: var(--scrollbar-track-d);
    --scrollbar-thumb: var(--scrollbar-thumb-d);
  }
}

/* Map <meta name="color-scheme"> and MediaWiki clientprefs to CSS color-scheme & tokens */
:root:has(> head > meta[name="color-scheme"][content="dark"]),
html.skin-theme-clientpref-night {
  color-scheme: dark;
  --color-scheme: dark;
  --ac: var(--ac-d);
  --ac-hover: var(--ac-hover-d);
  --bg: var(--bg-d);
  --bg-elev: var(--bg-elev-d);
  --fg: var(--fg-d);
  --mut: var(--mut-d);
  --sf: var(--sf-d);
  --sf2: var(--sf2-d);
  --bd: var(--bd-d);
  --bd-ui: var(--bd-ui-d);
  --on: var(--on-d);
  --red-link: var(--red-d);
  --vis-link: var(--vis-d);
  --scrollbar-track: var(--scrollbar-track-d);
  --scrollbar-thumb: var(--scrollbar-thumb-d);
}

:root:has(> head > meta[name="color-scheme"][content="light"]),
html.skin-theme-clientpref-day {
  color-scheme: light;
  --color-scheme: light;
  --ac: var(--ac-l);
  --ac-hover: var(--ac-hover-l);
  --bg: var(--bg-l);
  --bg-elev: var(--bg-elev-l);
  --fg: var(--fg-l);
  --mut: var(--mut-l);
  --sf: var(--sf-l);
  --sf2: var(--sf2-l);
  --bd: var(--bd-l);
  --bd-ui: var(--bd-ui-l);
  --on: var(--on-l);
  --red-link: var(--red-l);
  --vis-link: var(--vis-l);
  --scrollbar-track: var(--scrollbar-track-l);
  --scrollbar-thumb: var(--scrollbar-thumb-l);
}

/* Modern light-dark() automatic resolution based on computed color-scheme */
@supports (color: light-dark(white, black)) {
  :root,
  html.skin-theme-clientpref-os,
  html.skin-theme-clientpref-night,
  html.skin-theme-clientpref-day {
    --ac: light-dark(var(--ac-l), var(--ac-d));
    --ac-hover: light-dark(var(--ac-hover-l), var(--ac-hover-d));
    --bg: light-dark(var(--bg-l), var(--bg-d));
    --bg-elev: light-dark(var(--bg-elev-l), var(--bg-elev-d));
    --fg: light-dark(var(--fg-l), var(--fg-d));
    --mut: light-dark(var(--mut-l), var(--mut-d));
    --sf: light-dark(var(--sf-l), var(--sf-d));
    --sf2: light-dark(var(--sf2-l), var(--sf2-d));
    --bd: light-dark(var(--bd-l), var(--bd-d));
    --bd-ui: light-dark(var(--bd-ui-l), var(--bd-ui-d));
    --on: light-dark(var(--on-l), var(--on-d));
    --red-link: light-dark(var(--red-l), var(--red-d));
    --vis-link: light-dark(var(--vis-l), var(--vis-d));
    --scrollbar-track: light-dark(var(--scrollbar-track-l), var(--scrollbar-track-d));
    --scrollbar-thumb: light-dark(var(--scrollbar-thumb-l), var(--scrollbar-thumb-d));
  }
}

/* Derived Holocron glow & surface tokens + MediaWiki Codex variable bridge */
:root,
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-day {
  --soft: color-mix(in srgb, var(--ac) 12%, transparent);
  --g1: color-mix(in srgb, var(--ac) 15%, transparent);
  --g2: color-mix(in srgb, var(--ac) 30%, transparent);

  /* Browser UI customization hooks */
  accent-color: var(--ac);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

  /* Bridge MediaWiki Codex design tokens to Holocron palette */
  --color-base: var(--fg);
  --color-base--hover: var(--fg);
  --color-emphasized: var(--fg);
  --color-neutral: var(--mut);
  --color-subtle: var(--mut);
  --color-placeholder: var(--mut);
  --color-inverted: var(--on);
  --color-progressive: var(--ac);
  --color-progressive--hover: var(--ac-hover);
  --color-progressive--active: var(--ac);
  --color-progressive--focus: var(--ac);
  --color-visited: var(--vis-link);
  --color-visited--hover: var(--ac-hover);
  --color-destructive: var(--red-link);
  --color-destructive--hover: var(--red-link);
  --color-link: var(--ac);
  --color-link--hover: var(--ac-hover);
  --color-link--visited: var(--vis-link);
  --color-link-red: var(--red-link);
  --color-link-red--hover: var(--red-link);

  --background-color-base: var(--bg-elev);
  --background-color-neutral: var(--sf2);
  --background-color-neutral-subtle: var(--sf);
  --background-color-interactive: var(--sf2);
  --background-color-interactive--hover: var(--soft);
  --background-color-interactive-subtle: var(--sf);
  --background-color-interactive-subtle--hover: var(--soft);
  --background-color-progressive: var(--ac);
  --background-color-progressive--hover: var(--ac-hover);
  --background-color-progressive-subtle: var(--soft);

  --border-color-base: var(--bd);
  --border-color-subtle: var(--bd);
  --border-color-muted: var(--bd);
  --border-color-divider: var(--bd);
  --border-color-interactive: var(--bd-ui);
  --border-color-progressive: var(--ac);
  --border-color-progressive--focus: var(--ac);
  --outline-color-progressive--focus: var(--ac);
}

/* Legacy fallback for WebKit/Blink browsers without scrollbar-color */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

::selection {
  background: color-mix(in srgb, var(--ac) 28%, transparent);
  color: var(--fg);
}

/* ==========================================================================
   Page Canvas, Holocron Radial Glow & Film Grain
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--navh);
  scrollbar-gutter: stable;
  background-color: var(--bg);
}

body.skin-vector {
  font-family: var(--bf);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
  background:
    radial-gradient(1100px 500px at 50% -8%, var(--g1), transparent 70%),
    radial-gradient(700px 380px at 85% 12%, color-mix(in srgb, var(--ac) 10%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Subtle Holocron noise grain overlay (from Newmod .hx-grain) */
.hx-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  html:not(.skin-theme-clientpref-day) .hx-grain {
    opacity: 0.08;
    mix-blend-mode: overlay;
  }
}

html.skin-theme-clientpref-night .hx-grain {
  opacity: 0.08;
  mix-blend-mode: overlay;
}

@container style(--color-scheme: dark) {
  .hx-grain {
    opacity: 0.08;
    mix-blend-mode: overlay;
  }
}

.mw-page-container {
  background-color: transparent !important;
  max-width: 1480px;
}

.mw-page-container-inner {
  gap: 24px;
}

/* ==========================================================================
   Sticky Holocron Pill Header (.vector-header-container)
   ========================================================================== */
.vector-header-container {
  position: sticky;
  top: 12px;
  z-index: 50;
  padding: 0 14px;
  margin-top: 12px;
  margin-bottom: 12px;
  background: transparent !important;
}

.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 58px;
  padding: 0 14px 0 20px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, transparent) !important;
  border: 1px solid var(--bd);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35), 0 0 24px -12px var(--g1);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.vector-header-container.hx-scrolled .mw-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--ac) 30%, var(--bd));
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55), 0 0 28px -10px var(--g1);
}

/* Brand Logo & Glowing Saber Bar (Newmod .brand::before) */
.mw-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  padding: 4px 6px;
}

.mw-logo::before {
  content: "";
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--ac);
  box-shadow: 0 0 12px var(--g2), 0 0 2px var(--ac);
  flex: none;
}

.mw-logo-icon {
  width: 34px !important;
  height: 34px !important;
  filter: drop-shadow(0 0 8px var(--g1));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.mw-logo:hover .mw-logo-icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px var(--g2));
}

/* Prevent Vector's .skin-invert from forcing color-scheme:light or inverting our themed wordmark */
.mw-logo .mw-logo-container.skin-invert {
  color-scheme: inherit !important;
  filter: none !important;
  color: var(--fg) !important;
  margin-left: 0;
}

.mw-logo-wordmark {
  font-family: var(--hf) !important;
  font-weight: 800 !important;
  font-size: 18.5px !important;
  letter-spacing: -0.02em;
  color: var(--fg) !important;
  background: linear-gradient(180deg, var(--fg) 35%, color-mix(in srgb, var(--fg) 50%, var(--ac)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search Input (Newmod .srch pill style) */
.cdx-search-input--has-end-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.cdx-search-input--has-end-button .cdx-search-input__input-wrapper {
  margin: 0 !important;
}

.vector-search-box .cdx-text-input,
.cdx-search-input .cdx-text-input {
  border-radius: 999px 0 0 999px !important;
  overflow: visible !important;
}

.vector-search-box .cdx-text-input__input,
.cdx-search-input .cdx-text-input__input {
  border-radius: 999px 0 0 999px !important;
  background: var(--sf) !important;
  border: 1px solid var(--bd-ui) !important;
  color: var(--fg) !important;
  font-family: var(--bf) !important;
  font-size: 14px !important;
  height: 38px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vector-search-box .cdx-text-input__input:focus,
.cdx-search-input .cdx-text-input__input:focus {
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--soft) !important;
  outline: none !important;
}

.cdx-search-input__end-button.cdx-button {
  margin: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--sf2) !important;
  border: 1px solid var(--bd-ui) !important;
  border-left: 0 !important;
  color: var(--fg) !important;
  font-weight: 600 !important;
  height: 38px !important;
  padding: 0 16px !important;
}

.cdx-search-input__end-button.cdx-button:hover {
  background: var(--soft) !important;
  color: var(--ac) !important;
  border-color: var(--ac) !important;
}

/* Header Sun/Moon Theme Toggle Button (Newmod .hx-theme) */
.hx-theme {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bd-ui);
  background: var(--sf);
  color: var(--fg);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.hx-theme svg {
  width: 18px;
  height: 18px;
}

.hx-theme:hover,
.hx-theme:focus-visible {
  border-color: var(--ac);
  box-shadow: 0 0 14px var(--g1);
  color: var(--ac);
  outline: none;
}

.hx-theme .ico-sun {
  display: none;
}

.hx-theme .ico-moon {
  display: grid;
  place-items: center;
}

@media (prefers-color-scheme: dark) {
  html:not(.skin-theme-clientpref-day) .hx-theme .ico-sun {
    display: grid;
    place-items: center;
  }
  html:not(.skin-theme-clientpref-day) .hx-theme .ico-moon {
    display: none;
  }
}

html.skin-theme-clientpref-night .hx-theme .ico-sun {
  display: grid;
  place-items: center;
}

html.skin-theme-clientpref-night .hx-theme .ico-moon {
  display: none;
}

@container style(--color-scheme: dark) {
  .hx-theme .ico-sun {
    display: grid;
    place-items: center;
  }
  .hx-theme .ico-moon {
    display: none;
  }
}

@container not style(--color-scheme: dark) {
  .hx-theme .ico-sun {
    display: none;
  }
  .hx-theme .ico-moon {
    display: grid;
    place-items: center;
  }
}

/* Visually hidden helper for accessible toggle labels */
.hx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Sidebars, Table of Contents, Pinned Panels & Dropdowns (.dx-side / .dx-toc)
   ========================================================================== */
.vector-pinned-container,
.vector-pinnable-element,
.vector-toc {
  background: transparent !important;
}

/* Remove Vector's hardcoded bottom fade gradient on TOC */
.vector-toc::after {
  display: none !important;
}

#vector-main-menu-pinned-container .vector-main-menu,
#vector-toc-pinned-container .vector-toc,
#vector-page-tools-pinned-container .vector-page-tools,
#vector-appearance-pinned-container .vector-appearance {
  background: var(--sf) !important;
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 18px 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dropdown popovers (unpinned menus, appearance, user menu, typeahead search) */
.vector-dropdown .vector-dropdown-content,
.cdx-menu {
  background: var(--bg-elev) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--rad) !important;
  box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.45), 0 0 24px -10px var(--g1) !important;
  padding: 14px !important;
  color: var(--fg) !important;
}

/* Monospace cyan section headers (Newmod .dx-side h5 / .dx-toc h6) */
.vector-pinnable-header-label,
.vector-menu-heading,
.cdx-label__label__text {
  font: 600 11.5px var(--mf) !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
  border-bottom: 0 !important;
}

.vector-pinnable-header {
  border-bottom: 1px solid var(--bd) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

.vector-pinnable-header-toggle-button {
  font: 600 11px var(--mf) !important;
  color: var(--mut) !important;
  background: var(--sf2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

.vector-pinnable-header-toggle-button:hover {
  color: var(--fg) !important;
  border-color: var(--ac) !important;
}

/* Sidebar & TOC links */
.vector-menu-content-list .mw-list-item a,
.vector-toc .vector-toc-link {
  display: block;
  padding: 6px 10px !important;
  border-radius: 7px;
  color: var(--mut) !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vector-menu-content-list .mw-list-item a:hover,
.vector-toc .vector-toc-link:hover {
  color: var(--fg) !important;
  background: var(--soft) !important;
}

.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-menu-content-list .mw-list-item.selected a {
  color: var(--ac) !important;
  font-weight: 600 !important;
  background: var(--soft) !important;
  box-shadow: inset 2px 0 0 var(--ac);
  text-shadow: 0 0 10px var(--g1);
}

/* ==========================================================================
   Main Article Surface & Page Titlebar / Toolbar (.mw-body)
   ========================================================================== */
.mw-body {
  position: relative;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: 32px 42px 48px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.35), 0 0 40px -24px var(--g1);
  margin-bottom: 40px;
}

/* Subtle Holocron saber line along the top edge of the article card */
.mw-body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  box-shadow: 0 0 14px var(--g2);
  pointer-events: none;
}

/* Page Title (#firstHeading) */
.vector-page-titlebar {
  padding-bottom: 14px !important;
}

.vector-page-titlebar::after {
  height: 1px !important;
  background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 35%, var(--bd)) 45%, transparent) !important;
  box-shadow: 0 0 10px var(--g1);
}

.mw-body .firstHeading {
  font-family: var(--hf) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--fg) !important;
  border: 0 !important;
}

/* Hide redundant Main Page heading when our Holocron Hero is rendered */
.page-Main_Page.action-view .vector-page-titlebar {
  display: none;
}

/* Page Toolbar Tabs (Main Page / Discussion / Read / Edit / History) */
.vector-page-toolbar-container {
  border-bottom: 1px solid var(--bd) !important;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.vector-menu-tabs .mw-list-item a {
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--mut) !important;
  border-bottom: 0 !important;
}

.vector-menu-tabs .mw-list-item a:hover {
  color: var(--fg) !important;
  background: var(--soft) !important;
}

.vector-menu-tabs .mw-list-item.selected a {
  color: var(--ac) !important;
  font-weight: 600 !important;
  background: var(--soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 40%, transparent);
}

.vector-menu-tabs .mw-list-item.new a {
  color: var(--red-link) !important;
}

/* ==========================================================================
   Prose, Headings, Links, Lists, Code & Tables (.mw-body-content)
   ========================================================================== */
.mw-body-content {
  font-family: var(--bf);
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--fg);
}

.mw-body-content p {
  color: var(--fg);
  margin: 0 0 14px;
}

.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6,
.mw-heading h1,
.mw-heading h2,
.mw-heading h3,
.mw-heading h4 {
  font-family: var(--hf) !important;
  color: var(--fg) !important;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.mw-body-content .mw-heading2,
.mw-body-content > h2 {
  border-bottom: 1px solid var(--bd) !important;
  padding-bottom: 8px;
  margin-top: 32px;
  margin-bottom: 14px;
  font-size: 25px;
}

.mw-body-content .mw-heading3,
.mw-body-content > h3 {
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 10px;
}

.mw-editsection {
  font-family: var(--mf) !important;
  font-size: 12px !important;
}

/* Links (Newmod .prose a treatment with subtle underline & cyan glow on hover) */
.mw-body-content a:not(.cdx-button):not(.hx-btn) {
  color: var(--ac);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ac) 50%, transparent);
  transition: color 0.15s ease, text-shadow 0.15s ease, text-decoration-color 0.15s ease;
}

.mw-body-content a:not(.cdx-button):not(.hx-btn):hover {
  color: var(--ac-hover);
  text-decoration-color: currentColor;
  text-shadow: 0 0 12px var(--g1);
}

/* Red links for non-existent wiki pages (Sith crimson saber accent) */
.mw-body-content a.new {
  color: var(--red-link) !important;
  text-decoration-color: color-mix(in srgb, var(--red-link) 45%, transparent) !important;
}

.mw-body-content a.new:hover {
  text-decoration-color: var(--red-link) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--red-link) 35%, transparent) !important;
}

/* Lists with cyan markers */
.mw-body-content ul {
  padding-left: 22px;
  margin: 8px 0 16px;
}

.mw-body-content li {
  margin-bottom: 8px;
}

.mw-body-content li::marker {
  color: var(--ac);
}

/* Code, Pre, Kbd (Newmod JetBrains Mono styling) */
.mw-body-content code,
.mw-body-content pre,
.mw-body-content tt {
  font-family: var(--mf) !important;
  font-size: 0.91em;
}

.mw-body-content code {
  background: var(--sf2);
  border: 1px solid var(--bd);
  color: var(--fg);
  padding: 2px 7px;
  border-radius: 6px;
}

.mw-body-content pre {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--ac);
  color: var(--fg);
  padding: 14px 18px;
  border-radius: var(--rad);
  overflow-x: auto;
}

.mw-body-content kbd {
  font: 600 0.84em var(--mf);
  border: 1px solid var(--bd-ui);
  border-bottom-width: 2px;
  background: var(--sf);
  padding: 0.1em 0.45em;
  border-radius: 5px;
  color: var(--fg);
}

.mw-body-content blockquote {
  margin: 14px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--ac);
  background: color-mix(in srgb, var(--ac) 7%, transparent);
  border-radius: 0 10px 10px 0;
  color: var(--fg);
}

/* Wiki Tables (Newmod .etbl style) */
.wikitable {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--rad) !important;
  background: var(--sf2) !important;
  color: var(--fg) !important;
  margin: 16px 0 !important;
  overflow: hidden;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  font: 600 11.5px var(--mf) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac) !important;
  background: var(--sf) !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bd) !important;
  text-align: left;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
  padding: 12px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--bd) !important;
  background: transparent !important;
  color: var(--fg) !important;
}

/* Category Links Bar (#catlinks) */
.catlinks {
  background: var(--sf2) !important;
  border: 1px solid var(--bd) !important;
  border-left: 3px solid var(--ac) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  margin-top: 28px !important;
  font-size: 13.5px;
}

/* Thumbnails & Figures (Holocron frame) */
figure[typeof~="mw:File/Thumb"],
.thumbinner {
  background: var(--sf2) !important;
  border: 1px solid color-mix(in srgb, var(--ac) 35%, var(--bd)) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  box-shadow: 0 16px 40px -20px var(--g1);
}

figure[typeof~="mw:File/Thumb"] > figcaption {
  background: transparent !important;
  border: 0 !important;
  color: var(--mut) !important;
  font-size: 13px !important;
  padding-top: 8px !important;
}

/* Footer */
.mw-footer-container {
  border-top: 1px solid var(--bd) !important;
  margin-top: 24px;
  padding-top: 20px;
  color: var(--mut);
}

/* ==========================================================================
   Main Page Holocron Hero & Sector Grid (Newmod B1/B2 Inspiration)
   ========================================================================== */
.hx-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 38px 24px 34px;
  margin-bottom: 28px;
  border-radius: 16px;
  background:
    radial-gradient(600px 240px at 50% 0%, var(--g1), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--ac) 8%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 30%, var(--bd));
  overflow: hidden;
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11.5px var(--mf);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
  text-shadow: 0 0 10px var(--g1);
}

.hx-hero .gt {
  display: inline-block;
  font-family: var(--hf);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0;
  background: linear-gradient(180deg, var(--fg) 30%, color-mix(in srgb, var(--fg) 42%, var(--ac)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.saber {
  height: 3px;
  width: min(380px, 72%);
  margin: 18px auto 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ac) 20%, color-mix(in srgb, var(--ac) 35%, #ffffff) 50%, var(--ac) 80%, transparent);
  box-shadow: 0 0 14px var(--g2);
  animation: saber-hum 2.6s ease-in-out infinite;
}

@keyframes saber-hum {
  50% { opacity: 0.76; }
}

.hx-hero .tag {
  font-size: 17.5px;
  color: var(--mut);
  max-width: 42em;
  margin: 0 auto 24px !important;
  line-height: 1.6;
}

.hx-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hx-btn {
  display: inline-flex;
  border-radius: 12px;
  border: 1px solid var(--bd-ui);
  background: var(--sf) !important;
  backdrop-filter: blur(6px);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hx-btn > a,
.mw-body-content .hx-btn > a,
.mw-body-content .hx-btn > a.new,
.plainlinks .hx-btn > a.external {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px !important;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg) !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.hx-btn:hover {
  border-color: var(--ac);
  box-shadow: 0 0 20px -4px var(--g1);
  transform: translateY(-1px);
}

.hx-btn.primary {
  background: var(--ac) !important;
  border-color: transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 60%, #ffffff), 0 8px 26px -4px var(--g2);
}

.hx-btn.primary > a,
.mw-body-content .hx-btn.primary > a,
.mw-body-content .hx-btn.primary > a.new {
  color: var(--on) !important;
}

/* Holocron Sector Cards Grid */
.holo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.holo-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ac) 28%, var(--bd));
  border-radius: var(--rad);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ac) 5%, transparent), transparent 45%),
    var(--sf2);
  padding: 24px 26px;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.35), inset 0 0 24px -14px var(--g1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.holo-card:hover {
  border-color: color-mix(in srgb, var(--ac) 60%, var(--bd));
  box-shadow: 0 20px 48px -20px var(--g1), inset 0 0 28px -12px var(--g1);
}

.holo-card.span-2 {
  grid-column: 1 / -1;
}

/* Holocron Corner Brackets (Newmod .fr-br .holo::before / ::after) */
.holo-card::before,
.holo-card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ac);
  filter: drop-shadow(0 0 5px var(--g2));
  pointer-events: none;
  opacity: 0.75;
}

.holo-card::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}

.holo-card::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}

.holo-sector {
  display: inline-block;
  font: 600 11px var(--mf);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 6px;
}

.holo-card .mw-heading2,
.holo-card h2 {
  border-bottom: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 22px !important;
  letter-spacing: -0.025em;
}

.holo-card p {
  color: var(--mut) !important;
  font-size: 14.5px;
  margin-bottom: 14px !important;
}

/* Rotated Holocron Diamond Bullets (Newmod .b2-tx li::before) */
.holo-card ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.holo-card li {
  position: relative;
  padding-left: 22px;
  margin: 9px 0;
  color: var(--mut);
  font-size: 15px;
}

.holo-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--ac);
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--g2);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .saber {
    animation: none;
  }
}

/* Forced Colors Mode (High Contrast) accessibility fallback */
@media (forced-colors: active) {
  .mw-body,
  .holo-card,
  .vector-header-container .mw-header,
  .hx-theme,
  .hx-btn {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
  .mw-logo-wordmark,
  .hx-hero .gt {
    background: none !important;
    -webkit-text-fill-color: CanvasText !important;
    color: CanvasText !important;
    filter: none !important;
  }
  .saber,
  .mw-logo::before {
    background: Highlight !important;
    box-shadow: none !important;
  }
}

/* Responsive adjustments */
@media (max-width: 860px) {
  .holo-grid {
    grid-template-columns: 1fr;
  }
  .mw-body {
    padding: 22px 20px 34px !important;
    border-radius: 16px;
  }
  .mw-body .firstHeading {
    font-size: 30px !important;
  }
  .vector-header-container {
    top: 6px;
    padding: 0 8px;
  }
}