/* ===== TABLES BUNDLE: DATA TABLE HAIRLINE LIST ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/tables/main.md */

/* ----- DATA TABLE: HAIRLINE LIST ----- */
.Data_Table { width: 100%; border-collapse: collapse; font-family: var(--Font_Body); font-size: var(--Font_Text_Mid); }
.Data_Table th
	{
		text-align: left;
		padding: 9px 12px;
		font-family: var(--Font_Header);
		font-weight: bold;
		font-size: var(--Font_Text_Small);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--Color_Text_Soft);
		border-bottom: 2px solid var(--Color_Secondary_Deep);
	}
.Data_Table td { padding: 9px 12px; border-bottom: 1px solid var(--Color_Secondary_Raised); }
.Data_Table tr:last-child td { border-bottom: none; }
.Data_Table tbody tr:hover { background: hsl(from var(--Color_Secondary) h s calc(l + 8)); }
.Data_Table tbody tr[data-href] { cursor: pointer; }
.Data_Table tbody tr[data-href] td { vertical-align: top; }

.Prose_Text .Data_Table td { vertical-align: top; }

/* ----- COMPACT: SMALLER TEXT, TIGHTER CELLS ----- */
.Data_Table_Compact { font-size: var(--Font_Text_Small); }
.Data_Table_Compact th, .Data_Table_Compact td { padding: 4px 10px; }

/* ----- FIXED: COLUMN WIDTHS FROM THE COLGROUP, ONE LINE PER CELL ----- */
.Data_Table_Fixed { table-layout: fixed; }
.Data_Table_Fixed th, .Data_Table_Fixed td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- SORT HEADER: Build_Sort_Header() ----- */
.Data_Table th.Sort_Header { padding: 0; }
.Sort_Button
	{
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		padding: 9px 12px;
		border: 0;
		background: transparent;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		color: inherit;
		text-align: left;
		cursor: pointer;
		transition: color 0.12s ease;
	}
.Data_Table_Compact .Sort_Button { padding: 4px 10px; }
.Sort_Button.Sort_Button_Only { padding: 4px 0; justify-content: center; }
.Sort_Label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.Sort_Arrow { flex: 0 0 auto; width: 14px; height: 14px; color: var(--Color_Text_Soft); opacity: 0.5; transition: color 0.12s ease, opacity 0.12s ease, transform 0.12s ease; }
.Sort_Active .Sort_Button { color: var(--Color_Main); }
.Sort_Active .Sort_Arrow { color: var(--Color_Main); opacity: 1; }
.Sort_Button_Only[aria-pressed="true"] { color: var(--Color_Main); }
.Sort_Header[data-sort-dir="Desc"] .Sort_Arrow { transform: rotate(180deg); }
.Sort_Button:focus-visible { outline: 2px solid var(--Color_Main); outline-offset: -2px; }
@media (hover: hover) { .Sort_Button:hover, .Sort_Button:hover .Sort_Arrow { color: var(--Color_Main); opacity: 1; } }