/* Dagger manual — dark, terminal-adjacent, readable on a phone.
   Deliberately one small hand-written stylesheet: the manual is served by the
   relay under the same strict CSP as everything else (no external fonts, no
   CDN), and a doc that needs a build step is a doc that goes stale. */
:root {
  --bg: #0b0b0c;
  --panel: #141416;
  --line: #2a2a2e;
  --fg: #e6e6e6;
  --mut: #9a9aa2;
  --accent: #a5b4fc;
  --code: #ffb27a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }
a:hover { color: #c7d2fe; }

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #0b0b0cf2;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
header.top img { width: 26px; height: 26px; image-rendering: pixelated; }
header.top .name { font-weight: 600; letter-spacing: 0.2px; }
header.top .sp { flex: 1; }
header.top a.app { font-size: 14px; }

.wrap { display: flex; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0 16px 96px; }

/* Contents: a sticky column on a wide screen, a plain block on a phone. */
nav.toc {
  position: sticky;
  top: 60px;
  align-self: flex-start;
  width: 240px;
  flex: none;
  padding: 20px 0;
  font-size: 14px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
nav.toc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin: 18px 0 6px; }
nav.toc a { display: block; padding: 3px 0; color: var(--fg); text-decoration: none; }
nav.toc a:hover { color: var(--accent); }

main { min-width: 0; flex: 1; padding: 20px 0 0; }

h1 { font-size: 30px; line-height: 1.2; margin: 24px 0 8px; }
h2 {
  font-size: 22px;
  margin: 44px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 70px; /* so anchors don't hide under the sticky header */
}
h3 { font-size: 17px; margin: 26px 0 6px; scroll-margin-top: 70px; }
/* Numbered sub-steps inside a procedure: quieter than h3, but clearly a step. */
h4 {
  font-size: 15px;
  margin: 20px 0 4px;
  color: var(--accent);
  scroll-margin-top: 70px;
}
p, li { color: #dcdce2; }
.lede { font-size: 18px; color: var(--mut); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--code);
  background: #1c1c20;
  padding: 1px 5px;
  border-radius: 4px;
}
pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto; /* long commands scroll themselves; the page never does */
}
pre code { background: none; padding: 0; color: #d8d8de; }

.note, .warn {
  border-left: 3px solid var(--accent);
  background: #14141a;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 18px 0;
}
.warn { border-left-color: #ff8a3d; background: #1a1512; }
.note p:first-child, .warn p:first-child { margin-top: 0; }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--mut); font-weight: 600; }
.scroll { overflow-x: auto; }

footer { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; color: var(--mut); font-size: 14px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .wrap { flex-direction: column; gap: 0; }
  nav.toc { position: static; width: auto; max-height: none; border-bottom: 1px solid var(--line); }
  h1 { font-size: 26px; }
}