/* FlowRunbook — dark ops console, all the way down.
   Theme study 2026-11-09: Laracasts dark navy #0e1725 + DigitalOcean
   Inter/JetBrains Mono + freeCodeCamp dark-mode palette flip.
   The whole page is dark: rail and content are the same console,
   separated by hairlines, not by a light/dark split. */
:root {
  --rb-bg: #0e1725;
  --rb-rail: #0b1220;
  --rb-surface: #182437;
  --rb-codebg: #0a0f1a;
  --rb-ink: #e8eaf0;
  --rb-body: #d5dbe6;
  --rb-muted: #9aa7b8;
  --rb-faint: #6f7d90;
  --rb-accent: #2dd4bf;
  --rb-accent-soft: #7fd1c8;
  --rb-rule: #26334a;
  --rb-resultbg: #10231f;
  --rb-resultink: #5eead4;
  --rb-trapink: #fbbf24;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rb-bg);
  color: var(--rb-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- shell: rail + content, one dark console ---------- */
.rb-shell { display: flex; align-items: stretch; min-height: 100vh; }

.rb-rail {
  width: 220px;
  flex-shrink: 0;
  background: var(--rb-rail);
  color: #fff;
  padding: 20px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--rb-rule);
}

.rb-kicker {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-accent);
}

.rb-brand {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rb-brand a { color: #fff; text-decoration: none; }
.rb-brand a:hover { color: var(--rb-accent); }

.rb-blurb { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--rb-muted); }

.rb-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rb-rule); padding-top: 12px; }
.rb-nav a {
  color: #c6d0dd;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  margin-left: -10px;
  border-left: 3px solid transparent;
}
.rb-nav a:hover { color: #fff; border-left-color: var(--rb-accent); background: var(--rb-surface); }

.rb-railnote {
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rb-rule);
  font-size: 12px;
  line-height: 1.45;
  color: var(--rb-faint);
}

.rb-main { flex: 1; min-width: 0; max-width: 800px; padding: 24px 32px 0; }

.rb-page { min-height: 60vh; }

/* ---------- headings: mono, the console signature ---------- */
.rb-page h1 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 4px 0 10px;
  color: var(--rb-ink);
}
.rb-page h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 22px 0 8px;
  color: var(--rb-accent-soft);
}
.rb-page h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 16px 0 6px;
  color: var(--rb-ink);
}
.rb-page p { margin: 0 0 10px; }
.rb-page ul, .rb-page ol { margin: 0 0 10px; padding-left: 20px; }
.rb-page li { margin-bottom: 4px; }
.rb-page a { color: var(--rb-accent); }
.rb-page a:hover { color: #fff; }

/* ---------- deck + notes ---------- */
.rb-dek { color: var(--rb-muted); font-size: 15px; margin-top: 0; }
.rb-note { color: var(--rb-muted); font-size: 14px; }

/* ---------- console tables ---------- */
.rb-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.rb-page th, .rb-page td {
  text-align: left;
  vertical-align: top;
  padding: 6px 10px 6px 0;
  border-top: 1px solid var(--rb-rule);
}
.rb-page thead th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rb-muted);
  border-top: none;
  border-bottom: 1px solid var(--rb-accent);
  padding-bottom: 4px;
}
.rb-page tbody tr:last-child th, .rb-page tbody tr:last-child td { border-bottom: 1px solid var(--rb-rule); }

/* ---------- runbook list (home) + archive table: terminal listing ---------- */
.rb-runlist td:first-child a { font-weight: 700; text-decoration: none; color: var(--rb-ink); }
.rb-runlist td:first-child a:hover { color: var(--rb-accent); text-decoration: underline; }
.rb-runlist .rb-runsub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--rb-muted); }
.rb-runlist td:nth-child(2) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--rb-accent-soft);
}
.rb-runlist td:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--rb-muted);
}

/* ---------- checks table (home + about) ---------- */
.rb-check th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--rb-accent);
  white-space: nowrap;
  padding-right: 14px;
}

/* ---------- guide furniture ---------- */
.rb-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--rb-muted);
  font-size: 12.5px;
  border-bottom: 1px solid var(--rb-rule);
  padding-bottom: 8px;
  margin: 0 0 14px;
}
.rb-meta strong { color: var(--rb-ink); }

/* terse index: a mono run-list, not a contents box */
.rb-index {
  border-top: 1px solid var(--rb-accent);
  border-bottom: 1px solid var(--rb-rule);
  padding: 6px 0;
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}
.rb-index h2 {
  display: inline;
  margin: 0 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rb-muted);
}
.rb-index ul { display: inline; margin: 0; padding: 0; list-style: none; }
.rb-index li { display: inline; margin: 0; }
.rb-index li + li::before { content: "· "; color: var(--rb-muted); }
.rb-index a { text-decoration: none; }
.rb-index a:hover { text-decoration: underline; }

