/* Documentation (lokstack.app/docs): sidebar, article, "On this page". Loaded only on docs pages. */
.docs { --d-side: 240px; --d-toc: 190px; display: grid; grid-template-columns: var(--d-side) minmax(0, 1fr) var(--d-toc); gap: 44px; width: min(100% - 48px, 1560px); margin: 0 auto; padding: calc(var(--w-header, 72px) + 32px) 0 96px; color: var(--os-text-2); }
.docs-side { position: sticky; top: calc(var(--w-header, 72px) + 20px); align-self: start; max-height: calc(100vh - var(--w-header, 72px) - 40px); overflow: auto; scrollbar-width: thin; padding-right: 6px; }
.docs-menu { display: none; }

/* sidebar */
.docs-search { position: relative; margin-bottom: 14px; }
.docs-search input { width: 100%; height: 40px; padding: 0 38px 0 14px; border: 0; border-radius: 12px; background: #ffffff0f; outline: 1px solid #ffffff1f; color: #fff; font: inherit; font-size: .95rem; }
.docs-search input::placeholder { color: var(--os-text-3); } .docs-search input:focus { outline: 2px solid #5fd39a; background: #ffffff14; }
.docs-search kbd { position: absolute; right: 10px; top: 50%; translate: 0 -50%; padding: 1px 7px; border-radius: 6px; background: #ffffff14; color: var(--os-text-3); font: 12px ui-monospace, Menlo, monospace; pointer-events: none; }
.docs-results { display: grid; gap: 4px; margin-bottom: 14px; } .docs-results[hidden] { display: none; }
.docs-results a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; color: var(--os-text-2); text-decoration: none; font-size: .9rem; line-height: 1.4; } .docs-results a:hover, .docs-results a.on { background: #ffffff12; color: #fff; }
.docs-results b { color: #fff; font-weight: 600; } .docs-results small { color: var(--os-text-3); } .docs-results mark { background: #5fd39a33; color: #bff3d9; border-radius: 3px; }
.docs-results .none { padding: 10px 12px; color: var(--os-text-3); font-size: .9rem; }
.docs-groups.is-hidden { display: none; }
.docs-grp { margin-top: 22px; } .docs-grp h4 { margin: 0 0 6px 12px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--os-text-3); }
.docs-nav a { display: block; padding: 7px 12px; border-radius: 9px; color: var(--os-text-2); text-decoration: none; font-size: .95rem; line-height: 1.35; transition: background-color .2s, color .2s; }
.docs-nav .docs-groups a:hover { background: #ffffff0d; color: #fff; }
.docs-nav .docs-groups a.on { background: #5fd39a1f; color: #9ee8c3; font-weight: 600; box-shadow: inset 2px 0 0 #5fd39a; border-radius: 0 9px 9px 0; }
.docs-top { font-weight: 600; }

/* article */
.docs-body { min-width: 0; max-width: none; } .docs-body > * { max-width: 780px; } .docs-body > .docs-shot, .docs-body > .docs-cards, .docs-body > .docs-table { max-width: none; } .docs-shot { cursor: zoom-in; }
.docs-crumb { margin: 0 0 14px; font-size: .88rem; color: var(--os-text-3); } .docs-crumb a { color: var(--os-text-2); text-decoration: none; } .docs-crumb a:hover { color: #fff; }
.docs-body h1 { margin: 0 0 18px; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; color: #fff; text-wrap: balance; }
.docs-body h2 { position: relative; margin: 2.6rem 0 .8rem; padding-top: .4rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: #fff; scroll-margin-top: calc(var(--w-header, 72px) + 24px); }
.docs-body h3 { margin: 1.8rem 0 .5rem; font-size: 1.15rem; color: #fff; }
.docs-anchor { position: absolute; left: -1.1em; top: .4rem; color: #5fd39a; text-decoration: none; opacity: 0; font-weight: 400; transition: opacity .2s; } .docs-body h2:hover .docs-anchor, .docs-anchor:focus-visible { opacity: .8; }
.docs-body p, .docs-body li { font-size: 1.04rem; line-height: 1.72; } .docs-body p { margin: 0 0 1rem; }
.docs-body strong { color: #fff; font-weight: 600; } .docs-body a { color: #7fe0b2; text-underline-offset: 3px; } .docs-body a:hover { color: #fff; }
.docs-body ul, .docs-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; display: grid; gap: .45rem; } .docs-body li > ul, .docs-body li > ol { margin: .45rem 0 0; }
.docs-body li::marker { color: #5fd39a; }
.docs-body code { padding: .12em .42em; border-radius: 6px; background: #ffffff14; color: #e8f6ee; font: .88em ui-monospace, "SF Mono", Menlo, monospace; }
.docs-lead { margin-bottom: 1.4rem; } .docs-lead p:first-child { font-size: 1.18rem; line-height: 1.6; color: #d6d6d6; }
.docs-table { margin: 0 0 1.4rem; overflow-x: auto; border-radius: 14px; outline: 1px solid #ffffff1a; background: #ffffff06; }
.docs-table table { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.55; } .docs-table th, .docs-table td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #ffffff12; }
.docs-table th { color: #fff; font-weight: 600; background: #ffffff0a; white-space: nowrap; } .docs-table tr:last-child td { border-bottom: 0; } .docs-table td:first-child { color: #fff; min-width: 9rem; }
.docs-shot { margin: 0 0 1.8rem; border-radius: 16px; overflow: hidden; outline: 1px solid #ffffff1f; box-shadow: 0 30px 70px -30px #000c; background: #0b0b0b; } .docs-shot img { display: block; width: 100%; height: auto; }
.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 1.6rem; }
.docs-card { padding: 20px 22px; border-radius: 18px; background: #1f1f1f70; outline: 1px solid #ffffff1a; } .docs-card h3 { margin: 0 0 10px; font-size: 1rem; color: #fff; }
.docs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .docs-card a { color: var(--os-text-2); text-decoration: none; font-size: .96rem; } .docs-card a:hover { color: #9ee8c3; }
.docs-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 3rem 0 1.4rem; padding-top: 1.6rem; border-top: 1px solid #ffffff14; }
.docs-pn a { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; outline: 1px solid #ffffff1a; background: #ffffff06; text-decoration: none; transition: outline-color .2s, background-color .2s; } .docs-pn a:hover { outline-color: #5fd39a99; background: #5fd39a12; }
.docs-pn small { color: var(--os-text-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .docs-pn span { color: #fff; font-weight: 600; } .docs-pn .next { text-align: right; }
.docs-help { margin: 0; font-size: .95rem; color: var(--os-text-3); }

/* on this page */
.docs-toc { position: sticky; top: calc(var(--w-header, 72px) + 24px); align-self: start; display: grid; gap: 2px; font-size: .88rem; }
.docs-toc h4 { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--os-text-3); }
.docs-toc a { padding: 5px 0 5px 14px; border-left: 1px solid #ffffff1f; color: var(--os-text-3); text-decoration: none; line-height: 1.35; transition: color .2s, border-color .2s; } .docs-toc a:hover { color: #fff; } .docs-toc a.on { color: #9ee8c3; border-left-color: #5fd39a; }

/* tablet and phone: the sidebar becomes a menu, "On this page" disappears */
@media (max-width: 1180px) { .docs { grid-template-columns: var(--d-side) minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: calc(var(--w-header, 72px) + 16px); }
  .docs-menu { display: inline-flex; align-items: center; gap: 10px; justify-self: start; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: #ffffff12; outline: 1px solid #ffffff22; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .docs-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .docs-side { display: none; position: static; max-height: none; padding: 14px; border-radius: 16px; background: #141414; outline: 1px solid #ffffff1a; } .docs.open .docs-side { display: block; }
  .docs-body h2 .docs-anchor { display: none; } .docs-pn { grid-template-columns: 1fr; } .docs-pn .next { text-align: left; }
  .docs-nav a { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) { .docs-nav a, .docs-toc a, .docs-pn a { transition: none; } }
/* Tables on a phone: each row becomes a small card (first cell as its title) instead of scrolling sideways */
@media (max-width: 640px) {
  .docs-table { overflow: visible; background: none; outline: 0; }
  .docs-table table, .docs-table tbody, .docs-table tr, .docs-table td { display: block; width: 100%; }
  .docs-table thead { display: none; }
  .docs-table tr { margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; background: #ffffff08; outline: 1px solid #ffffff1a; }
  .docs-table td { padding: 0; border: 0; } .docs-table td:first-child { min-width: 0; margin-bottom: 4px; font-weight: 600; }
  .docs { padding-top: calc(var(--w-header, 72px) + 4px); }
}
@media (max-width: 860px) { .docs-search kbd { display: none; } }