:root {
    --beige: #f2e9e1;
    --dark: #393552;
    --gold: #f6c177;
    --green: #637b5b;
    --lime: #a8c795;
    --orange: #d7827e;
    --purple: #907aa9;
    --red: #b4637a;
    --teal: #286983;

    /* One set of rank colours for the leaderboard badge and the podium block, which are separate
       components and so cannot share a rule. */
    --rank-1: var(--gold);
    --rank-2: color-mix(in srgb, var(--purple) 35%, #fff);
    --rank-3: color-mix(in srgb, var(--orange) 55%, #fff);

    /* Dot-plot mark, scaled to the panel so columns cannot crowd closer than the dot itself. */
    --lr-dot: clamp(4px, 1.6vw, 9px);

    --padding-box: .5rem 1rem;
    --border-radius: 2px;
    --underline-offest: 4px;

    --space-mono: "Space Mono", mono;
    --inter: "Inter", sans-serif;
    --ekwarg: "Ekwarg Italic", mono;
    --ekwarg-regular: "Ekwarg Regular", mono;

    /*Background gradient*/
    --g4-1-x-position: 87.23379629629622%;
    --g4-1-y-position: 83.08008213552361%;
    --g4-2-x-position: 18.900462962962923%;
    --g4-2-y-position: 78.15195071868584%;
    --g4-3-x-position: 88.62268518518512%;
    --g4-3-y-position: 15.071868583162217%;
    --g4-4-x-position: 11.712962962962967%;
    --g4-4-y-position: 16.550308008213555%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Emphasised noun ("link" / "code") inside a copy snackbar. Global, not scoped, because the snackbar renders outside component CSS isolation. */
.copyEmphasis {
    font-family: var(--ekwarg);
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);
}

/* Snackbars must sit above everything, including the feedback overlay (z-index 10000) and the share modal (10050). MudBlazor positions the layer on #mud-snackbar-container via --mud-zindex-snackbar. */
:root {
    --mud-zindex-snackbar: 11000;
}

#mud-snackbar-container {
    z-index: 11000 !important;
}

html {
    font-family: var(--inter);
    color: var(--dark);
}

body {
    width: 100vw;
    min-height: 100vh;
    /* The toolbox drawer parks just off the right edge when closed; clip it so it never adds a horizontal scrollbar. */
    overflow-x: hidden;

    /*Background gradient. Pinned to the viewport (fixed, no-repeat) so it never tiles when a page scrolls taller than the viewport.*/
    background: radial-gradient(100% 100% at var(--g4-1-x-position) var(--g4-1-y-position), var(--purple) -100%, transparent),
    radial-gradient(100% 100% at var(--g4-2-x-position) var(--g4-2-y-position), var(--teal) -100%, transparent),
    radial-gradient(100% 100% at var(--g4-3-x-position) var(--g4-3-y-position), var(--gold) -100%, transparent),
    radial-gradient(100% 100% at var(--g4-4-x-position) var(--g4-4-y-position), var(--red) -100%, transparent), var(--beige);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    /* Off: repainting a full-viewport four-layer gradient forever costs every student battery. */
    /* animation-name: g-4; animation-iteration-count: infinite; animation-duration: 15s; */
    transition-timing-function: ease-in-out;
}


/* ########################## First body child ########################## */
#app {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 5rem calc(100% - 5rem);
    position: relative;
    color: var(--dark);
    font-family: var(--inter);

}

/* ########################## Pages & Layout ########################## */
main {
    display: grid;
    grid-row: 2;
    width: 100vw;
}

/* ########################## Links ########################## */
.link {
    background-color: transparent;
    border: none;
    color: var(--dark);
    font-family: var(--inter);
    font-weight: bold;
    font-size: 1rem;
    text-decoration: underline;

    &:hover {
        cursor: pointer;
        text-decoration: none;
    }

    &:visited {
        color: var(--dark);
    }
}

/* ########################## Forms ########################## */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.formField {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* The id list predates the class. New fields use .textField: a rule that names ids one by one
   silently misses whatever is added next, which is how the sign up form grew two bare boxes. */
#inputText, #email, #password, #confirmPassword, .textField {
    padding: var(--padding-box);
    border-radius: var(--border-radius);
    width: 14rem;
    outline: none;
    border: 2px solid var(--dark);
    background-color: var(--beige);
    color: var(--dark);
    font-family: var(--ekwarg);
    font-style: italic;

    &:focus {
        border: 2px solid var(--red)
    }

    &:-webkit-autofill {
        background-color: var(--beige);
        color: var(--dark);
        font-family: Ekwarg;
        font-style: italic;
    }
}

label {
    font-weight: bold;
}

