/* The Tibetan reader: the library front door and one text read word by word.

   Two things drive every measurement here. Tibetan is written with stacked
   vowel signs and subjoined letters that sit above and below the line, so it
   needs both a larger size and a taller line than the Chinese around it or the
   marks collide with the row above. And a word is two lines - the syllables and
   how they are read - stacked in one clickable block, because a reciter reads
   down a word, not across a table.

   Set on the same warm paper as the 法本 and 大藏经 readers: someone crossing
   between them should not see the page change colour. */

.tib-page {
  margin: 0 auto;
  max-width: 860px;
  padding: 0 14px 40px;
  text-align: left;
}

/* Every Tibetan run on the page, wherever it sits. The stack ends at a serif
   rather than sans: on a box with no Tibetan face at all the browser draws
   boxes either way, and the fallback matters less than not silently picking a
   Latin face that renders the combining marks flat. */
[lang="bo"] {
  font-family:
    "Noto Sans Tibetan", "Noto Serif Tibetan", Jomolhari, Kailasa, "Microsoft Himalaya", serif;
  line-height: 2.1;
}

/* --- head ---------------------------------------------------------------- */

.tib-crumb {
  font-size: 0.85em;
  margin: 0 0 10px;
}

.tib-crumb a {
  color: #4a7c59;
  text-decoration: none;
}

.tib-head {
  border-bottom: 1px solid #ddddc8;
  padding-bottom: 12px;
}

.tib-head__title {
  font-size: 1.5em;
  margin: 0 0 4px;
}

.tib-head__bo {
  font-size: 1.3em;
  margin: 0 0 4px;
}

.tib-head__en {
  color: #8a7a6a;
  font-style: italic;
  margin: 0 0 6px;
}

.tib-head__sub,
.tib-head__source {
  color: #8a7a6a;
  font-size: 0.9em;
  margin: 4px 0;
}

.tib-head__sub a,
.tib-head__source a {
  color: #4a7c59;
}

.tib-head__icon {
  font-size: 0.75em;
  margin-left: 4px;
}

.tib-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

/* Section 3.5 asks for this in a fixed place. It is a standing note, not a
   warning, so it reads as part of the furniture rather than as an alarm. */
.tib-disclaimer {
  background-color: #f5f2e8;
  border-left: 3px solid #b99c60;
  color: #6b5f52;
  font-size: 0.85em;
  margin: 14px 0;
  padding: 8px 12px;
}

.tib-note {
  color: #8a7a6a;
  font-size: 0.85em;
  margin: 8px 0;
}

.tib-note code {
  background-color: #f0ede3;
  border-radius: 3px;
  padding: 0 4px;
}

.tib-empty {
  color: #8a7a6a;
  padding: 20px 0;
}

/* --- paste box ----------------------------------------------------------- */

