#timeline-toggle{position:fixed;right:0;top:42%;z-index:6;writing-mode:vertical-rl;letter-spacing:.04em;border-radius:6px 0 0 6px;background:#222;color:#fff;border-color:#222;padding:18px 10px;box-shadow:0 2px 10px #0002}#timeline-toggle:hover{background:#444}body.timeline-open{overflow:hidden}#timeline-panel{inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(490px,100vw);max-width:100vw;padding:0;border-left:1px solid #ddd;background:#fff;box-shadow:-12px 0 45px #0002;overflow-y:auto;overscroll-behavior:contain}#timeline-panel::backdrop{background:#0005}.timeline-heading{position:sticky;top:0;background:#fff;z-index:3;padding:18px 24px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.timeline-heading h2{font:28px Georgia,serif;margin:0}.timeline-body{padding:20px 24px 30px}.timeline-period{display:flex;justify-content:space-between;align-items:center;gap:12px}.timeline-period label{font-size:14px}.timeline-period select{font-weight:600;max-width:240px}.timeline-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.timeline-filters label{font-size:14px;min-width:0}.timeline-filters select{display:block;width:100%;font-size:14px;padding:9px 5px;margin-top:5px}.timeline-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}.timeline-meta p{margin:0;font-size:14px;color:#666}.timeline-meta button{font-size:14px;white-space:nowrap}.timeline-legend{font-size:14px;color:#666;margin:0 0 8px}.timeline-ring{display:inline-block;width:12px;height:12px;border:2px solid #222;border-radius:50%;vertical-align:middle;margin-right:4px}#timeline-map{position:relative;width:100%;margin:4px 0 12px}#timeline-map svg{display:block;width:100%;height:100%;overflow:visible}#timeline-map text{font:14px system-ui,sans-serif;fill:#666}.timeline-path{stroke:#b4b7b3;stroke-width:2;fill:none}.timeline-tick{fill:#b4b7b3}#timeline-map .timeline-node{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:34px;height:34px;min-height:34px;padding:0;background:#41634e;border:3px solid white;color:white;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}#timeline-map .timeline-node[aria-pressed=true]{background:#222}#timeline-map .timeline-node:focus-visible{outline:3px solid #275fb8;outline-offset:4px}#timeline-map .timeline-node.filtered{opacity:.2;cursor:default}#timeline-preview{border-top:1px solid #ddd;padding-top:16px;min-height:160px}.timeline-preview-date{font-size:14px;color:#666;margin:0 0 10px}.timeline-preview-card{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;text-decoration:none;margin-bottom:16px}.timeline-preview-card img{grid-row:span 2;width:120px;height:85px;object-fit:contain;background:#f5f5f5;margin:0}.timeline-preview-card strong{font:20px/1.2 Georgia,serif;align-self:end}.timeline-preview-card span{font-size:14px;text-decoration:underline}.timeline-note{font-size:14px;color:#666;margin-bottom:0}@media(max-width:500px){.timeline-heading{padding:16px}.timeline-body{padding:16px}#timeline-map .timeline-node{width:30px;height:30px;min-height:30px}.timeline-period select{max-width:210px}.timeline-preview-card{grid-template-columns:100px 1fr}.timeline-preview-card img{width:100px;height:75px}}@media(prefers-reduced-motion:reduce){#timeline-map .timeline-node{transition:none}}
#timeline-preview{position:sticky;bottom:0;background:#fff;padding:14px 0 4px;min-height:0;max-height:240px;overflow-y:auto;z-index:2;box-shadow:0 -10px 20px #fff}.timeline-preview-card:last-child{margin-bottom:8px}

