/* Robo Use docs. Generated by robouse/scripts/build_docs.py; edit the script, not this file.
   Tokens: /tokens.css. Headings, body text, links, code blocks and the copy button, tables, lists, quotes, captions and the
   title block: /prose.css. Focus ring and controls: /ui.css. Header and footer: /chrome.css. Page surface: /surface.css.
   This file is the docs layout only: sidebar, page, on-this-page, pager, figures. */
html { scroll-padding-top: var(--sp-20); }

/* layout: sidebar, page, on-this-page, on the site's 1120px grid */
.shell { display: grid; grid-template-columns: 210px minmax(0, 1fr) 190px; gap: 0 var(--sp-48); max-width: var(--wide); margin: 0 auto;
  padding: var(--sp-72) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
.shell.no-toc { grid-template-columns: 210px minmax(0, 1fr); }
/* the side columns stick; a small inset keeps the focus ring inside their scroll box */
.side, .toc { position: sticky; top: var(--sp-24); align-self: start; max-height: calc(100vh - var(--sp-48)); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--sp-8)); padding: var(--sp-2) var(--sp-8); font: 400 var(--fs-small)/1.45 var(--sans); }
.grp { margin: var(--sp-28) 0 var(--sp-6); font: 600 var(--fs-small)/1.4 var(--sans); color: var(--ink); }
.side .grp:first-child, .toc .grp { margin-top: var(--sp-4); }
.side ul, .toc ul { list-style: none; margin: 0; padding: 0; }
.side li, .toc li { margin: 0; }
.side a, .toc a, .pager a, .hash { text-decoration: none; }
.side li a { display: block; margin: 0 calc(-1 * var(--sp-8)); padding: var(--sp-4) var(--sp-8); color: var(--muted); border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); }
.side li a:hover { background: var(--hover); }
.side li a:focus-visible { outline-offset: -2px; }
.side li a:hover { color: var(--ink); }
.side li a:active { color: var(--ink2); }
.side li a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.toc li a { display: block; padding: var(--sp-4) 0 var(--sp-4) var(--sp-12); border-left: var(--hairline); color: var(--muted); line-height: 1.4;
  border-radius: 0; transition: color var(--t-fast), border-color var(--t-fast); }
.toc li a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.toc li a.on { color: var(--ink); border-left-color: var(--ink); }
.toc li a:focus-visible { outline-offset: -2px; }
input.navtoggle, .navbtn { display: none; }
.doc { min-width: 0; max-width: var(--measure); padding-bottom: var(--sp-24); }

/* headings get a hover anchor */
.hash { margin-left: var(--sp-8); padding: 0 var(--sp-4); color: var(--faint); opacity: 0; font: 400 var(--fs-body)/1 var(--sans); vertical-align: .1em;
  border-radius: var(--r-xs); transition: opacity var(--t-fast), color var(--t-fast); }
h2:hover .hash, h3:hover .hash, .hash:focus-visible { opacity: 1; }
.hash:hover { color: var(--accent); }
article img { display: block; max-width: 100%; height: auto; margin: var(--sp-8) 0; border-radius: var(--r-sm); border: var(--hairline); }

/* figures: inline SVG diagrams take the page's colours and type; stills are small webp images */
.figure { margin: var(--sp-24) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.figure > svg { display: block; width: 100%; min-width: 500px; height: auto; overflow: visible; }  /* small screens scroll rather than shrink the type */
.figure img { margin: 0; }
.fig { color: var(--ink); }
.fig text { font-family: var(--sans); font-size: var(--fs-meta); fill: var(--ink2); }
.fig .t { font-family: var(--serif); font-size: var(--fs-h3); fill: var(--ink); }
.fig .s { fill: var(--ink2); }
.fig .k { font-size: var(--fs-caption); fill: var(--muted); }
.fig .c { font-size: var(--fs-caption); fill: var(--muted); text-anchor: middle; }
.fig .end { text-anchor: end; }
.fig .m, .fig tspan.m { font-family: var(--mono); font-size: var(--fs-caption); fill: var(--ink); white-space: pre; }
.fig .m.o { fill: var(--muted); font-size: var(--fs-micro); }
.fig .m.b { font-weight: 500; }
.fig .box { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; }
.fig .box.trusted { stroke: var(--ink); }
.fig .box2 { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.fig .ln { stroke: var(--ink2); stroke-width: 1.3; fill: none; }
.fig .ln.thin { stroke: var(--muted); stroke-width: 1; }
.fig .ln.dash { stroke-dasharray: 4 4; stroke: var(--muted); }
.fig .fill { fill: var(--ink2); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-16) var(--sp-12); margin: var(--sp-20) 0 var(--sp-24); }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin: 0; border-radius: var(--r-sm); border: var(--hairline); }
.gallery figcaption { margin-top: var(--sp-6); font-size: var(--fs-meta); line-height: 1.35; }

/* pager: previous and next, each a generous target */
.pager { display: flex; justify-content: space-between; gap: var(--sp-16); margin-top: var(--sp-56); padding-top: var(--sp-12); border-top: var(--hairline); }
.pager a { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; padding: var(--sp-8) 0; color: var(--ink); font: 400 var(--fs-body)/1.3 var(--sans);
  border-radius: var(--r-xs); transition: color var(--t-fast); }
.pager a:hover { color: var(--accent); }
.pager a:active { color: var(--ink2); }
.pager a span { font: 400 var(--fs-small)/1 var(--sans); color: var(--muted); }
.pager .next { margin-left: auto; text-align: right; }

@media (max-width: 1080px) { .shell { grid-template-columns: 200px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 760px) {
  .shell, .shell.no-toc { display: block; padding-top: var(--sp-24); }
  /* the menu: a visually hidden checkbox (keyboard focusable, no script needed) and its label as the button */
  input.navtoggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .navbtn { display: flex; align-items: center; gap: var(--sp-10); min-height: var(--touch); margin-bottom: var(--sp-24); border-bottom: var(--hairline);
    font: 400 var(--fs-small)/1.2 var(--sans); color: var(--muted); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--t-fast); }
  .navbtn:hover { color: var(--ink); }
  .navbtn .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
  .navbtn::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px var(--sp-2) 0 auto; border: solid var(--muted); border-width: 0 1.4px 1.4px 0;
    transform: rotate(45deg); transition: transform var(--t) var(--ease); }
  .navtoggle:checked + .navbtn::after { transform: translateY(3px) rotate(-135deg); }
  .navtoggle:focus-visible + .navbtn { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
  .side { display: none; position: static; max-height: none; margin: calc(-1 * var(--sp-16)) 0 var(--sp-24); padding: 0 0 var(--sp-12); border-bottom: var(--hairline); overflow: visible; }
  .side .grp { margin-top: var(--sp-16); }
  .side li a { display: flex; align-items: center; min-height: var(--touch); padding-top: 0; padding-bottom: 0; }
  .navtoggle:checked ~ .side { display: block; }
  .pager a { min-height: var(--touch); justify-content: center; }
}
/* touch screens: the copy button sits under its code block as a full-size target instead of over the first line */
@media (hover: none) {
  .code { display: flex; flex-direction: column; }
  .code > .copy { position: static; align-self: flex-end; opacity: 1; min-height: var(--touch); margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-10)) calc(-1 * var(--sp-16)); padding: 0 var(--sp-10);
    border: 0; background: none; font-size: var(--fs-caption); color: var(--muted); }
}
.copy.done { color: var(--ok); }
@media print { .side, .toc, .navbtn, .pager, .copy { display: none !important; } .shell { display: block; } }