/* Dark Material theme matching the Craftstuebchen forum (XenForo UIX Dark). */

:root {
  --bg: #2d3238;
  --block: #383c42;
  --block-2: #42464d;
  --line: rgba(255, 255, 255, .12);
  --text: rgba(255, 255, 255, .9);
  --muted: rgba(188, 190, 183, .9);
  --faint: rgba(150, 153, 143, .9);
  --accent: #8bc34a;
  --accent-hover: #a4d070;
  --accent-dark: #6f9e3a;
  --radius: 4px;
  --shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
  --shadow-raised: 0 5px 10px 0 rgba(0, 0, 0, .35);
  --navbar-h: 3.25rem;
  --max: 80rem;
}

* { box-sizing: border-box; scrollbar-color: var(--block-2) transparent; scrollbar-width: thin; }

/* Blurred screenshot behind the whole page, same as the forum (pre-blurred image). */
html {
  scroll-padding-top: calc(var(--navbar-h) + 1rem);
  background: var(--bg) url("img/background.png") center / cover fixed;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

::selection { background: var(--accent); color: #fff; }

/* --- Content -------------------------------------------------------------- */

#content {
  padding: 2rem 2.25rem 2.5rem;
  background: var(--block);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-wrap: break-word;
}
#content::after { content: ""; display: block; clear: both; }
#content:focus { outline: none; }

/* Page switches (wiki.js swaps #content instead of reloading). */
.loading #content { opacity: .55; transition: opacity .15s .1s; }
#content.enter { animation: page-in .2s ease-out; }
@keyframes page-in { from { opacity: .4; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #content.enter { animation: none; } }

#content h1, #content h2, #content h3, #content h4 { position: relative; line-height: 1.3; }

#content h1 {
  margin: 0 0 1.5rem;
  padding-bottom: .9rem;
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
#content h2 {
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  clear: both;
}
#content h3 { margin-top: 1.75rem; font-size: 1.2rem; font-weight: 600; color: var(--accent); clear: both; }
#content h4 { font-size: 1.05rem; font-weight: 600; }

.anchor { margin-left: .5rem; color: var(--faint); opacity: 0; }
.anchor:hover { text-decoration: none; }
h1:hover > .anchor, h2:hover > .anchor, h3:hover > .anchor, h4:hover > .anchor, .anchor:focus { opacity: 1; }

#content img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* Commands like /is home */
code {
  padding: .12em .45em;
  color: #c5e1a5;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(139, 195, 74, .18);
  border-radius: 3px;
  font: .88em/1.4 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
}

/* Text colours from the old wiki are tuned for light backgrounds. */
[style*="color:#AA0000"] { color: #ef6b6e !important; }
[style*="color:#00AAAA"] { color: #4fd6d6 !important; }
[style*="color:#800080"] { color: #d58ad5 !important; }
[style*="background-color:#9F9"] { background-color: rgba(139, 195, 74, .2) !important; color: var(--accent-hover) !important; }
[style*="background-color:#F99"] { background-color: rgba(200, 68, 72, .22) !important; color: #ef8a8d !important; }

figure { margin: 1.25rem 0; }
figure.image { display: table; max-width: min(100%, 34rem); margin: 1.25rem auto; text-align: center; }
figure.image[style*="width"] { max-width: 100%; }
figure.image img { display: block; width: 100%; }
figure.image figcaption { padding-top: .4rem; font-size: .85rem; color: var(--muted); }
.image-style-align-right { float: right; margin: 0 0 1rem 1.75rem !important; }
.image-style-align-left { float: left; margin: 0 1.75rem 1rem 0 !important; }

details { margin: .75rem 0; background: var(--block-2); border-radius: var(--radius); overflow: hidden; }
summary { padding: .7rem 1rem; cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "›"; display: inline-block; width: 1.1rem; color: var(--accent); font-weight: 700; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }
summary:hover { background: rgba(255, 255, 255, .04); }
details[open] > summary { border-bottom: 1px solid var(--line); }
details > :not(summary) { margin-left: 1rem; margin-right: 1rem; }

.table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
figure.table .table-wrap { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .6rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 600; }
tr:last-child > th, tr:last-child > td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
thead th {
  background: var(--block-2);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
tr.group > th {
  padding: .5rem .85rem;
  color: var(--accent);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(139, 195, 74, .07);
  border-top: 1px solid var(--line);
}
th[scope="row"], td[rowspan] { background: rgba(255, 255, 255, .025); border-right: 1px solid var(--line); font-weight: 600; }
td > code:only-child, td > code + br + code { white-space: normal; }
td ul { margin: .25rem 0; padding-left: 1.1rem; }

#content .button {
  display: inline-block;
  margin: .25rem .15rem;
  padding: .5rem 1.25rem;
  color: #fff;
  font-weight: 600;
  background: var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#content a.button:hover { background: var(--accent-hover); text-decoration: none; }
#content span.button { background: var(--block-2); color: var(--muted); box-shadow: none; }

/* --- Content components --------------------------------------------------- */

/* Comfortable line length for running text. */
#content > p, #content > ul, #content > ol, #content > .callout, #content details p { max-width: 50rem; }
#content p, #content li { line-height: 1.7; }
#content li + li { margin-top: .3rem; }
#content ul ul { margin-top: .3rem; }

.lead { font-size: 1.1rem; color: var(--text); }
p.label { margin: 1.5rem 0 .5rem; }
p.label strong { color: var(--text); }
#content h4 { margin: 1.5rem 0 .4rem; color: var(--text); }

.facts { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.75rem; }
.facts div {
  padding: .55rem 1rem;
  background: var(--block-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.facts dt { color: var(--faint); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.facts dd { margin: 0; font-weight: 600; }

.callout {
  position: relative;
  padding: .85rem 1rem .85rem 2.9rem;
  background: rgba(139, 195, 74, .08);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout::before {
  content: "i";
  position: absolute;
  left: .9rem;
  top: .9rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  color: #1b1b1b;
  font: 700 .8rem/1 Georgia, serif;
  background: var(--accent);
  border-radius: 50%;
}
.callout.warning { background: rgba(255, 179, 0, .08); border-left-color: #ffb300; }
.callout.warning::before { content: "!"; background: #ffb300; font-family: inherit; }
.callout.danger { background: rgba(229, 83, 83, .1); border-left-color: #e55353; }
.callout.danger::before { content: "!"; background: #e55353; color: #fff; font-family: inherit; }
li.warning { padding: .35rem .6rem; margin-left: -.6rem; background: rgba(255, 179, 0, .08); border-radius: var(--radius); list-style: none; }
li.warning::before { content: "⚠ "; color: #ffb300; }

.status {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .2rem .7rem;
  font-size: .75rem;
  letter-spacing: .06em;
  color: #ffd54f;
  background: rgba(255, 213, 79, .12);
  border: 1px solid rgba(255, 213, 79, .35);
  border-radius: 999px;
}
.status strong, .status b { color: inherit; font-weight: 700; }

.footnote { margin-top: .5rem; color: var(--faint); font-size: .85rem; }
.footnote sup { color: var(--accent); }

ul.team { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
ul.team li { margin: 0 !important; padding: .45rem .85rem; background: var(--block-2); border-radius: var(--radius); font-weight: 600; }
.rank {
  margin-right: .35rem;
  padding: .05rem .45rem;
  color: #ff8a80;
  font-size: .8rem;
  font-weight: 700;
  background: rgba(229, 83, 83, .15);
  border-radius: 3px;
}

.rank-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.rank-card { padding: 1rem 1.25rem; background: var(--block-2); border-top: 3px solid var(--accent); border-radius: var(--radius); }
#content .rank-card h3 { margin: 0 0 .5rem; color: var(--accent); }
.rank-card ul { margin: 0; padding-left: 1.1rem; }

ol.steps { counter-reset: step; padding: 0; list-style: none; }
ol.steps li { position: relative; margin: 0 0 .6rem !important; padding: .55rem 1rem .55rem 3rem; background: var(--block-2); border-radius: var(--radius); counter-increment: step; }
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: .8rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -.75rem;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  background: var(--accent);
  border-radius: 50%;
}

.gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: 1.25rem 0; }
.gallery figure { margin: 0 !important; }

ul.link-list { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
ul.link-list li { margin: 0 !important; }
ul.link-list a {
  display: inline-block;
  padding: .5rem 1rem;
  color: #fff;
  font-weight: 600;
  background: var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
ul.link-list a::after { content: " ↗"; opacity: .8; }
ul.link-list a:hover { background: var(--accent-hover); text-decoration: none; }

figure.image figcaption { font-style: italic; }

/* --- Structured pages (e.g. Skyblock) ------------------------------------ */

[hidden] { display: none !important; }

/* Divider between the big areas of a long page. */
.part {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 3.5rem 0 -1rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.part::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "On this page" overview. */
.page-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--block-2);
  border-radius: var(--radius);
}
.page-index .index-title { margin: 0 0 .35rem; color: var(--faint); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.page-index ul { margin: 0; padding: 0; list-style: none; }
#content .page-index li { margin: 0; line-height: 1.9; }
.page-index a { color: var(--text); }
.page-index a:hover { color: var(--accent); }

/* Tiles: parallel pieces of information side by side. */
.tiles { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
.tile { padding: 1rem 1.15rem; background: var(--block-2); border-radius: var(--radius); border-top: 3px solid var(--accent); }
#content .tile h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--text); }
.tile > :last-child { margin-bottom: 0; }
.tile p { margin: .4rem 0; }
.tile ul { margin: .4rem 0; padding-left: 1.1rem; }
#content .tile .callout { margin: .75rem 0 0; }
.tile-badge {
  display: inline-block;
  margin: 0 0 .25rem !important;
  padding: .05rem .55rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  background: rgba(139, 195, 74, .14);
  border-radius: 999px;
}
.tile-badge.danger { color: #ff8a80; background: rgba(229, 83, 83, .15); vertical-align: middle; }

#content ul.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; padding: 0; list-style: none; }
#content ul.chips li { margin: 0; padding: .1rem .55rem; font-size: .85rem; line-height: 1.6; background: rgba(255, 255, 255, .06); border-radius: 3px; }
#content ul.chips li code { padding: 0; background: none; border: 0; }

/* Numbered steps with richer content (text + image). */
ol.steps-rich li { padding-top: .75rem; padding-bottom: .75rem; }
ol.steps-rich li::before { top: .8rem; margin-top: 0; }
ol.steps-rich li p { margin: 0; }
ol.steps-rich figure.image { margin: .75rem 0 .25rem; }
#content .callout p { margin: .2rem 0; }

/* Filter field (data-filter). */
.filter { position: relative; display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .75rem; }
.filter input {
  flex: 1;
  max-width: 26rem;
  padding: .55rem .85rem .55rem 2.2rem;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  background: var(--block-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a4a49c' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") .75rem 50% no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.filter input:focus { border-color: var(--accent); }
.filter-count { color: var(--faint); font-size: .85rem; }

/* Challenges. */
.challenge-list summary .count { margin-left: .5rem; color: var(--faint); font-size: .8rem; font-weight: 400; }
.challenges { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .85rem; margin: 1rem !important; }
.challenge { padding: .9rem 1rem; background: var(--block); border-radius: var(--radius); border-left: 3px solid var(--accent); }
#content .challenge h4 { margin: 0 0 .35rem; font-size: 1rem; color: var(--text); }
.challenge-desc { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.challenge-desc ul { margin: .2rem 0; padding-left: 1.1rem; }
#content .challenge-desc li { margin: 0; line-height: 1.5; }
td.nowrap { white-space: nowrap; }
.challenge-body { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; font-size: .85rem; }
.challenge-body ul { margin: .2rem 0 .4rem; padding-left: 1rem; }
#content .challenge-body li { margin: 0; line-height: 1.5; }
.challenge-label { margin: 0 0 .2rem; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Minecraft sign with explanation of its lines (Citybuild shops). */
.sign-example { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; margin: 1.25rem 0; }
.sign-caption { margin: 0 0 .35rem; color: var(--faint); font-size: .8rem; }
.sign {
  display: grid;
  gap: .1rem;
  width: 12rem;
  padding: .8rem .5rem;
  color: #1b1b1b;
  font: 600 1rem/1.35 ui-monospace, Consolas, monospace;
  text-align: center;
  background: repeating-linear-gradient(0deg, #b8945f 0 22px, #a8844f 22px 24px);
  border: 3px solid #6b5130;
  border-radius: 2px;
  box-shadow: 0 4px 0 #4a3820;
}
.sign span { min-height: 1.35em; }
ol.sign-lines { flex: 1; min-width: 16rem; margin: 0; padding-left: 1.4rem; }
ol.sign-lines li::marker { color: var(--accent); font-weight: 700; }

/* Big numbers side by side (e.g. VoteCoins per rank). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.stats div { padding: .9rem 1rem; text-align: center; background: var(--block-2); border-radius: var(--radius); border-top: 3px solid var(--accent); }
.stats dt { color: var(--muted); font-size: .85rem; }
.stats dd { margin: .2rem 0 0; color: var(--text); font-size: 1.8rem; font-weight: 600; }

/* Price lists inside tiles (Vote Shop). */
#content ul.price-list { margin: .25rem 0 0; padding: 0; list-style: none; }
#content ul.price-list li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .4rem 0; border-bottom: 1px solid var(--line); }
#content ul.price-list li:last-child { border-bottom: 0; }
ul.price-list b { color: var(--accent); white-space: nowrap; }
ul.price-list b::after { content: " Coins"; color: var(--faint); font-size: .8rem; font-weight: 400; }
dl.mini-facts { display: flex; gap: 1.5rem; margin: .25rem 0 0; }
dl.mini-facts dt { color: var(--faint); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
dl.mini-facts dd { margin: 0; font-weight: 600; }
.muted { color: var(--faint); }

/* Island level values grouped by level. */
.value-head { display: none; }
.level-groups { display: grid; gap: .5rem; }
.level-group { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; padding: .55rem .9rem; background: var(--block-2); border-radius: var(--radius); }
.level-group .level { margin: .15rem 0 0; color: var(--faint); font-size: .8rem; white-space: nowrap; }
.level-group .level b { color: var(--accent); font-size: 1.1rem; }
#content .level-group ul.chips { margin: 0; }

@media (max-width: 900px) {
  .challenge-body { grid-template-columns: 1fr; }
  .level-group { grid-template-columns: 1fr; gap: .25rem; }
}

/* --- Start page ----------------------------------------------------------- */

.home #content h1 { text-align: center; border-bottom: 0; padding-bottom: 0; }
.home .lead { max-width: 42rem; margin: 0 auto 1rem; font-size: 1.1rem; color: var(--muted); text-align: center; }
.hint { margin-top: 2rem; color: var(--faint); font-size: .9rem; text-align: center; }
.server-address { margin: 1.75rem 0 2.5rem; text-align: center; }
.server-address button {
  padding: .65rem 1.75rem .7rem;
  color: #fff;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.server-address button::after { content: "Klicken zum Kopieren"; display: block; font-size: .7rem; font-weight: 400; opacity: .85; }
.server-address button.copied::after { content: "✓ Kopiert!"; opacity: 1; }
.server-address button:hover { background: var(--accent-hover); }
.server-address button:active { transform: translateY(1px); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin: 1.25rem 0 2rem; }
.card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem;
  color: var(--muted);
  background: var(--block-2);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
#content .card img { width: 44px; height: 44px; margin-bottom: .5rem; border-radius: 0; image-rendering: pixelated; }
.card strong { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.card span { font-size: .9rem; line-height: 1.5; }
a.card:hover { text-decoration: none; color: var(--muted); transform: translateY(-2px); border-top-color: var(--accent); box-shadow: var(--shadow-raised); }
a.card:hover strong { color: var(--accent); }
.card-disabled { opacity: .55; }

/* --- Header, navbar, footer (added by wiki.js) ---------------------------- */

.site-header-inner { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem; }
.logo { position: relative; display: inline-block; }
.logo:hover { text-decoration: none; }
.logo img { display: block; width: auto; height: 4.5rem; max-width: 100%; }


.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.navbar-inner {
  display: flex;
  align-items: center;
  height: var(--navbar-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.navbar-brand, .navbar-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 0 1rem;
  color: #fff;
  font-weight: 600;
}
.navbar-brand { background: rgba(0, 0, 0, .12); }
.navbar-brand img { width: 1.75rem; height: 1.75rem; }
.navbar-brand:hover, .navbar-link:hover { color: #fff; text-decoration: none; background: rgba(0, 0, 0, .1); }
.navbar-brand:hover { background: rgba(0, 0, 0, .18); }

.menu-toggle {
  display: none;
  margin-right: .25rem;
  padding: .25rem .6rem;
  color: #fff;
  font-size: 1.35rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(0, 0, 0, .1); }

.search { position: relative; margin-left: auto; width: min(22rem, 100%); }
.search input {
  width: 100%;
  padding: .45rem .85rem;
  color: #fff;
  font: inherit;
  font-size: .95rem;
  background: rgba(0, 0, 0, .18);
  border: 0;
  border-radius: var(--radius);
  outline: none;
  transition: background .15s;
}
.search input::placeholder { color: rgba(255, 255, 255, .75); }
.search input:focus { background: rgba(0, 0, 0, .3); }

.search-results {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  width: min(32rem, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--block-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
}
.search-results[hidden] { display: none; }
.search-results a { display: block; padding: .6rem .8rem; color: inherit; border-radius: 3px; }
.search-results a:hover, .search-results a:focus { background: rgba(255, 255, 255, .06); text-decoration: none; outline: none; }
.search-results strong { display: block; color: var(--text); }
.search-results small { display: block; color: var(--accent); font-size: .75rem; }
.search-results .snippet { display: block; font-size: .85rem; color: var(--muted); }
.search-results mark { background: none; color: var(--accent-hover); font-weight: 600; }
.search-results .empty { padding: .7rem .8rem; color: var(--muted); }

.layout {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}
.js .layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }

.sidebar {
  position: sticky;
  top: calc(var(--navbar-h) + 1.5rem);
  max-height: calc(100vh - var(--navbar-h) - 3rem);
  overflow-y: auto;
  padding: .75rem;
  background: var(--block);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .95rem;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1px 0;
  padding: .45rem .7rem;
  color: var(--text);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
}
.sidebar a:hover { color: var(--text); text-decoration: none; background: rgba(255, 255, 255, .05); }
.sidebar .active > a {
  color: var(--accent);
  font-weight: 600;
  background: rgba(139, 195, 74, .12);
  border-left-color: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.sidebar .icon { flex: none; width: 20px; height: 20px; image-rendering: pixelated; }
.sidebar .section-title {
  display: block;
  margin: 1.1rem .7rem .35rem;
  padding-top: 1rem;
  color: var(--faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
}
.sidebar .toggle { margin-left: auto; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; opacity: .7; }
.sidebar .collapsed .toggle { transform: rotate(-45deg); }
.sidebar .collapsed > .toc { display: none; }
.sidebar .toc { margin: .2rem 0 .5rem 1.6rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.sidebar .toc a { margin: 0; padding: .2rem .6rem; font-size: .85rem; color: var(--muted); border: 0; }
.sidebar .toc a:hover { background: none; color: var(--accent); }
/* Section the reader is scrolled to: accent text and a marker on the list's line. */
.sidebar .toc a { position: relative; transition: color .15s; }
.sidebar .toc a::before { content: ""; position: absolute; top: .2rem; bottom: .2rem; left: calc(-.5rem - 2px); width: 3px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.sidebar .toc a.current { color: var(--accent); font-weight: 600; }
.sidebar .toc a.current::before { opacity: 1; }

.footer { background: var(--block); box-shadow: 0 -1px 0 var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  color: var(--muted);
  font-size: .85rem;
}
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .navbar-inner { padding: 0 .5rem; }
  .navbar-brand { padding: 0 .75rem; }
  .navbar-link { display: none; }
  .search { flex: 1; margin-left: .5rem; }
  .site-header-inner { padding: 1rem; }
  .logo img { height: auto; width: min(22rem, 85vw); }
  .js .layout { display: block; padding: 1rem .75rem 2rem; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(18rem, 85vw);
    max-height: none;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .nav-open .sidebar { transform: none; box-shadow: var(--shadow-raised); }
  .nav-open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); }
  #content { padding: 1.5rem 1.15rem 2rem; }
  #content h1 { font-size: 1.7rem; }
  .image-style-align-right, .image-style-align-left { float: none; width: auto !important; margin: 1rem auto !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .navbar, .sidebar, .footer { display: none; }
  .js .layout { display: block; padding: 0; }
  #content { background: #fff; box-shadow: none; }
  #content h1, #content h2, #content h3 { color: #000; }
}