/*
Theme Name: Workbench Lunar
Theme URI: https://workbench.agustgudbjornsson.is
Author: Agust Gudbjornsson
Description: Lunar style, Mission Control layout for the AI Workbench
Version: 1.1.0
*/

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/Inter-var-ext.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(assets/fonts/Inter-var.woff2) format("woff2"); }

:root {
  --wb-bg: #0e0e0e;
  --wb-panel: #161616;
  --wb-line: rgba(255, 255, 255, 0.08);
  --wb-line-strong: rgba(255, 255, 255, 0.18);
  --wb-ink: #f2f2f2;
  --wb-ink-soft: #a6a6a6;
  --wb-ink-faint: #6e6e6e;
  --wb-accent: #f2f2f2;
  --wb-font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Consolas, monospace;
  --wb-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --wb-glow: 0 0 32px rgba(255, 255, 255, 0.18);
}

*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

body {
  margin: 0;
  background: var(--wb-bg);
  color: var(--wb-ink-soft);
  font-family: var(--wb-font-sans);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--wb-ink);
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}

/* Base layouts */
.wb-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.wb-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 25%);
  border-right: 1px solid rgba(255,255,255,.045);
}

.wb-skip {
  position: absolute;
  top: -1000px;
  left: 0;
}

/* Header */
.wb-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 14, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wb-line);
}

.wb-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.wb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--wb-ink);
}

.wb-brand img {
  filter: grayscale(1) brightness(2);
}

.wb-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 24px;
}

.wb-nav-toggle {
  display: none;
}

#wb-menu {
  display: flex;
  align-self: stretch;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

#wb-menu > li {
  display: flex;
  align-items: stretch;
}

#wb-menu > li > a, #wb-menu > li > button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--wb-ink-soft);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

/* Active / hover marker: a 1px rule sitting on the header's bottom border */
#wb-menu > li > a::after, #wb-menu > li > button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 1px;
  background: var(--wb-ink);
  transform: scaleX(0);
  transition: transform 0.25s;
}

#wb-menu > li > a:hover, #wb-menu > li > button:hover,
#wb-menu > li > a.is-current, #wb-menu > li.is-current > button,
#wb-menu > li.is-open > button {
  color: var(--wb-ink);
}

#wb-menu > li > a:hover::after, #wb-menu > li > button:hover::after,
#wb-menu > li > a.is-current::after, #wb-menu > li.is-current > button::after,
#wb-menu > li.is-open > button::after {
  transform: scaleX(1);
}

#wb-menu a:focus-visible, #wb-menu button:focus-visible, .wb-nav-toggle:focus-visible, .wb-search-btn:focus-visible {
  outline: 1px solid var(--wb-ink);
  outline-offset: -1px;
}

.wb-caret {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}

.wb-has-sub.is-open .wb-caret {
  transform: translateY(1px) rotate(225deg);
}

.wb-has-sub {
  position: relative;
}

.wb-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  background: var(--wb-panel);
  border: 1px solid var(--wb-line-strong);
  padding: 8px 0;
  list-style: none;
  min-width: 260px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.wb-has-sub:hover .wb-sub, .wb-has-sub:focus-within .wb-sub, .wb-has-sub.is-open .wb-sub {
  display: block;
}

.wb-sub li a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  color: var(--wb-ink-soft);
  border-left: 2px solid transparent;
}

.wb-sub li a:hover, .wb-sub li a.is-current {
  color: var(--wb-ink);
  background: var(--wb-bg);
  border-left-color: var(--wb-ink);
}

.wb-sub .wb-code {
  min-width: 48px;
}

.wb-code {
  font-family: var(--wb-font-mono);
  font-size: 0.75rem;
  color: var(--wb-ink-faint);
  text-transform: uppercase;
}

.wb-search-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wb-panel);
  border: 1px solid var(--wb-line);
  color: var(--wb-ink-soft);
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}

.wb-search-btn:hover {
  border-color: var(--wb-line-strong);
  color: var(--wb-ink);
}

.wb-search-btn kbd {
  font-family: var(--wb-font-mono);
  background: var(--wb-bg);
  padding: 2px 6px;
  border: 1px solid var(--wb-line);
}

/* Sections */
.wb-section {
  padding: 80px 24px;
  border-bottom: 1px solid var(--wb-line);
}

.wb-section > h2 {
  font-size: 2.4rem;
  margin-bottom: 40px;
}

/* Hero */
.wb-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 80px 24px;
  border-bottom: 1px solid var(--wb-line);
}

.wb-hero-text h1 {
  font-size: 4rem;
}

