/* 我的法本书签🔖 - one card per 法本, at the paragraph the reader stopped on.
   Its own prefix: the 大藏经 list is `dz-` and a selector shared between two
   pages is one that gets renamed for one of them and breaks the other. */

.fbm-page {
  margin: 0 auto;
  max-width: 860px;
  padding: 16px 14px 40px;
}

.fbm-head {
  border-bottom: 1px solid #e6dcc0;
  margin-bottom: 14px;
  padding-bottom: 10px;
}

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

.fbm-head__title {
  color: #3c3628;
  font-size: 1.25em;
  font-weight: 600;
}

.fbm-head__meta {
  color: #6a6250;
  font-size: 0.85em;
  margin: 6px 0 0;
}

.fbm-head__sep {
  color: #c3b795;
  margin: 0 6px;
}

.fbm-local {
  color: #8a7f68;
}

.fbm-head__links {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

/* Two ways out of the head, neither shouting: the other list, with how much
   is on it, and the shelves. */
.fbm-link {
  border: 1px solid #d9cfb4;
  border-radius: 10px;
  color: #6a6250;
  font-size: 0.85em;
  padding: 3px 12px;
  text-decoration: none;
  white-space: nowrap;
}

.fbm-link:hover {
  border-color: #be7123;
  color: #3c3628;
}

.fbm-link__n {
  background-color: #ece4d0;
  border-radius: 8px;
  color: #5a5240;
  font-size: 0.85em;
  margin-left: 4px;
  padding: 0 6px;
}

.fbm-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fbm-card {
  background-color: #fdfaf2;
  border: 1px solid #e9e0c8;
  border-radius: 10px;
  padding: 10px 14px;
}

.fbm-card__title {
  color: #3c3628;
  font-size: 1.02em;
  font-weight: 600;
  text-decoration: none;
}

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

/* The quote is where they stopped, in the face the 法本 itself is set in. */
.fbm-card__spot {
  color: #4a4436;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  margin: 5px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbm-card__spot--top {
  color: #8a7f68;
  font-style: italic;
}

.fbm-card__more {
  margin-top: 6px;
}

.fbm-card__more-head {
  color: #8a5a1a;
  cursor: pointer;
  font-size: 0.82em;
}

.fbm-card__marks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 10px;
}

.fbm-card__mark {
  align-items: baseline;
  border-left: 2px solid #e6dcc0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 8px;
}

/* 一行一个高亮: nothing sits beside the passage, so it has the row to itself and
   the card reads as one 🖍 per line. */
.fbm-card__mark--hl {
  flex-wrap: nowrap;
}

/* A 🖍 row already wears a bar in the colour it was marked in, so it does not
   also need 继续阅读's plain tick down the left: two rules side by side, one of
   them saying nothing. */
.fbm-card__mark--hl {
  border-left: 0;
  padding-left: 0;
}

/* 继续阅读's rows: one line, cut with an ellipsis. A 🖍 row's own passage is
   below, and wraps instead. */
