.timezone-bar {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	position: relative;

	.timezone-bar-cell {
		height: 1.6rem;
		border: 1px solid #999;
		border-left: none;

		&:first-child {
			border-left: 1px solid #999;
		}

		&.is-asleep {
			background: #ddd;
		}

		&.is-buffer {
			background: #fde0b0;
		}

		&.is-awake {
			background: #eaf6ea;
		}

		&.is-meetable {
			background: #4ec96a;
		}

		&.is-now {
			box-shadow: inset 2px 0 0 red;
		}
	}

	/* Day-anchored mode: red tick floats at --now-position (set inline as %).
	   Extends slightly above and below the cells so it reads as a marker, not
	   an interior border. The label sits above. */
	.timezone-bar-now {
		position: absolute;
		left: var(--now-position, 50%);
		top: -0.5rem;
		bottom: -0.5rem;
		width: 2px;
		background: red;
		pointer-events: none;
	}

	.timezone-bar-now-label {
		position: absolute;
		bottom: calc(100% + 0.25rem);
		left: 50%;
		transform: translateX(-50%);
		font-size: 0.75rem;
		color: #c00;
		white-space: nowrap;
	}
}