/* BMWeb wiki. A MediaWiki-shaped page (sidebar, contents box, infobox,
   ruled headings, bordered tables, category bar) in BMWeb's colours, dark by
   default and light when the system asks for it.
   Pages are generated by scripts/build/build-wiki.mjs; edit the sources in
   scripts/wiki/pages/, not the .html beside this file. */

:root {
  --bg: #0d1217;
  --page: #11171d;
  --panel: #161e26;
  --panel-2: #1b242d;
  --line: #26313b;
  --line-2: #33414d;
  --ink: #e8edf2;
  --dim: #a3b0bb;
  --faint: #6b7987;
  --link: #7fb2ff;
  --link-visited: #a99cff;
  --link-new: #ff7b72;
  --amber: #ff9e2c;
  --serif: 'Linux Libertine', 'Georgia', 'Times', serif;
  --sans:
    'Inter', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ev-car: #ffb35c;
  --ev-emu: #7fdcae;
  --ev-code: #9cbcff;
  --ev-data: #8fd0e6;
  --ev-field: #c9a8ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f6f6;
    --page: #ffffff;
    --panel: #f8f9fa;
    --panel-2: #eaecf0;
    --line: #c8ccd1;
    --line-2: #a2a9b1;
    --ink: #202122;
    --dim: #3a3d40;
    --faint: #72777d;
    --link: #3366cc;
    --link-visited: #795cb2;
    --link-new: #d73333;
    --amber: #c76a00;
    --ev-car: #a85a00;
    --ev-emu: #1a7f4f;
    --ev-code: #2f5fb8;
    --ev-data: #1f6f8b;
    --ev-field: #6b3fb5;
    color-scheme: light;
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:visited {
  color: var(--link-visited);
}
a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------ layout -- */
.shell {
  display: flex;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}
.side {
  flex: none;
  width: 190px;
  padding: 18px 14px 40px 18px;
  font-size: 13.5px;
}
.main {
  flex: 1;
  min-width: 0;
  padding: 14px 24px 0 0;
}
@media (max-width: 820px) {
  .shell {
    display: block;
  }
  .side {
    width: auto;
    padding: 12px 16px 0;
  }
  .side .portal {
    display: none;
  }
  .side.open .portal {
    display: block;
  }
  .main {
    padding: 8px 0 0;
  }
}

/* ----------------------------------------------------------- sidebar -- */
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink) !important;
  text-decoration: none !important;
  margin: 0 0 18px;
}
.logo-link svg {
  width: 44px;
  height: 44px;
  flex: none;
}
/* The site logo's parts, for builds whose logo is drawn with classes. */
.logo-link .logo-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.logo-link .q-white {
  fill: #e8edf2;
}
.logo-link .q-color {
  fill: var(--amber);
}
.logo-link .wm {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.15;
}
.logo-link .wm small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.menu-btn {
  display: none;
}
@media (max-width: 820px) {
  .side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo-link {
    margin: 0;
  }
  .menu-btn {
    display: block;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
}
.portal {
  margin: 0 0 18px;
}
.portal h3 {
  margin: 0 0 6px;
  padding-bottom: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.portal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal li {
  margin: 0;
  padding: 3px 0;
  line-height: 1.35;
}
.portal li.here > a {
  color: var(--ink);
  font-weight: 600;
}

/* Search */
.search {
  position: relative;
  margin: 0 0 18px;
}
@media (max-width: 820px) {
  .search {
    margin: 12px 0 14px;
  }
}
.search input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 6px 8px;
}
.search input:focus {
  outline: 2px solid var(--link);
  outline-offset: -1px;
}
.search-results {
  display: none;
  position: absolute;
  z-index: 10;
  left: 0;
  right: -120px;
  top: 100%;
  margin-top: 2px;
  background: var(--page);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  max-height: 60vh;
  overflow-y: auto;
}
@media (max-width: 820px) {
  .search-results {
    right: 0;
  }
}
.search-results.open {
  display: block;
}
.search-results a {
  display: block;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink) !important;
  text-decoration: none !important;
}
.search-results a:hover,
.search-results a.sel {
  background: var(--panel-2);
}
.search-results b {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
}
.search-results span {
  display: block;
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.4;
}
.search-results .none {
  padding: 8px 10px;
  color: var(--faint);
  font-size: 13px;
}

/* -------------------------------------------------------------- tabs -- */
.tabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  font-size: 13px;
}
.tabs ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs li a {
  display: block;
  padding: 6px 12px 7px;
  color: var(--link);
  background: var(--bg);
  border: 1px solid transparent;
  border-bottom: 0;
}
.tabs li.on a {
  color: var(--ink);
  background: var(--page);
  border-color: var(--line);
  text-decoration: none;
}
@media (max-width: 820px) {
  .tabs {
    padding: 0 16px;
  }
}

