/* commitd docs. Three columns like Stripe's docs, in the commitd paper palette (docs/STYLE.md). */
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f2f1e9;--ink:#20231f;--muted:#62695a;--line:#d7d9ce;--orange:#fa582e;--orange-deep:#b73210;--strip:#eaece2;
  --dark:#20251f;--dark-panel:#252c22;--dark-line:#4c5442;--dark-text:#c9d9b3;--dark-muted:#a8b09d;--sage:#c9d9b3;
  --mono:'IBM Plex Mono',monospace;--sans:Manrope,Arial,sans-serif;--top:56px}
*{box-sizing:border-box;border-radius:0}
html{scroll-padding-top:calc(var(--top) + 24px);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--sans)}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:var(--paper)}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* top bar */
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:18px;padding:0 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:-.04em;font-size:17px}
.brand-sep{color:var(--line)}.brand-docs{font-weight:500;color:var(--muted)}
.search{position:relative;flex:1;max-width:420px;margin-left:12px}
.search input{width:100%;background:var(--strip);border:1px solid transparent;padding:8px 36px 8px 12px;font:inherit;font-size:13px;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--orange);background:#fff}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:10px var(--mono);color:var(--muted);border:1px solid var(--line);padding:1px 5px}
.top-links{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:13px}
.top-links a:hover{color:var(--orange-deep)}
.top-links .btn{background:var(--ink);color:var(--paper);padding:8px 14px;font-weight:600;font-size:12px}
.top-links .btn:hover{background:#3a4134;color:var(--paper)}
.menu{display:none;background:none;border:1px solid var(--line);padding:4px 10px;font-size:16px;cursor:pointer}

/* layout */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr) 460px;min-height:calc(100vh - var(--top))}
.side{border-right:1px solid var(--line);padding:24px 16px 40px 24px;position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow-y:auto;scrollbar-width:thin}
.side nav a{display:block;padding:5px 10px;font-size:13.5px;color:var(--muted);border-left:2px solid transparent;margin-left:-2px}
.side nav a:hover{color:var(--ink)}
.side nav a.h2{font-weight:600;color:var(--ink);margin-top:14px}
.side nav a.h3{padding-left:22px}
.side nav a.on{color:var(--orange-deep);border-left-color:var(--orange)}
.side nav a.hidden{display:none}
.side-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.side-foot a{display:block;font-size:13px;padding:3px 10px;color:var(--muted)}.side-foot a:hover{color:var(--ink)}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 10px}

.content{padding:36px 48px 120px;max-width:820px}
.code-rail{border-left:1px solid var(--line);background:var(--dark);color:var(--dark-text)}
.rail-sticky{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow-y:auto;padding:28px 24px;scrollbar-width:thin}
.rail-sticky .cap{color:var(--dark-muted);margin:0 0 10px}
.rail-sticky .empty{color:var(--dark-muted);font-size:13px}
.rail-sticky .win{margin:0 0 16px;background:var(--dark-panel);border:1px solid var(--dark-line)}
.win-bar{display:flex;gap:10px;align-items:center;font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dark-muted);padding:7px 12px;border-bottom:1px solid var(--dark-line)}
.win-bar i{width:6px;height:6px;background:var(--orange);display:inline-block}
.win-bar .copy{margin-left:auto;background:none;border:0;color:var(--dark-muted);font:inherit;cursor:pointer;letter-spacing:.05em;padding:0}
.win-bar .copy:hover{color:var(--sage)}
.rail-sticky pre{margin:0;background:transparent;border:0;padding:12px 14px;font:12px/1.6 var(--mono);overflow:auto;color:var(--dark-text);white-space:pre;scrollbar-width:thin;scrollbar-color:var(--dark-line) transparent}
.rail-sticky pre::-webkit-scrollbar{height:6px;width:6px}.rail-sticky pre::-webkit-scrollbar-thumb{background:var(--dark-line)}.rail-sticky pre::-webkit-scrollbar-track{background:transparent}
.rail-sticky{scrollbar-color:var(--dark-line) transparent}

/* syntax colours (highlight.js classes), sage palette on the dark panel */
.hljs{color:var(--dark-text);background:transparent}
.hljs-comment,.hljs-quote{color:#7f8a73;font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-built_in{color:#e6b58a}
.hljs-string,.hljs-attr,.hljs-template-variable,.hljs-addition{color:#c9d9b3}
.hljs-number,.hljs-regexp{color:#f0a37a}
.hljs-title,.hljs-function .hljs-title,.hljs-title.function_,.hljs-section{color:#f2f1e9}
.hljs-attribute,.hljs-variable,.hljs-property{color:#d8e4c4}
.hljs-punctuation,.hljs-operator{color:#a8b09d}
.hljs-meta{color:#a8b09d}

/* article typography */
.content h1{font-weight:500;font-size:clamp(30px,4vw,42px);letter-spacing:-.05em;line-height:1.1;margin:0 0 10px}
.content .lede{color:var(--muted);font-size:16px;max-width:60ch;margin:0 0 28px}
.content h2{font-weight:500;font-size:26px;letter-spacing:-.04em;margin:56px 0 12px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--top) + 16px)}
.content h2:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.content h3{font-weight:600;font-size:17px;margin:34px 0 8px;scroll-margin-top:calc(var(--top) + 16px)}
.content h2 a.anchor,.content h3 a.anchor{color:var(--line);margin-left:8px;font-weight:400;opacity:0;transition:opacity .2s}
.content h2:hover a.anchor,.content h3:hover a.anchor{opacity:1}
.content p,.content li{color:#30362c}
.content ul,.content ol{padding-left:22px}
.content li{margin:4px 0}
.content code{font-family:var(--mono);font-size:.88em;background:var(--strip);padding:1px 5px;color:var(--ink)}
.content pre{background:var(--dark-panel);color:var(--dark-text);border:1px solid var(--dark-line);padding:14px 16px;overflow:auto;font:12.5px/1.6 var(--mono);margin:14px 0 18px;scrollbar-width:thin;scrollbar-color:var(--dark-line) transparent}
.content pre::-webkit-scrollbar{height:6px}.content pre::-webkit-scrollbar-thumb{background:var(--dark-line)}
.content pre code{background:none;padding:0;color:inherit;font-size:inherit}
.content table{border-collapse:collapse;width:100%;font-size:13.5px;margin:14px 0 20px}
.content th{text-align:left;font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.content td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.content blockquote{margin:16px 0;padding:12px 16px;border-left:2px solid var(--orange);background:var(--strip);color:var(--ink)}
.content blockquote p{margin:0}
.content hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.content a:hover{color:var(--orange-deep)}
.content .nav-foot{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.content .nav-foot a{text-decoration:none;font-weight:600}
.content .nav-foot span{display:block;font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.content .muted{color:var(--muted)}
.content mark{background:#ffe9b3;color:inherit}

@media (max-width:1240px){.layout{grid-template-columns:240px minmax(0,1fr)}.code-rail{display:none}.content pre{display:block}}
@media (min-width:1241px){.content pre.railed{display:none}}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:var(--top);width:min(320px,86vw);background:var(--paper);z-index:15;transform:translateX(-100%);transition:transform .2s;border-right:1px solid var(--line)}
  .side.open{transform:none}
  .menu{display:block}.top-links{display:none}.search{max-width:none}
  .content{padding:24px 16px 80px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}