/* =====================================================================
   The bar at the foot of the screen, and the sheets it raises (js/taskbar.js): Chapters and Tools.
   The bar is ruled thick-and-thin along its top, as the title page is. On a phone its two buttons share its width,
   each an icon over its name, and a sheet rises from behind the bar as wide as the screen, with a grip at its top;
   on a wider screen the two buttons stand together in the middle of the bar, and a sheet is a card just above them.
   The chapters inside are gathered into parts, each a line of an index that opens to its chapters.
   The tools' own controls (.opt-*) are in css/manuscript.css.
   ===================================================================== */

/* --tk-h: the height of the bar, which whatever is fixed at the foot of the screen keeps clear of */
:root { --tk-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { :root { --tk-h: calc(54px + env(safe-area-inset-bottom, 0px)); } }

/* the page ends clear of the bar, and what is brought into view by the keyboard is not left beneath it */
/* (--tk-real: the bar's height as drawn, measured by js/taskbar.js, which a large system font or an edge-to-edge
   screen can make taller than --tk-h; whatever keeps clear of the bar reads it) */
.page { margin-bottom: calc(70px + var(--tk-real, var(--tk-h))); }
html { scroll-padding-bottom: var(--tk-real, var(--tk-h)); }

/* ---- the bar ----
   (.tk-bar, not .tk: the ticks of the timeline's rolls are <i class="tk">, js/timeline.js) */
.tk-bar {
  position: fixed; z-index: 610; left: 0; right: 0; bottom: 0;
  box-sizing: border-box; height: auto; min-height: var(--tk-h); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 3px double var(--press);
}
.tk-row { display: flex; align-items: stretch; height: 100%; max-width: 34rem; margin: 0 auto; }
.tk-btn {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  margin: 0; padding: 3px 8px 4px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tk-btn + .tk-btn::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; border-left: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.tk-i { flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.tk-l { font-family: var(--caps); font-size: 0.86rem; line-height: 1; letter-spacing: 0.14em; white-space: nowrap; }
.tk-btn:hover { color: var(--ink); }
.tk-btn[aria-expanded="true"] { color: var(--rubric); }
/* the open one is marked with a short rubric rule across its top, the way a place is marked in a book */
.tk-btn::after { content: ""; position: absolute; top: -1px; left: 50%; width: 2.6rem; height: 2px; margin-left: -1.3rem; background: var(--rubric); transform: scaleX(0); transition: transform 0.22s ease; }
.tk-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.tk-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }
#tkToolsBtn .tk-i { transition: transform 0.5s ease; }
#tkToolsBtn[aria-expanded="true"] .tk-i { transform: rotate(45deg); }

@media (min-width: 768px) {
  .tk-row { justify-content: center; gap: 6px; max-width: none; }
  .tk-btn { flex: 0 1 13rem; flex-direction: row; gap: 10px; padding: 3px 18px 4px; }
  .tk-i { width: 20px; height: 20px; }
  .tk-l { font-size: 0.95rem; letter-spacing: 0.16em; }
}

/* ---- the veil over the page while a sheet is open: a tap on it closes the sheet, and it does not scroll the page ---- */
.tk-scrim { position: fixed; inset: 0; z-index: 590; background: rgba(8, 4, 12, 0.4); opacity: 0; pointer-events: none; touch-action: none; transition: opacity 0.3s ease; }
.tk-scrim.open { opacity: 1; pointer-events: auto; }
:root[data-theme="light"] .tk-scrim { background: rgba(50, 38, 26, 0.24); }

/* ---- a sheet ----
   On a phone it rises from behind the bar; shut, it waits beneath the bar, not drawn at all. Pulled down by its head,
   it follows the finger (--tk-drag) and, let go far enough, closes. */
.tk-sheet {
  --tk-drag: 0px;
  position: fixed; z-index: 600; left: 0; right: 0; bottom: var(--tk-real, var(--tk-h));
  box-sizing: border-box; display: flex; flex-direction: column;
  max-height: calc(100vh - var(--tk-real, var(--tk-h)) - 3rem); max-height: calc(100svh - var(--tk-real, var(--tk-h)) - 3rem);
  border-top: 1px solid var(--press); background: var(--panel); color: var(--ink);
  box-shadow: 0 -16px 40px var(--shadow);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s linear 0.32s;
}
.tk-sheet.open { transform: translateY(var(--tk-drag)); visibility: visible; transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s; }
.tk-sheet.is-dragging { transition: none; }

.tk-sheet-head {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  margin: 0 14px; padding: 16px 44px 9px; border-bottom: 3px double var(--press);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tk-grip { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; background: var(--rule); }
.tk-sheet-h { margin: 0; font-family: var(--caps); font-weight: 400; font-size: 1.02rem; line-height: 1.2; letter-spacing: 0.22em; color: var(--rubric); }
.tk-x { position: absolute; right: -8px; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.15rem; padding: 0 0 3px; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--text); font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; }
.tk-x:hover { color: var(--ink); }
.tk-x:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.tk-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 14px; -webkit-overflow-scrolling: touch; }
#opt.tk-sheet-body { padding-top: 2px; }

/* on a wider screen, a card that stands just above the bar, in the middle, where the two buttons are */
@media (min-width: 768px) {
  .tk-sheet {
    left: 50%; right: auto; bottom: calc(var(--tk-real, var(--tk-h)) + 10px); width: min(28rem, calc(100% - 32px));
    max-height: min(74vh, 48rem); max-height: min(74svh, 48rem);
    border: 1px solid var(--press); box-shadow: 0 18px 50px var(--shadow), 0 2px 10px var(--lift);
    opacity: 0; transform: translate(-50%, 14px);
    transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.25, 1), opacity 0.2s ease, visibility 0s linear 0.24s;
  }
  .tk-sheet.open { opacity: 1; transform: translate(-50%, var(--tk-drag)); transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.25, 1), opacity 0.2s ease, visibility 0s; }
  .tk-sheet-head { padding-top: 13px; touch-action: auto; }
  .tk-grip { display: none; }
}

