:root{
  --slot-60:#4caf50; /* green */
  --slot-90:#2196f3; /* blue */
  --slot-120:#ff9800; /* orange */
  --slot-120p:#e91e63; /* pink */
}
.slot{height:1.5rem;border-radius:.25rem;margin:2px;display:inline-block;min-width:0.5rem}
.slot-60{background:var(--slot-60)}
.slot-90{background:var(--slot-90)}
.slot-120{background:var(--slot-120)}
.slot-120p{background:var(--slot-120p)}
.slot-multi{background: repeating-linear-gradient(45deg,var(--slot-60),var(--slot-60) 6px,var(--slot-90) 6px,var(--slot-90) 12px,var(--slot-120) 12px,var(--slot-120) 18px,var(--slot-120p) 18px,var(--slot-120p) 24px)}
.timeline{display:flex;gap:4px;flex-wrap:wrap}
.time-row{display:flex;align-items:center;gap:8px;margin-bottom:.5rem}
.time-label{width:90px;text-align:right;margin-right:6px;color:#666}
.grid{display:grid;grid-template-columns:150px 1fr;gap:8px}

/* Absolute positioned timeline for precise placement */
.timeline-wrap{overflow-x:auto}
.timeline-rel{position:relative;height:1.25rem;border:1px solid #eee;border-radius:4px;min-width:600px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 60px),
    linear-gradient(90deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 30px);
  background-size:60px 100%,30px 100%;
}
.slot-abs{position:absolute;top:0;height:100%;border-radius:4px}

/* Hour labels */
.hours-rel{position:relative;height:1.4rem;min-width:600px;overflow:visible}
.hour-label,.half-label{position:absolute;color:#666;transform:translateX(-50%)}
.hour-label{top:0;font-size:.75rem}
.half-label{top:0.7rem;font-size:.65rem;color:#888}
.hour-label.first,.half-label.first{transform:none}
.hour-label.end,.half-label.end{transform:translateX(-100%)}

/* Legend */
.legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.legend .swatch{width:18px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;border:1px solid rgba(0,0,0,.1)}

/* Slot link overlay for clickability without changing layout */
/* Keep anchor not positioned so bars position relative to .timeline-rel */
.slot-link{display:block;text-decoration:none}