* {
    box-sizing: border-box;
}


/* =========================================================
   Global
   ========================================================= */

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;

    font-family: "Dela Gothic One", sans-serif;

    background-color: white;
    color: #171717;
}

html {
    overflow-x: hidden;
}

body {
    min-height: 100vh;

    overflow-x: hidden;
}

.dela-gothic-one-regular {
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* =========================================================
   Main layout
   ========================================================= */

main {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 48px 24px;

    transition: padding 0.25s ease;
}

body.results-visible main {
    align-items: flex-start;
}

#view-section {
    width: min(56%, 850px);
    max-width: 850px;
    min-width: 0;
}

#calculator-section,
#result-section {
    width: 100%;

    text-align: center;
}


/* =========================================================
   Heading
   ========================================================= */

#calculator-heading {
    position: relative;

    width: fit-content;
    max-width: 100%;

    margin: 0 auto 32px;

    text-align: center;
}

#site-title {
    margin: 0 0 10px;

    color: #777;

    font-family: sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
}

#calculator-heading h1 {
    margin: 0;

    font-size: clamp(1.85rem, 3.2vw, 2.65rem);
    line-height: 1.15;

    letter-spacing: 0.05rem;
}


/* =========================================================
   Info
   ========================================================= */

#info {
    position: absolute;

    left: calc(100% + 8px);
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
}

#info-button {
    width: 16px;
    height: 16px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #777;
    border-radius: 50%;

    background: transparent;

    color: #666;

    font-family: serif;
    font-size: 10px;

    cursor: pointer;
}

#info-tooltip {
    position: absolute;

    bottom: calc(100% + 8px);
    left: 50%;

    transform: translateX(-50%);

    width: max-content;
    max-width: 240px;

    padding: 8px 10px;

    background: #222;
    color: white;

    border-radius: 6px;

    font-family: sans-serif;
    font-size: 0.75rem;
    font-weight: normal;

    line-height: 1.4;
    text-align: center;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.15s,
        visibility 0.15s;

    z-index: 10;
}

#info:hover #info-tooltip,
#info:focus-within #info-tooltip,
#info.open #info-tooltip {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   Form
   ========================================================= */

#scroll-form {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;
}

.input-pill {
    width: 100%;
    max-width: 640px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: clamp(6px, 2vw, 20px);

    min-width: 0;

    padding: 10px 20px;

    background-color: #e7f7ef;

    border-radius: 999px;
}

.single-pill {
    flex-direction: column;
    align-items: center;

    gap: 2px;
}

.input-pill label {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    gap: 6px;

    min-width: 0;

    color: #777;

    font-family: sans-serif;
    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 0.03rem;
}

.single-pill label {
    width: 100%;
}

#usage-inputs label {
    flex: 1;
}

.input-pill input,
.input-pill select,
.input-pill button {
    width: 100%;
    min-width: 0;

    height: 58px;

    padding: 0 4px;

    border: none;
    outline: none;

    background: transparent;

    color: #171717;

    font-family: "Dela Gothic One", sans-serif;

    font-size: clamp(0.98rem, 1.8vw, 1.35rem);

    text-align: center;

    border-radius: 8px;

    transition: transform 0.15s;
}

#usage-inputs input {
    font-size: clamp(1.35rem, 2.8vw, 2rem);
}

#device optgroup,
#device option {
    font-family: sans-serif;
    font-size: 0.95rem;
}

.input-pill select,
.input-pill button {
    cursor: pointer;
}

.input-pill input:focus,
.input-pill select:focus,
.input-pill button:focus {
    outline: none;
    background: transparent;
}

.input-pill input::placeholder {
    color: #aaa;
    opacity: 1;
}

#speed-note {
    min-height: 20px;

    margin: -4px 0 4px;

    color: #666;

    font-family: sans-serif;
    font-size: 0.8rem;
    line-height: 1.35;
}

#unit-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px;

    background-color: #e7f7ef;

    border-radius: 999px;

    margin: 0 auto 18px;
}

#unit-switch button {
    min-width: 116px;

    padding: 10px 14px;

    border: none;
    border-radius: 999px;

    background: transparent;
    color: #777;

    font-family: "Dela Gothic One", sans-serif;
    font-size: 0.82rem;

    cursor: pointer;

    transition:
        background-color 0.15s,
        color 0.15s,
        transform 0.12s;
}

#unit-switch button.active {
    background-color: #171717;
    color: white;
}

#unit-switch button:hover {
    transform: translateY(-1px);
}

