/* Night Ferry docs — dark, quiet, close to the landing page's night water. */
:root {
  --ink: #e8eef4;
  --ink-dim: #93a4b5;
  --bg: #070d14;
  --surface: #0e1721;
  --line: #1d2b3a;
  --accent: #6fd3e0;
  --warn: #e8b26f;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

nav, main { max-width: 46rem; margin: 0 auto; }

nav {
  padding: 2rem 0 3rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
nav a { color: var(--accent); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav span { margin: 0 0.3rem; }

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
h2 {
  margin: 3.5rem 0 1rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  margin-bottom: 1rem;
}

.lede { color: var(--ink-dim); font-size: 1.08rem; }

a { color: var(--accent); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
caption {
  text-align: left;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.fx { color: var(--ink-dim); font-size: 0.85rem; font-family: var(--mono); }

.note {
  border-left: 2px solid var(--warn);
  background: var(--surface);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}
.note strong { color: var(--warn); }

ul { padding-left: 1.1rem; }
li { margin: 0.4rem 0; }

.cards { display: grid; gap: 0.75rem; margin: 2rem 0; }
.cards a {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
.cards a:hover { border-color: var(--accent); transform: translateX(2px); }
.cards strong { display: block; color: var(--ink); }
.cards span { color: var(--ink-dim); font-size: 0.9rem; }

/* Copy Page. Ships hidden in the markup and revealed by copy-page.js -- a
   button that cannot work without script is worse than no button, because it
   looks broken and the reader can do nothing about it. Floated so it sits
   beside the h1 without taking a line of its own. */
.copy-page {
  float: right;
  margin: 0 0 0 1rem;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.55;
  cursor: pointer;
}
.copy-page:hover,
.copy-page:focus-visible {
  opacity: 1;
}
@media print {
  .copy-page { display: none; }
}