/* Schedules and GitHub.
   Tokens only — no hex values, no px font sizes, no off-grid spacing (DESIGN-SYSTEM §2). */

/* ── Schedule builder ─────────────────────────────────────────────────────────────────────────── */

.qp-sched-builder {
    display: grid;
    gap: var(--qp-space-5);
}

/* The chosen frequency's own controls. A quiet sunken surface rather than a border, so the builder
   reads as one thing with a changing middle rather than three stacked boxes. */
.qp-sched-builder__body {
    display: grid;
    gap: var(--qp-space-4);
    padding: var(--qp-space-5);
    background: var(--qp-surface-sunken);
    border-radius: var(--qp-radius-lg);
}

.qp-sched-builder__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--qp-space-4);
}

.qp-sched-builder__row > * {
    min-width: 0;
}

.qp-sched-time {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
}

.qp-sched-times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qp-space-3);
    align-items: center;
}

/* Day chips — a keyboard-reachable toggle group. */
.qp-sched-days {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qp-space-2);
}

.qp-sched-day {
    min-width: 44px;
    padding: var(--qp-space-2) var(--qp-space-3);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-full);
    background: var(--qp-surface);
    color: var(--qp-text-muted);
    font-size: var(--qp-text-xs);
    font-weight: var(--qp-weight-medium);
    cursor: pointer;
    transition: background var(--qp-duration-fast) var(--qp-ease),
                color var(--qp-duration-fast) var(--qp-ease),
                border-color var(--qp-duration-fast) var(--qp-ease);
}

.qp-sched-day:hover:not(:disabled) {
    background: var(--qp-surface-hover);
    color: var(--qp-text);
}

.qp-sched-day[aria-pressed="true"] {
    background: var(--qp-accent-subtle);
    border-color: var(--qp-accent-border);
    color: var(--qp-accent-text);
}

.qp-sched-day:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── The live summary and preview ─────────────────────────────────────────────────────────────── */

.qp-sched-summary {
    display: grid;
    gap: var(--qp-space-3);
    padding: var(--qp-space-4) var(--qp-space-5);
    border-radius: var(--qp-radius-lg);
    background: var(--qp-accent-subtle);
    border: 1px solid var(--qp-accent-border);
}

.qp-sched-summary[data-invalid="true"] {
    background: var(--qp-fail-bg);
    border-color: var(--qp-fail-border);
}

.qp-sched-summary__headline {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    color: var(--qp-text-strong);
    letter-spacing: var(--qp-tracking-tight);
}

.qp-sched-summary[data-invalid="true"] .qp-sched-summary__headline {
    color: var(--qp-fail);
}

.qp-sched-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qp-space-2) var(--qp-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qp-sched-preview li {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    font-variant-numeric: tabular-nums;
}

.qp-sched-preview li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-accent);
    flex: none;
}

.qp-sched-cron {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-2xs);
    color: var(--qp-text-subtle);
    word-break: break-all;
}

/* ── Revision timeline ────────────────────────────────────────────────────────────────────────── */

.qp-sched-timeline {
    display: grid;
    gap: var(--qp-space-5);
    position: relative;
    padding-left: var(--qp-space-6);
}

/* The spine. Absolute so it does not add a border to every row. */
.qp-sched-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--qp-border);
}

.qp-sched-revision {
    position: relative;
    display: grid;
    gap: var(--qp-space-2);
}

.qp-sched-revision::before {
    content: "";
    position: absolute;
    left: calc(var(--qp-space-6) * -1 + 4px);
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-border-strong);
    box-shadow: 0 0 0 3px var(--qp-canvas);
}

.qp-sched-revision[data-active="true"]::before {
    background: var(--qp-accent);
}

.qp-sched-revision__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qp-space-2);
}

.qp-sched-revision__summary {
    font-size: var(--qp-text-sm);
    color: var(--qp-text);
}

.qp-sched-revision__meta {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-subtle);
}

/* ── Approval panel: previous vs proposed, side by side ───────────────────────────────────────── */

.qp-sched-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--qp-space-4);
    align-items: stretch;
}

@media (max-width: 900px) {
    .qp-sched-compare {
        grid-template-columns: 1fr;
    }

    .qp-sched-compare__arrow {
        justify-self: start;
        transform: rotate(90deg);
    }
}

.qp-sched-compare__side {
    display: grid;
    gap: var(--qp-space-3);
    align-content: start;
    padding: var(--qp-space-4);
    border-radius: var(--qp-radius-md);
    background: var(--qp-surface-sunken);
}

.qp-sched-compare__side[data-proposed="true"] {
    background: var(--qp-accent-subtle);
}

.qp-sched-compare__label {
    font-size: var(--qp-text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--qp-tracking-wide);
    color: var(--qp-text-subtle);
    font-weight: var(--qp-weight-semibold);
}

.qp-sched-compare__value {
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-medium);
    color: var(--qp-text-strong);
}

.qp-sched-compare__arrow {
    display: flex;
    align-items: center;
    color: var(--qp-text-faint);
}

/* ── Production facts (§101) ──────────────────────────────────────────────────────────────────── */

.qp-sched-prodfacts {
    display: grid;
    gap: var(--qp-space-3);
}

