/* Reading one 法本.

   The page used to be a centred line of ">>"-separated titles, a grey band
   carrying A-/A/A+, and 上一课/下一课 pushed to the two edges of the window, with
   the text itself running the full width of the screen on the same grey ground
   as the page. This is the reader frame the 大藏经 page uses - a measured column
   of paper, the controls in one bar, neighbours that name where they go -
   plus the piece a course of 201 lessons needs: the course list in a drawer that
   costs the reading column nothing until it is opened. */
.fb-read {
  margin: 0 auto;
  /* Never wider than the bar over it, never wider than a page of text should be,
     and free to shrink with the window below that. The measure was a flat 860,
     which on a wide window left the text a ribbon under a bar half again its
     width; the floor is well under any phone, so it never forces the page to
     scroll sideways - a narrow window simply gets the column it has room for. */
  max-width: clamp(320px, var(--bar-width, 100%), 1280px);
  /* The foot clears the drawer handle, which sits at the bottom-left of every
     page with a drawer and no longer comes and goes with the scroll. */
  padding: 0 14px 46px;
  text-align: left;
}

/* Wider than the column it sits over: the bar carries the same controls the
   player pages carry, and it is the same width there, so crossing between a
   lesson's video and its text no longer moves the done control a hand's width
   across the screen. The reading measure below it stays what it was.

   Centred out of its own container rather than moved out of it: the bar belongs
   to the reader, and the width comes from the page. Never wider than the window
   - --bar-width is worked out from the window's height, which on a short wide
   one comes to more than its width. */
.fb-read__bar {
  align-items: center;
  border-bottom: 1px solid #ddddc8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-left: 50%;
  max-width: 92vw;
  padding-bottom: 8px;
  transform: translateX(-50%);
  width: var(--bar-width, 100%);
}

.fb-read__crumbs {
  align-items: center;
  color: #8a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85em;
  gap: 4px;
  /* The height the player page's title gives its own bar, so the controls the
     two share are centred on the same line. */
  min-height: var(--bar-row);
}

.fb-read__crumbs a {
  color: #4a7c59;
  text-decoration: none;
}

.fb-read__crumbs a:hover {
  text-decoration: underline;
}

.fb-read__crumb-sep {
  opacity: 0.5;
  padding: 0 2px;
}

/* The drawer handle sits at the head of the trail, where a reader looking for
   "where am I, what else is here" is already looking. */
.fb-read__menu {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #1a5276;
  cursor: pointer;
  font-size: 1em;
  line-height: 1.6;
  margin-right: 6px;
  padding: 1px 9px;
}

.fb-read__menu:hover {
  border-color: #8a8a72;
}

.fb-read__tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.fb-read__step,
.fb-read__link {
  color: #4a7c59;
  font-size: 0.85em;
  text-decoration: none;
  white-space: nowrap;
}

.fb-read__step:hover,
.fb-read__link:hover {
  text-decoration: underline;
}

.fb-read__step--off {
  color: #bdbdac;
  cursor: default;
}

.fb-read__link--button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

/* Three steps, not a slider: the body scales in 0.2em steps, and a reader who
   wants larger text wants it in one click. */
.fb-textsize {
  display: inline-flex;
  gap: 4px;
}

.fb-textsize__btn {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #1a5276;
  font-size: 0.82em;
  line-height: 1.6;
  min-width: 2.2em;
  padding: 1px 7px;
  text-align: center;
  text-decoration: none;
}

.fb-textsize__btn:hover {
  border-color: #8a8a72;
  text-decoration: none;
}

.fb-read__head {
  padding: 16px 0 4px;
  text-align: center;
}

.fb-read__title {
  color: #4e0d0d;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.5em;
  line-height: 1.4;
  margin: 0;
}

.fb-read__meta {
  color: #8a7a6a;
  font-size: 0.85em;
  margin: 6px 0 0;
}

.fb-read__sep {
  opacity: 0.5;
  padding: 0 6px;
}

