/* ============================================================
   timeline.css: the timeline chart, event list, filter chips,
   links from lesson notes, and the highlight after a jump.
   ============================================================ */

/* filters: branch picker, search, count */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 16px}
.tl-filters{margin:26px 0 16px;display:flex;flex-direction:column;gap:12px}
.tl-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tl-tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:820px){.tl-tree{grid-template-columns:minmax(0,1fr)}}
.tl-tree-f{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.tl-tree-head{display:flex;align-items:center;gap:8px;border:0;background:none;padding:2px 0;font:600 .95rem var(--body);color:var(--acc);cursor:pointer;text-align:left}
.tl-tree-head i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
.tl-tree-head span,.tl-tree-b span{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:500}
.tl-tree-head[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.tl-tree-b{display:flex;flex-wrap:wrap;gap:6px}
.tl-tree-b button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:999px;padding:4px 10px;font:500 .8rem var(--body);cursor:pointer}
.tl-tree-b button:hover{border-color:var(--acc)}
.tl-tree-b button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--sheet)}
.tl-tree-b button[aria-pressed="true"] span{color:inherit;opacity:.8}
.tl-tree-b button.none{opacity:.45}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule);background:var(--sheet);color:var(--muted);border-radius:999px;padding:7px 14px;font:500 .86rem var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tl-search{flex:1 1 220px;max-width:340px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:999px;padding:7px 14px;font:400 .88rem var(--body)}
.tl-search:focus{outline:2px solid var(--ink);outline-offset:1px}
.tl-count{color:var(--muted);font-size:.8rem;margin-left:auto}
.tl-clear{border:0;background:none;color:var(--ink);font:500 .84rem var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.tl-clear[hidden]{display:none}

/* chart */
/* the timeline page's chart is wider than the text column */
.tl-stage{max-width:1680px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.tl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:20px;align-items:start}
@media (min-width:1400px){.tl-stage .tl-wrap{grid-template-columns:minmax(0,1fr) minmax(0,370px)}}

/* full screen: the chart fills the window, the panel docks on the right */
.tl-full-open{overflow:hidden}
.tl-wrap.tl-full{position:fixed;inset:0;z-index:60;margin:0;background:var(--paper);padding:12px;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:12px;align-items:stretch;overflow:hidden}
.tl-full .tl-chart{display:flex;flex-direction:column;min-height:0;height:100%}
.tl-full .tl-plot{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tl-full .tl-detail{min-height:0;height:100%;overflow:auto}
.tl-full .tl-help{display:none}
@media (max-width:960px){
  .tl-wrap.tl-full{grid-template-columns:minmax(0,1fr);padding:8px}
  .tl-full .tl-detail:not([data-field]){display:none}
}
[data-opt="full"]{white-space:nowrap}
@media (max-width:960px){.tl-wrap{grid-template-columns:minmax(0,1fr)}}
.tl-chart{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:12px 12px 10px;min-width:0}
.tl-plot{width:100%;position:relative}
.tl-wrap{scroll-margin-top:90px;outline:none}
.tl-wrap.flash{animation:none}
.tl-tip{position:absolute;z-index:2;pointer-events:none;max-width:260px;background:var(--ink);color:var(--paper);font:500 .8rem/1.35 var(--body);padding:6px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tl-tip .mono{color:color-mix(in srgb,var(--acc) 60%,var(--paper));font-weight:600}
.tl-tip[hidden]{display:none}
.tl-svg{display:block;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tl-tools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:8px}
.tl-zoom{display:flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.tl-zoom button{width:36px;height:32px;border:0;background:transparent;color:var(--ink);font:600 1.1rem var(--body);cursor:pointer}
.tl-zoom button+button{border-left:1px solid var(--rule)}
.tl-zoom button:hover:not(:disabled){background:var(--rule-soft)}
.tl-zoom button:disabled{color:var(--rule);cursor:default}
.tl-range{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto}
.tl-eras{display:flex;flex-wrap:wrap;gap:6px}
.tl-eras button,.tl-show button{border:1px solid var(--rule);background:transparent;color:var(--muted);border-radius:999px;padding:5px 12px;font:500 .8rem var(--body);cursor:pointer}
.tl-eras button:hover,.tl-show button:hover{color:var(--ink)}
.tl-eras button[aria-pressed="true"],.tl-show button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tl-show{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tl-show .mono{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:2px}
.tl-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--muted)}
.tl-legend li{display:flex;align-items:center;gap:5px}
.tl-legend svg{overflow:visible}
.tl-help{margin-top:6px;font-size:.78rem;color:var(--muted)}
.tl-lane{fill:var(--acc);opacity:.07}
.tl-lane-label{font:600 15px var(--body);fill:var(--acc)}
.tl-sublane{opacity:.05}
.tl-lane-sub{font:500 11px var(--mono);fill:var(--muted)}
.tl-branch-label{font:500 12px var(--body);fill:var(--acc)}
.tl-toggle{cursor:pointer;outline:none}
.tl-toggle-bg{fill:transparent}
.tl-toggle:hover .tl-toggle-bg,.tl-chart[data-kb] .tl-toggle:focus .tl-toggle-bg{fill:color-mix(in srgb,var(--acc) 8%,transparent)}
.tl-chart[data-kb] .tl-toggle:focus .tl-toggle-bg{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.tl-chev{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tl-axis{stroke:var(--muted);stroke-width:1;fill:none}
.tl-break-bg{fill:var(--sheet)}
.tl-grid{stroke:var(--rule-soft);stroke-width:1}
.tl-tick{font:500 12px var(--mono);fill:var(--muted)}
.tl-svg:focus,.tl-svg :focus{outline:none}
.tl-chart[data-kb] .tl-svg:focus{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.tl-axis-band{fill:transparent}
.tl-dot{pointer-events:none;outline:none}
/* markers by importance: 3 landmark diamond, 2 major filled dot, 1 supporting hollow dot */
.tl-mark{stroke:var(--acc);stroke-width:2;transition:stroke-width .15s}
.tl-m3{fill:var(--acc);stroke:var(--sheet);stroke-width:2;stroke-linejoin:round}
.tl-m2{fill:color-mix(in srgb,var(--acc) 55%,var(--sheet))}
.tl-m1{fill:var(--sheet);stroke-width:1.8}
.tl-halo{fill:var(--acc);opacity:.15}
.tl-ring{fill:none;stroke:var(--acc);stroke-width:2;opacity:0}
.tl-dot.on .tl-ring{opacity:1}
.tl-dot.sel .tl-ring{opacity:1;stroke-width:3}
.tl-dot{transition:opacity .2s}
.tl-dot.dim,.tl-lbl.dim{opacity:.22}
.tl-link{fill:none;stroke:var(--muted);stroke-width:1.2;opacity:.35}
.tl-link-all{stroke-dasharray:3 3}
.tl-link-hover{stroke:var(--ink);opacity:.55;stroke-width:1.5}
.tl-link-chain{stroke:var(--ink);opacity:.3;stroke-width:1.2}
.tl-link-on{stroke:var(--ink);opacity:.85;stroke-width:2}
.tl-arrow{fill:var(--muted)}
.tl-dot.on .tl-m2,.tl-dot.on .tl-m1{fill:var(--acc)}
.tl-chart[data-kb] .tl-dot:focus .tl-ring{opacity:1;stroke:var(--ink);stroke-dasharray:3 3}
.tl-lbl{fill:var(--muted);font-family:var(--body);font-weight:500;paint-order:stroke;stroke:var(--sheet);stroke-width:3px;stroke-linejoin:round}
.tl-lbl3{fill:var(--ink);font-weight:600}
.tl-lbl{pointer-events:none}
.tl-lbl.on{fill:var(--acc)}
.tl-empty{font:500 14px var(--body);fill:var(--muted)}
.tl-brush{fill:color-mix(in srgb,var(--ink) 10%,transparent);stroke:var(--ink);stroke-width:1;stroke-dasharray:4 3}
.tl-brush-lbl{font:600 12px var(--mono);fill:var(--ink)}
.tl-ov{fill:var(--rule-soft)}
.tl-ov-dot{fill:var(--acc);opacity:.8}
.tl-ov-win{fill:color-mix(in srgb,var(--ink) 8%,transparent);stroke:var(--ink);stroke-width:1.5}

/* detail panel next to the chart */
.tl-detail{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-height:300px}
@media (max-width:960px){
  .tl-detail{min-height:0}
  /* on narrow screens a selected event opens as a sheet over the bottom of the screen */
  .tl-detail[data-field]{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;max-height:min(46vh,480px);overflow:auto;box-shadow:0 -8px 30px rgba(0,0,0,.22);overscroll-behavior:contain}
  .tl-d-nav{position:sticky;top:-18px;background:var(--sheet);padding:8px 0;margin-top:-14px;z-index:1}
}
.tl-detail[data-field]{border-color:color-mix(in srgb,var(--acc) 45%,var(--rule))}
.tl-detail h3{font-size:1.25rem}
.tl-detail .tl-field{font-size:.78rem;margin-top:-4px}
.tl-hint p{margin:0}
.tl-d-nav{display:flex;align-items:center;gap:6px;margin:-6px -8px 0 0}
.tl-d-nav .mono{font-size:.75rem;color:var(--muted);margin-right:auto;order:-1}
.tl-d-nav button{width:32px;height:30px;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);font:500 1rem var(--body);cursor:pointer}
.tl-d-nav button:hover:not(:disabled){background:var(--rule-soft)}
.tl-d-nav button:disabled{color:var(--rule);cursor:default}
.tl-d-nav [data-close]{border-color:transparent;font-size:1.3rem}
.tl-rels{display:flex;flex-direction:column;gap:6px}
.tl-rels div{display:flex;flex-wrap:wrap;gap:6px}
.tl-rel{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:999px;padding:3px 10px 3px 4px;font:500 .8rem var(--body);cursor:pointer}
.tl-rel .mono{background:var(--acc);color:var(--sheet);border-radius:999px;padding:1px 7px;font-size:.7rem}
.tl-rel:hover{border-color:var(--acc)}
.tl-answer{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--rule-soft);padding-top:12px;margin-top:2px}
.tl-answer-q{font-weight:600}
.tl-answer-p{font-size:.92rem;color:var(--muted)}
.tl-answer-p code{font-size:.85em}
.tl-answer .tl-go{margin-top:6px}
.tl-nolesson{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:auto}

/* "Back to timeline" after opening a lesson from the chart */
.tl-back{position:fixed;left:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);text-decoration:none;font:600 .88rem var(--body);padding:10px 16px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.tl-back:hover{transform:translateY(-1px)}
.tl-back[hidden]{display:none}
.tl-d-head{display:flex;align-items:baseline;gap:12px}
.tl-hint{color:var(--muted);font-size:.95rem;display:flex;flex-direction:column;gap:6px}
.tl-imp{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--rule);color:var(--muted);border-radius:999px;padding:1px 8px;white-space:nowrap}
.tl-imp[data-imp="3"]{background:var(--acc);border-color:var(--acc);color:var(--sheet)}
.tl-imp[data-imp="2"]{border-color:color-mix(in srgb,var(--acc) 50%,var(--rule));color:var(--acc)}
.tl-d-head .tl-imp{align-self:center}
.tl-hint b{color:var(--ink);font-weight:600}
.tl-year{font:600 1.6rem var(--display);color:var(--acc);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tl-q{font-size:1rem;font-style:italic;display:flex;flex-direction:column;gap:4px}
.tl-q .eyebrow{font-style:normal}
.tl-go{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--acc) 9%,var(--sheet));border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);text-decoration:none;transition:background .2s}
.tl-go:hover{background:color-mix(in srgb,var(--acc) 16%,var(--sheet))}
.tl-go .mono{grid-column:1;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.tl-go span:nth-child(2){grid-column:1;font-weight:600;font-size:.95rem}
.tl-go span:last-child{grid-column:2;grid-row:1/span 2;color:var(--acc);font-size:1.2rem}

/* vertical list */
.tl-list{list-style:none;margin:0;padding:0;position:relative}
.tl-list::before{content:"";position:absolute;left:4.6em;top:8px;bottom:8px;width:2px;background:var(--rule)}
.tl-item{position:relative;display:grid;grid-template-columns:4em minmax(0,1fr);gap:28px;padding:16px 0;scroll-margin-top:90px;border-radius:12px}
.tl-item::before{content:"";position:absolute;left:calc(4.6em - 5px);top:28px;width:12px;height:12px;border-radius:50%;background:var(--sheet);border:2.5px solid var(--acc)}
.tl-item .tl-year{font-size:1.25rem;text-align:right;padding-top:16px}
.tl-body{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:8px;max-width:760px}
.tl-body h3{font-size:1.2rem}
.tl-sum{color:var(--muted);font-size:.95rem}
.tl-field{color:var(--muted);display:flex;align-items:center;gap:10px}
.tl-item[data-imp="3"]::before{width:16px;height:16px;left:calc(4.6em - 7px);top:26px;border-radius:2px;transform:rotate(45deg);background:var(--acc);border-color:var(--sheet)}
.tl-item[data-imp="2"]::before{background:color-mix(in srgb,var(--acc) 55%,var(--sheet))}
.tl-item[data-imp="1"]::before{width:9px;height:9px;left:calc(4.6em - 3.5px);top:29.5px;border-width:2px}
.tl-item[data-imp="3"] .tl-body{border-color:color-mix(in srgb,var(--acc) 40%,var(--rule))}
.tl-item[data-imp="3"] .tl-body h3{font-size:1.3rem}
.tl-body .tl-go{margin-top:6px}
@media (max-width:560px){
  .tl-list::before{left:6px}
  .tl-item{grid-template-columns:minmax(0,1fr);gap:4px;padding-left:24px}
  .tl-item::before{left:1px;top:22px}
  .tl-item[data-imp="3"]::before{left:-1px;top:20px}
  .tl-item[data-imp="1"]::before{left:2.5px;top:23.5px}
  .tl-item .tl-year{text-align:left;padding-top:0}
}

/* links from a lesson note back to the timeline */
.tl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tl-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--rule);border-radius:999px;font-size:.82rem;text-decoration:none;color:var(--muted);background:var(--sheet)}
.tl-chip .mono{background:var(--acc);color:var(--sheet);border-radius:999px;padding:1px 8px;font-size:.72rem}
.tl-chip:hover{color:var(--ink);border-color:var(--acc)}

/* highlight after jumping to a section */
.note,.lsec{scroll-margin-top:90px;outline:none}
.flash{animation:flash 2.2s ease-out}
@keyframes flash{
  0%,35%{box-shadow:0 0 0 12px color-mix(in srgb,var(--acc) 12%,transparent),0 0 0 14px var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
  100%{box-shadow:0 0 0 12px transparent,0 0 0 14px transparent;background:transparent}}
.note.flash,.lsec.flash,.tl-item.flash{border-radius:4px}