.tl-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.6rem; align-items: center; margin: 0.45rem 0; }
.tl-city { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tl-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  background: var(--sheet);
  border: 1px solid var(--border);
  overflow: hidden;
}
.tl-cell {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.62rem;
  text-align: center;
  padding: 0.45rem 0;
  border-right: 1px solid var(--border);
}
.tl-cell.is-day { background: var(--highlight); color: var(--ink); }
.tl-cell.is-night { background: var(--panel); color: #E9DFC5; }
.tl-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  pointer-events: none;
}
.tl-legend { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 759px) {
  .tl-row { grid-template-columns: 1fr; }
  .tl-bar { overflow-x: auto; }
}