* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #0c0c0d;
    color: #f5f5f5;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 32px;
}

.header,
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
}

.eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    opacity: 0.5;
}

h1 {
    margin: 0;
    font-size: 42px;
}

.subtitle {
    opacity: 0.55;
    margin-top: 12px;
}

.runs {
    display: grid;
    gap: 14px;
}

.run-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 22px;

    background: #151516;
    border: 1px solid #262628;
    border-radius: 14px;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        transform 0.15s ease;
}

.run-card:hover {
    border-color: #555;
    transform: translateY(-1px);
}

.run-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.run-card h2 {
    margin: 15px 0 5px;
}

.run-card p {
    margin: 0;
    opacity: 0.6;
}

.run-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    font-size: 12px;
    opacity: 0.55;
}

.run-id,
.mono {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}

.run-id {
    font-size: 12px;
    opacity: 0.5;
}

.status {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    background: #252527;
}

.status-review {
    background: #17331e;
}

.status-failed,
.status-validation_failed,
.status-publish_failed {
    background: #431c1c;
}

.status-developing,
.status-validating,
.status-publishing {
    background: #292745;
}

.status-pending,
.status-preparing {
    background: #303030;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.panel {
    background: #151516;
    border: 1px solid #262628;
    border-radius: 14px;

    padding: 24px;
    margin-bottom: 18px;
}

.panel h3 {
    margin-top: 0;
}

dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
}

dt {
    opacity: 0.45;
}

dd {
    margin: 0;
}

.files {
    margin: 0;
    padding-left: 20px;
}

.primary-button {
    display: inline-block;

    padding: 11px 18px;

    border-radius: 8px;
    background: #f3f3f3;
    color: #111;

    text-decoration: none;
    font-weight: 600;
}

.back {
    display: inline-block;
    margin-bottom: 40px;

    text-decoration: none;
    opacity: 0.6;
}

.error-panel {
    border-color: #5e2727;
}

pre {
    white-space: pre-wrap;
}

.empty {
    padding: 40px;

    border: 1px dashed #333;
    border-radius: 14px;

    text-align: center;
    opacity: 0.5;
}

@media (max-width: 700px) {

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .run-card {
        flex-direction: column;
    }

    .run-meta {
        align-items: flex-start;
    }

}

.task-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-form label {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.65;
}

.task-form input,
.task-form textarea,
.task-form select {
    width: 100%;

    padding: 13px 14px;

    background: #0d0d0e;
    color: #f5f5f5;

    border: 1px solid #333;
    border-radius: 8px;

    font: inherit;
}

.task-form textarea {
    resize: vertical;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-row input {
    width: auto;
}

button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.run-button {
    width: 100%;

    padding: 18px;

    background: #f4f4f4;
    color: #111;

    border: 0;
    border-radius: 10px;

    font-weight: 800;
    letter-spacing: 0.04em;

    cursor: pointer;
}

.run-button:hover,
.primary-button:hover {
    opacity: 0.85;
}

/* =========================================================
   THOROUGH PROJECT UI
   ========================================================= */

:root {
    --bg: #0b0d10;
    --surface: #11151a;
    --surface-hover: #161b22;
    --border: #252b33;
    --text: #f3f4f6;
    --muted: #8b949e;
    --soft: #b7bec7;
}


body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.app-shell {
    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;
    padding-bottom: 100px;
}


.topbar {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid var(--border);
}


.brand {
    color: var(--text);
    text-decoration: none;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.16em;
}


.brand-subtitle {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 12px;
}


.system-status {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--muted);

    font-size: 12px;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #48c774;
}


.hero,
.project-hero {
    padding:
        72px
        0
        42px;
}


.eyebrow {
    margin:
        0
        0
        10px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.hero h1,
.project-hero h1 {
    margin: 0;

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );

    line-height: 1;
    letter-spacing: -0.04em;
}


.hero-description {
    max-width: 580px;

    margin:
        20px
        0
        0;

    color: var(--soft);

    font-size: 16px;
    line-height: 1.6;
}


.project-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 18px;
}


.project-card {
    display: block;

    padding: 28px;

    color: inherit;
    text-decoration: none;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 14px;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
}


.project-card:hover {
    transform:
        translateY(-2px);

    background:
        var(--surface-hover);

    border-color: #3a424d;
}


.project-card-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}


.project-label {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.13em;
}


.project-card h2 {
    margin:
        7px
        0
        0;

    font-size: 25px;

    letter-spacing: -0.02em;
}