.wb-lead {
  font-size: 1.25rem;
  max-width: 600px;
  color: var(--wb-ink);
}

.wb-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid var(--wb-line-strong);
  background: transparent;
  color: var(--wb-ink);
  cursor: pointer;
  transition: all 0.2s;
}

.wb-btn:hover {
  border-color: var(--wb-ink);
}

.wb-btn-solid {
  background: var(--wb-ink);
  color: var(--wb-bg);
  border-color: var(--wb-ink);
}

.wb-btn-solid:hover {
  background: #fff;
  box-shadow: var(--wb-glow);
}

.wb-scope {
  position: relative;
  width: 400px;
  height: 220px;
  border: 1px solid var(--wb-line);
  background: var(--wb-panel);
}

.wb-wave {
  fill: none;
  stroke: var(--wb-ink);
  stroke-width: 1.5;
  opacity: 0.8;
}

.wb-wave-2 {
  stroke: var(--wb-ink-soft);
  opacity: 0.4;
  animation: wb-shift 8s linear infinite;
}

.wb-scope-read {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--wb-font-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-sq {
  width: 8px;
  height: 8px;
  background: var(--wb-ink);
}

.wb-blink {
  animation: blink 2s steps(1, end) infinite;
}

/* Modules Grid */
.wb-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--wb-line);
  border: 1px solid var(--wb-line);
}

.wb-module {
  background: var(--wb-bg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  transition: background 0.3s;
}

.wb-module:hover {
  background: var(--wb-panel);
}

.wb-module-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.wb-led {
  width: 8px;
  height: 8px;
  border: 1px solid var(--wb-line-strong);
  background: transparent;
}

.wb-led.is-on {
  background: var(--wb-ink);
  border-color: var(--wb-ink);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.wb-module h3 {
  font-size: 1.5rem;
}

.wb-module p {
  flex: 1;
  font-size: 0.95rem;
}

.wb-module-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
  color: var(--wb-ink-faint);
}

.wb-switch {
  width: 32px;
  height: 16px;
  border: 1px solid var(--wb-line-strong);
  position: relative;
}

.wb-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 10px;
  background: var(--wb-line-strong);
}

.wb-module:hover .wb-switch span {
  background: var(--wb-ink);
  left: auto;
  right: 2px;
}

/* Start Here Sequence */
.wb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.wb-gauge {
  margin-top: 32px;
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
}

.wb-gauge-bar {
  display: block;
  height: 4px;
  background: var(--wb-line);
  margin-bottom: 12px;
  position: relative;
}

.wb-gauge-bar span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: var(--wb-ink);
  transition: width 0.3s;
}

.wb-sequence {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wb-line);
}

.wb-sequence li {
  border-bottom: 1px solid var(--wb-line);
}

.wb-sequence a {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.wb-sequence a:hover {
  background: var(--wb-panel);
  padding-left: 12px;
  padding-right: 12px;
  margin: 0 -12px;
}

.wb-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--wb-line-strong);
  display: inline-block;
}

.is-done .wb-check {
  background: var(--wb-ink);
}

.wb-step {
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
  color: var(--wb-ink-faint);
}

.wb-seq-title {
  font-weight: 500;
  color: var(--wb-ink);
}

.wb-seq-time {
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
  color: var(--wb-ink-faint);
}

/* Field Reports */
.wb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}

.wb-reports {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wb-report {
  display: block;
  border: 1px solid var(--wb-line);
  background: var(--wb-bg);
  transition: background 0.3s;
}

.wb-report:hover {
  background: var(--wb-panel);
}

.wb-report-media {
  display: block;
  aspect-ratio: 16/9;
  border-bottom: 1px solid var(--wb-line);
  overflow: hidden;
}

.wb-report-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.3s;
}

.wb-report:hover .wb-report-media img {
  filter: grayscale(0) brightness(1);
}

.wb-report-body {
  display: block;
  padding: 24px;
}

.wb-report-body h3 {
  font-size: 1.25rem;
  margin: 12px 0 8px;
}

.wb-report-body p {
  margin: 0;
  font-size: 0.9rem;
}

/* Transmission Log (Archive/Index) */
.wb-log {
  border-top: 1px solid var(--wb-line);
}

.wb-log-row {
  display: grid;
  grid-template-columns: 120px 80px 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--wb-line);
  font-size: 0.95rem;
}

.wb-log-row:hover {
  background: var(--wb-panel);
  padding-left: 12px;
  padding-right: 12px;
  margin: 0 -12px;
}

.wb-log-row time, .wb-log-type {
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
  color: var(--wb-ink-faint);
}

