/* Exact dates, bounded playback and a linear, zoomable historical period. */
body{--history-timeline-height:214px}
body:not(.present-day):not(.fullscreen-map):not(.presenting):not(.hide-map-timeline) #workspace{height:calc(100svh - 78px - var(--history-timeline-height));min-height:300px}
.timeline{height:auto;min-height:var(--history-timeline-height);padding:10px 28px 12px;box-sizing:border-box}
.timeline .timeline-top{display:grid;grid-template-columns:minmax(220px,1fr) 142px auto;gap:10px;align-items:center}
.timeline .time-heading{display:flex;min-width:0}
.timeline-navigation{display:flex;align-items:center;gap:8px}
.timeline-navigation select,.timeline-navigation button{min-height:44px;border:1px solid #425767;border-radius:7px;padding:8px 12px;background:#192a37;color:#dfebf2;font-size:13px;white-space:nowrap}
.timeline-navigation select{max-width:180px;min-width:0;cursor:pointer}
.timeline-navigation #latest-map{color:#edcf92;border-color:#75603b;background:#302b20}
.timeline-navigation :is(select,button):focus-visible{outline:2px solid #edcf92;outline-offset:3px}
.timeline .year-form{display:flex;width:142px;height:44px;min-height:44px;margin:0}
.timeline .year-form input{width:56px;min-width:0;padding:8px 2px;font-size:16px}
.timeline .year-form select{width:44px;min-width:44px;padding:4px 0;font-size:13px}
.timeline .year-form button{width:40px;min-width:40px;margin:0;padding:0;font-size:13px}
.timeline .play-controls{display:flex;gap:4px;min-width:0;justify-content:flex-end}
.timeline .play-controls>button{height:44px;min-height:44px;min-width:44px;padding:6px;border:1px solid #425767;border-radius:7px;background:#192a37;color:#dfebf2;font-size:13px;font-variant-numeric:tabular-nums}
.timeline .play-controls .play-button{display:flex;justify-content:center;align-items:center;gap:4px;width:116px;padding:6px;font-size:12px;background:#334b5c;color:#fff}
.timeline .play-controls .play-button span{display:inline!important;white-space:nowrap}
.timeline .play-controls>button:disabled{opacity:.4;cursor:default}
.timeline .timeline-track{margin:5px 8px 0}
.timeline #year-slider{height:28px}
.timeline #year-slider::-webkit-slider-thumb{width:25px;height:25px;margin-top:-10px;box-sizing:border-box}
.timeline #year-slider::-moz-range-thumb{width:25px;height:25px;box-sizing:border-box}
.timeline .era-band{top:11px;left:12.5px;right:12.5px}
.timeline .timeline-ticks{display:block;margin:0 12.5px;font-size:11px;height:16px}
.timeline-ticks span{display:block!important}
.timeline .era-band i{flex:none}
.timeline .timeline-event-label{display:none}
.timeline .event-timeline{margin:5px 20.5px 0;height:24px}
.timeline .era-shortcuts{display:block!important;margin-top:6px;border-top:1px solid #314452}
.timeline .era-shortcuts>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:44px;width:100%;line-height:1.4;font-size:13px;color:#dae5ed}
.timeline .era-shortcuts>summary::-webkit-details-marker{display:none}
.timeline .era-shortcuts>summary>span::before{content:'＋ ';color:#e6bb79}
.timeline .era-shortcuts[open]>summary>span::before{content:'− '}
.timeline .era-shortcuts>summary small{font-size:11px;color:#9fb8ca;text-align:right}
.timeline-options{padding:8px 0 2px}
.timeline-preferences{display:grid;grid-template-columns:minmax(130px,1fr) minmax(200px,2fr);gap:16px}
.timeline-preferences label,.period-fields label{display:grid;gap:6px;color:#c7d8e3;font-size:13px}
.timeline-preferences label>span,.period-fields label>span{display:flex;align-items:center;gap:6px}
.timeline-options input,.timeline-options select,.timeline-options button{min-height:44px;border:1px solid #4c6476;border-radius:6px;background:#13232f;color:#e6edf2;font:inherit;padding:7px 10px}
.timeline-options input{width:78px;font-size:16px}
.timeline-options select{min-width:0;max-width:100%;font-size:14px}
.timeline-explanation{font-size:12px;line-height:1.6;color:#b5c7d5;margin:12px 0}
.period-form fieldset{margin:14px 0;padding:12px;border:1px solid #3b5162;border-radius:7px;min-width:0}
.period-form legend{padding:0 6px;font-size:13px;color:#dbcaab}
.period-fields{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.period-fields label{flex:1;min-width:132px}
.period-fields label>span{gap:4px}
.period-fields input{flex:1;min-width:58px;width:76px}
.period-fields select{width:62px;padding:7px 3px}
.period-fields button{color:#eac989}
#period-status{margin:8px 0 0;font-size:12px;color:#e8ca91;line-height:1.5}
#period-status:empty{display:none}
.recorded-change-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
.recorded-change-controls>span{margin-right:auto;color:#a9c0d0}
.timeline .era-shortcuts .era-jumps{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin-top:12px;padding:10px 0 0;border-top:1px solid #2d4354}
.timeline .era-shortcuts .era-jumps button{min-height:44px;font-size:12px;padding:8px}
body.fullscreen-map{--fullscreen-timeline:var(--history-timeline-height)}
body.fullscreen-map .timeline{padding:8px 28px max(6px,env(safe-area-inset-bottom));min-height:0;overflow:auto}
body.fullscreen-map .timeline .time-heading{display:flex}
body.fullscreen-map .timeline .timeline-top{margin-bottom:0}
body.fullscreen-map:not(.present-day):has(#era-shortcuts[open]){--fullscreen-timeline:min(75dvh,580px)}
@media(max-width:700px){
 body{--history-timeline-height:268px}
 body:not(.present-day):not(.fullscreen-map):not(.presenting):not(.hide-map-timeline) #workspace{height:calc(100svh - 104px - var(--history-timeline-height));min-height:240px}
 .timeline{padding:8px 14px max(8px,env(safe-area-inset-bottom))}
 .timeline .timeline-top{grid-template-columns:142px minmax(0,1fr);gap:6px}
 .timeline .time-heading{grid-column:1 / -1}
 .timeline-navigation{justify-content:space-between}
 .timeline-navigation select{flex:1;max-width:none;font-size:16px}
 .timeline-navigation button{flex:0 0 auto;font-size:14px}
 .timeline .play-controls{justify-content:flex-end}
 .timeline .timeline-track{margin-top:4px}
 .timeline .event-timeline{height:32px;margin-top:3px}
 .timeline .timeline-event,.timeline .timeline-event.cluster{height:32px;min-width:32px;bottom:0;font-size:12px}
 .timeline-ticks span:nth-child(2),.timeline-ticks span:nth-child(4),.timeline-ticks span:nth-child(5){display:none!important}
 .timeline .era-shortcuts>summary{font-size:12px;gap:8px}
 .timeline .era-shortcuts>summary small{font-size:10px;max-width:58%}
 .timeline-preferences{grid-template-columns:1fr;gap:12px}
 .timeline-preferences label{grid-template-columns:88px minmax(0,1fr);align-items:center}
 .timeline-preferences select{font-size:16px;width:100%;white-space:normal}
 .recorded-change-controls>span{width:100%}
 body.fullscreen-map .timeline{padding:8px 14px max(8px,env(safe-area-inset-bottom))}
 body.fullscreen-map .timeline .time-heading{grid-column:1 / -1}
}
@media(max-width:370px){
 body{--history-timeline-height:310px}
 .timeline .timeline-top{grid-template-columns:minmax(0,1fr)}
 .timeline .year-form{width:100%}
 .timeline .year-form input{flex:1}
 .timeline .play-controls{justify-content:space-between}
 .timeline .play-controls .play-button{flex:1;width:auto}
 .timeline .era-shortcuts>summary small{font-size:10px;max-width:53%}
}
@media(max-height:520px) and (min-width:701px){
 body{--history-timeline-height:144px}
 body:not(.present-day):not(.fullscreen-map):not(.presenting):not(.hide-map-timeline) #workspace{height:calc(100dvh - 52px - var(--history-timeline-height));min-height:0}
 .timeline{padding:5px 18px}
 .timeline .timeline-top{grid-template-columns:minmax(210px,1fr) 142px auto;gap:8px}
 .timeline-navigation{gap:6px}
 .timeline-navigation select,.timeline-navigation button{padding:6px 8px;font-size:12px}
 .timeline .timeline-ticks,.timeline .event-timeline{display:none}
 .timeline .era-shortcuts>summary{min-height:44px}
 body.fullscreen-map .timeline{padding:5px 18px}
}
@media(max-height:700px) and (max-width:700px){
 body{--history-timeline-height:222px}
 body:not(.present-day):not(.fullscreen-map):not(.presenting):not(.hide-map-timeline) #workspace{min-height:160px}
 .timeline .timeline-ticks,.timeline .event-timeline{display:none}
}
@media(max-height:700px) and (max-width:370px){body{--history-timeline-height:264px}}

.event-pause-settings{margin:16px 0 12px;padding:14px;border:1px solid #466071;border-radius:8px;min-width:0}
.event-pause-settings legend{font-size:14px;color:#edcf92;padding:0 6px}
.event-pause-settings p{font-size:12px;line-height:1.6;color:#b5c7d5;margin:10px 0}
.event-pause-settings .pause-mode-label,.playback-search-label{display:grid;gap:8px;font-size:14px;color:#dfeaf1}
.event-pause-settings .pause-mode-label select,.event-pause-settings input[type=search]{box-sizing:border-box;width:100%;max-width:100%;min-width:0;font-size:16px}
.event-pause-settings input[type=checkbox]{flex:0 0 22px;width:22px;height:22px;min-height:22px;margin:0;padding:0;accent-color:#edcf92}
.playback-choice-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;font-size:13px}
.playback-choice-tools label{display:flex;gap:10px;align-items:center;min-height:44px;margin-right:auto}
.playback-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin:10px 0}
.playback-categories label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:#d3e0e9}
.playback-event-list{max-height:300px;overflow:auto;overscroll-behavior:contain;border:1px solid #3b5162;border-radius:6px;padding:4px 8px}
.playback-event-choice{display:flex;align-items:flex-start;gap:10px;padding:10px 0;min-height:44px;border-bottom:1px solid #2c4252}
.playback-event-choice:last-child{border-bottom:0}
.playback-event-choice span{min-width:0;overflow-wrap:anywhere}
.playback-event-choice small{display:block;color:#a2baca;font-size:11px;line-height:1.5}
.playback-event-choice strong{display:block;font-size:13px;line-height:1.5;font-weight:500;color:#e1eaf0}
#playback-pause-count{color:#edcf92}
#playback-storage-note{color:#94adbe;font-size:11px}
#playback-more-events{margin-top:10px;width:100%}
.playback-stop-context{padding:14px;background:#203543;border:1px solid #587588;border-radius:8px;margin:16px 0;color:#dfeaf1}
.playback-stop-context p{font-size:13px;line-height:1.5}
.playback-stop-context div{display:grid;gap:8px}
.playback-stop-context button,.playback-stop-context [aria-current]{display:block;text-align:left;min-height:44px;border:1px solid #506a7b;border-radius:6px;padding:10px;background:#142633;color:#e1eaf0;font:inherit;font-size:13px}
.playback-stop-context [aria-current]{color:#edcf92;border-color:#a38a56}
#playback-resume{margin-top:12px;width:100%;color:#142633;background:#edcf92;border-color:#edcf92;font-weight:600;text-align:center}
.event-pause-settings [hidden]{display:none!important}
@media(max-width:370px){.playback-categories{grid-template-columns:1fr}}
/* Short phone windows need the map and transport more than the large era card.
   The selected year stays visible in the exact-year control. */
@media(max-height:520px){
 body:not(.presenting) .era-card,body:not(.presenting) .globe-note,body:not(.presenting) #coverage-note{display:none!important}
 body:not(.presenting) .map-controls{bottom:10px;right:14px}
 body:not(.presenting) .map-controls #zoom-level{display:none}
 body:not(.presenting) .map-scale{bottom:15px;right:70px}
 body:not(.presenting) .explorer{padding-top:12px;padding-bottom:12px}
 body:not(.presenting) .explorer .sidebar-tabs{margin-top:4px}
 body:not(.presenting) .explorer .search-box{margin-top:7px;margin-bottom:7px}
}