/* Screens are 1-bit 128x64 captures upscaled 4x: keep them crisp, framed like
 * the OLED, and no wider than they read well. */
img[src*="assets/screens/"] {
  image-rendering: pixelated;
  width: 384px;
  max-width: 100%;
  border: 6px solid #000;
  border-radius: 4px;
  background: #000;
}
img[src*="assets/screens/"].small { width: 256px; }
img[src*="assets/diagrams/"] { max-width: 100%; height: auto; border-radius: 10px; }
img[src*="assets/diagrams/panel"], img[src*="assets/diagrams/gesture"] { width: 100%; }
.screens { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; }
.screens figure { margin: 0; }
figcaption { font-size: 0.8rem; opacity: 0.8; }
.md-typeset kbd { font-size: 0.8em; }
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* "Works like Move": sections that behave as on Move's own firmware, collapsed
 * so a Move owner can skip them and a newcomer can open them. */
:root { --movy-move: #e8c600; }
.md-typeset .admonition.move, .md-typeset details.move { border-color: var(--movy-move); }
.md-typeset .move > .admonition-title, .md-typeset .move > summary { background-color: rgba(232, 198, 0, 0.12); }
.md-typeset .move > .admonition-title::before, .md-typeset .move > summary::before {
  background-color: var(--movy-move);
  -webkit-mask-image: var(--md-admonition-icon--move); mask-image: var(--md-admonition-icon--move);
}
:root { --md-admonition-icon--move: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm10 0h8v8h-8z"/></svg>'); }

/* Install page command builder. */
.install-builder fieldset { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; margin: 0 0 0.8rem; padding: 0.4rem 0.9rem 0.7rem; }
.install-builder legend { font-weight: 700; padding: 0 0.3rem; }
.install-builder label { display: block; margin: 0.25rem 0; cursor: pointer; }
.install-builder input[type="text"] { margin-left: 0.4rem; padding: 0.1rem 0.3rem; border: 1px solid var(--md-default-fg-color--lighter); border-radius: 4px; background: transparent; color: inherit; font: inherit; }
.ib-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.4rem 1.2rem; }
.ib-out { display: flex; gap: 0.6rem; align-items: flex-start; }
.ib-out pre { flex: 1; margin: 0; white-space: pre-wrap; word-break: break-all; }
.ib-out .md-button { margin: 0; }
.install-builder .ib-desc { display: block; margin-left: 1.6rem; font-size: 0.75rem; opacity: 0.7; line-height: 1.3; }
.install-builder .ib-picks .md-button, .install-builder .ib-picks button { padding: 0.15rem 0.6rem; font-size: 0.7rem; margin: 0 0.2rem; }
.install-builder .ib-note { font-size: 0.75rem; opacity: 0.75; margin: 0.5rem 0 0; }
.install-builder .ib-cols label { margin: 0.35rem 0; }

/* The manual's generated table of contents: chapters in columns. */
.manual-contents > ol { columns: 2 20rem; column-gap: 2.5rem; margin-top: 0; }
.manual-contents > ol > li { break-inside: avoid; margin-bottom: 0.8rem; }
.manual-contents ul { margin-top: 0.2rem !important; }
.manual-contents ul li { margin-bottom: 0 !important; }