/* Birth-year timeline rail: a white-text year axis on the left edge of the tree, locked
   to the tree camera so panning moves the years and zooming spreads or compresses them.
   Hovering widens it and magnifies the years under the pointer; choosing a year or a
   name jumps the tree to that person. Hidden on phone layouts (see the end of the file). */
.viewport{--year-rail-width:72px;--year-rail-expanded:350px}
.tree-guide{left:calc(var(--year-rail-width) + 16px)}
.intro-card{left:calc(var(--year-rail-width) + 24px);width:min(410px,calc(100% - var(--year-rail-width) - 60px))}

.year-rail{position:absolute;left:0;top:0;bottom:0;z-index:22;width:var(--year-rail-width);color:#fff;cursor:default;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none}
.year-rail[hidden]{display:none}
.year-rail__panel{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;width:var(--year-rail-width);overflow:hidden;border-right:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(6,10,17,.93),rgba(6,10,17,.85));backdrop-filter:blur(18px);box-shadow:16px 0 40px rgba(0,0,0,.26);transition:width .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease}
.year-rail.is-expanded .year-rail__panel{width:var(--year-rail-expanded);box-shadow:30px 0 80px rgba(0,0,0,.5)}

/* Fixed height in both states so the year column never shifts under the pointer as the rail expands. */
.year-rail__head{flex:0 0 82px;box-sizing:border-box;height:82px;padding:14px 12px 10px 15px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.year-rail__eyebrow{display:block;color:rgba(255,255,255,.58);font-size:8px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.year-rail__range{display:block;margin-top:5px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.25;letter-spacing:.03em;font-variant-numeric:tabular-nums}
/* Collapsed, the two years stack; expanded, they sit on one line with a dash. */
.year-rail__range span{display:block}
.year-rail__range i{display:none;font-style:normal}
.year-rail.is-expanded .year-rail__range span,.year-rail.is-expanded .year-rail__range i{display:inline}
.year-rail__summary{display:block;margin-top:3px;color:rgba(255,255,255,.55);font-size:10px;opacity:0;transition:opacity .2s ease}
.year-rail.is-expanded .year-rail__summary{opacity:1}

.year-rail__axis{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.year-rail__years{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.year-rail__years::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.26) 4%,rgba(255,255,255,.26) 96%,transparent)}

/* Every year is one fixed-height row placed by timeline-rail.js at its camera-projected
   height. The pointer lens scales rows from their left edge and translates neighbours so
   the column never overlaps itself. Off-screen rows are hidden; crowded years lose their
   label (is-minor) and keep only a tick or dot. */
.year-rail__year{--lens:0;position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;height:24px;padding-left:27px;transform-origin:0 50%;will-change:transform}
.year-rail__year.is-offscreen{visibility:hidden}
.year-rail__year.is-minor :is(.year-rail__label,.year-rail__jump,.year-rail__births,.year-rail__now){opacity:0;pointer-events:none}
.year-rail__year.is-minor:not(.has-births)::before{width:4px;left:13px;background:rgba(255,255,255,.18)}
.year-rail[data-density="packed"] .year-rail__year.is-minor:not(.has-births){visibility:hidden}
.year-rail[data-density="dense"] .year-rail__year.is-minor:not(.has-births)::before{opacity:.6}
.year-rail__year.is-minor.has-births::before{width:6px;height:6px;left:12.5px}
.year-rail__year.is-hot :is(.year-rail__label,.year-rail__jump,.year-rail__births){opacity:1;pointer-events:auto}
/* Crowded labels slide off their dot (which stays at the true year) with a leader line back to it. */
.year-rail__year>:is(.year-rail__label,.year-rail__jump,.year-rail__births,.year-rail__now){transform:translateY(var(--label-shift,0px))}
.year-rail__year.is-shifted::after{content:"";position:absolute;left:15px;top:calc(50% + var(--leader-top,0px));width:1px;height:var(--leader-height,0px);background:rgba(255,255,255,.38);pointer-events:none}
.year-rail__year.is-shifted.is-hot::after,.year-rail__year.is-shifted.is-peek::after{background:rgba(255,255,255,.38)}
.year-rail__year::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:1px;background:rgba(255,255,255,.3);transform:translateY(-50%)}
.year-rail__year.is-decade::before,.year-rail__year.is-century::before{left:9px;width:13px;background:rgba(255,255,255,.62)}
.year-rail__year.is-now::before{width:13px;left:9px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
.year-rail__year.has-births::before{left:11.5px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
.year-rail__year.has-births.is-visible::before{box-shadow:0 0 10px rgba(255,255,255,.95),0 0 22px rgba(86,225,255,.85)}
.year-rail__year.is-focus::before{background:#ffe9b3;box-shadow:0 0 0 3px rgba(213,180,110,.35),0 0 14px rgba(255,220,150,.95)}
.year-rail__year.is-hot>:is(.year-rail__label,.year-rail__jump){text-shadow:0 0 14px rgba(255,255,255,.85)}
.year-rail__year.is-peek>:is(.year-rail__label,.year-rail__jump){color:#ffe9b3;text-shadow:0 0 12px rgba(255,220,150,.9)}
.year-rail__year.is-peek::before{background:#ffe9b3;box-shadow:0 0 0 3px rgba(213,180,110,.3),0 0 12px rgba(255,220,150,.9)}

.year-rail__label,.year-rail__jump{margin:0;padding:0 4px 0 0;border:0;background:transparent;color:rgba(255,255,255,calc(.42 + .58 * var(--lens)));font-family:inherit;font-size:11px;font-weight:600;line-height:1;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 calc(12px * var(--lens)) rgba(255,255,255,calc(.7 * var(--lens)))}
.year-rail__year.is-decade :is(.year-rail__label,.year-rail__jump){color:rgba(255,255,255,calc(.8 + .2 * var(--lens)));font-weight:800}
.year-rail__year.is-century :is(.year-rail__label,.year-rail__jump){color:#fff;font-size:12px;font-weight:800}
.year-rail__jump{color:#fff;font-weight:800;cursor:pointer}
.year-rail__jump:focus-visible{border-radius:4px;outline:2px solid #fff;outline-offset:2px}
.year-rail__now{margin-left:2px;padding:2px 6px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;font-size:7px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .2s ease}
.year-rail.is-expanded .year-rail__now{opacity:1}

.year-rail__births{display:flex;align-items:center;gap:6px;min-width:0;opacity:0;pointer-events:none;transition:opacity .2s ease .05s}
.year-rail.is-expanded .year-rail__births{opacity:1;pointer-events:auto}
.year-rail__chips{display:flex;flex:0 0 auto;align-items:center;gap:2px}
.year-rail__person{display:grid;place-items:center;width:16px;height:16px;padding:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:6.5px;font-weight:800;line-height:1;letter-spacing:.02em;cursor:pointer}
.year-rail__person.sex-male{border-color:rgba(143,220,255,.8);background:rgba(143,220,255,.16)}
.year-rail__person.sex-female{border-color:rgba(255,116,198,.8);background:rgba(255,116,198,.16)}
.year-rail__person:hover{background:rgba(255,255,255,.32)}
.year-rail__more{color:rgba(255,255,255,.7);font-size:8px;font-weight:800}
.year-rail__names{flex:0 1 auto;min-width:0;max-width:104px;overflow:hidden;color:rgba(255,255,255,calc(.78 + .22 * var(--lens)));font-size:10.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis}

/* Detail card for the year under the pointer or keyboard focus. */
.year-rail__flyout{position:absolute;left:calc(var(--year-rail-expanded) + 12px);top:50%;z-index:3;width:250px;max-height:min(420px,70%);overflow-y:auto;padding:12px 10px 8px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(8,12,20,.95);backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.5);color:#fff;transform:translateY(-50%);animation:year-rail-flyout .16s ease-out}
.year-rail__flyout[hidden]{display:none}
.year-rail__flyout-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 6px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.year-rail__flyout-head strong{font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:500;letter-spacing:.02em}
.year-rail__flyout-head span{color:rgba(255,255,255,.55);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.year-rail__flyout-list{display:grid;gap:2px;padding-top:6px}
.year-rail__flyout-year{margin:6px 6px 2px;color:rgba(255,255,255,.55);font-size:9px;font-weight:800;letter-spacing:.14em}
.year-rail__flyout-year:first-child{margin-top:2px}
.year-rail__flyout-person{display:flex;align-items:center;gap:10px;width:100%;padding:7px 6px;border:0;border-radius:9px;background:transparent;color:#fff;font-family:inherit;text-align:left;cursor:pointer}
.year-rail__flyout-person:hover,.year-rail__flyout-person:focus-visible{background:rgba(255,255,255,.08);outline:none}
.year-rail__flyout-person i{display:grid;flex:0 0 28px;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.08);font-size:9px;font-style:normal;font-weight:800}
.year-rail__flyout-person.sex-male i{border-color:rgba(143,220,255,.8);background:rgba(143,220,255,.14)}
.year-rail__flyout-person.sex-female i{border-color:rgba(255,116,198,.8);background:rgba(255,116,198,.14)}
.year-rail__flyout-person span{min-width:0}
.year-rail__flyout-person b{display:block;overflow:hidden;font-size:12px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.year-rail__flyout-person small{display:block;margin-top:2px;color:rgba(255,255,255,.6);font-size:10px}
.year-rail__flyout-person.in-view small{color:rgba(150,235,255,.9)}
.year-rail__flyout-person.is-focus small{color:#ffe1a6}
@keyframes year-rail-flyout{from{opacity:0;transform:translateY(-50%) translateX(-6px)}to{opacity:1;transform:translateY(-50%)}}

/* People born in the hovered year light up in the tree. */
.graph-node.year-match{z-index:9}
body:not(.classic-tree-mode) .graph-node.year-match .node-orb{outline:2px solid #fff;outline-offset:7px;box-shadow:0 0 0 7px rgba(255,255,255,.08),0 0 44px rgba(255,255,255,.55)}
body:not(.classic-tree-mode) .graph-node.year-match .node-copy b{color:#fff}
body.classic-tree-mode .graph-node.year-match{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(255,255,255,.3),0 8px 22px rgba(55,34,14,.3)}

/* Classic book view: the rail becomes dark walnut, the text stays white. */
body.classic-tree-mode .year-rail{font-family:var(--classic-display-font)}
body.classic-tree-mode .year-rail__panel{border-right-color:rgba(255,232,190,.16);background:linear-gradient(180deg,rgba(46,32,19,.97),rgba(35,24,14,.95));backdrop-filter:none;box-shadow:12px 0 30px rgba(35,24,14,.35)}
body.classic-tree-mode .year-rail__head{border-bottom-color:rgba(255,232,190,.14)}
body.classic-tree-mode .year-rail__years::before{background:linear-gradient(180deg,transparent,rgba(255,235,200,.38) 4%,rgba(255,235,200,.38) 96%,transparent)}
body.classic-tree-mode .year-rail__year.has-births.is-visible::before{box-shadow:0 0 10px rgba(255,255,255,.95),0 0 20px rgba(213,180,110,.9)}
body.classic-tree-mode .year-rail__now{border-color:rgba(255,232,190,.45)}
body.classic-tree-mode .year-rail__person,body.classic-tree-mode .year-rail__flyout-person i{border-color:rgba(255,232,190,.7);background:rgba(255,232,190,.14)}
body.classic-tree-mode .year-rail__flyout{border-color:rgba(255,232,190,.2);background:rgba(40,28,16,.97);backdrop-filter:none}
body.classic-tree-mode .year-rail__flyout-head{border-bottom-color:rgba(255,232,190,.14)}

/* Flyout close control, shown only where there is no hover to dismiss it. */
.year-rail__flyout-close{display:none;position:absolute;right:6px;top:6px;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;cursor:pointer}
@media (pointer:coarse){
  .year-rail__flyout{padding-top:14px}
  .year-rail__flyout-head{padding-right:48px}
  .year-rail__flyout-close{display:grid;width:44px;height:44px}
  .year-rail__flyout-person{min-height:48px}
  .year-rail__flyout-person b{font-size:14px}
  .year-rail__flyout-person small{font-size:12px}
}

/* Phones: a 46px rail of dots and coarse year labels. No hover, so the panel
   never widens; a tap near a birth year opens its people instead. The welcome
   card and the dataset badge move right so nothing sits under the rail. */
@media (max-width:820px), (any-pointer:coarse) and (max-width:1000px) and (max-height:500px){
  .viewport{--year-rail-width:46px;--year-rail-expanded:46px}
  .year-rail__panel{box-shadow:6px 0 22px rgba(0,0,0,.22)}
  .year-rail.is-expanded .year-rail__panel{width:var(--year-rail-width);box-shadow:6px 0 22px rgba(0,0,0,.22)}
  .year-rail__head{flex-basis:44px;height:44px;padding:9px 4px 4px 8px}
  .year-rail__eyebrow,.year-rail__summary{display:none}
  .year-rail__range{margin-top:0;font-size:9.5px;line-height:1.25;letter-spacing:.02em}
  .year-rail.is-expanded .year-rail__range span{display:block}
  .year-rail.is-expanded .year-rail__range i{display:none}
  .year-rail__years::before{left:9px}
  .year-rail__year{gap:4px;padding-left:17px}
  .year-rail__year::before{left:6px;width:6px}
  .year-rail__year.is-decade::before,.year-rail__year.is-century::before,.year-rail__year.is-now::before{left:4px;width:10px}
  .year-rail__year.has-births::before{left:5.5px;width:8px;height:8px}
  .year-rail__year.is-minor:not(.has-births)::before{left:7px;width:4px}
  .year-rail__year.is-minor.has-births::before{left:6.5px;width:6px;height:6px}
  .year-rail__year.is-shifted::after{left:9px}
  .year-rail__label,.year-rail__jump{padding-right:0;font-size:9.5px;letter-spacing:.03em}
  .year-rail__year.is-century :is(.year-rail__label,.year-rail__jump){font-size:10px}
  .year-rail__births,.year-rail__now{display:none}
  /* Grouped taps mark several crowded years; their dots light up, their labels stay hidden. */
  .year-rail__year.is-minor.is-hot :is(.year-rail__label,.year-rail__jump){opacity:0}
  .year-rail__year.is-hot::before{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 0 12px rgba(255,255,255,.95)}
  .year-rail__flyout{left:calc(var(--year-rail-width) + 8px);width:min(270px,calc(100vw - var(--year-rail-width) - 16px));max-height:min(380px,62%)}
  .viewport .intro-card{left:calc(var(--year-rail-width) + 10px)}
  .viewport .dataset-badge{left:calc(var(--year-rail-width) + 10px);max-width:calc(100% - var(--year-rail-width) - 132px)}
}
@media (prefers-reduced-motion:reduce){
  .year-rail__panel,.year-rail__births,.year-rail__summary,.year-rail__now{transition:none}
  .year-rail__flyout{animation:none}
}