.wb-log-title {
  color: var(--wb-ink);
  font-weight: 500;
}

/* Single Post layout */
.wb-note {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding: 64px 24px;
}

.wb-note-head {
  grid-column: 2;
}

.wb-note-head h1 {
  font-size: 3.2rem;
  line-height: 1.1;
  margin-bottom: 24px;
}

.wb-crumb {
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
  color: var(--wb-ink-faint);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.wb-crumb a {
  color: var(--wb-ink-soft);
}

.wb-crumb a:hover {
  color: var(--wb-ink);
}

.wb-rail {
  grid-column: 1;
  grid-row: 2;
}

.wb-rail-in {
  position: sticky;
  top: 88px;
}

.wb-readout {
  margin: 0 0 32px;
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
}

.wb-readout div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--wb-line);
  padding: 8px 0;
}

.wb-readout dt {
  color: var(--wb-ink-faint);
}

.wb-readout dd {
  margin: 0;
  color: var(--wb-ink);
}

.wb-rail-track {
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid var(--wb-line);
  background: var(--wb-panel);
}

.wb-rail-track p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--wb-ink-soft);
}

.wb-dots {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-dots li {
  flex: 1;
  height: 4px;
  background: var(--wb-line-strong);
}

.wb-dots li.is-here {
  background: var(--wb-ink);
}

.wb-dots a {
  display: block;
  height: 100%;
}

.wb-toc {
  font-size: 0.9rem;
}

.wb-toc summary {
  font-weight: 500;
  color: var(--wb-ink);
  cursor: pointer;
  margin-bottom: 16px;
}

.wb-toc-body {
  position: relative;
  padding-left: 16px;
}

.wb-altimeter {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background: var(--wb-line);
}

.wb-altimeter span {
  display: block;
  width: 100%;
  background: var(--wb-ink);
  height: 0%;
}

.wb-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-toc li {
  margin-bottom: 8px;
}

.wb-toc a {
  color: var(--wb-ink-soft);
}

.wb-toc a:hover, .wb-toc a.is-active {
  color: var(--wb-ink);
}

/* Post Content */
.wb-prose {
  grid-column: 2;
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.wb-prose h2 {
  font-size: 2rem;
  margin: 3rem 0 1rem;
}

.wb-prose h3 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
}

.wb-prose p {
  margin: 0 0 1.5rem;
}

.wb-prose ul, .wb-prose ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
}

.wb-prose li {
  margin-bottom: 0.5rem;
}

.wb-prose blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--wb-ink);
  background: var(--wb-panel);
  font-style: italic;
}

.wb-prose code {
  font-family: var(--wb-font-mono);
  font-size: 0.9em;
  background: var(--wb-panel);
  padding: 0.15em 0.3em;
  border: 1px solid var(--wb-line);
}

.wb-prose pre {
  background: var(--wb-panel);
  padding: 1.5rem;
  border: 1px solid var(--wb-line);
  overflow-x: auto;
  margin: 2rem 0;
  font-family: var(--wb-font-mono);
  font-size: 0.9rem;
}

.wb-prose pre code {
  background: transparent;
  padding: 0;
  border: none;
}

.wb-prose img {
  border: 1px solid var(--wb-line);
  filter: grayscale(1);
}

.wb-prose figure {
  margin: 2rem 0;
}

.wb-prose figcaption {
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
  color: var(--wb-ink-faint);
  margin-top: 0.5rem;
  text-align: center;
}

.wb-note-foot {
  grid-column: 2;
  max-width: 720px;
  margin-top: 64px;
  border-top: 1px solid var(--wb-line);
  padding-top: 32px;
}

.wb-next {
  display: block;
  padding: 32px;
  background: var(--wb-panel);
  border: 1px solid var(--wb-line);
  margin: 32px 0;
  transition: border-color 0.3s;
}

.wb-next:hover {
  border-color: var(--wb-line-strong);
}

.wb-next-label {
  display: block;
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
  color: var(--wb-ink-faint);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.wb-next-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wb-ink);
  margin-bottom: 12px;
}

.wb-next-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--wb-ink);
}

.wb-share {
  display: flex;
  gap: 16px;
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
}

