/* Pure-CSS tab group (no JS): hidden radios drive which panel shows, matched by
   POSITION — the k-th input pairs with the k-th label and k-th panel. Authoring
   shape (see getting-started's "Connect a model"):

     <div class="adb-tabs">
       <input type="radio" name="<unique>" id="t1" checked><input ... id="t2">
       <div class="adb-tab-labels"><label for="t1">…</label><label for="t2">…</label></div>
       <div class="adb-tab-panels"><div> …markdown… </div><div> … </div></div>
     </div>

   Rules are written for up to 8 tabs. NOTE mdbook: 1rem = 10px. */

.adb-tabs { margin: 1em 0; }
.adb-tabs > input { display: none; }

.adb-tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  border-bottom: 1px solid var(--table-border-color, #ccc);
  margin-bottom: 0.9em;
}
.adb-tab-labels > label {
  padding: 0.3em 0.85em;
  cursor: pointer;
  user-select: none;
  font-size: 1.4rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  opacity: 0.7;
}
.adb-tab-labels > label:hover { opacity: 1; }

.adb-tab-panels > div { display: none; }

.adb-tabs > input:nth-of-type(1):checked ~ .adb-tab-labels > label:nth-of-type(1),
.adb-tabs > input:nth-of-type(2):checked ~ .adb-tab-labels > label:nth-of-type(2),
.adb-tabs > input:nth-of-type(3):checked ~ .adb-tab-labels > label:nth-of-type(3),
.adb-tabs > input:nth-of-type(4):checked ~ .adb-tab-labels > label:nth-of-type(4),
.adb-tabs > input:nth-of-type(5):checked ~ .adb-tab-labels > label:nth-of-type(5),
.adb-tabs > input:nth-of-type(6):checked ~ .adb-tab-labels > label:nth-of-type(6),
.adb-tabs > input:nth-of-type(7):checked ~ .adb-tab-labels > label:nth-of-type(7),
.adb-tabs > input:nth-of-type(8):checked ~ .adb-tab-labels > label:nth-of-type(8) {
  background: var(--quote-bg, rgba(128, 128, 128, 0.08));
  border-color: var(--table-border-color, #ccc);
  opacity: 1;
}

.adb-tabs > input:nth-of-type(1):checked ~ .adb-tab-panels > div:nth-of-type(1),
.adb-tabs > input:nth-of-type(2):checked ~ .adb-tab-panels > div:nth-of-type(2),
.adb-tabs > input:nth-of-type(3):checked ~ .adb-tab-panels > div:nth-of-type(3),
.adb-tabs > input:nth-of-type(4):checked ~ .adb-tab-panels > div:nth-of-type(4),
.adb-tabs > input:nth-of-type(5):checked ~ .adb-tab-panels > div:nth-of-type(5),
.adb-tabs > input:nth-of-type(6):checked ~ .adb-tab-panels > div:nth-of-type(6),
.adb-tabs > input:nth-of-type(7):checked ~ .adb-tab-panels > div:nth-of-type(7),
.adb-tabs > input:nth-of-type(8):checked ~ .adb-tab-panels > div:nth-of-type(8) {
  display: block;
}