/*
 * Gitstalk docs: the site's Nightshift skin (../site.css) plus a left nav, long-form prose,
 * tables, code blocks, status pills and the architecture diagram.
 *
 * ======================= DOCS UI KIT (writers: copy from _kit.html) =======================
 * Rules: never edit nav in a page (the list is DOCS_NAV in docs.js); never write CSS in a page;
 * links are root-absolute clean URLs (/docs/git); every claim is checked against code.
 * Status words everywhere: live, beta, planned (the old .pill.rolling/.soon still work).
 *
 * BADGE         <span class="badge live">live</span>  <span class="badge beta">beta</span>
 *               <span class="badge planned">planned</span>
 * CALLOUT       <aside class="callout tip"><p class="callout-title">Tip</p><p>Text.</p></aside>
 *               (also .note and .warning)
 * STEPS         <ol class="steps"><li><h3>Do it</h3><p>Words.</p> [a .cmd block] </li></ol>
 * CODE + COPY   <div class="cmd" data-copyable><header><span>Terminal</span></header>
 *                 <pre><code>git push</code></pre></div>   (pre.url drops the "$ " prefix)
 * TABBED CODE   <div class="install" data-agent-tabs id="x">
 *                 <section class="cmd" data-agent="claude-code" data-name="Claude Code">
 *                   <header><span>Claude Code</span></header><pre><code>...</code></pre>
 *                 </section> ... one section per tab (ids: claude-code, codex, git ...) </div>
 * UI MOCK       <figure class="mock" aria-label="What it shows">
 *                 <div class="mock-bar" aria-hidden="true"><i></i><i></i><i></i>
 *                   <span class="mock-url">gitstalk.dev/acme/api</span></div>
 *                 <div class="mock-body"> ...components... </div>
 *                 <figcaption>One line saying what to look at.</figcaption></figure>
 *               Components: .m-repo (+.m-tabs), .m-bean (+.ms.checking|landed|green|red|held),
 *               .m-field and .m-secret (key, .val, .when, .m-btn in that order), .m-run (+.m-step.ok|run|fail|wait), .m-decision,
 *               .m-term (+.ok .dim .bad spans). Mocks are decoration: no real links or inputs.
 * FLOW          <ol class="flow" aria-label="Push to stalk"><li class="bean"><b>Push</b>
 *                 <span>a bean branch</span></li> ... (.bean .sprout .stalk tint a node)</ol>
 * FEATURE CARDS <div class="fgrid"><a class="fcard" href="/docs/git"><h3>Git <span
 *                 class="badge live">live</span></h3><p>One sentence.</p></a></div>
 * ON THIS PAGE Nothing to write: docs.js builds it from the article's h2 and h3 headings (not
 *               those inside .steps, cards, mocks or callouts) when there are 3 or more, keeps
 *               each heading's id or slugifies its text, and adds a hover # link. Give a heading
 *               an id when other pages link to it. It renders as
 *               <details class="toc"><summary>On this page</summary><nav aria-label="On this
 *                 page"><ul><li><a href="#x" aria-current="true">X</a><ul>...h3...</ul></li>
 *                 </ul></nav></details>   (right column from 1200px, a disclosure below that)
 * ==========================================================================================
 */

.docs {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-top: 36px;
  padding-bottom: 88px;
}

/* ---------- Left nav ----------
 * The nav is a <details> served closed, so a phone paints it folded above the article with no
 * shift. On wide screens its summary is hidden and its content shown even while closed. */
