/* v96: Building the Bible (staging pages): the picture pane, the draft banner, tables, the tracer. Colours come from the site's own tokens.
   v97: the pane's bar names the stop (a stop list on the all-stops page), a grip makes the pane taller or shorter, a shorter banner,
   stop cards on the landing page, a stop strip and a clearer pager on the stop pages, tables that fit a phone, the tracer in the chart's colours. */
.btb-draft{margin:0;padding:8px 14px;border:1px solid var(--accent);border-left-width:5px;border-radius:6px;background:var(--accent-soft);font:400 14.5px/1.4 var(--sans);color:var(--ink)}
.btb-draft b{letter-spacing:.1em;font-weight:700;margin-right:.4em}

/* ---- the picture pane */
:root{--tp-h:clamp(160px,34vh,420px)}
.tp{position:sticky;top:0;z-index:30;background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:0 3px 14px rgba(0,0,0,.16);overflow:hidden}
.tp-hero{position:relative;box-shadow:none}
.tp-bar{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--rule);font:600 14px/1.2 var(--sans)}
.tp-title{flex:1 1 auto;min-width:0;color:var(--ink);font:700 15px/1.25 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-jumpw{display:block}
.tp-jump{max-width:100%;font:700 15px/1.2 var(--serif);color:var(--ink);background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 26px 6px 6px;margin-left:-6px;cursor:pointer;
 -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.tp-jump:hover{border-color:var(--rule)}
.tp-jump:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.tp-btns{display:flex;flex-wrap:nowrap;gap:5px;flex:0 0 auto}
.tp button{font:600 14px/1 var(--sans);min-height:34px;min-width:34px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.tp button:hover{border-color:var(--accent)}
.tp button:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.tp button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.tp button[data-tp="in"],.tp button[data-tp="out"]{font-size:18px}
@media (pointer:coarse){.tp button{min-height:44px;min-width:44px}}
.tp-vp{position:relative;height:var(--tp-h);overflow:hidden;touch-action:none;cursor:grab;background:#faf6ef;-webkit-user-select:none;user-select:none}
.tp-vp:active{cursor:grabbing}
.tp-vp:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tp-hero .tp-vp{height:clamp(300px,68vh,780px)}
.tp-img{position:absolute;left:0;top:0;max-width:none;height:auto;transform-origin:0 0;will-change:transform;pointer-events:none;-webkit-user-drag:none}
/* the grip under the picture: drag it to make the picture taller or shorter */
.tp-grip{height:14px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;border-top:1px solid var(--rule);background:var(--surface)}
.tp-grip span{display:block;width:44px;height:4px;border-radius:2px;background:var(--rule)}
.tp-grip:hover span,.tp-grip.on span{background:var(--accent)}
.tp-grip:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (pointer:coarse){.tp-grip{height:22px}.tp-grip span{width:56px;height:5px}}
.tp.tp-min .tp-vp,.tp.tp-min .tp-grip{display:none}
.tp.tp-min .tp-bar{border-bottom:0}
.tp.tp-big{position:fixed;inset:0;z-index:100;border-radius:0;display:flex;flex-direction:column;box-shadow:none}
.tp.tp-big .tp-vp{height:auto;flex:1}
.tp.tp-big .tp-grip{display:none}
html.tp-lock{overflow:hidden}
.tp .sm{display:none}
@media (max-width:700px){
 .tp-bar{flex-wrap:wrap;padding:4px 6px}
 .tp-title{flex-basis:100%;font-size:14px;padding:2px 2px 0}
 .tp-jump{font-size:14px;padding:4px 24px 4px 4px;margin-left:-4px}
 .tp-btns{width:100%;justify-content:space-between;gap:4px}
 .tp .lg{display:none}.tp .sm{display:inline}
 .tp:not(.tp-big) [data-tp="whole"],.tp[data-follow="1"]:not(.tp-big) [data-tp="reset"]{display:none}      /* on a phone: Whole picture waits for Full screen; on the all-stops page the Follow button does the resetting */
 .tp button{padding:0 8px}
 :root{--tp-h:clamp(130px,28vh,300px)}
 .tp-hero .tp-vp{height:clamp(260px,60vh,560px)}
 .btb-draft{font-size:13.5px;padding:6px 10px}
 .btb .stop{scroll-margin-top:calc(var(--tp-h) + 130px)}
}
@media (max-height:480px) and (orientation:landscape){:root{--tp-h:clamp(110px,38vh,200px)}}
/* v103 pending: phone room. The sticky pane drops its plain title row (screen readers still get it; the stop name is in the page heading just below, and the all-stops page keeps its stop menu), and the pages lose side padding so the text and the pane are wider. */
@media (max-width:700px){.tp:not(.tp-hero):not(.tp-big) .tp-title:not(.tp-jumpw){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;flex:none}}
@media (max-width:560px){main:has(.btb){margin-left:-8px;margin-right:-8px}.btb{padding-left:12px;padding-right:12px}}

@media print{.tp,.btb-draft,.stopstrip{display:none}}

/* ---- text page */
.btb.btb-wide{max-width:none;width:100%}
.btb h1{margin:0 0 .3em;font:700 clamp(27px,3.6vw,38px)/1.15 var(--serif)}
.btb h2{font:700 clamp(23px,2.6vw,29px)/1.2 var(--serif);margin:0 0 .5em}
.btb .sub{color:var(--muted);font:400 17px/1.5 var(--sans);margin:.2em 0 1em}
.btb .prose p.lic,.btb .lic{font:italic 400 15px/1.5 var(--serif);color:var(--muted);max-width:38em}
.btb .stop{padding-top:.4em;margin-top:2em;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--tp-h) + 80px)}
.btb .stop:first-of-type{margin-top:.6em;border-top:0}
.btb .aside{margin:1.4em 0 0;padding:.7em .9em;border:1px solid var(--rule);border-radius:6px;font:400 16px/1.5 var(--sans)}
.btb .files{display:flex;flex-wrap:wrap;gap:6px 18px;margin:1.2em 0 0;font:400 16px/1.5 var(--sans)}
.btb-alt{margin:1.4em 0 0;border:1px solid var(--rule);border-radius:6px;padding:.4em .9em;font:400 16px/1.5 var(--sans)}
.btb-alt summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.btb-alt h3{font:700 16px/1.3 var(--sans);margin:1em 0 .2em}
.btb-alt ul{margin:.2em 0 .6em;padding-left:1.2em}

/* pager: two cards, each saying where it goes */
.btb .pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2em;padding-top:1.2em;border-top:1px solid var(--rule)}
.btb .pager a{display:flex;flex-direction:column;gap:3px;min-height:44px;padding:.7em .9em;border:1px solid var(--rule);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--surface)}
.btb .pager a:hover{border-color:var(--accent)}
.btb .pager a small{font:600 13px/1.2 var(--sans);color:var(--accent);letter-spacing:.02em}
.btb .pager a span{font:600 16px/1.3 var(--serif)}
.btb .pager a.next{text-align:right;grid-column:2}
@media (max-width:560px){.btb .pager{grid-template-columns:1fr}.btb .pager a.next{grid-column:1}}

