@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Titan+One&family=Bowlby+One+SC&display=swap');

:root {
  /* Oakwild Network palette */
  --oak-green: #03743b;
  --oak-green-dark: #133f0f;
  --oak-green-deep: #092c1d;
  --oak-green-bright: #1df94e;
  --oak-brown-dark: #573b1f;
  --oak-tan: #997b54;
  --oak-charcoal: #2b2a2b;
  --oak-white: #f6f6f6;
  --oak-black: #191818;
  /* sampled average pixel color of dark_oak_planks.png */
  --oak-dark-wood: #2d2018;
  /* brand color, not palette-derived — stays constant across themes */
  --discord-blurple: #5865f2;
  /* fallback; docs.js overwrites this with the header's real measured height */
  --header-h: 279px;
}

:root, :root[data-theme="light"] {
  --bg: var(--oak-white);
  --fg: var(--oak-black);
  /* darkened vs raw --oak-tan for AA contrast on light backgrounds (~6.4:1 vs ~3.7:1) */
  --fg-muted: color-mix(in srgb, var(--oak-tan) 70%, var(--oak-black) 30%);
  --border: color-mix(in srgb, var(--oak-green-dark) 16%, var(--oak-white));
  --sidebar-bg: color-mix(in srgb, var(--oak-green) 6%, var(--oak-white));
  /* neutral tan tint for hover/active fill — green is reserved for the active-state marker line */
  --active-bg: color-mix(in srgb, var(--oak-tan) 18%, var(--oak-white));
  --accent: var(--oak-green);
  /* matte, not neon — muted well below the raw --oak-green-bright swatch */
  --accent-bright: color-mix(in srgb, var(--oak-green-bright) 40%, var(--oak-green-dark) 60%);
  --code-bg: color-mix(in srgb, var(--oak-green) 8%, var(--oak-white));
  --link: var(--oak-green);
  --plank-texture: url('/assets/oak_planks.png');
  --log-texture: url('/assets/oak_log.png');
  --plank-seam: color-mix(in srgb, var(--oak-brown-dark) 55%, black);
  --plank-fg: var(--oak-white);
  --content-texture: none, url('/assets/stripped_pale_oak_log.png');
  --section-title-texture: url('/assets/red_concrete.png');
  --active-section-texture: url('/assets/green_wool.png');
  /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
  --active-section-color: #417222;
  --scrollbar-thumb: var(--oak-tan);
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg: color-mix(in srgb, var(--oak-green-deep) 22%, var(--oak-black));
    --fg: var(--oak-white);
    --fg-muted: var(--oak-tan);
    --border: color-mix(in srgb, var(--oak-green-dark) 45%, var(--oak-black));
    --sidebar-bg: color-mix(in srgb, var(--oak-green-deep) 65%, var(--oak-black));
    /* neutral tan/charcoal tint for hover/active fill — green stays reserved for the marker line */
    --active-bg: color-mix(in srgb, var(--oak-tan) 22%, var(--oak-charcoal));
    /* matte — muted down from the raw neon swatch, not full-saturation */
    --accent: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
    --accent-bright: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
    --code-bg: color-mix(in srgb, var(--oak-green-deep) 55%, var(--oak-black));
    --link: color-mix(in srgb, var(--oak-green-bright) 65%, var(--oak-green-dark) 35%);
    --plank-texture: url('/assets/dark_oak_planks.png');
    --log-texture: url('/assets/dark_oak_log.png');
    --plank-seam: color-mix(in srgb, var(--oak-black) 70%, black);
    --plank-fg: var(--oak-white);
    --content-texture: none, url('/assets/brown_concrete_powder.png');
    --section-title-texture: url('/assets/red_concrete.png');
    --active-section-texture: url('/assets/green_wool.png');
    /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
    --active-section-color: #417222;
    --scrollbar-thumb: var(--oak-dark-wood);
  }
}

