/* Runbook page styles, matched to the We The People, in Tech or Not newsletter look:
   parchment + ink on the "story" side, deep navy + neon on the "tech" side.
   Builds on /assets/css/site.css; every token below is scoped to body.runbook. */

body.runbook {
  /* brand palette */
  --parchment: #f6efe2;
  --parchment-2: #efe5d1;
  --parchment-3: #e4d6bb;
  --ink: #2a1c11;
  --ink-soft: #5e4a38;
  --copper: #9c4f1c;
  --navy: #0d1826;
  --navy-2: #16263a;
  --navy-3: #22374f;
  --cream: #f3ead8;
  --cyan: #5fd0f0;
  --violet: #c28cf7;
  --amber: #f0a53c;
  --lime: #6fdc96;
  --rose: #f47a7a;

  /* site tokens remapped for this page */
  --bg: var(--parchment);
  --surface: #fbf7ef;
  --text: var(--ink);
  --muted: var(--ink-soft);
  --border: var(--parchment-3);
  --accent: var(--copper);
  --accent-contrast: #fffaf0;

  --ok: #2f7a45;   --ok-bg: #e3efdc;
  --warn: #9a5b0c; --warn-bg: #f7e6c4;
  --bad: #a3322b;  --bad-bg: #f6dcd5;
  --info: #1f5f7a; --info-bg: #dcebef;

  --font-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 62rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(42 28 17 / 6%), 0 8px 24px rgb(42 28 17 / 8%);

  background:
    radial-gradient(ellipse at 15% 0%, rgb(255 250 238 / 70%), transparent 60%),
    var(--parchment);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.125rem;
}

@media (prefers-color-scheme: dark) {
  body.runbook {
    --bg: var(--navy);
    --surface: var(--navy-2);
    --text: var(--cream);
    --muted: #b7a98f;
    --border: #2a3d55;
    --accent: var(--amber);
    --accent-contrast: var(--navy);
    --ok: var(--lime);   --ok-bg: rgb(111 220 150 / 12%);
    --warn: var(--amber); --warn-bg: rgb(240 165 60 / 12%);
    --bad: var(--rose);  --bad-bg: rgb(244 122 122 / 12%);
    --info: var(--cyan); --info-bg: rgb(95 208 240 / 12%);
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 35%);
    background:
      radial-gradient(ellipse at 85% 0%, rgb(95 208 240 / 8%), transparent 55%),
      radial-gradient(ellipse at 0% 40%, rgb(194 140 247 / 6%), transparent 50%),
      var(--navy);
    color: var(--cream);
  }
}

body.runbook .site-header { border-bottom: 1px solid var(--border); }
body.runbook .brand { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: 0.01em; }
body.runbook .site-footer { font-family: var(--font-serif); }

