.tidslinje-wrap {
    font-family: 'Space Grotesk', sans-serif;
    margin: 24px 0;
    width: 100%;
}

.tidslinje-wrap * { box-sizing: border-box; }

.tl-title {
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 12px;
}

/* EUX toggle */
.tl-eux-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
    font-family: 'Space Grotesk', sans-serif;
}

.tl-tog { position: relative; width: 36px; height: 20px; flex-shrink: 0; display: inline-block; }
.tl-tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.tl-tog-slider { position: absolute; inset: 0; background: #ccc; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.tl-tog-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:white; border-radius:50%; transition:transform 0.2s; }
.tl-tog input:checked + .tl-tog-slider { background: #3D5060; }
.tl-tog input:checked + .tl-tog-slider:before { transform: translateX(16px); }

/* Desktop labels */
.tl-label-name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
    font-family: 'Space Grotesk', sans-serif;
}

.tl-label-dur {
    font-size: 12px;
    color: #888;
    font-family: 'Space Grotesk', sans-serif;
}

/* Phase bars */
.tl-phase-bar {
    position: absolute;
    border-radius: 4px 4px 4px 22px;
    opacity: 0.95;
    will-change: clip-path;
}

/* Tick SVG */
.tl-tick-svg { display: block; }

/* Tick labels */
.tl-tick-label {
    font-size: 12px;
    color: #aaa;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
}

/* Notes */
.tl-notes {
    margin-top: 8px;
    font-size: 12px;
    color: #aaa;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile/desktop visibility */
@media (max-width: 600px) {
    .tl-desktop-view { display: none; }
    .tl-mobile-view { display: block; }
}
@media (min-width: 601px) {
    .tl-desktop-view { display: block; }
    .tl-mobile-view { display: none; }
}

/* Mobile layout */
.tl-phone-inner { display: flex; gap: 10px; }

.tl-axis { position: relative; width: 36px; flex-shrink: 0; }

.tl-axis-tick {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    transform: translateY(-50%);
}

.tl-axis-tick-line { width: 5px; height: 1px; background: #ccc; flex-shrink: 0; }

.tl-axis-tick span {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    font-family: 'Space Grotesk', sans-serif;
}

.tl-bar-col { position: relative; width: 40px; flex-shrink: 0; }

.tl-labels-col { position: relative; flex: 1; }

.tl-phase-label-v {
    position: absolute;
    left: 8px;
    transform: translateY(-50%);
    will-change: opacity;
}

.tl-phase-label-v strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.3;
}

.tl-phase-label-v span {
    font-size: 11px;
    color: #666;
    font-family: 'Space Grotesk', sans-serif;
}