/* 千江月 — the discussion pages.

   Set on the same paper as the 法本, 大藏经 and 藏文 readers: a citation on this
   page is a door into one of them, and someone stepping through should not see
   the sheet change colour under them.

   Three things carry the meaning here and everything else is quiet so that they
   can. A claim's colour says what kind of statement it is - 原文 / 有据陈述 are
   green, 解释 is amber, 比喻 is blue. A citation's mark says what kind of source
   it rests on - 📜 经 📖 论 📝 注疏 🎓 讲记 📰 文章. And a shelf that came back
   empty is printed as empty rather than closed up, because 「原典里没有找到直接
   依据」 is a finding and hiding it is the failure this whole project is built
   around avoiding. */

.qjy-page {
  margin: 0 auto;
  max-width: 820px;
  padding: 0 14px 48px;
  text-align: left;
}

/* --- masthead ------------------------------------------------------------ */

.qjy-head {
  padding: 26px 0 18px;
  text-align: center;
}

.qjy-head__name {
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0;
}

.qjy-head__sub {
  color: #8a7a6a;
  font-size: 0.85em;
  letter-spacing: 0.3em;
  margin: 4px 0 0;
}

.qjy-head__slogan {
  color: var(--read-ink);
  line-height: 1.9;
  margin: 18px 0 0;
}

/* --- lists --------------------------------------------------------------- */

.qjy-section {
  margin: 0 0 34px;
}

.qjy-section__title {
  border-bottom: 1px solid #ddddc8;
  font-size: 1.05em;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 6px;
}

.qjy-empty {
  color: #8a7a6a;
  line-height: 2;
  padding: 30px 0;
  text-align: center;
}

.qjy-row {
  border-bottom: 1px solid #eee9dc;
  display: block;
  padding: 10px 2px;
  text-decoration: none;
}

.qjy-row:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

/* A row with two destinations: read it, or judge it. */
.qjy-row--split {
  align-items: center;
  display: flex;
  gap: 12px;
}