.qp-sched-fact {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-3);
    font-size: var(--qp-text-sm);
}

.qp-sched-fact__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--qp-radius-full);
    flex: none;
    margin-top: 1px;
}

.qp-sched-fact__glyph[data-state="ok"] {
    background: var(--qp-pass-bg);
    color: var(--qp-pass);
}

.qp-sched-fact__glyph[data-state="bad"] {
    background: var(--qp-fail-bg);
    color: var(--qp-fail);
}

.qp-sched-fact__glyph[data-state="unknown"] {
    background: var(--qp-surface-sunken);
    color: var(--qp-text-subtle);
}

.qp-sched-fact__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qp-sched-fact__detail {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

/* ── Denial banner ────────────────────────────────────────────────────────────────────────────── */

.qp-sched-denial {
    display: flex;
    gap: var(--qp-space-3);
    padding: var(--qp-space-4) var(--qp-space-5);
    border-radius: var(--qp-radius-lg);
    background: var(--qp-warn-bg);
    border: 1px solid var(--qp-warn-border);
    color: var(--qp-text);
}

.qp-sched-denial__icon {
    color: var(--qp-warn);
    flex: none;
}

.qp-sched-denial__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qp-sched-denial__title {
    font-weight: var(--qp-weight-semibold);
    font-size: var(--qp-text-sm);
}

.qp-sched-denial__when {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-subtle);
}

/* ── Suite seam panel ─────────────────────────────────────────────────────────────────────────── */

.qp-sched-minilist {
    display: grid;
    gap: var(--qp-space-1);
}

.qp-sched-minirow {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    width: 100%;
    padding: var(--qp-space-2) var(--qp-space-3);
    border: 0;
    border-radius: var(--qp-radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.qp-sched-minirow:hover {
    background: var(--qp-surface-hover);
}

.qp-sched-minirow__body {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.qp-sched-minirow__name {
    font-size: var(--qp-text-sm);
    font-weight: var(--qp-weight-medium);
}

.qp-sched-minirow__sub {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-subtle);
}

/*
 * The schedule list's first column. It is the minirow's stacking without the minirow's flex sizing:
 * inside a table cell "flex: 1; min-width: 0" lets the column shrink to nothing, and a list of
 * "Nightly…", "Produc…", "Authen…" is not a list of schedules. The floor is what makes the column
 * readable; the truncation inside it still protects the layout from a very long name.
 */
.qp-sched-namecell {
    display: grid;
    gap: 2px;
    min-width: 170px;
}

/*
 * Replaces the suite name on a row the RunAs check has flagged. It takes the sub-line's place rather than
 * adding a third, so a warned row is the same height as every other one and the table does not ripple.
 */
.qp-sched-warning {
    display: flex;
    align-items: center;
    gap: var(--qp-space-1);
    font-size: var(--qp-text-xs);
    color: var(--qp-warn);
    min-width: 0;
}

/* ── GitHub page ──────────────────────────────────────────────────────────────────────────────── */

.qp-gh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--qp-space-5);
}

@media (max-width: 720px) {
    .qp-gh-grid {
        grid-template-columns: 1fr;
    }
}

.qp-gh-card {
    display: grid;
    gap: var(--qp-space-4);
    align-content: start;
    padding: var(--qp-space-5);
}

.qp-gh-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-3);
}

.qp-gh-card__title {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.qp-gh-card__product {
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    color: var(--qp-text-strong);
}

.qp-gh-card__repo {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-gh-checks {
    display: grid;
    gap: var(--qp-space-2);
}

.qp-gh-check {
    display: flex;
    align-items: flex-start;
    gap: var(--qp-space-3);
    font-size: var(--qp-text-sm);
}

.qp-gh-check__name {
    font-weight: var(--qp-weight-medium);
    min-width: 128px;
    flex: none;
}

.qp-gh-check__detail {
    color: var(--qp-text-muted);
    font-size: var(--qp-text-xs);
    padding-top: 1px;
}

.qp-gh-dispatches {
    display: grid;
    gap: var(--qp-space-2);
}

.qp-gh-dispatch {
    display: flex;
    align-items: baseline;
    gap: var(--qp-space-3);
    font-size: var(--qp-text-xs);
}

.qp-gh-dispatch__when {
    color: var(--qp-text-subtle);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.qp-gh-install {
    display: grid;
    gap: var(--qp-space-3);
    font-size: var(--qp-text-sm);
    color: var(--qp-text-muted);
}

.qp-gh-install ol,
.qp-gh-install ul {
    margin: 0;
    padding-left: var(--qp-space-5);
    display: grid;
    gap: var(--qp-space-2);
}

.qp-gh-install code {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-2xs);
    background: var(--qp-surface-sunken);
    padding: 1px var(--qp-space-1);
    border-radius: var(--qp-radius-xs);
}

/* ── Scheduler settings panel ─────────────────────────────────────────────────────────────────── */

.qp-sched-settings {
    display: grid;
    gap: var(--qp-space-4);
    padding: var(--qp-space-4) var(--qp-space-5);
}

.qp-sched-settings[data-off="true"] {
    border: 1px solid var(--qp-warn-border);
    background: var(--qp-warn-bg);
}

.qp-sched-settings__head {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
}