/* A single colour key, distribution and time control. */
footer{--chart-height:74px;--axis-position:100%;padding-top:12px;min-height:0}
.legend-heading{gap:15px;min-height:20px;margin-bottom:24px;flex-wrap:nowrap}
.legend-heading .eyebrow{flex:none;font-size:9px}
#period-status{color:#c4c3bf;font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.period-panel{display:block}
.period-chart{position:relative;min-width:0}
#legend{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;overflow:visible;padding:0;margin:0}
#legend button:nth-last-child(n){position:relative;display:grid;grid-template-rows:var(--chart-height) 16px;align-items:end;min-width:0;padding:0;border:0;border-radius:0;white-space:nowrap;font-size:9px;line-height:1.25;text-align:center;transition:none;color:#a9a6ad;outline-offset:4px}
#legend button i{height:calc(var(--share)*var(--chart-height));min-height:1px;width:100%;margin:0;display:block;background:var(--period-color);border-radius:2px 2px 0 0;opacity:.86;transition:opacity .14s;box-shadow:none}
#legend button:first-child{border-right:1px solid #8e7b6c66;padding-right:5px;margin-right:1px}
#legend button .period-label{align-self:end;font-size:9px;color:inherit;padding-top:5px}
#legend button .period-count{position:absolute;top:calc((1 - var(--share))*var(--chart-height) - 15px);left:0;right:0;font-size:9px;line-height:11px;font-variant-numeric:tabular-nums;color:inherit;pointer-events:none}
.count-short{display:none}
#legend button.current-stage i{height:calc(var(--share)*var(--chart-height));margin:0;box-shadow:0 0 17px color-mix(in srgb,var(--period-color) 28%,transparent)}
#legend button:is(:focus-visible,.preview,.building-hover,.current-stage,[aria-pressed=true]),body:not(.is-playing) #legend button:hover{color:#f1eadf}
#legend button:is(:focus-visible,.preview,.building-hover,.current-stage,[aria-pressed=true]) i,body:not(.is-playing) #legend button:hover i{opacity:1}
#legend button[aria-pressed=true]{outline:none;background:none}
#legend button[aria-pressed=true] .period-label{text-decoration:underline;text-decoration-color:var(--period-color);text-underline-offset:3px}
#legend button.building-hover i{outline:1px solid #f3e9d8;outline-offset:2px}
#legend.has-focus button:not(.preview):not([aria-pressed=true]) i{opacity:.3}
#legend button:focus-visible{outline:2px solid var(--accent)}
.period-short{display:none}
.timeline-controls{position:absolute;z-index:2;top:calc(var(--chart-height) - 12px);left:-6px;right:-6px;height:24px;margin:0;gap:0;pointer-events:none}
.timeline-controls input{width:100%;height:24px;flex:1;pointer-events:auto;min-width:0;--played:100%;touch-action:none}
.timeline-controls input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#dfc89aa6 var(--played),#73747b70 var(--played))}
.timeline-controls input::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5.5px;border:2px solid #090e13;box-shadow:0 0 0 1px #f4ead7;background:#f4ead7}
.timeline-controls input::-moz-range-track{height:1px;background:#73747b70}
.timeline-controls input::-moz-range-progress{height:1px;background:#dfc89aa6}
.timeline-controls input::-moz-range-thumb{box-sizing:border-box;width:12px;height:12px;border:2px solid #090e13;border-radius:50%;box-shadow:0 0 0 1px #f4ead7;background:#f4ead7}
#timeline-cursor{position:absolute;z-index:1;left:var(--axis-position);top:-6px;height:calc(var(--chart-height) + 6px);width:2px;transform:translateX(-50%);background:#f4ead7;box-shadow:0 0 0 1px #090e13;pointer-events:none}
#timeline-cursor::before{content:"";position:absolute;top:-1px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #f4ead7;filter:drop-shadow(0 1px 1px #090e13)}
.legend-notes{margin-top:8px;font-size:10px;gap:8px 20px;color:#a0adb7}
#building-tooltip{position:fixed;z-index:6;pointer-events:none;max-width:min(330px,calc(100vw - 24px));padding:12px 16px;background:#090e13f5;border:1px solid #65717b40;border-radius:6px;box-shadow:0 8px 30px #0005;color:#e5e2d9;line-height:1.4}
#building-tooltip strong{display:block;font-size:16px;font-weight:550;overflow-wrap:anywhere}
#building-tooltip span{display:block;font-size:13px;margin-top:3px}
#building-tooltip .hover-height{color:#89939b;font-size:12px;margin-top:6px}
#building-tooltip .hover-story{font-size:13px;line-height:1.6;color:#d1d3d0;margin:12px 0}
#building-tooltip .hover-address{color:#a2abb1;font-size:11px;margin-top:8px}
@media(max-width:1000px){
  #legend{gap:4px}
  #legend button .period-label{font-size:8px}
  #legend .period-end{display:none}
}
@media(max-width:700px){
  footer{--chart-height:48px;padding:10px 18px 12px}
  .legend-heading{gap:8px;margin-bottom:25px;min-height:18px}
  .legend-heading .eyebrow{font-size:8px;letter-spacing:1px}
  #period-status{font-size:9px;max-width:none;flex:1}
  .period-panel{display:block}
  #legend{gap:4px;padding:0;margin:0}
  #legend button:nth-last-child(n){grid-template-rows:var(--chart-height) 21px;font-size:7px}
  #legend button .period-label{font-size:8px;padding-top:7px;white-space:normal;line-height:1}
  #legend button .period-count{font-size:7px}
  .count-full{display:none}
  .count-short{display:inline}
  #legend button:not(:first-child):not(:last-child):nth-child(2n) .period-label{visibility:hidden}
  #legend .period-full{display:none}
  #legend .period-short{display:inline}
  #legend button:first-child{padding-right:3px;margin-right:0}
  .legend-notes{margin-top:8px;font-size:9px;gap:4px 12px}
}
@media(max-height:650px) and (min-width:701px){footer{--chart-height:54px}}
@media(max-height:550px){footer{--chart-height:36px;padding-top:8px;padding-bottom:8px}.legend-heading{margin-bottom:20px}.legend-notes{margin-top:4px}}
@media(hover:none){#building-tooltip{display:none!important}}