@media (min-width: 901px) {
  .dnav::details-content {
    content-visibility: visible;
    display: block;
  }
}
.dnav {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-size: 14.5px;
}
.dnav summary {
  display: none;
}
.dnav h2 {
  font: 600 12.5px var(--mono);
  color: var(--fg-subtle);
  margin: 22px 0 8px;
}
.dnav h2:first-child {
  margin-top: 0;
}
.dnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.dnav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.dnav a:hover {
  color: var(--fg);
  background: var(--subtle);
}
.dnav a[aria-current='page'] {
  color: var(--fg);
  background: var(--subtle);
  border-left-color: var(--leaf);
}
/* A small status mark per feature link: the same three states as the pills. */
.dnav a .st {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
}
.st.live {
  background: var(--leaf);
  box-shadow: 0 0 6px var(--glowc);
}
.st.rolling {
  background: var(--bean);
}
.st.soon {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--amber);
}
.dnav .legend {
  margin: 22px 0 0;
  padding: 12px 10px 0;
  border-top: 1px solid var(--border-muted);
  font: 12px/1.9 var(--mono);
  color: var(--fg-subtle);
}
.dnav .legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dnav .legend .st {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ---------- Article ---------- */
.doc {
  min-width: 0;
  max-width: 76ch;
}
.doc .prompt {
  margin-bottom: 14px;
}
.doc h1 {
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
}
.doc .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 16px 0 0;
}
.doc h2 {
  font-size: 23px;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 48px 0 0;
  scroll-margin-top: 80px;
}
.doc h3 {
  font-size: 17.5px;
  font-weight: 600;
  margin: 30px 0 0;
  scroll-margin-top: 80px;
}
.doc p,
.doc li {
  color: var(--fg-muted);
  font-size: 16.5px;
  line-height: 1.68;
}
.doc p {
  margin: 12px 0 0;
}
.doc ul,
.doc ol {
  margin: 12px 0 0;
  padding-left: 22px;
}
.doc li + li {
  margin-top: 4px;
}
.doc strong {
  color: var(--fg);
  font-weight: 600;
}
.doc a {
  color: var(--leaf-ink);
}
.doc :not(pre) > code {
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--inset);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.doc pre {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
}
.doc pre .c {
  color: var(--fg-subtle);
}
.doc pre .ok {
  color: var(--leaf-ink);
}
.doc pre .bad {
  color: var(--red);
}

/* Agent tabs in a doc (site.css has the component): left-aligned, set to the doc's measure. */
.doc .install {
  max-width: none;
  margin: 16px 0 0;
}
.doc .picker {
  justify-content: flex-start;
}
.doc .cmd {
  box-shadow: none;
  border-radius: 8px;
}
.doc .cmd pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 14px 16px;
  font-size: 13.5px;
}
.doc .cmd-note {
  margin: 0;
  padding: 10px 16px 12px;
}

/* Tables scroll inside their own box on a phone; the page never scrolls sideways. */
.tbl {
  margin: 18px 0 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.tbl th,
.tbl td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-muted);
  color: var(--fg-muted);
  line-height: 1.5;
}
.tbl th {
  font: 600 12.5px var(--mono);
  color: var(--fg-subtle);
  background: var(--subtle);
  white-space: nowrap;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl td:first-child {
  color: var(--fg);
}
.tbl td.num,
.tbl th.num {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font: 500 12px/20px var(--mono);
  white-space: nowrap;
  vertical-align: 0.12em;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.pill.live {
  color: var(--leaf-ink);
  border-color: color-mix(in srgb, var(--leaf) 45%, var(--border));
  background: var(--leaf-bg);
}
.pill.live::before {
  background: var(--leaf);
  box-shadow: 0 0 6px var(--glowc);
}
.pill.rolling {
  color: var(--bean);
  border-color: color-mix(in srgb, var(--bean) 45%, var(--border));
  background: var(--bean-bg);
}
.pill.rolling::before {
  background: var(--bean);
}
.pill.soon {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}
.pill.soon::before {
  box-shadow: inset 0 0 0 1.5px var(--amber);
}
.doc h1 .pill,
.doc h2 .pill,
.doc h3 .pill {
  margin-left: 10px;
  vertical-align: 0.3em;
}
.status-line {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 14.5px;
  color: var(--fg-subtle);
}

/* ---------- Callouts: a fact you must not miss (caveat) or a next step ---------- */
.note {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--border);
  background: var(--subtle);
  border-radius: 0 8px 8px 0;
}
.note p:first-child {
  margin-top: 0;
}
.note.caveat {
  border-left-color: var(--amber);
}
.note.plain {
  border-left-color: var(--leaf);
}

/* ---------- Getting started steps (a real sequence) ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 44px;
  margin: 0 !important;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 13px var(--mono);
  color: var(--leaf-ink);
  border: 1px solid color-mix(in srgb, var(--leaf) 50%, var(--border));
  background: var(--page);
}
.steps > li::after {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 30px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.steps > li:last-child::after {
  display: none;
}
.steps h3 {
  margin: 2px 0 0;
  font-size: 16.5px;
}

/* ---------- Results bars (as the landing page's .cbar) ---------- */
.bars {
  margin: 20px 0 0;
  display: grid;
  gap: 8px;
}
.bar {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font: 13px var(--mono);
  color: var(--fg-muted);
}
.bar .track {
  height: 24px;
}
.bar .fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 9px;
  min-width: max-content;
  font: 600 12.5px var(--mono);
  white-space: nowrap;
  background: color-mix(in srgb, var(--fg-subtle) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-subtle) 55%, transparent);
  color: var(--fg);
}
.bar.us .fill {
  background: var(--leaf);
  border-color: transparent;
  color: var(--on-leaf);
  box-shadow: 0 0 14px -3px var(--glowc);
}
.bars-cap {
  margin: 8px 0 0;
  font: 12.5px/1.5 var(--mono);
  color: var(--fg-subtle);
}