:root[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--oak-green-deep) 22%, var(--oak-black));
  --fg: var(--oak-white);
  --fg-muted: var(--oak-tan);
  --border: color-mix(in srgb, var(--oak-green-dark) 45%, var(--oak-black));
  --sidebar-bg: color-mix(in srgb, var(--oak-green-deep) 65%, var(--oak-black));
  --active-bg: color-mix(in srgb, var(--oak-tan) 22%, var(--oak-charcoal));
  --accent: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
  --accent-bright: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
  --code-bg: color-mix(in srgb, var(--oak-green-deep) 55%, var(--oak-black));
  --link: color-mix(in srgb, var(--oak-green-bright) 65%, var(--oak-green-dark) 35%);
  --plank-texture: url('/assets/dark_oak_planks.png');
  --log-texture: url('/assets/dark_oak_log.png');
  --plank-seam: color-mix(in srgb, var(--oak-black) 70%, black);
  --plank-fg: var(--oak-white);
  --content-texture: none, url('/assets/brown_concrete_powder.png');
    --section-title-texture: url('/assets/red_concrete.png');
  --active-section-texture: url('/assets/green_wool.png');
  /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
  --active-section-color: #417222;
  --scrollbar-thumb: var(--oak-dark-wood);
}

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 8% -5%, color-mix(in srgb, var(--oak-green) 16%, transparent), transparent),
    radial-gradient(ellipse 700px 500px at 100% 15%, color-mix(in srgb, var(--oak-tan) 14%, transparent), transparent),
    radial-gradient(ellipse 800px 700px at 15% 100%, color-mix(in srgb, var(--oak-green-deep) 20%, transparent), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Firefox/standards scrollbar coloring is set on html above via scrollbar-color;
   WebKit/Blink (Chrome, Safari) need the pseudo-element API instead. */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, black 20%, var(--scrollbar-thumb));
}

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

/* Site header: logo row / server-info row / nav row, stacked */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-image: var(--plank-texture);
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
  border-bottom: 1px solid var(--plank-seam);
}

.header-logo-row {
  display: flex;
  justify-content: center;
  padding: 1.1rem 4% 0.1rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: 150px;
  width: auto;
}

.header-info-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 4%;
  font-size: 0.85rem;
  color: var(--plank-fg);
}

.info-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 3px 0 color-mix(in srgb, black 45%, transparent);
}
/* background on a separate pseudo-element so its opacity doesn't also fade the text */
.info-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: black;
  background-image: url('/assets/gray_wool.png');
  background-size: 48px 48px;
  background-repeat: repeat;
  image-rendering: pixelated;
  opacity: 0.6;
  z-index: 0;
}
.info-pill > * {
  position: relative;
  z-index: 1;
}

/* Shared flat button: solid color, rounded corners, single soft drop-shadow.
   :active flattens the shadow and nudges down 2px to read as pressed. */
