/* =============================================================
 * Utilities Bunker V4 — Category intro + feature matrix
 * Loaded on category pages via the header.php $extraCss hook.
 * Uses the global :root design tokens.
 * ============================================================= */

.ub-category-intro {
    max-width: 75ch;
    margin: 4px 0 24px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}
.ub-category-intro > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 22px 0 10px;
}
.ub-category-intro p { margin: 0 0 14px; }
.ub-category-intro ul { margin: 0 0 14px; padding-left: 22px; }
.ub-category-intro li { margin: 5px 0; }
.ub-category-intro strong { color: var(--text-primary); }
.ub-category-intro a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-border); }
.ub-category-intro a:hover { color: var(--accent-hover); }
.ub-category-intro code {
    font-family: var(--font-mono); font-size: .9em;
    background: var(--bg-secondary); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: 1px 6px; color: var(--text-primary);
}

/* Feature matrix / reference table */
.ub-category-matrix { margin: 36px 0 8px; }
.ub-category-matrix__intro {
    max-width: 75ch; color: var(--text-secondary); line-height: 1.6;
    margin: 0 0 14px; font-size: .95rem;
}
.ub-category-matrix__wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.ub-category-matrix__table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
.ub-category-matrix__table th,
.ub-category-matrix__table td {
    text-align: left; padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.ub-category-matrix__table td:last-child,
.ub-category-matrix__table th:last-child { white-space: normal; }
.ub-category-matrix__table thead th {
    color: var(--text-primary); font-weight: 600;
    background: var(--bg-secondary); position: sticky; top: 0;
}
.ub-category-matrix__table tbody tr:last-child td { border-bottom: none; }
.ub-category-matrix__table tbody tr:hover td { background: var(--bg-card-hover); }
.ub-category-matrix__table code {
    font-family: var(--font-mono); font-size: .88em; color: var(--accent);
}
.ub-category-matrix__table strong { color: var(--text-primary); }
.ub-category-matrix__note {
    max-width: 75ch; color: var(--text-tertiary); font-size: .85rem;
    line-height: 1.6; margin: 12px 0 0;
}