.fbm-card__mark > a:not(.fbm-card__quote) {
  color: #4a4436;
  flex: 1 1 220px;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 0.92em;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbm-card__mark form {
  display: inline;
  margin: 0;
}

/* The passage in full, clickable - it goes back to where it was marked. Nothing
   is cut and nothing is folded: this page is where a reader goes to read what
   they marked and to search it, and a passage cut at the edge of the card is
   neither readable nor findable by eye. It wraps on a narrow screen instead. */
.fbm-card__quote {
  color: #4a4436;
  flex: 1 1 100%;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 0.92em;
  line-height: 1.7;
  min-width: 0;
  text-decoration: none;
  white-space: normal;
}

.fbm-card__quote:hover {
  color: #8a5a1a;
}

/* 按颜色筛选. A chip is the colour it filters to, so the row of them reads as the
   four pens rather than as four words. */
.fbm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.fbm-chip {
  border: 1px solid #e3d9c2;
  border-radius: 999px;
  color: #6a6250;
  font-size: 0.82em;
  padding: 3px 12px;
  text-decoration: none;
}

.fbm-chip--c0 {
  background-color: #fdeeb4;
}

.fbm-chip--c1 {
  background-color: #cfead0;
}

.fbm-chip--c2 {
  background-color: #cfe2f3;
}

.fbm-chip--c3 {
  background-color: #f7d6e4;
}

/* Which one is on. A ring rather than a colour change: the colour is the chip's
   own meaning and cannot be spent on saying "selected". */
.fbm-chip--on {
  border-color: #8a5a1a;
  box-shadow: inset 0 0 0 1px #8a5a1a;
  color: #4a4436;
}

/* 搜高亮的文字. Under 我的高亮 rather than beside the page title: it searches one
   of the two lists, and a box at the top would look like it searched both. */
.fbm-find {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.fbm-find__box {
  border: 1px solid #e3d9c2;
  border-radius: 999px;
  color: #4a4638;
  flex: 1 1 200px;
  font-family: inherit;
  font-size: 0.92em;
  max-width: 320px;
  padding: 6px 14px;
}

.fbm-find__box:focus {
  border-color: #c9b98f;
  outline: none;
}

.fbm-find__go {
  background-color: #f6f1e4;
  border: 1px solid #e3d9c2;
  border-radius: 999px;
  color: #6a6250;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92em;
  padding: 6px 16px;
}

.fbm-find__go:hover {
  background-color: #efe7d2;
}

.fbm-find__clear {
  align-self: center;
  color: #8a8270;
  font-size: 0.88em;
}

.fbm-card__mark-drop {
  background-color: transparent;
  border: 0;
  color: #a08c68;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0 4px;
}

/* When it was put down. Smaller and greyer than everything around it: the card
   is about the text, and the time is only there to be glanced at. */
.fbm-card__saved {
  color: #a8a08e;
  font-size: 0.88em;
}

.fbm-card__mark .fbm-card__saved {
  flex: none;
  font-size: 0.72em;
  white-space: nowrap;
}

.fbm-card__meta {
  align-items: baseline;
  color: #8a7f68;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
  gap: 10px;
  margin-top: 8px;
}

.fbm-card__go {
  color: #be7123;
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

.fbm-card__form {
  display: inline;
  margin: 0;
}

.fbm-card__drop {
  background-color: transparent;
  border: 0;
  color: #a08c68;
  cursor: pointer;
  font-size: 1em;
  padding: 0;
}

.fbm-card__drop:hover {
  color: #a0522d;
}

.fbm-empty {
  border: 1px dashed #e0d5b8;
  border-radius: 10px;
  color: #6a6250;
  list-style: none;
  padding: 22px 16px;
  text-align: center;
}

.fbm-empty__lead {
  margin: 0;
}

.fbm-empty__how {
  color: #8a7f68;
  font-size: 0.85em;
  margin: 6px 0 0;
}

/* 我的法本高亮 shows a 🖍 in the colour it was marked in, as a bar down its left
   rather than as a block of colour on a card. */
.fbm-card__quote--c0 {
  border-left: 4px solid #f0d97a;
  padding-left: 8px;
}

.fbm-card__quote--c1 {
  border-left: 4px solid #9ccb9e;
  padding-left: 8px;
}

.fbm-card__quote--c2 {
  border-left: 4px solid #9cc2e0;
  padding-left: 8px;
}

.fbm-card__quote--c3 {
  border-left: 4px solid #e7a8c4;
  padding-left: 8px;
}

/* The two lists on the page: 继续阅读 and 我的高亮🖍. Said once each, quietly -
   the cards under them are what the reader came for. */
.fbm-section {
  border-bottom: 1px solid #efe7d2;
  color: #6a6250;
  font-size: 0.95em;
  font-weight: 600;
  margin: 22px 0 10px;
  padding-bottom: 4px;
}

.fbm-card__mark-drop {
  background-color: transparent;
  border: 0;
  color: #a99e85;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0 4px;
}

.fbm-card__mark-drop:hover {
  color: #a0522d;
}

/* 法本 / 颜色 / 笔记: each row a set of chips, each chip saying how many it
   would show. */
.fbm-facets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.fbm-facets__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fbm-facets__label {
  color: #8a7f68;
  font-size: 0.8em;
  min-width: 2.5em;
}

.fbm-chip small {
  color: #8a7f68;
  margin-left: 2px;
}

.fbm-chip--doc {
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbm-facets__more > summary {
  cursor: pointer;
  list-style: none;
}

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

.fbm-facets__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

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

.fbm-card__count {
  color: #a8a08e;
  flex: none;
  font-size: 0.8em;
}

/* A 🖍 row is a small stack now: the passage, a warning if it needs one, the
   note, and when. */
.fbm-card__mark--hl {
  flex-direction: column;
  gap: 4px;
}

.fbm-card__mark--hl .fbm-card__quote {
  flex: none;
}

.fbm-card__note {
  background-color: #fbf8ef;
  border-radius: 6px;
  color: #4a4436;
  font-size: 0.88em;
  margin-left: 12px;
  padding: 6px 10px;
}

.fbm-card__note > :first-child {
  margin-top: 0;
}

.fbm-card__note > :last-child {
  margin-bottom: 0;
}

.fbm-card__row-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.fbm-card__warn {
  color: #a0522d;
  font-size: 0.78em;
  margin-left: 12px;
}

/* ------------------------------------------------------ 高亮笔记, redrawn

   The search box, then one row of filters; each card a 法本 with a head of its
   own; each 🖍 a block with its colour down the whole of it and its own footer.
   Scoped to `.fbm-cards--hl` and `.fbm-toolbar`, because 继续阅读 wears the same
   card and keeps its own look. */

.fbm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.fbm-toolbar .fbm-find,
.fbm-toolbar .fbm-chips {
  margin: 0;
}

.fbm-toolbar .fbm-find__box {
  max-width: none;
  padding: 8px 16px;
}

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

.fbm-dots {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.fbm-dot {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #6a6250;
  display: inline-flex;
  font-size: 0.84em;
  gap: 5px;
  padding: 3px 10px;
  text-decoration: none;
}

.fbm-dot:hover {
  background-color: #f6f1e4;
}

.fbm-dot--on {
  background-color: #fff;
  border-color: #8a5a1a;
  color: #3c3628;
}

.fbm-dot small,
.fbm-seg__opt small,
.fbm-pick__opt small {
  color: #a8a08e;
}

.fbm-dot__swatch {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  width: 12px;
}

.fbm-dot__swatch--c0 {
  background-color: #f0d97a;
}

.fbm-dot__swatch--c1 {
  background-color: #9ccb9e;
}

.fbm-dot__swatch--c2 {
  background-color: #9cc2e0;
}

.fbm-dot__swatch--c3 {
  background-color: #e7a8c4;
}

.fbm-seg {
  border: 1px solid #e3d9c2;
  border-radius: 999px;
  display: inline-flex;
  overflow: hidden;
}

.fbm-seg__opt {
  color: #6a6250;
  font-size: 0.84em;
  padding: 3px 12px;
  text-decoration: none;
}

.fbm-seg__opt + .fbm-seg__opt {
  border-left: 1px solid #e3d9c2;
}

.fbm-seg__opt:hover {
  background-color: #f6f1e4;
}

.fbm-seg__opt--on,
.fbm-seg__opt--on:hover {
  background-color: #be7123;
  color: #fff;
}

.fbm-seg__opt--on small {
  color: #fbe3c8;
}

.fbm-pick {
  position: relative;
}

.fbm-pick__button {
  border: 1px solid #e3d9c2;
  border-radius: 999px;
  color: #6a6250;
  cursor: pointer;
  display: inline-block;
  font-size: 0.84em;
  list-style: none;
  max-width: 18em;
  overflow: hidden;
  padding: 3px 26px 3px 12px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fbm-pick__button::-webkit-details-marker {
  display: none;
}

.fbm-pick__button::after {
  content: "▾";
  position: absolute;
  right: 10px;
}

.fbm-pick__button--on {
  background-color: #fff;
  border-color: #8a5a1a;
  color: #3c3628;
}

.fbm-pick__panel {
  background-color: #fff;
  border: 1px solid #e3d9c2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(60, 54, 40, 0.16);
  display: flex;
  flex-direction: column;
  left: 0;
  max-height: min(60vh, 420px);
  min-width: min(22em, calc(100vw - 32px));
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 30;
}

.fbm-pick__opt {
  align-items: baseline;
  border-radius: 6px;
  color: #4a4436;
  display: flex;
  font-size: 0.88em;
  gap: 12px;
  justify-content: space-between;
  padding: 6px 10px;
  text-decoration: none;
}

.fbm-pick__opt:hover {
  background-color: #f6f1e4;
}

.fbm-pick__opt--on {
  background-color: #fbf1e2;
  font-weight: 600;
}

.fbm-result {
  color: #6a6250;
  font-size: 0.82em;
  margin: 0;
}

.fbm-result a {
  color: #be7123;
}

.fbm-cards--hl {
  gap: 14px;
}

.fbm-cards--hl .fbm-card {
  background-color: #fffdf7;
  overflow: hidden;
  padding: 0;
}

.fbm-cards--hl .fbm-card__head {
  align-items: baseline;
  background-color: #faf5e8;
  border-bottom: 1px solid #efe6cf;
  justify-content: flex-start;
  padding: 10px 16px;
}

/* Drawn by the script for a signed-out reader: a bare title, no head row. */
.fbm-cards--hl .fbm-card > .fbm-card__title {
  background-color: #faf5e8;
  border-bottom: 1px solid #efe6cf;
  display: block;
  padding: 10px 16px;
}

.fbm-cards--hl .fbm-card__meta:empty {
  display: none;
}

.fbm-card__open {
  color: #be7123;
  flex: none;
  font-size: 0.82em;
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

.fbm-card__open:hover {
  text-decoration: underline;
}

.fbm-cards--hl .fbm-card__marks {
  gap: 0;
  margin: 0;
  padding: 0;
}

.fbm-cards--hl .fbm-card__mark--hl {
  display: block;
  padding: 12px 16px 10px 22px;
}

.fbm-cards--hl .fbm-card__mark--hl + .fbm-card__mark--hl {
  border-top: 1px solid #f1eadb;
}

/* The colour runs down the passage only: it is the 法本's words that were
   painted, and the note under them is the reader's own. */
.fbm-cards--hl .fbm-card__quote {
  color: #3c3628;
  display: block;
  font-size: 1em;
  line-height: 1.85;
  padding-left: 12px;
}

.fbm-cards--hl .fbm-card__quote:hover {
  color: #3c3628;
  text-decoration: underline;
  text-decoration-color: #d9b98a;
  text-underline-offset: 4px;
}

.fbm-cards--hl .fbm-card__warn {
  background-color: #fdf1e6;
  border-radius: 999px;
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 10px;
}

.fbm-card__noted {
  background-color: #f7f2e4;
  border-radius: 8px;
  margin: 8px 0 0;
  padding: 6px 12px 8px;
}

.fbm-card__note-label {
  color: #a08c68;
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.fbm-cards--hl .fbm-card__note {
  background-color: transparent;
  font-size: 0.92em;
  margin: 0;
  padding: 0;
}

.fbm-cards--hl .fbm-card__row-meta {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
}

.fbm-cards--hl .fbm-card__row-meta .fbm-card__saved {
  font-size: 0.78em;
}

.fbm-card__back {
  color: #be7123;
  font-size: 0.8em;
  text-decoration: none;
}

.fbm-card__back:hover {
  text-decoration: underline;
}

.fbm-card__row-drop {
  margin: 0 0 0 auto;
}

.fbm-cards--hl .fbm-card__mark-drop {
  border-radius: 999px;
  font-size: 0.78em;
  padding: 2px 10px;
}

.fbm-cards--hl .fbm-card__mark-drop:hover {
  background-color: #fbeae6;
}

.fbm-cards--hl .fbm-card__more {
  border-top: 1px solid #f1eadb;
  margin: 0;
}

.fbm-cards--hl .fbm-card__more-head {
  display: block;
  font-size: 0.85em;
  list-style: none;
  padding: 9px 16px;
  text-align: center;
}

.fbm-cards--hl .fbm-card__more-head::-webkit-details-marker {
  display: none;
}

.fbm-cards--hl .fbm-card__more-head:hover {
  background-color: #faf5e8;
}

.fbm-cards--hl .fbm-card__more[open] > .fbm-card__more-head {
  border-bottom: 1px solid #f1eadb;
  color: #a8a08e;
}

@media (max-width: 600px) {
  .fbm-cards--hl .fbm-card__head,
  .fbm-cards--hl .fbm-card > .fbm-card__title {
    padding: 9px 12px;
  }

  .fbm-cards--hl .fbm-card__mark--hl {
    padding: 10px 12px 8px 18px;
  }

  .fbm-pick__button {
    max-width: calc(100vw - 48px);
  }
}