/* Timeline (timeline/) and the plain era lists (timeline/<era>/).
   The page is an instrument: the Sea Lane (decades, era bands, a navigator star) leads, results follow at once.
   Wide screens (>=1100px): full controls at the top, then a 64px dock that sticks once they scroll away.
   Narrower: search, then the lane as the sticky element, then results; filters live in a bottom sheet. */

/* ---------- the sea under the voyage: the page tint shifts slightly per era (set by timeline-voyage.js) */
/* --sea-k halves the shift on the light chart so interactive borders keep 3:1 against it */
body.t-timeline{--sea-k:.5;--sea-bg:var(--bg);--sea-bg:color-mix(in oklab,var(--bg),var(--blue) calc(var(--sea-shift,0%) * var(--sea-k)));background-color:var(--sea-bg);transition:background-color var(--d-4) var(--ease-in-out)}
.t-timeline .pagehead{background:none;border-bottom:0}
.t-timeline .pagehead .wrap{padding-block:28px 6px}
.t-timeline .pagehead h1{margin-bottom:.15em}
.t-timeline .pagehead .lede{font-size:var(--t-body);max-width:52ch}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.t-timeline{--sea-k:1}}
:root[data-theme="dark"] body.t-timeline{--sea-k:1}
@media (max-width:719px){.t-timeline .pagehead .wrap{padding-block:14px 2px}.t-timeline .pagehead h1{font-size:2.25rem}}

/* ---------- search and island chips */
.tl-top .wrap{padding-block:14px 6px}
.tl-find{display:flex;gap:8px;align-items:center}
.tl-find .search{flex:1 1 auto;max-width:560px;min-height:48px;font-size:var(--t-body)}
.fbtn{gap:8px;min-height:48px;padding-inline:16px 18px;flex:none}
.fbtn svg{width:18px;height:18px}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--blue);color:var(--blue-ink);font:700 var(--t-xs)/1 var(--body)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-isl{margin-top:10px}
@media (max-width:1099px){.tl-isl{display:none}}
/* without JS the lane would be a readout that never moves: the plain lists by era are the navigation instead */
.no-js .tl-top,.no-js .tl-dock,.no-js .tl-statusbar,.no-js .more,.no-js .tl-lane-wrap,.no-js .tl-earlier{display:none}

/* ---------- the Sea Lane */
.tl-lane-wrap{position:relative;z-index:12}
.tl-lane-wrap > .wrap{padding-block:12px 10px}
.lane{--decs-h:76px;--bh:20px;--col:0px;position:relative;display:grid;grid-template-columns:200px 56px minmax(0,1fr) 56px;grid-template-areas:"read prev track next" ". . years .";column-gap:10px;align-items:start}
.lane-read{grid-area:read;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;min-width:0;padding-top:2px}
.odo{display:inline-flex;font:400 clamp(3rem,1.6rem + 2.6vw,4.75rem)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.dg{display:inline-block;height:1em;overflow:hidden}
.dg .col{display:flex;flex-direction:column;transform:translateY(calc(var(--d) * -10%));transition:transform var(--d-2) var(--ease-out)}
.dg .col span{height:1em;line-height:1}
.snap .dg .col,.snap .lane-era > span{transition:none!important} /* a landing snaps; only the reader's scrolling rolls */
.lane-era{position:relative;display:grid;margin-top:8px;font-size:var(--t-sm);line-height:1.3;color:var(--dim)}
.lane-era > span{grid-area:1/1;transition:opacity var(--d-2) var(--ease-out)}
.lane-era .eb{opacity:0}
.lane-era.flip .ea{opacity:0}.lane-era.flip .eb{opacity:1}

.lane-key{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:14px;font-size:var(--t-xs);color:var(--dim)}
/* legend swatches are tiny filled bar charts on a baseline (the outline box read as a checkbox) */
.lane-key i{--c:var(--fill,var(--blue));display:inline-block;width:15px;height:12px;margin-right:7px;vertical-align:-1px;border-bottom:1px solid var(--line-strong);
  background:linear-gradient(var(--c),var(--c)) 0 100%/4px 55% no-repeat,linear-gradient(var(--c),var(--c)) 5.5px 100%/4px 100% no-repeat,linear-gradient(var(--c),var(--c)) 11px 100%/4px 75% no-repeat}
/* with filters on, the full counts are the outlined bars behind the matches: the swatch dims to the outline colour */
.lane[data-filtered] .lane-key .k-all{--c:var(--line-strong)}
.lane-key .k2{display:none}
.lane[data-filtered] .lane-key .k2{display:block}
.lane-track{grid-area:track;min-width:0;position:relative}
.lane-in{position:relative;min-width:calc(21 * (var(--col) + 2px))}
.decs{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:2px;height:var(--decs-h)}
.dec{position:relative;display:block;height:100%;border-radius:4px 4px 0 0;color:inherit;text-decoration:none;cursor:pointer;transition:background-color var(--d-1)}
.dec .bar{position:absolute;left:24%;right:24%;bottom:0;height:calc(var(--h) * (100% - 6px));border-radius:2px 2px 0 0;transition:height var(--d-3) var(--ease-out)}
.dec .ghost{box-shadow:inset 0 0 0 1px var(--line-strong)}
.dec .fill{background:var(--fill,var(--blue))}
.dec[data-n="0"] .fill{display:none}
.dec:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.dec:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-radius:4px;z-index:1}
.dec[aria-pressed="true"]{background:color-mix(in srgb,var(--blue) 16%,transparent);box-shadow:inset 0 0 0 2px var(--star)}
.dec.loading .fill{animation:dec-load 1.2s var(--ease-in-out) infinite alternate}
@keyframes dec-load{to{opacity:.35}}
.lane[data-zoom] .dec:not([aria-pressed="true"]) .fill{opacity:.55}

