/*
 * The date and time of a duty — a calendar chip beside the time range.
 * Shared by the Duty Request block and the Duty Roster.
 */

.sfr-duty-when {
    --sfr-when-accent: #0f766e;
    --sfr-when-muted: #5f6b73;
    --sfr-when-border: #d7dee2;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-align: left;
}

.sfr-duty-when__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.1rem;
    padding: .3rem 0 .35rem;
    border: 1px solid var(--sfr-when-border);
    border-radius: 8px;
    background: #fff;
    line-height: 1.05;
    overflow: hidden;
}

.sfr-duty-when__dow {
    width: 100%;
    padding: .12rem 0 .2rem;
    background: var(--sfr-when-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    /* The coloured strip sits flush with the chip's top edge. */
    margin: -.3rem 0 .25rem;
}

.sfr-duty-when__day {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sfr-duty-when__month {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sfr-when-muted);
}

.sfr-duty-when__detail {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.sfr-duty-when__time {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sfr-duty-when__date {
    color: var(--sfr-when-muted);
    font-size: .82rem;
}

.sfr-duty-when--empty {
    margin: 0;
    color: var(--sfr-when-muted);
    font-size: .9rem;
    font-style: italic;
}

/* The Duty Request header keeps this in a right-hand column: the pair hugs
   that edge, but the text inside it still reads left to right. */
.sfr-duty-when--request {
    justify-content: flex-end;
    margin-bottom: .15rem;
}

.sfr-duty-when--roster {
    margin-top: .4rem;
}