/* Historical timeline: one viewport beside the existing menu. */
html.crt-history-document { scrollbar-gutter:auto; overflow:hidden; }
html.crt-history-document body.crt-device-ui.page-template-template-eras { height:100vh; height:100dvh; overflow:hidden !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #content { width:calc(100% - 220px); height:100vh; height:100dvh; min-height:0; overflow:hidden; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #primary,
html.crt-history-document body.crt-device-ui.page-template-template-eras #main { height:100%; min-height:0; }
html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-history { display:flex; flex-direction:column; height:100% !important; min-height:0; padding:16px 20px 8px; overflow:hidden; box-sizing:border-box; }
html.crt-history-document body.crt-device-ui.page-template-template-eras .timeline-w { display:flex; flex-direction:column; flex:1; height:100% !important; min-height:0; }
html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls { flex:none; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; margin:0 0 12px; }
html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls [role=status] { text-align:center; white-space:nowrap; }
html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-other-places-button { color:#526c09; background:#f5f7ee; border-color:#a2b46a; }
.crt-other-places-button .crt-places-compact { display:none; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline { flex:1; display:grid; grid-template-rows:minmax(0,1fr) var(--crt-nav-height,150px) 44px; height:100% !important; min-height:0; width:100%; overflow:hidden; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-storyslider { grid-row:1; position:relative !important; top:auto !important; left:0 !important; height:100% !important; min-height:0 !important; overflow:hidden !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slider-container,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slider-item-container,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide { height:100% !important; min-height:0 !important; overflow:hidden !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slider-item-container { display:block !important; width:100% !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-scrollable-container,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content-container { height:100% !important; min-height:0 !important; overflow:hidden !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:28px; height:100% !important; min-height:0; padding:24px 12px !important; overflow:hidden; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content:not(:has(> .tl-media)) { grid-template-columns:minmax(0,1fr); }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-media { display:flex; align-items:center; justify-content:center; height:100% !important; min-height:0; margin:0 !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-media-content-container,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-media-content,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-media-item { height:100% !important; min-height:0; width:100%; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline img.tl-media-item { max-height:100% !important; width:100% !important; object-fit:contain; }
/* Captioned photographs must fit the same bounded slot as ordinary images. */
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .crt-photo-detail { display:flex; flex-direction:column; align-items:center; height:100%; max-height:100%; min-height:0; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .crt-photo-detail-frame { flex:1; height:0; min-height:0; width:100%; aspect-ratio:auto; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .crt-photo-detail-frame img.tl-media-item { position:static !important; height:100% !important; max-height:100% !important; object-fit:contain; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .crt-photo-detail figcaption { flex:none; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-text { align-self:center; height:auto !important; max-height:100%; min-height:0; margin:0 !important; padding:8px 4px !important; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content > .tl-text:only-child { max-width:1000px; justify-self:center; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-titleslide .tl-slide-content { display:flex !important; flex-direction:column; justify-content:center; gap:12px; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .crt-title-art { flex:1; min-height:0; height:auto; max-height:72%; margin:0; object-fit:contain; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-titleslide .tl-text { flex:none; height:auto !important; max-height:30%; text-align:center; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-timenav { grid-row:2; position:relative !important; top:auto !important; height:100% !important; min-height:0; margin:0; overflow:hidden; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-menubar { grid-row:3; position:relative !important; top:auto !important; left:0 !important; height:44px; margin:0; align-self:end; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide,
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide * { transition:none !important; }
html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-text:focus-visible { outline:2px solid #607d0b; outline-offset:-2px; }

/* The optional collection lives above the timeline instead of below it. */
.crt-device-ui .crt-places-dialog { width:min(900px,calc(100vw - 40px)); max-width:none; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid #a7ac9b; color:#333; background:white; box-shadow:0 12px 48px rgba(0,0,0,.2); }
.crt-device-ui .crt-places-dialog::backdrop { background:rgba(22,28,16,.5); }
.crt-device-ui.rtl .crt-places-dialog { direction:rtl; text-align:right; }
.crt-device-ui .crt-places-dialog[open] { display:flex; flex-direction:column; }
.crt-device-ui .crt-places-dialog-header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid #ccc; background:#f5f6f1; }
.crt-device-ui .crt-places-dialog-header h2 { margin:0; font:700 22px/1.3 Lato,sans-serif; }
.crt-device-ui .crt-places-close { flex:none; min-width:44px; min-height:44px; padding:10px 14px; border:1px solid #999; background:white; color:#526c09; box-shadow:none; font:16px/1.4 Lato,sans-serif; }
.crt-device-ui .crt-places-dialog-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 24px 24px; }
.crt-device-ui .crt-places-dialog #crt-undated { margin:0; padding:0; border:0; }
.crt-device-ui .crt-places-dialog #crt-undated > summary { display:none; }
.crt-device-ui .crt-places-dialog #crt-undated article { display:flow-root; padding:24px 0; border-bottom:1px solid #ddd; scroll-margin-top:16px; }
.crt-device-ui .crt-places-dialog #crt-undated article:last-child { border-bottom:0; }
.crt-device-ui .crt-places-dialog #crt-undated article h2 { margin-top:0; line-height:1.3; }
.crt-device-ui .crt-places-dialog #crt-undated article img { max-width:100%; height:auto; max-height:260px; object-fit:contain; }
.crt-device-ui .crt-places-dialog #crt-undated article p { font-size:16px; line-height:1.6; }

@media(max-width:1024px) {
 html.crt-history-document body.crt-device-ui.page-template-template-eras #content { width:100%; height:calc(100vh - var(--crt-header-height,64px)); height:calc(100dvh - var(--crt-header-height,64px)); }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-history { padding:10px 12px max(4px,env(safe-area-inset-bottom)); }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content { gap:20px; padding:16px 8px !important; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide .tl-headline,
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide .tl-headline-title { font-size:clamp(24px,3.5vw,32px) !important; }
}
@media(max-width:600px) {
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-history { padding:8px 8px max(4px,env(safe-area-inset-bottom)); }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls { gap:6px; grid-template-columns:44px minmax(36px,1fr) auto 44px; margin-bottom:4px; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls button { padding:8px; font-size:14px; min-height:44px; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls > button:first-child,
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls > button:last-child { font-size:0; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls > button:first-child::before { content:'←'; font-size:24px; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras .crt-timeline-controls > button:last-child::before { content:'→'; font-size:24px; }
 html.crt-history-document body.crt-device-ui.rtl.page-template-template-eras .crt-timeline-controls > button:first-child::before { content:'→'; }
 html.crt-history-document body.crt-device-ui.rtl.page-template-template-eras .crt-timeline-controls > button:last-child::before { content:'←'; }
 .crt-other-places-button .crt-places-wide { display:none; }
 .crt-other-places-button .crt-places-compact { display:inline; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,.7fr) minmax(0,1.3fr); align-items:stretch; gap:12px; padding:10px 8px !important; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content:not(:has(> .tl-media)) { grid-template-rows:minmax(0,1fr); }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-text { height:100% !important; padding:0 2px !important; align-self:stretch; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide .tl-headline,
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide .tl-headline-title { font-size:24px !important; margin-bottom:12px; }
 .crt-device-ui .crt-places-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
 .crt-device-ui .crt-places-dialog-header { padding:12px; gap:10px; }
 .crt-device-ui .crt-places-dialog-header h2 { font-size:19px; }
 .crt-device-ui .crt-places-dialog-body { padding:0 16px 16px; }
}
@media(max-height:500px) {
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide-content { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-rows:minmax(0,1fr); gap:16px; padding:8px !important; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-slide .tl-headline { font-size:22px !important; }
 html.crt-history-document body.crt-device-ui.page-template-template-eras #timeline .tl-text-content p { font-size:15px !important; line-height:1.5 !important; }
}
