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

  /* The desk stands beside the text, and the text begins at the top of its own
     column. Pinned to row 1 alone, the panel made row 1 as tall as itself - so
     anything above the text in that column (the 阅读进度 / 高亮🖍 strip) pushed
     the 法本 down by the height of a notebook. Two rows is enough for the strip
     and the text; the rows below it - 已完成学习, the credit - are the text
     column's own, and a panel taller than its two rows simply overhangs them,
     which is what a sticky desk does anyway. */
  .fb-read__workspace .note-panel--read[data-note-docked="1"] {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* 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,
.fb-read__body .fb-verse :is(i, em) {
  font-style: normal;
}

.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;
}

/* Where a link from 我的法本书签 or a 笔记 landed. Only when nothing better is
   going to happen: on a page carrying 书签 the script tints from the sentence the
   mark was on, and this rule would wash the whole paragraph over the top of it
   before the script had run at all. `fb-js` is set inline, above the text. */
html:not(.fb-js) .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;
  }
}

/* ------------------------------------------------- 阅读高亮🖍 与 阅读进度

   Two different things. A 🖍 is painted over the words the reader picked out and
   stays until they take it off; 阅读进度 is a place, and keeps the margin - a
   second colour over the text would read as another highlight. */

/* The four. Light enough that 宋体 on top of them is still black ink on paper.
   The 千江月 reader paints its own copy of these in its own tokens. */
.fb-hl {
  border-radius: 2px;
  cursor: pointer;
  padding: 1px 0;
}

.fb-hl--c0 {
  background-color: #fdeeb4;
}

.fb-hl--c1 {
  background-color: #cfead0;
}

.fb-hl--c2 {
  background-color: #cfe2f3;
}

.fb-hl--c3 {
  background-color: #f7d6e4;
}

.fb-hl:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 1px;
}

/* One 🖍, clicked: four colours and 移除. Fixed, like the selection bar, and put
   beside the mark by the script. */
.fb-panel {
  align-items: center;
  background-color: #2f2a20;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 15, 10, 0.35);
  display: flex;
  gap: 8px;
  left: 0;
  padding: 6px 9px;
  position: fixed;
  top: 0;
  z-index: 41;
}

.fb-panel[hidden] {
  display: none;
}

.fb-panel__colors {
  display: flex;
  gap: 5px;
}

.fb-panel__color {
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  height: 18px;
  padding: 0;
  width: 18px;
}

.fb-panel__color[aria-pressed="true"] {
  border-color: #fff;
}

.fb-panel__color--c0 {
  background-color: #fdeeb4;
}

.fb-panel__color--c1 {
  background-color: #cfead0;
}

.fb-panel__color--c2 {
  background-color: #cfe2f3;
}

.fb-panel__color--c3 {
  background-color: #f7d6e4;
}

.fb-panel__drop {
  background-color: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: #f5efe2;
  cursor: pointer;
  font-size: 0.82em;
  padding: 2px 4px 2px 10px;
}

/* 🖍 5, floating at the right edge once the strip at the head has scrolled away
   - the same circle 学习笔记's handle uses (notes.css .note-fab), so the two read
   as one pair of handles rather than as two inventions. Below the notebook's
   when the page carries one; in its place when it does not. */
.fb-marks-fab {
  align-items: center;
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(78, 13, 13, 0.16);
  color: #6f3717;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.82em;
  gap: 1px;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: fixed;
  /* Beside 学习笔记's handle, not under it: one 44px circle and the 10px between
     them, when the page carries one. `--fab-edge` is where the pair's right edge
     is; the shift is what this one steps in by. */
  --fab-edge: 18px;
  right: calc(var(--fab-edge) + var(--fab-shift, 0px));
  top: 68px;
  width: 44px;
  z-index: 80;
}

body:has(.note-fab) .fb-marks-fab {
  --fab-shift: 54px;
}

.fb-marks-fab[hidden] {
  display: none;
}

.fb-marks-fab:hover {
  border-color: #be7123;
}

.fb-marks-fab:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 2px;
}

.fb-marks-fab__pen {
  font-size: 1.15em;
  line-height: 1;
}