/* ---------- The path of a bean (architecture) ---------- */
.path {
  list-style: none;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  position: relative;
}
.path::before {
  /* The stalk itself: one luminous line the stages hang off. */
  content: '';
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--bean), var(--sprout) 48%, var(--leaf));
  box-shadow: 0 0 10px -1px var(--glowc);
}
.path > li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 22px 48px;
}
.path > li::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--page);
  border: 2px solid var(--stage, var(--leaf));
}
.path > li.bean {
  --stage: var(--bean);
}
.path > li.sprout {
  --stage: var(--sprout);
}
.path > li.stalk {
  --stage: var(--leaf);
}
.path > li.stalk::before {
  background: var(--leaf);
  box-shadow: 0 0 8px var(--glowc);
}
.path h3 {
  margin: 0;
  font-size: 17px;
}
.path p {
  margin: 6px 0 0;
}
.path .on {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.cf {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--subtle);
  font: 12px/20px var(--mono);
  color: var(--fg-muted);
}

/* ---------- Research entries ---------- */
.finding {
  margin: 26px 0 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.finding h3 {
  margin: 0;
  font-size: 18px;
}
.finding dl {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px 16px;
}
.finding dt {
  font: 600 12.5px/1.9 var(--mono);
  color: var(--fg-subtle);
}
.finding dd {
  margin: 0;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.62;
}
.finding dd.instead {
  color: var(--fg);
}
.finding .src {
  margin: 12px 0 0;
  font: 12.5px/1.6 var(--mono);
  color: var(--fg-subtle);
}
.finding .src a {
  color: var(--fg-muted);
}

/* ---------- Feature index on the overview ---------- */
.flist {
  list-style: none;
  padding: 0 !important;
  margin: 18px 0 0 !important;
  border-top: 1px solid var(--border-muted);
}
.flist li {
  margin: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-muted);
}
.flist a {
  font-weight: 600;
  text-decoration: none;
}
.flist a:hover {
  text-decoration: underline;
}
.flist span.d {
  grid-column: 1 / -1;
  color: var(--fg-muted);
  font-size: 15.5px;
}