.wb-share a, .wb-share button {
  color: var(--wb-ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.wb-share a:hover, .wb-share button:hover {
  color: var(--wb-ink);
}

.wb-related {
  margin-top: 64px;
}

/* Progress bar (top) */
.wb-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1000;
}

.wb-progress span {
  display: block;
  height: 100%;
  background: var(--wb-ink);
  width: 0%;
}

/* Footer */
.wb-footer {
  border-top: 1px solid var(--wb-line);
  padding: 64px 24px;
  text-align: center;
  font-size: 0.9rem;
}

.wb-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

/* Animations */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes wb-shift {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

/* Palette / Search */
.wb-palette-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(8px);
  padding: 10vh 24px;
}

.wb-palette-wrap.is-open {
  display: block;
}

.wb-palette {
  max-width: 640px;
  margin: 0 auto;
  background: var(--wb-panel);
  border: 1px solid var(--wb-line-strong);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.wb-palette input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--wb-line);
  padding: 24px;
  font-size: 1.2rem;
  color: var(--wb-ink);
  width: 100%;
  outline: none;
}

.wb-palette-results {
  overflow-y: auto;
  padding: 12px 0;
}

.wb-palette-item {
  display: block;
  padding: 12px 24px;
  border-left: 2px solid transparent;
}

.wb-palette-item:hover, .wb-palette-item.is-selected {
  background: var(--wb-bg);
  border-left-color: var(--wb-ink);
}

.wb-palette-title {
  display: block;
  font-weight: 500;
  color: var(--wb-ink);
}

.wb-palette-meta {
  display: flex;
  gap: 12px;
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
  color: var(--wb-ink-faint);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 960px) {
  .wb-note {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
  .wb-note-head, .wb-rail, .wb-prose, .wb-note-foot {
    grid-column: 1;
    grid-row: auto;
  }
  .wb-rail-in {
    position: relative;
    top: 0;
  }
  .wb-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wb-hero {
    flex-direction: column;
    text-align: center;
  }
  .wb-scope {
    display: none;
  }
  .wb-actions {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .wb-reports {
    grid-template-columns: 1fr;
  }
  .wb-log-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .wb-log-row time, .wb-log-type, .wb-code {
    display: inline-block;
  }
}

/* ---------- v1.1: pages, glossary, cards, footer ---------- */

.wb-pagehead {
  padding-top: 72px;
  padding-bottom: 40px;
}

.wb-pagehead h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 20px;
}

.wb-pagehead .wb-lead {
  margin: 0;
}

.wb-404 {
  min-height: 50vh;
}

.wb-archive {
  padding-bottom: 96px;
}

.wb-muted {
  color: var(--wb-ink-faint);
}

.wb-more {
  font-size: 0.9rem;
  color: var(--wb-ink-soft);
}

.wb-more:hover {
  color: var(--wb-ink);
}

.wb-arrow {
  display: inline-block;
  transition: transform 0.2s;
}

a:hover .wb-arrow {
  transform: translateX(4px);
}

.wb-btn kbd {
  font-family: var(--wb-font-mono);
  font-size: 0.85em;
}

.wb-log-row--nomod {
  grid-template-columns: 120px 1fr 120px;
}

.wb-prose-page {
  margin: 0 0 96px;
}

/* Glossary */
.wb-glossary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding-bottom: 96px;
}

.wb-board {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wb-line);
  border: 1px solid var(--wb-line);
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
}

.wb-board a, .wb-board span {
  background: var(--wb-bg);
  text-align: center;
  padding: 10px 0;
}

.wb-board a {
  background: var(--wb-panel);
  color: var(--wb-ink);
}

.wb-board a:hover {
  background: var(--wb-ink);
  color: var(--wb-bg);
}

.wb-board span {
  color: #3a3a3a;
}

.wb-board-count {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  background: var(--wb-bg);
  color: var(--wb-ink-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.wb-gl-group {
  margin-bottom: 48px;
  scroll-margin-top: 88px;
}

.wb-gl-group h2 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wb-line-strong);
}

.wb-gl-group dl {
  margin: 0;
}

.wb-gl {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wb-line);
  scroll-margin-top: 88px;
}

.wb-gl:target {
  background: var(--wb-panel);
  box-shadow: -12px 0 0 var(--wb-panel), 12px 0 0 var(--wb-panel);
}

.wb-gl dt {
  font-weight: 500;
  color: var(--wb-ink);
  font-size: 1.1rem;
}

.wb-gl dd {
  margin: 0;
  line-height: 1.6;
}

.wb-gl-src {
  display: block;
  margin-top: 8px;
  font-family: var(--wb-font-mono);
  font-size: 0.8rem;
  color: var(--wb-ink-faint);
}

.wb-gl-src:hover {
  color: var(--wb-ink);
}

/* Cards (search results) */
.wb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  background: var(--wb-line);
  border: 1px solid var(--wb-line);
}

.wb-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--wb-bg);
  transition: background 0.3s;
}

