/* ============================================================================
   TAB NAVIGATION (Option B — distinctive SaaS dashboard look)
   - Top tab inactive: faint pill background, clearer hover
   - Top tab active: vibrant indigo gradient + soft glow shadow
   - Sub tab inactive: muted text, hover lifts subtle background
   - Sub tab active: solid indigo pill, white text, icon also white
   - All tabs: smooth transitions, clear focus rings for keyboard a11y
   ============================================================================ */
.tab-group-button {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-secondary, #a1a1aa);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.tab-group-button [data-lucide], .tab-group-button svg.lucide {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.tab-group-button:hover:not(.active) {
    background: rgba(129, 140, 248, 0.08);
    color: var(--text-primary, #e4e4e7);
    border-color: rgba(129, 140, 248, 0.18);
}
.tab-group-button .tab-group-count {
    display: inline-block;
    margin-left: 2px;
    background: rgba(129, 140, 248, 0.18);
    color: var(--primary-light, #818cf8);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    transition: background 0.15s ease, color 0.15s ease;
}
.tab-group-button.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #818cf8 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45),
                0 1px 3px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}
.tab-group-button.active .tab-group-count {
    background: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.98);
}

/* Sub-tab nav row */
.tab-sub-button {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #a1a1aa);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.tab-sub-button [data-lucide], .tab-sub-button svg.lucide {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.tab-sub-button:hover:not(.active) {
    background: rgba(129, 140, 248, 0.06);
    color: var(--text-primary, #e4e4e7);
}
.tab-sub-button.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.tab-sub-button.active [data-lucide], .tab-sub-button.active svg.lucide {
    color: white;
}
@media (max-width: 768px) {
    .tab-group-button, .tab-sub-button {
        flex-shrink: 0;
    }
}


/* Component health bars: shows pass rate per ROCm component category in the
   Overview tab. Each row = one component. Width of the green bar = pass rate.
   Inner row = name (120px) + bar (flex) + pct (52px) — raw counts moved to
   tooltip so each card stays comfortably narrow. */
.component-health-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.component-health-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s ease, border-color 0.1s ease;
    min-width: 0;        /* allow grid item to shrink instead of overflowing */
    overflow: hidden;    /* clip anything that would still overflow */
}
.component-health-row:hover {
    transform: translateY(-1px);
    border-color: var(--primary-light, #818cf8);
}
.component-health-name {
    flex: 0 0 120px;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary, #ddd);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.component-health-bar-track {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(239,68,68,0.12);
    border-radius: 4px;
    overflow: hidden;
    min-width: 50px;
}
.component-health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.3s ease;
}
.component-health-bar-fill.warn {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.component-health-bar-fill.bad {
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.component-health-pct {
    flex: 0 0 52px;
    text-align: right;
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, monospace;
}
@media (max-width: 600px) {
    .component-health-bars { grid-template-columns: 1fr; }
}

/* Summary tab trend mini-charts: 3-column grid with compact charts so the
   Summary tab gets visual context without dominating the page. */
.summary-trends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.summary-trend-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.summary-trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.summary-trend-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #ddd);
}
.summary-trend-summary {
    font-size: 0.72rem;
    color: var(--text-secondary, #888);
    font-family: ui-monospace, monospace;
}
/* Chart.js canonical responsive pattern: canvas wrapped in a position:
   relative parent with explicit dimensions. Chart.js handles all sizing
   via responsive:true. We keep the canvas itself unstyled so Chart.js
   has full control. */
.summary-trend-canvas-wrap {
    position: relative;
    height: 110px;
    width: 100%;
}
.summary-trend-canvas-wrap canvas {
    display: block;
}
.failures-trend-wrap {
    position: relative;
    height: 240px;
    width: 100%;
}
.failures-trend-wrap canvas {
    display: block;
}

/* Multi-Arch Trends tab: 2x2 grid of failure-count trend charts. Reuses
   .summary-trend-card / -head / -summary; only the grid + a taller canvas
   wrap are tab-specific. Collapses to a single column on narrow screens. */
.mat-trends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.mat-trend-canvas-wrap {
    position: relative;
    height: 220px;
    width: 100%;
}
.mat-trend-canvas-wrap canvas {
    display: block;
}
@media (max-width: 720px) {
    .mat-trends-grid { grid-template-columns: 1fr; }
}

/* Failures tab — 2-line hotspot card. Line 1 reads (severity, count,
   pattern) at a glance; line 2 has all the secondary metadata (workflow,
   archs, repo, last-seen, action). Avoids the cramped 1-line flex-row
   that mixed signal with noise. */
.failures-hotspot-row {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.failures-hotspot-row + .failures-hotspot-row { margin-top: 2px; }
.failures-hotspot-row:hover {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.22);
}
/* Clickable hotspot rows (those with a sample URL we can extract runId/jobId
   from) get a stronger hover affordance + the small AI ↗ badge. */
.failures-hotspot-row[data-runid]:hover {
    background: rgba(129, 140, 248, 0.10);
    border-color: rgba(129, 140, 248, 0.4);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15);
}
.failures-hotspot-ai {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(34,211,238,0.12));
    color: var(--primary-light, #818cf8);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    border: 1px solid rgba(129, 140, 248, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.failures-hotspot-row[data-runid]:hover .failures-hotspot-ai {
    background: linear-gradient(135deg, rgba(99,102,241,0.32), rgba(34,211,238,0.22));
    border-color: rgba(129, 140, 248, 0.5);
}

/* Rich AI insight card — replaces the old single-paragraph narrative on the
   Failures > AI Insights tab. Shows risk + headline + hypothesis + evidence
   + suggested actions in a structured format that's actually useful for
   triage. */
.ai-insight-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(34,211,238,0.03));
    border: 1px solid rgba(129, 140, 248, 0.25);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 8px;
    padding: 14px 18px;
}
.ai-insight-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ai-insight-tag {
    background: rgba(129, 140, 248, 0.22);
    color: var(--primary-light, #818cf8);
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ai-insight-risk {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ai-insight-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.45;
    margin-bottom: 8px;
}
.ai-insight-hypothesis {
    font-size: 0.88rem;
    color: var(--text-secondary, #a1a1aa);
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
}
.ai-insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 10px;
}
@media (max-width: 768px) { .ai-insight-grid { grid-template-columns: 1fr; } }
.ai-insight-section { min-width: 0; }
.ai-insight-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary, #e4e4e7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.ai-insight-section-title [data-lucide],
.ai-insight-section-title svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--primary-light, #818cf8);
}
.ai-insight-list {
    margin: 0;
    padding-left: 22px;
    color: var(--text-primary, #ddd);
    font-size: 0.84rem;
    line-height: 1.55;
}
.ai-insight-list li { margin-bottom: 4px; }
.ai-insight-list li::marker {
    color: var(--primary-light, #818cf8);
}
.ai-insight-source {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(129, 140, 248, 0.15);
    font-size: 0.7rem;
    color: var(--text-secondary, #a1a1aa);
}
.failures-hotspot-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.failures-hotspot-count {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: center;
}
.failures-hotspot-pattern {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.failures-hotspot-line2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--text-secondary, #888);
    padding-left: 4px;
}
.failures-hotspot-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.failures-hotspot-meta-spacer { flex: 1; }
.failures-hotspot-investigate {
    color: var(--primary-light, #818cf8);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}
.failures-hotspot-investigate:hover {
    background: rgba(129, 140, 248, 0.10);
    border-color: rgba(129, 140, 248, 0.4);
}

/* Failure context modal — opens when user clicks a FAIL badge in Release
   Nightly tables. Shows job context, similar past failures, related issues,
   and one-click "Create issue on GitHub" with a prefilled draft. */
.failure-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    overflow-y: auto;
}
.failure-modal-overlay[hidden] { display: none; }
.failure-modal {
    position: relative;
    background: var(--bg-surface, #18181b);
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 24px 28px;
    width: 100%;
    max-width: 880px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    color: var(--text-primary);
}
.failure-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.1s ease, color 0.1s ease;
}
.failure-modal-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
.failure-modal h2 {
    margin: 0 0 14px 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.failure-modal h3 {
    margin: 18px 0 8px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.06));
    padding-bottom: 6px;
}
.failure-modal-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.failure-modal-meta dt {
    color: var(--text-secondary);
    font-weight: 600;
}
.failure-modal-meta dd {
    margin: 0;
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
    word-break: break-all;
}
.failure-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border, rgba(255,255,255,0.06));
}
.failure-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s ease, transform 0.1s ease;
}
.failure-modal-btn:hover {
    background: var(--primary-dark, #4f46e5);
    transform: translateY(-1px);
}
.failure-modal-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}
.failure-modal-btn-secondary:hover {
    background: rgba(255,255,255,0.04);
}
.failure-modal-issue {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    margin-bottom: 6px;
    font-size: 0.84rem;
}
.failure-modal-issue:hover {
    background: rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.3);
}
.failure-modal-issue-state {
    flex: 0 0 50px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.failure-modal-issue-state.open  { background: rgba(34,197,94,0.15); color: #22c55e; }
.failure-modal-issue-state.closed { background: rgba(168,85,247,0.15); color: #a855f7; }
.failure-modal-issue-body { flex: 1; min-width: 0; }
.failure-modal-issue-body a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}
.failure-modal-issue-body a:hover { color: var(--primary-light); }
.failure-modal-issue-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
}
.failure-modal-empty {
    padding: 14px;
    background: rgba(99,102,241,0.04);
    border: 1px dashed var(--card-border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}
.failure-modal-narrative {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(34,211,238,0.03));
    border-left: 3px solid var(--primary-light, #818cf8);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.failure-modal-narrative-tag {
    display: inline-block;
    background: rgba(129,140,248,0.18);
    color: var(--primary-light, #818cf8);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 8px;
}
/* ============================================================================
   Release Notes — "How PRs are categorized" reference card.
   Collapsible <details> block. When expanded, shows each rule as a numbered
   card with example mappings (input → category badge) so users see at a
   glance how a PR ends up in a category.
   ============================================================================ */
.rn-cat-rules {
    background: var(--card-bg, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    margin-top: 18px;
    overflow: hidden;
}
.rn-cat-rules-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    list-style: none;
    transition: background 0.15s ease;
}
.rn-cat-rules-summary::-webkit-details-marker { display: none; }
.rn-cat-rules-summary:hover {
    background: rgba(255, 255, 255, 0.025);
}
.rn-cat-rules-summary i[data-lucide],
.rn-cat-rules-summary svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--primary-light, #818cf8);
    flex-shrink: 0;
}
.rn-cat-rules-title {
    font-size: 0.95rem;
    flex-shrink: 0;
}
.rn-cat-rules-meta {
    flex: 1;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.78rem;
    font-weight: 400;
}
.rn-cat-rules-meta strong {
    color: var(--primary-light, #818cf8);
    font-weight: 700;
}
.rn-cat-rules-chevron {
    transition: transform 0.2s ease;
    color: var(--text-secondary, #a1a1aa) !important;
}
.rn-cat-rules[open] .rn-cat-rules-chevron {
    transform: rotate(180deg);
}
.rn-cat-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 12px 16px 16px 16px;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
}
.rn-cat-rule {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--primary-light, #818cf8);
    border-radius: 8px;
    padding: 10px 12px;
}
.rn-cat-rule-fallback {
    border-left-color: var(--text-muted, #94a3b8);
    opacity: 0.85;
}
.rn-cat-rule-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.rn-cat-rule-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(99, 102, 241, 0.18);
    color: var(--primary-light, #818cf8);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rn-cat-rule-fallback .rn-cat-rule-num {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #94a3b8);
}
.rn-cat-rule-head i[data-lucide],
.rn-cat-rule-head svg.lucide {
    width: 14px;
    height: 14px;
    color: var(--text-secondary, #a1a1aa);
    flex-shrink: 0;
}
.rn-cat-rule-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #e4e4e7);
}
.rn-cat-rule-examples {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78rem;
}
.rn-cat-ex {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rn-cat-ex code {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-primary, #e4e4e7);
}
.rn-cat-arrow {
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    font-size: 0.85rem;
}
/* Category result badges. Colors loosely mirror the actual category
   pills used in the release-notes output table. */
.rn-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
}
.rn-cat-badge.cat-features  { background: rgba(34, 197, 94, 0.16);  color: #22c55e; border-color: rgba(34, 197, 94, 0.35); }
.rn-cat-badge.cat-fixes     { background: rgba(239, 68, 68, 0.16);  color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }
.rn-cat-badge.cat-breaking  { background: rgba(220, 38, 38, 0.20);  color: #f87171; border-color: rgba(220, 38, 38, 0.45); }
.rn-cat-badge.cat-ci        { background: rgba(99, 102, 241, 0.16); color: #818cf8; border-color: rgba(99, 102, 241, 0.35); }
.rn-cat-badge.cat-docs      { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.rn-cat-badge.cat-deps      { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); }
.rn-cat-badge.cat-refactor  { background: rgba(168, 85, 247, 0.16); color: #c084fc; border-color: rgba(168, 85, 247, 0.35); }
.rn-cat-badge.cat-internal  { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }
.rn-cat-badge.cat-other     { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.30); }

/* Per-repo tab page title — two-part layout:
     [ REPO chip ]   [ icon ] Tab Name
   The chip visually echoes the nav-bar Repo dropdown so users see the
   connection between dropdown choice and page content. The chip stays
   visible for all repos (TheRock included) for full consistency. */
h1.page-title-with-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.page-title-repo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 9px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 14px;
    color: var(--primary-light, #818cf8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    cursor: help;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    /* Keep the chip vertically centered against the larger h1 text */
    align-self: center;
    flex-shrink: 0;
}
.page-title-repo-chip i,
.page-title-repo-chip svg.lucide {
    width: 13px;
    height: 13px;
    color: inherit;
}
/* Active state — when a sub-repo (not the default TheRock) is selected,
   the chip glows brighter to signal "you've narrowed scope". Mirrors the
   .repo-selector-active treatment in the nav-bar dropdown for visual
   continuity. */
.page-title-repo-chip-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.30), rgba(99, 102, 241, 0.14));
    border-color: rgba(129, 140, 248, 0.65);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10),
                0 1px 4px rgba(99, 102, 241, 0.18);
}
.page-title-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-primary, #e4e4e7);
}
.page-title-icon i,
.page-title-icon svg.lucide {
    width: 1em;
    height: 1em;
}
.page-title-text {
    display: inline-block;
    line-height: 1.2;
}
@media (max-width: 600px) {
    h1.page-title-with-chip {
        gap: 8px;
    }
    .page-title-repo-chip {
        font-size: 0.65rem;
        padding: 3px 9px;
    }
}

/* ============================================================================
   GPU Health Matrix v2 — combined "Top breakages" cards + smart matrix.
   ============================================================================ */

/* Top breakages card stack — surfaces the worst (arch × pipeline) combos
   above the matrix so the user sees what to fix first without scanning. */
.gpu-health-breakages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 16px 0;
}
.gpu-health-breakages-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.gpu-health-breakages-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary, #e4e4e7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gpu-health-breakages-header h3 i,
.gpu-health-breakages-header h3 svg.lucide {
    width: 16px;
    height: 16px;
    color: #ef4444;
}
.gpu-health-breakages-meta {
    font-size: 0.78rem;
    color: var(--text-secondary, #a1a1aa);
}
.gpu-health-breakages-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 8px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.85rem;
}
.gpu-health-breakages-empty i,
.gpu-health-breakages-empty svg.lucide {
    width: 18px; height: 18px;
}

.gpu-health-breakage {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--text-muted, #94a3b8);
    border-radius: 8px;
    transition: background 0.15s ease;
}
.gpu-health-breakage:hover { background: rgba(255, 255, 255, 0.04); }
.gpu-health-breakage.sev-critical { }
.gpu-health-breakage.sev-major    { }
.gpu-health-breakage.sev-warn     { }
.breakage-icon {
    flex: 0 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1px;
}
.breakage-icon i, .breakage-icon svg.lucide { width: 18px; height: 18px; }
.gpu-health-breakage.sev-critical .breakage-icon i,
.gpu-health-breakage.sev-critical .breakage-icon svg.lucide { color: #dc2626; }
.gpu-health-breakage.sev-major .breakage-icon i,
.gpu-health-breakage.sev-major .breakage-icon svg.lucide { color: #f97316; }
.gpu-health-breakage.sev-warn .breakage-icon i,
.gpu-health-breakage.sev-warn .breakage-icon svg.lucide { color: #f59e0b; }
.breakage-body { flex: 1 1 auto; min-width: 0; }
.breakage-title {
    font-size: 1rem;
    color: var(--text-primary, #e4e4e7);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.breakage-title strong {
    font-family: ui-monospace, monospace;
    font-weight: 700;
}
.breakage-sep {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
}
.breakage-legacy {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #94a3b8);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.breakage-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a1a1aa);
    flex-wrap: wrap;
}
.breakage-passrate {
    font-weight: 700;
    color: var(--text-primary, #e4e4e7);
    font-family: ui-monospace, monospace;
}
.gpu-health-breakage.sev-critical .breakage-passrate { color: #f87171; }
.gpu-health-breakage.sev-major    .breakage-passrate { color: #fb923c; }
.gpu-health-breakage.sev-warn     .breakage-passrate { color: #fbbf24; }
.breakage-counts { font-family: ui-monospace, monospace; }
.breakage-trend .arrow-up   { color: #22c55e; }
.breakage-trend .arrow-down { color: #ef4444; }
.breakage-trend .arrow-flat { color: var(--text-muted, #94a3b8); }
.breakage-secondary {
    margin-top: 5px;
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
}
.breakage-secondary code {
    background: rgba(255, 255, 255, 0.03);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
.breakage-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.breakage-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}
.breakage-btn i, .breakage-btn svg.lucide { width: 13px; height: 13px; }
.breakage-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
.breakage-btn-primary:hover { transform: translateY(-1px); }
.breakage-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #e4e4e7);
    border-color: rgba(255, 255, 255, 0.08);
}
.breakage-btn-secondary:hover {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(129, 140, 248, 0.35);
}

/* Updated matrix cell — pass% + count + trend arrow inside one badge */
.health-cell-link {
    text-decoration: none;
    display: inline-block;
}
.health-cell-link:hover .health-cell {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.health-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: ui-monospace, monospace;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.health-cell-rate { font-weight: 700; }
.health-cell-arrow { font-size: 0.95em; line-height: 1; }
.health-cell-arrow.arrow-up   { color: #22c55e; }
.health-cell-arrow.arrow-down { color: #ef4444; }
.health-cell-arrow.arrow-flat { opacity: 0.45; }
.health-cell-count {
    font-size: 0.7em;
    opacity: 0.75;
    font-weight: 500;
    margin-left: 1px;
}
.health-cell.health-good { background: rgba(34, 197, 94, 0.18); color: #22c55e; }
.health-cell.health-warn { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.health-cell.health-bad  { background: rgba(239, 68, 68, 0.20); color: #f87171; }
.health-cell.health-na   { background: rgba(148, 163, 184, 0.10); color: var(--text-muted, #94a3b8); padding: 3px 10px; }

/* Legacy arch row + chip styling — visually de-emphasized so legacy data
   doesn't compete with active arches when the user toggles "Show legacy". */
.arch-legacy-row { opacity: 0.65; }
.arch-legacy-row:hover { opacity: 1; }
.arch-legacy-chip {
    display: inline-block;
    margin-left: 6px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-muted, #94a3b8);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* "Show legacy" toggle below the matrix */
.gpu-health-legacy-toggle {
    margin-top: 10px;
    padding: 8px;
    text-align: center;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
}

/* Sub-repo "not applicable" notice — shown on Bump PRs when a sub-repo
   is selected (sub-repos don't run bump_submodules.yml). */
.subrepo-na-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-left: 3px solid #ef4444;
    border-radius: 8px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.85rem;
    line-height: 1.5;
}
.subrepo-na-notice i,
.subrepo-na-notice svg.lucide {
    width: 18px;
    height: 18px;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 1px;
}
.subrepo-na-notice strong {
    color: var(--text-primary, #e4e4e7);
}
.subrepo-na-notice code {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: ui-monospace, monospace;
    color: var(--primary-light, #818cf8);
}
.subrepo-na-notice p {
    margin: 4px 0 0 0;
    font-size: 0.82rem;
}

/* Persistent paste-hint banner — appears below the "Copy & open #N" button
   after click. Stays visible until dismissed since the user's attention
   is now in the new GitHub tab; we want them to see this when they
   come back to switch tabs. */
.failure-action-paste-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-left: 3px solid var(--status-pass);
    border-radius: 8px;
    color: var(--text-primary, #e4e4e7);
    font-size: 0.85rem;
    line-height: 1.55;
    animation: paste-hint-fadein 0.25s ease-out;
}
.failure-action-paste-hint i,
.failure-action-paste-hint svg.lucide {
    width: 18px; height: 18px;
    color: var(--status-pass);
    flex-shrink: 0;
    margin-top: 1px;
}
.failure-action-paste-hint .paste-hint-body {
    flex: 1 1 auto;
}
.failure-action-paste-hint strong {
    display: block;
    color: var(--text-primary, #e4e4e7);
    margin-bottom: 2px;
}
.failure-action-paste-hint span {
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.82rem;
}
.failure-action-paste-hint.paste-hint-fail {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);

}
.failure-action-paste-hint.paste-hint-fail i,
.failure-action-paste-hint.paste-hint-fail svg.lucide {
    color: #f59e0b;
}
.paste-hint-dismiss {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 0 6px;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.paste-hint-dismiss:hover { color: var(--text-primary, #e4e4e7); }
@keyframes paste-hint-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inline keyboard-shortcut keys — used in the help text + paste hint */
.failure-action-help kbd,
.failure-action-paste-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom-width: 2px;
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary, #e4e4e7);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    margin: 0 1px;
}

/* Filter-flash effect when Failures tab inherits a filter from a deep link */
.failures-filter-flash {
    animation: failures-filter-flash 1.5s ease-out;
}
@keyframes failures-filter-flash {
    0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Weekly digest — rendered markdown preview.
   Tighter typography than a normal article so the digest reads as a
   compact summary card, not a long article. */
.weekly-digest-preview {
    background: var(--card-bg, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 18px 22px;
    color: var(--text-primary, #e4e4e7);
    line-height: 1.6;
    font-size: 0.92rem;
    min-height: 280px;
    max-height: 70vh;
    overflow-y: auto;
}
.weekly-digest-preview h3 {
    font-size: 1.1rem;
    margin: 14px 0 8px 0;
    color: var(--text-primary, #e4e4e7);
    font-weight: 700;
    border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    padding-bottom: 6px;
}
.weekly-digest-preview h3:first-child { margin-top: 0; }
.weekly-digest-preview h4 {
    font-size: 0.95rem;
    margin: 12px 0 6px 0;
    color: var(--text-primary, #e4e4e7);
    font-weight: 600;
}
.weekly-digest-preview h5,
.weekly-digest-preview h6 {
    font-size: 0.85rem;
    margin: 10px 0 4px 0;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.weekly-digest-preview p {
    margin: 6px 0 10px 0;
}
.weekly-digest-preview ul,
.weekly-digest-preview ol {
    margin: 6px 0 12px 0;
    padding-left: 22px;
}
.weekly-digest-preview li {
    margin: 4px 0;
}
.weekly-digest-preview li > strong:first-child {
    color: var(--primary-light, #818cf8);
}
.weekly-digest-preview code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.86em;
    font-family: ui-monospace, monospace;
    color: var(--primary-light, #818cf8);
}
.weekly-digest-preview a {
    color: var(--primary-light, #818cf8);
    text-decoration: none;
    border-bottom: 1px dotted rgba(129, 140, 248, 0.4);
}
.weekly-digest-preview a:hover {
    border-bottom-style: solid;
}
.weekly-digest-preview hr {
    border: none;
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    margin: 14px 0;
}
.weekly-digest-preview strong { color: var(--text-primary, #e4e4e7); }
.weekly-digest-preview em { color: var(--text-secondary, #a1a1aa); font-style: italic; }