/* TrackingRunbook — light telemetry theme. Pale gray-blue surfaces, royal-blue signal accent. */
:root {
  --tr-page: #e9eef2;
  --tr-rail: #dfe7ee;
  --tr-panel: #ffffff;
  --tr-ink: #16232e;
  --tr-muted: #5a6b7a;
  --tr-line: #d3dce3;
  --tr-blue: #1d4ed8;
  --tr-blue-soft: #dbe7fb;
  --tr-blue-ink: #173a9e;
  --tr-code-bg: #eef3f8;
  --tr-slate: #33475a;
  --tr-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--tr-page); }
body {
  margin: 0;
  background: var(--tr-page);
  color: var(--tr-ink);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--tr-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--tr-mono); }
pre {
  background: var(--tr-code-bg);
  border: 1px solid var(--tr-line);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tr-ink);
}
p code, li code, td code { background: var(--tr-code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* Shell: light rail + content column */
.tr-shell { display: flex; min-height: 100vh; }
.tr-rail {
  width: 228px;
  flex: 0 0 228px;
  background: var(--tr-rail);
  border-right: 1px solid var(--tr-line);
  padding: 22px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.tr-brand { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; }
.tr-brand a { color: var(--tr-ink); }
.tr-brand a:hover { text-decoration: none; }
.tr-brand .tr-mark { color: var(--tr-blue); }
.tr-rail-tag { font-size: 12.5px; color: var(--tr-muted); margin: 0 0 26px; line-height: 1.5; }
.tr-rail-label {
  font-family: var(--tr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tr-muted);
  margin: 0 0 8px;
}
.tr-railnav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.tr-railnav a {
  color: var(--tr-ink);
  font-size: 14.5px;
  padding: 6px 10px;
  border-radius: 5px;
}
.tr-railnav a:hover { background: var(--tr-blue-soft); text-decoration: none; }
.tr-railnav a[aria-current="page"] { background: var(--tr-blue); color: #fff; }
.tr-railnote { font-size: 12.5px; color: var(--tr-muted); line-height: 1.55; border-top: 1px solid var(--tr-line); padding-top: 14px; }
.tr-railnote strong { color: var(--tr-ink); }

/* Content column */
.tr-main { flex: 1; min-width: 0; padding: 26px 28px 60px; }
.tr-inner { max-width: 780px; }
.tr-eyebrow {
  font-family: var(--tr-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tr-blue);
  margin: 0 0 8px;
}
.tr-h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 700; }
.tr-dek { font-size: 17px; color: var(--tr-slate); margin: 0 0 26px; max-width: 700px; }
.tr-h2 { font-size: 21px; margin: 38px 0 10px; padding-top: 14px; border-top: 1px solid var(--tr-line); font-weight: 700; }
.tr-h2:first-of-type { border-top: none; }
.tr-main p { max-width: 720px; }
.tr-main ul, .tr-main ol { max-width: 720px; }
.tr-main li { margin-bottom: 6px; }

/* Guide log on home */
.tr-log { list-style: none; padding: 0; margin: 0 0 30px; }
.tr-log li {
  background: var(--tr-panel);
  border: 1px solid var(--tr-line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.tr-log .tr-log-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.tr-log .tr-date { font-family: var(--tr-mono); font-size: 12px; color: var(--tr-muted); }
.tr-chip {
  font-family: var(--tr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--tr-blue-soft);
  color: var(--tr-blue-ink);
  border-radius: 4px;
  padding: 2px 7px;
}
.tr-log h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; }
.tr-log h3 a { color: var(--tr-ink); }
.tr-log h3 a:hover { color: var(--tr-blue); }
.tr-log p { margin: 0; font-size: 14.5px; color: var(--tr-muted); }

/* Guide furniture */
.tr-meta { font-size: 14px; color: var(--tr-muted); margin: 0 0 20px; }
.tr-meta strong { color: var(--tr-ink); font-weight: 600; }
.tr-signal {
  background: var(--tr-blue-soft);
  border: 1px solid var(--tr-blue);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 20px 0;
  max-width: 780px;
}
.tr-signal p { margin: 0; }
.tr-signal .tr-signal-label {
  font-family: var(--tr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tr-blue-ink);
  display: block;
  margin-bottom: 4px;
}
.tr-download {
  background: var(--tr-panel);
  border: 1px dashed var(--tr-blue);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 20px 0;
  max-width: 780px;
}
.tr-download p { margin: 0; }
.tr-trace { list-style: none; padding: 0; margin: 0 0 8px; counter-reset: tr-step; }
.tr-trace li {
  counter-increment: tr-step;
  padding: 12px 0 12px 52px;
  position: relative;
  border-top: 1px solid var(--tr-line);
}
.tr-trace li::before {
  content: "STEP " counter(tr-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--tr-mono);
  font-size: 11px;
  color: var(--tr-blue);
  letter-spacing: 0.06em;
}
.tr-trace li > strong { display: block; margin-bottom: 2px; }
.tr-deadend {
  border: 1px solid var(--tr-line);
  border-left: 4px solid var(--tr-ink);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 14px 0;
  max-width: 780px;
  background: #f2f5f8;
}
.tr-deadend p { margin: 0; }
.tr-deadend strong { font-family: var(--tr-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--tr-ink); }
table.tr-check { border-collapse: collapse; width: 100%; max-width: 780px; margin: 16px 0; font-size: 14.5px; background: var(--tr-panel); }
.tr-check th, .tr-check td { border: 1px solid var(--tr-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.tr-check th { background: var(--tr-blue-soft); font-family: var(--tr-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tr-blue-ink); }
.tr-check td.tr-num { font-family: var(--tr-mono); text-align: right; white-space: nowrap; }
.tr-index { background: var(--tr-panel); border: 1px solid var(--tr-line); border-radius: 6px; padding: 14px 20px; max-width: 780px; }
.tr-index h2 { margin: 0 0 8px; font-size: 15px; border: none; padding: 0; }
.tr-index ul { margin: 0; }
.tr-sources { font-size: 15px; }
.tr-sources li { margin-bottom: 8px; }
.tr-verified {
  border-top: 1px solid var(--tr-line);
  margin-top: 32px;
  padding-top: 16px;
  font-size: 14px;
  color: var(--tr-muted);
  max-width: 780px;
}
.tr-verified strong { color: var(--tr-ink); }

/* Archive */
.tr-archive { list-style: none; padding: 0; max-width: 780px; }
.tr-archive li { padding: 12px 0; border-bottom: 1px solid var(--tr-line); display: flex; gap: 16px; align-items: baseline; }
.tr-archive .tr-date { font-family: var(--tr-mono); font-size: 13px; color: var(--tr-muted); white-space: nowrap; }
.tr-archive a { font-size: 17px; }

/* Footer */
.tr-foot { border-top: 1px solid var(--tr-line); margin-top: 44px; padding: 18px 0 0; font-size: 13.5px; color: var(--tr-muted); max-width: 780px; }
.tr-foot a { color: var(--tr-muted); }
.tr-skip { position: absolute; left: -9999px; }
.tr-skip:focus { position: static; background: var(--tr-blue); color: #fff; padding: 8px 12px; }

@media (max-width: 760px) {
  .tr-shell { display: block; }
  .tr-rail {
    width: auto;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--tr-line);
    padding: 16px 20px;
  }
  .tr-rail-tag { margin-bottom: 14px; }
  .tr-railnav { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .tr-railnote { display: none; }
  .tr-main { padding: 20px 20px 48px; }
  .tr-h1 { font-size: 25px; }
  .tr-trace li { padding-left: 0; padding-top: 34px; }
  .tr-trace li::before { top: 12px; }
}