/* 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 white 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 note. It used to be a 30x20 textarea centred in the page above the text. */
.fb-note {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 10px;
  margin-top: 14px;
  padding: 12px 16px;
}

.fb-note__status {
  color: #4a7c59;
  display: block;
  font-size: 0.85em;
}

.fb-note__input {
  font-size: 1em;
  margin-top: 6px;
}

.fb-note__actions {
  align-items: center;
  display: flex;
  gap: 14px;
  padding-top: 8px;
}

/* The text. White 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: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 12px;
  color: #333;
  /* 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: 14px;
  padding: 26px 30px;
}

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

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