.submitBtn {
    width: 14rem;
    padding: var(--padding-box);
    /* Inset shadow rather than a real border: no anti-alias seam between fill and edge on hover. */
    box-shadow: inset 0 0 0 2px var(--dark);
    cursor: pointer;
    font-family: var(--inter);
    font-size: 1rem;
    border-radius: var(--border-radius);
    font-weight: bold;
    display: inline-block;
    text-align: start;
    transition: all 1s ease-in-out;
    background: linear-gradient(to left, var(--beige) 50%, var(--dark) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    position: relative;
    /* Own stacking context so the z-index:-1 ::after backdrop always renders above whatever is
       behind the button. Without this it only showed when opacity (disabled) or transform (hover)
       happened to create a context, and vanished at rest inside an opaque container. */
    isolation: isolate;
    color: var(--dark);

    &:hover {
        /*background-color: var(--dark);*/
        background-position: left bottom;

        color: var(--beige);

        a {
            color: var(--beige)
        }
    }

    &::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Adjust offset from the bottom */
        right: -5px; /* Adjust offset from the right */
        width: 100%;
        height: 100%;
        border-bottom: 3px solid var(--dark); 
        border-right: 3px solid var(--dark); 
        border-radius: var(--border-radius);
        z-index: -1; 
    }
}

/* ########## SESSION HEADER CONTROLS (stop / leave) ########## */
.stopSessionBtn,
.leaveSessionBtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    font-family: var(--inter);
    font-size: .95rem;
    font-weight: bold;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.stopSessionBtn {
    color: var(--beige);
    background-color: var(--red);
}

.stopSessionBtn:hover {
    background-color: var(--dark);
}

.leaveSessionBtn {
    color: var(--dark);
    transition: all 1s ease-in-out;
    background: linear-gradient(to left, transparent 50%, var(--red) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}

.leaveSessionBtn:hover {
    background-position: left bottom;
    color: var(--beige);
}

/* Neo-brutalist bar wrapping the session title and its controls (teacher + student). */
.actionBar {
    padding: .45rem .7rem;
    align-items: center;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0 var(--dark);
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    justify-self: start;
}

/* Cap the icon buttons to the text-button height so both action bars end up the same height. */
.actionBar .mud-icon-button {
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    padding: 0;
}

.actionBarSep {
    flex: 0 0 auto;
    align-self: center;
    width: 2px;
    height: 20px;
    margin: 0 .1rem;
    background-color: var(--dark);
    opacity: .25;
}

/* ##########################Background gradient animation ########################## */
@property --g4-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 87.23379629629622%;
}

@property --g4-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 83.08008213552361%;
}

@property --g4-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 18.900462962962923%;
}

@property --g4-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 78.15195071868584%;
}

@property --g4-3-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 88.62268518518512%;
}

@property --g4-3-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 15.071868583162217%;
}

@property --g4-4-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 11.712962962962967%;
}

@property --g4-4-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 16.550308008213555%;
}

@keyframes g-4 {
    25% {
        --g4-1-x-position: 88.11342592592592%;
        --g4-1-y-position: 17.74127310061603%;
        --g4-2-x-position: 86.99074074074056%;
        --g4-2-y-position: 80.29774127310063%;
        --g4-3-x-position: 11.157407407407389%;
        --g4-3-y-position: 18.80903490759754%;
        --g4-4-x-position: 15.543981481481403%;
        --g4-4-y-position: 78.31622176591377%;
    }
    50% {
        --g4-1-x-position: 13.888888888888834%;
        --g4-1-y-position: 18.891170431211524%;
        --g4-2-x-position: 85.20833333333329%;
        --g4-2-y-position: 17.874743326488705%;
        --g4-3-x-position: 15%;
        --g4-3-y-position: 85%;
        --g4-4-x-position: 100%;
        --g4-4-y-position: 100%;
    }
    75% {
        --g4-1-x-position: 17.071759259259224%;
        --g4-1-y-position: 75.56468172484597%;
        --g4-2-x-position: 13.136574074074%;
        --g4-2-y-position: 20.739219712525706%;
        --g4-3-x-position: 84.25925925925932%;
        --g4-3-y-position: 74.94866529774129%;
        --g4-4-x-position: 81.82870370370377%;
        --g4-4-y-position: 16.837782340862468%;
    }
}

/* ########### DELETE CONFIRMATION ########### */
/* Global: the dashboard and the quiz editor both raise this dialog. */
.confirmBackdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(57, 53, 82, .45);
    z-index: 2000;
}

.confirmCard {
    width: min(420px, calc(100vw - 2rem));
    color: var(--dark);
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 var(--dark);
    overflow: hidden;
}

.confirmHeader {
    padding: .6rem .9rem;
    background-color: var(--teal);
    color: var(--beige);
    border-bottom: 2px solid var(--dark);
    font-family: var(--ekwarg);
    font-size: 1.15rem;
    font-weight: bold;
}

.confirmBody {
    padding: 1rem 1.1rem 1.1rem;
    font-family: var(--inter);
}

.confirmBody p { margin: 0 0 1rem; line-height: 1.4; }

.confirmActions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    align-items: stretch;
    /* With labels held on one line, a row too wide to fit has to break between buttons instead. The
       card clips its overflow, so without this a third button could sit outside it unreachable. */
    flex-wrap: wrap;
}