/* Keep the preview beside its marker, with a forgiving pointer transition. */
.timeline-stage{position:relative}
#timeline-preview{position:absolute;bottom:auto;z-index:4;width:270px;max-width:100%;max-height:240px;padding:12px;border:1px solid #ccc;border-radius:6px;background:#fff;box-shadow:0 6px 22px #0002;overflow-y:auto}
#timeline-preview .timeline-preview-date{font-size:13px;margin-bottom:8px}
#timeline-preview .timeline-preview-card{grid-template-columns:86px 1fr;gap:5px 10px;margin:0}
#timeline-preview .timeline-preview-card + .timeline-preview-card{margin-top:12px}
#timeline-preview .timeline-preview-card img{width:86px;height:66px}
#timeline-preview .timeline-preview-card strong{font-size:18px}
#timeline-preview .timeline-preview-card span{font-size:13px}
#timeline-map .timeline-node:hover:not(:disabled){background:#222}

/* Date is always the number; the extra ring indicates multiple entries. */
#timeline-map .timeline-node.multiple::after{content:"";position:absolute;inset:-7px;border:1px solid #41634e;border-radius:50%;pointer-events:none}
#timeline-map .timeline-node.today,#timeline-map .timeline-node.today:hover:not(:disabled),#timeline-map .timeline-node.today[aria-pressed=true]{background:#fff;color:#28613c;border:2px solid #28613c}
#timeline-map .timeline-node.today.multiple::after{border-color:#28613c}

/* The archive scrolls continuously; dates are event dates, with unread kept separate from date colour. */
.timeline-month-label{font:bold 15px system-ui,sans-serif!important;fill:#202020!important}
.timeline-gap-label{font:12px system-ui,sans-serif!important;fill:#777!important}
#timeline-map .timeline-node.unread::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:2;width:11px;height:11px;border-radius:50%;background:#f6a414;border:2px solid #fff;box-shadow:0 0 0 1px #bb7400;pointer-events:none}
#timeline-map .timeline-node.unread[data-unread-count]::before{content:attr(data-unread-count);top:-13px;width:19px;height:19px;display:grid;place-items:center;color:#181818;font:bold 10px/1 system-ui,sans-serif}
#timeline-map .timeline-node{touch-action:manipulation}
#timeline-unread:disabled{opacity:.45;cursor:default}
.timeline-end{margin:18px 0 14px;padding:18px 12px;border-top:1px solid #ddd;text-align:center;font:italic 19px/1.35 Georgia,serif;color:#333}
@media(max-width:500px){
 #timeline-map .timeline-node{width:40px;height:40px;min-height:40px}
 .timeline-meta{flex-wrap:wrap}
 #timeline-preview:not([hidden]){position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;max-width:none;max-height:45dvh;z-index:8;box-shadow:0 5px 26px #0006}
}

/* Only the middle archive viewport scrolls; controls and footer remain still. */
#timeline-panel{overflow:hidden}
#timeline-panel[open]{display:flex;flex-direction:column}
.timeline-heading{position:relative;flex:none}
.timeline-body{flex:1;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.timeline-controls{flex:none;padding:16px 24px 0}
.timeline-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 24px;position:relative}
.timeline-note{flex:none;margin:0;padding:14px 24px 18px;border-top:1px solid #ddd;background:#fff}
.timeline-end{margin:4px 0 12px;padding:10px 0;border:0;font:italic .875rem/1.45 system-ui,sans-serif;color:#777;visibility:hidden;opacity:0}
.timeline-end.is-visible{visibility:visible;opacity:1;transition:opacity .25s ease}
.timeline-stage.end-bounce{animation:timeline-end-bounce .36s ease-out}
@keyframes timeline-end-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px)}75%{transform:translateY(2px)}}
@media(max-width:500px){.timeline-controls{padding:12px 16px 0}.timeline-scroll{padding:0 16px}.timeline-note{padding:12px 16px}.timeline-meta{margin-bottom:8px}}
@media(max-height:560px){.timeline-heading{padding:8px 16px}.timeline-controls{padding-top:6px}.timeline-filters{margin-top:6px}.timeline-meta{margin:6px 0}.timeline-note{padding:6px 16px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.timeline-stage.end-bounce{animation:none}.timeline-end.is-visible{transition:none}}