@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@font-face {
    font-family: "Workplace Sans";
    font-style: normal;
    font-weight: normal;
    src: url("./fonts/wpsu.eot"); /* IE9 Compat Modes */
    src:
        local("☺"),
        url("./fonts/wpsu.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */ url("./fonts/wpsu.woff") format("woff"),
        url("./fonts/wpsu.ttf") format("truetype"),
        url("./fonts/wpsu.svg#wpsu") format("svg");
}

@font-face {
    font-family: "Workplace Sans";
    font-style: normal;
    font-weight: bold;
    src:
        local("☺"),
        url("./fonts/wpsub.woff") format("woff"),
        url("./fonts/wpsub.ttf") format("truetype"),
        url("./fonts/wpsub.svg#wpsub") format("svg");
}

/* jetbrains-mono-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    src: url("./fonts/jetbrains-mono-v17-latin-regular.eot"); /* IE9 Compat Modes */
    src:
        url("./fonts/jetbrains-mono-v17-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        /* IE6-IE8 */ url("./fonts/jetbrains-mono-v17-latin-regular.woff2")
            format("woff2"),
        /* Super Modern Browsers */
            url("./fonts/jetbrains-mono-v17-latin-regular.woff") format("woff"),
        /* Modern Browsers */
            url("./fonts/jetbrains-mono-v17-latin-regular.ttf")
            format("truetype"),
        /* Safari, Android, iOS */
            url("./fonts/jetbrains-mono-v17-latin-regular.svg#JetBrainsMono")
            format("svg"); /* Legacy iOS */
}

:root {
    --color-primary: #ff8000;
    --color-on-primary: #fff;
    --color-background: #fffaec;
    --color-on-background: #461d04;
    --color-surface: #461d04;
    --color-on-surface: #fffaec;
    --color-border: #a1480b;
    --color-error: #e53935;
    --color-on-error: #fff;

    --gradient-section: linear-gradient(
        color-mix(in srgb, var(--color-surface) 10%, transparent),
        color-mix(in srgb, var(--color-surface) 8%, transparent)
    );
    --gradient-primary: linear-gradient(
        color-mix(in srgb, var(--color-primary) 80%, transparent),
        color-mix(in srgb, var(--color-primary) 74%, transparent)
    );
    --gradient-primary-subtle: linear-gradient(
        color-mix(in srgb, var(--color-primary) 62%, transparent),
        color-mix(in srgb, var(--color-primary) 55%, transparent)
    );
    --gradient-primary-border: color-mix(
        in srgb,
        var(--color-primary) 80%,
        transparent
    );
    --gradient-primary-subtle-border: color-mix(
        in srgb,
        var(--color-primary) 62%,
        transparent
    );

    --font-main: "Inter", sans-serif;
    --font-size-small: 0.7rem;
    --font-size-smaller: 0.85rem;
    --font-size-normal: 1rem;
    --font-size-medium: 1.1rem;
    --font-size-bigger: 1.25rem;
    --font-size-big: 1.5rem;

    --border-width-thin: 0.1rem;
    --border-width-thick: 0.25rem;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background: radial-gradient(#fff, var(--color-background));
    background-size: 150% 250%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}

main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 2rem;
    gap: 1rem;
}

main > div:not(#documentation) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(
        color-mix(in srgb, var(--color-surface) 10%, transparent),
        color-mix(in srgb, var(--color-surface) 5%, transparent)
    );
    border-radius: 1rem;
    padding: 2rem;
    min-height: calc(100vh - 13rem);
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section {
    display: flex;
    flex-direction: column;
    background: var(--gradient-section);
    border-radius: 1rem;
    padding: 1rem;
}

header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    background: linear-gradient(
        color-mix(in srgb, var(--color-surface) 67%, transparent),
        color-mix(in srgb, var(--color-surface) 62%, transparent)
    );
    margin: 1rem 2rem;
    border-radius: 5rem;
    backdrop-filter: blur(3rem);
    align-items: center;
    padding: 1.5rem 2.5rem;
    gap: 2rem;
    box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.05);
}

header img {
    height: 3rem;
}

header .title {
    font-size: var(--font-size-bigger);
    display: block;
    color: var(--color-on-surface);
}

#header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

#header-actions button,
#header-actions a {
    font-family: var(--font-main);
    text-decoration: none;
    font-size: var(--font-size-medium);
    line-height: var(--font-size-medium);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--color-on-surface) 15%, transparent);
    color: var(--color-on-surface);
    font-weight: 600;
    transition-property: background-color, color;
    transition-duration: 200ms;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.03);
}

#header-actions button:hover,
#header-actions button.active,
#header-actions a:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

footer {
    margin-top: 2rem;
    display: flex;
    background: var(--color-surface);
    color: var(--color-on-surface);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
}

footer a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-normal);
    line-height: 0.8rem;
    color: var(--color-gray);
    text-decoration: none;
    background: color-mix(in srgb, var(--color-on-surface), transparent);
    border-radius: 1rem;
    color: color-mix(in srgb, var(--color-surface) 67%, transparent);
    font-weight: bold;
    transition-property: background-color, color;
    transition-duration: 200ms;
}

