/* Hand-ins on the student's pages: the Course overview's Hand-ins section and the Assignments page's groups, one row
   per assignment with its title, status, latest hand-in date and the link to the page where the student hands in,
   or, for an assignment in a locked scope, the reason it is locked. */

.hand-in-overview {
    margin-bottom: 2rem;
}

.hand-in-overview__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hand-in-overview__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.hand-in-overview__title {
    flex: 1 1 12rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hand-in-overview__row time,
.hand-in-overview__lock {
    color: var(--md-sys-color-on-surface-variant);
}

/* A hand-in's status, wherever it shows: the words say the state, the colour only reinforces them. */

.submission-status {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.submission-status--none {
    border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
}

.submission-status--awaiting-rating {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.submission-status--awaiting-review {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.submission-status--rated {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.submission-status--reviewed {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}

/* One hand-in per row, in the earlier hand-ins under the hand-in form and in the folder's history: when it was handed
   in, what was handed in, its feedback pill and the link to its detail page, led by course · assignment in the
   folder. */

.hand-in-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hand-in-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.hand-in-row__context {
    flex: 1 1 100%;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hand-in-row time {
    min-width: 9.5rem;
    color: var(--md-sys-color-on-surface-variant);
}

/* Folder material sits between the hand-in rows in the folder's history, so it takes the same spacing and divider. */
.participant-folder-history .folder-material {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.participant-folder-history > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hand-in-row__what {
    flex: 1 1 8rem;
    overflow-wrap: anywhere;
}

/* The assignment's instructions above the hand-in form: the Instructions heading with the toggle that shows or hides
   them beside it. They start collapsed once the student has handed in on the assignment. */

.assignment-instructions {
    margin-bottom: 1.5rem;
}

.assignment-instructions__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.assignment-instructions__header > h2,
.assignment-instructions__header > h3 {
    margin: 0;
}

.assignment-instructions__toggle {
    flex-shrink: 0;
}