/* The BCAS reference: a modern documentation site in the game's colours
   (phosphor green, amber, cyan on charcoal), dark by default and light on
   request. Code is coloured with the editor's own palette (k0..k6, the
   core's span kinds). */

:root {
  --bg: #0d100e;
  --bg-2: #121612;
  --panel: #161c17;
  --raised: #1d251f;
  --line: #24372a;
  --line-2: #2f4a37;
  --text: #cfe6d5;
  --muted: #8fb19a;
  --heading: #ecfff1;
  --green: #33ff66;
  --green-ink: #33ff66;
  --dim: #1fa846;
  --amber: #ffb000;
  --cyan: #35d6e6;
  --code-bg: #0a0d0b;
  --glow: 0 0 18px rgba(51, 255, 102, 0.25);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --k0: #33ff66;
  --k1: #d9ffe3;
  --k2: #ffb000;
  --k3: #ffb000;
  --k4: #4f8a61;
  --k5: #35d6e6;
  --k6: #35d6e6;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, Menlo, "DejaVu Sans Mono", monospace;
  --radius: 10px;
  color-scheme: dark;
}

/* Light: the same palette, inked for paper. */
:root[data-theme="light"] {
  --bg: #f6faf7;
  --bg-2: #eef5f0;
  --panel: #ffffff;
  --raised: #eaf3ed;
  --line: #d3e4d8;
  --line-2: #b9d3c1;
  --text: #1c3326;
  --muted: #4f6b59;
  --heading: #0b2215;
  --green: #0c9a3c;
  --green-ink: #087a2f;
  --dim: #3f8a57;
  --amber: #a86400;
  --cyan: #0a7f8c;
  --code-bg: #0d120f;
  --glow: none;
  --shadow: 0 8px 24px rgba(20, 60, 35, 0.1);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--green-ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

code,
kbd,
pre {
  font-family: var(--mono);
}

:not(pre) > code {
  font-size: 0.88em;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--heading);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--panel);
  padding: 8px 12px;
}

/* ---- The bar along the top ---- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  font: 700 15px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--heading);
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand .mark {
  color: var(--green);
  text-shadow: var(--glow);
}
.brand .sub {
  color: var(--muted);
  font-weight: 500;
}

.menu,
.theme {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
}
.menu {
  display: none;
}

.search {
  position: relative;
  margin-left: auto;
  width: min(360px, 40vw);
}
.search input {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: 14px var(--sans);
}
.search input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
}
.search kbd {
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}
#results {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 60vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#results li a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
}
#results li a:hover,
#results li a[aria-selected="true"] {
  background: var(--raised);
  text-decoration: none;
}
#results .what {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--heading);
}
#results .where {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
#results .none {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 14px;
}

.play {
  font: 700 13px var(--mono);
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--green);
  color: #08130c;
  white-space: nowrap;
}
.play:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

/* ---- Sidebar, content, and the table of contents ---- */

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  max-width: 1440px;
  margin: 0 auto;
}

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 28px 18px 28px 24px;
  border-right: 1px solid var(--line);
}
.nav-group h4,
.toc h4 {
  margin: 0 0 8px;
  font: 700 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-group {
  margin-bottom: 26px;
}
.nav-group ul,
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-group a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--text);
}
.nav-group a:hover {
  background: var(--raised);
  text-decoration: none;
}
.nav-group a[aria-current="page"] {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--green);
}
.version {
  font: 12px var(--mono);
  color: var(--muted);
}

.content {
  min-width: 0;
  padding: 40px 56px 64px;
  max-width: 880px;
}

.toc {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 40px 20px;
}
.toc a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.toc a.sub {
  padding-left: 22px;
}
.toc a.on {
  color: var(--green-ink);
  border-left-color: var(--green);
}

/* ---- Text ---- */

h1,
h2,
h3 {
  color: var(--heading);
  line-height: 1.25;
}
h1 {
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
h2 {
  font-size: 24px;
  margin: 48px 0 12px;
  padding-top: 8px;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 18px;
  margin: 28px 0 8px;
}
h2 code,
h1 code {
  font-size: 0.9em;
}
.lead {
  font-size: 19px;
  color: var(--muted);
  margin-top: 0;
}
.lead strong {
  color: var(--text);
}
ul,
ol {
  padding-left: 22px;
}
li {
  margin: 4px 0;
}

.callout {
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 6%, var(--panel));
}
.callout strong {
  color: var(--amber);
}

