/* XP calculator (calculator/index.html + calc.js). Uses the site's colour and font tokens from programs/styles.css. */

#xp-calc {
    width: 100%;
}

/* Wide screens: the form on the left, results beside it. Narrow: one under the other. */
#xp-calc .calc-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    gap: 1rem 3rem;
    align-items: start;
    margin-top: .6rem;
}

@media (max-width: 56rem) {
    #xp-calc .calc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

#xp-calc .calc-intro {
    margin: 1rem 0 0 .35rem;
    font-size: .9rem;
    color: hsl(var(--clr-light) / .8);
}

/* Inputs: label | current | target, one row per field */
#xp-calc .calc-inputs {
    display: grid;
    grid-template-columns: minmax(5.5rem, max-content) minmax(4.5rem, 7rem) minmax(4.5rem, 7rem);
    gap: .2rem .5rem;
    align-items: center;
    margin: 0;
}

/* Same look and height as the results table's header row, numbers right-aligned under it */
#xp-calc .calc-head {
    align-self: stretch;
    font-family: var(--ff-serif);
    font-size: .8rem;
    line-height: 1.5;
    color: hsl(var(--clr-accent));
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
    padding: .4rem .4rem;
    border-bottom: .1rem solid hsl(var(--clr-accent) / .6);
}

#xp-calc label {
    font-family: var(--ff-sans-cond);
    font-size: 1rem;
    line-height: 1.1;
    color: hsl(var(--clr-light));
}

#xp-calc label small {
    display: block;
    font-size: .7rem;
    white-space: nowrap;
    color: hsl(var(--clr-light) / .5);
}

#xp-calc input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    text-align: right;
    padding: .1rem .4rem;
    color: hsl(var(--clr-light));
    background: hsl(var(--clr-dark));
    border: .1rem solid hsl(var(--clr-accent) / .5);
    border-radius: .2rem;
    outline: none;
    -moz-appearance: textfield;
}

#xp-calc input[type="number"]::-webkit-outer-spin-button,
#xp-calc input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#xp-calc input:focus {
    border-color: hsl(var(--clr-accent));
    box-shadow: 0 0 0 .15rem hsl(var(--clr-accent) / .3);
}

#xp-calc input.invalid {
    border-color: hsl(0 80% 60%);
    color: hsl(0 80% 70%);
}

/* Buttons */
#xp-calc .calc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .8rem 0 0;
}

#xp-calc .calc-actions button {
    font-family: var(--ff-serif);
    font-size: var(--fs-300);
    color: hsl(var(--clr-light) / .8);
    background: hsl(var(--clr-dark));
    border: .1rem solid hsl(var(--clr-light) / .5);
    border-radius: .2rem;
    padding: .2rem .9rem;
    cursor: pointer;
}

#xp-calc .calc-actions button:hover,
#xp-calc .calc-actions button:focus-visible {
    color: hsl(var(--clr-accent));
    border-color: hsl(var(--clr-accent));
    outline: none;
}

/* Results */
#xp-calc .calc-results {
    margin-top: 0;
    max-width: 52rem;
}

#xp-calc .calc-credit {
    margin: 1.5rem 0 0 .35rem;
    font-size: .8rem;
    color: hsl(var(--clr-light) / .5);
}

#xp-calc .calc-lead {
    font-family: var(--ff-sans-cond);
    font-size: 1.05rem;
    margin: .8rem 0 0 .35rem;
    min-height: 1.6rem;
}

#xp-calc .calc-lead strong {
    color: hsl(var(--clr-accent));
    font-size: 1.2rem;
}

#xp-calc .calc-warn {
    display: block;
    color: hsl(40 90% 65%);
    font-size: .9rem;
}

#xp-calc .calc-errors {
    margin: 0;
    padding-left: 1.5rem;
    color: hsl(0 80% 70%);
}

#xp-calc .calc-errors li {
    padding: .1rem 0;
}

#xp-calc .calc-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: .1rem solid hsl(var(--clr-accent) / .6);
    font-family: var(--ff-sans-cond);
    font-size: var(--fs-200);
}

#xp-calc .calc-table th,
#xp-calc .calc-table td {
    padding: .3rem .6rem;
    border: none;
    vertical-align: baseline;
}

#xp-calc .calc-table thead th {
    text-align: right;
    font-size: .8rem;
    line-height: 1.5;
    letter-spacing: 1px;
    border-top: none;
    border-bottom: .1rem solid hsl(var(--clr-accent) / .6);
    padding: .4rem .6rem;
}

#xp-calc .calc-table tbody th {
    font-family: var(--ff-sans-cond);
    font-size: 1rem;
    text-transform: none;
    text-align: left;
    color: hsl(var(--clr-light));
    background: transparent;
    border: none;
    padding: .3rem .6rem;
    font-weight: 500;
}

#xp-calc .calc-table tbody th small {
    display: block;
    font-size: .72rem;
    color: hsl(var(--clr-light) / .5);
}

#xp-calc .calc-table tbody tr:nth-child(even) {
    background: hsl(var(--clr-light) / .04);
}

#xp-calc .calc-table .calc-group th {
    font-family: var(--ff-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: hsl(var(--clr-accent));
    background: hsl(var(--clr-dark));
    padding-top: .7rem;
}

#xp-calc .calc-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 11rem;
}

#xp-calc .calc-table td.up { color: hsl(120 50% 65%); }
#xp-calc .calc-table td.down { color: hsl(0 70% 70%); }

/* Phones: label on its own line, the three numbers under it with their own captions */
@media (max-width: 36rem) {
    #xp-calc .calc-table thead { display: none; }

    #xp-calc .calc-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: .35rem .3rem;
    }

    #xp-calc .calc-table tbody th {
        grid-column: 1 / -1;
        width: auto;
        padding: 0 .3rem .15rem;
    }

    #xp-calc .calc-table .calc-group {
        display: block;
    }

    #xp-calc .calc-table td {
        padding: 0 .3rem;
        text-align: left;
    }

    #xp-calc .calc-table td::before {
        content: attr(data-col);
        display: block;
        font-size: .65rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: hsl(var(--clr-light) / .45);
    }
}