/* The 乾隆大藏经 catalogue.

   1770 scriptures that used to be a six-column table: 部号 and 册号 repeat down
   whole stretches of it, 卷数 is three characters, and the 经名 - the only value
   anybody reads - got a sixth of the width and sat centred in it. These are cards
   in one column, with the divisions of the canon promoted to filter chips so
   reaching 大乘涅槃部 no longer means paging through 89 pages. */
.dz-page {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 14px;
  text-align: left;
}

.dz-head {
  border-bottom: 1px solid #ddddc8;
  padding-bottom: 10px;
}

/* The bookmark list puts a button beside the title; the catalogue's own head has
   the row to itself and is unaffected. */
.dz-head__row {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.dz-head__title {
  color: #4e0d0d;
  font-size: 1.3em;
}

.dz-head__go {
  flex: none;
  font-size: 0.85em;
  padding: 4px 14px;
}

.dz-head__meta {
  color: #8a7a6a;
  font-size: 0.85em;
  margin-top: 4px;
}

.dz-head__meta strong {
  color: #4a7c59;
  font-weight: 600;
}

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

.dz-head__icon {
  font-size: 0.8em;
  margin-left: 4px;
  opacity: 0.7;
}

.dz-search {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
}

/* forms_styling.css dresses every input for a stacked form (full width, its own
   padding). Give the box and its button one height so the bar reads as one
   control. */
.dz-search input[type="search"] {
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 0.95em;
  height: 38px;
  min-width: 0;
  width: 100%;
}

/* `.styled-button` carries its own vertical padding, which sat the label below
   centre once the bar gave the button a fixed height. */
.dz-search__go {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  gap: 6px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding-bottom: 0;
  padding-top: 0;
  white-space: nowrap;
}

/* 我的经文笔记 searches one thing - the reader's own notes - so the bar is one
   field with the magnifier inside it and the way out of a search on its right,
   rather than a form box with a word next to it. */
.dz-search--pill .dz-search__field {
  align-items: center;
  background-color: #fff;
  border: 1px solid #ddd8c4;
  border-radius: 999px;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  padding: 0 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dz-search--pill .dz-search__field:focus-within {
  border-color: #4a7c59;
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.14);
}

.dz-search__icon {
  color: #b9b39f;
  flex: none;
  font-size: 0.85em;
}

.dz-search--pill input[type="search"] {
  background: none;
  border: 0;
  box-shadow: none;
  height: 36px;
  margin: 0;
  /* forms_styling.css caps a text input at a form's column width, which inside a
     field that is already the full width left the clear control stranded in the
     middle of it. */
  max-width: none;
  padding: 0;
  width: auto;
}

.dz-search--pill input[type="search"]:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.dz-search__clear {
  align-items: center;
  border-radius: 50%;
  color: #b0a99a;
  display: inline-flex;
  flex: none;
  font-size: 0.8em;
  height: 22px;
  justify-content: center;
  text-decoration: none;
  width: 22px;
}

.dz-search__clear:hover {
  background-color: #f2ede0;
  color: #4e0d0d;
}

.dz-search--pill .dz-search__go {
  background-color: #4a7c59;
  border: 1px solid #4a7c59;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
  padding: 0 20px;
}

.dz-search--pill .dz-search__go:hover {
  background-color: #3d6a4a;
  border-color: #3d6a4a;
}

.dz-search__hint {
  align-items: baseline;
  color: #a5a593;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  gap: 4px 8px;
  margin: 6px 0 0;
}

.dz-search__hint-label {
  flex: none;
}

/* The examples are the query, not a description of one: clicking runs it. */
.dz-example {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #e2e0cd;
  border-radius: 10px;
  color: #6f7f6f;
  padding: 1px 8px;
  text-decoration: none;
}

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

.dz-facets {
  padding: 10px 0;
}

.dz-facets__row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-facets__label {
  color: #8a8a78;
  flex: none;
  font-size: 0.82em;
  width: 2.6em;
}

/* Name first, count second and quieter: you read the division, then check how
   many scriptures are in it. */
.dz-chip small {
  opacity: 0.7;
  padding-left: 3px;
}

/* The rest of the 经论, folded away until asked for. The summary is a chip like
   the ones beside it - it is the same kind of thing, one more way to narrow the
   list - and the panel it opens sits under the whole row. */
.dz-facets__more {
  display: inline-block;
}

.dz-facets__more summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}