/* ---- the chapters: five parts, each a line of an index (numeral, title, what it holds) that opens to its chapters ---- */
.toc { display: block; }
.toc-part { border-bottom: 1px dotted var(--rule); }
.toc-part-h { margin: 0; font: inherit; }
.toc-part-btn {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.4rem; align-items: center; column-gap: 6px;
  width: 100%; margin: 0; padding: 11px 2px 11px 6px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; text-align: left; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.toc-part-btn .tn { align-self: start; padding-top: 0.12rem; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.02em; color: var(--muted); }
.toc-part-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.toc-part-t { font-family: var(--display); font-size: 1.2rem; line-height: 1.18; overflow-wrap: anywhere; }
.toc-part-s { font-size: 0.9rem; font-style: italic; line-height: 1.3; color: var(--muted); }
.toc-part-n { min-width: 1.5em; padding: 1px 5px; border: 1px solid var(--rule); font-family: var(--text); font-size: 0.8rem; line-height: 1.2; text-align: center; font-feature-settings: "lnum"; color: var(--muted); }
.toc-chev { justify-self: center; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--muted); transform: rotate(45deg); transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.25, 1), margin 0.28s ease; }
.toc-part-btn:hover, .toc-part-btn:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); }
.toc-part-btn:hover .toc-part-t, .toc-part-btn[aria-expanded="true"] .toc-part-t { color: var(--rubric); }
.toc-part-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.toc-part-btn[aria-expanded="true"] .toc-chev { margin-top: 0.25rem; transform: rotate(-135deg); color: var(--rubric); }
/* the part that holds the chapter being read: its numeral in red, and a small mark after its title */
.toc-part.has-current .tn { color: var(--rubric); }
.toc-part.has-current .toc-part-t::after { content: ""; display: inline-block; width: 0.36em; height: 0.36em; margin-left: 0.45em; vertical-align: 0.16em; background: var(--rubric); transform: rotate(45deg); }

