/** Fonts **/
@font-face {
  font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900;
  font-display: swap; src: url(/assets/fonts/CrimsonPro-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url(/assets/fonts/CrimsonPro-Regular.woff2) format('woff2');
}

/* CSS Reset
    1. Use a more-intuitive box-sizing model.	6. Improve media defaults.
    2. Remove default margin. 			7. Inherit fonts for form controls.
    3. Enable keyword animations. 		8. Avoid text overflows.
    4. Increase line-height. 			9. Improve line wrapping.
    5. Improve text rendering. 			10. Create a root stacking context.
*/
*, *::before, *::after { box-sizing: border-box; }
*:not(dialog) { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: balance; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
#root, #__next { isolation: isolate; }

/* Variables */
:root {
    color-scheme: var(--color-scheme, light); 

    &:has(#color-scheme option[value="dark"]:checked) {
        --color-scheme: dark;
        #uu-logo { filter: invert(1); }
    }
    @media (prefers-color-scheme: dark) {
        &:has(#color-scheme option[value="system"]:checked) {
            --color-scheme: dark;
            #uu-logo { filter: invert(1); }
        }
    }

    --color-bg:         light-dark(white, black);
    --color-bg-accent:  light-dark(silver, dimgray);
    --color-fg:         light-dark(black, white);
    --color-fg-accent:  light-dark(dimgray, whitesmoke);

    --shadow-s: 1px 2px light-dark(black, black);
    --shadow-m: 2px 3px light-dark(black, black);
    --shadow-l: 3px 5px light-dark(black, white);

    --spacing-xxs:  2px;
    --spacing-xs:   3px;
    --spacing-s:    5px;
    --spacing-m:    8px;
    --spacing-l:    13px;
    --spacing-xl:   21px;
    --spacing-xxl:  34px;
    --spacing-3xl:  55px;
    --spacing-4xl:  89px;

    --width-desktop:  1280px;
    --width-portrait: 1000px;

    --border-xs: 1px dashed light-dark(black, white);
    --border-s:  1px solid  light-dark(black, white);
    --border-m:  2px solid  light-dark(black, white);

    --border-radius-s: 2px;
    --border-radius-m: 3px;

    --transition-fast: 0.1s ease;
    --transition-slow: 0.2s ease;
}

html {
    background:     var(--color-bg);
    color:          var(--color-fg);

    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 400; 
    font-style: normal;
}

/** Holy grail ***************************************************************/
#holy-grail {
    display:    grid;
    margin:     auto;

    padding: var(--spacing-s);

    grid-template-areas:
        "header header header"
        "nav content side"
        "footer footer footer";
        grid-template-columns:  auto 1fr auto;
        grid-template-rows:     auto 1fr auto;
        grid-gap:               var(--spacing-m);

    max-width: var(--width-desktop);
}

header { 
    grid-area:      header;

    margin-bottom:  var(--spacing-xxs);
    padding:
        var(--spacing-s)
        var(--spacing-l);

    display:            flex;
    justify-content:    space-between;
    gap:                var(--spacing-l);

    & h2 {
        color: silver;
    }

    #header-left {
        display: flex;
        gap: var(--spacing-xl);
    }
}

main {
    grid-area:      content; 
    padding: var(--spacing-s);
}

nav     { 
    grid-area: nav;
    width: 325px;

    #navbar-title {
        border-bottom: var(--border-s);
        border-color: var(--color-bg-accent);
        margin-bottom: var(--spacing-m);

        h2 { 
            display: inline; 
            margin-right: var(--spacing-s);
        }

        i {
            color: var(--color-fg-accent);
        }
    }
}
aside   { grid-area:    side;   } /** reserved for future use */

/** Flash messages ***********************************************************/
.flash { 
    display:            flex;
    justify-content:    space-between;

    font-weight: bold;

    margin:  var(--spacing-s) 0px var(--spacing-xxl) 0px;
    padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-l);

    border:         var(--border-s);
    border-radius:  var(--border-radius-s);
    box-shadow:     var(--shadow-l);

    & button {
        background: none;
        border:     none;
    }
    & button:hover {
        color:  red;
        cursor: pointer;
    }
}

