/* Dictionary search results (佛词典 / 字典).

   The explanation is the reason people search, so it is shown inline rather
   than hidden behind a 查看 link, clamped to a few lines with a toggle for
   the long entries. Clicking, not hovering: hovering does not exist on a
   phone, and these entries are read, not glanced at. */

/* The head of both search pages. It used to be a centred line reading 字典
   (1~20 of 43000) with the counts in brackets and a second sentence under the
   box repeating them in prose - 一共收录了 43000 字典条目，搜索到了 12 条. Same
   facts, one muted line, ranged with the column they describe. */
.dict-page {
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 14px;
  text-align: left;
}

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

.dict-head__row {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

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

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

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

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

/* The shared filter bar and chips keep their own rules; only the alignment
   changes, because this is a column and not a full-width page. */
.dict-page .filter-bar,
.dict-page .dl-facets {
  justify-content: flex-start;
  margin: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.dict-page .dl-facets__row {
  justify-content: flex-start;
}

/* The results carry their own measure and gutters for the pages that show them
   on their own; inside the column those are the column's job, and doubling them
   set every card 20px in from the head and the search box above it. */
.dict-page .dict-results {
  max-width: none;
  padding: 0;
}

/* How much this search found in that dictionary. Without it the chips are
   seventeen guesses; with it, the one worth opening is obvious. */
.dict-chip__count {
  opacity: 0.65;
  padding-left: 4px;
}

/* What kind of thing an example is - 汉字, 拼音, 带调拼音. Quiet, because the
   example itself is what gets read and clicked. */
.dict-chip__note {
  font-size: 0.85em;
  opacity: 0.6;
  padding-left: 6px;
}

.dl-chip--on .dict-chip__count,
.dl-chip--on .dict-chip__note {
  opacity: 0.85;
}

.dict-results {
  /* Cap the measure: dictionary entries are prose, unreadable at 1700px wide */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px;
  list-style: none;
}

.dict-card {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #dcd8c4;
  border-left: 4px solid rgb(190, 113, 35);
  background-color: #fdfdf8;
}

.dict-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.dict-card__term {
  font-size: 1.25em;
  font-weight: bold;
}

.dict-card__pinyin {
  color: #6b6b5a;
}

.dict-card__source {
  padding: 1px 8px;
  border: 1px solid #d6d1b8;
  border-radius: 10px;
  background-color: #f2efe1;
  color: #6b6b5a;
  font-size: 0.8em;
  white-space: nowrap;
}

.dict-card__code {
  color: #9a9a88;
  font-size: 0.8em;
}

/* Push the external link to the end of the row, away from the term */
.dict-card__origin {
  margin-left: auto;
  font-size: 0.85em;
  white-space: nowrap;
}

.dict-card__body {
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dict-card__body.is-expanded {
  display: block;
  -webkit-line-clamp: none;
}

.dict-card__body p {
  margin: 0 0 6px;
}

.dict-card__body h3 {
  margin: 0 0 4px;
  font-size: 1em;
  color: #6b6b5a;
}

.dict-card__toggle {
  display: none;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #1a5276;
  font-size: 0.9em;
  font-family: inherit;
  cursor: pointer;
}

.dict-card__toggle.is-needed {
  display: inline-block;
}

.dict-card__empty {
  color: #9a9a88;
}

/* The two collection pages - 生僻字字库 and 佛词典收藏夹 - use these same cards,
   and add two things the search pages do not have: a button in the head that
   leads to the search, and a way off the card. */
.dict-head__go {
  flex: none;
  font-size: 0.85em;
  padding: 4px 14px;
}

/* Save, and its own state. A chip rather than a link, because on a page of
   twenty entries this is the one control on each card and it has to be findable
   without reading. */
.dict-card__save {
  border: 1px solid #d6d1b8;
  border-radius: 10px;
  color: #6b6b5a;
  font-size: 0.8em;
  padding: 1px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.dict-card__save:hover {
  border-color: #4a7c59;
  color: #3d6b4b;
}

.dict-card__save--on {
  background-color: #eaf3ec;
  border-color: #bcd7c3;
  color: #3d6b4b;
}

.dict-card__drop {
  color: #a33;
  font-size: 0.85em;
  white-space: nowrap;
}

/* The dashed frame the other lists use for an empty one: it reads as a place
   something goes, not as a page that failed to load. */
.dict-empty {
  border: 1px dashed #d6d1b8;
  border-radius: 8px;
  color: #8a7a6a;
  list-style: none;
  padding: 22px 14px;
  text-align: center;
}

.dict-empty__lead {
  margin: 0 0 6px;
}

.dict-empty__hint {
  font-size: 0.85em;
  margin: 0 0 10px;
  opacity: 0.8;
}

/* An entry on its own page: the same column and head as the search, with the
   text below and the neighbours under that. */
/* One character, and the page is about that character: at head-title size it
   read as a typo. */
.dict-head__title--zi {
  font-size: 2.2em;
  line-height: 1.2;
}

.dict-entry__say {
  font-size: 0.9em;
  padding-left: 10px;
  text-decoration: none;
}

.dict-entry__body {
  line-height: 1.8;
  padding: 14px 0 6px;
}

/* One line, both ways, each carrying what it leads to - the pair of bare
   chevrons this replaces sat above the entry, where nobody is when they finish
   reading one, and named neither neighbour. */
.dict-entry__nav {
  align-items: center;
  border-top: 1px solid #ddddc8;
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
}

.dict-entry__step {
  align-items: baseline;
  background-color: #fdfdf8;
  border: 1px solid #dcd8c4;
  border-radius: 8px;
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  padding: 6px 12px;
  text-decoration: none;
}

.dict-entry__step:hover {
  border-color: #b9b9a0;
}

.dict-entry__step--next {
  flex-direction: row-reverse;
  text-align: right;
}

.dict-entry__step-label {
  color: #8a8a78;
  flex: none;
  font-size: 0.78em;
}

.dict-entry__step-term {
  color: #1a5276;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A first or last entry holds its side of the row open, so the other stays
   where the reader expects it. */
.dict-entry__gap {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .dict-card__origin {
    margin-left: 0;
  }

  .dict-head__row {
    flex-wrap: wrap;
  }

  .dict-entry__nav {
    flex-wrap: wrap;
  }

  .dict-entry__step {
    flex: 1 1 100%;
  }

  .dict-entry__step--next {
    flex-direction: row;
    text-align: left;
  }

  .dict-entry__gap {
    display: none;
  }
}