/* ---------- Sources and pager ---------- */
.sources {
  margin: 48px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-muted);
}
.sources h2 {
  margin: 0;
  font: 600 13px var(--mono);
  color: var(--fg-subtle);
}
.sources ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.sources li {
  font-size: 14.5px;
}
.pager {
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pager a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
}
.pager a:hover {
  border-color: var(--fg-subtle);
}
.pager small {
  display: block;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.pager .next {
  text-align: right;
  grid-column: 2;
}

/* ---------- On this page (built by docs.js; no JavaScript, no TOC) ----------
 * The <details class="toc"> sits before the article. From 1200px it is a sticky third column with
 * its content always shown; below that it is an "On this page" disclosure above the article. */
.docs.has-toc {
  row-gap: 24px;
}
.docs.has-toc > .dnav {
  grid-row: 1 / span 2;
}
.docs.has-toc > .toc {
  grid-column: 2;
  grid-row: 1;
}
.docs.has-toc > .doc {
  grid-column: 2;
  grid-row: 2;
}
.toc {
  max-width: 76ch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 14px;
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font: 500 14px var(--mono);
  color: var(--fg);
  list-style: none;
}
.toc summary::-webkit-details-marker {
  display: none;
}
.toc summary::after {
  content: '+';
  color: var(--leaf-ink);
  font-weight: 600;
}
.toc[open] summary::after {
  content: '\2212';
}
.toc nav {
  padding: 0 8px 12px;
}
.toc .toc-title {
  display: none;
  margin: 0 0 8px;
  padding-left: 12px;
  font: 600 12.5px var(--mono);
  color: var(--fg-subtle);
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.toc ul ul {
  margin: 1px 0 2px;
}
.toc a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid var(--border-muted);
  color: var(--fg-muted);
  text-decoration: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.toc ul ul a {
  padding-left: 24px;
  font-size: 13.5px;
}
.toc a:hover {
  color: var(--fg);
  border-left-color: var(--fg-subtle);
}
.toc a[aria-current='true'] {
  color: var(--leaf-ink);
  border-left-color: var(--leaf);
  background: var(--leaf-bg);
}
.toc a:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: -2px;
}
@media (min-width: 1200px) {
  .docs.has-toc {
    grid-template-columns: 236px minmax(0, 1fr) 208px;
    gap: 40px;
  }
  .docs.has-toc > .dnav,
  .docs.has-toc > .doc {
    grid-row: 1;
  }
  .docs.has-toc > .toc {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    border: 0;
    background: none;
  }
  .toc::details-content {
    content-visibility: visible;
    display: block;
  }
  .toc summary {
    display: none;
  }
  .toc nav {
    padding: 0;
  }
  .toc .toc-title {
    display: block;
  }
}

/* The hover # beside a heading (docs.js adds it with the TOC). */
.doc .anchor {
  margin-left: 8px;
  padding: 0 4px;
  color: var(--fg-subtle);
  font: 500 0.8em var(--mono);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.doc h2:hover .anchor,
.doc h3:hover .anchor,
.doc .anchor:focus-visible {
  opacity: 1;
}
.doc .anchor:hover {
  color: var(--leaf-ink);
}
@media (hover: none) {
  .doc .anchor {
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .doc .anchor {
    transition: none;
  }
}
.doc section[id] {
  scroll-margin-top: 80px;
}

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 18px;
  }
  .docs.has-toc > .dnav,
  .docs.has-toc > .toc,
  .docs.has-toc > .doc {
    grid-column: 1;
    grid-row: auto;
  }
  .toc {
    max-width: none;
  }
  .dnav {
    position: static;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
  }
  .dnav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font: 500 14px var(--mono);
    color: var(--fg);
    list-style: none;
  }
  .dnav summary::-webkit-details-marker {
    display: none;
  }
  .dnav summary::after {
    content: '+';
    color: var(--leaf-ink);
    font-weight: 600;
  }
  .dnav[open] summary::after {
    content: '−';
  }
  .dnav .inner {
    padding: 4px 8px 12px;
  }
}
@media (max-width: 640px) {
  .doc .lede {
    font-size: 17.5px;
  }
  .bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .finding {
    padding: 16px;
  }
  .finding dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .finding dd + dt {
    margin-top: 8px;
  }
  .pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .pager .next {
    grid-column: 1;
  }
}

/* The site header's Docs link, while reading the docs. */
.top .nav a[aria-current] {
  color: var(--fg);
}

/* Short code in a table cell stays on one line; the table scrolls in its own box instead. */
.tbl code {
  white-space: nowrap;
}

/* =====================================================================================
 * UI KIT (see the comment block at the top for snippets)
 * ===================================================================================== */