/* the lane line, with the navigator star and its wake */
.lane-line{position:relative;height:0;border-top:2px dotted color-mix(in srgb,var(--blue) 70%,transparent);container-type:inline-size}
.navmark{position:absolute;top:-1px;left:calc(var(--pos) * 100%);width:0;height:0;pointer-events:none}
@supports (width:1cqw){.navmark{left:0;transform:translateX(calc(var(--pos) * 100cqw));transition:transform var(--d-3) var(--ease-out)}}
.navmark svg{max-width:none;position:absolute;left:-9px;top:-9px;width:18px;height:18px;fill:var(--star);filter:drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 1px var(--sea-bg,var(--bg)))}
.wake{position:absolute;top:-1px;right:6px;width:44px;height:2px;border-radius:2px;background:linear-gradient(to left,var(--star),transparent);opacity:0;transition:opacity var(--d-4) var(--ease-out)}
.lane[data-dir="back"] .wake{right:auto;left:6px;background:linear-gradient(to right,var(--star),transparent)}
.lane.moving .wake{opacity:.85;transition-duration:var(--d-1)}
.lane.idle .navmark{opacity:.35}

/* era bands: overlapping eras stack in rows; the bands under the star are lit. Every band is named: inside it when
   the name fits (class bwNN from the build: the px it needs), otherwise by a leader-line callout in the strip under
   the rows (--dr rows to drop through, tier --t). An era inside another (Recent years) is an inset in its host. */
.bands{--ch:15px;--nt:var(--ctiers);position:relative;height:calc(var(--rows) * (var(--bh) + 2px) + var(--nt) * var(--ch) + 2px);margin-top:5px}
.band{--tt:var(--t)}
/* touch screens: the tape has 44px columns, so the callouts need fewer tiers */
@media (max-width:1099px) and (pointer:coarse){.bands{--nt:var(--ctiers-t)}.band{--tt:var(--tc)}}
.band{position:absolute;left:calc(var(--x0) * 100%);width:calc(var(--w) * 100%);top:calc(var(--r) * (var(--bh) + 2px));height:var(--bh);min-width:3px;container-type:inline-size;
  background:var(--bg3);border-left:2px solid var(--line-strong);color:var(--dim);font-size:var(--t-xs);line-height:var(--bh);white-space:nowrap;cursor:pointer;
  transition:background-color var(--d-2),color var(--d-2)}
