/* ==========================================================================
   Component: two-pane setting explorer (.vt-explorer)
   A clickable list of options on the left; the selected option's content on
   the right. Fixed height so the panel never resizes between selections.
   Markup is produced by the `viewer_explorer(...)` macro in main.py, but can
   also be written by hand. Behaviour lives in docs/js/explorer.js.
   Two-state options may embed a .vt-slider (see slider.css).
   ========================================================================== */
.vt-explorer {
  --vt-blue: #0d73b2;
  display: flex;
  gap: 1rem;
  height: 630px;              /* fixed height: panel never changes size */
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-default-bg-color);
}
@media (max-width: 700px) {
  .vt-explorer { flex-direction: column; height: auto; }
}

.vt-explorer__list {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  padding: .5rem;
  gap: .15rem;
  background: rgba(13, 115, 178, .05);
  border-right: 1px solid rgba(0, 0, 0, .08);
}
@media (max-width: 700px) {
  .vt-explorer__list {
    flex-basis: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }
}

.vt-explorer__tab {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--md-default-fg-color);
  font: inherit;
  padding: .55rem .75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* small per-option icon shown before the label (optional) */
.vt-explorer__ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.vt-explorer__tab:hover { background: rgba(13, 115, 178, .12); }
.vt-explorer__tab[aria-selected="true"] {
  background: var(--vt-blue);
  color: #fff;
  font-weight: 600;
}
.vt-explorer__tab:focus-visible { outline: 2px solid var(--vt-blue); outline-offset: 2px; }

.vt-explorer__panel { flex: 1; padding: 1.25rem; min-width: 0; overflow-y: auto; }
.vt-explorer__panel[hidden] { display: none; }
.vt-explorer__panel h4 { margin-top: 0 !important; color: var(--vt-blue); }
/* scale within both limits, preserving the real aspect ratio (no distortion) */
.vt-explorer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
  margin: .75rem 0;
}

/* two-state options embed the slider; it sizes like the single images above */
.vt-explorer .vt-slider { max-width: 100%; margin: .75rem 0; }

/* caption shown above a slider when several are stacked in one panel */
.vt-explorer__cap {
  margin: 1rem 0 .25rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}
.vt-explorer__cap:first-child { margin-top: 0; }