/* Reading one scripture of the 乾隆大藏经.

   The crawled page is 1990s markup from the source site: an orange title bar in
   white-on-orange 宋体, a contents block of floated thirds in red and brown, the
   text, then the source site's own prev/next and a second orange bar. The old
   template printed all of it and hung four buttons off the right edge of the
   window. The view now takes that page apart; this is the frame the pieces sit
   in - a measured column, a bar with the way back and the text-size control, a
   contents card that folds away, and neighbours that say where they go. */
.dz-read {
  margin: 0 auto;
  max-width: 860px;
  padding: 0 14px 10px;
  text-align: left;
}

.dz-read__bar {
  align-items: center;
  border-bottom: 1px solid #ddddc8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding-bottom: 8px;
}

.dz-read__crumbs {
  color: #8a7a6a;
  font-size: 0.85em;
}

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

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

.dz-read__crumb-sep {
  opacity: 0.5;
  padding: 0 6px;
}

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

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

.dz-read__step:hover {
  text-decoration: underline;
}

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

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

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

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

.dz-read__mark {
  color: #4a7c59;
  font-size: 0.85em;
  text-decoration: none;
  white-space: nowrap;
}

.dz-read__mark:hover {
  text-decoration: underline;
}

/* A scripture already bookmarked reads as a state, not as an offer. */
.dz-read__mark--on {
  color: #8a7a4a;
}

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

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

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

.dz-read__meta a {
  color: #4a7c59;
  text-decoration: none;
}

.dz-read__meta a:hover {
  text-decoration: underline;
}

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

.dz-read__ref {
  color: #b0b09c;
}

.dz-read__link-icon {
  font-size: 0.85em;
  margin-left: 4px;
  opacity: 0.7;
}

/* The contents. Ten volumes of 大般若经 is a hundred kilobytes of scripture, so
   this is the one piece of navigation the page needs - and the one piece the
   reader wants out of the way once they are past it. */
.dz-toc {
  background-color: var(--read-paper);
  border: 1px solid #d9d9c6;
  border-radius: 10px;
  margin-top: 14px;
  padding: 8px 16px;
}

.dz-toc__summary {
  color: #4e0d0d;
  cursor: pointer;
  font-size: 0.95em;
  list-style: revert;
  padding: 4px 0;
}

.dz-toc__count {
  color: #8a8a78;
  font-size: 0.85em;
  padding-left: 6px;
}

.dz-toc__body {
  border-top: 1px solid #ececdc;
  margin-top: 6px;
  padding-top: 6px;
}

/* One row per 卷: the volume on the left, the 品 it contains on the right. The
   source markup floated both at fixed percentages, which stacked them into a
   ragged staircase on anything narrower than a desktop. */
.dz-toc__body .bm-bt {
  border-bottom: 1px dotted #ececdc;
  display: grid;
  gap: 2px 16px;
  grid-template-columns: minmax(0, 16em) 1fr;
  padding: 5px 0;
}

.dz-toc__body .bm-bt:last-child {
  border-bottom: 0;
}

/* The first row is the column labels the source page shipped with. */
.dz-toc__body .bm-bt:first-child {
  color: #a5a593;
  font-size: 0.8em;
}

.dz-toc__body .bm-jbt,
.dz-toc__body .bm-jbtbm {
  color: #6f6f5e;
  float: none;
  font-size: 0.9em;
  margin: 0;
  overflow: visible;
  padding: 1px 0;
  width: auto;
}

.dz-toc__body .bm-jbt a {
  color: #1a5276;
  text-decoration: none;
}

.dz-toc__body .bm-jbtbm a {
  color: #4a7c59;
  text-decoration: none;
}

.dz-toc__body .bm-jbt a:hover,
.dz-toc__body .bm-jbtbm a:hover {
  text-decoration: underline;
}

/* The text itself. Paper at a fixed measure, a serif face, and the line height a
   long classical read wants - the crawl set 宋体 at 200% line height inside a
   black-bordered box that ran the full width of the window. */
.dz-read__body {
  background-color: var(--read-paper);
  border: 1px solid #d9d9c6;
  border-radius: 12px;
  color: var(--read-ink);
  font-family: "Songti SC", "SimSun", "宋体", serif;
  /* 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- jumped the text up to
     the script's 1.3em default before stepping down. */
  line-height: 2;
  margin-top: 14px;
  padding: 26px 30px;
}

.dz-read__body p {
  margin: 0 0 1.1em;
}

/* Anchor targets: the contents links land on these, and a heading pinned to the
   very top edge of the viewport reads as if the page were cut off. */
.dz-read__body a[id] {
  scroll-margin-top: 16px;
}

/* The head of each 卷. Centred, the way the block is set in the canon, with a
   rule above it so a hundred kilobytes of continuous text still shows its
   joints. */
.dz-read__body .jwbt-box {
  border-top: 1px solid #ececdc;
  margin: 2em 0 1.4em;
  padding-top: 1.4em;
}

