#timeline-controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;border-top:1px solid var(--rule);padding:18px 0}
#timeline-controls[hidden],.ribbon-map[hidden],.chronology li[hidden],#milestone-popup[hidden]{display:none}
#timeline-controls fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
#timeline-controls legend{font-size:12px;margin-bottom:8px}
#timeline-controls label{font-size:12px;display:flex;align-items:center;gap:6px;min-height:44px}
#timeline-controls input{accent-color:var(--accent)}
#timeline-controls select,#timeline-controls button,#milestone-popup>button{padding:9px 12px;background:var(--paper);border:1px solid var(--secondary);color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
#result-count,.map-key{font-size:11px;color:var(--secondary)}
.map-key{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:22px}
.timeline-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.timeline-layout:has(.ribbon-map[hidden]){grid-template-columns:1fr}
.ribbon-map{min-width:0;position:sticky;top:20px;height:85vh;align-self:start}
.lane-labels{display:grid;grid-template-columns:repeat(5,1fr);margin-left:8%;gap:4px;font-size:10px;line-height:1.25;min-height:42px;text-align:center}
.map-stage{position:relative;height:calc(100% - 42px);min-height:250px}
.map-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#ribbons text{font:15px Instrument,Arial;fill:var(--secondary)}
#markers{position:absolute;inset:0}
.map-marker{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--lane-color);font:700 23px/1 var(--body);cursor:pointer;isolation:isolate}
.map-marker::before{content:'';position:absolute;inset:9px;border:2px solid var(--lane-color);border-radius:50%;background:var(--paper);z-index:-1}
.map-marker[data-kind=archive]::before{border-radius:2px;transform:rotate(45deg)}
.map-marker:hover,.map-marker:focus-visible,.map-marker.selected{outline:3px solid var(--lane-color);outline-offset:0;background:color-mix(in srgb,var(--lane-color) 14%,transparent)}
#milestone-popup{position:absolute;left:5%;right:5%;z-index:4;max-height:48vh;overflow:auto;padding:20px;background:#fff;border:2px solid var(--accent);box-shadow:0 8px 30px #243b3220;font-size:13px}
#milestone-popup>button{float:right;margin-left:10px;font-size:12px}
#milestone-popup article+article{border-top:1px solid var(--rule);margin-top:20px;padding-top:20px}
#milestone-popup h3{font:500 23px/1.15 var(--heading);margin-bottom:10px}
#milestone-popup small{display:block;margin-bottom:10px;font-size:11px}
.chronology{list-style:none;padding:0;margin:0}
.chronology li{position:relative;padding:17px 14px;border-top:1px solid var(--rule);min-height:96px;scroll-margin-top:20px;outline:3px solid transparent;outline-offset:-3px}
.event-date{font-size:11px;margin-bottom:5px;color:var(--secondary)}
.chronology summary{font:500 24px/1.2 var(--heading);padding:7px 0;min-height:44px}
.classification{font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin:12px 0 9px;color:var(--secondary)}
.chronology details p:not(.classification){font-size:13px;margin:12px 0}
.chronology details a{font-size:12px}
.chronology li.highlight,.chronology li:focus-within,.chronology li:hover{outline-color:var(--event-color,var(--accent));background:color-mix(in srgb,var(--event-color,var(--accent)) 8%,var(--paper))}
.period{stroke-width:13}
.period.selected{stroke-width:23;filter:drop-shadow(0 0 2px #202b3260)}
.timeline-map-event.selected{stroke-width:4}
@media(max-width:1100px){.timeline-layout{display:flex;flex-direction:column;gap:24px}.ribbon-map{position:relative;height:480px;width:100%}.lane-labels{font-size:9px}#milestone-popup{max-height:320px}.chronology li{min-height:0}.chronology summary{font-size:23px}}
@media print{#timeline-controls,.ribbon-map,#result-count,.map-key{display:none!important}.timeline-layout{display:block}.chronology li[hidden]{display:block}.chronology li{min-height:0;padding:12px 0}.chronology summary{font-size:14pt}.chronology details{break-inside:avoid}.chronology details>*{display:block!important}.chronology details p:not(.classification){font-size:10pt}}
#markers{pointer-events:none}.map-marker{pointer-events:auto}
.period{pointer-events:stroke;cursor:pointer}
@media print{#milestone-popup{display:none!important}}

/* Named chart: vertical scrolling replaces numeric clustering. */
.timeline-page .page{max-width:1520px}
.timeline-layout{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr)}
.map-scroll{height:calc(100% - 45px);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.map-stage{height:auto;min-height:0}
.map-category{display:none}
.lane-labels{margin-left:45px;width:calc(var(--chart-width,100%) - 45px)}
.map-marker{transform:none;min-height:44px;height:auto;border:0;border-left:3px solid var(--lane-color);border-radius:0;background:var(--paper);font:12px/1.25 var(--heading);font-weight:500;padding:5px;text-align:left;overflow-wrap:anywhere}
.map-marker::before{display:none}
.map-marker:hover,.map-marker:focus-visible,.map-marker.selected{background:var(--paper);outline:2px solid var(--lane-color)}
.period{stroke-width:6}.period.selected{stroke-width:11}
.label-leader{pointer-events:none}.label-leader.selected{stroke-width:2}
#milestone-popup{max-height:45vh}
@media(max-width:1100px){.timeline-layout{display:flex}.map-category{display:flex;align-items:center;gap:12px;font-size:12px;min-height:44px}.map-category select{font:inherit;padding:8px;max-width:220px}.lane-labels{display:none}.ribbon-map{height:540px}.map-scroll{height:calc(100% - 50px)}.map-marker{font-size:15px}.map-stage svg{height:100%}}

.map-marker small{display:block;font:9px/1.3 var(--body);color:var(--secondary);margin-top:3px}.map-scroll-hint{font-size:11px;color:var(--secondary);margin:0 0 7px}.map-scroll{height:calc(100% - 68px)}@media(max-width:1100px){.map-scroll{height:calc(100% - 72px)}.map-marker small{font-size:11px}}