.tib-paste {
  background-color: var(--read-paper, #fbf8f1);
  border: 1px solid #e2ddcc;
  border-radius: 6px;
  margin: 14px 0 26px;
  padding: 12px 14px;
}

/* Title and rule on the left, counter and button on the right, all on the row
   above the box. The panel is one control, and stacking its four parts spent
   most of a first screen on furniture. */
.tib-paste__head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tib-paste__intro {
  flex: 1 1 260px;
  min-width: 0;
}

.tib-paste__controls {
  align-items: center;
  display: flex;
  flex: none;
  gap: 10px;
}

/* Wrapped onto its own row on a phone, the pair spreads across it rather than
   huddling at the left edge: the counter stays under the rule it counts against
   and the button stays under the thumb. */
@media screen and (max-width: 560px) {
  .tib-paste__controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

.tib-paste__title {
  font-size: 1.1em;
  margin: 0 0 2px;
}

.tib-paste__hint {
  color: #8a7a6a;
  font-size: 0.85em;
  margin: 0;
}

.tib-paste__box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.2em;
  /* Grown by the script to fit what is in it; this is the floor and the ceiling
     it grows between, so a long paste scrolls rather than pushing the readings
     it produced off the screen. */
  max-height: 220px;
  min-height: 58px;
  overflow-y: auto;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

.tib-paste__box:focus {
  border-color: #b99c60;
  outline: 2px solid rgba(185, 156, 96, 0.35);
  outline-offset: 1px;
}

.tib-paste__meter {
  color: #8a7a6a;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}

/* The site button, at the size this row needs. It had a gold gradient of its
   own for a while; beside the library's own search button on the same page that
   read as a different site's control rather than as emphasis. */
.tib-paste__go,
.tib-library__find-go {
  font-size: 1em;
  padding: 6px 16px;
}

.tib-paste__go .fas,
.tib-library__find-go .fas {
  margin-right: 6px;
}

.tib-paste__go:focus-visible,
.tib-library__find-go:focus-visible {
  outline: 3px solid #14756d;
  outline-offset: 2px;
}

/* Off because the passage is over the limit or a request is in flight. It stays
   readable - a greyed-out button nobody can read is a dead end, not a rule. */
.tib-paste__go:disabled {
  background: #d9cfba;
  color: #6f6455;
  cursor: not-allowed;
  transform: none;
}

/* The keyboard way in, said once and quietly. Hidden where there is no keyboard
   to press it with. */
.tib-paste__tip {
  color: #a3968a;
  display: flex;
  font-size: 0.78em;
  /* Not space-between: with the caveat still hidden that would drag the
     keystroke hint over to the left and back again once a reading lands. */
  gap: 8px;
  justify-content: flex-end;
  margin: 4px 0 0;
}

.tib-paste__caveat {
  margin-right: auto;
}

/* The keystroke, not the caveat, is the half that means nothing without a
   keyboard. */
@media (hover: none) {
  .tib-paste__keys {
    display: none;
  }
}

/* The count turns only when the passage is past a gate the server will refuse
   it on, so the colour means one thing. */
.tib-paste__meter .is-over {
  color: #a94442;
  font-weight: bold;
}

.tib-paste__error {
  background-color: #fdf3f2;
  border-left: 3px solid #a94442;
  color: #8c3a38;
  font-size: 0.9em;
  margin: 8px 0 0;
  padding: 8px 12px;
}

/* --- the two readings shown under every word ----------------------------- */

.tib-reading-key {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 8px;
}

.tib-reading-key__label {
  color: #8a7a6a;
  font-size: 0.82em;
}

.tib-reading-key__item {
  align-items: center;
  color: #6b5f52;
  display: inline-flex;
  font-size: 0.82em;
  gap: 6px;
}

.tib-reading-key__item::before {
  background: #6b7f6f;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.tib-reading-key__item--zh::before {
  background: #a06f32;
}

/* --- sentences ----------------------------------------------------------- */

.tib-sentence {
  border-top: 1px solid #eee7d8;
  padding: 16px 0;
}

.tib-sentence:first-child {
  border-top: none;
}

.tib-sentence__bo {
  color: var(--read-ink, #3a352e);
  font-size: 1.45em;
  margin: 0 0 10px;
}

.tib-sentence__skt {
  color: #8a6a3a;
  font-size: 0.85em;
  margin: 0 0 10px;
}

.tib-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The card hangs off the word it explains, so the anchor is here. */
.tib-token {
  position: relative;
}

.tib-token__hit {
  background-color: #fff;
  border: 1px solid #e2ddcc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 2px;
  padding: 4px 8px;
  text-align: center;
}

.tib-token__hit:hover {
  border-color: #4a7c59;
}

.tib-token__hit[aria-expanded="true"] {
  background-color: #f0f5f1;
  border-color: #4a7c59;
}

.tib-token__bo {
  font-size: 1.25em;
}

.tib-token__read {
  color: #6b7f6f;
  font-size: 0.8em;
  line-height: 1.3;
  min-height: 1.3em;
}

.tib-token__read--zh {
  color: #9a682e;
}

.tib-sentence__source-phonetic {
  background: rgba(160, 111, 50, 0.08);
  border-left: 2px solid rgba(160, 111, 50, 0.55);
  color: #76542d;
  font-size: 0.9em;
  margin: 10px 0 0;
  padding: 6px 10px;
}

/* The book's own translation, and the switch that puts it away. On by default -
   what the book printed is part of the text - and hidden by a sibling selector
   off a real checkbox rather than by a class JavaScript toggles: the rows are
   in the HTML either way, and this way the switch still works on a page whose
   script never arrives. */
.tib-sentence__source-zh {
  color: #4a4136;
  margin: 10px 0 0;
}

.tib-translation__input:not(:checked) ~ .tib-sentences .tib-sentence__source-zh,
.tib-translation__input:not(:checked) ~ .tib-reference .tib-reference__zh {
  display: none;
}

/* Off-screen rather than `display: none`, which would take the checkbox out of
   the tab order and leave the label operable only by mouse. */
.tib-translation__input {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}

.tib-translation {
  align-items: center;
  border: 1px solid #ddd4c2;
  border-radius: 999px;
  color: #6b5f52;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.82em;
  margin: 0 0 10px;
  padding: 4px 12px 4px 40px;
  position: relative;
}

.tib-translation::before {
  background: #ddd4c2;
  border-radius: 999px;
  content: "";
  height: 12px;
  left: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.15s ease;
  width: 22px;
}

.tib-translation::after {
  background: #fffdf7;
  border-radius: 50%;
  content: "";
  height: 8px;
  left: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.15s ease;
  width: 8px;
}

.tib-translation__input:checked + .tib-translation {
  border-color: #a06f32;
  color: #76542d;
}

.tib-translation__input:checked + .tib-translation::before {
  background: #a06f32;
}

.tib-translation__input:checked + .tib-translation::after {
  left: 24px;
}

.tib-translation__input:focus-visible + .tib-translation {
  outline: 2px solid #a06f32;
  outline-offset: 2px;
}

/* The offline run said it was unsure of this split. Saying so is the point of
   having asked; a dotted rule under the word carries it without shouting. */
.tib-token--flagged .tib-token__hit {
  border-bottom-style: dashed;
  border-bottom-width: 2px;
  border-bottom-color: #b99c60;
}

.tib-token__hit.is-reciting {
  background-color: #fdf6e0;
  border-color: #b99c60;
}

/* A clause-level alignment highlights the whole clause: the timing measured was
   the line, and lighting a word inside it would claim a number nobody has. */
.tib-sentence.is-reciting {
  background-color: #fdf6e0;
}

/* Drawn by the browser, and only for a text that has a recording. Floated out
   of the clause so it never sits between the Tibetan and the readings under it,
   which is the pair a reciter's eye travels between. */
/* The controls for one line. Usually one button; several where the liturgy says
   the line more than once, and then they float together so the pass numbers
   read left to right in the order they are chanted. */
/* A stretch the recitation says several times through. Named once, at the top
   of the lines it covers, with one button per time through - a person hunting
   for the second pass of a four-line verse is hunting for a stretch of the
   recording, and pressing the second line's second button plays a quarter of
   it. The rail down the side is the extent: without it, twelve rows of numbers
   under four lines are twelve rows of numbers. */
.tib-passes {
  align-items: center;
  background: #fbf7ee;
  border: 1px solid #e2d9c4;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  padding: 4px 8px;
}

.tib-passes__name {
  color: #8a6a3a;
  font-size: 0.85em;
  font-weight: 600;
}

.tib-passes__play {
  background: #fff;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  color: #6b6355;
  cursor: pointer;
  font-size: 0.8em;
  padding: 2px 10px;
}

.tib-passes__play:hover,
.tib-passes__play[aria-pressed="true"] {
  background: #f0e6d2;
  color: #3f3a31;
}

.tib-sentence.is-repeat {
  border-left: 2px solid #e2d9c4;
  padding-left: 8px;
}

.tib-sentence.is-repeat-start {
  border-top-left-radius: 6px;
}

.tib-sentence.is-repeat-end {
  border-bottom-left-radius: 6px;
  margin-bottom: 10px;
}

/* Alternate tints for the times through, so a screen of identical numbers reads
   as passes rather than as a list. Rows only: three buttons side by side in
   three shades read as three kinds of button, when what they are is one button
   three times over - and then the one that is lit has nothing to be lit
   against. */
.tib-edit[data-pass="1"] {
  background: #f7f1e4;
}

.tib-edit[data-pass="2"] {
  background: #f1ece0;
}

/* Which time through is being recited now. The cards cannot show it - three
   passes of a line are one line on the page - so it is shown on the controls:
   the button that plays this pass, its row of numbers, and the banner button
   for the whole stretch. */
/* Drawn rather than filled. Hover already tints these, so a tint for "this is
   the pass being recited" says the same thing twice and neither reads; a dashed
   edge is a different mark altogether, and it leaves the page the colours it
   had - a liturgy is not a dashboard. The border is there either way, so
   nothing moves when it lights. */
.tib-play.is-reciting,
.tib-passes__play.is-reciting {
  border-color: #b99c60;
  border-style: dashed;
}

/* And in review, a dashed underline on the row's own label rather than a box
   around it: twelve rows of numbers with one of them boxed is the box being
   read, not the numbers. */
.tib-edit.is-reciting .tib-edit__pass {
  text-decoration: underline dashed #b99c60;
  text-underline-offset: 3px;
}

.tib-play-group {
  display: flex;
  flex-wrap: wrap;
  float: right;
  gap: 4px;
  justify-content: flex-end;
  margin: 0 0 4px 8px;
}

.tib-play {
  background: none;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  color: #8a6a3a;
  cursor: pointer;
  font-size: 0.8em;
  margin: 0;
  padding: 3px 10px;
  white-space: nowrap;
}

.tib-play:hover,
.tib-play[aria-pressed="true"] {
  background-color: #fdf6e0;
  border-color: #b99c60;
}

.tib-play__label {
  margin-left: 6px;
}

/* The recitations on offer. Drawn only where there is a choice: one recording
   needs no picker, and a row of one button reads as a setting nobody set. */
.tib-takes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

.tib-take {
  background: none;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  color: #6b6355;
  cursor: pointer;
  font-size: 0.9em;
  padding: 5px 14px;
}

.tib-take.is-on,
.tib-take:hover {
  background-color: #fdf6e0;
  border-color: #b99c60;
  color: #3a352e;
}

.tib-take__part {
  color: #8a6a3a;
  font-size: 0.85em;
  margin-left: 6px;
}

.tib-take__note {
  color: #6b6355;
  font-size: 0.85em;
  margin: -8px 0 8px;
}

.tib-take__source {
  color: #6b6355;
  font-size: 0.85em;
  margin: -8px 0 8px;
}

.tib-take__source a {
  color: #8a6a3a;
}

/* --- correcting a boundary by ear ----------------------------------------- */

/* Quiet on purpose: this sits on a page people come to recite from, and it is
   there for the handful who may move a boundary, not for the room. */
.tib-review-toggle {
  font-size: 0.85em;
  margin: -4px 0 12px;
}

.tib-review-toggle a {
  color: #8a6a3a;
  text-decoration: none;
}

.tib-review-toggle a:hover {
  text-decoration: underline;
}

.tib-edit {
  color: #6b6355;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  gap: 6px 14px;
  margin-top: 8px;
}

.tib-edit__edge {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

/* Which line this is, and which time through it where the liturgy says it more
   than once. The number is what the repeat controls are typed in, and without
   the pass two rows of identical numbers under one line would be a correction
   waiting to go to the wrong saying. */
.tib-edit__pass {
  color: #8a6a3a;
  flex-basis: 100%;
}

.tib-edit__value {
  font-variant-numeric: tabular-nums;
  min-width: 5.5em;
}

.tib-edit__nudge,
.tib-edit__here {
  background: none;
  border: 1px solid #e2d9c4;
  border-radius: 4px;
  color: #6b6355;
  cursor: pointer;
  font-size: 1em;
  padding: 1px 6px;
}

.tib-edit__nudge:hover,
.tib-edit__here:hover {
  background-color: #fdf6e0;
  border-color: #b99c60;
}

/* Follows the reader down the page: a correction is made while listening, and
   the save is wanted wherever the ear happens to be. */
.tib-review {
  align-items: center;
  background: #fffdf6;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  bottom: 16px;
  box-shadow: 0 2px 10px rgb(58 53 46 / 12%);
  display: flex;
  /* It holds more than a button now - the repeat controls ride with it - so on
     a phone it wraps rather than running off the side. */
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  left: 50%;
  max-width: calc(100vw - 24px);
  padding: 8px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 20;
}

.tib-review__save {
  background: none;
  border: 1px solid #b99c60;
  border-radius: 999px;
  color: #6b4f1d;
  cursor: pointer;
  padding: 4px 14px;
}

/* Saying a stretch again: three small numbers and a button, kept on one line
   with the save so the whole review lives in one bar. */
.tib-review__repeat {
  align-items: center;
  border-left: 1px solid #e2d9c4;
  display: flex;
  gap: 8px;
  padding-left: 10px;
}

.tib-review__field {
  align-items: center;
  color: #6b6355;
  display: inline-flex;
  font-size: 0.85em;
  gap: 4px;
}

.tib-review__field input {
  border: 1px solid #e2d9c4;
  border-radius: 6px;
  font: inherit;
  padding: 2px 4px;
  width: 3.5em;
}

.tib-review__apply {
  background: none;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  color: #8a6a3a;
  cursor: pointer;
  font-size: 0.85em;
  padding: 3px 12px;
}

.tib-review__apply:hover {
  background-color: #fdf6e0;
  border-color: #b99c60;
}

.tib-review__status {
  color: #8a6a3a;
  font-size: 0.85em;
}

/* The two switches that ride with the player: repeat, and whether the page
   follows the recitation. Drawn as small sliders rather than the browser's
   checkbox - they are settings somebody flips while listening, on a phone, with
   a thumb, and a 13px box beside a chant is a hard target and a plain one. The
   input keeps being the input: it is what a screen reader announces and what a
   keyboard tabs to. */
.tib-loop {
  align-items: center;
  color: #6b6355;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85em;
  gap: 7px;
  margin: -8px 0 16px;
  user-select: none;
}

.tib-loop input {
  appearance: none;
  background-color: #ddd5c4;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex: none;
  height: 18px;
  margin: 0;
  position: relative;
  transition: background-color 0.18s ease;
  width: 32px;
}

.tib-loop input::after {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(58 53 46 / 35%);
  content: "";
  height: 14px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.18s ease;
  width: 14px;
}

.tib-loop input:checked {
  background-color: #b99c60;
}

.tib-loop input:checked::after {
  transform: translateX(14px);
}

.tib-loop input:hover {
  background-color: #cfc5ae;
}

.tib-loop input:checked:hover {
  background-color: #a98c50;
}

.tib-loop input:focus-visible {
  outline: 2px solid #b99c60;
  outline-offset: 2px;
}

.tib-loop:has(input:checked) {
  color: #6b4f1d;
}

@media (prefers-reduced-motion: reduce) {
  .tib-loop input,
  .tib-loop input::after {
    transition: none;
  }
}

/* --- what the offline run wrote ------------------------------------------ */

.tib-gloss {
  margin: 8px 0 0;
}

.tib-gloss--natural {
  font-weight: bold;
}

.tib-gloss--note {
  color: #6b5f52;
  font-size: 0.9em;
}

.tib-label {
  background-color: #f0ede3;
  border-radius: 3px;
  color: #8a7a6a;
  font-size: 0.75em;
  margin-right: 8px;
  padding: 1px 6px;
  white-space: nowrap;
}

.tib-src {
  font-size: 0.8em;
  margin-left: 6px;
  opacity: 0.7;
}

/* --- word card ----------------------------------------------------------- */

.tib-card {
  background-color: #fff;
  border: 1px solid #4a7c59;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  left: 0;
  min-width: 240px;
  max-width: min(360px, 80vw);
  padding: 12px 14px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 20;
}

.tib-card__close {
  background: none;
  border: none;
  color: #8a7a6a;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 6px;
}

.tib-card__bo {
  font-size: 1.4em;
  margin: 0 0 8px;
}

.tib-card__rows {
  margin: 0;
}

.tib-card__row {
  display: flex;
  gap: 10px;
  margin: 0 0 4px;
}

.tib-card__row dt {
  color: #8a7a6a;
  flex: 0 0 5.5em;
  font-size: 0.8em;
  padding-top: 2px;
}

.tib-card__row dd {
  flex: 1;
  margin: 0;
  word-break: break-word;
}

.tib-card__flags {
  color: #8a6a3a;
  font-size: 0.8em;
  margin: 8px 0 0;
}

.tib-card__flags:empty {
  display: none;
}

/* --- library ------------------------------------------------------------- */

.tib-library__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}

.tib-library__title {
  font-size: 1.2em;
  margin: 0 0 12px;
}

.tib-library__find {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.tib-library__find-box {
  border: 1px solid #d8d2c0;
  border-radius: 4px;
  font: inherit;
  max-width: 100%;
  padding: 5px 9px;
  width: 15em;
}

.tib-library__clear {
  color: #8a7a6a;
  font-size: 0.85em;
}

.tib-library__count {
  color: #8a7a6a;
  font-size: 0.85em;
  margin: 0 0 8px;
}

.tib-library__source::before {
  content: "·";
  margin: 0 5px;
}

/* The book links out to the printing it was copied from. Green as everywhere
   else on the site, on a line that is otherwise deliberately quiet. */
.tib-library__source a {
  color: #4a7c59;
}

/* The shelf labels. A row of chips that scrolls sideways rather than wrapping
   into three lines on a phone, where the list underneath is what matters. */
.tib-shelfnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.tib-shelfnav__chip {
  text-decoration: none;
}

.tib-shelfnav__chip:hover {
  text-decoration: underline;
}

.tib-shelfnav__n {
  color: #8a7a6a;
  font-size: 0.85em;
  margin-left: 5px;
}

.tib-shelf {
  margin: 0 0 22px;
  /* So a jump from the shelf nav does not put the heading against the very top
     edge of the window. */
  scroll-margin-top: 12px;
}

.tib-shelf__title {
  border-bottom: 1px solid #e2ddcc;
  font-size: 1em;
  margin: 0 0 10px;
  padding-bottom: 4px;
}

.tib-library__list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.tib-text-card {
  background-color: var(--read-paper, #fbf8f1);
  border: 1px solid #e2ddcc;
  border-radius: 6px;
  padding: 12px 14px;
  position: relative;
}

/* Out of the flow on purpose: the recitation mark costs a card no height, and
   the title is kept clear of it rather than run underneath. */
.tib-text-card__audio {
  color: #8a6a3a;
  font-size: 0.9em;
  position: absolute;
  right: 12px;
  top: 12px;
}

.tib-text-card__link {
  color: inherit;
  display: block;
  padding-right: 22px;
  text-decoration: none;
}

.tib-text-card__link:hover .tib-text-card__zh {
  text-decoration: underline;
}

.tib-text-card__zh {
  display: block;
  font-size: 1.05em;
  font-weight: bold;
}

.tib-text-card__bo {
  color: #6b5f52;
  display: block;
  font-size: 1.1em;
}

.tib-text-card__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.tib-text-card__edition {
  color: #8a7a6a;
  font-size: 0.8em;
}

/* --- the text before its offline pass ------------------------------------ */

.tib-audio-dock {
  margin: 10px 0;
}

/* Player and its switches on one line, docked or not: they are one control
   surface, and the switches under the player read as stray checkboxes belonging
   to whatever came next. On a phone the switches wrap under the player rather
   than squeezing it below the width its controls need. */
.tib-audio-dock__bar {
  align-items: center;
  column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
}

.tib-audio-dock__bar .tib-audio {
  /* Wide enough for Chrome to keep the seek bar: squeezed below about 260px it
     drops the timeline, and a recitation with no seek bar cannot be replayed
     from the line somebody wants. Narrower than that the switches wrap under
     the player instead. */
  flex: 1 1 260px;
  min-width: 0;
}

.tib-audio-dock__switches {
  display: flex;
  flex: none;
  gap: 12px;
}

.tib-audio-dock__bar .tib-loop {
  margin: 0;
  white-space: nowrap;
}

/* Shorter than the browser draws it. The default panel is around 54px of
   mostly padding, and this bar sits over the text it is being read against, so
   every pixel it does not take is a line of the liturgy still visible. 40px is
   the floor - below that Chrome starts dropping controls out of the panel. */
.tib-audio {
  display: block;
  height: 40px;
  width: 100%;
}

/* Docked: the bar leaves the flow, so the space it held is held for it -
   without that the page jumps by the height of the controls the moment it
   floats. */
.tib-audio-dock.is-floating {
  height: var(--tib-audio-height, 52px);
}

.tib-audio-dock.is-floating .tib-audio-dock__bar {
  background-color: #fffdf6;
  border: 1px solid #e2d9c4;
  border-radius: 999px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 2px 14px rgb(58 53 46 / 18%);
  left: 50%;
  max-width: 720px;
  padding: 4px 14px;
  position: fixed;
  transform: translateX(-50%);
  width: calc(100vw - 24px);
  z-index: 30;
}

/* Two things already own the bottom of the window: the save bar, and the
   site-wide back-to-top disc, which carries the scroll ring and paints above
   everything at z-index 1000. Both step up over the docked player rather than
   share the line with it - the disc would otherwise sit on the player's own
   volume control. */
body.tib-has-floating-audio .tib-review,
body.tib-has-floating-audio .js-cd-top {
  bottom: calc(var(--tib-audio-height, 52px) + 22px + env(safe-area-inset-bottom, 0px));
}

/* Room under the last line for the player that is now over it. A liturgy ends
   with its dedication, which is exactly the part somebody scrolls to the bottom
   to read. */
body.tib-has-floating-audio .tib-page--reader {
  padding-bottom: calc(var(--tib-audio-height, 52px) + 22px);
}

/* The book's own three registers, for a text with no per-word analysis. Set as
   a stack rather than columns: a reciter reads down one line at a time, and
   columns break on a phone, which is where this is read. */
.tib-reference {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tib-reference__line {
  border-top: 1px solid rgba(120, 100, 70, 0.14);
  padding: 12px 0;
}

.tib-reference__line:first-child {
  border-top: none;
}

.tib-reference__cue + .tib-reference__line {
  border-top: none;
}

.tib-reference__cue {
  list-style: none;
}

.tib-reference__cue p {
  margin: 0;
}

.tib-reference__cue--heading {
  background: rgba(151, 112, 57, 0.08);
  border-left: 3px solid rgba(151, 112, 57, 0.7);
  margin: 18px 0 4px;
  padding: 8px 12px;
}

.tib-reference__cue--heading .tib-reference__cue-bo,
.tib-reference__cue--heading .tib-reference__cue-zh {
  color: var(--read-ink, #3a352e);
  font-weight: 600;
}

.tib-reference__cue--rubric {
  color: #786b5d;
  font-size: 0.9em;
  margin: 10px 0 2px;
  padding: 4px 10px;
}

.tib-reference__cue-bo {
  font-size: 1.12em;
}

.tib-reference__cue-phonetic,
.tib-reference__cue-zh,
.tib-reference__cue-other {
  margin-top: 3px !important;
}

.tib-reference__bo {
  color: var(--read-ink, #3a352e);
  font-size: 1.45em;
  margin: 0;
}

/* What the reciter's eye is actually on while chanting, so it sits directly
   under the Tibetan and at reading size - the translation is the gloss here,
   not this. */
.tib-reference__phonetic {
  color: #6a5a45;
  margin: 6px 0 0;
}

.tib-reference__zh {
  color: #8a7a6a;
  font-size: 0.92em;
  margin: 4px 0 0;
}

.tib-body {
  color: var(--read-ink, #3a352e);
  font-size: 1.35em;
}

.tib-body__line {
  margin: 0 0 6px;
}