/* v110: The Whole Story (the Timeline). Loaded after btb.css, which has the picture pane, the layer bar, the stop cards, the pager and the download block; this file only adds what the Timeline needs on top.
   Colours come from the site's own tokens (the charts are drawn on white and stay white in dark mode, as a printed chart would). */

/* ---- the picture pane: the charts are wider than a page, so the pane is a little taller than Building the Bible's */
.tp-pic{background:#fff}
.tp-vp{background:#fff}
body:has(.tl){--tp-h:clamp(240px,48vh,560px)}
@media (max-width:700px){body:has(.tl){--tp-h:clamp(170px,34vh,340px)}}
@media (max-height:480px) and (orientation:landscape){body:has(.tl){--tp-h:clamp(110px,38vh,200px)}}

/* ---- v111: a touch phone is told where the whole chart is (the PDF, or Full screen turned sideways); under the picture, in the page, so the picture keeps its room */
.tl-phone-line{display:none;margin:.5em 12px 0;font:400 14.5px/1.45 var(--sans);color:var(--ink-soft,var(--ink))}
.tl-phone-line a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:700px) and (pointer:coarse){.tl-phone-line{display:block}}
@media print{.tl-phone-line{display:none}}

/* ---- the text: the "Picture:" line at the end of each stop says what the picture is showing */
.tl .prose p.tl-pic{margin:1.4em 0 .4em;padding:.5em .85em;border-left:4px solid var(--accent);border-radius:0 6px 6px 0;background:var(--accent-soft);font:italic 400 15.5px/1.5 var(--serif);color:var(--ink)}
.tl .prose{max-width:46em}
.tl .prose h3{font:700 19px/1.3 var(--serif);margin:1.4em 0 .4em}
.tl .stop h2{scroll-margin-top:calc(var(--tp-h) + 130px)}

/* ---- the data page */
.tl-datapage .sub,.tl-datapage .lic{max-width:46em}
.tl-datapage .tl-bps,.tl-datapage .btb-alt{max-width:62em}
.tl-jump{list-style:none;margin:.2em 0 1em;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;font:600 14.5px/1.3 var(--sans)}
.tl-jump a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:18px;color:var(--ink);text-decoration:none;background:var(--surface)}
.tl-jump a:hover{border-color:var(--accent)}
@media (pointer:coarse){.tl-jump a{min-height:44px}}
.tl-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:.4em 0 .6em;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);font:600 14px/1.2 var(--sans)}
.tl-filter label{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.tl-filter select,.tl-filter input{font:400 15px/1.2 var(--sans);min-height:40px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);max-width:100%}
.tl-filter input{min-width:13em}
.tl-filter button{font:600 14px/1 var(--sans);min-height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
.tl-filter button:hover{border-color:var(--accent)}
.tl-filter :focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.tl-n{font:600 14.5px/1.3 var(--sans);color:var(--ink);margin-left:auto;align-self:center}
@media (pointer:coarse){.tl-filter select,.tl-filter input,.tl-filter button{min-height:44px}}
@media (max-width:560px){.tl-filter label{flex:1 1 40%}.tl-filter input{min-width:0;width:100%}.tl-n{margin-left:0;flex-basis:100%}}

table.tl-tbl{border-collapse:collapse;width:100%;min-width:46em;font:400 15px/1.45 var(--sans)}
.tl-tbl th,.tl-tbl td{border:1px solid var(--rule);padding:.45em .65em;text-align:left;vertical-align:top}
.tl-tbl thead th{background:var(--accent-soft);font-weight:700}
.tl-tbl tbody th[scope="row"]{font-weight:600;min-width:13em}
.tl-tbl tr.grp th{background:var(--accent-soft);font:700 17px/1.3 var(--serif);border-left:0;border-right:0}
.tl-tbl tr.grp th small{font:400 14px/1.3 var(--sans);color:var(--muted);margin-left:.5em}
.tl-tbl tr.grp th>span{position:sticky;left:.65em}
.tl-tbl tr.ev th small.tied{display:inline-block;margin-left:.4em;padding:0 .45em;border:1px solid var(--rule);border-radius:9px;font:600 12px/1.5 var(--sans);color:var(--muted);white-space:nowrap}
.tl-tbl td.b-judgment,.tl-tbl td.c-disputed,.tl-tbl td.c-low{font-weight:700}      /* the weak spots read in bold, not only in colour */
.tl-tbl td.c-disputed::before,.tl-tbl td.c-low::before{content:"\25B2\00a0";font-size:.8em}
.tl-tbl tr.det td{padding:0 .65em;border-top:0}
.tl-tbl tr.ev:target th,.tl-tbl tr.ev:target td{background:var(--accent-soft)}
.tl-tbl details{position:sticky;left:.65em;max-width:min(62em,calc(100vw - 56px))}      /* stays in view when the table is swiped sideways on a phone */
.tl-tbl summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600;color:var(--accent)}
.tl-tbl summary:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
@media (pointer:coarse){.tl-tbl summary{min-height:44px}}
.tl-tbl dl{margin:.2em 0 .8em;display:grid;grid-template-columns:minmax(7em,max-content) 1fr;gap:.35em 1em}
.tl-tbl dt{font-weight:700;color:var(--muted)}
.tl-tbl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tl-tbl dd p{margin:0 0 .5em}
@media (max-width:560px){.tl-tbl dl{grid-template-columns:1fr}.tl-tbl dt{margin-top:.4em}}
.tl-src{list-style:none;margin:0;padding:0}
.tl-src li{margin:0 0 .45em;padding-left:.7em;border-left:3px solid var(--rule)}
.tl-src li.nc,.tl-unconf li{border-left-color:#b45309}
.tl-src li.nc{font-weight:600}
.tl-scroll{border:1px solid var(--rule);border-radius:6px}
.tl-scroll .tl-tbl th,.tl-scroll .tl-tbl td{border-top:0;border-left:0}

/* ---- the ten branch points */
.tl-bps{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:14px}
.tl-bp{padding:.9em 1.1em;border:1px solid var(--rule);border-radius:8px;background:var(--surface);scroll-margin-top:16px}
.tl-bp h3{font:700 19px/1.3 var(--serif);margin:0 0 .5em}
.tl-bp .decides{list-style:none;margin:0;padding:0;display:grid;gap:.6em;font:400 16px/1.55 var(--sans)}
.tl-bp .decides li{padding-left:.8em;border-left:3px solid var(--accent-soft)}
.tl-bp details{margin-top:.8em;font:400 15px/1.5 var(--sans)}
.tl-bp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent)}
.tl-bp dl{display:grid;grid-template-columns:minmax(7em,max-content) 1fr;gap:.35em 1em;margin:.2em 0}
.tl-bp dt{font-weight:700;color:var(--muted)}
.tl-bp dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tl-bp dd p{margin:0 0 .5em}
@media (max-width:560px){.tl-bp dl{grid-template-columns:1fr}.tl-bp dt{margin-top:.4em}}

/* ---- sources and flags */
.tl-links,.tl-unconf,.tl-vfiles{list-style:none;margin:.4em 0 1em;padding:0;display:grid;gap:.5em}
.tl-links li,.tl-unconf li,.tl-vfiles li{padding:.5em .8em;border:1px solid var(--rule);border-radius:6px;background:var(--surface);font:400 15.5px/1.5 var(--sans)}
.tl-unconf li{border-left:4px solid #b45309;overflow-wrap:anywhere}
.tl-links li>span{display:block;color:var(--muted);font-size:14.5px}
.tl-cited{display:block;margin-top:.2em;color:var(--muted);font-size:14.5px}
.tl-cited a{color:var(--accent)}
.tl-cited small{font-size:.9em}
.tl .glance code,.tl code{font:500 .92em/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.tl .glance{max-width:100%}

/* ---- downloads: the layers, listed under each chart */
.btb-dl .lay-l{margin-top:8px;font-size:14px}
.btb-dl .l.lay a{min-height:38px;font-weight:500}
.tp-dlm .g:last-child .l a{font-weight:500}

@media print{.tl-filter,.tl-jump{display:none}}