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

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

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