/*
 * Submit's own overrides on top of the shared Cuttle theme (styles.css).
 * Keep this file tiny: anything that belongs to the whole fleet goes into
 * the theme instead, and anything a single screen needs goes into that
 * screen's own view.
 */

/*
 * The card-header chevron that folds a statement away. Bootstrap puts
 * .collapsed on the button while the panel is shut, so the glyph points the
 * way it is about to move rather than the way it last went.
 */
.task-statement-toggle .feather {
    transition: transform .15s ease-in-out;
}
.task-statement-toggle.collapsed .feather {
    transform: rotate(180deg);
}

/*
 * Tables read at 13px rather than the 16px they inherit from the body. A
 * data table is scanned rather than read, and at body size the finder's rows
 * wrap onto two and three lines each. The cell is the unit, so anything
 * sized in em inside one comes down with it: a badge is 0.75em, so the
 * status and verdict chips stay in proportion.
 *
 * .table.small is pinned to the SAME size deliberately. The packaged history
 * and audit tables carry Bootstrap's .small (0.875em), which would otherwise
 * compound on top of this and land at about 11px.
 */
.table,
.table.small {
    font-size: 0.8125rem;
}

/*
 * And tighter rows to go with the smaller text. The theme pads every cell
 * 0.75rem and .table-sm brings that to 0.25rem, but at 13px the line box
 * (1.5) and the badges still set a taller row than a scanned list
 * wants. The badge keeps its horizontal padding, so a chip still reads as a
 * chip; only its height comes in.
 */
.table > :not(caption) > * > *,
.datatable-table > :not(caption) > * > * {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.table {
    line-height: 1.3;
}
.table .badge {
    --bs-badge-padding-y: 0.2em;
}

/*
 * Sidebar pills: how much is inside a screen (classes/Menu.php passes
 * `badge`; the sidenav skips a falsy one, so an empty screen shows none).
 * Neutral rather than the theme's red, which would shout on every line, and
 * pushed right by margin-left:auto, which works because .nav-link is a flex
 * row. !important because the sidenav puts .bg-red, .text-white and .ms-1 on
 * the pill, and a Bootstrap utility is itself !important.
 */
.sidenav .sidenav-menu .nav .nav-link .badge {
    margin-left: auto !important;
    flex-shrink: 0;
    background-color: #69707a !important;
    color: #fff !important;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25em 0.5em;
    border-radius: 10rem;
    min-width: 1.5em;
    text-align: center;
}
.sidenav .sidenav-menu .nav .nav-link.active .badge {
    background-color: var(--bs-primary) !important;
}

/*
 * A test set tinted by the share of its students who solved it in full, red
 * at none of them to green at all, in tenths: .solved-0 to .solved-9. The
 * task overview's test set graph and the Analytics table both draw with it.
 * --solved-fill is the ground, --solved-ink the outline and anything drawn
 * on the ground, --solved-text the words.
 */
.solved-0 { --hue: 0; }
.solved-1 { --hue: 13; }
.solved-2 { --hue: 27; }
.solved-3 { --hue: 40; }
.solved-4 { --hue: 53; }
.solved-5 { --hue: 67; }
.solved-6 { --hue: 80; }
.solved-7 { --hue: 93; }
.solved-8 { --hue: 107; }
.solved-9 { --hue: 120; }
[class*="solved-"] {
    --solved-fill: hsl(var(--hue), 75%, 88%);
    --solved-ink: hsl(var(--hue), 55%, 40%);
    --solved-text: hsl(var(--hue), 60%, 20%);
}
html[data-theme="dark"] [class*="solved-"] {
    --solved-fill: hsl(var(--hue), 35%, 24%);
    --solved-ink: hsl(var(--hue), 45%, 52%);
    --solved-text: hsl(var(--hue), 30%, 90%);
}

/*
 * An icon-only button in the extra small and extra large sizes. The theme
 * sets .btn-icon's padding to 0 and then defines .btn-xs and .btn-xl after
 * it, so their padding wins: a .btn-xs circle is 19px wide with 16px of
 * padding and overflow hidden, which clips the glyph away and leaves an
 * invisible button (the (?) behind a compiler or a setting). Two classes
 * outrank one, whichever comes first.
 */
.btn-icon.btn-xs,
.btn-icon.btn-xl {
    padding: 0;
}