/* stop strip: the ten stops as numbers, above the title */
.stopstrip{margin:0 0 1em}
.stopstrip ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.stopstrip a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 4px;border:1px solid var(--rule);border-radius:50%;font:600 14px/1 var(--sans);color:var(--ink);text-decoration:none;background:var(--surface)}
.stopstrip a:hover{border-color:var(--accent)}
.stopstrip a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.stopstrip li.all{margin-left:6px}
.stopstrip li.all a{border-radius:17px;padding:0 12px;font-weight:600}
@media (pointer:coarse){.stopstrip a{min-width:40px;height:40px}.stopstrip li.all a{border-radius:20px}}

/* landing page */
.btb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:1.2em 0 1.6em;font:600 16px/1.3 var(--sans)}
.btb-cta a.go{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:8px;background:var(--accent);color:var(--surface);text-decoration:none}
.btb-cta a.go:hover{filter:brightness(1.08)}
.stopcards{list-style:none;margin:.4em 0 1.6em;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.stopcards a{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);text-decoration:none;font:600 16px/1.3 var(--serif)}
.stopcards a:hover{border-color:var(--accent)}
.stopcards .n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 15px/1 var(--sans)}
.morecards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.morecards a{display:flex;flex-direction:column;gap:4px;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--rule);border-radius:8px;color:var(--ink);text-decoration:none;background:var(--surface)}
.morecards a:hover{border-color:var(--accent)}
.morecards b{font:700 16px/1.25 var(--serif);color:var(--accent)}
.morecards span{font:400 14.5px/1.4 var(--sans);color:var(--muted)}

/* ---- tables: real tables. Rows from the Douay-Rheims are shaded AND labelled "(from Latin)". */
.btb-scroll{overflow-x:auto;margin:.8em 0;-webkit-overflow-scrolling:touch}
.btb-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
table.btb-tbl{border-collapse:collapse;width:100%;font:400 16px/1.45 var(--sans)}
.btb-tbl th,.btb-tbl td{border:1px solid var(--rule);padding:.5em .75em;text-align:left;vertical-align:top}
.btb-tbl thead th{background:var(--accent-soft);font-weight:700}
.btb-tbl th:first-child{width:1%;white-space:nowrap}            /* the Bible column is as wide as its longest name; the words get the rest */
.btb-tbl tbody th{font-weight:600}
.btb-tbl tr.dr th,.btb-tbl tr.dr td{background:color-mix(in srgb,var(--accent-soft) 70%,var(--surface))}
@media (max-width:560px){                                          /* phone: the name may wrap, so the words never run off the screen */
 table.btb-tbl{font-size:15px;table-layout:fixed}
 .btb-tbl th:first-child{width:36%;white-space:normal}
 .btb-tbl th,.btb-tbl td{padding:.45em .55em;overflow-wrap:anywhere}
}