footer a:hover {
    background: color-mix(in srgb, var(--color-on-surface) 70%, transparent);
    color: var(--color-surface);
}

div:has(> h1) {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

h1 {
    font-size: var(--font-size-bigger);
    margin: 0;
    padding: 1rem 1.5rem;
    border-radius: 2rem;
    display: inline-block;
    display: block;
    color: var(--color-on-background);
    font-weight: bold;
    /*background: linear-gradient(
        color-mix(in srgb, var(--color-primary) 80%, transparent),
        color-mix(in srgb, var(--color-primary) 68%, transparent)
    );*/
    background: var(--gradient-primary-subtle);
    border: solid 0.15rem var(--gradient-primary-subtle-border);
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.05);
    color: #fff;
}

h2 {
    font-size: var(--font-size-medium);
    margin: 0;
    color: color-mix(in srgb, var(--color-on-background) 67%, transparent);
    margin-bottom: 1rem;
}

input {
    font-family: var(--font-main);
    min-width: 0;
}

#sensor_type {
    display: none;
}

.hidden {
    display: none;
}

.icon {
    filter: invert();
    height: var(--font-size-small);
    line-height: var(--font-size-normal);
}

#coeffitients {
    width: calc(200% + 1rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    transition-property: transform;
    transition-duration: 350ms;
}

#inputs.ntc #coeffitients {
    transform: translateX(calc(-50% - 0.5rem));
}

#coeffitients section {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 350ms;
}

#inputs:not(.ntc) #coeffitients section:first-child {
    opacity: 1;
}

#inputs.ntc #coeffitients section:last-child {
    opacity: 1;
}

#documentation {
    opacity: 0;
    position: absolute;
    top: 6rem;
    right: 3em;
    width: 30rem;
    background: color-mix(in srgb, var(--color-surface), transparent);
    backdrop-filter: blur(3rem);
    padding: 2rem;
    border-radius: 1rem;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: color-mix(in srgb, var(--color-on-surface) 85%, transparent);
    box-shadow: 0 2rem 1rem transparent;
    transition-property: top, opacity, box-shadow;
    transition-duration: 500ms;
}

#documentation.shown {
    opacity: 1;
    top: 9.2rem;
    pointer-events: all;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

#documentation p {
    font-size: var(--font-size-medium);
    line-height: calc(var(--font-size-medium) * 1.3);
    margin: 0 0 0 0.5rem;
    width: 95%;
}

#documentation h1 {
    background: color-mix(
        in srgb,
        var(--color-on-surface) 25%,
        transparent
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--color-on-surface) 25%,
        transparent
    ) !important;
}

#documentation h2 {
    color: var(--color-on-surface);
    margin: 0;
}

#documentation #button-close-docs {
    position: absolute;
    top: calc(3rem - 0.15rem);
    right: 3rem;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--color-surface) 25%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#documentation #button-close-docs img {
    height: 1.2rem;
    width: 1.2rem;
    opacity: 0.5;
}

/* REMOVE INPUT NUMBER BUTTONS */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

#inputs {
    position: relative;
    overflow: hidden;
}

#switch {
    background: var(--gradient-section);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    position: absolute;
    top: 2rem;
    right: 2rem;
    padding: 0.5rem 1.5rem;
    gap: 0.75rem;
    align-items: center;
}

#switch div {
    font-size: var(--font-size-smaller);
    color: var(--color-on-background);
    font-weight: 600;
    opacity: 0.35;
    transition-property: opacity;
    transition-duration: 200ms;
}

#inputs.ntc #switch > div:last-child {
    opacity: 0.8;
}

#inputs:not(.ntc) #switch > div:first-child {
    opacity: 0.8;
}

#switch-input {
    display: none;
}

#switch-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1rem;
    border: none;
    background-color: color-mix(
        in srgb,
        var(--color-on-surface) 33%,
        transparent
    );
    border: solid 0.1rem var(--color-on-surface);
    display: flex;
    justify-content: center;
    align-items: center;
}

#switch-label:before {
    content: " ";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.35rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    transition-property: left;
    transition-duration: 200ms;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05);
}

#inputs.ntc #switch-label:before {
    left: calc(100% - 1rem - 0.35rem);
}

/* --- MESSAGES --- */

#messages {
    background: black;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
    gap: 1rem;
    margin: 0;
    padding: 2rem;
    list-style-type: none;
    animation: messages-animation 10s forwards;
}

@keyframes messages-animation {
    0% {
        margin-top: calc(
            -1 *
                (
                    (2 * 2rem) + (2 * var(--border-width-thin)) + 1rem +
                        (2 * 1rem)
                )
        );
    }
    2% {
        margin-top: 0;
    }
    98% {
        margin-top: 0;
    }
    100% {
        margin-top: calc(
            -1 *
                (
                    (2 * 2rem) + (2 * var(--border-width-thin)) + 1rem +
                        (2 * 1rem)
                )
        );
    }
}

