:root {
    color-scheme: light;
    --color-bg: #f5f7fb;
    --color-fg: #12141a;
    --color-link: #3358b8;
    --color-logo-bg: #ffffff;
    --color-muted-strong: #5c6473;
    --color-muted: #6c7483;
    --color-mode-border: #b78f2a;
    --color-mode-bg: #fff3d6;
    --color-mode-fg: #5d4300;
    --color-input-border: #c8cfdb;
    --color-input-bg: #ffffff;
    --color-input-fg: #12141a;
    --color-table-border: #d7dce6;
    --color-table-head: #3d4657;
    --color-row-sentinel-bg: #eef3ff;
    --color-row-flash: rgba(246, 196, 89, 0.35);
    --color-disabled: #8a94a8;
    --color-chip-border: #b7bfce;
    --color-chip-pr-border: #4f74bd;
    --color-chip-status-border: #5a5ab5;
    --color-chip-conclusion-border: #5b8b5b;
    --color-chip-green-bg: #d6f0de;
    --color-chip-green-border: #4e9964;
    --color-chip-green-fg: #114522;
    --color-chip-green-bg-muted: #e7f0e9;
    --color-chip-green-border-muted: #a7c9b0;
    --color-chip-green-fg-muted: #2b5834;
    --color-chip-red-bg: #f8d9d9;
    --color-chip-red-border: #c35b5b;
    --color-chip-red-fg: #5d1616;
    --color-chip-red-bg-muted: #f6eded;
    --color-chip-red-border-muted: #d6acac;
    --color-chip-red-fg-muted: #6c2f2f;
    --color-chip-amber-bg: #fff1d4;
    --color-chip-amber-border: #b57f22;
    --color-chip-amber-fg: #5f4100;
    --color-error: #b93535;
    --color-code-bg: #f6f8fb;
    --color-code-border: #cfd5df;
    --color-rendered-table-border: #cfd5df;
    --color-rendered-table-head: #4a5568;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --color-bg: #111;
        --color-fg: #eee;
        --color-link: #8ea0ff;
        --color-logo-bg: #eee;
        --color-muted-strong: #b8b8b8;
        --color-muted: #9a9a9a;
        --color-mode-border: #7f6b2f;
        --color-mode-bg: #3b2e11;
        --color-mode-fg: #f5dfa2;
        --color-input-border: #444;
        --color-input-bg: #1c1c1c;
        --color-input-fg: #eee;
        --color-table-border: #2f2f2f;
        --color-table-head: #bbb;
        --color-row-sentinel-bg: #1d2438;
        --color-row-flash: rgba(246, 196, 89, 0.45);
        --color-disabled: #666;
        --color-chip-border: #454545;
        --color-chip-pr-border: #5675b8;
        --color-chip-status-border: #6d6dbd;
        --color-chip-conclusion-border: #6d966d;
        --color-chip-green-bg: #285b38;
        --color-chip-green-border: #3f8a56;
        --color-chip-green-fg: #ecffef;
        --color-chip-green-bg-muted: #335743;
        --color-chip-green-border-muted: #4f8262;
        --color-chip-green-fg-muted: #d8f0dd;
        --color-chip-red-bg: #6f2525;
        --color-chip-red-border: #a94444;
        --color-chip-red-fg: #ffecec;
        --color-chip-red-bg-muted: #5b3333;
        --color-chip-red-border-muted: #8b5555;
        --color-chip-red-fg-muted: #f3d9d9;
        --color-chip-amber-bg: #5a4518;
        --color-chip-amber-border: #9d7a25;
        --color-chip-amber-fg: #ffe9b5;
        --color-error: #d38787;
        --color-code-bg: #191919;
        --color-code-border: #333;
        --color-rendered-table-border: #333;
        --color-rendered-table-head: #c0c0c0;
    }
}

body,
html {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: sans-serif;
}

#main {
    margin: 0 auto;
    margin-top: 100px;

    width: 600px;
    max-width: 100%;

    text-align: center;

    padding: 0 25px;
    box-sizing: border-box;
}

#logo {
    display: inline-block;
    border-radius: 50%;
    background: var(--color-logo-bg);
    /* width: 75%; */
    margin: 0 auto;
    /* background-size: cover;
    margin: 10px; */
    overflow: hidden;
    box-sizing: border-box;
}


/* #logo::after {
    display: block;
    padding-bottom: 100%;
    content: "";
} */

#logo img {
    /* padding: 10px; */
    /* margin: 0;
    display: block;
    opacity: 0.5; */
    /* display: inlineblock; */
    /* width: 75%; */
    width: 128px;
    margin: 40px;
}

#content {
    text-align: left;
}

h1 {
    font-size: 3rem;
}

a {
    color: var(--color-link);
}

.state-dashboard {
    margin: 24px;
}

.state-header h1 {
    margin-bottom: 0;
}

.state-header p {
    margin-top: 8px;
    color: var(--color-muted-strong);
}