/* a part opens and shuts by the height of its list (the grid row grows from nothing to the list's own height) */
.toc-list { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s linear 0.3s; }
.toc-part.open .toc-list { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s; }
.toc-part.no-anim .toc-list, .toc-part.no-anim .toc-chev { transition: none; }
/* (clip, where the browser has it, so that the list is not a scroll box of its own, and a chapter's line can be held
   at the top of the sheet while its pages pass beneath it, css/pager.css; hidden where it has not) */
.toc-list-in { min-height: 0; overflow: hidden; overflow: clip; }
/* a part's chapters set in a step from the left, on a ground a shade apart from the sheet's (lighter in the dark theme,
   darker in the light), so they read as the part's own */
.toc-part.open .toc-list-in { margin: 0 0 8px 1.75rem; padding-bottom: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* a chapter, set in under its part's title: its name, and a line on what it studies */
.toc .tab {
  flex: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; margin: 0; padding: 7px 8px 8px calc(2.5rem + 12px);
  border: 0; border-top: 1px dotted color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 0; background: none;
  box-shadow: none !important; text-align: left; font: inherit; font-weight: 400; letter-spacing: 0; color: var(--ink);
  cursor: pointer; transition: none; -webkit-tap-highlight-color: transparent;
}
.toc .tab[hidden] { display: none; }
.toc .tab .tt { font-family: var(--display); font-size: 1.08rem; line-height: 1.22; overflow-wrap: anywhere; }
.toc .tab .ts { font-size: 0.86rem; font-style: italic; line-height: 1.3; color: var(--muted); }
/* within a part, a chapter's name in the small capitals of the titles (IM Fell English SC), set in a little further
   than the part's own title */
.toc-list .tab { padding-left: calc(2.5rem - 1.75rem + 28px); }
.toc-list .tab .tt { font-family: var(--caps); font-size: 1.1rem; letter-spacing: 0.035em; }
.toc .tab:hover, .toc .tab:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); color: var(--rubric); }
.toc .tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.toc .tab.active { color: var(--rubric); box-shadow: inset 3px 0 0 var(--rubric) !important; }

/* the Bible itself, beneath the parts, after a double rule */
.toc .tab.tab-bible { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; column-gap: 6px; margin-top: 10px; padding: 11px 2px 11px 6px; border-top: 3px double var(--press); }
.toc .tab.tab-bible .tn { display: flex; align-items: center; color: var(--muted); }
.toc .tab.tab-bible .tn svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.toc .tab.tab-bible .tt { font-size: 1.2rem; }
.toc .tab.tab-bible.active .tn, .toc .tab.tab-bible:hover .tn { color: var(--rubric); }

/* ---- the tools, in a sheet as wide as the screen there is room for each line's preview (the verse, the icon) ---- */
.tk-sheet .opt-sec { padding: 11px 2px 12px; }
.tk-sheet .opt-list button { min-height: 2.75rem; }
.opt-fs { width: 1.05em !important; height: 1.05em !important; stroke-width: 1.6 !important; }
#optFull[aria-pressed="true"] .fs-enter, #optFull[aria-pressed="false"] .fs-leave { display: none; }

/* ---- the Bible reader's bars at the foot of the screen stand above the bar ---- */
.bb-act, .bb-audio { bottom: calc(var(--tk-real, var(--tk-h)) + 10px); }

@media (prefers-reduced-motion: reduce) {
  .tk-sheet, .tk-sheet.open, .tk-scrim, .tk-btn::after, #tkToolsBtn .tk-i, .toc-list, .toc-part.open .toc-list, .toc-chev { transition: none; }
}
@media print { .tk-bar, .tk-scrim, .tk-sheet { display: none; } .page { margin-bottom: 0; } }