/* ===== TABS BUNDLE: THE GLOBAL TAB GROUP ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/tabs/main.md */

/* ----- THE BAR ----- */
.Tab_Bar { display: flex; align-items: stretch; border-bottom: 2px solid var(--Color_Secondary_Deep); -webkit-user-select: none; user-select: none; }
.Tab_Item
	{
		--Tab_Underline_Color: transparent;
		--Tab_Underline_Height: 4px;
		position: relative;
		flex: 1 1 0;
		min-width: 0;
		min-height: 48px;
		margin-bottom: -2px;
		padding: 8px 14px 14px;
		border: none;
		border-radius: 0;
		background: transparent;
		font-family: var(--Font_Header);
		font-weight: bold;
		font-size: var(--Font_Text_Large);
		letter-spacing: var(--Font_Header_Spacing);
		line-height: 1.2;
		color: var(--Color_Text_Soft);
		cursor: pointer;
		transition: color 0.12s ease, background-color 0.12s ease;
	}
.Tab_Item + .Tab_Item { border-left: 2px solid hsl(from var(--Color_Secondary_Deep) h s l / 0.55); }

/* ----- THE UNDERLINE: ITS OWN LAYER, SQUARE ENDS, ACROSS THE DIVIDER ON EACH SIDE ----- */
.Tab_Item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--Tab_Underline_Height); background: var(--Tab_Underline_Color); pointer-events: none; transition: background-color 0.12s ease; }
.Tab_Item + .Tab_Item::after { left: -2px; }
.Tab_Item:not(:last-child)::after { right: -2px; }
.Tab_Item_Active::after { z-index: 2; }

/* ----- STATES ----- */
@media (hover: hover) { .Tab_Item:hover { --Tab_Underline_Color: var(--Color_Secondary_Deep); color: var(--Color_Main); background: hsl(from var(--Color_Main) h s l / 0.07); } }
.Tab_Item:focus-visible { outline: 2px solid var(--Color_Main); outline-offset: -2px; }
.Tab_Item_Active, .Tab_Item_Active:hover { --Tab_Underline_Color: var(--Color_Main); color: var(--Color_Main); background: hsl(from var(--Color_Main) h s l / 0.1); cursor: default; }
.Tab_Item_Dormant, .Tab_Item_Dormant:hover { --Tab_Underline_Color: transparent; color: hsl(from var(--Color_Text_Soft) h s l / 0.5); background: transparent; cursor: default; }

/* ----- THE PANELS ----- */
.Tab_Panels { padding-top: 20px; }

/* ----- CARD: THE GROUP AS ITS OWN Div_1 CARD, THE BAR FLUSH ACROSS ITS TOP ----- */
.Tabs_Card { overflow: hidden; }
.Tabs_Card > .Tab_Panels { padding: 20px 24px 28px; }

/* ----- FIXED: EVERY PANEL AT LEAST --Tab_Panel_Height ----- */
.Tabs_Fixed > .Tab_Panels > .Tab_Panel { min-height: var(--Tab_Panel_Height, 0); }

/* ----- SMALL: SUB-TABS INSIDE A PANEL ----- */
.Tabs_Small > .Tab_Bar > .Tab_Item { --Tab_Underline_Height: 3px; min-height: 36px; padding: 4px 10px 9px; font-size: var(--Font_Text_Mid); }
.Tabs_Small > .Tab_Panels { padding-top: 12px; }