.band.nest{top:calc(var(--r) * (var(--bh) + 2px) + 3px);height:calc(var(--bh) - 6px);min-width:5px;z-index:1;background:color-mix(in srgb,var(--blue) 18%,var(--bg3));border-left-color:var(--blue)}
.bl{display:block;padding-left:6px;overflow:hidden}
.bc{display:none;position:absolute;top:100%;left:-1px;padding-top:calc(var(--dr) * (var(--bh) + 2px) + var(--tt) * var(--ch) + 3px);line-height:var(--ch);font-size:var(--t-xs);color:var(--dim);pointer-events:none}
.band.nest .bc{padding-top:calc(var(--dr) * (var(--bh) + 2px) + var(--tt) * var(--ch) + 6px)}
.bc::after{content:"";position:absolute;top:0;left:0;height:calc(100% - var(--ch) + 1px);border-left:1px solid var(--line-strong)}
.bc{padding-left:5px;margin-left:calc(50% - .5px)}
.band.end .bc{left:auto;right:calc(50% - 1px);margin:0;padding-left:0;padding-right:5px}
.band.end .bc::after{left:auto;right:0}
.band:hover{color:var(--ink);border-left-color:var(--blue)}
.band.here{background:color-mix(in srgb,var(--blue) 26%,var(--bg3));color:var(--ink);border-left-color:var(--blue)}
.band.on{background:var(--ink);color:var(--bg);border-left-color:var(--ink)}
.band.here .bc,.band:hover .bc{color:var(--ink)}
.band.on .bc{color:var(--ink);font-weight:700}
.band.here .bc::after,.band.on .bc::after{border-left-color:var(--blue)}
@container (max-width:29px){.bw30 .bl{display:none}.bw30 .bc{display:block}}
@container (max-width:39px){.bw40 .bl{display:none}.bw40 .bc{display:block}}
@container (max-width:49px){.bw50 .bl{display:none}.bw50 .bc{display:block}}
@container (max-width:59px){.bw60 .bl{display:none}.bw60 .bc{display:block}}
@container (max-width:69px){.bw70 .bl{display:none}.bw70 .bc{display:block}}
@container (max-width:79px){.bw80 .bl{display:none}.bw80 .bc{display:block}}
@container (max-width:89px){.bw90 .bl{display:none}.bw90 .bc{display:block}}
@container (max-width:99px){.bw100 .bl{display:none}.bw100 .bc{display:block}}
@container (max-width:109px){.bw110 .bl{display:none}.bw110 .bc{display:block}}
@container (max-width:119px){.bw120 .bl{display:none}.bw120 .bc{display:block}}
@container (max-width:129px){.bw130 .bl{display:none}.bw130 .bc{display:block}}
.axis{position:relative;height:24px;font:var(--t-xs)/1 var(--display);color:var(--dim);font-variant-numeric:lining-nums tabular-nums}
.axis .ticks{position:absolute;inset:0}
.axis > span:not(.ticks){position:absolute;top:9px;left:calc(var(--x) * 100%)}
.ticks i{position:absolute;top:0;left:calc(var(--x) * 100%);width:1px;height:4px;background:var(--line-strong)}
.ticks i.maj{height:7px}

/* steppers and the year zoom */
.step{display:none;align-self:start;height:var(--decs-h);border:1px solid var(--line-strong);border-radius:10px;background:none;color:var(--ink);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;padding:0;min-width:44px}
.js .step:not([hidden]){display:flex}
.step.prev{grid-area:prev}.step.next{grid-area:next}
.step .chev{font:400 1.75rem/1 var(--display)}
.step .lab{font:600 var(--t-xs)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--dim)}
.step:hover{border-color:var(--blue)}
.years{grid-area:years;position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;margin-top:20px;animation:yrs-in var(--d-3) var(--ease-out)}
.years .step,.years .ystep-ph{display:none!important}
.years::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;background:color-mix(in srgb,var(--blue) 14%,transparent);
  clip-path:polygon(calc(var(--zx0) * 100%) 0,calc(var(--zx1) * 100%) 0,100% 100%,0 100%)}
