/* Hourly day-timeline (dayTimeline.js) and the "now" indicators in both the
   month calendar and the timeline (see docs/API.md "Hourly day timeline &
   'now' indicator"). Split out of styles.css — which is at its 500-line cap
   — following the same per-feature stylesheet convention as checklist.css. */

:root {
  --now: #ef4444;
}

/* ---------- Day timeline (day-editor slideover) ---------- */
.day-timeline { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); }

.dt-allday { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dt-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; border: none; border-left: 3px solid var(--chip); border-radius: 6px; background: color-mix(in srgb, var(--chip) 16%, var(--surface)); color: var(--chip-text); font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.5rem; cursor: pointer; }
.dt-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }

.dt-grid-wrap { position: relative; display: flex; }
.dt-hours { flex: 1; display: flex; flex-direction: column; }
.dt-hour-row { flex-shrink: 0; box-sizing: border-box; border-top: 1px solid var(--border); padding-left: 3rem; position: relative; }
.dt-hour-row:first-child { border-top: none; }
.dt-hour-label { position: absolute; left: 0; top: -0.55em; width: 2.7rem; font-size: 0.68rem; font-weight: 700; color: var(--text-faint); text-align: right; padding-right: 0.4rem; }

.dt-events { position: absolute; inset: 0; left: 3rem; }
.dt-block {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: none;
  border-left: 3px solid var(--chip);
  border-radius: 5px;
  background: color-mix(in srgb, var(--chip) 22%, var(--surface));
  color: var(--chip-text);
  font-size: 0.74rem;
  font-weight: 600;
  text-align: left;
  padding: 0.15rem 0.4rem;
  margin-right: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.dt-block-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dt-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 3; pointer-events: none; }
.dt-now-dot { position: absolute; left: -0.3rem; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- Month calendar "now" slider (calendar.js) ---------- */
.cal-day.cal-today { position: relative; }
.cal-today .cal-daynum { color: var(--now); font-weight: 800; }
.cal-now-slider { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--now); pointer-events: none; z-index: 2; }
.cal-now-dot { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--surface); }

@media (max-width: 480px) {
  .dt-hour-row { padding-left: 2.4rem; }
  .dt-hour-label { width: 2.1rem; }
  .dt-events { left: 2.4rem; }
}