/* Orbit 3D manual and showcase. Extends styles.css: same palette and
   bordered 90s chrome. Long reading text is set in Geist (the sans
   companion to Geist Mono); navigation, headings and interface labels
   stay in Geist Mono, the way the app sets them. */

/* ── Layout ──────────────────────────────────────── */
.docs-shell{
  flex:1;width:100%;max-width:1240px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;
}
.docs-side{
  position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;
  padding:32px 4px 40px 0;font-size:12px;
  scrollbar-width:thin;scrollbar-color:#23282c transparent;
}
.docs-side-mobile{display:none}
.docs-side ul,.docs-side-inner ul{list-style:none;margin:0 0 6px;padding:0}
.docs-side li a,.side-home{
  display:block;padding:5px 10px;color:#A8AEB2;border-left:2px solid transparent;line-height:1.45;
}
.docs-side li a:hover,.side-home:hover{color:#7FD8B6;background:#131619}
.docs-side li a.current,.side-home.current{color:#7FD8B6;border-left-color:#6ACBA8;background:#131619}
.side-home{margin:14px 0 4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.side-section{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6ACBA8;
  margin:22px 0 6px;padding:0 10px;
}
.side-group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#80868A;margin:12px 0 2px;padding:0 10px}

/* ── Search ──────────────────────────────────────── */
.docs-search{position:relative}
.docs-search input{
  width:100%;background:#0B0D0F;color:#C8CCD0;border:1px solid #000;box-shadow:inset 0 1px 0 #1c2125;
  font:inherit;font-size:12px;padding:9px 10px;outline:none;
}
.docs-search input:focus{border-color:#6ACBA8}
.docs-search input::placeholder{color:#5d6367}
.docs-results{
  position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;
  background:#131619;border:1px solid #000;box-shadow:inset 0 1px 0 #23282c,0 14px 40px rgba(0,0,0,.6);
  max-height:60vh;overflow-y:auto;
}
.docs-results a{display:block;padding:9px 12px;border-bottom:1px solid #1c2125;color:#C8CCD0}
.docs-results a:hover,.docs-results a.sel{background:#1F3A30;color:#7FD8B6}
.docs-results .r-sec{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#80868A;margin-bottom:2px}
.docs-results .r-snip{display:block;font-family:Geist,system-ui,sans-serif;font-size:12px;color:#80868A;margin-top:3px;line-height:1.45}
.docs-results .empty{padding:10px 12px;color:#80868A}

/* ── Article ─────────────────────────────────────── */
.docs-main{min-width:0;padding:40px 0 0}
.doc{max-width:74ch;font-family:Geist,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.7;color:#B9BFC3}
.doc-kicker{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#6ACBA8}
.doc h1{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.02em;line-height:1.2;color:#E0E4E7;margin:12px 0 26px;font-weight:700;
}
.doc h2{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:#C8CCD0;margin:46px 0 14px;padding-top:18px;border-top:1px solid #1c2125;position:relative;
}
.doc h3{font-size:17px;font-weight:600;color:#D4D8DB;margin:32px 0 10px;position:relative}
.doc h4{font-size:15px;font-weight:600;color:#C8CCD0;margin:24px 0 8px}
.doc .anchor{position:absolute;left:-1.1em;color:#2f3a36;opacity:0;font-weight:400}
.doc h2 .anchor{top:18px}
.doc h2:hover .anchor,.doc h3:hover .anchor{opacity:1}
.doc p{margin:0 0 18px}
.doc a{color:#6ACBA8;text-decoration:underline;text-decoration-color:#2A4A3A;text-underline-offset:3px}
.doc a:hover{color:#7FD8B6;text-decoration-color:#6ACBA8}
.doc em{color:#C8CCD0}

/* Interface labels: bold in the source, set like the app's own labels. */
.doc strong{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.86em;font-weight:500;letter-spacing:.03em;
  color:#E4E7EA;white-space:nowrap;
}
.doc code{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.86em;color:#7FD8B6;
  background:#131619;border:1px solid #000;box-shadow:inset 0 1px 0 #23282c;padding:1px 6px;white-space:nowrap;
}
.doc pre{background:#0B0D0F;border:1px solid #000;box-shadow:inset 0 1px 0 #1c2125;padding:14px 16px;overflow-x:auto}
.doc pre code{background:none;border:0;box-shadow:none;padding:0;white-space:pre;color:#A8AEB2}

/* Numbered procedures: square step markers in the app's accent. */
.doc ol.steps{list-style:none;counter-reset:step;margin:0 0 22px;padding:0}
.doc ol.steps>li{counter-increment:step;position:relative;padding:0 0 12px 44px;min-height:28px}
.doc ol.steps>li::before{
  content:counter(step);position:absolute;left:0;top:1px;width:28px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;font-weight:700;color:#7FD8B6;
  background:linear-gradient(180deg,#2A4A3A,#16281F);border:1px solid #000;box-shadow:inset 0 1px 0 #6ACBA8;
}
.doc ol.steps>li>p{margin:0 0 8px}
.doc ol.steps>li>p.step-result{color:#8E959A;font-size:15px}
.doc ol.steps>li figure{margin:12px 0 6px}
.doc ul{margin:0 0 18px;padding-left:22px}

/* Tables */
.table-wrap{overflow-x:auto;margin:6px 0 24px;border:1px solid #000;box-shadow:inset 0 1px 0 #23282c;background:#111417}
.doc table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.55}
.doc th{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#80868A;font-weight:500;text-align:left;padding:10px 14px;background:#131619;border-bottom:1px solid #000;
}
.doc td{padding:10px 14px;border-top:1px solid #1c2125;vertical-align:top}
.doc td strong{white-space:normal}

/* Figures */
.doc figure{margin:8px 0 26px;border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c,0 16px 44px rgba(0,0,0,.45);padding:6px}
.doc figure img{width:100%;height:auto}
.doc figcaption{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#80868A;padding:9px 4px 3px;line-height:1.6}

/* On this page */
.doc-toc{border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c;padding:12px 16px;margin:0 0 30px;font-size:13px}
.doc-toc-label{font-family:'Geist Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#80868A;margin-bottom:6px}
.doc-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.doc-toc li{padding:2px 0;break-inside:avoid}
.doc-toc a{text-decoration:none;color:#A8AEB2}
.doc-toc a:hover{color:#7FD8B6}

/* Previous and next */
.doc-pager{max-width:74ch;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 0}
.doc-pager a{
  display:block;border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c;
  padding:14px 16px;color:#C8CCD0;font-size:13px;
}
.doc-pager a:hover{border-color:#6ACBA8;color:#7FD8B6}
.doc-pager a span{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#80868A;margin-bottom:4px}
.doc-pager .next{text-align:right}

/* Manual home overview */
.doc-overview h2{margin-top:40px}
.doc-overview h3{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#80868A;font-weight:500;margin:18px 0 10px}
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:10px}
.doc a.overview-card{
  display:block;text-decoration:none;border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c;padding:14px 16px;
}
.doc a.overview-card:hover{border-color:#6ACBA8}
.oc-title{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:#7FD8B6;margin-bottom:6px;line-height:1.4}
.oc-desc{display:block;font-size:13px;line-height:1.55;color:#80868A}

/* ── Showcase ────────────────────────────────────── */
/* Masonry columns: every piece keeps its own shape; nothing is cropped. */
.sc-grid{columns:3 340px;column-gap:16px;margin-top:34px}
.sc-grid.js-masonry{columns:auto;display:flex;gap:16px;align-items:flex-start}
.sc-col{flex:1;min-width:0}
.sc-card{
  margin:0 0 16px;break-inside:avoid;display:block;
  border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c;padding:6px;
}
.sc-media{background:#0E1012}
.sc-media img,.sc-media video{width:100%;height:auto;display:block}
.sc-media a:hover img{opacity:.92}
.sc-card figcaption{padding:10px 6px 4px;font-size:12px}
.sc-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C8CCD0}
.sc-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#80868A}
.sc-meta:empty{display:none}
.sc-look{color:#6ACBA8}
.sc-card p{font-family:Geist,system-ui,sans-serif;font-size:13px;line-height:1.6;color:#A8AEB2;margin:8px 0 0}
.sc-links{display:flex;gap:16px;margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* ── Narrow screens ──────────────────────────────── */
@media (max-width:900px){
  .docs-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px}
  .docs-side{display:none}
  .docs-side-mobile{display:block;margin:18px 0 0;border:1px solid #000;background:#131619;box-shadow:inset 0 1px 0 #23282c}
  .docs-side-mobile summary{
    cursor:pointer;padding:12px 14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6ACBA8;list-style:none;
  }
  .docs-side-mobile summary::-webkit-details-marker{display:none}
  .docs-side-mobile summary::after{content:"+";float:right;color:#80868A}
  .docs-side-mobile[open] summary::after{content:"\2212"}
  .docs-side-inner{padding:0 10px 14px;font-size:12px}
  .docs-main{padding-top:24px}
  .doc{font-size:15.5px}
  .doc .anchor{display:none}
  .doc-toc ul{columns:1}
  .doc-pager{grid-template-columns:1fr}
  .doc-pager .next{text-align:left}
  .sc-grid{columns:1}
  .doc strong{white-space:normal}
}