.wb-card:hover {
  background: var(--wb-panel);
}

.wb-card-top, .wb-card-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--wb-font-mono);
  font-size: 0.75rem;
  color: var(--wb-ink-faint);
  text-transform: uppercase;
}

.wb-card h2 {
  font-size: 1.25rem;
  margin: 20px 0 10px;
}

.wb-card p {
  flex: 1;
  margin: 0 0 24px;
  font-size: 0.95rem;
}

.wb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.wb-filters button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--wb-line);
  color: var(--wb-ink-soft);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.wb-filters button.is-on {
  border-color: var(--wb-line-strong);
  color: var(--wb-ink);
}

.wb-filters button.is-on .wb-switch span {
  background: var(--wb-ink);
  left: auto;
  right: 2px;
}

/* Pagination */
.nav-links {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--wb-font-mono);
  font-size: 0.85rem;
}

.nav-links .page-numbers {
  padding: 6px 12px;
  border: 1px solid var(--wb-line);
}

.nav-links .current, .nav-links a:hover {
  border-color: var(--wb-ink);
  color: var(--wb-ink);
}

.wb-footer-links {
  flex-wrap: wrap;
  row-gap: 8px;
}

.wb-footer-links a:hover {
  color: var(--wb-ink);
}

.wb-skip:focus {
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 8px 12px;
  background: var(--wb-ink);
  color: var(--wb-bg);
}

body.wb-locked {
  overflow: hidden;
}

/* ---------- Mobile nav ---------- */

@media (max-width: 860px) {
  .wb-top-in {
    gap: 12px;
  }
  .wb-brand {
    margin-right: auto;
  }
  .wb-nav {
    order: 3;
    align-self: center;
  }
  .wb-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--wb-line-strong);
    color: var(--wb-ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .wb-burger {
    position: relative;
    width: 14px;
    height: 8px;
  }
  .wb-burger span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transition: transform 0.25s, top 0.25s;
  }
  .wb-burger span:first-child { top: 0; }
  .wb-burger span:last-child { top: 7px; }
  .wb-nav-toggle[aria-expanded="true"] .wb-burger span:first-child { top: 4px; transform: rotate(45deg); }
  .wb-nav-toggle[aria-expanded="true"] .wb-burger span:last-child { top: 4px; transform: rotate(-45deg); }
  .wb-search-btn {
    height: 34px;
  }
  #wb-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 8px 24px 24px;
    background: var(--wb-bg);
    border-bottom: 1px solid var(--wb-line-strong);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
    font-size: 1.05rem;
  }
  #wb-menu.is-open {
    display: flex;
  }
  #wb-menu > li {
    display: block;
    border-bottom: 1px solid var(--wb-line);
  }
  #wb-menu > li > a, #wb-menu > li > button {
    width: 100%;
    padding: 16px 0;
    justify-content: space-between;
  }
  #wb-menu > li > a::after, #wb-menu > li > button::after {
    display: none;
  }
  #wb-menu > li > a.is-current::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--wb-ink);
  }
  /* Modules are listed inline on mobile, not as a dropdown */
  .wb-sub-toggle {
    pointer-events: none;
    color: var(--wb-ink-faint) !important;
    font-family: var(--wb-font-mono) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    padding-bottom: 4px !important;
  }
  .wb-caret {
    display: none;
  }
  .wb-sub {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 8px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .wb-sub li a {
    padding: 10px 0;
    border-left: 0;
  }
  .wb-sub li a:hover, .wb-sub li a.is-current {
    background: none;
  }
  .wb-glossary {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wb-board {
    position: static;
    grid-template-columns: repeat(9, 1fr);
  }
  .wb-gl {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .wb-search-btn span {
    display: none;
  }
  .wb-nav-label {
    display: none;
  }
}

@media (max-width: 760px) {
  .wb-log-row--nomod {
    grid-template-columns: 1fr;
  }
}

/* Subscribe */
.wb-subscribe {
  padding-bottom: 96px;
}

.wb-feedbox {
  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 720px;
  border: 1px solid var(--wb-line-strong);
  background: var(--wb-panel);
}

.wb-feedbox input {
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--wb-ink);
  font-family: var(--wb-font-mono);
  font-size: 0.9rem;
}

.wb-feed-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 16px 0 80px;
  font-size: 0.9rem;
}

.wb-feed-alt a:hover {
  color: var(--wb-ink);
}

.wb-subscribe .wb-head h2 {
  font-size: 1.6rem;
  margin: 0;
}

@media (max-width: 560px) {
  .wb-feedbox {
    grid-template-columns: 1fr;
  }
}