/** Signed-in-as widget ******************************************************/
#signed-in-as {
    display:        flex;
    align-items:    center;
    gap:            13px;

    & i {
        color: var(--color-fg-accent);
    }

    & b {
        text-decoration: underline gold 3px;
        margin:
            0px
            var(--spacing-xxs);
    }

    & input[type=submit] {
        background:     none;
        font-weight:    bold;

        padding:
            var(--spacing-xs)
            var(--spacing-m);

        border:         var(--border-m);
        border-radius:  var(--border-radius-m);

        transition: box-shadow var(--transition-fast);
    }

    & input[type=submit]:hover {
        background: yellow;
        cursor:     pointer;

        box-shadow: var(--shadow-s);
    }
}

/** Color scheme **/
#color-scheme {
    display: flex;

    label {
        font-style: italic;
        color: var(--color-fg-accent);
        margin-top: var(--spacing-xs);
        margin-right: var(--spacing-xs);

        text-decoration: underline gold 2px;
    }

    select {
        border:     none;
        border-radius: var(--border-radius-s);

        padding: 0 var(--spacing-xs);

        background: none;
        font-weight: bold;
        font-size: 16px;

        appearance: none;
    }

    select:has(> option[value="system"]:checked) {}
    select:has(> option[value="light"]:checked) {}
    select:has(> option[value="dark"]:checked) {
        color: white;
    }

    select:hover {
        cursor: pointer;
    }
    
}

/** Generic box **************************************************************/
.cardboard {
    position:   relative;
    width:      fit-content;
    height:     fit-content;

    margin:     var(--spacing-xl) var(--spacing-xs);
    padding:    var(--spacing-xl) var(--spacing-l) var(--spacing-xxl);

    border:         var(--border-s);
    border-radius:  var(--border-radius-s);

    transition: border-color,box-shadow var(--transition-slow);

    & h2:first-of-type {
        position:       absolute;
        top:            -15px;
        background:     var(--color-bg);
        line-height:    1em;
    }
}


/** Login form ***************************************************************/
#login {
    flex: 0.8;

    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);

    & #choice-of-login {
        width:          fit-content;
        background:     var(--color-bg);

        padding: var(--spacing-m) var(--spacing-l); 

        border:         var(--border-s);
        border-radius:  var(--border-m);
        box-shadow:     var(--shadow-m);


        & select {
            width: 100%;

            text-align:     center;
            font-weight:    bold;
            font-size:      1.1rem;

            margin:
                var(--spacing-m)
                var(--spacing-xss)
                var(--spacing-m)
                var(--spacing-xss);

            padding: var(--spacing-s);


            border:         none;
            border-radius:  var(--border-radius-m);

            transition: background var(--transition-fast);
            background: var(--color-bg-accent);
            color:      var(--color-fg);
        }

        &   select:hover,
            select:active,
            select:focus-visible
        {
            background: silver;
            cursor:     pointer;
        }

        & p {
            max-width: 54ch;

            & b {
                text-decoration: underline lightgreen 3px;
            }
        }

        & p:nth-child(1) {
            text-align: right;
        }
        & p:nth-last-child(1) {
            text-align: right;
        }

        & div {
            margin: var(--spacing-l) var(--spacing-xs);
        }
    }

    & #login-action {
        display:            flex;
        justify-content:    end;

        & input[type=submit] {
            position:   absolute;
            bottom:     -15px;

            background: mediumspringgreen;
            color: black;

            font-weight:    bold;

            margin:  0px                var(--spacing-s);
            padding: var(--spacing-xs)  var(--spacing-m);

            border: var(--border-m);
            border-radius: var(--border-m);
            border-color: black;

            transition: background,box-shadow var(--transition-fast);
        }

        & input[type=submit]:hover {
            cursor:     pointer;
            box-shadow: var(--shadow-s);

        }
    }

    &:has(input[type=submit]:hover) {
        border-color:   light-dark(white, black);
        box-shadow:     inset 0 0 0 3px mediumspringgreen;
    }
}