/* The player pages' admin row, at their size and in their place - but with no
   height of its own. The title under the bar is centred, so the row has the left
   gutter to itself, and an assistant's page starts where a reader's does rather
   than one line further down. */
.fb-read__admin {
  font-size: 0.85em;
  height: 0;
  overflow: visible;
  text-align: left;
}

.fb-read__admin > a {
  position: relative;
  top: 4px;
}

/* No gutter to borrow once the title fills the width: the row goes back into the
   flow rather than landing on top of it. */
@media screen and (max-width: 700px) {
  .fb-read__admin {
    height: auto;
    padding-bottom: 5px;
  }

  .fb-read__admin > a {
    top: 0;
  }
}

/* The reading surface and its notebook share a workspace. Closed, the paper
   keeps the full measure it had before. Open on a wide screen, the note takes a
   calm right-hand column and stays with the passage while the page moves. */
.fb-read__workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
}

/* The text. Paper at a fixed measure and the line height a long read wants, in
   place of 1.3em on the page's own grey ground at full window width. */
.fb-read__body {
  background-color: var(--read-paper);
  border: 1px solid #d9d9c6;
  border-radius: 12px;
  color: var(--read-ink);
  counter-reset: fb-note;
  /* The size lives inline on the element, where text-utils.js reads and rewrites
     it: with it only in a stylesheet the first press of A- jumps to the script's
     own default before stepping down. */
  line-height: 1.95;
  margin-top: 0;
  min-width: 0;
  padding: 26px 30px;
}

