.hicrohrs-status {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.65em;
}

.hicrohrs-status__dot {
    width: 0.65em;
    height: 0.65em;
    margin-top: 0.42em;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.hicrohrs-status__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
}

.hicrohrs-status__date {
    display: block;
    font-weight: 600;
}

.hicrohrs-status__label {
    display: block;
    font-weight: 700;
}

.hicrohrs-status__note,
.hicrohrs-status__hours {
    display: block;
    color: inherit;
}

.hicrohrs-hours__list {
    margin: 0;
}

.hicrohrs-hours__row {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(150px, 1fr);
    gap: 1rem;
    padding: 0.35rem 0;
}

.hicrohrs-hours__row dt,
.hicrohrs-hours__row dd {
    margin: 0;
}

.hicrohrs-hours__row dt {
    font-weight: 600;
}

/*
 * Upcoming days share one date column. Its width is determined by the longest
 * localized date. The leader is part of that same column and therefore forms
 * one continuous dotted line from the end of each label to the value column.
 */
.hicrohrs-hours--upcoming {
    container-type: inline-size;
    container-name: hicrohrs-upcoming;
}

.hicrohrs-hours--upcoming .hicrohrs-hours__list {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 0;
    align-items: start;
    width: max-content;
    max-width: 100%;
}

.hicrohrs-hours__row--upcoming {
    display: contents;
}

.hicrohrs-hours__row--upcoming dt,
.hicrohrs-hours__row--upcoming dd {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.hicrohrs-hours__row--upcoming dt {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.hicrohrs-hours__date-label {
    flex: 0 0 auto;
}

/*
 * At least about three characters of dotted spacing after the longest date.
 * Shorter date labels automatically receive a longer leader so all values
 * start in exactly the same column.
 */
.hicrohrs-hours__date-leader {
    flex: 1 1 3ch;
    min-width: 3ch;
    height: 1em;
    margin: 0 0.75ch;
    border-bottom: 2px dotted currentColor;
    opacity: 0.45;
    transform: translateY(-0.18em);
}

.hicrohrs-hours__row--upcoming dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

.hicrohrs-hours__value,
.hicrohrs-hours__note {
    display: block;
}

/*
 * In narrow containers (for example a Divi column) the value moves below the
 * date instead of colliding with it. The dotted leader is hidden there.
 */
@container hicrohrs-upcoming (max-width: 40rem) {
    .hicrohrs-hours--upcoming .hicrohrs-hours__list {
        display: block;
        width: 100%;
        max-width: none;
    }

    .hicrohrs-hours__row--upcoming {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
        padding: 0.45rem 0;
    }

    .hicrohrs-hours__row--upcoming dt,
    .hicrohrs-hours__row--upcoming dd {
        margin: 0;
        min-width: 0;
    }

    .hicrohrs-hours__row--upcoming dt {
        display: block;
    }

    .hicrohrs-hours__date-leader {
        display: none;
    }

    .hicrohrs-hours__row--upcoming dd {
        padding-left: 0;
    }
}

/* Fallback for browsers without container-query support. */
@media (max-width: 700px) {
    .hicrohrs-hours--upcoming .hicrohrs-hours__list {
        display: block;
        width: 100%;
        max-width: none;
    }

    .hicrohrs-hours__row--upcoming {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
        padding: 0.45rem 0;
    }

    .hicrohrs-hours__row--upcoming dt,
    .hicrohrs-hours__row--upcoming dd {
        margin: 0;
        min-width: 0;
    }

    .hicrohrs-hours__row--upcoming dt {
        display: block;
    }

    .hicrohrs-hours__date-leader {
        display: none;
    }

    .hicrohrs-hours__row--upcoming dd {
        padding-left: 0;
    }
}