.grid-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    margin-bottom: 18px;
}

.grid-fields .form-group {
    min-width: 0;
    margin: 0;
}

.field-years,
.field-months,
.field-days {
    grid-column: span 2;
}

.field-weekly-hours,
.field-conversion-rate {
    grid-column: span 3;
}

.field-weekly-custom {
    grid-column: 1 / span 3;
}

.field-rate-custom {
    grid-column: 4 / span 3;
}

.custom-field {
    margin-top: 14px !important;
}

.grid-row-hint {
    grid-column: 1 / -1;
    margin-bottom: 18px;
}

.input-with-unit {
    position: relative;
}

.input-with-unit input {
    padding-right: 48px;
}

.input-unit {
    position: absolute;
    top: 50%;
    right: 13px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    transform: translateY(-50%);
}

.entry-list {
    display: block;
}

.entry-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
}

.entry-item:first-child {
    padding-top: 0;
}

.entry-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.entry-number {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.entry-summary {
    min-width: 0;
}

.entry-period {
    font-size: 15px;
    font-weight: 800;
}

.entry-meta {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.inline-guide-link {
    color: var(--primary);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.inline-guide-link:hover {
    color: var(--primary-hover);
}

.inline-guide-link:focus-visible {
    border-radius: 3px;
}

@media (max-width: 620px) {
    .grid-fields {
        column-gap: 8px;
    }

    .grid-fields .calculator-control {
        padding-right: 8px;
        padding-left: 8px;
    }

    .input-with-unit input {
        padding-right: 42px;
    }
}

@media (max-width: 480px) {
    .grid-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .field-years,
    .field-months,
    .field-days,
    .field-weekly-hours,
    .field-conversion-rate,
    .field-weekly-custom,
    .field-rate-custom,
    .grid-row-hint {
        grid-column: 1 / -1;
    }

    .grid-row-hint {
        margin-bottom: 4px;
    }

    .custom-field {
        margin-top: 0 !important;
    }

    .entry-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
    }

    .entry-item .actions {
        grid-column: 2;
        margin-top: -2px;
    }
}