@keyframes yrs-in{from{opacity:0;transform:translateY(-6px)}}
.yr{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:4px 0;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg2);color:var(--ink);
  font:600 var(--t-sm)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;cursor:pointer}
.yr i{display:block;width:calc(4px + var(--k) * 70%);max-width:80%;height:3px;border-radius:2px;background:var(--fill,var(--blue))}
.yr[aria-disabled="true"]{color:var(--dim);border-style:dashed;cursor:default;background:none}
.yr[aria-disabled="true"] i{display:none}
.yr:hover:not([aria-disabled="true"]){border-color:var(--blue)}
.yr[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.yr[aria-current="true"] i{background:var(--bg)}

/* ---------- the dock: a 64px condensed bar on wide screens once the top controls scroll away */
.tl-dock{display:none}
@media (min-width:1100px){
  .js .tl-dock{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:14;height:64px;margin-bottom:-64px;
    background-color:var(--sea-bg,var(--bg));border-bottom:1px solid var(--line);box-shadow:0 8px 24px -18px rgba(0,0,0,.5);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out),visibility 0s linear var(--d-3),background-color var(--d-4) var(--ease-in-out)}
  .js .tl-dock.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .tl-dock > .wrap{display:flex;align-items:center;gap:14px;height:64px}
  .tl-dock .lane{flex:1 1 auto;min-width:0;--decs-h:30px;--bh:4px;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"read track";column-gap:12px;align-items:center}
  .tl-dock .lane-read{justify-content:center;gap:3px;padding:0}
  .tl-dock .odo{font-size:1.625rem}
  .tl-dock .lane-era{margin:0;font-size:var(--t-xs);line-height:1.2}
  .tl-dock .lane-era > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tl-dock .bands{margin-top:3px}
  .tl-dock .bl,.tl-dock .bc,.tl-dock .axis{display:none}
  .tl-dock .bands{--nt:0}
  .tl-dock .band.nest{top:calc(var(--r) * (var(--bh) + 2px));height:var(--bh)}
  .tl-dock .navmark svg{width:14px;height:14px;left:-7px;top:-7px}
  .tl-dock .search{flex:0 1 240px;min-height:44px}
  .tl-dock .fbtn{min-height:44px}
  .tl-dock .dec .bar{height:calc(var(--h) * (100% - 3px))}
}

/* ---------- below 1100px: the lane is the sticky element, a tape that scrolls inside itself */
@media (max-width:1099px){
  .js .tl-lane-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));background-color:var(--sea-bg,var(--bg));border-bottom:1px solid var(--line);
    transition:transform var(--d-2) var(--ease-out),background-color var(--d-4) var(--ease-in-out)}
  /* [jury3 #6] the lane follows the header exactly (the header hides 2px further, past its border), and while they
     slide it carries a strip of its own sea upward, so no event text shows in a gap between the two */
  .js.head-hidden .tl-lane-wrap{transform:translateY(calc(-1 * var(--head-h) - 2px));box-shadow:0 -6px 0 var(--sea-bg,var(--bg))}
  .tl-lane-wrap > .wrap{padding-block:6px 4px}
  .lane{--decs-h:40px;--bh:16px;--col:30px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"read read" "track track" "years years";row-gap:4px}
  .lane-read{flex-direction:row;align-items:baseline;gap:10px;padding:0}
  .lane-key{display:none}
  .odo{font-size:1.75rem}
  .lane-era{margin:0;font-size:var(--t-sm);min-width:0}
  .lane-era > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lane-track{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:24px}
  .lane-track.scrolls{-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .lane-track::-webkit-scrollbar{display:none}
  .lane-in{padding-inline:12px;box-sizing:content-box}
  .bands{margin-top:4px}
  .axis{height:17px}
  .axis > span:not(.ticks){top:5px}
  .step{height:44px;flex-direction:row;padding:0 10px;gap:6px}
  .step .chev{font-size:1.4rem}
  .years{display:flex;gap:4px;margin:2px -16px 0;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:16px}
  .years::-webkit-scrollbar{display:none}
  .years::before{display:none}
  .lane > .step{display:none!important}
  .yr{flex:1 0 44px;min-height:44px;font-size:var(--t-xs)}
  .years .step .lab{display:none}
}
@media (max-width:1099px) and (pointer:coarse){.lane{--col:44px;--decs-h:44px}}