/* submitBtn is the page-level form button, sized and aligned for a form. Beside a Cancel it has to
   answer the question the dialog asked, so it sizes to its own label like every other button here. */
.confirmActions .submitBtn {
    width: auto;
    text-align: center;
}

.confirmActions .submitBtn::after { content: none; }

/* Both answers are one press, so neither may wrap while the other does not. */
.confirmActions .cancelBtn,
.confirmActions .submitBtn,
.confirmActions .deleteBtn {
    white-space: nowrap;
}

.deleteBtn {
    padding: var(--padding-box);
    font-family: var(--inter);
    font-size: 1rem;
    font-weight: bold;
    color: var(--beige);
    background-color: var(--red);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.deleteBtn:hover { background-color: var(--dark); }

/* Starts or advances a quiz, on the dashboard row and on the run screen. Borrows .submitBtn for
   shape and hover wipe; only the colour and the icon set it apart. */
.runBtn {
    --run-green: #3f7d5c;
    width: 8rem;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--run-green);
    box-shadow: inset 0 0 0 2px var(--run-green);
    background: linear-gradient(to left, var(--beige) 50%, var(--run-green) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}

.runBtn:hover {
    color: var(--beige);
    background-position: left bottom;
}

.runBtn::after {
    border-bottom-color: var(--run-green);
    border-right-color: var(--run-green);
}

/* The row already carries a Live badge, so the filled button says "this is the one running". */
.runBtn.is-live {
    color: var(--beige);
    background-position: left bottom;
}

/* ########### QUIZ BOARD ANIMATIONS ########### */
/* Global because the ranked list and the podium share these, and neither component owns them. A
   keyframes block IS scoped when it sits in the scoped file that names it, so this has to be here. */
@keyframes ql-rise {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
}

@keyframes ql-sweep {
    from { width: 0; }
}

@keyframes qp-grow {
    from { transform: scaleY(.2); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ########### SHARED LIST ROWS (dashboard sessions, quizzes, quiz run rail and players) ########### */
.sessionList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sessionRow {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
}

/* Specificity rather than source order, so moving this rule cannot silently break the layout. */
.sessionRow.quizRow { grid-template-columns: 1fr auto auto auto auto; }

.sessionName {
    font-family: var(--ekwarg);
    font-size: 1.25rem;
    color: var(--dark);
}

.sessionCode {
    margin-left: .6rem;
    font-family: var(--inter);
    font-size: .85rem;
    font-weight: normal;
    color: var(--purple);
    opacity: .7;
    vertical-align: middle;
}

.liveBadge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .6rem;
    padding: .1rem .5rem;
    font-family: var(--inter);
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--beige);
    background-color: var(--red);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    vertical-align: middle;
}

.liveDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--beige);
    animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.sessionMeta {
    font-family: var(--inter);
    font-size: .9rem;
    color: var(--purple);
}

/* ########### ROW TOOLS (edit / delete) ########### */
.sessionTools {
    display: flex;
    align-items: center;
    gap: .35rem;
    justify-content: flex-end;
}

.iconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--dark);
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.iconBtn:not(:disabled):hover {
    border-color: var(--dark);
    background-color: var(--beige);
}

.iconBtn.save:hover { color: var(--teal); border-color: var(--teal); }
.iconBtn.delete:hover { color: var(--red); border-color: var(--red); }

/* ########### SESSION SHELL (teacher session, quiz run) ########### */
.inactiveSessionContainer {
    margin-top: -6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.activeSessionContainer {
    display: grid;
    /* Rows size to content, so the row under the action bar sits directly beneath it. */
    grid-template-rows: max-content max-content;
    align-content: start;
    align-self: start;
    padding: 1rem 0 0 2.5rem;
    width: 100%;
}
.sessionInfo {
    grid-row: 1;
    grid-column: 1 /-1;
    display: flex;
    align-items: center;
    height: max-content;
    gap: .5rem;
}
.sessionHeading {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.logo {
    animation: spin 2s linear infinite;
    width: 100px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ########### SIGN IN PROMPT (every page that can be reached signed out) ########### */
.signInPrompt {
    padding: 2rem 2.5rem;
    font-family: var(--inter);
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--dark);
}

#signIn {
    font-family: var(--ekwarg);
    font-style: italic;
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);

    &:hover {
        text-decoration: none;
        cursor: pointer;
    }

    &:visited {
        color: var(--teal);
    }
}

/* ########################## Phone ##########################

   Last in the file on purpose. These rules match the same single classes as the base rules above,
   so anywhere earlier they lose the cascade and silently do nothing, which is what happened to the
   action bar trim for a long time. */
@media (max-width: 640px) {
    html { font-size: 15px; }

    .actionBar { padding: .35rem .55rem; gap: .35rem; }
    .actionBar .activeSessionTitle { font-size: 1.1rem; }
    .stopSessionBtn, .leaveSessionBtn { padding: .25rem .55rem; }
    .stopSessionBtn { font-size: .9rem; }
}

@media (max-width: 400px) {
    html { font-size: 14px; }
}