/* =========================================================== Aracne — documentation styles Layered on top of styles.css (palette + nav + buttons). No external fonts, no CDN, no build step. =========================================================== */ /* styles.css sets `overflow-x:hidden` on body, which turns body into a scroll container and silently breaks `position:sticky` on the sidebar. `clip` gives the same overflow protection without creating one. */ body.docs{overflow-x:clip;overflow-y:visible} /* styles.css also sets scroll-padding-top:80px on . That STACKS with the scroll-margin-top the headings below carry, landing every anchor jump ~170px clear of the nav. One offset, in one place: the headings own it. */ html{scroll-padding-top:0} /* ---------------- SHELL ---------------- */ .docs-shell{ display:grid; grid-template-columns:286px minmax(0,1fr); gap:56px; width:100%;max-width:1340px;margin:0 auto; padding:104px 28px 120px; } /* ---------------- SIDEBAR ---------------- */ .docs-side{ position:sticky;top:84px;align-self:start; max-height:calc(100vh - 112px); overflow-y:auto;overscroll-behavior:contain; padding-right:10px; scrollbar-width:thin;scrollbar-color:var(--line) transparent; } .docs-side::-webkit-scrollbar{width:8px} .docs-side::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .side-search{position:relative;margin-bottom:20px} .side-search input{ width:100%;padding:9px 12px 9px 34px; border-radius:9px;border:1px solid var(--line); background:var(--panel);color:var(--text); font-family:var(--sans);font-size:14px; } .side-search input::placeholder{color:var(--muted-dim)} .side-search input:focus{outline:none;border-color:var(--accent)} .side-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted-dim)} .side-empty{ display:none;padding:10px 4px;font-size:13.5px;color:var(--muted-dim); } .side-empty.on{display:block} .side-group{margin-bottom:22px} .side-group > p{ font-size:11px;letter-spacing:.15em;text-transform:uppercase; font-weight:700;color:var(--muted-dim);margin-bottom:8px;padding-left:11px; } .side-group ul{display:flex;flex-direction:column;gap:2px} /* Every row is exactly one line high. A sidebar is read as a rhythm, so one label wrapping to two lines reads as a spacing bug in the whole group rather than as a long label — which is what the comma-list CLI labels used to do at this width. `nowrap` + ellipsis makes row height structural instead of a function of the longest label, so a label added later degrades to an ellipsis and never re-spaces its neighbours. */ .side-group a{ display:block;margin:0;padding:5px 11px;border-radius:7px; font-size:14px;line-height:1.5;color:var(--muted);text-decoration:none; border-left:2px solid transparent;max-width:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .15s,background .15s,border-color .15s; } .side-group a:hover{color:var(--text-strong);background:color-mix(in srgb,var(--panel) 70%,transparent)} /* Deliberately no font-weight change: bolding the active row changes its text width, which under `nowrap` can truncate a label the moment you scroll onto it. Colour, the accent rule and the tint carry the state without touching metrics. */ .side-group a.on{ color:var(--accent);border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); } .side-group a.side-sub{padding-left:26px;font-size:13.5px} .side-group li.hide{display:none} /* Mobile drawer */ .side-toggle{display:none} @media (max-width:1000px){ .docs-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:92px 20px 100px} .docs-side{ position:static;max-height:none;overflow:visible; margin-bottom:34px;padding:16px 14px; border:1px solid var(--line-soft);border-radius:var(--r); background:var(--bg2); } .docs-side[data-open="false"] .side-nav, .docs-side[data-open="false"] .side-search{display:none} .side-toggle{ display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; padding:0;border:0;background:none;color:var(--text-strong); font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer; } .side-toggle span.caret{color:var(--muted);transition:transform .2s} .docs-side[data-open="true"] .side-toggle{margin-bottom:16px} .docs-side[data-open="true"] span.caret{transform:rotate(90deg)} } /* ---------------- CONTENT ---------------- */ .docs-body{min-width:0;max-width:860px} .docs-lede{ padding-bottom:32px;margin-bottom:8px; border-bottom:1px solid var(--line-soft); } .docs-lede h1{ font-size:clamp(30px,4.4vw,42px);line-height:1.12; letter-spacing:-.025em;font-weight:700;color:var(--text-strong); margin-bottom:14px; } .docs-lede p{color:var(--muted);font-size:17.5px;line-height:1.6;max-width:62ch} .docs-meta{ display:flex;flex-wrap:wrap;gap:9px;margin-top:20px; } /* Headings */ .docs-body h2{ font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:680; color:var(--text-strong); margin:64px 0 6px;padding-top:18px; scroll-margin-top:92px; } .docs-body h2:first-of-type{margin-top:44px} .docs-body h2 .num{ display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);font-weight:700;margin-bottom:9px; } .docs-body h3{ font-size:19px;line-height:1.3;font-weight:640;color:var(--text-strong); margin:40px 0 4px;scroll-margin-top:92px; } .docs-body h4{ font-size:15.5px;font-weight:640;color:var(--text); margin:26px 0 2px;scroll-margin-top:92px; } .docs-body h2 + p,.docs-body h3 + p,.docs-body h4 + p{margin-top:10px} .docs-body p{color:var(--muted);line-height:1.72;margin:14px 0;max-width:70ch} .docs-body p strong,.docs-body li strong{color:var(--text);font-weight:600} .docs-body em{color:var(--text)} .docs-body a:not(.btn):not(.pill){ color:var(--accent);text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 32%,transparent); } .docs-body a:not(.btn):not(.pill):hover{border-bottom-color:var(--accent)} .docs-body hr{ border:0;border-top:1px solid var(--line-soft);margin:56px 0 0; } /* Inline code */ .docs-body :not(pre) > code{ font-family:var(--mono);font-size:.875em; padding:1.5px 5px;border-radius:5px; background:color-mix(in srgb,var(--panel2) 80%,transparent); border:1px solid var(--line-soft); color:#bfe6ff;white-space:nowrap; } /* Lists */ .docs-body ul.bul,.docs-body ol.num-list{ margin:14px 0;display:flex;flex-direction:column;gap:9px;max-width:70ch; } .docs-body ul.bul li,.docs-body ol.num-list li{ position:relative;padding-left:20px;color:var(--muted);line-height:1.68; } .docs-body ul.bul li::before{ content:"";position:absolute;left:4px;top:.72em; width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.65; } .docs-body ol.num-list{counter-reset:n} .docs-body ol.num-list li{counter-increment:n;padding-left:28px} .docs-body ol.num-list li::before{ content:counter(n);position:absolute;left:0;top:.06em; width:19px;height:19px;border-radius:50%; display:grid;place-items:center; font-family:var(--mono);font-size:11px;font-weight:700; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); } .docs-body ul.bul ul.bul{margin:8px 0 0} /* ---------------- CODE BLOCKS ---------------- */ .cb{ position:relative;margin:18px 0; border:1px solid var(--line);border-radius:var(--r-sm); background:#0a0d13;overflow:hidden; } .cb-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:7px 12px 7px 14px; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--panel) 60%,transparent); } .cb-head span{ font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--muted-dim); } .cb pre{ margin:0;padding:14px 16px;overflow-x:auto; font-family:var(--mono);font-size:13px;line-height:1.68; color:#d7e3f4;white-space:pre;tab-size:2; } .cb pre::-webkit-scrollbar{height:8px} .cb pre::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .copy{ position:absolute;top:6px;right:6px;z-index:2; padding:4px 9px;border-radius:6px; border:1px solid var(--line);background:var(--panel); color:var(--muted);font-family:var(--sans);font-size:11.5px;font-weight:560; cursor:pointer;opacity:0;transition:opacity .18s,color .18s,border-color .18s; } .cb:hover .copy,.copy:focus-visible{opacity:1} .copy:hover{color:var(--text-strong);border-color:var(--accent)} .copy.done{color:var(--ok);border-color:var(--ok);opacity:1} .cb-head + pre + .copy,.cb-head ~ .copy{top:37px} /* Token colours — applied by docs.js, tiny and deliberate */ .cb .c{color:#6b7688;font-style:italic} .cb .s{color:#a5e6a0} .cb .k{color:#c084fc} .cb .n{color:#f0b866} .cb .f{color:#74d4ff} .cb .p{color:#8fa0b8} /* ---------------- TABLES ---------------- */ .tw{ margin:20px 0;overflow-x:auto; border:1px solid var(--line);border-radius:var(--r-sm); background:var(--bg2); } .tw::-webkit-scrollbar{height:8px} .tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} .tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px} .tw th,.tw td{ text-align:left;padding:10px 14px; border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.6; } .tw th{ font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700; color:var(--muted-dim);background:color-mix(in srgb,var(--panel) 55%,transparent); white-space:nowrap; } .tw tbody tr:last-child td{border-bottom:0} .tw tbody tr:hover td{background:color-mix(in srgb,var(--panel) 32%,transparent)} .tw td{color:var(--muted)} .tw td code{white-space:nowrap} .tw td:first-child{color:var(--text)} .tw .ctr{text-align:center} .tw .yes{color:var(--good);font-weight:650} .tw .no{color:var(--muted-dim)} /* ---------------- CALLOUTS ---------------- */ .note{ margin:20px 0;padding:14px 16px 14px 44px;position:relative; border-radius:var(--r-sm);border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 55%,transparent); font-size:14.5px;line-height:1.65;color:var(--muted); } .note p{margin:0;max-width:none;font-size:inherit} .note p + p{margin-top:9px} .note b{color:var(--text-strong);font-weight:640} .note::before{ position:absolute;left:15px;top:14px; font-family:var(--mono);font-size:13px;font-weight:700;line-height:1.45; } .note.info{border-left:2px solid var(--accent)} .note.info::before{content:"i";color:var(--accent)} .note.warn{border-left:2px solid var(--warn)} .note.warn::before{content:"!";color:var(--warn)} .note.tip{border-left:2px solid var(--ok)} .note.tip::before{content:"+";color:var(--ok)} .note.stop{border-left:2px solid var(--danger)} .note.stop::before{content:"x";color:var(--danger)} /* ---------------- PILLS ---------------- */ .pill{ display:inline-flex;align-items:center;gap:6px; padding:2.5px 10px;border-radius:999px; font-size:11.5px;font-weight:650;letter-spacing:.03em; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 70%,transparent); color:var(--muted);white-space:nowrap;vertical-align:middle; } .pill.full{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)} .pill.off{border-color:color-mix(in srgb,var(--warn) 42%,transparent);color:var(--warn)} .pill.def{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)} .pill.new{border-color:color-mix(in srgb,var(--accent2) 45%,transparent);color:var(--accent2)} h2 .pill,h3 .pill,h4 .pill{margin-left:9px;position:relative;top:-2px} /* ---------------- COMMAND CARDS ---------------- */ .cmd{ margin:26px 0;padding:20px 22px; border:1px solid var(--line-soft);border-radius:var(--r); background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 42%,transparent),transparent 70%); } .cmd > h3,.cmd > h4{margin-top:0} .cmd .sig{ display:block;font-family:var(--mono);font-size:14.5px; color:var(--text-strong);margin-bottom:2px;letter-spacing:-.01em; } .cmd .sig .op{color:var(--muted-dim)} .cmd > p:first-of-type{margin-top:10px} .cmd .cb:last-child,.cmd .tw:last-child,.cmd .flags:last-child{margin-bottom:0} /* ---------------- FLAG / KEY LISTS ---------------- */ dl.flags{margin:16px 0;display:grid;grid-template-columns:auto 1fr;gap:2px 20px;align-items:baseline} dl.flags dt{ font-family:var(--mono);font-size:13px;color:#bfe6ff; white-space:nowrap;padding:5px 0; } dl.flags dd{margin:0;padding:5px 0;color:var(--muted);font-size:14.5px;line-height:1.6} dl.flags dd .d{color:var(--muted-dim);font-size:13px} @media (max-width:640px){ dl.flags{grid-template-columns:1fr;gap:0} dl.flags dt{padding-bottom:0} dl.flags dd{padding-top:2px;padding-bottom:12px} } /* Config key blocks */ .key{ margin:22px 0;padding:16px 18px; border:1px solid var(--line-soft);border-radius:var(--r-sm); background:color-mix(in srgb,var(--panel) 34%,transparent); } .key > .kh{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin-bottom:4px} .key > .kh code{ font-family:var(--mono);font-size:14px;color:var(--text-strong); background:none;border:0;padding:0;white-space:normal; } .key > .kh .ty{font-family:var(--mono);font-size:12px;color:var(--accent2)} .key > .kh .dv{font-family:var(--mono);font-size:12px;color:var(--muted-dim)} .key > .kh .dv b{color:var(--ok);font-weight:600} .key p{margin:8px 0 0;font-size:14.5px} .key .cb,.key .tw{margin-bottom:0} /* ---------------- MODE GRID ---------------- */ .modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:22px 0} .mode{ padding:16px 18px;border:1px solid var(--line-soft);border-radius:var(--r-sm); background:var(--bg2); } .mode h4{margin:0 0 6px;font-family:var(--mono);font-size:14px;color:var(--accent)} .mode p{margin:0;font-size:14px;line-height:1.6} .mode.is-default{border-color:color-mix(in srgb,var(--ok) 34%,transparent)} /* ---------------- FOOTER ---------------- */ .docs-foot{ border-top:1px solid var(--line-soft); padding:30px 28px 46px; } .docs-foot .wrap{ display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; font-size:14px;color:var(--muted-dim); } .docs-foot a{color:var(--muted);text-decoration:none} .docs-foot a:hover{color:var(--accent)} .docs-foot nav{display:flex;gap:20px;flex-wrap:wrap} /* ---------------- TOP LINK ---------------- */ .to-top{ position:fixed;right:22px;bottom:22px;z-index:60; width:40px;height:40px;border-radius:11px; display:grid;place-items:center; border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(8px); color:var(--muted);text-decoration:none;font-size:15px; opacity:0;pointer-events:none;transition:opacity .25s,color .2s,border-color .2s; } .to-top.on{opacity:1;pointer-events:auto} .to-top:hover{color:var(--accent);border-color:var(--accent)} @media (prefers-reduced-motion:reduce){.to-top{transition:none}} /* Inline code inside a pill inherits the pill's colour rather than fighting it. */ .pill code{background:none;border:0;padding:0;color:inherit;font-family:var(--mono);font-size:.92em;white-space:nowrap} kbd{ font-family:var(--mono);font-size:.82em; padding:1.5px 6px;border-radius:5px; border:1px solid var(--line);border-bottom-width:2px; background:var(--panel2);color:var(--text);white-space:nowrap; }