/* Grid (not flex) on purpose: the "cards" row needs to size itself to the
   tallest of the three panels' card stacks (Project Relation has the round
   stack plus an upload box, Student Progress the stack, Project Evaluation
   a single card), so the shorter panels' cards can center within that
   shared row height and all three Continue buttons land on the same row
   below it — without stretching the whole layout to fill the viewport
   (which is what a flex `min-height: 100vh` + `flex: 1` approach does).

   Five columns: panel, divider, panel, divider, panel. */
.analysis-landing {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    /* Row 5 is an invisible filler: nothing is placed in it except the
       divider (below), so it absorbs the leftover viewport height without
       pushing rows 1-4's content apart from their natural, compact sizes. */
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 32px;
    padding: 48px 32px;
    min-height: calc(100vh - 64px);
}

.analysis-panel {
    display: contents;
}

.analysis-panel--left > * { grid-column: 1; }
.analysis-panel--middle > * { grid-column: 3; }
.analysis-panel--right > * { grid-column: 5; }

.analysis-panel > .analysis-panel-title { grid-row: 1; }
.analysis-panel > .analysis-panel-description { grid-row: 2; }
.analysis-panel > .analysis-file-cards,
.analysis-panel > .analysis-sp-body { grid-row: 3; }
.analysis-panel > .analysis-continue-btn { grid-row: 4; }

.analysis-panel-title,
.analysis-panel-description,
.analysis-file-cards,
.analysis-sp-body,
.analysis-continue-btn {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.analysis-divider {
    grid-column: 2;
    grid-row: 1 / 6;
    width: 1px;
    background-color: var(--color-border);
}

.analysis-divider--second {
    grid-column: 4;
}

.analysis-panel-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.analysis-panel-description {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 auto 32px;
}

.analysis-file-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.analysis-file-card {
    text-align: left;
    padding: 16px 20px;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(var(--color-shadow-rgb), 0.06);
}

.analysis-file-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

/* ── Project Relation's upload ────────────────────────────────────────
   Sits under the round dropdowns inside the same .analysis-sp-body stack,
   so it shares that column's width and the panel's single grid row. The
   drop zone itself reuses .upload-box/.gc-upload rather than restyling
   one, so all three upload targets in the app look alike. */
.analysis-pr-upload {
    text-align: left;
    padding: 16px 20px;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(var(--color-shadow-rgb), 0.06);
}

.analysis-pr-upload .gc-grade-list-status {
    text-align: left;
}

/* ── Student Progress panel controls ──────────────────────────────────
   The round-count stepper and the "Same project" checkbox sit above the
   dropdown stack; together with it they occupy the same single grid row
   the Project Evaluation panel's lone card does. */
.analysis-sp-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analysis-sp-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-main);
}

.analysis-file-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-file-count-label {
    font-weight: 600;
}

.analysis-file-count-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-bg-surface);
    color: var(--color-text-main);
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.analysis-file-count-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.analysis-file-count-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.analysis-file-count-value {
    min-width: 16px;
    text-align: center;
    font-weight: 700;
}

.analysis-same-project {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-continue-btn {
    margin-top: 40px;
    padding: 12px 40px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    cursor: not-allowed;
    background-color: rgba(var(--color-shadow-rgb), 0.12);
    color: var(--color-text-muted);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.analysis-continue-btn.active {
    cursor: pointer;
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: #fff;
}

.analysis-continue-btn.active:hover {
    background-color: #15803d;
    border-color: #15803d;
}

/* ── Portrait layout ───────────────────────────────────────────────────
   When the viewport is taller than it is wide, drop the two-column grid
   for a single stacked column: Project Evaluation on top (unchanged
   internally), a horizontal divider, then Student Progress below it —
   its two dropdowns stay stacked, same as the desktop layout's default.
   Switching `.analysis-landing`/`.analysis-panel` out of grid/
   `display: contents` makes the desktop rules' `grid-column`/`grid-row`
   placements inert automatically, so nothing needs to be explicitly unset
   here. */
@media (orientation: portrait) {
    .analysis-landing {
        display: flex;
        flex-direction: column;
        min-height: auto;
        gap: 32px;
    }

    .analysis-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .analysis-divider {
        width: 100%;
        height: 1px;
    }
}
/* Hidden rather than merely off while Project Relation holds one file:
   with nothing to compare against, "are these the same project" has no
   answer to give. */
.analysis-same-project--hidden {
    display: none;
}