/* 千江月 — 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 {
  border-top: 1px solid #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;
}

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

/* --- 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: 3px solid #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;
}

.qjy-cites__mark {
  border-radius: 2px;
  cursor: pointer;
  display: inline;
  font-size: 0.8em;
  list-style: none;
  margin-left: 4px;
  opacity: 0.5;
  padding: 0 3px;
  user-select: none;
  vertical-align: 0.15em;
}

/* 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 {
  opacity: 1;
}

.qjy-cites__count {
  font-size: 0.85em;
  margin-left: 1px;
}

.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 {
  color: #8a7a6a;
  font-size: 0.74em;
  letter-spacing: 0.08em;
  margin: 0 0 4px 10px;
}

.qjy-cite {
  background-color: #fffdf8;
  border: 1px solid #eee9dc;
  border-left: 2px solid #4a6b4f;
  display: block;
  font-size: 0.85em;
  line-height: 1.85;
  margin: 6px 0 6px 10px;
  max-width: 40em;
  padding: 10px 12px;
  text-decoration: none;
}

.qjy-cite:hover {
  border-color: #d8d0ba;
}

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

.qjy-cite__where {
  color: #8a7a6a;
  display: block;
  font-size: 0.88em;
  margin-top: 4px;
}

/* 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;
  display: block;
  font-size: 0.82em;
  margin-top: 3px;
}

/* --- 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 #e7e2d2;
  margin-top: 32px;
  padding-top: 16px;
}

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

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

.qjy-source {
  line-height: 1.7;
  margin-bottom: 8px;
}

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

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

.qjy-source__where {
  color: #8a7a6a;
  display: block;
  font-size: 0.78em;
}

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