/** Launch environment form ************************************************/
#launch-environment {
    flex: 2;
    max-width: 500px;

    & form {
        display:        flex;
        flex-direction: column;
        gap:            var(--spacing-l);
    }

    &   #flavor-selection,
        #allocation-selection
    {
        width:          fit-content;
        background:     var(--color-bg);

        padding: var(--spacing-s) var(--spacing-m);

        border:         var(--border-s);
        border-radius:  var(--border-m);
        box-shadow:     var(--shadow-m);

        animation-duration: 0.5s;

        & p {
            max-width: 54ch;
        }
    }

    & #flavor-selection {
        animation-duration: 0.7s;
        p > b {
            text-decoration: underline gold 3px;
        }
    }

    & #allocation-selection {
        align-self: end;

        p > b {
            text-decoration: underline lightskyblue 3px;
        }
    }

    & select {
        font-weight:    bold;
        color: black;

        margin:
            var(--spacing-xs)
            var(--spacing-m);

        padding:
            var(--spacing-xxs) var(--spacing-s)
            var(--spacing-xxs) var(--spacing-l);

        border:         none;
        border-radius:  var(--border-radius-m);

        transition: background var(--transition-fast);
    }

    & select[id=flavors]        { background: gold; }
    & select[id=allocations]    { background: lightskyblue; }

    &   select:hover,
        select:active,
        select:focus-visible
    {
        background: gainsboro;
        cursor:     pointer;
    }

    & select:disabled {
        background:     gainsboro;
        color:          dimgray;
        cursor:         not-allowed;
    }

    & #launch-action {
        display:            flex;
        justify-content:    end;

        & input[type=submit] {
            position:   absolute;
            bottom:     -15px;

            background:     mediumspringgreen;
            color:          black;
            font-weight:    bold;

            margin:
                0px
                var(--spacing-s);

            padding:
                var(--spacing-xs)
                var(--spacing-m);

            border: var(--border-m);
            border-radius: var(--border-m);
            border-color: black;

            transition: background,box-shadow var(--transition-fast);
        }
        & input[type=submit]:hover {
            cursor:     pointer;
            box-shadow: var(--shadow-s);
            text-decoration: underline black 3px;

        }
        & input[type=submit]:focus-visible {
            outline: none;
            text-decoration: underline black 3px;
        }

        & input[type=submit]:disabled {
            text-decoration: line-through 2px black;
            cursor: help;
        }
    }

    &:has(input[type=submit]:hover), &:has(input[type=submit]:focus-visible) {
        border-color:   white;
        box-shadow:     inset 0 0 0 3px mediumspringgreen;
    }
}

/** Running Environments *****************************************************/
#running-environments {
    margin-bottom: var(--spacing-xxl);
    & #environment-counter {
        font-family:    monospace;
        padding-right: var(--spacing-s);
    }

    & ul, & environment-list {
        padding:
            var(--spacing-l)
            var(--spacing-l)
            var(--spacing-l)
            var(--spacing-xl);

        list-style: none;
        border-top: var(--border-m);

        display:        flex;
        flex-direction: column;
        gap:            13px;

        .environment-list-item {
            background:         var(--color-bg);

            padding:            var(--spacing-xs);
            padding-left:       var(--spacing-m);

            border:             var(--border-s);
            border-radius:      var(--border-radius-m);
            box-shadow:         var(--shadow-s);

            display:            flex;
            align-items:        center;
            justify-content:    space-between;
            gap:                var(--spacing-m);

            transition: box-shadow var(--transition-fast);

            & .environment-list-item-status {
                color:          black;
                background:     gainsboro;
                font-style:     italic;
                padding:        0px var(--spacing-s);
                margin:         0px var(--spacing-m);
                border-radius:  var(--border-radius-s); 

                animation-duration: 1s
            }
            
            & .environment-list-item-status.ready { 
                background: mediumspringgreen;
            }

            .environment-list-item-expiry {
                font-style: italic;
            }

            .environment-list-item-expiry:hover {
                cursor: help;
            }

            a {
                font-weight: bold;
                color: var(--color-bg-primary);
                text-decoration: underline var(--color-bg-accent) 3px;
            }

            a:hover,a:focus {
                outline: none;
                text-decoration: underline mediumspringgreen 3px;
            }

            & button {
                border: none;
                background: none;
            }

            & button:hover {
                color: red;
            }
        }

        /** &:has(input[type=submit]:hover) **/
        .environment-list-item:has(a:hover),
        .environment-list-item:has(a:focus-visible) {
            box-shadow: 3px 5px mediumspringgreen;
        }
    }
}

