/* 我的法本书签🔖 - 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-go {
  background-color: #be7123;
  border-radius: 10px;
  color: #fff;
  font-size: 0.85em;
  padding: 4px 14px;
  text-decoration: none;
  white-space: nowrap;
}

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