/* Step-by-step SETUP GUIDE chrome (/help/connect-claude, /help/connect-collector).
   Loads AFTER help/base.css, which stays the base: it owns the @font-face
   blocks, the Warm Horizon tokens and the light/dark semantics, so nothing here
   redeclares a font or a palette. This file adds only what a guide needs and the
   five "sheet" help pages don't: a two-column layout with a sticky contents rail,
   admin-console breadcrumbs, copy-buttoned code blocks, screenshots, and
   collapsible steps.

   Ported from the inline <style> that this page carried on the marketing site.
   It could not come across as-is: the dashboard CSP is `style-src 'self'` +
   `script-src 'self'` + `font-src 'self'`, so an inline <style>, an inline
   <script> and the Google Fonts CDN are all blocked. Hence this file,
   help/guide.js, and the self-hosted fonts already in help/base.css.

   The marketing original was written against site.css variables (--purple,
   --ink, --line, --white, --purple-tint). Those are translated to the help-page
   tokens here (--accent, --text, --border, --sheet) rather than reintroduced, so
   these pages theme with their siblings instead of pinning the marketing light
   palette into a dark-mode page. */

/* The code block is the one place that wants its own pair rather than a token:
   it is deliberately a DARK well in light mode (the marketing look), which means
   "dark on light" and "dark on dark" need different values or the block
   disappears into the sheet in dark mode. */
