/* NE Design System — components/tabs.css — Extracted from modules (#75) */
/* Tab navigation component */

/*
 * Usage:
 *   <nav class="ne-tabs">
 *     <a href="#" class="ne-tabs__btn active" data-tab="tab-one">Tab One</a>
 *     <a href="#" class="ne-tabs__btn" data-tab="tab-two">Tab Two</a>
 *     <a href="#" class="ne-tabs__btn ne-tabs__btn--back"><i class="fa fa-arrow-left"></i> Back</a>
 *   </nav>
 *   <div class="ne-tabs__content">
 *     <div class="tab-one active">...</div>
 *     <div class="tab-two">...</div>
 *   </div>
 *
 * JS: The global cornetto-tabs script (or inline script) listens for
 *     .ne-tabs__btn[data-tab] clicks and toggles .active on buttons + panels.
 *
 * Active state: underline (border-bottom) in accent color. Do NOT use
 *               background pill — the underline is the canonical pattern.
 */

.ne-tabs {
	display: flex;
	gap: var(--ne-space-1);
	border-bottom: 1px solid var(--ne-border);
	margin-bottom: var(--ne-space-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ne-tabs__btn {
	font-family: var(--ne-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ne-text-subtle);
	text-decoration: none;
	padding: var(--ne-space-3) var(--ne-space-4);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--ne-duration) var(--ne-ease),
	            border-color var(--ne-duration) var(--ne-ease);
}

.ne-tabs__btn:hover {
	color: var(--ne-text);
}

.ne-tabs__btn.active {
	color: var(--ne-accent);
	border-bottom-color: var(--ne-accent);
}

/* Back button variant — pushes to the right */
.ne-tabs__btn--back {
	margin-left: auto;
	color: var(--ne-text-muted);
}

.ne-tabs__btn--back:hover {
	color: var(--ne-text);
}

/* Tab content panels */
.ne-tabs__content > div {
	display: none;
}

.ne-tabs__content > div.active {
	display: block;
}

/* Override legacy inline-flex from .toggle-content > div.active */
.ne-section .ne-tabs__content > div.active {
	display: block;
}