/* ---------- phones (<600px): the sticky lane collapses to a 44px bar: the year readout and era name, and along its
   bottom edge a single hairline lane carrying the star. "Decades" opens the full chart (histogram, bands, axis). */
.lane-tog{display:none}
@media (max-width:1099px){ /* [jury3 #12] tablets too: the 44px bar, with the full chart one tap away */
  .js .tl-lane-wrap > .wrap{padding-block:0}
  .js .lane-hero{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"read tog" "track track" "years years";row-gap:0;align-items:center}
  .js .lane-hero .lane-read{grid-area:read;height:43px;align-items:center;gap:8px;padding-bottom:6px;box-sizing:border-box}
  .js .lane-hero .odo{font-size:1.375rem}
  .js .lane-tog{grid-area:tog;position:relative;display:inline-flex;align-items:center;align-self:start;gap:4px;height:43px;margin-right:-8px;padding:0 8px 6px 12px;border:0;border-radius:10px;background:none;
    color:var(--ink);font:700 var(--t-xs)/1 var(--body);cursor:pointer}
  .lane-tog::after{content:"";position:absolute;inset:0 0 -2px} /* a 45px target in the 43px row, reaching over the bar's edge */
  .lane-tog svg{width:18px;height:18px;transition:transform var(--d-2) var(--ease-out)}
  .lane-tog[aria-expanded="true"] svg{transform:rotate(180deg)}
  .lane-tog:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
  /* collapsed: the track shrinks to a hairline near the bar's bottom edge */
  .js .lane-hero:not(.open) .lane-track{position:absolute;left:0;right:0;bottom:6px;overflow:visible;-webkit-mask-image:none;mask-image:none;pointer-events:none}
  .js .lane-hero:not(.open) .lane-in{min-width:0;padding-inline:0}
  .js .lane-hero:not(.open) .decs,.js .lane-hero:not(.open) .bands,.js .lane-hero:not(.open) .axis,.js .lane-hero:not(.open) .years{display:none}
  .js .lane-hero:not(.open) .lane-line{border-top:1px solid var(--line-strong)}
  .js .lane-hero:not(.open) .navmark svg{width:13px;height:13px;left:-6.5px;top:-7px}
  .js .lane-hero:not(.open) .wake{top:-1px;height:1px}
  .js .lane-hero.open .lane-track{padding-bottom:4px}
}

/* sticky bars are opaque: no event text shows through the header or the lane while the list scrolls under them */
.t-timeline .site-head{background-color:var(--sea-bg,var(--bg));backdrop-filter:none;-webkit-backdrop-filter:none}
/* reduced motion: every state is final at once */
@media (prefers-reduced-motion:reduce){.navmark,.dg .col,.lane-era > span,body.t-timeline,.js .tl-dock,.lane-tog svg{transition:none!important}.wake{display:none}}

