/* US time zones clock - one row per zone, abbreviation beside the time, DST pill. */
.utz-list { list-style: none; margin: 0; padding: 0; }
.utz-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--e-line); border-radius: var(--e-radius-sm); }
.utz-item:last-child { border-bottom: 0; }
.utz-you { background: var(--e-hero); border-bottom-color: transparent; }
.utz-zone { display: grid; gap: 1px; min-width: 0; }
.utz-zone strong { font-size: .95em; font-weight: 700; }
.utz-where { font-size: .76em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.utz-meta { font-size: .76em; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.utz-youpill { justify-self: start; margin: 2px 0; }
.utz-right { display: grid; justify-items: end; gap: 3px; flex: 0 0 auto; }
.utz-clock { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.utz-time { font-size: 1.25em; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.utz-abbr { font-size: .78em; font-weight: 700; color: var(--e-accent-fg); }
.utz-dst { margin-top: 10px; }
.utz-src a { color: var(--e-accent-fg); }
@media (max-width: 340px) {
    .utz-item { padding: 7px 4px; }
    .utz-time { font-size: 1.08em; }
    .utz-where { display: none; }
}
html[data-compact="1"] .utz-item { padding: 5px 8px; }
html[data-compact="1"] .utz-where { display: none; }