/* growth.html: the timeline's extras; the slider itself lives in map.css */
#tl button { width: 2rem; height: 2rem; padding: 0; }
#ticks .tick { width: 4px; margin-left: -1.5px; background: none;
       border: .5px solid var(--muted); }
#ticks .ev { position: absolute; top: 13px; width: 1px; height: 6px;
       background: var(--d-colony); opacity: .6; pointer-events: none; }
#holdlab { font: 12px/1 var(--sans); color: var(--muted);
       white-space: nowrap; cursor: pointer; }
#holdlab input { accent-color: var(--accent); vertical-align: -1px; }
#tlcap { margin: .2rem 0 .5rem; min-height: 2.6em; }
#tlcap b { font-size: 1.05em; }
#tlcap .ord { font-variant-numeric: tabular-nums; }
#tlcap .gap, #tlcap .colony { color: var(--d-colony); }
/* the track fills to the year shown (growth.js sets --pct) */
#slider::-webkit-slider-runnable-track {
       background: linear-gradient(to right, var(--ink) var(--pct), var(--rule) 0); }
#slider::-moz-range-track {
       background: linear-gradient(to right, var(--ink) var(--pct), var(--rule) 0); }