/* Engineer Underground reference tables and hub cards. Colors come from the design tokens, so dark mode works. */
.eur { margin: 0 0 28px; }
.eur-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.eur-filter-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--eu-ink,#0F172A); }
.eur-filter { box-sizing: border-box; width: 240px; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--eu-border-2,#CBD5E1); border-radius: 8px; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-size: 15px; }
.eur-count { font-size: 14px; color: var(--eu-muted,#64748B); }
.eur-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; background: var(--eu-card,#FFFFFF); }
.eur-scroll:focus-visible { outline: 3px solid var(--eu-accent,#0369A1); outline-offset: 2px; }
.eur-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.4; }
.eur-table th, .eur-table td { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--eu-border,#E2E8F0); text-align: left; color: var(--eu-text,#334155); white-space: nowrap; }
.eur-table td.eur-num { text-align: right; font-variant-numeric: tabular-nums; }
.eur-table thead th { position: sticky; top: 0; z-index: 2; background: var(--eu-surface,#F1F5F9); color: var(--eu-ink,#0F172A); font-size: 13px; font-weight: 700; white-space: normal; vertical-align: bottom; border-bottom: 2px solid var(--eu-border-2,#CBD5E1); }
.eur-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--eu-card,#FFFFFF); color: var(--eu-ink,#0F172A); font-weight: 700; }
.eur-table tbody tr:nth-child(even) td, .eur-table tbody tr:nth-child(even) th { background: var(--eu-surface-2,#F8FAFC); }
.eur-table tbody tr:hover td, .eur-table tbody tr:hover th { background: var(--eu-accent-soft,#E0F2FE); }
.eur-table tbody tr:last-child td, .eur-table tbody tr:last-child th { border-bottom: 0; }
.eur-table tr[hidden] { display: none; }
.eur-sortable { cursor: pointer; }
.eur-sortable:hover { color: var(--eu-accent,#0369A1); }
.eur-sortable[aria-sort="ascending"]::after { content: " \25B2"; font-size: 10px; }
.eur-sortable[aria-sort="descending"]::after { content: " \25BC"; font-size: 10px; }
.eur-sortable:focus-visible { outline: 3px solid var(--eu-accent,#0369A1); outline-offset: -3px; }
.eur-source { margin: 12px 0 0; font-size: 14px; color: var(--eu-muted,#64748B); }

.eur-group { margin: 32px 0 14px; }
.eur-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 8px; }
.eur-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--eu-card,#FFFFFF); border: 1px solid var(--eu-border,#E2E8F0); border-radius: 12px; color: var(--eu-ink,#0F172A); text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: box-shadow .15s, transform .15s, border-color .15s; }
.eur-card:hover { border-color: var(--eu-accent,#0369A1); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }
.eur-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.eur-card-blurb { font-size: 14.5px; line-height: 1.5; color: var(--eu-text-2,#475569); }
.eur-card-rows { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--eu-accent,#0369A1); }
@media (max-width: 600px) { .eur-table th, .eur-table td { padding: 8px 10px; font-size: 14px; } .eur-filter { width: 100%; } }
@media print { .eur-tools { display: none; } .eur-scroll { max-height: none; overflow: visible; border: 0; } .eur-table th, .eur-table td { white-space: normal; padding: 4px 6px; font-size: 11px; } }