/* Timeline document (ux.md §7.3) */

.timeline-toolbar { margin-bottom: var(--space-3); }
.timeline { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.timeline-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-top: 1px solid var(--border); }
.timeline-row.header { border-top: 0; background: var(--surface); }
.timeline-label { padding: 4px 8px; font-size: var(--font-size-small); display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); background: var(--surface); min-width: 0; }
.timeline-label .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.timeline-label .row-actions { display: flex; gap: 2px; opacity: 0; }
.timeline-row:hover .row-actions { opacity: 1; }
.timeline-label .icon-btn { width: 20px; height: 20px; }
.timeline-plot { width: 100%; display: block; cursor: crosshair; }
.timeline-row.header .timeline-plot { height: 26px; cursor: default; }

.timeline-plot .tick { stroke: var(--border-strong); stroke-width: 1; }
.timeline-plot .tick-label { fill: var(--text-muted); font-size: 11px; }
.timeline-plot .tick-label.major { fill: var(--text); font-weight: 600; }
.timeline-plot .grid { stroke: var(--border); stroke-width: 1; }
.timeline-plot .cursor { stroke: var(--accent); stroke-width: 2; }
.timeline-plot .highlight { fill: color-mix(in srgb, var(--warning) 14%, transparent); }
.timeline-plot .sign-band { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.timeline-plot .series { fill: none; stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Price candles (plan 12): blue up, red down, like the soft and hard aspects. */
.timeline-plot .candle line { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.timeline-plot .candle.up rect { fill: var(--aspect-soft); }
.timeline-plot .candle.down rect { fill: var(--aspect-hard); }
.timeline-plot .scale-label { font-size: 10px; fill: var(--text-muted); }
.timeline-plot .marker.index-high circle { fill: var(--aspect-soft); stroke: none; }
/* Plan 13: declination extremes and out of bounds; Mercury and Venus cycles. */
.timeline-plot .marker.declination-north circle, .timeline-plot .marker.declination-south circle { fill: var(--surface); stroke: var(--text-muted); }
.timeline-plot .marker.out-of-bounds circle { fill: var(--warning); stroke: none; }
.timeline-plot .marker.conjunction-inferior circle { fill: var(--text); stroke: none; }
.timeline-plot .marker.conjunction-superior circle { fill: var(--surface); stroke: var(--text); }
.timeline-plot .marker.elongation-east circle, .timeline-plot .marker.elongation-west circle { fill: var(--accent); stroke: none; }

.timeline-plot .lane-glyph, .timeline-plot .bar-glyph, .timeline-plot .block-glyph, .timeline-plot .marker-glyph {
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text);
}
.timeline-plot .lane-separator { stroke: var(--border); stroke-width: 1; }
.timeline-plot .bar rect { fill-opacity: 0.35; }
.timeline-plot .bar.aspect-hard rect { fill: var(--aspect-hard); }
.timeline-plot .bar.aspect-soft rect { fill: var(--aspect-soft); }
.timeline-plot .bar.aspect-neutral rect { fill: var(--aspect-neutral); }
.timeline-plot .bar .exact { stroke: var(--text); stroke-width: 2; }
.timeline-plot .bar:hover rect { fill-opacity: 0.6; }

.timeline-plot .block rect { fill-opacity: 0.18; stroke: var(--surface); stroke-width: 2; }
.timeline-plot .block.el-fire rect { fill: var(--fire); }
.timeline-plot .block.el-earth rect { fill: var(--earth); }
.timeline-plot .block.el-air rect { fill: var(--air); }
.timeline-plot .block.el-water rect { fill: var(--water); }

.timeline-plot .marker circle { stroke: var(--text); stroke-width: 1.2; fill: var(--raised); }
.timeline-plot .marker.new-moon circle { fill: var(--text); }
.timeline-plot .marker.solar-eclipse circle { fill: var(--text); stroke: var(--accent); stroke-width: 3; }
.timeline-plot .marker.lunar-eclipse circle { fill: var(--raised); stroke: var(--accent); stroke-width: 3; }
.timeline-plot .marker.station-r circle { fill: var(--aspect-hard); stroke: none; }
.timeline-plot .marker.station-d circle { fill: var(--aspect-soft); stroke: none; }
.timeline-plot .marker.aspect-hard .marker-glyph { color: var(--aspect-hard); }
.timeline-plot .marker.aspect-soft .marker-glyph { color: var(--aspect-soft); }
.timeline-plot .marker.aspect-neutral .marker-glyph { color: var(--aspect-neutral); }
.timeline-plot .marker.ingress .marker-glyph { color: var(--accent); }
.timeline-plot .marker.index-low circle { fill: var(--aspect-hard); stroke: none; }

.add-row-form { gap: var(--space-1); }

@media (max-width: 800px) {
    .timeline-row { grid-template-columns: 110px minmax(0, 1fr); }
}