/* ---------- status line, tokens, empty / loading / error */
.tl-statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-block:14px 8px;min-height:60px}
.tl-status{margin:0;font-size:var(--t-sm);color:var(--dim)}
.tl-status b{font:600 var(--t-lg)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.tokens{display:flex;flex-wrap:wrap;gap:6px}
.tl-statusbar > .tokens{flex:1 0 100%}
.tl-statusbar > .tokens:empty{display:none} /* tokens get their own row: a changing count never re-wraps them */
.token{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 8px 4px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg2);color:var(--ink);font:700 var(--t-xs)/1.2 var(--body);cursor:pointer}
.token svg{width:14px;height:14px;color:var(--dim)}
.token:hover{border-color:var(--blue)}.token:hover svg{color:var(--ink)}
.token.clear{border-style:dashed;padding-right:12px}
@media (pointer:coarse){.token{min-height:44px;padding-inline:14px 12px}}
.tl-empty{padding:28px 0 40px;max-width:60ch}
.tl-empty .big{font:400 var(--t-h3)/1.25 var(--display);color:var(--ink);margin:0 0 10px}
.tl-empty .tokens{margin:14px 0}
.tl-empty a{font-weight:700}
.tl-empty .near{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.tl-skel{display:flex;flex-direction:column;gap:2px;padding-block:12px}
.tl-skel .sk{height:104px;border-left:3px solid var(--line-strong);background:linear-gradient(var(--bg3),var(--bg3)) 16px 18px/40% 12px no-repeat,linear-gradient(var(--bg3),var(--bg3)) 16px 44px/88% 14px no-repeat,linear-gradient(var(--bg3),var(--bg3)) 16px 68px/64% 14px no-repeat;animation:sk 1.2s var(--ease-in-out) infinite alternate}
@keyframes sk{from{opacity:.6}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tl-skel .sk{animation:none}}
.tl-error{padding:24px 0;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.tl-error p{margin:0;max-width:56ch}
.more{display:flex;justify-content:center;padding:20px}
/* a deep link renders a window of events: earlier ones load above it on request (scroll position is kept) */
.tl-earlier{display:flex;justify-content:center;padding:8px 0 16px;border-bottom:1px solid var(--line)}
.tl-earlier[hidden],.tl-copyview[hidden],.tl-weaknote[hidden]{display:none}
.tl-copyview{min-height:36px;padding:4px 14px;font-size:var(--t-xs);gap:6px}
.tl-copyview svg{width:15px;height:15px}
@media (pointer:coarse){.tl-copyview{min-height:44px}}
/* the honest note when the record opens on thin sources */
.tl-weaknote{margin:0 0 6px;padding:6px 0 8px;font-size:var(--t-sm);line-height:1.5;color:var(--dim)}
.linkbtn{position:relative;display:inline;padding:0;border:0;background:none;color:var(--blue);font:700 var(--t-sm)/1.4 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
@media (pointer:coarse){.linkbtn::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}} /* a 44px target without a taller line */
.no-js .linkbtn{display:none}
/* a deep link replaces the first events with the window around its year: they never paint, nor the opening note */
.tl-pending #tl-list[data-prerendered] > *,.tl-pending .tl-plain{display:none}
.tl-pending #tl-list{min-height:200vh} /* keeps the footer out of view until the window arrives */
.tl-pending .tl-weaknote{display:none}
.tl-pending .tl-earlier[hidden]{display:flex;visibility:hidden}
/* nothing matches: the readout says so instead of keeping a stale year */
.lane.none .odo{display:none}
.lane.none .navmark{opacity:0}
/* html already has scroll-padding-top: head-h + 12px (base.css); these add only the sticky lane or dock */
.t-timeline .yearblock{scroll-margin-top:calc(var(--tl-h) - 4px)}
.t-timeline .yearblock .ev{scroll-margin-top:var(--tl-h)}

/* ---------- filter sheet: a side sheet on wide screens, a bottom sheet on phones */
.tl-sheet{padding:0;border:0;color:var(--ink);background:var(--bg);max-width:none;max-height:none;overscroll-behavior:contain}
.tl-sheet::backdrop{background:rgba(3,10,20,.55)}
.sheet-in{display:flex;flex-direction:column;height:100%;max-height:inherit}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px 20px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:var(--t-h3);margin:0}
.sheet-body{flex:1 1 auto;overflow:auto;padding:4px 20px 16px}
.sheet-body fieldset{border:0;margin:0;padding:18px 0 14px;min-width:0}
.sheet-body fieldset + fieldset{border-top:1px solid var(--line)}
.sheet-body legend{float:left;width:100%;font:600 var(--t-lg)/1.2 var(--display);padding:0;margin:0 0 10px}
.sheet-body legend + *{clear:both}
.sheet-body .hint{font-size:var(--t-sm);color:var(--dim);margin:-4px 0 8px}
.sheet-foot{display:flex;gap:10px;justify-content:space-between;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg)}
.sheet-foot .btn[data-show]{flex:1 1 auto;justify-content:center}
.weak-toggle input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
@media (min-width:720px){
  .tl-sheet[open]{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100%);height:100%;border-left:1px solid var(--line-strong);animation:sheet-side var(--d-3) var(--ease-out)}
  @keyframes sheet-side{from{transform:translateX(24px);opacity:0}}
}
@media (max-width:719px){
  .tl-sheet[open]{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-height:88dvh;border-radius:20px 20px 0 0;border-top:1px solid var(--line-strong);animation:sheet-up var(--d-3) var(--ease-out)}
  .sheet-head::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-strong)}
  .sheet-head{position:relative;padding-top:18px}
  @keyframes sheet-up{from{transform:translateY(40px);opacity:0}}
}
:root:has(.tl-sheet[open]){overflow:hidden}