.topbar-links a,
.theme-toggle {
  position: relative;
  top: 0;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 48px 48px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.topbar-links a:hover,
.theme-toggle:hover {
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
}
.topbar-links a:active,
.theme-toggle:active {
  top: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

.server-address {
  background: transparent;
  border: none;
  color: var(--plank-fg);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  text-shadow: 0 2px 2px color-mix(in srgb, black 55%, transparent);
}
.server-address:hover { text-decoration: underline; }

.info-separator { opacity: 0.5; }

.player-count {
  color: var(--accent-bright);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 2px color-mix(in srgb, black 55%, transparent);
}

.header-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 4%;
  position: relative;
  background-color: var(--oak-black);
  overflow: hidden;
  isolation: isolate;
}
/* log texture rotated 90deg via pseudo-element so only the background turns sideways, not the nav content.
   Square + vmax-sized so the 90deg rotation can't shrink its footprint below the (short, wide) bar. */
.header-nav-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300vmax;
  height: 300vmax;
  margin-top: -150vmax;
  margin-left: -150vmax;
  z-index: -1;
  background-image: var(--log-texture);
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
  transform: rotate(90deg);
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-links a {
  text-transform: uppercase;
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.topbar-links a.active {
  background-color: var(--accent-bright);
  background-image: none;
  border-top-color: color-mix(in srgb, white 40%, var(--accent-bright));
  border-left-color: color-mix(in srgb, white 30%, var(--accent-bright));
  border-right-color: color-mix(in srgb, white 15%, var(--accent-bright));
  border-bottom-color: color-mix(in srgb, black 20%, var(--accent-bright));
  color: var(--oak-black);
  text-shadow: none;
}

.topbar-links a.topbar-link-highlight {
  background-color: var(--discord-blurple);
  background-image: none;
  border-top-color: color-mix(in srgb, white 40%, var(--discord-blurple));
  border-left-color: color-mix(in srgb, white 30%, var(--discord-blurple));
  border-right-color: color-mix(in srgb, white 15%, var(--discord-blurple));
  border-bottom-color: color-mix(in srgb, black 20%, var(--discord-blurple));
}
.topbar-links a.topbar-link-highlight:hover {
  background-color: color-mix(in srgb, var(--discord-blurple) 85%, white);
}

.theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.sidebar-toggle {
  display: none;
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 40px 40px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  font-weight: 400;
}
.sidebar-toggle:hover {
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
}
.sidebar-toggle:active {
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

/* Layout */
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
}

.sidebar {
  border-right: 1px solid var(--plank-seam);
  padding: 1.5rem 8%;
  align-self: start;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background-color: var(--oak-black);
  background-image: url('/assets/black_wool.png');
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.sidebar-group { margin-bottom: 1rem; }
.sidebar-group-title {
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--plank-fg);
  opacity: 0.85;
  padding: 0.35rem 0.75rem;
  margin-bottom: 0.1rem;
  border-radius: 6px;
  background-color: #8b2e2e;
  background-image: var(--section-title-texture);
  background-size: 40px 40px;
  background-repeat: repeat;
  image-rendering: pixelated;
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
}
.sidebar-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sidebar-group a {
  position: relative;
  top: 0;
  display: block;
  padding: 0.4rem 0.75rem;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 40px 40px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  opacity: 0.92;
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 3px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.sidebar-group a:hover {
  opacity: 1;
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
  text-decoration: none;
}
.sidebar-group a:active {
  top: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}
.sidebar-group a.active {
  opacity: 1;
  background-color: var(--accent-bright);
  background-image: var(--active-section-texture);
  background-size: 40px 40px;
  background-repeat: repeat;
  image-rendering: pixelated;
  border-top-color: color-mix(in srgb, white 35%, var(--active-section-color));
  border-left-color: color-mix(in srgb, white 20%, var(--active-section-color));
  border-right-color: color-mix(in srgb, black 20%, var(--active-section-color));
  border-bottom-color: color-mix(in srgb, black 40%, var(--active-section-color));
  color: var(--oak-black);
  text-shadow: none;
}

/* On-page headings for the current page, nested under its own sidebar link */
.sidebar-group ul.sidebar-subnav {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0 0.8rem;
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease, display 0.6s ease allow-discrete;
}

.sidebar-group ul.sidebar-subnav[style*="display: block"] {
  display: block;
  opacity: 1;
  max-height: 1000px;
}
.sidebar-subnav a {
  position: relative;
  top: 0;
  display: block;
  padding: 0.4rem 0.75rem;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 40px 40px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  opacity: 0.92;
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 3px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.sidebar-subnav a:hover {
  opacity: 1;
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
  text-decoration: none;
}
.sidebar-subnav a:active {
  top: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

.content {
  position: relative;
  padding: 1.5rem 3rem 2.5rem;
  min-width: 0;
  min-height: calc(100vh - var(--header-h));
}
.content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--content-texture);
  background-size: 96px 96px, 64px 64px;
  background-repeat: repeat, repeat;
  image-rendering: pixelated;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.content > * {
  position: relative;
  z-index: 1;
}
.content h1,
.content h2,
.content h3 {
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}
.content h1 { font-size: 2.25rem; margin: 0 0 0.5rem; }
.content .subtitle { color: var(--fg-muted); font-size: 1.05rem; margin-bottom: 2rem; }

.content h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.doc-section > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.content h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.content code {
  background: var(--code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.content pre code { background: none; padding: 0; }

.search-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-input-header {
  display: none;
  width: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  border: 2px solid var(--plank-seam);
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  color: var(--plank-fg);
  font-family: 'Inter', sans-serif;
  transition: width 0.2s ease;
}

.search-input-header::placeholder {
  color: color-mix(in srgb, var(--plank-fg) 60%, transparent);
}

.search-input-header:focus {
  outline: none;
}

.search-toggle-container.open .search-input-header {
  display: block;
  width: 200px;
}

.search-toggle {
  position: relative;
  top: 0;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 48px 48px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  padding: 0.4rem 0.5rem;
}

.search-toggle:hover {
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
}

.search-toggle:active {
  top: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

.doc-section {
  display: none;
  scroll-margin-top: var(--header-h);
}

.content h3[id] {
  scroll-margin-top: var(--header-h);
}

.doc-section.visible {
  display: block;
}

.doc-section.hidden-by-search {
  display: none !important;
}

.search-highlight {
  background-color: color-mix(in srgb, var(--accent-bright) 40%, transparent);
  padding: 0.1em 0.2em;
  border-radius: 3px;
}


@media (max-width: 780px) {
  .sidebar-toggle { display: inline-block; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--header-h);
    width: 260px;
    height: calc(100vh - var(--header-h));
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 20;
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 0 1.5rem 1.5rem; }
  .search-toggle-container.open .search-input-header {
    width: 150px;
  }
}