.runbook h1, .runbook h2, .runbook h3 { font-family: var(--font-serif); font-weight: 600; color: var(--text); }
.runbook h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -0.005em; }
.runbook a { color: var(--accent); }
.runbook code { font-family: var(--font-mono); font-size: 0.84em; }
.runbook :not(pre) > code {
  padding: 0.08em 0.35em;
  border-radius: 4px;
  background: var(--parchment-2);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .runbook :not(pre) > code { background: rgb(95 208 240 / 10%); color: #d6f3fb; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 24rem;
  margin: 0.5rem 0 2rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background:
    linear-gradient(118deg, transparent 0 55%, var(--navy) 55% 100%),
    radial-gradient(circle at 25% 30%, #fbf4e4, #eadbbd 80%);
  isolation: isolate;
}
.hero::before {   /* faint paper grain on the parchment side */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(120 90 50 / 9%) 1px, transparent 1.4px);
  background-size: 5px 5px;
  mask-image: linear-gradient(118deg, #000 0 55%, transparent 55%);
}
.hero::after {    /* glow along the diagonal */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(118deg, transparent 0 54.6%, rgb(95 208 240 / 35%) 55%, transparent 56.5%);
  filter: blur(6px);
}
.hero-text { padding: 2.5rem 1rem 2.5rem 2.5rem; color: #2a1c11; align-self: center; }
.hero-text .eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  font: 600 0.78rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c4f1c;
}
.hero-text h1 { margin: 0 0 0.9rem; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; color: #2a1c11; font-weight: 600; }
.hero-text .lede { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.5; color: #5e4a38; }
.hero-text time { color: #5e4a38; font-size: 0.95rem; }

.hero-art { position: relative; padding: 2rem 1.75rem 2rem 2.5rem; align-self: center; }
.hero-art svg { display: block; width: 100%; height: auto; margin-top: 1rem; filter: drop-shadow(0 0 6px rgb(95 208 240 / 35%)); }

.hero .terminal { box-shadow: 0 0 0 1px rgb(95 208 240 / 18%), 0 20px 40px rgb(0 0 0 / 45%); }
.hero .terminal pre { font-size: 0.8rem; padding: 0.9rem 1rem; white-space: pre-wrap; }

/* ---------------------------------------------------------------- facts + actions */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.facts li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.facts li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--fact-color, var(--cyan)); }
.facts li:nth-child(2) { --fact-color: var(--amber); }
.facts li:nth-child(3) { --fact-color: var(--violet); }
.facts li:nth-child(4) { --fact-color: var(--lime); }
.facts li:nth-child(5) { --fact-color: var(--amber); }
.facts li:nth-child(6) { --fact-color: var(--cyan); }
.facts strong {
  display: block;
  margin-bottom: 0.2rem;
  font: 600 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 2.5rem; }
.runbook .button {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 0 0 1px rgb(95 208 240 / 35%), 0 6px 18px rgb(13 24 38 / 25%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.runbook .button:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgb(95 208 240 / 35%); }
.runbook .button.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.runbook .button.secondary:hover { box-shadow: inset 0 0 0 1px var(--accent); }
@media (prefers-color-scheme: dark) {
  .runbook .button { background: var(--cyan); color: var(--navy); }
}

/* ---------------------------------------------------------------- section titles + toc */
.section-title { display: flex; align-items: center; gap: 0.75rem; margin: 2.5rem 0 1rem; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.toc {
  columns: 2 17rem;
  column-gap: 2rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.toc li { break-inside: avoid; padding: 0.2rem 0; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc .n { display: inline-block; min-width: 2.2rem; font: 600 0.82rem var(--font-mono); color: var(--accent); }

/* ---------------------------------------------------------------- steps (timeline) */
.steps { position: relative; margin-top: 1rem; }
.steps::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.4rem;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--violet) 50%, var(--amber));
  opacity: 0.45;
}
.step {
  position: relative;
  margin: 2rem 0 0;
  padding: 1.75rem 1.75rem 1.5rem 4.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  scroll-margin-top: 1rem;
}
.step h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.step-num {
  position: absolute;
  left: 0.55rem;
  top: 1.55rem;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cyan);
  font: 700 0.9rem var(--font-mono);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgb(95 208 240 / 45%), 0 0 14px rgb(95 208 240 / 35%);
}
.step h3 {
  margin: 1.6rem 0 0.6rem;
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font: 600 0.72rem/1.5 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--parchment-2);
  border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) { .tag { background: var(--navy-3); } }
.tag.ok   { color: var(--ok);   background: var(--ok-bg);   border-color: transparent; }
.tag.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.tag.bad  { color: var(--bad);  background: var(--bad-bg);  border-color: transparent; }
.tag.info { color: var(--info); background: var(--info-bg); border-color: transparent; }

.why-what { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.why-what > div { padding: 1rem 1.1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.why-what > div:first-child { border-top: 3px solid var(--cyan); }
.why-what > div:last-child  { border-top: 3px solid var(--amber); }
.why-what h3 { margin-top: 0; }
.why-what p { margin: 0; line-height: 1.55; }

.callout {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--accent);
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout.ok   { border-left-color: var(--ok);   background: var(--ok-bg); }
.callout.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.callout.bad  { border-left-color: var(--bad);  background: var(--bad-bg); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout strong:first-child { display: block; margin-bottom: 0.25rem; }

.step ul, .step ol { padding-left: 1.25rem; }
.step li { margin: 0.3rem 0; }
.full-output { font-size: 0.95rem; color: var(--muted); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.runbook table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.runbook th, .runbook td { text-align: left; vertical-align: top; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); }
.runbook thead th {
  font: 600 0.72rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--navy);
  white-space: nowrap;
}
.runbook tbody tr:nth-child(even) td { background: rgb(228 214 187 / 25%); }
@media (prefers-color-scheme: dark) {
  .runbook thead th { background: var(--navy-3); }
  .runbook tbody tr:nth-child(even) td { background: rgb(255 255 255 / 3%); }
}
.runbook tr:last-child td { border-bottom: 0; }
.runbook td code { white-space: nowrap; }
.runbook td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 0.9rem; }

/* ---------------------------------------------------------------- terminal code blocks */
.terminal {
  position: relative;
  margin: 0.75rem 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: #e3ecf5;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(95 208 240 / 14%), 0 10px 26px rgb(13 24 38 / 22%);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--navy-2);
  border-bottom: 1px solid rgb(255 255 255 / 6%);
  font: 500 0.75rem var(--font-mono);
  color: #8ea3ba;
}
.term-bar .dots { display: inline-flex; gap: 6px; }
.term-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.term-bar .dots i:nth-child(2) { background: #febc2e; }
.term-bar .dots i:nth-child(3) { background: #28c840; }
.term-bar .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.84rem;
  line-height: 1.6;
  max-height: 34rem;
}
.terminal code { font-size: 1em; }
.terminal ::selection { background: rgb(95 208 240 / 30%); }

/* syntax colours (applied at build time) */
.tk-k { color: var(--cyan); }
.tk-f { color: var(--violet); }
.tk-s { color: var(--amber); }
.tk-c { color: #6f8399; font-style: italic; }
.tk-v { color: var(--lime); }
.tk-p { color: var(--lime); font-weight: 700; }

.copy {
  padding: 0.15rem 0.6rem;
  font: 600 0.72rem var(--font-mono);
  color: #b9c9da;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 6px;
  cursor: pointer;
}
.copy:hover { color: var(--navy); background: var(--cyan); border-color: var(--cyan); }

/* collapsible scripts */
.runbook details.script { margin: 0.75rem 0; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: 0 0 0 1px rgb(95 208 240 / 14%); }
.runbook details.script > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font: 500 0.82rem var(--font-mono);
  color: #d5e2ef;
  background: var(--navy-2);
}
.runbook details.script > summary::-webkit-details-marker { display: none; }
.runbook details.script > summary::before { content: "▸"; color: var(--cyan); transition: transform 0.15s; }
.runbook details.script[open] > summary::before { transform: rotate(90deg); }
.runbook details.script > summary .meta { margin-left: auto; color: #8ea3ba; font-size: 0.75rem; }
.runbook details.script > summary:hover { color: #fff; }
.runbook details.script .terminal { margin: 0; border-radius: 0; box-shadow: none; }
.runbook details.script .term-bar { display: none; }

/* ---------------------------------------------------------------- closing sections */
.plain-section { margin: 3rem 0 0; scroll-margin-top: 1rem; }
.recs { counter-reset: rec; list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.recs li {
  counter-increment: rec;
  position: relative;
  padding: 1rem 1.1rem 1rem 3.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.recs li::before {
  content: counter(rec);
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--amber);
  font: 700 0.8rem var(--font-mono);
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 46rem) {
  body.runbook { font-size: 1.05rem; }
  .hero { grid-template-columns: minmax(0, 1fr); background: linear-gradient(170deg, #f8f0de 0 52%, var(--navy) 52% 100%); }
  .hero::before { mask-image: linear-gradient(170deg, #000 0 52%, transparent 52%); }
  .hero::after { background: linear-gradient(170deg, transparent 0 51.6%, rgb(95 208 240 / 35%) 52%, transparent 53.5%); }
  .hero-text { padding: 1.75rem 1.25rem 1rem; }
  .hero-art { padding: 1.5rem 1.25rem 1.75rem; }
  .steps::before { left: 1rem; }
  .step { padding: 1.4rem 1.1rem 1.2rem 1.1rem; }
  .step h2 { padding-left: 2.6rem; min-height: 2.2rem; }
  .step-num { left: 0.9rem; top: 1.3rem; width: 2.2rem; height: 2.2rem; font-size: 0.8rem; }
  .runbook th, .runbook td { padding: 0.5rem 0.6rem; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- disclaimer (brand version) */
body.runbook .disclaimer {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  background: var(--surface);
  font-size: 1rem;
  box-shadow: var(--shadow);
}
body.runbook .disclaimer-title {
  font: 600 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--warn);
}