.dz-facets__more summary::-webkit-details-marker {
  display: none;
}

/* Open, it owns the rest of the row: the chips inside wrap across the width
   instead of down a column the summary's own width. */
.dz-facets__more[open] {
  display: block;
  width: 100%;
}

.dz-facets__more[open] summary {
  background-color: #f0eee0;
  border-color: #b9b9a0;
}

.dz-facets__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 2px;
}

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

/* A card lifts a hair on hover and shows a coloured spine, so the row under the
   pointer is unmistakable in a list where every title starts the same way. */
.dz-card {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-left: 3px solid #e4e2cf;
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 9px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.dz-card:hover {
  border-color: #b9b9a0;
  border-left-color: #4a7c59;
  box-shadow: 0 2px 8px rgba(78, 13, 13, 0.07);
  transform: translateY(-1px);
}

/* Scripture names run long and are read as titles, so they get a serif face and
   the full width of the card. */
.dz-card__title {
  color: #4e0d0d;
  display: block;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 1.08em;
  line-height: 1.5;
  text-decoration: none;
}

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

.dz-card__title mark,
.dz-card__author mark {
  background-color: #f6e7a8;
  color: inherit;
  padding: 0 1px;
}

/* One line of facts under the title, wrapping rather than widening. */
.dz-card__meta {
  align-items: baseline;
  color: #8a8a78;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82em;
  gap: 3px 12px;
  padding-top: 4px;
}

.dz-card__lei-bie {
  color: #4a7c59;
  flex: none;
  text-decoration: none;
}

.dz-card__lei-bie:hover {
  text-decoration: underline;
}

/* 部号 and 册号 are catalogue coordinates - useful to check, never scanned - so
   they sit at the far end of the line in the quietest tone on the card. */
.dz-card__ref {
  color: #b0b09c;
  margin-left: auto;
  white-space: nowrap;
}

.dz-card__hit {
  background-color: #f3efdd;
  border-radius: 9px;
  color: #8a7a4a;
  flex: none;
  padding: 1px 8px;
}

.dz-card__refetch {
  color: #4a7c59;
}

/* Bookmarks: when it was saved, and the way off the card. */
.dz-card__saved {
  opacity: 0.85;
}

.dz-card__drop {
  color: #a33;
  margin-left: auto;
  white-space: nowrap;
}

.dz-empty {
  background-color: #fff;
  border: 1px dashed #d0d0ba;
  border-radius: 10px;
  list-style: none;
  padding: 26px 18px;
  text-align: center;
}

.dz-empty__lead {
  color: #6f6f5e;
  font-size: 1.02em;
  margin: 0;
}

.dz-empty__hint {
  color: #9a9a88;
  font-size: 0.85em;
  margin: 6px 0 12px;
}

@media screen and (max-width: 600px) {
  .dz-facets__label {
    width: auto;
  }

  /* The coordinates lose their own end of the line once it wraps to two. */
  .dz-card__ref {
    margin-left: 0;
  }
}

/* ------------------------------------------- 我的书签 and 我的经文笔记 cards

   A bookmark card says where in the scripture it goes, not just which scripture:
   it is a position now, so 经名 alone would be the same card it was when a
   bookmark meant a whole 经论. */
.dz-head__mine {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

.dz-mine-btn {
  /* The green these pages already use for anything you act on - the selected
     chip, the search button, every link out of a card. 深棕 is the colour of the
     headings here, and a solid block of it read as a warning. */
  background-color: #4a7c59;
  border-radius: 12px;
  color: #fff;
  font-size: 0.85em;
  padding: 4px 12px;
  text-decoration: none;
  white-space: nowrap;
}

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

/* How many are behind the button. A count is what says there is anything there:
   我的书签 with nothing in it reads as an invitation, with 40 in it as a place
   the reader lives. */
.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-mine-btn--quiet .dz-mine-btn__n {
  background-color: rgba(74, 124, 89, 0.14);
}

.dz-mine-btn--quiet {
  background-color: #f3f0e4;
  border: 1px solid #ddd8c4;
  color: #4a7c59;
}

.dz-mine-btn--quiet:hover {
  background-color: #fff;
  color: #4a7c59;
}

.dz-card__spot {
  color: #4a4436;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  line-height: 1.7;
  margin: 4px 0 0;
}

.dz-card__spot--top {
  color: #a5a593;
  font-family: inherit;
  font-size: 0.85em;
}

.dz-card__where {
  color: #8a7a6a;
  font-family: inherit;
  font-size: 0.78em;
  margin: 4px 0 0;
  padding-right: 8px;
}

.dz-card__quote {
  border-left: 3px solid #e0c45c;
  color: #4a4436;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  line-height: 1.8;
  margin: 6px 0 0;
  padding: 2px 0 2px 10px;
}

.dz-card__go {
  color: #4a7c59;
  text-decoration: none;
  white-space: nowrap;
}

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

/* The remove is a POST now - it deletes something - so it is a button in a form
   rather than a link, and has to be talked back into looking like the rest of
   the row. */
.dz-card__form {
  display: inline;
  margin: 0;
}

button.dz-card__drop {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* 经文笔记 cards: the passage first, the catalogue after it. What the reader is
   scanning for is the sentence they marked - the scripture and the 品 above it
   are how they confirm they found it, and the 部/册 coordinates are not on the
   card at all. The mark's own colour runs down the spine, so a wall of notes
   sorts itself by eye. */
.dz-card--note {
  border-left-color: #e0c45c;
  padding: 11px 14px 9px;
}

.dz-card--note:hover {
  border-left-color: #e0c45c;
}

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

.dz-card--c1:hover {
  border-left-color: #8fbf7a;
}

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

.dz-card--c2:hover {
  border-left-color: #7aa5d6;
}

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

.dz-card--c3:hover {
  border-left-color: #d68aa5;
}

.dz-note__head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* 经名 and 品名 read as one label and filter to one scripture as one click. */
.dz-note__where {
  color: #4e0d0d;
  min-width: 0;
  text-decoration: none;
}

.dz-note__where:hover .dz-note__jing {
  text-decoration: underline;
}

.dz-note__jing {
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 0.98em;
}

.dz-note__juan {
  color: #8a7a6a;
  font-size: 0.76em;
  padding-left: 7px;
}

.dz-note__when {
  color: #b0b09c;
  flex: none;
  font-size: 0.76em;
}

/* The quote is the card's own way into the text: a reader who has found the
   passage clicks the passage. */
.dz-note__passage {
  display: block;
  text-decoration: none;
}

.dz-card--note .dz-card__quote {
  border: 0;
  margin: 7px 0 0;
  padding: 0;
}

/* The colour is the mark's, so it belongs behind the words it was drawn over,
   not on a rule beside them. */
.dz-card--note .dz-card__quote::before {
  background-color: #e8c24a;
  border-radius: 2px;
  content: "";
  display: inline-block;
  height: 0.95em;
  margin-right: 7px;
  vertical-align: -0.12em;
  width: 3px;
}

.dz-card--c1 .dz-card__quote::before {
  background-color: #6fae57;
}

.dz-card--c2 .dz-card__quote::before {
  background-color: #4f86c6;
}

.dz-card--c3 .dz-card__quote::before {
  background-color: #d1688f;
}

.dz-note__passage:hover .dz-card__quote {
  color: #2f2b22;
}

.dz-card--note .dz-card__note {
  border-top: 1px solid #f0eee0;
  margin-top: 8px;
  padding-top: 7px;
}

.dz-note__foot {
  align-items: center;
  display: flex;
  gap: 10px;
  padding-top: 8px;
}

.dz-note__lei-bie {
  background-color: #f4f2e6;
  border-radius: 9px;
  color: #8a8a78;
  font-size: 0.74em;
  padding: 2px 9px;
}

.dz-note__open {
  color: #4a7c59;
  font-size: 0.82em;
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

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

/* The one irreversible thing on the card, so it is not sitting in the same tone
   and the same row as 看原文. It stays reachable by keyboard and stays put on a
   touch screen, where there is no hover to bring it out. */
button.dz-note__drop {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #b9b0a4;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    opacity 0.15s ease;
  width: 28px;
}

button.dz-note__drop:hover {
  background-color: #fbeceb;
  color: #a33;
}

@media (hover: hover) {
  button.dz-note__drop {
    opacity: 0;
  }

  .dz-card--note:hover button.dz-note__drop,
  button.dz-note__drop:focus-visible {
    opacity: 1;
  }
}

/* The swatch on a chip is a label, not a highlight: at the tint the mark is
   painted in - #fdf3c0 and its three siblings - a 9px dot beside 9pt text was
   four shades of off-white. The dots carry the same hues at reading strength,
   with a rim, so 黄绿蓝粉 can be told apart at a glance. */
.dz-chip--c0::before,
.dz-chip--c1::before,
.dz-chip--c2::before,
.dz-chip--c3::before {
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  width: 11px;
}

.dz-chip--c0::before {
  background-color: #e8c24a;
}

.dz-chip--c1::before {
  background-color: #6fae57;
}

.dz-chip--c2::before {
  background-color: #4f86c6;
}

.dz-chip--c3::before {
  background-color: #d1688f;
}

/* The earlier 书签 in one 经论, folded in behind the newest: the reader came here
   for the scripture, and the trail through it is what they open when they want
   to go back further than last time. */
.dz-card__more {
  margin: 6px 0 2px;
}

.dz-card__more-head {
  color: #4a7c59;
  cursor: pointer;
  font-size: 0.8em;
  list-style: none;
  width: fit-content;
}

.dz-card__more-head::-webkit-details-marker {
  display: none;
}

.dz-card__more-head::before {
  content: "▸ ";
}

.dz-card__more[open] .dz-card__more-head::before {
  content: "▾ ";
}

.dz-card__marks {
  border-left: 2px solid #e6e0d2;
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 10px;
}

.dz-card__mark {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 3px 0;
}

/* One line per place, at list scale. The row reused the card's own 引文 styling
   at first - 宋体 at reading size, a yellow rule down the side, its own margins -
   and the fold came out as five more cards stacked inside one. */
.dz-card__mark a {
  align-items: baseline;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
}

.dz-card__mark .dz-card__where {
  flex: none;
  font-size: 0.72em;
  margin: 0;
  padding: 0;
}

.dz-card__mark .dz-card__quote {
  border-left: 0;
  flex: 1 1 auto;
  font-size: 0.88em;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-card__mark .dz-card__saved {
  color: #a09884;
  flex: none;
  font-size: 0.72em;
  white-space: nowrap;
}

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

/* Out of the way until the row is under the cursor: the reader opened the fold
   to find a place they had marked, not to prune them. */
.dz-card__mark-drop {
  background: none;
  border: 0;
  color: #b3a894;
  cursor: pointer;
  font-size: 0.85em;
  opacity: 0;
  padding: 2px 4px;
  transition: opacity 0.15s ease;
}

.dz-card__mark:hover .dz-card__mark-drop,
.dz-card__mark-drop:focus {
  opacity: 1;
}

.dz-card__mark-drop:hover {
  color: #a33;
}