.dz-read__body .jwbt-box:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.dz-read__body .jwbt {
  color: #4e0d0d;
  font-size: 1.05em;
  line-height: 1.6;
  text-align: center;
}

.dz-read__body .jwbtbm {
  color: #8a7a6a;
  font-size: 0.85em;
  line-height: 1.6;
  text-align: center;
}

.dz-read__body .jwbtbm a {
  color: #8a7a6a;
  text-decoration: none;
}

.dz-read__body .jwbtbm a:hover {
  color: #4a7c59;
}

/* Neighbours, under the text where the reader ends up. The crawl's own pair were
   two bare list items linking to the source site's paths. */
.dz-read__nav {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding-top: 14px;
}

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

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

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

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

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

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

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

.dz-nav-card__lei-bie {
  color: #a5a593;
  display: block;
  font-size: 0.78em;
  padding-top: 2px;
}

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

  .dz-toc__body .bm-bt {
    grid-template-columns: 1fr;
  }

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

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

/* ------------------------------------------------ 书签, 经文笔记 and the text

   The bookmark used to be a flag on the whole 经论 and the only control for it
   was a grey word among four other grey words. It is a position now, so the pair
   that moves it and returns to it are buttons, and 我的书签 - the way back into
   whatever the reader was part way through - is the one that looks like a way
   out of this page rather than a footnote to it. */
.dz-marks {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.dz-marks__btn {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #1a5276;
  cursor: pointer;
  font-size: 0.82em;
  line-height: 1.6;
  padding: 2px 9px;
  white-space: nowrap;
}

.dz-marks__btn:hover {
  background-color: #fff;
  border-color: #4a7c59;
}

.dz-marks__btn--jump {
  color: #8a5a1a;
}

.dz-marks__count {
  background-color: #ece7d8;
  border-radius: 8px;
  color: #6a6250;
  font-size: 0.9em;
  padding: 0 5px;
}

.dz-read__mine {
  background-color: #4a7c59;
  border-radius: 12px;
  color: #fff;
  font-size: 0.85em;
  padding: 4px 12px;
  text-decoration: none;
  white-space: nowrap;
}

/* Same badge as on the two list pages, whose stylesheet this page does not
   load. */
.dz-read__mine .dz-mine-btn__n {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.88em;
  margin-left: 4px;
  padding: 0 6px;
}

.dz-read__mine:hover {
  background-color: #3d6a4a;
  color: #fff;
}

/* 白话文 is fashi.ai's work, not ours, and the line says so where the reader can
   see it rather than in a tooltip. */
.dz-read__aid {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 8px 0 0;
}

.dz-read__aid-link {
  background-color: #f3f0e4;
  border: 1px solid #ddd8c4;
  border-radius: 12px;
  color: #4a7c59;
  font-size: 0.85em;
  padding: 3px 11px;
  text-decoration: none;
}

.dz-read__aid-link:hover {
  border-color: #4a7c59;
}

.dz-read__aid-note {
  color: #a5a593;
  font-size: 0.78em;
}

/* Where the reader stopped, said before the scripture rather than after it. */
.dz-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;
}

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

.dz-resume__where {
  color: #6a6250;
  font-size: 0.82em;
}

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

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

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

/* Every line of scripture is one of these. It is not drawn - the reader must see
   the canon, not the scaffolding - until something is anchored to it. */
.dz-u {
  scroll-margin-top: 90px;
}

/* Where the bookmark is. It moves as the reader reads, so it is a mark in the
   margin rather than anything that touches the line: a 🔖 that shifted the
   scripture sideways every time the page settled would be worse than no mark at
   all. Positioned against the reading column's own padding, so it sits outside
   the text on a wide window and tucks against it on a narrow one. */
.dz-u--bookmark {
  position: relative;
}

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

/* Every marked line carries one; the newest - where 继续阅读 goes - is the solid
   one, and the others sit back so the trail does not compete with it. */
.dz-u--mark {
  position: relative;
}

.dz-u--mark::before {
  content: "🔖";
  filter: grayscale(0.7);
  font-size: 0.7em;
  left: -1.4em;
  line-height: 1;
  opacity: 0.55;
  position: absolute;
  top: 0.4em;
}

.dz-u--flash {
  animation: dz-flash 1.6s ease-out;
  border-radius: 4px;
}

@keyframes dz-flash {
  0%,
  40% {
    background-color: #fdf1c4;
  }

  100% {
    background-color: transparent;
  }
}

.dz-mark {
  background-color: transparent;
  border-bottom: 2px solid;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.dz-mark--c0 {
  background-color: #fdf3c0;
  border-color: #e0c45c;
}

.dz-mark--c1 {
  background-color: #dcf0d2;
  border-color: #8fbf7a;
}

.dz-mark--c2 {
  background-color: #d9e8fa;
  border-color: #7aa5d6;
}

.dz-mark--c3 {
  background-color: #fadbe6;
  border-color: #d68aa5;
}

/* The toolbar that comes up on a selection. Fixed rather than absolute: it is
   placed against the selection's own rectangle, which is measured in the
   viewport. */
.dz-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;
}

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

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

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

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

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