/** Text sections ************************************************************/
#greeting {
    display: flex;
    flex-direction: column;

    max-width: 79ch;

    .greeting {
        font-size:      1.5em;
        font-weight:    bold;
    }
}

#introduction {
    & div       { flex: 0.6; }
    & ul        { flex: 0.4; }

    .greeting {
        font-size:      1.5em;
        font-weight:    bold;
    }
}

#outro {
    margin-top: 89px;
    max-width: 79ch;
}

.start {
    font-size:      1.2em;
    font-weight:    bold;
}

/** Banner *******************************************************************/
.banner {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-xl);

    aside {
        height: var(--spacing-xxl);
    }

    div {
        border-top: var(--spacing-xxs) dashed dimgray;
        border-bottom: var(--spacing-xxs) dashed dimgray;

        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);

        p {
            width: 100%;
            text-align: center;

            em {
                text-decoration: underline gold 3px;
            }
        }    
    }
}

/** Footer *******************************************************************/
footer {
    display: flex;
    align-items: center;
    justify-content: end;

    grid-area:      footer;
    color:          var(--color-fg-accent);
    padding: 0px var(--spacing-m);

    margin-top: var(--spacing-4xl);
    gap: var(--spacing-3xl);

    .attributes {
        opacity: 0.5;
        transition: opacity var(--transition-fast);

        ul {
            max-width 42ch;

            li {
                a {
                    color: var(--color-fg-accent);
                    text-decoration: none;
                    text-decoration: underline var(--color-bg-accent) 2px;
                }
                a:hover {
                    text-decoration: underline gold 3px;
                }
            }
        }
    }

    .attributes:hover {
        opacity: 1;
    }
}

/** Courses **/
#courses {
    padding: var(--spacing-xl) var(--spacing-m) var(--spacing-xxl);

    #search {
        border:         var(--border-xs);
        background:     var(--color-bg);
        border-radius:  var(--border-radius-s);

        margin-bottom:  var(--spacing-l);
        padding-left:   var(--spacing-m);

        transition: var(--transition-fast);
    }
    #search::placeholder {
        color: var(--color-fg);
        font-style: italic;
    }
    #search:focus-visible {
        border: var(--border-s);
        outline: none;
        box-shadow: 3px 5px mediumspringgreen;
    }

    h2 {
        text-decoration: underline gold 3px;
    }

    p {
        margin-bottom: var(--spacing-s);
    }

    ul {
        list-style: square;
        padding: var(--spacing-xs);
        margin: 0px var(--spacing-m);

        li {
            .course-code {
                font-family:    monospace;
                font-style:     italic;

                margin-right: var(--spacing-xs);
            }

            a {
                color: var(--color-fg);
                font-weight: bold;
            }


            a:hover {
                text-decoration: underline gold 3px;
            }
            a:active, a:focus-visible {
                outline: none;
                text-decoration: underline mediumspringgreen 3px;
            }
        }
    }
}

/** Keybindings **/
#keybindings {
    margin-top: var(--spacing-m);
    color: var(--color-fg-accent);

    opacity: 0.5;

    h4 {
        font-style: italic;
    }

    dl {
        display: grid;
        grid-template-columns: min-content auto min-content auto;
        gap: var(--spacing-s);

        dt {
            display: flex;

            align-content:   center;
            justify-content: center;

            color: var(--color-fg);

            border: var(--border-s);
            box-shadow: 2px 2px var(--color-bg-accent);

            padding: 0px var(--spacing-xxs);

            min-width:  var(--spacing-xl);
            height: var(--spacing-xl);

            font-family: monospace;
        }

        dd {
            font-style: italic;
        }
    }

    transition: var(--transition-fast);
}

#keybindings:hover {
    opacity: 1;
}

/** Important notes **/
#important-notes {
    flex: 1;
    align-self: center;
    max-width:  42ch;
    min-width:  24ch

    margin-bottom: var(--spacing-xl);

    h3 {
        margin-left: 40px;
    }

    em {
        text-decoration: underline tomato 2px;
   }

}