.project-arrow {
    color: var(--muted);

    font-size: 24px;
}


.project-repository,
.project-repository-large {
    margin-top: 18px;

    color: var(--muted);

    font-family: monospace;
    font-size: 12px;

    overflow-wrap: anywhere;
}


.project-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    margin-top: 32px;
}


.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.stat-value {
    font-size: 20px;
    font-weight: 700;
}


.stat-label {
    color: var(--muted);

    font-size: 11px;
}


.project-card-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 28px;
    padding-top: 18px;

    border-top:
        1px solid var(--border);

    color: var(--muted);

    font-size: 12px;
}


.back-link {
    color: var(--muted);

    text-decoration: none;

    font-size: 13px;
}


.back-link:hover {
    color: var(--text);
}


.project-summary {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 70px;
}


.summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 22px;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 12px;
}


.summary-number {
    font-size: 24px;
    font-weight: 700;
}


.summary-label {
    color: var(--muted);

    font-size: 12px;
}


.content-section {
    margin-top: 58px;
}


.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 18px;
}


.section-header h2 {
    margin: 0;

    font-size: 24px;
}


.data-list {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background: var(--surface);
}


.data-row {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        0
        22px;

    border-bottom:
        1px solid var(--border);
}


.data-row:last-child {
    border-bottom: 0;
}


.data-primary {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
}


.task-id {
    min-width: 78px;

    color: var(--muted);

    font-family: monospace;
    font-size: 12px;
}


.run-icon {
    color: var(--muted);
}


.data-title {
    overflow: hidden;

    font-size: 14px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.data-secondary {
    margin-top: 5px;

    color: var(--muted);

    font-size: 11px;
}


.status-badge {
    flex-shrink: 0;

    padding:
        6px
        9px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    color: var(--soft);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.06em;
}


.status-done,
.status-merged,
.status-review {
    border-color: #315c43;
}


.status-developing,
.status-validating,
.status-publishing,
.status-preparing {
    border-color: #685a2c;
}


.status-failed,
.status-interrupted {
    border-color: #6c3535;
}


.empty-state,
.empty-row {
    color: var(--muted);
}


.empty-state {
    padding: 50px;

    text-align: center;

    border:
        1px dashed var(--border);

    border-radius: 14px;
}


.empty-row {
    padding: 30px;
}


@media (
    max-width: 700px
) {

    .app-shell {
        width:
            min(
                100% - 28px,
                1180px
            );
    }


    .project-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


    .project-summary {
        grid-template-columns: 1fr;
    }


    .data-row {
        align-items: flex-start;

        padding:
            18px;

        flex-direction: column;
    }
}

.data-row-link {
    color: inherit;
    text-decoration: none;
}

.data-row-link:hover {
    background: var(--surface-hover);
}

.detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px;

    gap: 40px;
}

.detail-main {
    min-width: 0;
}

.detail-sidebar {
    padding-top: 58px;
}

.detail-card {
    padding: 24px;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.postmortem-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color, #d9dee7);
}

.postmortem-item:last-child { border-bottom: 0; }

