.unix-timestamp-converter {
    max-width: 64rem;
}

.unix-timestamp-converter__workspace {
    display: grid;
    gap: var(--tool-gap);
}

.unix-timestamp-converter__direction {
    display: grid;
    gap: var(--tool-gap);
}

.unix-timestamp-converter__section-title,
.unix-timestamp-converter__subsection-title {
    margin: 0;
}

.unix-timestamp-converter__subsection-title {
    font-size: 1.2rem;
}

.unix-timestamp-converter__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.25rem;
}

.unix-timestamp-converter__timestamp-field,
.unix-timestamp-converter__unit-field,
.unix-timestamp-converter__interpretation-field,
.unix-timestamp-converter__hint,
.unix-timestamp-converter__now-button {
    grid-column: 1 / -1;
}

.unix-timestamp-converter__unit-field,
.unix-timestamp-converter__interpretation-field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.unix-timestamp-converter__unit-field .tool-label,
.unix-timestamp-converter__interpretation-field .tool-label {
    flex-basis: 100%;
}

.unix-timestamp-converter__radio-label {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--color-text);
    cursor: pointer;
    font-weight: 600;
}

.unix-timestamp-converter__radio-label input {
    accent-color: var(--color-accent);
}

.unix-timestamp-converter__hint {
    margin: 0;
    color: var(--color-subtext);
    font-size: 0.9rem;
}

.unix-timestamp-converter__now-button {
    justify-self: start;
}

.unix-timestamp-converter__results {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.25rem;
    padding-top: var(--tool-panel-padding);
    border-top: 1px solid var(--tool-border);
}

.unix-timestamp-converter__result-list {
    display: grid;
    gap: 0.6rem;
}

.unix-timestamp-converter__result-row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 2fr) max-content;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--tool-border);
    border-radius: var(--tool-control-radius);
    background: var(--color-surface-muted);
}

.unix-timestamp-converter__result-row--recognized,
.unix-timestamp-converter__result-row--control {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-muted));
}

.unix-timestamp-converter__result-label {
    color: var(--color-subtext);
    font-size: 0.9rem;
    font-weight: 600;
}

.unix-timestamp-converter__result-value {
    min-width: 0;
    color: var(--color-heading);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.unix-timestamp-converter__result-row .btn {
    white-space: nowrap;
}

@media (max-width: 46rem) {
    .unix-timestamp-converter__result-row {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .unix-timestamp-converter__result-value {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .unix-timestamp-converter__result-row .btn {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 36rem) {
    .unix-timestamp-converter__form {
        grid-template-columns: 1fr;
    }

    .unix-timestamp-converter__timestamp-field,
    .unix-timestamp-converter__unit-field,
    .unix-timestamp-converter__interpretation-field,
    .unix-timestamp-converter__hint,
    .unix-timestamp-converter__now-button {
        grid-column: auto;
    }

    .unix-timestamp-converter__now-button {
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unix-timestamp-converter__radio-label {
        transition: none;
    }
}