.row {
    display: flex;
    width: var(--fill);
    align-items: center;
    gap: var(--len-4);
    border-radius: var(--len-12);
    border: 1px solid var(--line);
    background-color: var(--white);
    padding: var(--len-10) var(--len-12);
    text-align: left;
    transition: border-color var(--t-150), background-color var(--t-150);
}

.row:hover:not(:disabled) { border-color: var(--ogblue); }

.is-auto.row {
    outline: var(--len-2) dashed var(--subject-strong);
    outline-offset: var(--outline-in);
    border-color: transparent;
    background-color: color-mix(in srgb, var(--subject-light) var(--mix-row), transparent);
}

.is-held.row,
.is-booked.row {
    outline: var(--len-2) solid var(--subject-strong);
    outline-offset: var(--outline-in);
    border-color: transparent;
    background-color: color-mix(in srgb, var(--subject-light) var(--mix-row), transparent);
}

.is-clash.row { opacity: var(--dim-70); }

.row:disabled { cursor: default; }

.row:focus-visible { outline: var(--len-2) solid var(--ogblue); outline-offset: var(--len-2); }

.row-time {
    width: var(--len-56);
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--fs-13);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-125);
    color: var(--charcoal);
}

.row-rule {
    display: none;
    height: var(--len-32);
    width: 1px;
    flex-shrink: 0;
    background-color: var(--line);
}

.row-grid {
    display: grid;
    min-width: 0;
    flex: 1;
    grid-template-columns: var(--len-60) var(--s48) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--len-4);
}

.row-grid-ucat { grid-template-columns: var(--s48) minmax(0, 1fr); }

.row-prog { display: block; }

.row-prog-wide { display: none; }

.row-code { font-size: var(--fs-12); line-height: var(--lh-14); color: var(--charcoal-m); }

.row-where {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--len-2);
    font-size: var(--fs-10);
    line-height: var(--lh-12);
    color: var(--charcoal-m);
}

.row-place { display: inline-flex; min-width: 0; align-items: center; gap: var(--len-4); }

.row-place svg { width: var(--len-12); height: var(--len-12); flex-shrink: 0; }

.row-slots { display: flex; flex-shrink: 0; align-items: center; gap: var(--len-4); }

.row-open { flex-shrink: 0; }

.row-state { display: none; }

@media (min-width: 40rem) {
    .row { gap: var(--len-8); }

    .row-time { width: var(--s48); }

    .row-rule { display: block; }

    .row-grid {
        margin-left: var(--len-4);
        column-gap: var(--len-12);
        grid-template-columns: var(--len-80) var(--len-88) minmax(0, 1fr);
    }

    .row-grid-ucat { grid-template-columns: var(--len-88) minmax(0, 1fr); }

    .row-prog { display: none; }

    .row-prog-wide { display: block; }

    .row-where { gap: var(--len-4); font-size: var(--fs-12); line-height: var(--lh-15); }

    .row-state { display: block; }
}