@charset "UTF-8";

/**
 * tabs.css 1.3.0
 * Author: hybrid.
 *
 * Tab navigation and content panel system.
 * Panels toggle via .active class (managed by JS).
 * Visibility + opacity pattern — consistent with overlays.css.
 * Grid stack — all panels occupy the same cell, height = tallest panel.
 * Autoheight — active panel in flow, inactive panels absolutely positioned.
 *
 * Classes
 * .tabs                   — panels container
 * .tabs > .tab            — individual panel (hidden by default)
 * .tabs > .tab.active     — visible panel
 * .tabs.autoheight        — height follows active panel (CSS-driven)
 * .nav-tabs               — tab links container (expects <nav>)
 *
 * Tokens
 * --tab-inactive-opacity  opacity of inactive tab links (default: .5)
 *
 * Dependencies
 * navigations.css         — nav layout, anchor transitions, hover pattern
 * --duration-fast         defined in animations.css
 * --ease                  defined in animations.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */

:root {
	--tab-inactive-opacity: .5;
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */

.tabs > .tab {
	transition:
		opacity var(--duration-fast) var(--ease),
		visibility .01s linear var(--duration-fast);
}
.tabs > .tab.active {
	transition:
		visibility .01s linear,
		opacity var(--duration-fast) var(--ease);
}


/* =============== AUTOHEIGHT =============== */

.tabs.autoheight {
	transition: height var(--duration-fast) var(--ease);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== TABS ============================== */

.tabs {
	position: relative;
	display: grid;
}
.tabs > .tab {
	position: relative;
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.tabs > .tab.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* =============== AUTOHEIGHT =============== */

.tabs.autoheight {
	display: block;
}
.tabs.autoheight > .tab:not(.active) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}


/* ============================== NAV TABS ============================== */

/* =============== DEFAULT =============== */

.nav-tabs a {
	opacity: var(--tab-inactive-opacity);
}
.nav-tabs a.active {
	opacity: 1;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.nav-tabs a:hover {
		opacity: 1;
	}
}
@media (hover: none) {
	.nav-tabs a.hover {
		opacity: 1;
	}
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */