:root {
    --bg: #121212;
    --panel: #1a1a1a;
    --ink: #e6e6e6;
    --muted: 0.5;
    --accent: #fff;
    --line: #2c2c2c;
    --input: #0e0e0e;
    --in: #128812;
    --out: #aa1212;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 10pt/1.2 Segoe UI, Roboto, Arial, sans-serif;
}

/* Top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

    .topbar #header {
        letter-spacing: 1pt;
        text-transform: uppercase;
        font-weight: 800;
        padding: 5px 5px 10px 8px;
    }

    .topbar #mainnav {
        display: flex;
        gap: 3px;
        flex-wrap: wrap
    }

#mainnav a {
    text-decoration: none;
    color: var(--ink);
    padding: 4px 10px 7px 9px;
    border-radius: 3px;
    border: 1px solid transparent;
}

    #mainnav a:hover {
        background: var(--bg);
        border-color: var(--accent);
        cursor: pointer;
    }

    #mainnav a.active {
        background: var(--bg);
        border-color: var(--line);
        color: var(--accent);
    }

/* Page container */
.muted {
    opacity: var(--muted);
}

.placeholder {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px dashed var(--line);
    border-radius: 3px;
    background: var(--input);
}

@media (max-width:720px) {
    .page {
        margin: 1rem;
        padding: 1rem
    }
}
/* Lists & blocks used by Search/Analysis */
h4 + .list {
    margin-top: 5px;
}

.row:empty {
    display: none !important;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
    flex-basis: 100%;
}

    .list > div {
        padding: 4px 4px 6px 5px;
        border-radius: 3px;
        background: var(--input);
    }

    .list .empty {
        padding: 4px 4px 9px 9px;
    }

    .list .muted {
        padding: 2px 3px 3px;
    }

    .list .row {
        display: flex;
        padding: 3px 0 5px 7px;
    }

        .list .row.value {
            border-left: solid 3px #333;
            margin: 5px;
        }

        .list .row:last-child {
            margin-bottom: 5px;
        }

        .list .row > :first-child {
            flex-basis: 75px;
            flex-shrink: 0;
            width: 75px;
        }

        .list .row > :last-child {
            box-sizing: border-box;
        }

            .list .row > :last-child > div {
                display: flex;
            }

                .list .row > :last-child > div :first-child {
                    opacity: .5;
                    flex-basis: 22px;
                    flex-shrink: 0;
                }


.block {
    display: grid;
    grid-template-columns: 20px 1fr;
}

    .block .left {
        display: flex;
        align-items: flex-start;
    }

        .block .left input {
            margin: 0;
        }

    .block .right {
        display: flex;
        flex-direction: column;
    }

    .block .title {
        font-weight: 600;
    }

    .block .authors, .block .journal, .block .abstract {
        opacity: var(--muted);
    }

.flags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: .5rem;
}

.positive, .negative {
    padding: .5rem;
    border-radius: .5rem;
    background: #0f1115;
    border: 1px dashed var(--line);
}

    .positive div {
        color: #9ee7a2;
    }
    /* green-ish */
    .negative div {
        color: #f0a0a0;
    }
/* red-ish */

/* Section cards already exist via .page/.placeholder from earlier */
.query, .abstracts, .instructions, .analysis {
    margin-top: 1rem;
}

    .query h3, .abstracts h3, .instructions h3, .analysis h3 {
        margin: .25rem 0 .5rem 0;
    }

textarea {
    width: 100%;
    resize: vertical;
    background: var(--input);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .5rem;
}

.hidden {
    display: none !important;
}

/* Collapse non-title fields when unchecked */
.block.collapsed .right > :not(.title) {
    display: none;
}

.block.collapsed {
    opacity: .9;
}

button[aria-busy="true"] {
    opacity: .7;
    cursor: progress;
}

.progressbar strong {
    margin-right: .5rem;
}

/* /client/styles.css */
.block .right .flags {
    margin-top: .25rem;
}

    .block .right .flags .positive > div {
        padding: 2px 0;
    }

/* ---------- Search page (grid cards) ---------- */
.page-search .block {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 10px;
}

.page-search .left {
    display: flex;
    align-items: flex-start;
}

.page-search .right {
    min-width: 0;
}

.page-search .title {
    font-weight: 600;
    margin-bottom: 4px;
}

/* collapse behavior only on Search */
.page-search .block.collapsed .right > :not(.title) {
    display: none;
}

/* ---------- Review page (stacked cards) ---------- */
.page-review .block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
}

.page-review .title {
    font-weight: 600;
    margin-bottom: 4px;
}

.page-review .flag {
    padding: 2px 0;
    font-weight: 500;
}

.page-review .flag-green {
    color: #047857;
}
/* emerald-700-ish */
.page-review .flag-red {
    color: #b91c1c;
}
/* red-700-ish */
.page-review .flag-blue {
    color: #1d4ed8;
}

/* Optional small helpers used across pages */
.hidden {
    display: none !important;
}

.muted {
    color: #6b7280;
    font-size: 0.9em;
}

.page-review .flag {
    padding: 2px 0;
}

.page-review .flag-neg {
    opacity: .85;
}





/* General UI */
.in {
    background: var(--in) !important;
}

.out {
    background: var(--out) !important;
}

.state {
    border-radius: 3px;
    flex-grow: 1;
    margin-top: 5px;
    padding: 5px;
    user-select: none;
}

    .state > h4 {
        background: rgba(0,0,0,.5);
        margin-bottom: 2px;
        padding: 3px 0 5px 4px;
    }

    .state > div {
        padding: 0 0 0 4px;
    }

        .state > div:empty {
            display: none;
        }

    .state .input {
        padding: 3px 0 2px 0;
    }

        .state .input > * {
            width: 100%;
            max-width: none !important;
        }

    .state .action {
        display: flex;
        padding: 5px 0 0 0;
    }

        .state .action > * {
            flex-grow: 1;
        }

.page {
    margin: 20px;
    padding: 10px 15px 15px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
}

    .page h1 {
        font-size: 1.4rem
    }

    .page p {
        opacity: var(--muted);
    }

button {
    background: var(--bg);
    color: var(--ink);
    border: solid 1px var(--line);
    border-radius: 3px;
    padding: 5px 10px 6px 9px;
    cursor: pointer;
    min-width: 90px;
}

    button:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

h1, h2, h3, h4, p {
    margin: 0;
}

h4 {
    padding: 3px 0 45px 3px;
}

.group:not(:first-child) {
    margin: 10px 0 0 0;
}

.group + .group {
    border-top: 1px solid var(--line);
    padding: 6px 0 0 0;
}

.group .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .group .row.batch {
        padding: 0 3px;
    }

    .group .row .batch_id {
        flex-basis: 280px;
    }

    .group .row .batch_date {
        flex-basis: 175px;
    }

    .group .row .batch_status {
        flex-basis: 75px;
    }

    .group .row > button {
        margin-right: 3px;
    }

    .group .row:not(:first-child) {
        margin-top: 5px;
    }

    .group .row input[type="text"],
    .group .row select {
        background: var(--input);
        color: var(--ink);
        border: none;
        border-radius: 3px;
        padding: 6px 10px 7px 9px;
        flex-grow: 1;
        max-width: 250px;
    }


.guarded:first-child {
    display: none;
}

.guarding + .guarded {
    display: none;
}