// ### BASE STYLES

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-width: 100vw;
    background-color: #4c5062;
    color: white;

    // assistant page background
    &.assist-page {
        background: radial-gradient(
            circle,
            rgba(24, 123, 123, 0.49) 0%,
            rgba(13, 15, 19, 1) 64%
        );

        &.assist-active {
            background: radial-gradient(
                circle,
                rgba(24, 81, 123, 0.64) 0%,
                rgba(13, 15, 19, 1) 64%
            );
        }
    }
}

:root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color: #0f0f0f;
    background-color: #f6f6f6;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

a {
    color: #2a9cd0;
    text-decoration: none;
    font-weight: bold;

    &:hover {
        color: #1dabed;
        text-decoration: underline;
    }
}

// ### LAYOUT OVERRIDES

#wrapper {
    padding: 0;
    margin: 0;
}

// Cap the WHOLE app (header + main) to 1280px on wide monitors and centre it,
// so labels in the nav don't sprawl across 1920px+ screens. The wrapper is
// `<Container fluid id="wrapper">` from svelteui — fluid keeps it width: 100%
// inside the viewport, then we shrink the inner content here. Smaller windows
// are unaffected (max-width is a ceiling, not a floor).
//
// `!important` is unfortunate but svelteui's Container emits a width:100%
// rule that sometimes outweighs ours under HMR. The override is loud and
// localised — only on the top-level wrapper.
#wrapper {
    max-width: 1280px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

#header,
main {
    padding: 0 30px;
    box-sizing: border-box;
}

.app-container.assist-page {
    width: 100%;
    margin: 0 auto;
}

// ### FORM OVERRIDES

select,
input {
    color: #ccc !important;
}

.form {
    label {
        font-weight: bold !important;
        color: #8ac832 !important;
        font-size: 15px !important;
        border-bottom: 1px dotted gray;
        margin-bottom: 10px !important;

        & + div {
            line-height: 1.2em;
        }
    }

    .svelteui-Tab-label {
        font-size: 18px !important;
    }
}