/* ---------- Badges: live / beta / planned ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font: 500 11.5px/18px var(--mono);
  white-space: nowrap;
  vertical-align: 0.1em;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge.live {
  color: var(--leaf-ink);
  border-color: color-mix(in srgb, var(--leaf) 45%, var(--border));
  background: var(--leaf-bg);
}
.badge.live::before {
  background: var(--leaf);
  box-shadow: 0 0 6px var(--glowc);
}
.badge.beta {
  color: var(--bean);
  border-color: color-mix(in srgb, var(--bean) 45%, var(--border));
  background: var(--bean-bg);
}
.badge.beta::before {
  background: var(--bean);
}
.badge.planned {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}
.badge.planned::before {
  box-shadow: inset 0 0 0 1.5px var(--amber);
}
.doc h1 .badge,
.doc h2 .badge,
.doc h3 .badge {
  margin-left: 10px;
  vertical-align: 0.25em;
}

/* ---------- Callouts: note, tip, warning ---------- */
.callout {
  margin: 20px 0 0;
  padding: 12px 16px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-subtle);
  border-radius: 0 8px 8px 0;
  background: var(--subtle);
}
.callout > :first-child {
  margin-top: 0;
}
.callout p {
  margin: 8px 0 0;
}
.callout .callout-title {
  margin: 0;
  font: 600 12.5px var(--mono);
  letter-spacing: 0.02em;
  color: var(--fg);
}
.callout.note {
  border-left-color: var(--bean);
}
.callout.tip {
  border-left-color: var(--leaf);
}
.callout.tip .callout-title {
  color: var(--leaf-ink);
}
.callout.warning {
  border-left-color: var(--amber);
}
.callout.warning .callout-title {
  color: var(--amber);
}

/* ---------- Code blocks inside steps and docs ---------- */
.steps .cmd,
.doc .cmd[data-copyable],
.doc .tabbed .cmd {
  margin: 12px 0 0;
}
.steps p + .cmd,
.steps .cmd + p {
  margin-top: 12px;
}
.doc .cmd header {
  min-height: 44px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.doc .cmd .copyhint {
  padding-bottom: 10px;
}
.doc .tabbed > .picker + .cmd {
  margin-top: 12px;
}
.doc .picker [role='tab'] {
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
.doc .cmd pre.url::before {
  content: '';
}

/* ---------- Mock frames: the product in miniature ---------- */
.mock {
  margin: 22px 0 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border-muted);
}
.mock-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.mock-url {
  margin-left: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--inset);
  font: 12px/20px var(--mono);
  color: var(--fg-subtle);
}
.mock-body {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.5;
}
.mock figcaption {
  padding: 9px 14px;
  border-top: 1px solid var(--border-muted);
  background: var(--subtle);
  font: 12.5px/1.5 var(--mono);
  color: var(--fg-subtle);
}
.mock .mono {
  font-family: var(--mono);
}
.mock b,
.mock strong {
  color: var(--fg);
  font-weight: 600;
}