@media screen and (min-width: 1280px) {
  /* Spend unused viewport space on the notebook instead of taking its whole
     width out of the paper. The extra 418px is a 400px note plus the existing
     18px gap. If the window cannot supply it, only then may the paper shrink. */
  .fb-read.is-note-open {
    max-width: min(calc(100vw - 16px), calc(clamp(320px, var(--bar-width, 100%), 1280px) + 418px));
  }

  .fb-read__workspace.is-note-open {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 400px);
  }

  .fb-read__workspace .note-panel--read[data-note-docked="1"] {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Only the vertical margins: the lesson markup centres a figure by putting it in
   a `p.center`, which is a 75%-wide box held in the middle by `margin: auto`, and
   a shorthand `margin` here would reset that box hard against the left edge. */
.fb-read__body p {
  margin-bottom: 1em;
  margin-top: 0;
}

/* A 笔录's quotation is 【 on one line and 】 on that line or a later one, so the
   rule has to be drawn down a run of paragraphs rather than around a block that
   does not exist in the markup. The 上师课堂 documents mark a quotation on the
   paragraph too - `p.yuanwen`, in 18 of them, 77 times two of them running - and
   a run of those is the same run. The lines close up so the tint runs unbroken,
   and the run as a whole is what stands off the prose around it. */
.fb-read__body :is(p:has(> .fb-quote), p.yuanwen) {
  background-color: var(--read-quote-paper);
  color: var(--read-verse-ink);
  margin-bottom: 0;
  padding: 0.12em 0.9em;
}

/* The run's ends: where the tint starts and stops it is a block with corners,
   and in between the paragraphs sit flush so one quotation reads as one. */
.fb-read__body p:not(:has(> .fb-quote), .yuanwen) + :is(p:has(> .fb-quote), p.yuanwen),
.fb-read__body :is(p:has(> .fb-quote), p.yuanwen):first-child {
  border-radius: 6px 6px 0 0;
  margin-top: 0.9em;
  padding-top: 0.55em;
}

.fb-read__body
  :is(p:has(> .fb-quote), p.yuanwen):not(:has(+ p > .fb-quote)):not(:has(+ p.yuanwen)) {
  border-radius: 0 0 6px 6px;
  margin-bottom: 1.1em;
  padding-bottom: 0.55em;
}

/* A quotation of one line is both ends of its own run. */
.fb-read__body
  p:not(:has(> .fb-quote), .yuanwen)
  + :is(p:has(> .fb-quote), p.yuanwen):not(:has(+ p > .fb-quote)):not(:has(+ p.yuanwen)) {
  border-radius: 6px;
}

/* The same quotation written as a block instead: a div around the paragraphs of
   it, which is how 5,279 of the 上师课堂 ones come. The tint and the corners are
   the div's - see `.yuanwen` in lamatxt.css - so what is left here is the air
   around it and the last line's own margin, which would otherwise open a gap
   inside the tint. */
.fb-read__body div.yuanwen {
  margin: 0.9em 0 1.1em;
}

.fb-read__body div.yuanwen > p:last-child {
  margin-bottom: 0;
}

/* Whoever typed a 笔录 up put the 顶礼 and the 发心句 in bold, the way a class
   handout does. On the page they are a 颂词 like any other, and a 颂词 is not
   set in bold here - see lamatxt.css. */
.fb-read__body .fb-verse b,
.fb-read__body .fb-verse strong,
.fb-read__body :is(.jisong, .songci, .颂词) :is(b, strong) {
  font-weight: normal;
}

/* 偈颂 arrives one line to a paragraph, and every paragraph here stands 1em off
   the next: a four-line verse read as four separate sayings rather than as one.
   The lines close up into a block, and the space a paragraph is owed goes around
   the block instead of through it. */
.fb-read__body p:has(> .fb-verse),
.fb-read__body p.jisong,
.fb-read__body p.songci,
.fb-read__body p.颂词,
.fb-read__body .jisong p,
.fb-read__body .songci p,
.fb-read__body .颂词 p {
  margin-bottom: 0.2em;
}

/* Most 上师课堂 documents put the class on a div around the lines rather than on
   each line, so the block is what carries the air the lines gave up. */
.fb-read__body div.jisong,
.fb-read__body div.songci,
.fb-read__body div.颂词 {
  margin: 1em 0;
}

.fb-read__body .jisong p:last-child,
.fb-read__body .songci p:last-child,
.fb-read__body .颂词 p:last-child {
  margin-bottom: 0;
}

.fb-read__body p:has(> .fb-verse) + p:not(:has(> .fb-verse)),
.fb-read__body p.jisong + p:not(.jisong),
.fb-read__body p.songci + p:not(.songci),
.fb-read__body p.颂词 + p:not(.颂词) {
  margin-top: 0.9em;
}

/* An image the crawl left without a class of its own - and never anything
   inline, which is a mark inside a sentence. */
.fb-read__body img:not([class]) {
  border-radius: 6px;
  display: block;
  height: auto;
  margin: 18px auto;
  max-width: min(620px, 100%);
}

.fb-read__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.fb-read__nav {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding-top: 14px;
}

.fb-nav-card {
  background-color: var(--read-paper);
  border: 1px solid #d9d9c6;
  border-radius: 10px;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
}

a.fb-nav-card:hover {
  border-color: #b9b9a0;
}

.fb-nav-card--next {
  text-align: right;
}

.fb-nav-card--empty {
  color: #a5a593;
  font-size: 0.85em;
}

.fb-nav-card__label {
  color: #8a8a78;
  display: block;
  font-size: 0.78em;
}

.fb-nav-card__title {
  color: #1a5276;
  display: block;
  line-height: 1.5;
  padding-top: 2px;
}

a.fb-nav-card:hover .fb-nav-card__title {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   The drawer. Fixed and translated off the left edge, so it is out of the flow
   entirely - the reading column is the same width whether or not it exists - and
   `visibility: hidden` keeps it off the tab order until it is opened. */
.fb-drawer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 60;
}

.fb-drawer.is-drawer-open {
  visibility: visible;
}

.fb-drawer__scrim {
  background-color: rgba(40, 38, 30, 0.35);
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 100%;
}

.fb-drawer.is-drawer-open .fb-drawer__scrim {
  opacity: 1;
}

.fb-drawer__panel {
  background-color: #f6f5ea;
  border-right: 1px solid #d9d9c6;
  box-shadow: 2px 0 14px rgba(78, 13, 13, 0.12);
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  max-width: 86vw;
  overflow-y: auto;
  /* 76px at the foot leaves the floating handle its corner: it sits over this
     panel, and 全部文字资源目录 was landing underneath it. */
  padding: 14px 16px 76px;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  width: 320px;
}

.fb-drawer.is-drawer-open .fb-drawer__panel {
  transform: translateX(0);
}

.fb-drawer__head {
  align-items: flex-start;
  border-bottom: 1px solid #e2e0cd;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 8px;
}

.fb-drawer__course {
  color: #4e0d0d;
  display: block;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.05em;
  line-height: 1.4;
}

.fb-drawer__count {
  color: #a5a593;
  font-size: 0.78em;
  padding-left: 6px;
}

.fb-drawer__close {
  background: none;
  border: 0;
  color: #8a8a78;
  cursor: pointer;
  font-size: 1.4em;
  line-height: 1;
  padding: 0 2px;
}

.fb-drawer__close:hover {
  color: #4e0d0d;
}

/* Lessons wrap rather than stack: with the course name stripped off the front
   most labels are two or three characters, and 201 of them stacked would be a
   drawer nobody scrolls to the end of. */
.fb-drawer__lessons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.fb-drawer__lessons li {
  max-width: 100%;
}

.fb-drawer__lesson {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #e2e0cd;
  border-radius: 10px;
  color: #4a7c59;
  display: inline-block;
  font-size: 0.85em;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 9px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-drawer__lesson:hover {
  background-color: #fff;
  border-color: #4a7c59;
  text-decoration: none;
}

.fb-drawer__lesson--on {
  background-color: #4a7c59;
  border-color: #4a7c59;
  color: #fff;
}

.fb-drawer__more {
  border-top: 1px solid #e2e0cd;
  padding-top: 8px;
}

.fb-drawer__more summary {
  color: #6f6f5e;
  cursor: pointer;
  font-size: 0.9em;
  padding: 2px 0;
}

.fb-drawer__courses {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}

.fb-drawer__course-link {
  color: #1a5276;
  display: block;
  font-size: 0.88em;
  line-height: 1.5;
  padding: 3px 0;
  text-decoration: none;
}

.fb-drawer__course-link:hover {
  text-decoration: underline;
}

.fb-drawer__course-link--on {
  color: #4e0d0d;
}

.fb-drawer__all {
  border-top: 1px solid #e2e0cd;
  color: #4a7c59;
  font-size: 0.85em;
  margin-top: auto;
  padding-top: 10px;
  text-decoration: none;
}

.fb-drawer__all:hover {
  text-decoration: underline;
}

/* The same handle again, pinned to the edge of the screen: the bar scrolls away
   after the first screen of a lesson that can run tens of thousands of
   characters. */
.fb-drawer__fab {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #d9d9c6;
  border-radius: 50%;
  bottom: 26px;
  box-shadow: 0 2px 10px rgba(78, 13, 13, 0.14);
  color: #4a7c59;
  cursor: pointer;
  height: 42px;
  left: 18px;
  position: fixed;
  width: 42px;
  /* Above the scrim: the handle is the way out as well as the way in. */
  z-index: 70;
}

.fb-drawer__fab:hover {
  border-color: #4a7c59;
}

/* Back inside its own column on a phone, where the bar is the width of the page
   anyway and the offset would only push it off-centre. */
@media screen and (max-width: 700px) {
  .fb-read__bar {
    margin-left: 0;
    transform: none;
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .fb-read__body {
    padding: 16px 14px;
  }

  .fb-read__nav {
    grid-template-columns: 1fr;
  }

  .fb-nav-card--next {
    text-align: left;
  }

  .fb-drawer__fab {
    bottom: 18px;
    left: 12px;
  }
}

/* The docked notebook fills the right column down to the bottom of the window,
   which is the corner the site's 返回顶部 disc sits in at z-index 1000. It went
   over the panel's own controls; nothing on a 法本 needs returning to the top of
   while the reader is writing. */
@media screen and (min-width: 1280px) {
  html.note-is-open .js-cd-top {
    display: none;
  }
}

/* The colophon under a text someone else typeset. Quiet - it is a credit, not a
   heading - and inside the paper column rather than on the page's grey ground,
   so it reads as the end of the text it belongs to. */
.fb-read__credit {
  margin: 0 auto;
  max-width: 46em;
  padding: 14px 4px 0;
  color: #6b6257;
  font-size: 0.85em;
  text-align: right;
}

.fb-read__credit a {
  color: #6b6257;
  text-decoration: underline;
}

/* Embedded source paragraphs can wrap over several lines; align them with
   the body, while retaining right alignment for standalone colophons. */
.fb-read__body .fb-read__credit {
  max-width: none;
  padding-inline: 0;
  text-align: left;
  text-indent: 0;
}

/* Every paragraph of a 法本 is one of these. Nothing is drawn on it - the reader
   must see the text, not the numbering - until a citation names it, and then it
   is lit long enough to be found and left alone again. `scroll-margin-top`
   clears the site's fixed masthead, which would otherwise sit on the very line
   the anchor scrolled to. */
.fb-u {
  scroll-margin-top: 90px;
}

/* 智悲海's footnotes. The anchor they hang on is empty - the site draws the
   number with a script of its own - so the number is drawn here instead of
   written into the paragraph: generated content is not part of the text, and a
   citation's offsets are counted in the text. See chuancheng.faben_text. */
.fb-read__body a.fb-note {
  counter-increment: fb-note;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.fb-read__body a.fb-note::after {
  color: #8a6d3b;
  content: "[" counter(fb-note) "]";
  font-size: 0.72em;
  padding: 0 0.1em;
  vertical-align: super;
}

.fb-read__body a.fb-note:hover::after,
.fb-read__body a.fb-note:focus-visible::after {
  text-decoration: underline;
}

/* The note where the reader is, so a line of commentary does not cost a trip to
   the foot of the text and back. Drawn from the attribute for the same reason
   the number is - see chuancheng.faben_text - and the list under the text stays
   for reading straight through, and for a reader with no pointer to hover. */
.fb-read__body a.fb-note::before {
  display: none; /* Hidden tooltips must not expand the document's scroll area. */
  background-color: #2f2a22;
  border-radius: 8px;
  bottom: calc(100% + 6px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
  color: #f4efe3;
  content: attr(data-note);
  font-size: 0.82em;
  left: 50%;
  line-height: 1.7;
  max-height: 16em;
  max-width: min(380px, 72vw);
  opacity: 0;
  overflow-y: auto;
  padding: 0.7em 0.9em;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translateX(-50%);
  transition: opacity 0.12s ease-out;
  vertical-align: baseline;
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 5;
}

.fb-read__body a.fb-note:hover::before,
.fb-read__body a.fb-note:focus-visible::before {
  display: block;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .fb-read__body a.fb-note::before {
    transition: none;
  }
}

/* The notes themselves, under the text and belonging to none of its lines. */
.fb-read__body .fb-notes {
  border-top: 1px solid #ddd6c4;
  color: #6b6355;
  font-size: 0.86em;
  line-height: 1.7;
  margin-top: 2.2em;
  padding-top: 0.6em;
}

.fb-read__body .fb-notes__title {
  color: #6b6355;
  font-family: var(--font-hei);
  font-size: 1em;
  margin: 0 0 0.4em;
}

/* The site's own reset takes the numbers off every list, and here the number is
   what pairs a note with the [1] it hangs off. */
.fb-read__body .fb-notes ol {
  list-style: decimal outside;
  margin: 0;
  padding-left: 2.2em;
}

.fb-read__body .fb-notes li {
  margin-bottom: 0.5em;
  scroll-margin-top: 90px;
}

.fb-read__body .fb-notes li:target {
  animation: fb-flash 2.4s ease-out;
  border-radius: 4px;
}

.fb-read__body .fb-notes__back {
  margin-left: 0.4em;
  text-decoration: none;
}

.fb-u:target {
  animation: fb-flash 2.4s ease-out;
  border-radius: 4px;
}

@keyframes fb-flash {
  0%,
  45% {
    background-color: #fdf1c4;
  }

  100% {
    background-color: transparent;
  }
}