/* Vector 2022 look, values measured from en.wikipedia.org (2026-10-26) */
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: #fff; color: #202122; font-family: sans-serif; font-size: 16px; }
a { color: #36c; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #6a60b0; }
a.new, a.new:visited { color: #d73333; }

/* header */
.vector-header { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 24px; max-width: 1596px; margin: 0 auto; }
.header-start { display: flex; align-items: center; gap: 16px; }
.hamburger { font-size: 20px; color: #54595d; width: 32px; text-align: center; }
.mw-logo { display: flex; align-items: center; gap: 10px; color: #202122; }
.mw-logo:hover { text-decoration: none; }
.mw-logo svg, .mw-logo img { width: 50px; height: 50px; }
.wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.wm-name { font-family: "Linux Libertine", Georgia, Times, serif; font-size: 22px; letter-spacing: .02em; color: #000; }
.wm-name small { font-size: 17px; }
.wm-tag { font-family: "Linux Libertine", Georgia, Times, serif; font-size: 13px; color: #000; }
.search { display: flex; flex: 0 1 500px; }
.search input { flex: 1; height: 32px; padding: 0 8px; border: 1px solid #72777d; border-radius: 2px 0 0 2px; font-size: 14px; }
.search button { height: 32px; padding: 0 12px; border: 1px solid #a2a9b1; border-left: 0; background: #f8f9fa; color: #202122;
  font-weight: bold; font-size: 14px; border-radius: 0 2px 2px 0; }
.header-end { margin-left: auto; display: flex; gap: 16px; font-size: 14px; white-space: nowrap; }
.header-end a:first-child { color: #36c; }

/* page */
.page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 1596px; margin: 0 auto; padding: 0 24px; }
.sidebar { padding-top: 12px; }
.vector-toc { position: sticky; top: 12px; font-size: 14px; max-height: calc(100vh - 24px); overflow: auto; }
.toc-title { font-weight: bold; padding: 6px 0; border-bottom: 1px solid #c8ccd1; margin-bottom: 6px; }
.toc-hide { font-weight: normal; color: #36c; font-size: 12px; padding: 1px 6px; border: 1px solid #a2a9b1; border-radius: 2px; margin-left: 8px; }
.vector-toc ul { list-style: none; margin: 0; padding: 0; }
.vector-toc li { padding: 4px 0; }
.vector-toc .toc-l3 { padding-left: 12px; }
.content { min-width: 0; padding-bottom: 40px; }
#firstHeading { font-family: "Linux Libertine", Georgia, Times, "Source Serif 4", serif; font-size: 28.8px; line-height: 39.6px;
  font-weight: normal; margin: 12px 0 0; padding-bottom: 4px; border-bottom: 1px solid #a2a9b1; }
.toolbar { display: flex; justify-content: space-between; font-size: 14px; margin-top: 2px; }
.tabs { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.tabs li a { display: block; padding: 8px 0 6px; color: #36c; }
.tabs li.selected a { color: #202122; border-bottom: 2px solid #202122; }
#siteSub { font-size: 14px; margin: 10px 0 6px; }

/* article body */
.mw-parser-output { font-size: 16px; line-height: 1.625; }
.mw-parser-output p { margin: 8px 0 16px; }
.mw-heading { display: flex; align-items: baseline; gap: 8px; clear: none; }
.mw-heading h2, .mw-heading h3 { margin: 0; }
.mw-heading2 { font-family: "Linux Libertine", Georgia, Times, "Source Serif 4", serif; font-size: 24px; border-bottom: 1px solid #a2a9b1;
  margin: 18px 0 4px; padding-bottom: 4px; line-height: 1.375; }
.mw-heading2 h2 { font-size: inherit; font-weight: normal; }
.mw-heading3 { font-size: 19.2px; font-weight: bold; margin: 14px 0 2px; }
.mw-heading3 h3 { font-size: inherit; }
.mw-editsection { font-family: sans-serif; font-size: 14px; font-weight: normal; color: #54595d; }
.mw-editsection a { color: #36c; padding: 0 2px; }
.hatnote { font-style: italic; padding-left: 25.6px; margin-bottom: 8px; }
sup.reference, sup.Inline-Template { font-size: 11.264px; line-height: 1; white-space: nowrap; }
.Inline-Template a { color: #36c; }
.reflist { font-size: 14.4px; }
.references { padding-left: 2.2em; margin: 4px 0; }
.mw-cite-backlink { margin-right: 4px; }
cite { font-style: normal; }
.mw-revision { background: #fef6e7; border: 1px solid #fc3; padding: 6px 12px; font-size: 14px; margin-bottom: 12px; }

/* infobox */
.infobox { float: right; clear: right; width: 22em; margin: 0 0 16px 16px; border: 1px solid #a2a9b1; background: #f8f9fa;
  padding: 2.8px; border-spacing: 3px; font-size: 14.08px; line-height: 1.5; color: #202122; }
.infobox-above { font-size: 125%; font-weight: bold; text-align: center; padding: 4px; }
.infobox-image { text-align: center; padding: 4px 0; }
.infobox-image img { max-width: 100%; height: auto; }
.infobox-caption { font-size: 14.08px; line-height: 1.4; padding-top: 2px; }
.flagcoa { display: flex; justify-content: space-around; align-items: flex-end; }
.flagcoa img { border: 0; }
.infobox-header { text-align: center; background: #e1e1ff; padding: 2px 4px; }
.infobox-label { text-align: left; vertical-align: top; padding-right: 8px; white-space: normal; }
.infobox-data { vertical-align: top; }

/* message boxes */
.ambox { width: 80%; margin: 0 10% 12px; border: 1px solid #a2a9b1; border-left: 10px solid #36c; background: #fbfbfb;
  font-size: 14px; line-height: 1.4; border-collapse: collapse; }
.ambox-content { border-left-color: #f28500; }
.ambox td { padding: 4px 8px; }
.ambox ul { margin: 4px 0 0 18px; padding: 0; }
.mbox-image { width: 40px; text-align: center; font-size: 26px; color: #f28500; }
.stub { margin: 16px 0; font-size: 14px; }
.stub td { padding: 2px 6px; }

/* navbox, categories */
.navbox { clear: both; width: 100%; margin-top: 24px; border: 1px solid #a2a9b1; font-size: 14.08px; border-spacing: 2px; }
.navbox-title { background: #ccf; text-align: center; padding: 4px; position: relative; }
.navbar { position: absolute; left: 6px; font-size: 12px; font-weight: normal; }
.navbox-list { padding: 4px 8px; background: #fff; line-height: 1.6; }
#catlinks { clear: both; margin-top: 16px; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 5px; font-size: 14px; }

/* talk, history, special */
.talk-indent-1 { margin-left: 1.6em; } .talk-indent-2 { margin-left: 3.2em; } .talk-indent-3 { margin-left: 4.8em; } .talk-indent-4 { margin-left: 6.4em; }
dl, dd { margin: 0; }
.mw-history, .special { font-size: 14px; line-height: 1.8; }
.mw-plusminus-pos { color: #006400; } .mw-plusminus-neg { color: #8b0000; }
.history-size { color: #54595d; }
.comment { font-style: italic; color: #54595d; }
.newpage { font-weight: bold; text-decoration: none; }
.noarticletext { border: 1px solid #a2a9b1; background: #f8f9fa; padding: 8px 12px; }
.wikitable { border-collapse: collapse; background: #f8f9fa; font-size: 14px; }
.wikitable th, .wikitable td { border: 1px solid #a2a9b1; padding: 4px 10px; text-align: left; }
.wikitable th { background: #eaecf0; }

/* main page */
#mp-welcome { text-align: center; background: #f6f6f6; border: 1px solid #ddd; padding: 12px; margin: 8px 0; }
#mp-welcome h1 { font-family: "Linux Libertine", Georgia, Times, serif; font-weight: normal; font-size: 28px; margin: 0; }
#mp-welcome p { margin: 2px 0; font-size: 14px; }
.mp-planet { text-align: center; font-size: 14px; }
.mp-cols { display: grid; grid-template-columns: 55% 45%; gap: 0 10px; }
.mp-box { border: 1px solid #a3bfb1; background: #f5fffa; margin-bottom: 10px; }
.mp-h2 { margin: 3px; padding: 2px 6px; background: #cef2e0; border: 1px solid #a3bfb1; font-family: sans-serif; font-size: 16px; font-weight: bold; }
.mp-itn, .mp-otd { border-color: #a3b0bf; background: #f5faff; }
.mp-itn .mp-h2, .mp-otd .mp-h2 { background: #cedff2; border-color: #a3b0bf; }
.mp-body { padding: 4px 10px; font-size: 14px; line-height: 1.5; }
.mp-body ul { padding-left: 18px; }
.mp-img { float: left; margin: 4px 10px 4px 0; border: 1px solid #c8ccd1; }

/* footer */
.mw-footer { border-top: 1px solid #a2a9b1; max-width: 1596px; margin: 24px auto 0; padding: 12px 24px 32px; font-size: 12px; color: #202122; }
.mw-footer ul { list-style: none; padding: 0; margin: 0 0 0 252px; }
.mw-footer li { padding: 4px 0; }

@media (max-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .sidebar { display: none; }
  .vector-header { padding: 0 16px; gap: 12px; }
  .header-end { display: none; }
  .mw-footer ul { margin-left: 0; }
  .mp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .infobox { float: none; width: 100%; margin: 0 0 16px; }
  .wordmark { display: none; }
}

/* main menu (hamburger) */
.main-menu { position: relative; }
.main-menu summary { list-style: none; cursor: pointer; }
.main-menu summary::-webkit-details-marker { display: none; }
.main-menu nav { position: absolute; top: 40px; left: 0; z-index: 10; width: 200px; background: #fff; border: 1px solid #a2a9b1;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); padding: 8px 0; font-size: 14px; }
.main-menu nav a { display: block; padding: 6px 16px; }
.menu-head { padding: 4px 16px 6px; color: #72777d; font-weight: bold; border-bottom: 1px solid #eaecf0; margin-bottom: 4px; }

/* graph view */
.graph-wrap { position: relative; height: 74vh; min-height: 420px; border: 1px solid #a2a9b1; border-radius: 2px; overflow: hidden; }
#graph { width: 100%; height: 100%; display: block; touch-action: none; }
#graph-tip { position: absolute; display: none; pointer-events: none; background: #2b2b2b; color: #dcddde; font-size: 12px;
  padding: 3px 8px; border-radius: 4px; border: 1px solid #444; white-space: nowrap; }
.graph-legend { position: absolute; left: 10px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #bbb; }
.gl i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

/* portal (wikipedia.org-style home) */
body.portal { background: #fff; }
.portal-main { max-width: 760px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.portal-title { font-family: "Linux Libertine", Georgia, Times, serif; font-weight: normal; font-size: 44px; margin: 0 0 8px; letter-spacing: .02em; }
.portal-title small { display: block; font-size: 18px; color: #54595d; }
.portal-ring { position: relative; height: 330px; margin: 8px auto 16px; max-width: 640px; }
.portal-globe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.portal-globe svg, .portal-globe img { width: 180px; height: 180px; }
.spot { position: absolute; width: 190px; line-height: 1.3; }
.spot b { display: block; font-size: 17px; font-weight: normal; }
.spot small { color: #54595d; font-size: 13px; }
.spot0 { left: 4%; top: 6%; text-align: right; } .spot1 { right: 4%; top: 6%; text-align: left; }
.spot2 { left: 0; top: 33%; text-align: right; } .spot3 { right: 0; top: 33%; text-align: left; }
.spot4 { left: 0; top: 60%; text-align: right; } .spot5 { right: 0; top: 60%; text-align: left; }
.spot6 { left: 4%; top: 86%; text-align: right; } .spot7 { right: 4%; top: 86%; text-align: left; }
.portal-search { margin: 0 auto; max-width: 540px; }
.portal-search input { height: 40px; font-size: 16px; }
.portal-search button { height: 40px; background: #36c; color: #fff; border-color: #36c; }
.portal-foot { color: #54595d; font-size: 13px; margin-top: 28px; }
@media (max-width: 640px) {
  .portal-ring { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .portal-globe { position: static; transform: none; grid-column: 1 / -1; }
  .portal-globe svg, .portal-globe img { width: 120px; height: 120px; }
  .spot { position: static; width: auto; text-align: center !important; }
}

/* world map */
.worldmap-wrap { border: 1px solid #a2a9b1; background: #c6ecff; line-height: 0; }
.worldmap-wrap svg { width: 100%; height: auto; display: block; }

/* tools dropdown */
.tools { position: relative; }
.tools summary { list-style: none; cursor: pointer; color: #36c; padding: 8px 0 6px; }
.tools summary::-webkit-details-marker { display: none; }
.tools nav { position: absolute; right: 0; top: 34px; z-index: 10; width: 180px; background: #fff; border: 1px solid #a2a9b1;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); padding: 8px 0; }
.tools nav a { display: block; padding: 6px 16px; }

/* page previews */
.preview-card { display: none; position: absolute; z-index: 20; width: 320px; background: #fff; border-radius: 2px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.3), 0 0 1px 1px rgba(0,0,0,.05); font-size: 14px; line-height: 1.6; overflow: hidden; }
.preview-card img { display: block; width: 100%; max-height: 190px; object-fit: cover; background: #f8f9fa; }
.preview-card p { margin: 0; padding: 12px 16px; color: #202122; }

/* diffs (MediaWiki colours) */
.diff { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; margin-bottom: 16px; }
.diff th { text-align: center; font-weight: normal; padding: 6px; vertical-align: top; }
.diff td { padding: 4px 6px; vertical-align: top; white-space: pre-wrap; word-wrap: break-word; }
.diff .dmark { width: 18px; text-align: right; color: #54595d; font-weight: bold; }
.diff .ddel { background: #fef6e7; border: 1px solid #ffe49c; border-left: 4px solid #ffe49c; }
.diff .dadd { background: #eaf3ff; border: 1px solid #a3d3ff; border-left: 4px solid #a3d3ff; }
.diff .dctx { color: #54595d; background: #f8f9fa; border: 1px solid #eaecf0; border-left: 4px solid #eaecf0; }
.diff .dgap { text-align: center; color: #a2a9b1; }
.diff del { background: #ffe49c; text-decoration: none; font-weight: bold; }
.diff ins { background: #a3d3ff; text-decoration: none; font-weight: bold; }

/* category listing */
.mw-category { column-width: 220px; }
.cat-group { break-inside: avoid; }
.cat-group h3 { margin: 6px 0 2px; font-size: 16px; }
.cat-group ul { margin: 0 0 8px; padding-left: 18px; }

/* statistics charts */
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.chart { margin: 0; border: 1px solid #c8ccd1; padding: 8px 10px; background: #fff; }
.chart figcaption { font-size: 13px; color: #54595d; display: flex; justify-content: space-between; }
.chart figcaption span { color: #202122; font-weight: bold; }
.chart svg { width: 100%; height: 90px; display: block; margin: 4px 0; background: #f8f9fa; }
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: #72777d; }
.archive-banner { background: #fef6e7; border-bottom: 1px solid #fc3; padding: 8px 24px; font-size: 14px; text-align: center; }

/* timeline */
.tl-row { margin: 4px 0 4px 1em; text-indent: -1em; }
.tl-src { color: #72777d; font-size: 13px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.gal-item { margin: 0; border: 1px solid #c8ccd1; background: #f8f9fa; padding: 6px; }
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eaecf0; }
.gal-item figcaption { font-size: 13px; line-height: 1.4; padding-top: 6px; }
.gal-item figcaption span { color: #54595d; }

/* trivia */
.trivia { max-width: 680px; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 16px 20px; }
.tv-head { font-size: 13px; color: #54595d; }
.tv-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #72777d; margin-top: 8px; }
.tv-q { font-family: "Linux Libertine", Georgia, Times, serif; font-size: 21px; line-height: 1.4; margin: 6px 0 14px; }
.tv-options { display: grid; gap: 8px; }
.tv-opt, .tv-next { font: inherit; font-size: 15px; text-align: left; padding: 9px 14px; border: 1px solid #a2a9b1;
  border-radius: 2px; background: #fff; color: #202122; cursor: pointer; }
.tv-opt:hover:not(:disabled) { background: #eaf3ff; border-color: #36c; }
.tv-opt:disabled { cursor: default; }
.tv-right { background: #d5fdf4 !important; border-color: #14866d !important; font-weight: bold; }
.tv-wrong { background: #fee7e6 !important; border-color: #d33 !important; }
.tv-feedback { margin: 12px 0 8px; }
.tv-next { background: #36c; color: #fff; border-color: #36c; text-align: center; margin-top: 4px; }
.tl-now { border-top: 2px solid #36c; padding-top: 6px; margin-top: 12px; color: #36c; }

/* search results */
.sr-count { color: #54595d; font-size: 14px; }
.mw-search-results { list-style: none; padding: 0; }
.mw-search-results li { margin-bottom: 14px; }
.sr-title { font-size: 17px; }
.sr-snip { font-size: 14px; color: #202122; }
.sr-snip b { background: #fef6e7; }
/* reference preview and sortable tables */
.ref-card p { font-size: 13px; }
table.sortable th { cursor: pointer; }
table.sortable th::after { content: " ⇅"; color: #a2a9b1; font-size: 11px; }

/* growth tree */
.tree-wrap { position: relative; height: 78vh; min-height: 440px; border: 1px solid #a2a9b1; background: #1e1e1e; }
#tree { width: 100%; height: calc(100% - 44px); display: block; }
#tree-tip { position: absolute; display: none; pointer-events: none; background: #2b2b2b; color: #dcddde; font-size: 12px;
  padding: 3px 8px; border-radius: 4px; border: 1px solid #444; white-space: nowrap; }
.tree-controls { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; background: #262626; color: #bbb; font-size: 13px; }
.tree-controls button { background: #36c; color: #fff; border: 0; border-radius: 2px; padding: 5px 12px; font: inherit; cursor: pointer; }
.tree-controls input { flex: 1; }

/* section thumbnails, climate box */
figure.thumb { float: right; clear: right; margin: 6px 0 12px 16px; padding: 3px; border: 1px solid #c8ccd1; background: #f8f9fa;
  width: 258px; font-size: 13px; line-height: 1.4; }
figure.thumb img { display: block; width: 250px; height: auto; border: 1px solid #c8ccd1; background: #fff; }
figure.thumb figcaption { padding: 4px 3px 2px; }
table.climate { font-size: 12px; text-align: center; clear: both; margin: 8px 0 16px; }
table.climate th { font-size: 12px; white-space: nowrap; }
table.climate th:first-child { text-align: left; }
.climate-src { font-size: 11px; color: #54595d; text-align: left !important; background: #f8f9fa; }
@media (max-width: 640px) { figure.thumb { float: none; margin: 8px auto; } table.climate { display: block; overflow-x: auto; } }

/* live readers and upvotes */
.live-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 13px; color: #54595d; margin: 4px 0 -4px; }
.live-count { color: #14866d; }
.vote-btn { font: inherit; font-size: 13px; padding: 2px 10px; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; color: #202122; cursor: pointer; }
.vote-btn:hover { border-color: #36c; color: #36c; }
.vote-btn.voted { background: #eaf3ff; border-color: #36c; color: #36c; cursor: default; }