/* growth.html: the timeline control above the map */
#tl { display:flex; align-items:center; gap:.7rem; margin:.2rem 0 1.9rem; }
  #tl button { font:14px/1 Georgia, serif; width:2rem; height:2rem;
       cursor:pointer; border-radius:3px; border:1px solid #c9c0ae;
       background:rgba(251,250,247,.96); color:var(--ink); }
  #track { position:relative; flex:1; height:1.9rem; }
  #slider { position:absolute; top:0; left:0; width:100%; height:18px;
       margin:0;
       -webkit-appearance:none; appearance:none; background:none;
       cursor:pointer; }
  #slider::-webkit-slider-runnable-track { height:3px; border-radius:2px;
       background:linear-gradient(to right, #7a3b2e var(--pct), #d8d0bf 0); }
  #slider::-moz-range-track { height:3px; border-radius:2px;
       background:linear-gradient(to right, #7a3b2e var(--pct), #d8d0bf 0); }
  #slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
       width:14px; height:14px; margin-top:-5.5px; border-radius:50%;
       background:#7a3b2e; border:1px solid #4a2418; }
  #slider::-moz-range-thumb { width:12px; height:12px; border-radius:50%;
       background:#7a3b2e; border:1px solid #4a2418; }
  #ticks .tick { position:absolute; top:12px; width:4px; height:8px;
       margin-left:-1.5px; border:.5px solid rgba(74,36,24,.35);
       pointer-events:none; }
  #ticks .lab { position:absolute; top:21px; z-index:2;
       transform:translateX(-50%);
       font:10.5px/1 Georgia, serif; color:var(--muted); white-space:nowrap; }
  #ticks .lab.on { color:var(--ink); font-weight:bold; }
  #yr { font:bold 20px/1 Georgia, serif; width:3.4em; text-align:right; }
  #holdlab { font:12px/1 Georgia, serif; 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 .gap { color:#8a3b3b; }
  #ticks .ev { position:absolute; top:13px; width:1px; height:6px;
       background:rgba(122,59,46,.45); pointer-events:none; }
  #tlcap b { font-size:1.05em; }
  #tlcap .ord { font-variant-numeric:tabular-nums; }
  #tlcap .colony { color:#8a3b3b; }