/* ---- the tracer, in the chart's own colours */
.btb-how{margin:.2em 0 .8em;max-width:46em}
.btb-how h2{font:700 17px/1.3 var(--serif);margin:0 0 .3em}
.btb-how p{font:400 15.5px/1.5 var(--sans);margin:.3em 0;color:var(--ink)}
.btb-keybar{position:sticky;top:0;z-index:20;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:7px 10px;margin:.2em 0 .6em;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.btb-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font:400 14px/1.3 var(--sans);color:var(--ink)}
.btb-key li{display:flex;align-items:center;gap:7px}
.btb-key i{flex:0 0 auto;width:20px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15)}
.btb-key i.nt{background:var(--surface);border:3px solid #c9961a}
@media (max-width:560px){.btb-keybar{padding:5px 8px}.btb-key{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:12.5px;line-height:1.2}.btb-key li{gap:5px}.btb-key i{width:16px;height:12px}}
.btb-swipe{display:none;font:400 14px/1.4 var(--sans);color:var(--muted);margin:0 0 .3em}
@media (max-width:900px){.btb-swipe{display:block}}
table.btb-trace{border-collapse:separate;border-spacing:3px;width:100%;min-width:62em;font:400 14.5px/1.35 var(--sans)}
.btb-trace th{text-align:left;vertical-align:top;font-weight:600;padding:.4em .5em}
.btb-trace thead th{text-align:center;font-weight:700;vertical-align:bottom}
.btb-trace thead th:first-child,.btb-trace tbody th{position:sticky;left:0;z-index:1;background:var(--surface);min-width:10.5em;max-width:12em}
.btb-trace thead th.net,.btb-trace td.net{outline:3px solid #c9961a;outline-offset:-1px}
.btb-trace thead th.net small{display:block;font-weight:600;color:#9a7110;font-size:.82em}
.btb-trace th small{display:block;font-weight:400;color:var(--muted);font-size:.86em}
.btb-trace td{padding:.5em .45em;border-radius:4px;text-align:center;vertical-align:top}
.btb-trace td b{display:block;font-weight:700}
.btb-trace td span{display:block;font-size:.9em;margin-top:2px}
.btb-trace td.ef,.btb-key i.ef{background:#2f6b4f;color:#fff}
.btb-trace td.e,.btb-key i.e{background:#bfdacb;color:#1e1b16}
.btb-trace td.lf,.btb-key i.lf{background:#1f3f6b;color:#fff}
.btb-trace td.l,.btb-key i.l{background:#c3d0e3;color:#1e1b16}
.btb-trace td.n,.btb-key i.n{background:#e9e4d6;color:#4b4231}
.btb-trace td.ef span,.btb-trace td.lf span{color:#eef2ee}
.btb-trace td.e span,.btb-trace td.l span{color:#3a3528}
.btb-cap{font:400 15.5px/1.5 var(--sans);color:var(--muted);margin:.6em 0 0;max-width:46em}
@media (max-width:600px){.btb-trace thead th:first-child,.btb-trace tbody th{min-width:7.6em;max-width:8.4em;font-size:13.5px}.btb-trace th small{font-size:.82em}table.btb-trace{min-width:54em;font-size:13.5px}}

/* v103 pending: best on a large-screen PC; the whole scroll is the default way in. */
.btb-screen{margin:0;padding:6px 14px;font:400 13.5px/1.4 var(--sans);color:var(--ink-soft,var(--ink));text-align:center}
@media (max-width:560px){.btb-screen{padding:3px 10px}.btb-screen-more{display:none}}      /* on a phone the note is one short line, so the picture keeps its room */
@media print{.btb-screen,.btb-more{display:none}}
/* v104: the site header and breadcrumb are back at the top of the whole scroll (they scroll away as usual); a floating button returns to them */
.btb-top{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;min-width:48px;min-height:48px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
 border:1px solid var(--rule);border-radius:999px;background:var(--surface,#fff);color:var(--ink);font:700 15px/1 var(--sans);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.btb-top.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.btb-top:hover,.btb-top:focus-visible{border-color:var(--accent);color:var(--accent)}
.btb-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btb-top span{font-size:20px;line-height:1}
@media (max-width:560px){.btb-top .lg{display:none}.btb-top{padding:0;width:48px}}
html.tp-lock .btb-top{display:none}
@media print{.btb-top{display:none}}
@media (prefers-reduced-motion:reduce){.btb-top,.btb-top.on{transition:none}}
.btb-more{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:14px 0 26px;font:600 15px/1.3 var(--sans)}

/* v103 pending: the tracer's picture follows the table row by row (the pane is as tall as the chart needs, and the colour key sticks under it) */
body:has(.btb-wide){--tp-h:clamp(240px,46vh,540px)}
@media (max-width:700px){body:has(.btb-wide){--tp-h:clamp(170px,34vh,340px)}}
.btb-keybar{top:var(--tp-top,0px)}