:root {
  --code-bg: #2B2722;
  --code-fg: #F4EFE6;
  --code-key: #F0B27A;   /* JSON/YAML keys */
  --code-val: #9FD8AE;   /* string values */
  --code-com: #A79B8B;   /* comments */
}
@media (prefers-color-scheme: dark) {
  :root { --code-bg: #191713; --code-fg: #F4EFE6; }
}
:root[data-theme="light"] { --code-bg: #2B2722; --code-fg: #F4EFE6; }
:root[data-theme="dark"]  { --code-bg: #191713; --code-fg: #F4EFE6; }

/* ---------- Layout: content column + sticky contents rail ----------
   Wider than the 900px sheet the five reference pages use — a guide carries
   code blocks and screenshots, and the rail needs somewhere to sit. */
.wrap.wide { max-width: 1140px; }

.doc-shell { display: grid; grid-template-columns: minmax(0, 1fr) 216px; gap: 56px; align-items: start; }
@media (max-width: 1000px) { .doc-shell { grid-template-columns: 1fr; gap: 0; } }

.toc { position: sticky; top: 24px; font-size: 14px; }
@media (max-width: 1000px) { .toc { display: none; } }
.toc h5 { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.toc a { display: block; color: var(--muted); padding: 6px 0 6px 14px; border-left: 2px solid var(--border); line-height: 1.35; text-decoration: none; }
.toc a:hover { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }
.toc a.on { color: var(--text); font-weight: 700; border-left-color: var(--accent); }

/* ---------- Meta strip under the page header ---------- */
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.doc-meta span {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; color: var(--muted);
}
.doc-meta span b { color: var(--text); font-weight: 700; }

/* ---------- Steps ---------- */
.doc-body { min-width: 0; }   /* so a wide <pre> scrolls instead of blowing out the grid */
.doc-step { padding: 34px 0; border-top: 1px solid var(--border); }
.doc-step:first-of-type { border-top: none; padding-top: 4px; }
.doc-step .kicker { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.doc-body h2 { scroll-margin-top: 24px; }

/* ---------- Collapsible sections ----------
   Open by default: this is a guide people follow while doing the work, so hiding
   the steps behind a click would cost more than the outline gains. "Collapse all"
   gives the outline in one click, and a rail click re-opens whatever it jumps to
   (help/guide.js). */
.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::marker { content: ""; }
.sec > summary h2 { margin: 0; }
.sec > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2.5px solid var(--border); border-bottom: 2.5px solid var(--border);
  transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease;
}
.sec[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.sec > summary:hover h2 { color: var(--accent); }
.sec > summary:hover::after { border-color: var(--accent); }
.sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.secbar { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.secbar button {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.secbar button:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Breadcrumb (admin-console click path) ----------
   The label is what turns this from a location header into an instruction. One
   line on desktop; below 1000px the content column is narrower, so wrapping is
   re-enabled there rather than letting it overflow. */
.crumbs { margin: 0 0 18px; padding: 12px 15px 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; border-left: 3px solid var(--accent); }
.crumb-label { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 9px; }
.crumb-path { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.crumbs .cr { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.crumbs .sep { color: var(--accent); font-size: 12.5px; font-weight: 700; }
@media (max-width: 1000px) { .crumb-path { flex-wrap: wrap; gap: 7px; } }
.crumbs .cr.act { background: rgba(var(--accent-rgb), .14); color: var(--accent); font-weight: 700; padding: 3px 9px; border-radius: 7px; }
.crumbs .gi { width: 14px; height: 14px; vertical-align: -3px; margin-right: 5px; }

/* ---------- Code block with copy button ---------- */
.code { position: relative; margin: 0 0 18px; }
.code pre {
  margin: 0; background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; padding-right: 96px;   /* room for the copy button */
  overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.65;
}
.code pre .k { color: var(--code-key); }
.code pre .v { color: var(--code-val); }
.code pre .c { color: var(--code-com); font-style: italic; }
.code .cp {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(244, 239, 230, .10); color: #F4EFE6;
  border: 1px solid rgba(244, 239, 230, .22); border-radius: 8px; padding: 6px 11px; cursor: pointer;
}
.code .cp:hover { background: rgba(244, 239, 230, .20); }
.code .cp.done { background: var(--success); border-color: var(--success); }
/* Filename tab above a block, for the guides that write several files */
.code-name { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 0 0 6px; letter-spacing: .04em; }

/* A topology/ASCII diagram: monospace, but a light well rather than the dark
   code treatment — it is a picture, not something to copy. */
pre.diagram {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; margin: 0 0 18px;
}

/* ---------- Callouts ----------
   .warn-box is amber-on-apricot rather than the red used for errors: it is
   something to act on now, not something that has gone wrong. */
.warn-box {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(var(--caution-rgb), .12); border: 1px solid rgba(var(--caution-rgb), .38);
  border-left: 3px solid var(--caution); border-radius: 0 10px 10px 0;
  padding: 13px 16px; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5;
}
.warn-box svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--caution); }
.warn-box strong { font-weight: 800; }
.warn-box code { font-size: 12px; }
/* Spacing when a warn-box is the thing that follows a code block, not a list item */
.code + .warn-box, .tbl-wrap + .warn-box { margin-top: 0; margin-bottom: 18px; }

/* A quieter aside than .warn-box, for a detail worth knowing rather than
   something that must be acted on in the moment. */
.note-inline { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; padding-left: 13px; border-left: 2px solid var(--border); }
.note-inline b { color: var(--text); font-weight: 700; }

/* .note comes from help/base.css; guides add a heading row to it. */
.note .nh { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--info); margin: 0 0 8px; }
.note ul { margin: 10px 0 0; padding-left: 19px; }
.note li:last-child { margin-bottom: 0; }

/* ---------- Figures (screenshots) ---------- */
figure { margin: 0 0 20px; }
.doc-body ol li figure { margin: 12px 0 18px; }   /* a shot inside its own step */
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px -12px var(--shadow); background: var(--sheet);
}
figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
figcaption b { color: var(--text); font-weight: 700; }

/* ---------- Tables ----------
   table.doc is the guide variant: wider padding and a wrapping first column,
   unlike help/base.css's table.matrix which nowraps it. A guide's first
   column is often a full env-var name, and nowrap on those forces a horizontal
   scroll on every row. */
.tbl-wrap { overflow-x: auto; margin: 0 0 18px; }
table.doc { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--sheet); border: 1px solid var(--border); border-radius: 12px; }
table.doc th, table.doc td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.doc th { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.doc tr:last-child td { border-bottom: none; }
table.doc td code { font-size: 12px; }
/* Opt-in nowrap, for the columns that genuinely are short labels */
table.doc td.nw { white-space: nowrap; }

/* ---------- Guide index cards (used by /help/sources to point at the guides) ---------- */
.guide-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 18px; }
@media (max-width: 760px) { .guide-cards { grid-template-columns: 1fr; } }
a.guide-card {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.guide-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
a.guide-card .tag { margin: 0 0 8px; }
a.guide-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
a.guide-card p { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
a.guide-card .go { font-size: 13px; font-weight: 700; color: var(--accent); }