/* ============================================================================
   In-flight PRs tab (presubmit / pre-merge CI quality). Reuses the CI HUD
   table + badge styling; only the new meta columns and the presubmit→
   postsubmit relation panel need bespoke rules.
   ============================================================================ */
.inflight-intro {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 4px 2px 14px;
}

/* Non-sticky meta columns specific to the in-flight grid. */
.inflight-table .col-pr-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inflight-table .col-pr-num a { color: var(--primary-light, #818cf8); text-decoration: none; }
.inflight-table .col-pr-num a:hover { text-decoration: underline; }
.inflight-table .col-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inflight-table .col-auth-plain { white-space: nowrap; }
.inflight-table .col-presub { white-space: nowrap; text-align: center; }
.inflight-table .col-time-plain { white-space: nowrap; color: var(--text-secondary); font-size: 0.8rem; }

.pr-draft-badge {
    display: inline-block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gray-300, #3f3f46);
    color: var(--text-secondary);
    vertical-align: middle;
}

/* Presubmit -> Postsubmit relation panel. */
.inflight-relation { margin: 0 0 16px; }
.inflight-relation:empty { display: none; }
.relation-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.relation-header h3 { font-size: 0.95rem; margin: 0; color: var(--text-primary); }
.relation-sub { font-size: 0.78rem; color: var(--text-muted); }
.relation-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
}
.relation-row {
    display: grid;
    grid-template-columns: 64px minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.relation-row:hover { background: var(--bg-overlay); }
.relation-pr { color: var(--primary-light, #818cf8); text-decoration: none; font-variant-numeric: tabular-nums; }
.relation-pr:hover { text-decoration: underline; }
.relation-title { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-pair { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text-muted); font-size: 0.76rem; }
.relation-leg { display: inline-flex; align-items: center; gap: 4px; }
.relation-arrow { color: var(--text-muted); }

.rel-badge { font-weight: 700; }
.rel-badge.rel-pass { color: var(--success); }
.rel-badge.rel-fail { color: var(--danger); }
.rel-badge.rel-skip { color: var(--text-muted); }
.rel-badge.rel-na   { color: var(--text-muted); }
.relation-pair a { text-decoration: none; }

.rel-match {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    justify-self: end;
}
.rel-match.rel-match-ok  { background: var(--success-light); color: var(--success); }
.rel-match.rel-match-bad { background: var(--danger-light); color: var(--danger); }
.rel-match.rel-match-na  { background: var(--bg-overlay); color: var(--text-muted); }

.inflight-draft-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

@media (max-width: 720px) {
    .relation-row { grid-template-columns: 52px 1fr auto; }
    .relation-row .rel-match { grid-column: 2 / -1; justify-self: start; }
}

/* Accessibility: honor the OS-level "reduce motion" preference. Collapses
   non-essential animations and transitions (refresh spinner, hover/expand
   transitions, smooth scrolling) to near-instant. Purely additive — it has
   no effect unless the user has explicitly opted into reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}