/* Layout and colours follow MediaWiki's legacy Vector skin. */
:root { --text: #202122; --muted: #54595d; --border: #a2a9b1; --bg: #fff; --soft: #eaecf0; }
html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; }
body { background: #f6f6f6; color: #202122; }
[hidden] { display: none !important; }
a { color: #0645ad; text-decoration: none; }
a:visited { color: #0b0080; }
a:hover { text-decoration: underline; }
a.new, a.new:visited { color: #ba0000; }
a.retired { text-decoration: line-through; }

#mw-page-base { height: 5em; background: linear-gradient(#fff 50%, #f6f6f6 100%); }
#content {
  margin-left: 10em; margin-top: -1px; padding: 1.25em 1.5em 1.5em; min-height: 30em;
  background: #fff; color: #202122; border: 1px solid #a7d7f9; border-right: 0;
  font-size: .875em; line-height: 1.6; overflow-wrap: break-word;
}
#mw-head { position: absolute; top: 0; right: 0; width: 100%; }
#p-personal { position: absolute; top: .33em; right: .75em; font-size: .75em; }
#p-personal ul { list-style: none; margin: 0; padding-left: 10em; }
#p-personal li { float: left; margin-left: .75em; margin-top: .5em; line-height: 1.125em; }
#p-personal form { display: inline; }
#left-navigation { float: left; margin-left: 10em; margin-top: 2.5em; margin-bottom: -2.5em; }
#right-navigation { float: right; margin-top: 2.5em; }
ul.vectorTabs { float: left; height: 2.5em; margin: 0; padding: 0 0 0 1px; list-style: none;
  background: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%) no-repeat left bottom / 1px 100%; }
ul.vectorTabs li { float: left; height: 100%; margin: 0; padding: 0; font-size: .8125em; white-space: nowrap;
  background: linear-gradient(to top, #77c1f6 0, #e8f2f8 1px, #fff 100%); }
ul.vectorTabs li.selected { background: #fff; }
ul.vectorTabs li a, ul.vectorTabs li span { display: block; height: 1.9em; padding: 1.25em .5em 0; color: #0645ad; cursor: pointer;
  background: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%) no-repeat right bottom / 1px 100%; }
ul.vectorTabs li.selected a, ul.vectorTabs li.selected span { color: #202122; }
ul.vectorTabs li a:hover { text-decoration: none; }
#p-search { float: left; position: relative; margin: .5em .5em 0 .5em; padding-top: .3em; font-size: .8125em; }
#p-search input { width: 17em; padding: .3em .4em; border: 1px solid #a2a9b1; border-radius: 2px; font: inherit; background: #fff; color: #202122; }
#p-search button { padding: .3em .6em; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; font: inherit; color: #202122; cursor: pointer; }
#suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid #a2a9b1; font-size: 1.1em; }
#suggest a { display: block; padding: .2em .4em; color: #202122; }
#suggest a:hover, #suggest a.sel { background: #2a4b8d; color: #fff; text-decoration: none; }

#mw-panel { position: absolute; top: 0; left: 0; width: 10em; padding-left: .5em; font-size: inherit; }
#p-logo { display: block; width: 10em; height: 160px; margin-bottom: 1em; text-align: center; }
#p-logo img { margin-top: 12px; }
.portal { margin: 0 .6em 0 .7em; padding: .25em 0; }
.portal h3 { margin: .5em 0 0 .6666em; padding: .25em 0; font-size: .75em; font-weight: normal; color: #54595d;
  background: linear-gradient(to right, rgba(200, 204, 209, 0) 0, #c8ccd1 33%, #c8ccd1 66%, rgba(200, 204, 209, 0) 100%) no-repeat left bottom / 100% 1px; }
.portal ul { list-style: none; margin: .3em 0 0 1.25em; padding: .3em 0 0; }
.portal.first ul { margin-left: .5em; }
.portal li { margin: 0; padding: .25em 0; font-size: .75em; line-height: 1.125em; }
.portal li.here a { font-weight: bold; }

#footer { margin-left: 10em; padding: .75em; font-size: .75em; color: #202122; }
#footer p { margin: 0 0 .5em; }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { display: inline; margin-right: 1em; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hamburger { display: none; }

/* Content */
h1, h2, h3, h4, h5, h6 { color: #000; margin: 0; padding-top: .5em; padding-bottom: .17em; overflow: hidden; font-weight: normal; }
h1, h2 { font-family: 'Linux Libertine', 'Georgia', 'Times', serif; line-height: 1.3; border-bottom: 1px solid #a2a9b1; margin-bottom: .25em; }
.firstHeading { font-size: 2.057em; padding: 0; margin-bottom: .1em; }
#siteSub { font-size: 92.8%; color: #54595d; margin-bottom: 1em; }
#content h2 { font-size: 1.5em; margin-top: 1em; }
#content h3 { font-size: 1.2em; font-weight: bold; line-height: 1.6; }
#content h4 { font-size: 100%; font-weight: bold; line-height: 1.6; }
p { margin: .4em 0 .5em; }
ul { list-style-type: disc; margin: .3em 0 0 1.6em; padding: 0; }
ol { margin: .3em 0 0 3.2em; padding: 0; }
li { margin-bottom: .1em; }
pre, code { font-family: monospace, monospace; background: #f8f9fa; border: 1px solid #eaecf0; color: #000; }
code { padding: 1px 4px; border-radius: 2px; }
pre { padding: 1em; white-space: pre-wrap; line-height: 1.3em; }
pre code { border: 0; padding: 0; }
blockquote { margin: 1em 0; padding: 0 1.6em; border-left: 4px solid #eaecf0; }
mark { background: none; color: inherit; font-weight: bold; }
small { font-size: 85%; }
.comment { font-style: italic; }
button, select, input, textarea { font: inherit; color: #202122; }
button, .button { background: #f8f9fa; border: 1px solid #a2a9b1; border-radius: 2px; padding: .4em .8em; cursor: pointer; }
button.primary { background: #36c; border-color: #36c; color: #fff; font-weight: bold; }
button.danger { background: #d33; border-color: #d33; color: #fff; font-weight: bold; }
button.linkish { background: none; border: 0; padding: 0; color: #0645ad; }
input, select, textarea { background: #fff; border: 1px solid #a2a9b1; border-radius: 2px; padding: .3em .4em; }

.body table, table.wikitable { background: #f8f9fa; border: 1px solid #a2a9b1; border-collapse: collapse; margin: 1em 0; }
.body th, .body td { border: 1px solid #a2a9b1; padding: .2em .4em; }
.body th { background: #eaecf0; text-align: center; }
.table-wrap { overflow-x: auto; }
.table-wrap table { margin: 0; }
.callout, blockquote, .table-wrap, pre, ul, ol { display: flow-root; }

.infobox { float: right; clear: right; width: 22em; margin: .5em 0 .5em 1em; padding: .2em; border: 1px solid #a2a9b1;
  border-spacing: 3px; background: #f8f9fa; color: #000; font-size: 88%; line-height: 1.5em; }
.infobox th, .infobox td { padding: .2em; text-align: left; vertical-align: top; }
.infobox th { padding-right: 1em; }
.infobox .infobox-above { text-align: center; font-size: 125%; font-weight: bold; padding: .2em; }

.mw-revision, .banner-error { padding: .5em 1em; margin-bottom: 1em; border: 1px solid #fc3; background: #fef6e7; }
.banner-error { border-color: #d33; background: #fee7e6; }
.ambox { width: 80%; margin: 0 10% 1em; border: 1px solid #a2a9b1; border-left: 10px solid #36c; background: #fbfbfb; border-collapse: collapse; }
.ambox td { padding: .25em .5em; }
.callout { margin: 1em 10%; padding: .25em .5em; border: 1px solid #a2a9b1; border-left: 10px solid #36c; background: #fbfbfb; }
.callout-warning { border-left-color: #f28500; }
.callout-title { font-weight: bold; margin: .2em 0 0; }
.book-desc { font-style: italic; }

ul.toc li { margin-bottom: .3em; }
ul.toc li.retired > a { color: #54595d; text-decoration: line-through; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-left: .3em; }

#pagehistory { list-style: none; margin: 1em 0 0; }
#pagehistory li { padding: .1em .3em; border: 1px solid #fff; }
#pagehistory li.selected { background: #f8f9fa; border: 1px dashed #a2a9b1; }
.history-user { margin: 0 .3em; }
table.diff { width: 100%; border-spacing: 4px; font-family: monospace, monospace; font-size: .9em; }
table.diff td { padding: .1em .5em; white-space: pre-wrap; vertical-align: top; border: 1px solid #eaecf0; border-radius: .33em; }
table.diff td.op { width: 1em; border: 0; color: #54595d; text-align: center; }
table.diff tr.add td + td { border-color: #a3d3ff; border-left-width: 4px; }
table.diff tr.del td + td { border-color: #ffe49c; border-left-width: 4px; }
table.diff tr.ctx td + td { background: #f8f9fa; color: #54595d; }
ins { background: #d8ecff; text-decoration: none; }
del { background: #feeec8; }

ul.special { margin-bottom: 1em; }
.mw-search-results { list-style: none; margin: 1em 0 0; max-width: 38em; }
.mw-search-results li { padding-bottom: 1.2em; }
.mw-search-result-heading { font-size: 108%; }
.mw-search-result-data { color: #14866d; font-size: 97%; }
.search-page input[type=search] { width: 25em; max-width: 100%; }
.search-page select, .search-page label { margin-top: .5em; }

/* Main page */
#mp-topbanner { width: 100%; margin: .6em 0 1em; border: 1px solid #ddd; background: #f9f9f9; text-align: center; }
#mp-topbanner td { padding: .6em; }
#mp-welcome { font-family: 'Linux Libertine', 'Georgia', 'Times', serif; font-size: 162%; }
#mp-count { font-size: 85%; margin-top: .3em; }
.mp-row { display: flex; gap: 1em; align-items: flex-start; }
.mp-left { flex: 55; min-width: 0; }
.mp-right { flex: 45; min-width: 0; }
#content .mp-h2 { margin: 0; padding: .2em .4em; font: bold 120% sans-serif; border: 1px solid; }
.mp-h2.green { background: #cef2e0; border-color: #a3bfb1; }
.mp-h2.blue { background: #cedff2; border-color: #a3b0bf; }
.mp-box { padding: .1em .6em .4em; margin-bottom: 1em; border: 1px solid; border-top: 0; }
.mp-box.green { background: #f5fffa; border-color: #cef2e0; }
.mp-box.blue { background: #f5faff; border-color: #cedff2; }
.mp-book img { vertical-align: middle; }
.mp-tags { list-style: none; margin-left: 0; }
.mp-tags .chips { margin: 0 .3em 0 0; }

.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
h1 + .chips { margin: 0 0 10px; }
.chip { display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 6px; border-radius: 2px; color: #fff; white-space: nowrap; vertical-align: middle; }
a.chip-link:hover { text-decoration: none; opacity: .85; }
.t-class-d { background: #e8710a; }
.t-class-e { background: #f2b90d; color: #202122; }
/* Keycards, after the in-game clearance cards */
.chip.card { width: auto; height: 20px; padding: 0 5px; border-radius: 3px; line-height: 20px; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.chip.card.t-class-e { color: #202122; }
.card-top { display: flex; align-items: center; gap: 4px; font: bold 13px/20px "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; letter-spacing: .2px; }
.card-top svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.t-level-0 { background: #9f9a8e; }
.t-level-1 { background: #6fae6c; }
.t-level-2 { background: #dca22a; }
.t-level-3 { background: #b5773f; }
.t-level-4 { background: #d23a2f; }
.t-level-5 { background: #2638b5; }
.t-omni { background: #161616; }
@media (prefers-color-scheme: dark) {
  .chip.card, .chip.dept { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
  .t-omni { box-shadow: inset 0 0 0 1px #555; }
}

/* Department chips: boxed badge with shortcut + icon */
.chip.dept {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  font: bold 12px/20px "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  letter-spacing: .2px;
  color: #fff;
  vertical-align: middle;
  line-height: 20px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.chip.dept img.dept-icon {
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.t-fp { background: #4a5568; }
.t-sd { background: #3b6e8c; }
.t-scd { background: #2e7d77; }
.t-ec { background: #7a823b; }
.t-ad { background: #606f7b; }
.t-et { background: #b8860b; }

/* Editor */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fields label, label.reason, .retire label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.fields small { font-size: 12px; }
.tag-picker { border: 1px solid var(--border); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; }
.tag-picker label { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tag-name { font-size: 13px; color: var(--text); }
#body { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
label.reason { margin: 10px 0; }
.buttons { display: flex; gap: 8px; margin: 10px 0; }
.preview { border: 1px dashed var(--border); padding: 8px 16px; margin: 12px 0; }
.retire { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 8px; }
.retire form { display: grid; gap: 8px; max-width: 420px; margin-top: 8px; }
.conflict { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.conflict > div { border: 1px solid var(--border); padding: 8px; min-width: 0; }
.conflict pre { white-space: pre-wrap; }
dialog.wl-dialog { background: var(--bg); color: var(--text); border: 1px solid var(--border); width: min(460px, 92vw); }
.wl-dialog ul { list-style: none; padding: 0; max-height: 260px; overflow-y: auto; }
.wl-dialog li button { width: 100%; text-align: left; background: none; border: 0; padding: 4px; }
.wl-dialog li button:hover { background: var(--soft); }
.wl-dialog input { width: 100%; }
.wikilink-btn { font: bold 12px ui-monospace, Menlo, monospace !important; background: none !important; width: auto !important; padding: 0 6px !important; }

@media (prefers-color-scheme: dark) {
  :root { --text: #eaecf0; --muted: #a2a9b1; --border: #3a3f45; --bg: #1b1f24; --soft: #232a31; }
  body { background: #101418; color: #eaecf0; }
  #mw-page-base { background: linear-gradient(#1b1f24 50%, #101418 100%); }
  #content, ul.vectorTabs li.selected, #p-search input, #suggest, input, select, textarea { background: #1b1f24; color: #eaecf0; }
  #content { border-color: #3a5a7a; }
  ul.vectorTabs li { background: linear-gradient(to top, #3a5a7a 0, #232a31 1px, #1b1f24 100%); }
  ul.vectorTabs li.selected a, ul.vectorTabs li.selected span, h1, h2, h3, h4, #footer, .infobox, pre, code { color: #eaecf0; }
  h1, h2 { border-color: #54595d; }
  a, button.linkish, ul.vectorTabs li a { color: #88a3e8; }
  a:visited { color: #a893e0; }
  a.new, a.new:visited { color: #ff7b7b; }
  #siteSub, .portal h3 { color: #a2a9b1; }
  pre, code, .infobox, .body table, #mp-topbanner, table.diff tr.ctx td + td, #pagehistory li.selected, button, #p-search button { background: #232a31; border-color: #3a3f45; color: #eaecf0; }
  .body th { background: #2c333a; }
  .ambox, .callout { background: #232a31; }
  .mw-revision { background: #3a3218; border-color: #8a6d1a; }
  .banner-error { background: #43201e; }
  #pagehistory li { border-color: #1b1f24; }
  .mw-search-result-data { color: #5ec4a6; }
  ins { background: #1d3350; } del { background: #45391a; }
  .mp-h2.green { background: #1f3a2d; border-color: #2f5a44; } .mp-box.green { background: #17231d; border-color: #1f3a2d; }
  .mp-h2.blue { background: #1f2d3f; border-color: #2f4560; } .mp-box.blue { background: #171e27; border-color: #1f2d3f; }
  #mp-topbanner { border-color: #3a3f45; }
  .chip.card, .chip.dept { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
  .t-omni { box-shadow: inset 0 0 0 1px #555; }
}

@media (max-width: 720px) {
  #mw-page-base { height: auto; }
  #mw-head { position: static; display: flex; flex-wrap: wrap; align-items: center; background: #fff; border-bottom: 1px solid #a7d7f9; }
  .hamburger { display: flex; flex-direction: column; gap: 4px; padding: .8em .6em; cursor: pointer; }
  .hamburger span { display: block; width: 20px; height: 2px; background: #202122; }
  #p-personal { position: static; margin-left: auto; font-size: .8125em; }
  #p-personal ul { padding-left: 0; }
  #p-personal li { margin: 0 .75em 0 0; }
  #left-navigation { display: none; }
  #right-navigation { float: none; width: 100%; margin: 0; display: flex; flex-direction: column-reverse; }
  ul.vectorTabs { float: none; }
  #p-search { float: none; display: flex; margin: 0 .6em .5em; }
  #p-search input { flex: 1; width: auto; }
  #mw-head { order: -1; }
  body { display: flex; flex-direction: column; }
  #mw-panel { display: none; position: static; width: auto; padding: .5em; background: #fff; border-bottom: 1px solid #a7d7f9; order: 0; }
  #p-logo { display: none; }
  .nav-toggle:checked ~ #mw-panel { display: block; }
  #content { margin: 0; padding: 1em; border-left: 0; border-top: 0; order: 1; }
  #footer { margin: 0; order: 2; }
  .infobox { float: none; width: auto; margin: 0 0 1em; }
  .ambox, .callout { width: auto; margin-left: 0; margin-right: 0; }
  .mp-row { flex-direction: column; gap: 0; }
  .mp-left, .mp-right { width: 100%; }
  .conflict { grid-template-columns: 1fr; }
  .firstHeading { font-size: 1.7em; }
}
@media (max-width: 720px) and (prefers-color-scheme: dark) {
  #mw-head, #mw-panel { background: #1b1f24; border-color: #3a5a7a; }
  .hamburger span { background: #eaecf0; }
}