/* docs.murderduelscomp.com - same token set as murderduelscomp.com, the dashboard, music and appeals.
   dense, hairline ruled, small radius, low glow. */

:root {
  --d0: #05080e;
  --d1: #070a10;
  --d2: #0a0f18;
  --d3: #0d1220;
  --d4: #111826;

  --surface:        rgba(255, 255, 255, 0.026);
  --surface-strong: rgba(255, 255, 255, 0.045);
  --hover:          rgba(255, 255, 255, 0.07);

  --line:        rgba(255, 255, 255, 0.06);
  --line-bright: rgba(255, 255, 255, 0.1);

  --text:  #e4edf7;
  --text2: rgba(228, 237, 247, 0.62);
  --text3: rgba(228, 237, 247, 0.38);

  /* The accent, recoloured for MDA. The names still say teal because they are
     var()'d everywhere and renaming them changes no behaviour; the values are
     what anything reads. Taken from modules/cardPalette.js and the dashboard
     tokens rather than rotated off the old cyan, because cyan and blue are
     nowhere near each other at the same lightness. */
  --teal:     #4d8dff;
  --teal-2:   #c9dcff;
  --teal-dim: rgba(77, 141, 255, 0.14);
  --blue:     #0b5bd3;

  --r:    6px;
  --r-md: 10px;
  --r-lg: 14px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: .16s;
  --norm: .28s;

  --topbar-h: 58px;
  --sidebar-w: 260px;
  --toc-w: 220px;
  --content-max: 1400px;

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--line-bright) transparent; scroll-behavior: smooth; }
html { scroll-padding-top: calc(var(--topbar-h) + 20px); }

body {
  margin: 0;
  background: var(--d1);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: content-box; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--d4);
  padding: 10px 16px;
  z-index: 200;
  border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ── topbar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 max(20px, calc((100vw - var(--content-max)) / 2));
  background: rgba(5, 8, 14, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--text3); font-weight: 500; }

.menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text2);
  cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; }

.topbar-links { margin-left: auto; display: flex; gap: 18px; font-size: 13.5px; }
.topbar-links a { color: var(--text2); }
.topbar-links a:hover { color: var(--text); text-decoration: none; }

/* ── search ─────────────────────────────────────────────────────────────── */

.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: var(--d0);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--fast) var(--ease);
}
.search:focus-within { border-color: rgba(77, 141, 255, 0.45); }
.search > svg { width: 15px; height: 15px; color: var(--text3); flex: 0 0 auto; }

.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}
.search input::placeholder { color: var(--text3); }
.search input::-webkit-search-cancel-button { display: none; }

/* Safari on a phone zooms the whole page in when you focus an input smaller
   than 16px, and there is no way back out except pinching. 13.5px is the right
   size for the bar on a desktop, so the bump is scoped to touch rather than to
   a width - a narrow desktop window does not need it and should not get it.
   Fixing it with maximum-scale on the viewport tag would work too, and would
   also stop anybody zooming the docs at all. */
@media (pointer: coarse) {
  .search input { font-size: 16px; }
}

.search kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(66vh, 520px);
  overflow-y: auto;
  background: var(--d2);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-md);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  padding: 6px;
}

.result {
  display: block;
  padding: 9px 11px;
  border-radius: var(--r);
  color: var(--text2);
}
.result:hover, .result.on { background: var(--surface-strong); text-decoration: none; }
.result b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.result small { display: block; color: var(--text3); font-size: 11.5px; margin-bottom: 2px; }
.result span { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result mark { background: var(--teal-dim); color: var(--teal-2); border-radius: 3px; padding: 0 1px; }
.results .empty { padding: 14px 12px; color: var(--text3); font-size: 13px; }

/* ── layout ─────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 42px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 28px 0 60px;
  min-height: 0;
}

.nav-group + .nav-group { margin-top: 22px; }

.nav-group-label {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 10px 7px;
}

.nav-link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r);
  color: var(--text2);
  font-size: 13.5px;
  border-left: 2px solid transparent;
}
.nav-link:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--teal-dim); color: var(--teal-2); border-left-color: var(--teal); }

.content { padding: 34px 0 80px; min-width: 0; }

.toc {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 34px 0 60px;
  min-height: 0;
}

.toc-label {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text3);
  padding-bottom: 8px;
}

.toc-link {
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 1px solid var(--line);
  color: var(--text3);
  font-size: 12.5px;
  line-height: 1.45;
}
.toc-link:hover { color: var(--text2); text-decoration: none; }
.toc-link.on { color: var(--teal-2); border-left-color: var(--teal); }
.toc-h3 { padding-left: 24px; }

/* ── prose ──────────────────────────────────────────────────────────────── */

.prose { max-width: 780px; }

.prose h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  font-weight: 700;
}

.prose h2 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 46px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-weight: 650;
}

.prose h3 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
  margin: 30px 0 8px;
  font-weight: 650;
}

.prose h2 .anchor, .prose h3 .anchor {
  float: left;
  margin-left: -22px;
  width: 22px;
  color: var(--text3);
  opacity: 0;
  font-weight: 400;
  transition: opacity var(--fast) var(--ease);
}
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose .anchor:hover { text-decoration: none; color: var(--teal); }

.prose p { margin: 0 0 14px; color: var(--text2); }
.prose strong { color: var(--text); font-weight: 600; }

.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--text2); }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--text3); }

.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--teal-2);
}

.prose pre {
  background: var(--d0);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 18px;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text2); font-size: 13px; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0 0 20px;
}

.prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.prose th {
  text-align: left;
  padding: 9px 14px;
  color: var(--text3);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
}
.prose td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--text2); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td code { white-space: nowrap; }

.prose figure { margin: 0 0 22px; }
.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.prose figcaption { margin-top: 8px; font-size: 12.5px; color: var(--text3); }

.callout {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--text3);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout-note    { border-left-color: var(--blue); }
.callout-tip     { border-left-color: var(--teal); }
.callout-warning { border-left-color: #faa61a; }
.callout-danger  { border-left-color: #ed4245; }

.prose blockquote:not(.callout) {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 2px solid var(--line-bright);
  color: var(--text3);
}

/* ── pager ──────────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 780px;
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pager-link {
  display: block;
  flex: 0 1 auto;
  max-width: 46%;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pager-link:hover { background: var(--surface-strong); border-color: var(--line-bright); text-decoration: none; }
.pager-link span { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); }
.pager-link strong { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.pager-next { text-align: right; margin-left: auto; }

/* ── responsive ─────────────────────────────────────────────────────────── */

.nav-scrim { display: none; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu-btn { display: inline-flex; }
  .topbar-links { display: none; }

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: 82vw;
    max-width: 320px;
    /* an explicit height, not top+bottom. sized by its content it grew past the
       screen and there was nothing left for overflow to scroll. */
    height: calc(100dvh - var(--topbar-h));
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--d0);
    border-right: 1px solid var(--line);
    padding: 22px 14px 40px;
    transform: translateX(-102%);
    transition: transform var(--norm) var(--ease);
    z-index: 70;
  }
  body.nav-open .sidebar { transform: none; }

  body.nav-open .nav-scrim {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 65;
  }

  .prose h1 { font-size: 27px; }
  .content { padding: 24px 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}

@media (max-width: 560px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .brand span { display: none; }
  .search kbd { display: none; }
}