| .timeline-view { |
| position: relative; |
| background: var(--bg); |
| overflow: auto; |
| min-height: 100%; |
| display: grid; |
| gap: var(--sp-4); |
| padding: var(--sp-4); |
| } |
|
|
| .timeline-view__svg { |
| width: 100%; |
| max-width: 100%; |
| height: auto; |
| display: block; |
| } |
|
|
| .timeline-view__loading { |
| min-height: 200px; |
| display: grid; |
| place-items: center; |
| color: var(--text-muted); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| gap: var(--sp-2); |
| } |
|
|
| |
| .timeline-view__interest-chart-placeholder { |
| min-height: 160px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .timeline-view__tick { |
| font-family: var(--font-mono); |
| font-size: 11px; |
| fill: var(--text-muted); |
| letter-spacing: 0.08em; |
| } |
|
|
| .timeline-view__axis-label { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| fill: var(--text-faint); |
| letter-spacing: 0.22em; |
| } |
|
|
| .timeline-view__event { |
| font-family: var(--font-mono); |
| font-size: 11px; |
| fill: var(--accent); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .timeline-view__header { |
| display: flex; |
| justify-content: space-between; |
| align-items: end; |
| } |
|
|
| .timeline-view__title { |
| margin: 0; |
| font-size: clamp(1rem, 1.2vw + 0.8rem, 1.25rem); |
| letter-spacing: 0.02em; |
| } |
|
|
| .timeline-card { |
| border: 1px solid var(--border); |
| background: color-mix(in srgb, var(--bg-elev) 92%, transparent); |
| } |
|
|
| .timeline-card__head { |
| display: flex; |
| justify-content: space-between; |
| align-items: end; |
| gap: var(--sp-3); |
| padding: var(--sp-3) var(--sp-4) var(--sp-2); |
| } |
|
|
| .timeline-card__head--controls { |
| align-items: center; |
| } |
|
|
| .timeline-card--interest .timeline-card__head { |
| align-items: flex-start; |
| } |
|
|
| .timeline-card__subtle--interest { |
| margin-top: var(--sp-2); |
| max-width: 52ch; |
| line-height: 1.45; |
| letter-spacing: 0.02em; |
| text-transform: none; |
| } |
|
|
| .timeline-card__subtle--keywords { |
| margin-top: var(--sp-1); |
| text-transform: none; |
| letter-spacing: 0.03em; |
| } |
|
|
| .timeline-card__subtle--keywords .label { |
| margin-right: var(--sp-2); |
| } |
|
|
| .timeline-card__title { |
| margin: 0; |
| font-size: 1rem; |
| } |
|
|
| .timeline-card__subtle { |
| margin: 0; |
| color: var(--text-muted); |
| font-size: var(--fs-xs); |
| } |
|
|
| .timeline-controls { |
| display: flex; |
| gap: var(--sp-3); |
| align-items: end; |
| } |
|
|
| .timeline-controls label { |
| display: grid; |
| gap: var(--sp-1); |
| } |
|
|
| .timeline-controls select { |
| min-width: 150px; |
| } |
|
|
| .timeline-legend { |
| position: static; |
| z-index: 0; |
| background: rgba(13, 15, 20, 0.65); |
| border: 1px solid var(--border); |
| padding: var(--sp-3) var(--sp-4); |
| min-width: 220px; |
| margin: 0 var(--sp-4) var(--sp-3); |
| } |
|
|
| .timeline-legend__title { |
| margin-bottom: var(--sp-2); |
| } |
|
|
| .timeline-legend__bar { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| height: 8px; |
| } |
|
|
| .timeline-legend__cell { |
| height: 100%; |
| } |
|
|
| .timeline-legend__scale { |
| display: flex; |
| justify-content: space-between; |
| margin-top: var(--sp-1); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--text-faint); |
| } |
|
|
| @media (max-width: 900px) { |
| .timeline-view { |
| padding: var(--sp-3); |
| } |
|
|
| .timeline-card__head, |
| .timeline-card__head--controls { |
| align-items: start; |
| flex-direction: column; |
| } |
|
|
| .timeline-controls { |
| width: 100%; |
| } |
|
|
| .timeline-controls label, |
| .timeline-controls select { |
| width: 100%; |
| } |
|
|
| .timeline-legend { |
| margin-inline: var(--sp-3); |
| min-width: 0; |
| } |
| } |
|
|
