/* codehover — all rules scoped under .codehover */

.codehover {
  /* Theming hooks: override in your own CSS, e.g.
     .codehover { --codehover-highlight: #cde7ff; }                        */
  --codehover-highlight: #F1D95A;
  --codehover-highlight-fg: inherit;
  --codehover-font: "Lucida Console", Consolas, Monaco, monospace;
  --codehover-font-size: 0.9em;
  --codehover-gap: 1rem;
  --codehover-row-padding: 3px 10px;
  --codehover-tab: 2em;
  --codehover-focus: #0b62d1;
  /* set per table by ch_out(); reserves the image box before it loads */
  --codehover-aspect: auto;

  display: flex;
  flex-wrap: wrap;
  gap: var(--codehover-gap);
  align-items: flex-start;
  margin: 1rem 0;
}

/* The highlight stays yellow in a dark page; only the text on top of it
   is darkened so it keeps contrast. */
@media (prefers-color-scheme: dark) {
  .codehover {
    --codehover-highlight-fg: #1a1a1a;
  }
}

:root[data-bs-theme="dark"] .codehover {
  --codehover-highlight-fg: #1a1a1a;
}

.codehover .codehover-code {
  flex: 0 1 auto;
  min-width: 0;
}

.codehover .codehover-img {
  flex: 1 1 300px;
  min-width: 0;
}

.codehover .codehover-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--codehover-aspect);
}

/* layout = "row": force side by side, image shrinks if needed */
.codehover.codehover-layout-row {
  flex-wrap: nowrap;
}

.codehover.codehover-layout-row .codehover-img {
  flex: 1 1 auto;
  min-width: 0;
}

/* layout = "column": force image below the code */
.codehover.codehover-layout-column {
  flex-direction: column;
}

.codehover.codehover-layout-column .codehover-img {
  flex: 0 0 auto;
}

.codehover table {
  cursor: pointer;
  border: none;
  border-collapse: collapse;
  font-family: var(--codehover-font);
  font-size: var(--codehover-font-size);
}

.codehover td {
  padding: var(--codehover-row-padding);
  border: none;
  /* Bootstrap's `.table` (pandoc and pkgdown add that class) paints every
     cell with --bs-table-bg plus an inset box-shadow, which would cover
     the row highlight. Let the row show through. */
  background-color: transparent;
  box-shadow: none;
}

.codehover tr.hover,
.codehover tr.hover > td {
  background-color: var(--codehover-highlight);
  color: var(--codehover-highlight-fg);
  box-shadow: none;
}

.codehover tr[data-link]:focus-visible {
  outline: 2px solid var(--codehover-focus);
  outline-offset: -2px;
}

.codehover .codehover-caption {
  margin-top: 0.4em;
  font-size: 0.85em;
  opacity: 0.8;
}

/* Off-screen box that forces the browser to fetch the step images up
   front (only used when the images are files/URLs, not base64). */
.codehover .codehover-preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Indentation. `<span class="ch-tabN">` is what ch_hover() emits;
   the bare `<tabN>` elements are kept for hand-written tables from
   earlier versions. */
.codehover .ch-tab1,  .codehover tab1  { padding-left: calc(1  * var(--codehover-tab)); }
.codehover .ch-tab2,  .codehover tab2  { padding-left: calc(2  * var(--codehover-tab)); }
.codehover .ch-tab3,  .codehover tab3  { padding-left: calc(3  * var(--codehover-tab)); }
.codehover .ch-tab4,  .codehover tab4  { padding-left: calc(4  * var(--codehover-tab)); }
.codehover .ch-tab5,  .codehover tab5  { padding-left: calc(5  * var(--codehover-tab)); }
.codehover .ch-tab6,  .codehover tab6  { padding-left: calc(6  * var(--codehover-tab)); }
.codehover .ch-tab7,  .codehover tab7  { padding-left: calc(7  * var(--codehover-tab)); }
.codehover .ch-tab8,  .codehover tab8  { padding-left: calc(8  * var(--codehover-tab)); }
.codehover .ch-tab9,  .codehover tab9  { padding-left: calc(9  * var(--codehover-tab)); }
.codehover .ch-tab10, .codehover tab10 { padding-left: calc(10 * var(--codehover-tab)); }
.codehover .ch-tab11, .codehover tab11 { padding-left: calc(11 * var(--codehover-tab)); }
.codehover .ch-tab12, .codehover tab12 { padding-left: calc(12 * var(--codehover-tab)); }
.codehover .ch-tab13, .codehover tab13 { padding-left: calc(13 * var(--codehover-tab)); }
.codehover .ch-tab14, .codehover tab14 { padding-left: calc(14 * var(--codehover-tab)); }
.codehover .ch-tab15, .codehover tab15 { padding-left: calc(15 * var(--codehover-tab)); }
.codehover .ch-tab16, .codehover tab16 { padding-left: calc(16 * var(--codehover-tab)); }

.codehover .ch-tab1,  .codehover .ch-tab2,  .codehover .ch-tab3,
.codehover .ch-tab4,  .codehover .ch-tab5,  .codehover .ch-tab6,
.codehover .ch-tab7,  .codehover .ch-tab8,  .codehover .ch-tab9,
.codehover .ch-tab10, .codehover .ch-tab11, .codehover .ch-tab12,
.codehover .ch-tab13, .codehover .ch-tab14, .codehover .ch-tab15,
.codehover .ch-tab16 {
  display: inline-block;
}