/* Unit converter (/unit-converter): what is its own - the two sides with the swap button between them, the large value
   fields, the sentence under them and the clickable table of all units. The stage, panel, fields, buttons, table and
   colours come from the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

.unitconverter-landing-app .uc {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    gap: var(--ak-space-4);
}

/* From | swap | To; stacked on a phone. */
.unitconverter-landing-app .uc-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 0.75rem;
}

.unitconverter-landing-app .uc-pair > .ak-row {
    gap: 0.35rem;
}

/* The value fields are large; the side that is worked out (not the one being typed in) carries the accent. The long
   selector matches the kit's field rule (site.css styles every text input). */
.unitconverter-landing-app input.ak-field.uc-input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    padding: 0.5rem 0.7rem;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.unitconverter-landing-app input.ak-field.uc-input.uc-input--result:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    border-color: var(--ak-accent);
    background: color-mix(in srgb, var(--ak-accent) 8%, var(--ak-field));
    font-weight: 600;
}

.unitconverter-landing-app .uc-swap {
    align-self: center;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-size: 1.2rem;
}

.unitconverter-landing-app .uc-swap:hover {
    border-color: var(--ak-accent);
    color: var(--ak-accent);
}

/* "1 km = 0.62137119 mi": the answer stands out. */
.unitconverter-landing-app .uc-formula {
    margin: 0;
    color: var(--ak-muted);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: anywhere;
}

.unitconverter-landing-app .uc-formula strong {
    color: var(--ak-accent);
    font-weight: 700;
}

/* All units: long numbers wrap in the narrow panel instead of scrolling sideways; a row picks that unit as "To". */
.unitconverter-landing-app .uc-table th,
.unitconverter-landing-app .uc-table td {
    white-space: normal;
}

.unitconverter-landing-app .uc-table .uc-val {
    overflow-wrap: anywhere;
}

.unitconverter-landing-app .uc-table .uc-sym {
    color: var(--ak-muted);
    white-space: nowrap;
}

.unitconverter-landing-app .uc-table tbody tr {
    cursor: pointer;
}

.unitconverter-landing-app .uc-table tbody tr:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: -2px;
}

.unitconverter-landing-app .uc-table tr.is-current {
    box-shadow: inset 3px 0 0 var(--ak-accent);
}

.unitconverter-landing-app .uc-table tr.is-current .uc-val {
    font-weight: 700;
}

@media (max-width: 640px) {
    .unitconverter-landing-app .uc-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .unitconverter-landing-app .uc-swap {
        justify-self: center;
        transform: rotate(90deg);
    }
}