.qjy-row__main {
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.qjy-row__review {
  border: 1px solid #d8cdb8;
  border-radius: 3px;
  color: #8a7a6a;
  flex: none;
  font-size: 0.82em;
  padding: 3px 10px;
  text-decoration: none;
}

.qjy-row__review:hover {
  background-color: #f3ede0;
  color: var(--read-ink);
}

.qjy-row__title {
  color: var(--read-ink);
  display: block;
  font-size: 1.02em;
}

.qjy-row__meta {
  color: #8a7a6a;
  font-size: 0.8em;
  margin-top: 3px;
}

/* --- one thread ---------------------------------------------------------- */

.qjy-thread__question {
  font-size: 1.4em;
  line-height: 1.6;
  margin: 0 0 6px;
}

.qjy-thread__meta {
  color: #8a7a6a;
  font-size: 0.82em;
  margin: 0 0 24px;
}

/* A seat's turn. Not a card any more: five bordered boxes in a row read as
   five forms to fill in, and the border was doing the job the heading should
   do. What separates one seat from the next is a rule and the space above the
   name. */
.qjy-post {
  /* Now also the line under the 循证栏 legend, which stopped drawing its own.
     Tokenised so the two hairlines bounding that band are one grey rather than
     #e7e2d2 sitting a shade off the shell's own rule. */
  border-top: 1px solid var(--rule, #e7e2d2);
  margin: 0;
  padding: 30px 0 22px;
  scroll-margin-top: 20px;
}

.qjy-post--rejected {
  color: #8a7a6a;
  font-size: 0.88em;
  padding: 20px 0;
}

/* The reviewer's view. A post nobody has judged yet and a post waiting for a
   person look different from an approved one, and both look different from the
   surrounding page - so that 「审核视角」 cannot be mistaken for the reader's. */
.qjy-post--draft,
.qjy-post--needs_review {
  background-color: #faf6ea;
  border-left: 3px solid #c9a227;
  padding-left: 14px;
}

.qjy-post--rejected .qjy-claim {
  opacity: 0.55;
}

.qjy-post__status {
  color: #b5651d;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  margin-left: auto;
}

/* Staff only, and quiet even then: it says how the post was made, which is
   never the reason anyone came to the page. */
.qjy-post__tools {
  color: #8a7a6a;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  margin-left: 8px;
}

.qjy-thread__review {
  background-color: #f6f1e4;
  border-left: 3px solid #c9a227;
  color: #6b5c4d;
  font-size: 0.84em;
  margin: 0 0 20px;
  padding: 8px 12px;
}

/* A guardian finding. Not the same thing as a structure problem: that is the
   server refusing a citation, this is a judgement about the sentence. */
.qjy-flag {
  color: #8a5a2b;
  display: block;
  font-size: 0.78em;
  line-height: 1.7;
  margin: 4px 0 0;
}

.qjy-flag--high {
  color: #a33b2b;
}

.qjy-post__who {
  align-items: baseline;
  display: flex;
  /* The role note drops under the name on a narrow screen rather than
     squeezing it: 「经论检索员」 broken across two lines reads as a different
     name, and who is speaking is the first thing a reader needs. */
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 16px;
}

/* Where this turn falls in the discussion. The seat strip and the 循证栏 count
   from the same number, so a reader who jumped in from either lands on a
   heading that says which one they are on. */
.qjy-post__seat {
  color: #8a7a6a;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  width: 100%;
}

.qjy-post__name {
  font-size: 1.18em;
  font-weight: 600;
  white-space: nowrap;
}

/* The emoji in front of a name, a source class or a citation. It is the seat's
   face and the shelf's kind, and at full weight beside 600-weight ink it was
   the loudest thing on a page of hairlines - five of them down the left of a
   thread read as a chat app. Set back rather than removed: it is how a reader
   tells 共读者 from 辨析者 at a glance, and how 讲记 is told from 经.

   `aria-hidden` in the markup, because a screen reader was saying 「莲花」
   before every name and 「毕业帽」 before every book. */
.qjy-mark {
  font-size: 0.88em;
  margin-right: 0.42em;
  opacity: 0.62;
}

.qjy-post__role {
  color: #8a7a6a;
  font-size: 0.78em;
}

/* A sentence's own line breaks, when the writer made any: a long turn set as
   paragraphs rather than one block. The span's text is untouched, so a 🖍's
   offset into it is still the offset the server checks. */
.qjy-u {
  white-space: pre-line;
}

/* --- claims -------------------------------------------------------------- */

/* One sentence, and its left edge saying what it rests on.

   Capped at a reading measure rather than running the width of the column: at
   47 汉字 a line the eye loses the start of the next one, and a hundred of
   these in a row is what made the page a wall. */
.qjy-claim {
  border-left: 2px solid var(--rule, #e4ddcb);
  font-family: var(--serif, "Songti SC", serif);
  font-size: 1.12em;
  line-height: 2;
  margin: 0 0 14px;
  max-width: 40em;
  padding: 0 0 0 14px;
}

.qjy-claim--evidenced {
  border-left-color: #4a6b4f;
}

.qjy-claim--interpretation {
  border-left-color: #a3822f;
}

.qjy-claim--analogy {
  border-left-color: #3f6a8c;
}

/* A claim that said it rested on a source and did not. Shown, not hidden:
   dropping the sentence would hide that the model reached for something that
   was not there. */
.qjy-claim--unsupported {
  border-left-color: #b0512c;
}

.qjy-claim__problem {
  color: #b5651d;
  display: block;
  font-size: 0.78em;
  margin-top: 2px;
}

/* The citation folded away behind one mark at the end of the sentence.

   Provenance is the whole point of this forum, and it was also standing between
   every two sentences a reader wanted to read. `details` keeps both: closed, the
   discussion reads as a discussion; one click, and the quoted words and the
   place they came from are there to check. No script, so it works with
   JavaScript off and prints however the browser prints. */
.qjy-cites {
  display: inline;
}

/* 「📖 2 处原文」 - words, not a glyph: readable at the end of a long turn and
   wide enough for a thumb. */
.qjy-cites__mark {
  border: 1px solid #ded5c2;
  border-radius: 3px;
  color: #6b5c4d;
  cursor: pointer;
  display: inline-block;
  font-family: var(--sans, sans-serif);
  font-size: 0.68em;
  line-height: 1.7;
  list-style: none;
  margin-left: 8px;
  padding: 0 8px;
  user-select: none;
  vertical-align: 0.25em;
  white-space: nowrap;
}

/* Chrome and Safari draw their own triangle on a summary. */
.qjy-cites__mark::-webkit-details-marker {
  display: none;
}

.qjy-cites__mark:hover,
.qjy-cites[open] > .qjy-cites__mark {
  background-color: #f3eee0;
  border-color: #c9bd9c;
  color: #3a352e;
}

.qjy-cites__count {
  font-variant-numeric: tabular-nums;
}

.qjy-cites__body {
  display: block;
  margin-top: 4px;
}

/* Which of the four this sentence is. Out of the reading line and into the
   panel a person opens when they are checking - which is when it matters. */
.qjy-cites__kind {
  border-left: 3px solid #d8d0ba;
  color: #8a7a6a;
  font-size: 0.74em;
  letter-spacing: 0.08em;
  margin: 8px 0 4px 10px;
  padding-left: 7px;
}

.qjy-cites__kind--evidenced {
  border-left-color: #4a6b4f;
}

.qjy-cites__kind--interpretation {
  border-left-color: #a3822f;
}

.qjy-cites__kind--analogy {
  border-left-color: #3f6a8c;
}

.qjy-cites__kind--unsupported {
  border-left-color: #b0512c;
}

/* The quoted words, and under them the one line that is a link. */
.qjy-cite {
  background-color: #fffdf8;
  border: 1px solid #eee9dc;
  border-left: 2px solid #4a6b4f;
  font-size: 0.85em;
  line-height: 1.85;
  margin: 6px 0 6px 10px;
  max-width: 40em;
  padding: 10px 12px;
}

/* A 经 named in a turn, opened in this site's 乾隆大藏经. Ink, not link-blue: it is
   still the speaker's sentence, and the underline alone says it can be opened. */
.qjy-canon {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--seal, #9c3b28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.qjy-canon:hover,
.qjy-canon:focus-visible {
  color: var(--seal, #9c3b28);
}

.qjy-cite__quote {
  color: var(--read-ink);
  margin: 0;
}

.qjy-cite__go {
  align-items: baseline;
  color: #8a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88em;
  gap: 2px 14px;
  justify-content: space-between;
  margin-top: 6px;
  text-decoration: none;
}

.qjy-cite__go:hover .qjy-cite__where {
  color: #3a352e;
}

.qjy-cite__go:hover .qjy-cite__arrow {
  text-decoration: underline;
}

.qjy-cite__where {
  min-width: 0;
}

.qjy-cite__arrow {
  color: var(--seal, #9c3b28);
  white-space: nowrap;
}

/* Which shelf the passage came off, for the shelves that are not this 法脉's
   own. A reader has to be able to tell 汉传大藏经 from what the discussion
   argues out of - inline, beside the 段 number, because it is part of naming
   the source rather than a note about it. */
.qjy-cite__shelf {
  border: 1px solid #ded5c2;
  border-radius: 2px;
  font-size: 0.92em;
  margin-left: 6px;
  padding: 0 4px;
  white-space: nowrap;
}

/* Said quietly. The quote is still what was published and still worth reading;
   this only stops the link from implying the source still reads that way. */
.qjy-cite__moved {
  color: #8a6a3b;
  font-size: 0.82em;
  margin: 3px 0 0;
}

/* A phone has no room for a card indented inside a barred paragraph: the card
   loses its own bar and indent and sits as a sunk block the width of the text. */
@media screen and (max-width: 620px) {
  .qjy-cite {
    background-color: var(--paper-sunk, #f4efe2);
    border: 0;
    margin-left: 0;
  }

  .qjy-cites__kind {
    margin-left: 0;
  }
}

/* --- one retrieval run --------------------------------------------------- */

.qjy-run__facts {
  border: 1px solid #e7e2d2;
  font-size: 0.85em;
  line-height: 1.9;
  margin: 0 0 24px;
  padding: 10px 14px;
}

.qjy-run__facts dt {
  color: #8a7a6a;
  float: left;
  width: 8.5em;
}

.qjy-run__facts dd {
  margin: 0 0 0 8.5em;
  word-break: break-all;
}

.qjy-shelf {
  margin: 0 0 26px;
}

.qjy-shelf__title {
  border-bottom: 1px solid #ddddc8;
  display: flex;
  font-size: 0.95em;
  justify-content: space-between;
  margin: 0 0 10px;
  padding-bottom: 5px;
}

.qjy-shelf__count {
  color: #8a7a6a;
  font-size: 0.85em;
}

.qjy-shelf--short .qjy-shelf__count {
  color: #b5651d;
}

.qjy-passage {
  border-bottom: 1px solid #eee9dc;
  padding: 9px 0;
}

.qjy-passage__head {
  color: #8a7a6a;
  font-size: 0.8em;
  margin-bottom: 3px;
}

.qjy-passage__label {
  color: var(--read-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-right: 6px;
}

.qjy-passage__text {
  line-height: 1.9;
  margin: 0;
}

@media screen and (max-width: 700px) {
  .qjy-run__facts dt {
    float: none;
    width: auto;
  }

  .qjy-run__facts dd {
    margin-left: 0;
  }
}

/* --- the review form ------------------------------------------------------ */

.qjy-review {
  margin: 0 0 40px;
}

.qjy-review__question {
  border: 1px solid #e7e2d2;
  border-radius: 3px;
  margin: 0 0 12px;
  padding: 10px 14px 12px;
}

.qjy-review__question legend {
  font-weight: 600;
  padding: 0 6px;
}

/* Stacked rather than side by side: two radio labels on one line, one meaning
   「可以发」 and one meaning 「打回」, is how a reviewer clicks the wrong one. */
.qjy-review__question label {
  display: block;
  line-height: 2.1;
}

.qjy-review__note {
  color: #8a7a6a;
  font-size: 0.82em;
  line-height: 1.8;
  margin: 8px 0 0;
}

.qjy-review__why {
  display: block;
  margin-top: 8px;
}

.qjy-review__why textarea {
  border: 1px solid #e7e2d2;
  border-radius: 3px;
  display: block;
  font: inherit;
  margin-top: 4px;
  padding: 6px 8px;
  width: 100%;
}

.qjy-review__submit {
  background-color: var(--read-paper);
  border: 1px solid #c9a227;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  padding: 8px 20px;
}

/* 接着自己看 — the reading list at the foot of a thread.

   Deliberately quiet: it is where a reader goes after the discussion, not a
   call to action competing with it. Set apart by a rule above rather than by a
   box, so the page still reads as one column of text. */
.qjy-sources {
  border-top: 1px solid var(--rule, #e7e2d2);
  margin-top: 32px;
  padding-top: 20px;
}

.qjy-sources__title {
  font-size: 1em;
  letter-spacing: 0.08em;
  margin: 0;
}

.qjy-sources__note {
  color: #8a7a6a;
  font-size: 0.8em;
  margin: 4px 0 12px;
}

/* An entry is a title with a line under it saying what kind of thing it is,
   so the space between two entries has to beat the space inside one. It did
   not: `margin-bottom: 8px` between entries against a 讲记 line sitting flush
   under its own title, and five entries read as ten loose lines. The gap is
   the list's now, and big enough to group. */
.qjy-sources__list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qjy-source {
  line-height: 1.7;
}

.qjy-source__title {
  text-decoration: none;
}

.qjy-source__title:hover {
  text-decoration: underline;
}

.qjy-source__where {
  color: var(--ink-3, #8a7a6a);
  display: block;
  font-size: 0.78em;
  margin-top: 1px;
}

/* The workbench's own filters and pager. A working surface, so: plain row of
   links, the current one marked, nothing that looks like a reader's chip. */
.qjy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
}

.qjy-filters .is-on {
  color: var(--buli-red, #9c3b28);
  font-weight: 600;
}

.qjy-pager {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding-top: 14px;
}

/* The workbench's search. Plain, like the rest of this page: it is a tool
   surface, and the only thing that matters is that the box is where the eye
   already is - directly above the filters it composes with. */
.qjy-find {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.qjy-find input[type="search"] {
  border: 1px solid #d8d2c4;
  flex: 1 1 18em;
  font-size: 0.95rem;
  max-width: 26em;
  padding: 6px 10px;
}

.qjy-find button {
  background: transparent;
  border: 1px solid #d8d2c4;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 6px 14px;
}

.qjy-find a {
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ 阅读高亮🖍

   A passage the reader picked out, painted in one of four colours and left lit.
   The 法本 reader does the same thing over its own sheet; what is here is this
   one's tokens, and the drawer's class names, which the shared script writes.
   A unit here is one claim - one sentence a seat said. */

.qjy-u {
  position: relative;
}

/* Light enough that 宋体 on top is still ink on paper. The same four as 大藏经's
   notes, so a reader does not learn colour twice. */
.qjy-hl {
  border-radius: 2px;
  cursor: pointer;
  padding: 1px 0;
}

.qjy-hl--c0 {
  background-color: #fdeeb4;
}

.qjy-hl--c1 {
  background-color: #cfead0;
}

.qjy-hl--c2 {
  background-color: #cfe2f3;
}

.qjy-hl--c3 {
  background-color: #f7d6e4;
}

.qjy-hl:focus-visible {
  outline: 2px solid var(--gilt, #c08a2e);
  outline-offset: 1px;
}

/* Where a link from 我的高亮 landed. It holds, then fades: a tint gone before the
   smooth scroll has settled is a tint nobody saw. */
.qjy-u--flash,
.qjy-flash {
  animation: qjy-flash 4s ease-out;
  border-radius: 3px;
}

@keyframes qjy-flash {
  0%,
  45% {
    background-color: #f7e8ca;
  }

  100% {
    background-color: transparent;
  }
}

/* The bar that offers a highlight over whatever the reader has selected. */
.qjy-sel {
  align-items: center;
  background-color: var(--ink, #2f2a23);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 15, 10, 0.35);
  display: flex;
  gap: 6px;
  left: 0;
  padding: 5px 8px;
  position: fixed;
  top: 0;
  z-index: 40;
}

.qjy-sel[hidden] {
  display: none;
}

.qjy-sel__btn {
  background-color: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--paper, #fbf8f1);
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px 9px;
  white-space: nowrap;
}

.qjy-sel__btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* One 🖍, clicked: the four colours and 移除. */
.qjy-panel {
  align-items: center;
  background-color: var(--ink, #2f2a23);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 15, 10, 0.35);
  display: flex;
  gap: 8px;
  left: 0;
  padding: 6px 9px;
  position: fixed;
  top: 0;
  z-index: 41;
}

.qjy-panel[hidden] {
  display: none;
}

.qjy-panel__colors {
  display: flex;
  gap: 5px;
}

.qjy-panel__color {
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  height: 18px;
  padding: 0;
  width: 18px;
}

.qjy-panel__color[aria-pressed="true"] {
  border-color: #fff;
}

.qjy-panel__color--c0 {
  background-color: #fdeeb4;
}

.qjy-panel__color--c1 {
  background-color: #cfead0;
}

.qjy-panel__color--c2 {
  background-color: #cfe2f3;
}

.qjy-panel__color--c3 {
  background-color: #f7d6e4;
}

.qjy-panel__drop {
  background-color: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--paper, #fbf8f1);
  cursor: pointer;
  font-size: 0.82em;
  padding: 2px 4px 2px 10px;
}

/* The way into the drawer, above the discussion. */
/* In the facts line at the head, beside 5 位发言 and 11 处引文 - so no margin of
   its own: the line it sits on does the spacing. */
.qjy-marks-open {
  background-color: transparent;
  border: 1px solid var(--rule, #e4ddcb);
  border-radius: 12px;
  color: var(--ink-3, #8a8073);
  cursor: pointer;
  font-size: var(--t-xs, 12px);
  padding: 3px 12px;
}

.qjy-marks-open:hover {
  background-color: var(--paper-sunk, #f4efe2);
  color: var(--ink-2, #5d564a);
}

/* The four pens on the selection bar, as on a 法本: the colour is part of
   picking the sentence out. */
.qjy-sel__colors {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  gap: 4px;
  padding-left: 7px;
}

.qjy-sel__color {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  cursor: pointer;
  height: 17px;
  padding: 0;
  width: 17px;
}

.qjy-sel__color:hover {
  border-color: #fff;
}

.qjy-sel__color--c0 {
  background-color: #fdeeb4;
}

.qjy-sel__color--c1 {
  background-color: #cfead0;
}

.qjy-sel__color--c2 {
  background-color: #cfe2f3;
}

.qjy-sel__color--c3 {
  background-color: #f7d6e4;
}

/* The label a screen reader hears on a dot that is otherwise only a colour. This
   shell has no utility classes of its own; the site's .sr-only is in style.css,
   which 千江月 does not load. */
.qjy-sr {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 这一篇的高亮, in a drawer. The class names are the shared script's - see
   static/js/reading-marks.js - over this sheet's own colours. */
.fb-drawer {
  background-color: var(--paper-raised, #fffdf8);
  border-left: 1px solid var(--rule, #e4ddcb);
  bottom: 0;
  box-shadow: -8px 0 24px rgba(40, 30, 15, 0.12);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  position: fixed;
  right: 0;
  top: 0;
  width: 340px;
  z-index: 45;
}

.fb-drawer[hidden] {
  display: none;
}

.fb-drawer__head {
  align-items: center;
  border-bottom: 1px solid var(--rule-soft, #efe9db);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.fb-drawer__title {
  color: var(--ink-2, #5d564a);
  font-size: var(--t-sm, 13px);
}

.fb-drawer__close {
  background-color: transparent;
  border: 0;
  color: var(--ink-3, #8a8073);
  cursor: pointer;
  padding: 2px 6px;
}

.fb-drawer__list {
  flex: 1;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 8px 10px 20px;
}

.fb-drawer__row {
  align-items: flex-start;
  border-bottom: 1px solid var(--rule-soft, #efe9db);
  display: flex;
  gap: 6px;
  padding: 6px 0;
}

.fb-drawer__go {
  background-color: transparent;
  border: 0;
  border-left: 4px solid transparent;
  color: var(--ink, #2f2a23);
  cursor: pointer;
  flex: 1;
  font-family: var(--serif, "Songti SC", serif);
  font-size: var(--t-sm, 13px);
  line-height: 1.7;
  padding: 2px 0 2px 8px;
  text-align: left;
}

.fb-drawer__go--c0 {
  border-left-color: #f0d97a;
}

.fb-drawer__go--c1 {
  border-left-color: #9ccb9e;
}

.fb-drawer__go--c2 {
  border-left-color: #9cc2e0;
}

.fb-drawer__go--c3 {
  border-left-color: #e7a8c4;
}

.fb-drawer__drop {
  background-color: transparent;
  border: 0;
  color: var(--ink-3, #8a8073);
  cursor: pointer;
  font-size: var(--t-sm, 13px);
  padding: 2px 4px;
}

.fb-drawer__drop:hover {
  color: var(--seal, #9c3b28);
}

.fb-drawer__empty {
  color: var(--ink-3, #8a8073);
  font-size: var(--t-sm, 13px);
  padding: 12px 4px;
}

/* 高亮笔记's notebook, as a sheet in the corner. The site's 大藏经 sheet clears a
   fixed reading bar this shell does not have, so it starts near the top here. */
.note-panel--qjy {
  font-family: var(--sans, inherit);
  top: 16px;
}

/* ✎ after a passage the reader wrote about, as on a 法本. */
.qjy-hl--noted::after {
  color: #9a6b2f;
  content: "✎";
  font-size: 0.75em;
  margin-left: 1px;
  vertical-align: super;
}

/* ------------------------------------------------------------ 编辑工作台

   A working surface (thread_list.html), wider than a page of text: the piles
   with their counts across the top, the queue down the left, the inbox and the
   searches down the right. Under 900px the columns stack. */
.wb {
  margin: 0 auto;
  max-width: 1180px;
  padding: 18px 16px 48px;
  text-align: left;
}

.wb-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.wb-head__title {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
}

.wb-head__sub {
  color: #8a7a6a;
  font-size: 0.7em;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin-left: 8px;
}

.wb-head__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.9em;
}

.wb-piles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.wb-pile {
  background: #fbfaf3;
  border: 1px solid #ddddc8;
  border-radius: 8px;
  color: #6b5c4d;
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding: 8px 14px;
  text-decoration: none;
}

.wb-pile b {
  color: var(--read-ink);
  font-size: 1.4em;
  line-height: 1.2;
}

.wb-pile span {
  font-size: 0.78em;
}

.wb-pile:hover {
  background: #f3ede0;
}

.wb-pile.is-on {
  border-color: #6b5b2e;
  box-shadow: inset 0 0 0 1px #6b5b2e;
}

.wb-pile--hot {
  background: #fbf0dc;
  border-color: #c9a227;
}

.wb-pile--hot b {
  color: #8a5a2b;
}

.wb-cols {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .wb-cols {
    grid-template-columns: minmax(0, 3fr) minmax(280px, 1.4fr);
  }
}

.wb-bar {
  align-items: center;
  border-bottom: 1px solid #ddddc8;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.wb-bar__title {
  font-size: 1.05em;
  font-weight: 600;
  margin: 0;
}

.wb-bar__count {
  color: #8a7a6a;
  font-size: 0.85em;
  font-weight: normal;
  margin-left: 8px;
}

.wb-find {
  align-items: center;
  display: flex;
  gap: 6px;
}

.wb-find input[type="search"] {
  border: 1px solid #d8d2c4;
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 5px 10px;
  width: 16em;
}

.wb-find button {
  background: transparent;
  border: 1px solid #d8d2c4;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 5px 12px;
}

.wb-find a {
  font-size: 0.85rem;
}

.wb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-row {
  align-items: center;
  border-bottom: 1px solid #eee9dc;
  display: flex;
  gap: 12px;
  padding: 10px 4px;
}

.wb-row:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.wb-row--waiting {
  border-left: 3px solid #c9a227;
  padding-left: 9px;
}

.wb-row--tight {
  padding: 8px 2px;
}

.wb-row__main {
  flex: 1;
  min-width: 0;
}

.wb-row__q {
  color: var(--read-ink);
  display: block;
  line-height: 1.5;
  text-decoration: none;
}

.wb-row__q:hover {
  text-decoration: underline;
}

.wb-row__meta {
  align-items: center;
  color: #8a7a6a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78em;
  gap: 4px 10px;
  margin-top: 4px;
}

.wb-row__terms {
  color: #a39c8e;
}

.wb-row__acts {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.wb-btn {
  border: 1px solid #d8cdb8;
  border-radius: 4px;
  color: #8a7a6a;
  font-size: 0.82em;
  padding: 3px 10px;
  text-decoration: none;
}

.wb-btn:hover {
  background-color: #f3ede0;
  color: var(--read-ink);
}

.wb-btn--review {
  border-color: #6b5b2e;
  color: #6b5b2e;
}

.wb-chip {
  background: #efe9d3;
  border-radius: 10px;
  color: #6b5b2e;
  padding: 0 8px;
  white-space: nowrap;
}

.wb-chip--published {
  background: #dfe9d2;
  color: #375224;
}

.wb-chip--review,
.wb-chip--req-new {
  background: #fbf0dc;
  color: #8a5a2b;
}

.wb-chip--draft,
.wb-chip--req-selected,
.wb-chip--req-working {
  background: #e9e4f2;
  color: #4d3d7a;
}

.wb-chip--archived,
.wb-chip--req-declined {
  background: #e6e4dc;
  color: #6f6c62;
}

.wb-chip--req-answered {
  background: #dfe9d2;
  color: #375224;
}

.wb-chip--hot {
  background: #f3dfcf;
  color: #7a4a1e;
}

/* 有启发 - the readers' word, so it wears the vote button's ✦ and none of the
   pipeline's colours. */
.wb-chip--inspired {
  background: #e3ecf0;
  color: #2f5566;
}

.wb-pager {
  color: #8a7a6a;
  display: flex;
  font-size: 0.85em;
  justify-content: space-between;
  padding: 8px 0;
}

.wb-empty {
  color: #8a7a6a;
  line-height: 2;
  padding: 24px 0;
  text-align: center;
}

.wb-box {
  background: #fbfaf3;
  border: 1px solid #e3e0cf;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 12px 14px 6px;
}

.wb-box__title {
  align-items: center;
  display: flex;
  font-size: 1em;
  font-weight: 600;
  gap: 8px;
  margin: 0 0 6px;
}

.wb-box .wb-row:last-child {
  border-bottom: 0;
}