.fb-marks-fab__n {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media screen and (min-width: 1280px) {
  /* The reading column is centred, so both handles follow its right edge - the
     same sum notes.css does for .note-fab. */
  .fb-marks-fab {
    --fab-edge: calc(
      max(8px, calc((100vw - clamp(320px, var(--bar-width, 100%), 1280px) - 418px) / 2)) + 22px
    );
  }

  /* Beside the notebook's handle means level with it: the docked panel drops
     that one 5px to come to rest in its close control's circle (notes.css), and
     a pair that is 5px out of true reads as a mistake. */
  body:has(.note-panel--read[data-note-docked="1"]) .fb-marks-fab {
    top: calc(70px + 1px + 12px - 2px - 8px);
  }
}

/* 这一篇的高亮, in a drawer. 窍诀宝藏论释 is 2,621 paragraphs in one page, and
   scrolling it for the green one is not a way to find anything.

   Named apart from `.fb-drawer` above, which is this page's 课程目录 drawer: one
   class for two drawers on the same page left this one under that one's
   `visibility: hidden`, so it opened and stayed invisible. */
.fb-marks-drawer {
  background-color: #fdfaf2;
  border-left: 1px solid #e6dcc0;
  border-top: 1px solid #e6dcc0;
  border-top-left-radius: 10px;
  bottom: 0;
  box-shadow: -8px 0 24px rgba(40, 30, 15, 0.12);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  position: fixed;
  right: 0;
  /* Under the navbar, not over it. Full height, the ✕ at the head of the drawer
     came to rest a few pixels from 注销 in the bar behind it, and the press that
     closed the list left the pointer over the way out of the site. 4rem is the
     cushion the page already keeps for the sticky bar - see base_generic.html's
     scroll-padding-top. */
  top: 4rem;
  width: 360px;
  /* Over the two floating handles at the right edge - 学习笔记's and this
     drawer's own - which are fixed at z-index 80 and were sitting on top of the
     list they open. */
  z-index: 90;
}

.fb-marks-drawer[hidden] {
  display: none;
}

/* And the notebook's handle goes while the drawer is open: covered by the panel
   it would be a circle half under an edge, and it is a door to somewhere else
   anyway. */
body:has(.fb-marks-drawer:not([hidden])) .note-fab {
  display: none;
}

/* The other way round: 学习笔记 open is a reader writing, and a handle over the
   page they are writing about is in the way. */
body:has(#notebook:not([hidden])) .fb-marks-fab {
  display: none;
}

.fb-marks-drawer__head {
  align-items: center;
  border-bottom: 1px solid #ece3cd;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.fb-marks-drawer__title {
  color: #4a4436;
  font-size: 0.95em;
}

.fb-marks-drawer__close {
  background-color: transparent;
  border: 0;
  color: #8a7f68;
  cursor: pointer;
  font-size: 1em;
  padding: 2px 6px;
}

.fb-drawer__list {
  flex: 1;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 8px 10px 20px;
}

.fb-drawer__row {
  align-items: flex-start;
  border-bottom: 1px solid #f0e9d8;
  display: flex;
  gap: 6px;
  padding: 6px 0;
}

.fb-drawer__go {
  background-color: transparent;
  border: 0;
  border-left: 4px solid transparent;
  color: #4a4436;
  cursor: pointer;
  flex: 1;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 0.9em;
  line-height: 1.6;
  padding: 2px 0 2px 8px;
  text-align: left;
}

.fb-drawer__go--c0 {
  border-left-color: #f0d97a;
}

.fb-drawer__go--c1 {
  border-left-color: #9ccb9e;
}

.fb-drawer__go--c2 {
  border-left-color: #9cc2e0;
}

.fb-drawer__go--c3 {
  border-left-color: #e7a8c4;
}

.fb-drawer__drop {
  background-color: transparent;
  border: 0;
  color: #a99e85;
  cursor: pointer;
  font-size: 0.85em;
  padding: 2px 4px;
}

.fb-drawer__drop:hover {
  color: #a0522d;
}

.fb-drawer__empty {
  color: #8a7f68;
  font-size: 0.85em;
  padding: 12px 4px;
}

/* Where the reader stopped, in the margin. A mark that shifted the text sideways
   every time the page settled would be worse than no mark at all. */
.fb-u--bookmark {
  position: relative;
}

.fb-u--bookmark::before {
  content: "🔖";
  font-size: 0.8em;
  left: -1.5em;
  line-height: 1;
  position: absolute;
  top: 0.35em;
}

/* Where the reader is being put back. It holds, then fades: a tint that is gone
   before the smooth scroll has settled is a tint nobody saw. The keyframes are
   the ones above, shared with :target. */
.fb-u--flash {
  animation: fb-flash 4s ease-out;
  border-radius: 4px;
}

/* The same tint over part of a paragraph. A 法本 paragraph runs to several
   hundred characters, so a jump into one lights from the passage it names rather
   than washing the whole block. */
.fb-flash {
  animation: fb-flash 4s ease-out;
  border-radius: 3px;
}

/* 阅读进度. Stays for as long as the progress does - it used to hide itself on
   the first scroll, and the reader who scrolled once never saw it again. */
.fb-resume {
  align-items: baseline;
  background-color: #fbf6e8;
  border: 1px solid #e6dcc0;
  border-left: 3px solid #be7123;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
  padding: 8px 14px;
}

.fb-resume[hidden] {
  display: none;
}

/* 阅读进度's own half of the strip. `display: contents` so the label, the quote,
   继续阅读 and 移除 stay on the strip's own flex line exactly as they were when
   they sat there directly - the wrapper is only there so all four can go at
   once when the progress does, leaving 高亮🖍 behind. */
.fb-resume__place {
  display: contents;
}

.fb-resume__place[hidden] {
  display: none;
}

.fb-resume__label {
  color: #8a5a1a;
  font-size: 0.82em;
  white-space: nowrap;
}

.fb-resume__quote {
  color: #4a4436;
  flex: 1 1 240px;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-resume__go {
  background-color: #be7123;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 0.82em;
  padding: 3px 12px;
  white-space: nowrap;
}

.fb-resume__drop {
  background-color: transparent;
  border: 0;
  color: #8a7f68;
  cursor: pointer;
  font-size: 0.8em;
  padding: 3px 6px;
}

.fb-resume__stale {
  color: #a0522d;
  font-size: 0.78em;
}

/* Said once, to the reader who is not signed in: a bookmark in this browser is
   in this browser only, and signing in is what makes it follow them. */
.fb-resume__local {
  color: #8a7f68;
  font-size: 0.78em;
}

.fb-resume__local[hidden] {
  display: none;
}

/* The bar that offers the bookmark over whatever the reader has selected. */
.fb-sel {
  align-items: center;
  background-color: #2f2a20;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 15, 10, 0.35);
  display: flex;
  gap: 6px;
  left: 0;
  padding: 5px 8px;
  position: fixed;
  top: 0;
  z-index: 40;
}

.fb-sel[hidden] {
  display: none;
}

.fb-sel__btn {
  background-color: transparent;
  border: 0;
  border-radius: 7px;
  color: #f5efe2;
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px 9px;
  white-space: nowrap;
}

.fb-sel__btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* 已完成学习, at the foot of a long 法本. Quiet and centred: it is the end of the
   reading, not another control in the reader's way, and it is drawn at all only
   while there is a 书签 to clear. */
.fb-done {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}

.fb-done[hidden] {
  display: none;
}

.fb-done__btn {
  background-color: transparent;
  border: 1px solid #e0d8c4;
  border-radius: 14px;
  color: #8a7f68;
  cursor: pointer;
  font-size: 0.85em;
  padding: 5px 16px;
}

.fb-done__btn:hover {
  background-color: #faf6ec;
  color: #6a6250;
}

/* The way into the drawer, on the 阅读进度 strip: it is the one thing on the page
   that is always in view. */
/* At the far end of the strip: 阅读进度's own words run along it and grow with
   the paragraph, and the count reads as part of them when it follows straight
   on. */
.fb-resume__marks {
  background-color: transparent;
  border: 1px solid #e0d8c4;
  border-radius: 10px;
  color: #8a7f68;
  cursor: pointer;
  font-size: 0.78em;
  margin-left: auto;
  padding: 2px 10px;
}

/* With no 阅读进度 behind it there is no strip to speak of: paper, border and
   the orange edge all said 「这是你读到的地方」, and none of that is true of a
   count standing on its own. */
.fb-resume:has(.fb-resume__place[hidden]) {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.fb-resume:has(.fb-resume__place[hidden]) .fb-resume__marks {
  margin-left: 0;
}

.fb-resume__marks:hover {
  background-color: #faf6ec;
  color: #6a6250;
}

/* The four pens on the selection bar. Same dots 大藏经 offers when a reader picks
   out a line, and the same idea: the colour is part of marking rather than a
   second pass over the passage afterwards. */
.fb-sel__colors {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  gap: 4px;
  padding: 0 7px;
}

.fb-sel__color {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  cursor: pointer;
  height: 17px;
  padding: 0;
  width: 17px;
}

.fb-sel__color:hover {
  border-color: #fff;
}

.fb-sel__color--c0 {
  background-color: #fdeeb4;
}

.fb-sel__color--c1 {
  background-color: #cfead0;
}

.fb-sel__color--c2 {
  background-color: #cfe2f3;
}

.fb-sel__color--c3 {
  background-color: #f7d6e4;
}

/* The second button on the selection bar - 读到这儿 beside 高亮这段. Quieter,
   because a reader marks passages far more often than they put the progress
   down. */
.fb-sel__btn--quiet {
  color: #cfc6b4;
}