/* Bean status row */
.m-bean {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--subtle);
}
.m-bean .name {
  font: 600 13.5px var(--mono);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.m-bean .by {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.m-bean .ms {
  grid-row: 1 / span 2;
  grid-column: 3;
}
.m-bean .dot {
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-subtle);
}
.ms {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font: 500 12px/20px var(--mono);
  white-space: nowrap;
  color: var(--fg-muted);
}
.ms::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ms.checking {
  color: var(--bean);
  background: var(--bean-bg);
  border-color: color-mix(in srgb, var(--bean) 45%, var(--border));
}
.ms.checking::before {
  animation: m-pulse 1.4s ease-in-out infinite;
}
.ms.landed {
  color: var(--sprout);
  background: var(--sprout-bg);
  border-color: color-mix(in srgb, var(--sprout) 45%, var(--border));
}
:root[data-theme='light'] .ms.landed {
  color: #2f6b05;
}
.ms.green {
  color: var(--leaf-ink);
  background: var(--leaf-bg);
  border-color: color-mix(in srgb, var(--leaf) 45%, var(--border));
}
.ms.red {
  color: var(--red);
  background: var(--red-bg);
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
}
.ms.held {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
}
.m-bean:has(.ms.checking) .dot {
  background: var(--bean);
}
.m-bean:has(.ms.landed) .dot {
  background: var(--sprout);
}
.m-bean:has(.ms.green) .dot {
  background: var(--leaf);
}
.m-bean:has(.ms.red) .dot {
  background: var(--red);
}
.m-bean:has(.ms.held) .dot {
  background: var(--amber);
}
@keyframes m-pulse {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms.checking::before {
    animation: none;
  }
}

/* Repository header with tabs */
.m-repo .title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font: 15px var(--mono);
  color: var(--fg-subtle);
}
.m-repo .title b {
  font-size: 17px;
}
.m-repo .meta {
  margin: 4px 0 0;
  color: var(--fg-subtle);
  font-size: 13px;
}
.m-tabs {
  display: flex;
  gap: 2px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.m-tabs span {
  padding: 7px 12px;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--fg-subtle);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.m-tabs span.on {
  color: var(--fg);
  border-bottom-color: var(--leaf);
}
.m-tabs small {
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--inset);
  font: 11.5px var(--mono);
}

/* Settings form rows */
.m-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4px 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-muted);
}
.m-field:last-child {
  border-bottom: 0;
}
.m-field .label b {
  display: block;
  font-size: 14px;
}
.m-field .label span {
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.m-input {
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--page);
  font: 13px/20px var(--mono);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 4px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--subtle);
}
.m-secret .key {
  font: 600 13px var(--mono);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.m-secret .val {
  font: 13px var(--mono);
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.m-secret .when {
  font-size: 12px;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.m-btn {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  background: var(--bg);
}
.m-btn.primary {
  background: var(--leaf);
  border-color: transparent;
  color: var(--on-leaf);
  font-weight: 600;
}

/* Actions run with steps */
.m-run {
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  overflow: hidden;
}
.m-run > header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border-muted);
}
.m-run > header b {
  font-size: 14px;
}
.m-run > header span.sub {
  margin-left: auto;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.m-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-muted);
  font: 13px var(--mono);
}
.m-step:last-child {
  border-bottom: 0;
}
.m-step::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--fg-subtle);
  justify-self: center;
}
.m-step.ok::before {
  background: var(--leaf);
  border-color: var(--leaf);
}
.m-step.run::before {
  border-color: var(--bean);
  border-top-color: transparent;
  animation: m-spin 1s linear infinite;
}
.m-step.fail::before {
  background: var(--red);
  border-color: var(--red);
}
.m-step.fail {
  color: var(--red);
}
.m-step .t {
  color: var(--fg-subtle);
  font-size: 12px;
}
@keyframes m-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-step.run::before {
    animation: none;
  }
}

