/* Engelsystem Client site: small additions to Bootstrap 5.3. */
.brand-icon { width: 1.6rem; height: 1.6rem; border-radius: .4rem; margin-right: .5rem; vertical-align: -.35rem; }

/* Screenshots get a clearly visible frame in both modes: a white app screen on a white page (or the black Watch screen on a
   dark page) would otherwise have no edge. Light mode uses a mid-gray 2px border and a stronger shadow. */
main img {
  max-width: 100%;
  height: auto;
  border: 2px solid var(--bs-gray-500);
  border-radius: 1rem;
  box-shadow: 0 .4rem 1.25rem rgba(0, 0, 0, .28);
}
[data-bs-theme="dark"] main img { border-color: var(--bs-gray-600); box-shadow: 0 .4rem 1.25rem rgba(0, 0, 0, .6); }

/* The landing page's screenshot strip sits on a tinted panel so the white screens stand out from the page. */
.shots { background: var(--bs-secondary-bg); border-radius: 1.5rem; padding: 1.75rem .75rem .75rem; }

.shots img { max-height: 420px; width: auto; margin: 0 .25rem 1rem; }
.shots img.watch { max-height: 300px; }

/* Markdown pages: comfortable reading column and tables. */
main h1 { margin-bottom: 1.25rem; }
main h2 { margin-top: 2rem; }
main h3 { margin-top: 1.5rem; }
main table { width: 100%; margin-bottom: 1rem; }
main table th, main table td { padding: .4rem .6rem; border-bottom: 1px solid var(--bs-border-color); }
main blockquote {
  padding: .75rem 1rem;
  border-left: .25rem solid var(--bs-primary);
  background: var(--bs-tertiary-bg);
  border-radius: .25rem;
}
main pre, main code { font-size: .9em; }

/* Contents list (pages with `toc: true`): sticky in the side column on large screens, a folded block on small ones. */
.toc-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .9rem; padding-right: .5rem; }
.toc-side ul, .toc-mobile ul { list-style: none; padding-left: 0; margin: 0; }
.toc-side ul ul, .toc-mobile ul ul { padding-left: .9rem; margin-bottom: .35rem; }
.toc-side li, .toc-mobile li { margin: .2rem 0; }
.toc-side a, .toc-mobile a { text-decoration: none; }
.toc-side a:hover, .toc-mobile a:hover { text-decoration: underline; }
.toc-mobile { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .6rem .9rem; }
.toc-mobile summary { cursor: pointer; font-weight: 600; }
.toc-mobile nav { margin-top: .5rem; }

/* A "#" link at each heading (shown on hover or focus, always faintly on touch screens); headings keep a little room when jumped to. */
main h2, main h3, main h4 { scroll-margin-top: 1rem; }
.anchor-link { margin-left: .4rem; text-decoration: none; opacity: 0; font-weight: 400; }
main h2:hover .anchor-link, main h3:hover .anchor-link, main h4:hover .anchor-link, .anchor-link:focus { opacity: .6; }
@media (hover: none) { .anchor-link { opacity: .35; } }

.to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; }