#error-message {
    margin: -6px 0 0;

    font-family: sans-serif;
    font-size: 0.85rem;
}


/* =========================================================
   Primary button
   ========================================================= */

#scroll-form > button[type="submit"],
#share-button,
#try-again-button {
    min-width: 150px;

    margin-top: 4px;

    padding: 13px 26px;

    border: none;
    border-radius: 8px;

    background-color: #171717;
    color: white;

    font-family: "Dela Gothic One", sans-serif;
    font-size: 1rem;

    cursor: pointer;

    transition: transform 0.12s;
}

#scroll-form > button[type="submit"]:hover,
#share-button:hover,
#try-again-button:hover {
    transform: translateY(-1px);
}

#scroll-form > button[type="submit"]:active,
#share-button:active,
#try-again-button:active {
    transform: translateY(1px);
}


/* =========================================================
   Results
   ========================================================= */

#result-section {
    width: 100%;

    margin-top: 42px;

    scroll-margin-top: 28px;
}

#result-section:not([hidden]) {
    animation: result-reveal 0.24s ease-out;
}

#result-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 10px;
}

#result-section h2 {
    margin: 0;

    font-size: clamp(1.45rem, 2.7vw, 2.2rem);
    line-height: 1.15;

    letter-spacing: 0.05rem;
}

#share-button {
    margin-top: 0;
}

#stats {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 18px;
}

#stats article {
    min-width: 0;
    min-height: 120px;

    padding: 18px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: #e7f7ef;

    border-radius: 8px;
}

#stats h3 {
    margin: 0 0 8px;

    color: #777;

    font-family: sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.03rem;
}

#stats p {
    margin: 0;

    font-size: clamp(1.05rem, 2.2vw, 1.6rem);
    line-height: 1.2;

    overflow-wrap: anywhere;
}

#comparison-stat {
    font-size: clamp(0.82rem, 1.45vw, 1.05rem);
}

#result-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;
}

#result-actions button {
    min-width: 180px;

    margin-top: 0;
    padding: 15px 24px;
}

#share-message {
    margin: 12px 0 0;

    color: #555;

    font-family: sans-serif;
    font-size: 0.85rem;
}

@keyframes result-reveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Tablet / smaller desktop
   ========================================================= */

@media (max-width: 900px) {

    #view-section {
        width: min(72%, 760px);
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    main {
        padding: 24px 14px;
    }

    #view-section {
        width: 100%;
        max-width: none;
    }

    #calculator-heading {
        margin-bottom: 32px;
    }

    #calculator-heading h1 {
        font-size: clamp(1.6rem, 8vw, 2rem);
    }

    #info {
        left: auto;
        right: -22px;
    }

    #scroll-form {
        gap: 16px;
    }

    .input-pill {
        width: 100%;
        max-width: 640px;

        gap: 5px;

        padding: 8px 12px;
    }

    .input-pill input,
    .input-pill select,
    .input-pill button {
        font-size: clamp(0.88rem, 4.8vw, 1.25rem);

        height: 54px;
    }

    #usage-inputs input {
        font-size: clamp(1.2rem, 7vw, 1.65rem);
    }

    .input-pill label {
        font-size: 0.68rem;
    }

    #speed-note {
        font-size: 0.72rem;
    }

    #unit-switch {
        width: 100%;
        max-width: 640px;
    }

    #unit-switch button {
        min-width: 0;

        flex: 1;

        font-size: 0.76rem;
    }

    #scroll-form > button[type="submit"] {
        width: min(100%, 280px);

        padding: 14px 20px;
    }

    #result-heading {
        flex-direction: column;

        gap: 12px;
    }

    #result-actions {
        width: 100%;
        max-width: 640px;

        margin: 0 auto;

        gap: 10px;
    }

    #result-actions button {
        min-width: 0;

        flex: 1;

        padding: 14px 12px;
    }

    #info-tooltip {
        max-width: 180px;

        white-space: normal;
    }

    #stats {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Very small phones
   ========================================================= */

@media (max-width: 350px) {

    main {
        padding-left: 8px;
        padding-right: 8px;
    }

    #calculator-heading h1 {
        font-size: 1.45rem;
    }

    .input-pill {
        gap: 2px;

        padding-left: 8px;
        padding-right: 8px;
    }

    .input-pill input,
    .input-pill select,
    .input-pill button {
        font-size: 0.85rem;
    }

    #usage-inputs input {
        font-size: 1.15rem;
    }

    #result-actions {
        flex-direction: column;
    }

    #result-actions button {
        width: 100%;
    }
}