/** Logs **/
#logs {
    flex: 1;
    padding: var(--spacing-m) var(--spacing-xs) var(--spacing-xs);
    border: none;

    ul {
        font-family: monospace;

        overflow: scroll;
        height: var(--spacing-3xl);

        list-style: none;
        padding: var(--spacing-xs);
        margin: 0;

        overflow: scroll;

        li {
            padding: 0 var(--spacing-xss);
        }
    }
}

/** Introduction **/
#introduction {
    max-width: 79ch;
    margin-bottom: var(--spacing-xxl);
}

/** About **/
#about {
    margin-top: var(--spacing-m);
    line-height: 1.1;

    .revision {
        max-width: 20ch;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/** Metrics **/
#metrics {
    display: flex;
    justify-content: end;

    margin-top: var(--spacing-l);

    #metrics-list {
        display: flex;
        gap: var(--spacing-m);
        align-items: baseline;

        .metrics-list-pair {
            display: flex;
            gap: var(--spacing-s);

            border: var(--border-s);
            border-color: var(--color-bg-accent);

            padding: 0 var(--spacing-s);

            font-family: monospace;

            #metrics-list-pair-status {
                display: flex;
                align-items: baseline;
                gap: var(--spacing-s);

                #metrics-list-pair-status-indicator {
                    width: var(--spacing-m);
                    height: var(--spacing-m);
                    border-radius: var(--spacing-m);

                    background: crimson;
                }

                #metrics-list-pair-status-indicator.status-connected {
                    background: mediumspringgreen;
                }
            }
       }
    }
}


#landing{
    max-width: 79ch;
    p { 
        text-align: justify;
        margin-bottom: var(--spacing-l);
    }
}

/** Miscellaneous ************************************************************/
.row {
    display: flex;
    gap: var(--spacing-l);

    justify-content:    space-between;
    align-items:        baseline;
}


.striped-background {
    background:         var(--color-bg);
    background-size:    10px 10px;
    background-image:   repeating-linear-gradient(
        45deg, var(--color-bg-accent),
        0, var(--color-bg-accent), 
        1px, var(--color-bg) 0, 
        var(--color-bg) 50%
    );
}

.dotted-background {
    background:         var(--color-bg); 
    background-size:    10px 10px;
    background-image:   repeating-linear-gradient(
        45deg,  var(--color-bg-accent),
        0,      var(--color-bg-accent),
        1px,    var(--color-bg) 0, 
        var(--color-bg) 100%
    );
}

@keyframes blinking {
    from {opacity: 0;}
    to {opacity: 1;}
}

.blinking {
    animation: blinking 1s alternate infinite;
}

@keyframes fade-in {
    from {opacity: 0; transform: translateY(-1rem);}
    to {opacity: 1;}
}

.fade-in {
    animation-name:      fade-in;
    animation-duration:  0.2s
}

@media (max-width: 1000px) {
    .collapse {
        flex-direction: column;
    }

    #launch-environment { 
        width: 100%;
        max-width: none; 
    }
    #important-notes {
        align-self: start;
        max-width: 72ch;
        margin-bottom: var(--spacing-xl);
    }
}

#landing-page {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
        font-size: 2.8em;
        line-height: 0.9;
    }

    a {
        font-weight: bold;
        color: var(--color-bg-primary);
        text-decoration: underline mediumspringgreen 3px;
    }

    a:hover,a:focus {
        outline: none;
        color: var(--color-fg-accent);
    }
}

@media (max-width: 768px) {
    #holy-grail {
        grid-template-areas:
          "header"
          "nav"
          "content"
          "side"
          "footer";

        grid-template-columns: 1fr;
        grid-template-rows:
          auto  /* Header       */
          auto   /* Navigation   */
          1fr   /* Content      */
          auto  /* Aside        */
          auto;  /* Footer       */

        padding: var(--spacing-m);
    }

    .row { 
        flex-direction: column;
        align-items: center;
    }

    #launch-environment   { margin-bottom:    13px; } 
    #logs { width: 100%; }
    #search { width: 100%; }
    nav {width: auto;}
}

@view-transition {
    navigation: auto;
}