/* Lessons 6–10 use lab.css; this file adds the ten-person timeline and a few scene details. */
/* Dates sit outside each bend, with the era below the year at half size. */
.timeline-bend-dates{pointer-events:none}
.bend-date{position:absolute;left:calc(var(--bend-x) + 12px);transform:translateY(-50%);z-index:1;color:var(--ink);font:700 30px/1.2 var(--sans);text-align:center;white-space:nowrap}
.bend-date:nth-child(even){left:calc(var(--bend-x) - 12px);transform:translate(-100%,-50%)}
.bend-date>span{display:block}
.bend-date>span:last-child{font-size:.5em;margin-top:2px}
@media(min-width:761px) and (max-width:1250px){.timeline{margin-left:16px;margin-right:16px}}
@media(min-width:761px) and (max-width:1050px){.bend-date{font-size:28px}.timeline{margin-left:32px;margin-right:32px}}
@media(max-width:760px){.timeline-bend-dates{display:none}}
.new-context{margin:24px 0;font-size:19px;border:1px solid var(--line);padding:20px 24px;border-radius:8px}
.new-context summary{cursor:pointer;color:var(--copper);font-weight:600;min-height:44px}
.new-context p{margin-top:15px;max-width:780px}
/* Labels drawn on the night sky (Hipparchus). */
.lab-scene text.on-dark{fill:#f3ecd7;stroke:#172039}
.lab-scene text.lbl-hint.on-dark{fill:#ffe38a}
@media(min-width:761px){
 .timeline{height:5890px}.timeline-path{height:5890px}
 .item-6{left:18%;top:630px}.item-7{left:46%;top:630px}.item-8{left:78%;top:630px}.item-9{left:65%;top:945px}.item-10{left:28%;top:945px}
 .item-11{left:18%;top:1260px}.item-12{left:46%;top:1260px}.item-13{left:78%;top:1260px}
 .item-14{left:65%;top:1575px}.item-15{left:28%;top:1575px}
 .item-16{left:18%;top:1890px}.item-17{left:46%;top:1890px}.item-18{left:78%;top:1890px}
 .item-19{left:65%;top:2205px}.item-20{left:28%;top:2205px}
 .item-21{left:18%;top:2520px}.item-22{left:46%;top:2520px}.item-23{left:78%;top:2520px}
 .item-24{left:65%;top:2835px}.item-25{left:28%;top:2835px}
 .item-26{left:18%;top:3150px}.item-27{left:46%;top:3150px}.item-28{left:78%;top:3150px}
 .item-29{left:65%;top:3465px}.item-30{left:28%;top:3465px}
 .timeline-item:nth-child(31){left:18%;top:3780px}.timeline-item:nth-child(32){left:46%;top:3780px}.timeline-item:nth-child(33){left:78%;top:3780px}
 .timeline-item:nth-child(34){left:65%;top:4095px}.timeline-item:nth-child(35){left:28%;top:4095px}
 .timeline-continuation{top:5707px}.today{top:5838px}
}
.lab-working{display:none}
@media(max-width:760px){
 .new-context{padding:16px}.new-context summary{font-size:18px}
 /* On a phone the in-scene working is too small to read, so it is repeated as a list. */
 .lab-working{display:block;margin:14px 14px 0;padding:14px 16px 14px 40px;background:#f3ead6;border:1px solid #c8b48c;border-radius:10px;font:22px/1.4 var(--serif)}
 .lab-working li+li{margin-top:8px}.lab-working small{display:block;font:16px var(--sans);color:#5f5c4d}
}

@media(min-width:761px){
 .item-36{left:18%;top:4410px} .item-37{left:46%;top:4410px} .item-38{left:78%;top:4410px} .item-39{left:65%;top:4725px} .item-40{left:28%;top:4725px} .item-41{left:18%;top:5040px} .item-42{left:46%;top:5040px} .item-43{left:78%;top:5040px} .item-44{left:65%;top:5355px} .item-45{left:28%;top:5355px}
}