.mode-indicator {
    border: 1px solid var(--color-mode-border);
    background: var(--color-mode-bg);
    color: var(--color-mode-fg);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.state-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.state-filters input,
.state-filters select,
.state-filters button {
    border: 1px solid var(--color-input-border);
    background: var(--color-input-bg);
    color: var(--color-input-fg);
    border-radius: 4px;
    padding: 6px 8px;
}

.state-filters input[type="checkbox"] {
    padding: 0;
    width: auto;
    height: auto;
}

.state-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.state-table th,
.state-table td {
    border-bottom: 1px solid var(--color-table-border);
    padding: 10px 8px;
    vertical-align: top;
    text-align: left;
}

.state-table th {
    color: var(--color-table-head);
    font-weight: 600;
}

.state-table tr.event-row-sentinel td {
    background: var(--color-row-sentinel-bg);
}

.state-pr-title-link {
    color: var(--color-fg);
    text-decoration: underline;
}

.state-commit-sha {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

@keyframes row-flash-once {
    0% {
        background-color: var(--color-row-flash);
    }

    100% {
        background-color: transparent;
    }
}

.state-table tr.row-flash-once td {
    animation: row-flash-once 1.2s ease-out 1;
}

@keyframes event-row-fade-in-once {
    0% {
        opacity: 0;
        background-color: var(--color-row-flash);
    }

    100% {
        opacity: 1;
        background-color: transparent;
    }
}

.state-table tr.event-row-fade-in td {
    animation: event-row-fade-in-once 0.8s ease-out 1;
}

.state-meta {
    display: flex;
    gap: 16px;
    color: var(--color-muted-strong);
    font-size: 0.9rem;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.state-pagination {
    margin-top: 14px;
    display: flex;
    gap: 12px;
}

.state-pagination .disabled {
    color: var(--color-disabled);
}

.chip {
    display: inline-block;
    border: 1px solid var(--color-chip-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.78rem;
    margin-right: 4px;
    margin-bottom: 4px;
}

.chip-pr {
    border-color: var(--color-chip-pr-border);
}

.chip-status {
    border-color: var(--color-chip-status-border);
}

.chip-conclusion {
    border-color: var(--color-chip-conclusion-border);
}

.chip-bg-green {
    background: var(--color-chip-green-bg);
    border-color: var(--color-chip-green-border);
    color: var(--color-chip-green-fg);
}

.chip-bg-red {
    background: var(--color-chip-red-bg);
    border-color: var(--color-chip-red-border);
    color: var(--color-chip-red-fg);
}

.chip-draft-muted.chip-bg-green {
    background: var(--color-chip-green-bg-muted);
    border-color: var(--color-chip-green-border-muted);
    color: var(--color-chip-green-fg-muted);
}

.chip-draft-muted.chip-bg-red {
    background: var(--color-chip-red-bg-muted);
    border-color: var(--color-chip-red-border-muted);
    color: var(--color-chip-red-fg-muted);
}

.chip-bg-amber {
    background: var(--color-chip-amber-bg);
    border-color: var(--color-chip-amber-border);
    color: var(--color-chip-amber-fg);
}

.muted {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.error-text {
    color: var(--color-error);
    max-width: 360px;
    overflow-wrap: anywhere;
    margin-top: 6px;
}

.output-block {
    margin-top: 8px;
}

.output-block h4 {
    margin: 8px 0 4px 0;
}

.output-block pre {
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: 6px;
    padding: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 560px;
}

.pr-detail {
    max-width: 1400px;
}

.pr-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.detail-section {
    margin-top: 24px;
}

.detail-section pre {
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: 6px;
    padding: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rendered-markdown {
    margin-top: 8px;
}

.rendered-markdown-inline code {
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.9em;
}

.rendered-markdown h2,
.rendered-markdown h3,
.rendered-markdown h4 {
    margin: 10px 0 6px 0;
}

.rendered-markdown p {
    margin: 8px 0;
}

.rendered-markdown ul {
    margin: 8px 0;
    padding-left: 20px;
}

.rendered-check-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
    margin: 10px 0;
}

.rendered-check-table th,
.rendered-check-table td {
    border: 1px solid var(--color-rendered-table-border);
    padding: 6px 8px;
    text-align: left;
}

.rendered-check-table th {
    color: var(--color-rendered-table-head);
}

.check-summary-table {
    max-width: 980px;
}

.check-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-chip-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.8rem;
}

.check-status-success {
    background: var(--color-chip-green-bg);
    border-color: var(--color-chip-green-border);
    color: var(--color-chip-green-fg);
}

.check-status-failure,
.check-status-missing {
    background: var(--color-chip-red-bg);
    border-color: var(--color-chip-red-border);
    color: var(--color-chip-red-fg);
}

.check-status-running {
    background: var(--color-chip-amber-bg);
    border-color: var(--color-chip-amber-border);
    color: var(--color-chip-amber-fg);
}

.check-status-neutral {
    background: transparent;
}

.check-status-symbol {
    font-weight: 700;
}

.check-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: check-spin 0.9s linear infinite;
}

@keyframes check-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.detail-collapsible {
    border: 1px solid var(--color-table-border);
    border-radius: 6px;
    padding: 10px 12px;
}

.detail-collapsible summary {
    cursor: pointer;
    font-weight: 600;
}

.detail-collapsible-body {
    margin-top: 10px;
}