/* 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 {
  --dict-ink: #2d2822;
  --dict-muted: #7b7363;
  --dict-line: #e6e0cc;
  --dict-paper: #fffdf8;
  --dict-accent: #be7123;
  --dict-link: #1a5276;
  --dict-green: #4a7c59;
  color: var(--dict-ink);
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 14px 24px;
  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.4em;
  font-weight: 600;
}

/* An entry's own page: the term is the page's title, and reads as one. */
.dict-head__title--term {
  font-size: 2em;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

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

/* The box is what the page is for: taller and wider than the shared bar's, with
   the rounded ends of the button that submits it. */
.dict-page .filter-bar {
  margin: 14px 0 8px;
}

.dict-page .filter-bar input[type="search"] {
  border: 1px solid #d9d2bb;
  border-radius: 999px;
  font-size: 1em;
  height: 42px;
  max-width: 460px;
  padding: 0 18px !important;
}

.dict-page .filter-bar input[type="search"]:focus {
  border-color: var(--dict-green);
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.15);
  outline: none;
}

.dict-page .filter-bar__go {
  height: 42px;
  padding: 0 18px;
}

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

/* A sheet of paper per entry, the accent kept as a short bar inside the corner
   rather than a full-height border. */
.dict-card {
  background-color: var(--dict-paper, #fffdf8);
  border: 1px solid var(--dict-line, #e6e0cc);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(60, 40, 10, 0.04);
  margin-bottom: 12px;
  padding: 14px 18px 12px 20px;
  position: relative;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.dict-card::before {
  background-color: var(--dict-accent, #be7123);
  border-radius: 3px;
  bottom: 16px;
  content: "";
  left: 0;
  position: absolute;
  top: 16px;
  width: 3px;
}

.dict-card:hover {
  border-color: #d8ceb0;
  box-shadow: 0 4px 14px rgba(60, 40, 10, 0.07);
}

/* The searched word, wherever it turns up in a card (dict-expand.js). */
.dict-hit {
  background-color: #fbe8b6;
  border-radius: 2px;
  color: inherit;
  padding: 0 1px;
}

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

.dict-card__term {
  color: var(--dict-ink, #2d2822);
  font-size: 1.3em;
  font-weight: 700;
  text-decoration: none;
}

.dict-card__term:hover {
  color: var(--dict-link, #1a5276);
}

.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.75;
  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: 8px;
  padding: 2px 12px;
  border: 1px solid var(--dict-line, #e6e0cc);
  border-radius: 999px;
  background: #fff;
  color: var(--dict-link, #1a5276);
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
}

.dict-card__toggle::after {
  content: " ▾";
}

.dict-card__toggle[aria-expanded="true"]::after {
  content: " ▴";
}

.dict-card__toggle:hover {
  border-color: #cfc6a8;
}

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

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

/* The reader's own collection, in the head of the dictionary it is collected
   from - the same button 乾隆大藏经 puts 我的书签 in, in the green these pages
   already use for anything you act on. */
.dict-mine-btn {
  background-color: #4a7c59;
  border-radius: 12px;
  color: #fff;
  flex: none;
  font-size: 0.85em;
  margin-left: auto;
  padding: 4px 12px;
  text-decoration: none;
  white-space: nowrap;
}

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

/* The way back out of a collection, into the dictionary it collects from. Quiet,
   because on that page the reader is already where they meant to be. */
.dict-mine-btn--quiet {
  background-color: #f3f0e4;
  border: 1px solid #ddd8c4;
  color: #4a7c59;
}

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

.dict-mine-btn__back {
  font-size: 0.85em;
  margin-right: 6px;
}

/* How many are behind it. A count is what says there is anything there. */
.dict-mine-btn__n {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.88em;
  margin-left: 4px;
  padding: 0 6px;
}

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

/* The text at the reader's own 字号 (阅读设置), from a plainer base than the
   grey 1.3em box it used to sit in. */
.dict-entry__body {
  background-color: var(--dict-paper, #fffdf8);
  border: 1px solid var(--dict-line, #e6e0cc);
  border-radius: 12px;
  font-size: calc(1.1em * var(--reading-font-scale, 1));
  line-height: 1.9;
  margin-top: 16px;
  padding: 18px 22px;
}

/* Other spellings the entry is also found under - 异写、藏文、梵文 - as quiet
   chips under the text, and the dictionary's own credit line under those. */
.dict-entry__aliases {
  align-items: baseline;
  color: #6b6650;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  gap: 6px;
  margin: 4px 0 0;
}

.dict-entry__aliases-label {
  margin-right: 2px;
}

.dict-entry__alias {
  background-color: #f6f4ea;
  border: 1px solid #e4e0cc;
  border-radius: 6px;
  overflow-wrap: anywhere;
  padding: 0 6px;
}

.dict-entry__note {
  color: #77725c;
  font-size: 0.85em;
  line-height: 1.6;
  margin: 10px 0 0;
}

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

  .dict-entry__body {
    padding: 14px 16px;
  }

  .dict-card {
    padding: 12px 14px 10px 16px;
  }
}

/* 丁福保 DILA 本的悉昙字图，跟着字号走。 */
.dict-gaiji {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* 讲记名相：摘句按定义、分类、诸家、辨析分组，每句一张小卡，下沿出处链回原段。
   四组各一个颜色，分组的标签、摘句左边的细条都用它。 */
.dict-quotes {
  --role: var(--dict-accent, #be7123);
}

.dict-quotes__group[data-role="定义"],
.dict-roles__item[data-role="定义"] {
  --role: #4a7c59;
}

.dict-quotes__group[data-role="分类"],
.dict-roles__item[data-role="分类"] {
  --role: #2f6690;
}

.dict-quotes__group[data-role="诸家"],
.dict-roles__item[data-role="诸家"] {
  --role: #b5762a;
}

.dict-quotes__group[data-role="辨析"],
.dict-roles__item[data-role="辨析"] {
  --role: #8b3a52;
}

.dict-entry__body.dict-quotes {
  background: none;
  border: none;
  padding: 0;
}

/* 页头下一行：四组各有几句，点了跳过去。 */
.dict-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.dict-roles__item {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--dict-line, #e6e0cc);
  border-radius: 999px;
  color: var(--role);
  display: inline-flex;
  font-size: 0.9em;
  gap: 6px;
  padding: 3px 12px;
  text-decoration: none;
}

.dict-roles__item:hover {
  border-color: var(--role);
}

.dict-roles__item::before {
  background-color: var(--role);
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.dict-roles__n {
  color: var(--dict-muted, #7b7363);
  font-size: 0.85em;
}

.dict-quotes__group,
.dict-quotes__work {
  scroll-margin-top: 70px;
}

/* 几部论典都讲这个词：按论典分段，段名压在各组之上 */
.dict-roles__item--work {
  --role: var(--dict-accent, #be7123);
}

.dict-quotes__work + .dict-quotes__work {
  border-top: 1px solid var(--dict-line, #e6e0cc);
  margin-top: 30px;
  padding-top: 22px;
}

.dict-quotes__work-title {
  color: var(--dict-ink, #2d2822);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}

.dict-quotes__work-label {
  color: var(--dict-muted, #7b7363);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.dict-quotes__group + .dict-quotes__group {
  margin-top: 22px;
}

.dict-quotes__role {
  align-items: center;
  color: var(--role);
  display: flex;
  font-size: 0.8em;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.dict-quotes__role::after {
  background-color: var(--dict-line, #e6e0cc);
  content: "";
  flex: 1;
  height: 1px;
}

.dict-quote {
  background-color: var(--dict-paper, #fffdf8);
  border: 1px solid var(--dict-line, #e6e0cc);
  border-left: 3px solid var(--role);
  border-radius: 4px 10px 10px 4px;
  margin: 0 0 10px;
  padding: 12px 16px 10px;
}

.dict-quote__text {
  line-height: 1.85;
  margin: 0;
}

.dict-quote__cite {
  align-items: baseline;
  color: var(--dict-muted, #7b7363);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82em;
  gap: 4px 10px;
  margin: 8px 0 0;
}

.dict-quote__cite a {
  color: var(--dict-link, #1a5276);
  text-decoration: none;
}

.dict-quote__cite a:hover {
  text-decoration: underline;
}

.dict-quote__cite .fas {
  font-size: 0.85em;
  margin-right: 4px;
  opacity: 0.7;
}

.dict-quote__view {
  color: var(--dict-muted, #7b7363);
}

.dict-quotes__see {
  align-items: center;
  border-top: 1px dashed var(--dict-line, #e6e0cc);
  color: var(--dict-muted, #7b7363);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  gap: 6px;
  margin: 18px 0 0;
  padding-top: 12px;
}

.dict-quotes__see a.dict-entry__alias {
  color: var(--dict-link, #1a5276);
  text-decoration: none;
}

.dict-quotes__see a.dict-entry__alias:hover {
  border-color: #cfc6a8;
}

/* 卡片里的摘句：收着时只露头一组（多是定义）的前两句，别的组和「另见」展开才有；
   按高度截会把下一组的标题孤零零截在底下。卡片本身已是一张纸，摘句不再套卡。 */
.dict-card__body--quotes {
  display: block;
}

.dict-card__body--quotes:not(.is-expanded) .dict-quotes__work ~ .dict-quotes__work,
.dict-card__body--quotes:not(.is-expanded) .dict-quotes__group ~ .dict-quotes__group,
.dict-card__body--quotes:not(.is-expanded) .dict-quotes__see,
.dict-card__body--quotes:not(.is-expanded) .dict-quote:nth-of-type(n + 3) {
  display: none;
}

.dict-card__body--quotes .dict-quotes__group + .dict-quotes__group {
  margin-top: 12px;
}

.dict-card__body--quotes .dict-quotes__work-title {
  font-size: 0.95em;
  margin-bottom: 10px;
}

.dict-card__body--quotes .dict-quotes__role {
  font-size: 0.78em;
  margin: 0 0 4px;
}

.dict-card__body--quotes .dict-quote {
  background: none;
  border: none;
  border-left: 2px solid var(--role);
  border-radius: 0;
  margin: 0 0 8px;
  padding: 0 0 0 12px;
}

.dict-card__body--quotes .dict-quote__text {
  line-height: 1.75;
  margin: 0;
}

.dict-card__body--quotes .dict-quote__cite {
  margin: 2px 0 0;
}

.dict-card__body--quotes .dict-quotes__see {
  margin: 10px 0 0;
  padding-top: 8px;
}

/* 翻译名义大集的梵、藏写法，挂在别部同名词条下：一行一组，出处小字链到那一条。 */
.dict-parallel {
  align-items: baseline;
  border: 1px solid var(--dict-line, #e6e0cc);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  margin: 14px 0 0;
  padding: 10px 16px;
}

.dict-parallel__label {
  color: var(--dict-muted, #7b7363);
  flex: none;
  font-size: 0.85em;
}

.dict-parallel__rows {
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.dict-parallel__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  overflow-wrap: anywhere;
}

.dict-parallel__row + .dict-parallel__row {
  margin-top: 4px;
}

.dict-parallel__sa,
.dict-parallel__bo {
  font-style: italic;
}

.dict-parallel__script {
  color: #5b5446;
}

.dict-parallel__sep {
  color: var(--dict-muted, #7b7363);
}

.dict-parallel__src {
  color: var(--dict-muted, #7b7363);
  font-size: 0.8em;
  text-decoration: none;
}

.dict-parallel__src:hover {
  color: var(--dict-link, #1a5276);
  text-decoration: underline;
}