/* The clocks sit inside the "Your Clocks" card, so each is a tinted tile rather than a second white card */
#wc_clocks .time-card {
    background-color: var(--ck-surface-2);
}

#wc_clocks .title {
    display: block;
    font-size: 1.25rem;
    line-height: 1.2;
}

#wc_clocks .time {
    display: block;
    line-height: 1.2;
    font-size: 1.5rem;
    font-weight: bold;
}

#wc_clocks .date,
#wc_clocks .difference {
    display: block;
}

.wc-zone-list {
    font-size: 0.875rem;
    scrollbar-width: thin;
}

/* The Add Timezone dialog: the list keeps one height while it filters, so the dialog doesn't jump as you type;
   a short window still shrinks it, since the dialog scrolls its body */
.wc-zone-results {
    height: 24rem;
    scrollbar-width: thin;
}

.wc-zone {
    cursor: pointer;
    font-size: 0.875rem;
    user-select: none;
}

.wc-zone:hover,
.wc-zone:focus-visible {
    background-color: var(--ck-surface-2);
}

/* Inside the scrolling list the browser's own outline would be clipped at the edges */
.wc-zone:focus-visible {
    outline: 2px solid var(--ck-accent);
    outline-offset: -2px;
}

.wc-zone.is-added {
    cursor: default;
    color: var(--ck-text-3);
    background-color: transparent;
    opacity: 0.5;
}