// ### 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;
}

#header,
main {
    padding: 0 30px;
    // Cap content width on wide monitors so long labels don't stretch
    // across 1900px+ screens. On smaller windows this is a no-op.
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

// The home page's arc reactor + status bar can keep their own internal
// max-width while the page itself can still go full width — the page
// layout below `main` already handles its own centering via flex.
.app-container.assist-page {
    width: 100%;
    max-width: 1280px;
    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;
    }
}