/* 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__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;
  font-size: 0.78em;
  margin: 4px 0 0;
  text-align: right;
}

@media (hover: none) {
  .tib-paste__tip {
    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;
}

/* --- 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 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;
}

.tib-text-card__link {
  color: inherit;
  display: block;
  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 {
  margin: 16px 0;
  width: 100%;
}

/* 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;
}