.rb-result {
  border-left: 3px solid var(--rb-accent);
  background: var(--rb-resultbg);
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 14px;
  color: #d1fae5;
}
.rb-result p { margin: 0; }
.rb-result strong { color: var(--rb-resultink); }
.rb-result code { background: transparent; color: #a7f3d0; }

/* spec table: node inventory for step 3 */
.rb-spec td:first-child { white-space: nowrap; color: var(--rb-ink); }
.rb-spec td:nth-child(2) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--rb-accent-soft);
}

/* traps: compact rows with a terse TRAP tag */
.rb-traps th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rb-trapink);
  white-space: nowrap;
  padding-right: 12px;
}
.rb-traps td p { margin: 0; }

.rb-endstate {
  border-left: 3px solid var(--rb-accent);
  background: var(--rb-surface);
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 14px;
}
.rb-endstate p { margin: 0; }

.rb-codelabel {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 0;
}
.rb-codelabel + pre { margin-top: 4px; }

/* diagram: full 620px width, horizontal scroll on narrow screens.
   The SVG keeps its light boxes — it reads as a pasted console-output
   card against the dark page. Never shrink it; labels stay 14px. */
.rb-flow { margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rb-flow svg { display: block; width: 620px; min-width: 620px; max-width: none; height: auto; }

.rb-download {
  border: 1px solid var(--rb-rule);
  border-left: 3px solid var(--rb-accent);
  background: var(--rb-surface);
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 14px;
}
.rb-download p { margin: 0; }

/* sources: compact mono list */
.rb-sources {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
.rb-sources li { margin-bottom: 3px; }

.rb-verified {
  border-top: 1px solid var(--rb-rule);
  padding-top: 8px;
  color: var(--rb-muted);
  font-size: 13px;
}

/* ---------- code: terminal windows ---------- */
pre {
  background: var(--rb-codebg);
  border: 1px solid var(--rb-rule);
  padding: 10px 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #d7e3f4;
}
pre code { overflow-wrap: normal; white-space: pre; background: transparent; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: break-word;
  background: var(--rb-surface);
  color: #a5f3e8;
  padding: 1px 4px;
  border-radius: 3px;
}
p, li { overflow-wrap: break-word; }

/* ---------- skip link + focus ---------- */
.rb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rb-ink);
  color: var(--rb-bg);
  padding: 8px 14px;
  z-index: 10;
}
.rb-skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }

/* ---------- footer ---------- */
.rb-foot {
  border-top: 1px solid var(--rb-rule);
  margin-top: 28px;
  padding: 12px 0 40px;
  font-size: 12.5px;
  color: var(--rb-muted);
}
.rb-foot a { color: var(--rb-muted); }

/* ---------- narrow viewports: the console stays a console ---------- */
@media (max-width: 760px) {
  .rb-shell { flex-direction: column; }
  /* rail collapses to a compact dark strip: kicker + brand on one row,
     nav as a sideways-scrolling mono strip */
  .rb-rail { width: auto; height: auto; position: static; padding: 14px 20px 12px; border-right: none; border-bottom: 1px solid var(--rb-rule); }
  .rb-kicker { display: inline; margin: 0 8px 0 0; }
  .rb-brand { display: inline; font-size: 18px; }
  .rb-blurb { display: none; }
  .rb-nav {
    flex-direction: row; flex-wrap: nowrap; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--rb-rule); padding-top: 10px; margin-top: 10px;
  }
  .rb-nav a {
    flex-shrink: 0; margin-left: 0; border-left: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid var(--rb-rule); padding: 5px 10px; margin-right: 8px;
  }
  .rb-nav a:hover { border-bottom-color: transparent; border-color: var(--rb-accent); background: var(--rb-surface); }
  .rb-railnote { display: none; }
  .rb-main { padding: 16px 16px 0; max-width: none; }
  body { font-size: 15px; line-height: 1.55; }
  .rb-page h1 { font-size: 20px; margin-bottom: 8px; }
  .rb-page h2 { font-size: 14px; margin: 18px 0 6px; }
  .rb-page h3 { margin: 12px 0 4px; }
  .rb-page p { margin: 0 0 8px; }
  .rb-page ul, .rb-page ol { margin: 0 0 8px; }
  /* meta becomes the run card: a dark strip with mono versions */
  .rb-meta {
    background: var(--rb-surface); color: var(--rb-muted);
    border-bottom: none; padding: 10px 12px; margin: 0 0 12px;
  }
  .rb-meta strong { color: var(--rb-accent); }
  /* diagram keeps full 620px width and scrolls; nothing here shrinks it */
  .rb-flow svg { width: 620px; min-width: 620px; max-width: none; }
  /* console tables scroll sideways instead of squeezing */
  .rb-runlist, .rb-spec, .rb-traps { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rb-page table { font-size: 13px; }
  .rb-page th, .rb-page td { padding-right: 8px; }
  .rb-spec td:first-child, .rb-spec td:nth-child(2) { white-space: normal; }
  /* index becomes one sideways-scrolling mono strip */
  .rb-index { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rb-index ul { white-space: nowrap; }
  .rb-foot { margin-top: 20px; padding-bottom: 28px; }
}