.requires {
  color: var(--muted);
  font-size: 15px;
}
.drawback {
  color: var(--amber);
  font-size: 14px;
}
.tag {
  font: 12px var(--mono);
  color: var(--cyan);
  margin: 0 0 6px;
}

/* ---- The front page ---- */

.hero {
  padding: 24px 0 8px;
}
.eyebrow {
  font: 700 12px var(--mono);
  letter-spacing: 0.14em;
  color: var(--green-ink);
  margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(36px, 5.5vw, 58px);
  letter-spacing: -0.03em;
}
.hero h1 span {
  color: var(--green);
  text-shadow: var(--glow);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 32px;
}
.button {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--heading);
  font-weight: 600;
}
.button:hover {
  text-decoration: none;
  border-color: var(--green);
}
.button.primary {
  background: var(--green);
  border-color: var(--green);
  color: #08130c;
}

/* ---- Cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.card p {
  margin: 0 0 8px;
  font-size: 14.5px;
}
.card.link {
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.card.link:hover {
  text-decoration: none;
  border-color: var(--green);
  transform: translateY(-2px);
}
.card .card-title {
  display: block;
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--green-ink);
}

/* ---- Code ---- */

figure.code {
  margin: 20px 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
  box-shadow: var(--shadow);
}
figure.code figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 6px 14px;
  background: #121813;
  border-bottom: 1px solid #1f2e24;
  font: 12px var(--mono);
  color: #7fa58b;
}
.copy {
  font: 700 11px var(--mono);
  color: #9fc9ab;
  background: transparent;
  border: 1px solid #2a3f30;
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
}
.copy:hover {
  color: #33ff66;
  border-color: #33ff66;
}
figure.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--k0);
  tab-size: 4;
}
/* The editor's colours, kept in light mode too: code always sits on its dark screen. */
.k0 {
  color: #33ff66;
}
.k1 {
  color: #d9ffe3;
}
.k2,
.k3 {
  color: #ffb000;
}
.k4 {
  color: #4f8a61;
}
.k5,
.k6 {
  color: #35d6e6;
}

/* ---- Tables and lists of functions ---- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
thead th {
  font: 700 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
table.facts th {
  width: 34%;
  color: var(--heading);
  font-weight: 600;
}
table.facts.small {
  font-size: 13px;
  margin: 8px 0 0;
}
table.facts.small th,
table.facts.small td {
  padding: 4px 6px;
}
table.facts.small th {
  width: 62%;
}
table.fields td:first-child {
  white-space: nowrap;
}

dl.api {
  margin: 12px 0;
}
dl.api dt {
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--raised);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
dl.api dt code {
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  color: var(--green-ink);
  font-weight: 700;
}
dl.api .returns {
  font: 13px var(--mono);
  color: var(--cyan);
}
dl.api dd {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel);
}

/* ---- Examples ---- */

details.example {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
details.example summary {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}
details.example summary::-webkit-details-marker {
  display: none;
}
details.example summary strong {
  color: var(--heading);
}
details.example summary strong::before {
  content: "▸ ";
  color: var(--green-ink);
}
details.example[open] summary strong::before {
  content: "▾ ";
}
details.example summary span {
  font-size: 14px;
  color: var(--muted);
}
details.example figure.code {
  margin: 0 12px 12px;
}

/* ---- Previous and next ---- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 56px;
}
.pager a {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--heading);
  font-weight: 600;
}
.pager a:hover {
  border-color: var(--green);
  text-decoration: none;
}
.pager small {
  display: block;
  font: 700 11px var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.pager .next {
  text-align: right;
}

.foot {
  border-top: 1px solid var(--line);
  padding: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ---- Narrower screens ---- */

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

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu {
    display: block;
  }
  .brand .sub {
    display: none;
  }
  .sidebar {
    position: fixed;
    inset: 64px auto 0 0;
    width: min(300px, 85vw);
    z-index: 15;
    background: var(--bg);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  body.nav-open .sidebar {
    transform: none;
  }
  .content {
    padding: 28px 18px 48px;
  }
  .search {
    width: auto;
    flex: 1;
  }
  .search kbd,
  .play {
    display: none;
  }
}

@media (max-width: 520px) {
  .brand {
    font-size: 0;
  }
  .brand .mark {
    font-size: 22px;
  }
  .pager {
    grid-template-columns: 1fr;
  }
  table.facts th {
    width: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}