.epistemic {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: .25rem;
    background: #e8edf5;
    color: #344054;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.epistemic-fact { background: #dcfae6; color: #067647; }
.epistemic-inference { background: #fef0c7; color: #93370d; }
.epistemic-unknown { background: #eaecf0; color: #475467; }

.requirement-text,
.error-text {
    margin: 0;

    color: var(--soft);

    font: inherit;

    white-space: pre-wrap;
    word-break: break-word;

    line-height: 1.65;
}

.criteria-list {
    margin: 0;
    padding-left: 20px;

    color: var(--soft);

    line-height: 1.8;
}

.task-status-line {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 22px;
}

.muted-text {
    color: var(--muted);
}

.metadata-list {
    margin: 0;
}

.metadata-list > div {
    padding:
        14px
        0;

    border-bottom:
        1px solid var(--border);
}

.metadata-list > div:last-child {
    border-bottom: 0;
}

.metadata-list dt {
    color: var(--muted);

    font-size: 11px;
}

.metadata-list dd {
    margin:
        5px
        0
        0;

    overflow-wrap: anywhere;

    font-size: 13px;
}

.timeline {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.timeline-item {
    display: grid;

    grid-template-columns:
        12px
        1fr;

    gap: 14px;
}

.timeline-marker {
    width: 8px;
    height: 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: var(--soft);
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
}

.primary-link-button {
    display: block;

    margin-top: 24px;

    padding:
        11px
        14px;

    text-align: center;

    color: var(--text);
    text-decoration: none;

    background:
        var(--surface-hover);

    border:
        1px solid var(--border);

    border-radius: 8px;
}

.primary-link-button:hover {
    border-color: #4a5562;
}

.error-card {
    border-color: #6c3535;
}

.error-text {
    color: #e7b5b5;
}

.diagnostic-details summary {
    cursor: pointer;
    color: var(--soft);
    font-weight: 600;
}

.diagnostic-log {
    max-height: 520px;
    margin: 20px 0 0;
    overflow: auto;
    color: var(--muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.result-summary-failed {
    color: #e7b5b5;
}

@media (
    max-width: 850px
) {

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-sidebar {
        padding-top: 0;
    }
}
.run-task-form {
    margin-top: 24px;
}

.run-task-button {
    padding: 12px 18px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--text);
    color: var(--background);

    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;

    cursor: pointer;
}

.run-task-button:hover {
    opacity: 0.9;
}

.live-run-panel {
    margin-top: 34px;

    padding: 24px;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.live-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.live-events {
    margin-top: 20px;
}

.live-run-error {
    margin-top: 24px;

    padding: 16px;

    border:
        1px solid #6c3535;

    border-radius: 8px;

    color: #e7b5b5;

    white-space: pre-wrap;
}

/* =========================================================
   TASK EXECUTION CONTROLS
   ========================================================= */

.task-control-area {
    margin-bottom: 58px;
}

.task-actions {
    margin-bottom: 20px;
}

.run-task-form {
    margin: 0;
}

.run-task-button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 230px;
    min-height: 44px;

    padding: 0 20px;

    background: #f3f4f6;
    color: #0b0d10;

    border: 1px solid #f3f4f6;
    border-radius: 8px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.05em;

    cursor: pointer;

    transition:
        opacity 120ms ease,
        transform 120ms ease;
}

.run-task-button:hover {
    opacity: 0.9;

    transform:
        translateY(-1px);
}

.run-task-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;

    transform: none;
}


.live-run-panel {
    padding: 24px;

    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius: 12px;
}

.live-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.live-panel-title {
    margin: 0;

    font-size: 18px;
    font-weight: 650;
}

.live-run-empty {
    padding: 12px 0;

    color: var(--muted);

    font-size: 13px;
}

.live-run-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;
}

.live-events {
    margin-top: 16px;
}

.live-run-error {
    margin-top: 24px;

    padding: 16px;

    border:
        1px solid #6c3535;

    border-radius: 8px;

    color: #e7b5b5;

    white-space: pre-wrap;
}

.inline-link {
    color: inherit;

    text-decoration: underline;
    text-decoration-color: var(--border);

    text-underline-offset: 3px;
}

.result-text {
    margin: 0;

    color: var(--soft);

    line-height: 1.65;
}

.knowledge-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.knowledge-link {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.knowledge-link span {
    color: var(--muted);
    font-size: 12px;
}

.knowledge-review-form label,
.knowledge-review-form textarea {
    display: block;
    width: 100%;
}

.knowledge-review-form textarea {
    margin: 10px 0 16px;
    padding: 10px;
    color: var(--text);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.knowledge-review-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.knowledge-review-actions .secondary-button {
    margin-top: 0;
    background: transparent;
}

.knowledge-summary { margin: 20px 0; }
.knowledge-build-summary { margin-bottom: 18px; }
.knowledge-build-summary .status-badge { margin-left: 10px; }
.knowledge-filters { display: flex; gap: 14px; align-items: flex-end; margin: 18px 0; }
.knowledge-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.knowledge-filters select { padding: 9px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.project-unknown-list { margin-top: 18px; }

.status-approved { background: #17331e; }
.status-candidate { background: #292745; }
.status-rejected { background: #431c1c; }

.engineering-decision h3 {
    margin: 24px 0 8px;
    font-size: 14px;
}

.engineering-decision h3:first-child { margin-top: 0; }
.engineering-decision code { color: var(--muted); }

@media (max-width: 800px) {
    .knowledge-columns { grid-template-columns: 1fr; }
}

.secondary-button {
    display: inline-block;
    margin-top: 22px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.secondary-button:hover {
    color: var(--text);
    border-color: #4a535f;
}

.hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.form-context {
    margin-bottom: 22px;
    color: var(--soft);
}