/* 我的书签🔖 on 千江月 - one card per discussion, at the sentence the reader
   stopped on.

   Its own prefix, like 法本's `fbm-` and 大藏经's `dz-`: a selector shared
   between two list pages is one that gets renamed for one of them and breaks the
   other. The colours are the forum shell's tokens, which is the difference -
   this page is read inside 千江月, not inside 不离. */

.qjb-page {
  margin: 0 auto;
  max-width: 860px;
  padding: 8px 0 40px;
}

.qjb-head {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
  padding-bottom: 10px;
}

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

.qjb-head__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}

.qjb-head__meta {
  color: var(--ink-2);
  font-size: var(--t-sm);
  margin: 6px 0 0;
}

.qjb-head__sep {
  color: var(--rule);
  margin: 0 6px;
}

.qjb-head__local {
  color: var(--ink-3);
}

/* 登录 / nickname · 注销, on this page only. Sits on the meta line rather than
   beside the title: it is a footnote to 「登录后会跟着你走」, not a second heading. */
.qjb-head__in {
  margin-left: 8px;
  white-space: nowrap;
}

.qjb-head__who {
  color: var(--ink-2);
}

.qjb-head__out {
  display: inline;
  margin: 0 0 0 8px;
}

.qjb-head__out button {
  background-color: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.qjb-head__out button:hover {
  color: var(--seal);
}

/* 搜高亮的文字, on the meta line's own scale: a box, not a banner. */
.qjb-find {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.qjb-find__box {
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  flex: 1 1 200px;
  font-family: inherit;
  font-size: var(--t-sm);
  max-width: 320px;
  padding: 6px 14px;
}

.qjb-find__box:focus {
  border-color: var(--gilt);
  outline: none;
}

.qjb-find__go {
  background-color: var(--gilt-wash);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-sm);
  padding: 6px 16px;
}

.qjb-find__go:hover {
  background-color: var(--gilt-wash-deep);
}

.qjb-find__clear {
  align-self: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
}

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

.qjb-card {
  background-color: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 16px;
}

.qjb-card__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
}

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

/* The sentence the newest 书签 is on, cut where the reader was pointing. One
   line: the card is the way back, not a second copy of the discussion. */
.qjb-card__spot {
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.8;
  margin: 6px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qjb-card__spot--top {
  color: var(--ink-3);
}

/* The trail behind the newest, folded away: what the reader is looking for here
   is the discussion, not the list of times they left it. */
.qjb-card__more {
  margin-top: 8px;
}

.qjb-card__more-head {
  color: var(--ink-3);
  cursor: pointer;
  font-size: var(--t-xs);
}

.qjb-card__marks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.qjb-card__mark {
  align-items: baseline;
  border-top: 1px solid var(--rule-soft);
  --hl-accent: var(--seal);
  display: flex;
  /* 一行一个高亮: nothing sits beside the passage, so it has the row to itself;
     the note, its editor and 回到讨论 each take a line of their own under it. */
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 5px 0;
}

.qjb-card__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
}

.qjb-card__saved {
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.qjb-card__go {
  color: var(--seal);
  font-size: var(--t-sm);
  margin-left: auto;
  text-decoration: none;
}

.qjb-card__form {
  margin: 0;
}

.qjb-card__drop {
  background-color: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: var(--t-xs);
  padding: 0;
}

.qjb-card__drop:hover {
  color: var(--seal);
}

.qjb-empty {
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
}

.qjb-empty__lead {
  color: var(--ink-2);
  font-family: var(--serif);
  margin: 0;
}

.qjb-empty__how {
  color: var(--ink-3);
  font-size: var(--t-sm);
  margin: 6px 0 0;
}

.qjb-pages {
  align-items: baseline;
  color: var(--ink-3);
  display: flex;
  font-size: var(--t-sm);
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
}

/* A 🖍 on a card, in the colour it was marked in: a bar down its left rather than
   a block of colour, which on a card would read as a warning. */
/* 栏目 · 深浅 · 发布于 · N 处高亮. The chips are the forum's own - qjy-forum.css
   styles .tally and .depth - so this only has to space them. */
.qjb-card__facts {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}

/* The passage the reader painted, in full and clickable - it goes back to the
   sentence in the discussion. Nothing is cut and nothing is folded: this page
   is where a reader reads back what they marked and searches it, and a passage
   cut at the edge of the card is neither. It wraps on a narrow screen. */
.qjb-card__quote {
  color: var(--ink);
  flex: 1 1 100%;
  font-family: var(--serif);
  font-size: 0.92em;
  line-height: 1.7;
  min-width: 0;
  text-decoration: none;
  white-space: normal;
}

.qjb-card__quote:hover {
  color: var(--seal);
}

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

.qjb-chip {
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  padding: 3px 12px;
  text-decoration: none;
}

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

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

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

.qjb-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". */
.qjb-chip--on {
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1px var(--seal);
  color: var(--ink);
}

.qjb-card__quote--c0 {
  border-left: 4px solid #f0d97a;
  padding-left: 8px;
}

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

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

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

.qjb-card__noted {
  flex: 1 1 100%;
}

.qjb-card__back {
  color: var(--seal);
  flex: 1 1 100%;
  font-size: 0.78em;
  margin-left: 12px;
  text-decoration: none;
}

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

/* What the reader wrote on the passage, under it and quieter than it. */
.qjb-card__note {
  color: var(--ink-soft, #5a534a);
  flex: 1 1 100%;
  font-size: 0.85em;
  line-height: 1.7;
  margin: 2px 0 0 12px;
}

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

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