.dz-sel__color--c0 {
  background-color: #fdf3c0;
}

.dz-sel__color--c1 {
  background-color: #dcf0d2;
}

.dz-sel__color--c2 {
  background-color: #d9e8fa;
}

.dz-sel__color--c3 {
  background-color: #fadbe6;
}

/* The scripture's own notes, in the order the text runs - which is the only
   index a 经论 of sixty 卷 has. Built like the 法本 and 大经堂 drawers: off the
   left edge behind a scrim, opened by the bar's handle or by the round one in
   the bottom-left corner, through drawer.js. */
.dz-notes {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  /* Out of the flow entirely, and off the tab order until it is opened. */
  visibility: hidden;
  /* Over the navbar, the way the other two drawers are: at 45 the panel's own
     head - its title and the way to close it - opened underneath the fixed
     bar. */
  z-index: 60;
}

.dz-notes.is-drawer-open {
  visibility: visible;
}

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

.dz-notes.is-drawer-open .dz-notes__scrim {
  opacity: 1;
}

.dz-notes__panel {
  background-color: #fffdf6;
  border-right: 1px solid #ddd8c4;
  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;
  overscroll-behavior: contain;
  /* The foot clears the floating handle, which sits over this panel. */
  padding: 14px 16px 76px;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  width: 340px;
}

.dz-notes.is-drawer-open .dz-notes__panel {
  transform: translateX(0);
}

/* The same handle again, pinned to the corner: the bar is a long way up a 经论
   that runs to sixty 卷 in one page. */
.dz-notes__fab {
  align-items: center;
  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;
  display: flex;
  height: 42px;
  justify-content: center;
  left: 18px;
  position: fixed;
  width: 42px;
  /* Above the scrim: the handle is the way out as well as the way in. */
  z-index: 70;
}

.dz-notes__fab:hover {
  border-color: #4a7c59;
}

/* How many there are, on the handle itself: the reader who has written none has
   no reason to open it. */
.dz-notes__fab-count {
  background-color: #4a7c59;
  border-radius: 999px;
  color: #fff;
  font-size: 0.62em;
  line-height: 1.5;
  min-width: 1.5em;
  padding: 0 3px;
  position: absolute;
  right: -3px;
  text-align: center;
  top: -3px;
}

.dz-notes__head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.dz-notes__title {
  font-size: 1em;
  margin: 0;
}

.dz-notes__all {
  color: #4a7c59;
  font-size: 0.8em;
  margin-left: auto;
}

.dz-notes__close {
  background: none;
  border: 0;
  color: #8a7a6a;
  cursor: pointer;
  font-size: 1em;
}

.dz-notes__hint {
  color: #a5a593;
  font-size: 0.78em;
  line-height: 1.6;
  margin: 6px 0 10px;
}

.dz-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dz-notes__row {
  border-left: 3px solid #e0c45c;
  margin-bottom: 10px;
  padding-left: 9px;
}

.dz-notes__row--c1 {
  border-color: #8fbf7a;
}

.dz-notes__row--c2 {
  border-color: #7aa5d6;
}

.dz-notes__row--c3 {
  border-color: #d68aa5;
}

.dz-notes__where {
  color: #8a7a6a;
  display: block;
  font-size: 0.75em;
}

.dz-notes__quote {
  background: none;
  border: 0;
  color: #4a4436;
  cursor: pointer;
  display: block;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 0.9em;
  line-height: 1.7;
  padding: 0;
  text-align: left;
}

.dz-notes__quote:hover {
  color: #4e0d0d;
  text-decoration: underline;
}

.dz-notes__excerpt {
  color: #6a6250;
  display: block;
  font-size: 0.78em;
  line-height: 1.6;
  padding-top: 2px;
}

.dz-notes__stale {
  color: #a0522d;
  display: block;
  font-size: 0.72em;
}

.dz-notes__empty[hidden] {
  display: none;
}

.dz-notes__empty {
  color: #a5a593;
  font-size: 0.82em;
}

@media screen and (max-width: 600px) {
  .dz-notes__fab {
    bottom: 18px;
    left: 12px;
  }

  .dz-read__mine {
    padding: 4px 10px;
  }

  .dz-sel {
    gap: 2px;
    padding: 4px 6px;
  }

  .dz-sel__btn {
    padding: 4px 6px;
  }
}

/* 经文笔记 becomes a full-width sheet on a phone, and 返回顶部 paints at z-index
   1000 over its corner. Nothing on this page needs returning to the top of
   while the reader is writing about a line of it. */
@media screen and (max-width: 600px) {
  html.note-is-open .js-cd-top {
    display: none;
  }
}