/* Decision card */
.m-decision {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 6%, var(--subtle));
}
.m-decision .q {
  margin: 6px 0 0;
  color: var(--fg);
  font-size: 15px;
}
.m-decision .opts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.m-decision .opt {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.m-decision .opt b {
  display: block;
  font-size: 13.5px;
}
.m-decision .opt span {
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.m-decision .opt.pick {
  border-color: var(--leaf);
  background: var(--leaf-bg);
}

/* Terminal with git push output */
.m-term {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  font: 12.5px/1.65 var(--mono);
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
}
.m-term .dim {
  color: var(--fg-subtle);
}
.m-term .ok {
  color: var(--leaf-ink);
}
.m-term .bad {
  color: var(--red);
}
.m-term .p {
  color: var(--leaf);
  font-weight: 600;
}

/* The Code tab's file tree beside an open file. `.m-files` holds `.tree` (rows of
   `.row` with `--d` for depth; `.on` is the open file, `.way` lights the stalk's guide)
   and `.file` (`.head`, then numbered `.ln` lines). Under 640 px the file goes alone. */
.m-files {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.m-files .tree,
.m-files .file {
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--subtle);
  min-width: 0;
  overflow: hidden;
}
.m-files .tree {
  padding: 6px 0;
}
.m-files .find {
  margin: 0 8px 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font: 12px var(--sans);
  color: var(--fg-subtle);
}
.m-files .row {
  position: relative;
  padding: 2px 10px 2px calc(12px + var(--d, 0) * 13px);
  font: 12.5px/1.6 var(--mono);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-files .row::before {
  content: '';
  display: inline-block;
  width: 7px;
  margin-right: 6px;
  color: var(--fg-subtle);
}
.m-files .row.dir::before {
  content: '▸';
}
.m-files .row.dir.open::before {
  content: '▾';
}
.m-files .row.dir {
  color: var(--leaf-ink);
}
/* The stalk: a green guide left of each row on the way to the open file. */
.m-files .row.way,
.m-files .row.on {
  background: linear-gradient(var(--leaf), var(--leaf)) no-repeat calc(2px + var(--d, 0) * 13px) 0 /
    2px 100%;
}
.m-files .row.on {
  background-color: var(--leaf-bg);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--leaf);
}
.m-files .head {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-muted);
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.m-files .ln {
  display: block;
  padding: 0 12px;
  font: 12.5px/1.7 var(--mono);
  color: var(--fg);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-files .ln::before {
  content: attr(data-n);
  display: inline-block;
  width: 2ch;
  margin-right: 12px;
  text-align: right;
  color: var(--fg-subtle);
}
@media (max-width: 640px) {
  .m-files {
    grid-template-columns: minmax(0, 1fr);
  }
  .m-files .tree {
    display: none;
  }
}

/* ---------- Flow diagram: boxes and arrows ---------- */
.flow {
  list-style: none;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px 0;
}
.flow > li {
  position: relative;
  flex: 1 1 120px;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--stage, var(--fg-subtle));
  border-radius: 8px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.4;
}
.flow > li + li {
  margin-left: 26px !important;
}
.flow > li + li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--fg-subtle);
}
.flow > li + li::after {
  content: '';
  position: absolute;
  left: -9px;
  top: calc(50% - 4px);
  border: 5px solid transparent;
  border-left: 7px solid var(--fg-subtle);
  border-right: 0;
}
.flow b {
  display: block;
  color: var(--fg);
  font-size: 14px;
}
.flow span {
  color: var(--fg-subtle);
  font-size: 12.5px;
}
.flow > li.bean {
  --stage: var(--bean);
}
.flow > li.sprout {
  --stage: var(--sprout);
}
.flow > li.stalk {
  --stage: var(--leaf);
}
@media (max-width: 640px) {
  .flow {
    flex-direction: column;
    gap: 0;
  }
  .flow > li {
    flex: none;
  }
  .flow > li + li {
    margin: 22px 0 0 !important;
  }
  .flow > li + li::before {
    left: 50%;
    top: -20px;
    width: 2px;
    height: 16px;
  }
  .flow > li + li::after {
    left: calc(50% - 4px);
    top: -6px;
    border: 5px solid transparent;
    border-top: 7px solid var(--fg-subtle);
    border-bottom: 0;
  }
}

/* ---------- Feature cards ---------- */
.fgrid {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.fcard {
  display: block;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  text-decoration: none;
  color: var(--fg-muted);
}
.fcard:hover {
  border-color: var(--leaf);
}
.doc .fcard h3 {
  margin: 0;
  font-size: 16.5px;
  color: var(--fg);
}
.doc .fcard p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .mock-body {
    padding: 12px;
  }
  .m-field {
    grid-template-columns: minmax(0, 1fr);
  }
  .m-secret {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .m-secret .val,
  .m-secret .when {
    grid-column: 1;
  }
  .m-secret .m-btn {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* ---------- Fold: a collapsed block of reference detail (architecture engine rules) ---------- */
details.fold {
  margin: 10px 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
details.fold > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--fg);
  list-style-position: inside;
}
details.fold[open] > summary {
  border-bottom: 1px solid var(--border-muted);
}
details.fold > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}
details.fold > :last-child {
  margin-bottom: 14px;
}