/* ---------- eras as rows on the shared 1820–2029 axis (filter sheet, plain-list index) */
.era-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.era-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 3.5rem;grid-template-areas:"y t n" "rng rng rng";gap:4px 10px;align-items:baseline;width:100%;min-height:44px;padding:8px 12px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--bg2);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.era-row .y{grid-area:y;font-size:var(--t-sm);color:var(--dim)}
.era-row .t{grid-area:t;font-weight:700;font-size:var(--t-sm)}
.era-row .n{grid-area:n;text-align:right;font:600 var(--t-sm)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--dim)}
.era-row .rng{grid-area:rng;position:relative;height:4px;border-radius:2px;background:var(--bg3)}
.era-row .rng i{position:absolute;top:0;bottom:0;left:calc(var(--x0) * 100%);width:calc(var(--w) * 100%);min-width:3px;border-radius:2px;background:var(--blue)}
.era-row:hover{border-color:var(--blue)}
.era-row[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.era-row[aria-pressed="true"] .y,.era-row[aria-pressed="true"] .n{color:var(--bg)}
.era-row[aria-pressed="true"] .rng{background:color-mix(in srgb,var(--bg) 30%,transparent)}
.era-row[aria-pressed="true"] .rng i{background:var(--bg)}

/* plain lists by era: the same rows as a quiet index under the list */
.tl-plain{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.tl-plain h2{margin-bottom:.25em}
.era-rows.plain{gap:0;border-top:1px solid var(--line)}
.era-rows.plain .era-row{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:12px 4px;grid-template-columns:9rem minmax(0,1.2fr) 5rem minmax(0,1fr);grid-template-areas:"y t n rng";align-items:center}
.era-rows.plain .era-row .t{font:400 var(--t-lg)/1.2 var(--display);color:var(--blue)}
.era-rows.plain .era-row:hover .t{text-decoration:underline}
.era-rows.plain .era-row .n::after{content:" events";font:var(--t-xs) var(--body)}
@media (max-width:719px){.era-rows.plain .era-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t n" "y y" "rng rng"}}

/* without JS: no dead controls; the plain lists come first, then the first events */
.tl-body{display:flex;flex-direction:column}
.no-js .tl-plain{order:-1;margin-top:8px;border-top:0}
.no-js .tl-body > .nojs-only{margin-top:28px}

/* ---------- plain-list pages */
.tl-plainpage .tl-over{margin-top:20px}
.tl-plainpage code{overflow-wrap:anywhere}
.tl-plainpage h3{font-size:var(--t-lg);margin-top:1.4em}
.tl-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.tl-pn a{display:flex;flex-direction:column;gap:2px;min-height:44px;text-decoration:none}
.tl-pn .t{font:400 var(--t-lg)/1.2 var(--display)}
.tl-pn .next{text-align:right;grid-column:2}
.tl-pn .num{font-size:var(--t-sm);color:var(--dim)}

@media print{.tl-top,.tl-lane-wrap,.tl-dock,.tl-statusbar,.tl-sheet,.more,.tl-earlier,.linkbtn{display:none!important}body.t-timeline{background:#fff}}

/* event rows on the timeline: the copy-link button sits in the corner, so the meta line never wraps for it */
.t-timeline .yearblock .ev{position:relative;padding-right:48px}
.t-timeline .yearblock .ev .perma{position:absolute;top:6px;right:0;margin:0}
@media (pointer:coarse){.t-timeline .ev .src a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}.t-timeline .crumbs a{min-height:44px;display:inline-flex;align-items:center;padding:0}}