/* css.slopped.site exhibit: Tabs, from radio buttons. From css/exhibits/tabs.mjs. */
.x-tabs .tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.x-tabs .tab-bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1.5px solid var(--ink); }
.x-tabs .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; font-weight: 700; cursor: pointer; }
.x-tabs .tab:hover { background: var(--panel); }
.x-tabs .panel { padding: 24px 4px 4px; }
.x-tabs .panel h3 { font-size: 30px; letter-spacing: -1px; }
.x-tabs .panel p { max-width: 52ch; margin: 10px 0 0; font-size: 18px; }
/* key */
/* every panel is hidden until its radio is checked */
.x-tabs .panel { display: none; }
#tab-bench:checked ~ #panel-bench,
#tab-lamp:checked ~ #panel-lamp,
#tab-shelf:checked ~ #panel-shelf { display: block; }

/* the checked radio's label is the current tab */
#tab-bench:checked ~ .tab-bar [for=tab-bench],
#tab-lamp:checked ~ .tab-bar [for=tab-lamp],
#tab-shelf:checked ~ .tab-bar [for=tab-shelf] {
  border-color: var(--ink); background: var(--ink); color: var(--paper);
}
/* the radio is invisible, so its focus ring goes on the label */
#tab-bench:focus-visible ~ .tab-bar [for=tab-bench],
#tab-lamp:focus-visible ~ .tab-bar [for=tab-lamp],
#tab-shelf:focus-visible ~ .tab-bar [for=tab-shelf] {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-checkbox-hack .sup-no { display: none; }
@supports not selector(:checked) { .sup-checkbox-hack .sup-yes { display: none; } .sup-checkbox-hack .sup-no { display: inline; } .sup-checkbox-hack { --sup: var(--no); } }