#messages li {
    background: var(--color-dark-gray);
    font-size: var(--font-size-normal);
    padding: 1rem;
    border: solid var(--border-width-thin) var(--color-gray);
    color: var(--color-light-gray);
}

#messages li.error {
    background: var(--color-transparent-red);
    border-color: var(--color-red);
    color: #fff;
}

#messages li.success {
    background: var(--color-transparent-green);
    border-color: var(--color-green);
    color: #fff;
}

#messages li.info {
    background: var(--color-transparent-blue);
    border-color: var(--color-blue);
    color: #fff;
}

/* --- ERRORS --- */

ul.errors {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

ul.errors li {
    font-size: var(--font-size-smaller);
    line-height: var(--font-size-normal);
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--color-error) 85%, transparent);
    border: solid 0.15rem var(--color-error);
    color: var(--color-on-error);
    border-radius: 0.5rem;
}

ul.errors li:first-child {
    margin-top: 0.5rem;
}

.has_error {
    animation: error-field 2s forwards;
    border-color: var(--color-error) !important;
}

@keyframes error-field {
    0% {
        background: color-mix(in srgb, var(--color-error) 75%, transparent);
    }
    50% {
        background: color-mix(in srgb, var(--color-error) 50%, transparent);
    }
}

/* --- COEFFICIENTS --- */

input {
    font-family: var(--font-main);
    font-size: var(--font-size-normal);
    padding: 0.5rem 1rem;
    background-color: color-mix(
        in srgb,
        var(--color-on-surface) 33%,
        transparent
    );
    border: solid 0.1rem var(--color-on-surface);
    border-radius: 2rem;
    transition-property: border-color;
    transition-duration: 200ms;
}
input:focus {
    outline: none;
    border-color: var(--color-primary);
}

#sensor_number {
    width: calc(100% - 2 * 1rem - 2 * 0.1rem);
}

.coefficients-new,
.coefficients-old {
    width: 100%;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-gap: 1rem;
}

.coefficients-old input {
    width: calc(100% - 2 * 1rem - 2 * 0.1rem);
}

.coefficients-old label,
.coefficients-new label {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-primary-subtle);
    border: solid 0.15rem var(--gradient-primary-subtle-border);
    border-radius: 2rem;
    color: #fff;
    font-weight: bold;
}

/* --- TEMPERATURES --- */

#temperatures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

#temperatures label {
    font-size: var(--font-size-smaller);
    line-height: var(--font-size-smaller);
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: color-mix(in srgb, var(--color-on-background) 67%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -1rem;
}

#add-line-button {
    position: relative;
    margin-top: 1rem;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--color-on-surface) 50%, transparent);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 200ms;
}
#add-line-button:hover {
    background: color-mix(in srgb, var(--color-on-surface) 75%, transparent);
}

#add-line-button:before,
#add-line-button:after {
    content: " ";
    display: block;
    width: calc(50% - 2 * 1rem - 0.5rem);
    height: 1rem;
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    position: absolute;
    border-radius: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: 200ms;
}

#add-line-button:before {
    left: 1rem;
}

#add-line-button:after {
    right: 1rem;
}

#add-line-button:hover:before,
#add-line-button:hover:after {
    opacity: 1;
}

#temperatures input.transition[type="number"] {
    animation: input-transition 200ms forwards;
}

@keyframes input-transition {
    0% {
        padding: 0;
        margin: 1rem;
        border-color: var(--color-gray);
        border-radius: 1rem;
        background: var(--color-gray);
        height: calc(1rem - var(--border-width-thin));
        color: transparent;
    }
}

#run-button {
    border: none;
    cursor: pointer;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 600;
    width: 100%;
    background: color-mix(in srgb, var(--color-primary) 75%, transparent);
    border: solid 0.15rem var(--gradient-primary-border);
    color: color-mix(in srgb, var(--color-on-primary) 95%, transparent);
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
}

#run-button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

#temperature-curve-plot {
    height: 30rem;
    padding: 0;
    margin: 0;
    border: none;
    background: var(--color-light-gray);
}

.placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gradient-section);
    border-radius: 1rem;
}

.placeholder > div {
    color: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

.codeblock {
    position: relative;
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1rem;
    background: linear-gradient(
        color-mix(in srgb, var(--color-surface) 90%, transparent),
        color-mix(in srgb, var(--color-surface) 83%, transparent)
    );
    color: var(--color-on-surface);
    border-radius: 0.5rem;
    padding: 1rem;
}

#button-copy-commands {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: color-mix(
        in srgb,
        var(--color-on-surface) 20%,
        transparent
    );
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: background-color;
    transition-duration: 200ms;
    transition: background-color 3s ease;
}

#button-copy-commands:active {
    background-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
    transition: background-color 0ms;
}

#button-copy-commands img {
    width: 1rem;
    height: 1rem;
}