/* -------------------------------------------------------------- page -- */
.content {
  background: var(--page);
  border: 1px solid var(--line);
  padding: 18px 28px 28px;
  min-width: 0;
}
@media (max-width: 820px) {
  .content {
    border-left: 0;
    border-right: 0;
    padding: 14px 16px 24px;
  }
}
.firstHeading {
  margin: 0 0 2px;
  padding-bottom: 4px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  border-bottom: 1px solid var(--line-2);
}
.tagline {
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--faint);
}
.body {
  overflow-wrap: break-word;
}
.body::after {
  content: '';
  display: block;
  clear: both;
}
.body > p.lead,
.body p,
.body ul,
.body ol {
  margin: 0 0 12px;
}
.body h2 {
  clear: both;
  margin: 26px 0 10px;
  padding-bottom: 3px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.35;
  border-bottom: 1px solid var(--line-2);
}
.body h3 {
  margin: 20px 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
}
.body h4 {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.body section {
  scroll-margin-top: 12px;
}
.body .section-note {
  color: var(--faint);
  font-style: italic;
}
.body ul,
.body ol {
  padding-left: 22px;
}
.body li {
  margin-bottom: 4px;
}
.body b,
.body strong {
  font-weight: 600;
}
.body code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 4px;
}
.body pre {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.body pre code {
  border: 0;
  padding: 0;
  background: none;
}
.hatnote {
  margin: 0 0 12px;
  padding-left: 22px;
  font-style: italic;
  color: var(--dim);
}

/* Contents box */
.toc {
  display: table;
  margin: 4px 0 18px;
  padding: 8px 14px 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  font-size: 13.5px;
}
.toc-title {
  text-align: center;
  font-weight: 600;
  margin: 0 0 4px;
}
.toc-title button {
  font: inherit;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc ol ol {
  padding-left: 18px;
}
.toc li {
  margin: 2px 0;
}
.toc .num {
  color: var(--dim);
  padding-right: 6px;
}
.toc.hidden ol {
  display: none;
}

/* Infobox */
.infobox {
  float: right;
  clear: right;
  width: 290px;
  margin: 0 0 14px 20px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.45;
}
.infobox caption {
  padding: 6px 8px;
  font-weight: 600;
  font-size: 14.5px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-bottom: 0;
}
.infobox th,
.infobox td {
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.infobox th {
  width: 38%;
  font-weight: 600;
}
@media (max-width: 680px) {
  .infobox {
    float: none;
    width: 100%;
    margin: 0 0 14px;
  }
}

/* Tables */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 14px;
}
.wikitable {
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line-2);
  font-size: 14px;
}
.wikitable th,
.wikitable td {
  border: 1px solid var(--line-2);
  padding: 5px 9px;
  vertical-align: top;
  text-align: left;
}
.wikitable thead th {
  background: var(--panel-2);
  text-align: center;
  font-weight: 600;
}
.wikitable tbody th {
  font-weight: 600;
  white-space: nowrap;
}

/* Boxes in the text */
.callout {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--amber);
}
.callout.plain {
  border-left-color: var(--line-2);
}
.callout h4 {
  margin: 0 0 4px;
}
.callout p {
  margin: 0;
}

/* Evidence tags: where a fact comes from. */
.ev {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: 1px;
  white-space: nowrap;
  color: var(--faint);
  text-decoration: none !important;
}
.ev.car {
  color: var(--ev-car);
}
.ev.emu {
  color: var(--ev-emu);
}
.ev.code {
  color: var(--ev-code);
}
.ev.data {
  color: var(--ev-data);
}
.ev.field {
  color: var(--ev-field);
}

/* Main page */
.mp-welcome {
  margin: 0 0 16px;
  padding: 14px 18px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.mp-welcome h2 {
  margin: 0 0 4px;
  border: 0;
  font-size: 26px;
}
.mp-welcome p {
  margin: 0;
  color: var(--dim);
}
.mp-cols {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
}
@media (min-width: 900px) {
  .mp-cols {
    grid-template-columns: 1fr 1fr;
  }
}
.mp-box {
  border: 1px solid var(--line-2);
  background: var(--panel);
}
.mp-box > h2 {
  margin: 0;
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-2);
}
.mp-box > div {
  padding: 10px 14px;
}
.mp-box dl {
  margin: 0;
}
.mp-box dt {
  font-weight: 600;
}
.mp-box dd {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 14px;
}
.mp-box dd:last-child {
  margin-bottom: 0;
}

/* Category bar and footer */
.catlinks {
  clear: both;
  margin: 24px 0 0;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  font-size: 13.5px;
}
.catlinks ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.catlinks li {
  display: inline;
  padding: 0 8px;
  border-left: 1px solid var(--line-2);
}
.catlinks li:first-child {
  border-left: 0;
}
.footer {
  padding: 14px 4px 30px;
  font-size: 12.5px;
  color: var(--faint);
}
.footer p {
  margin: 0 0 4px;
}
@media (max-width: 820px) {
  .footer {
    padding: 14px 16px 30px;
  }
}