/* 阅读设置 ⚙, 相关讲解 📚 in the corner, 相关讨论 抽屉, and the 📎 on a highlight.
 *
 * One file and loaded on every page, because one of the four is on every page:
 * the 📚 has to be able to say that a search finished wherever the reader has
 * got to by then. The rest paint nothing until a reading page draws them.
 *
 * The corner is shared, so it is laid out once here. From the bottom up:
 * 返回顶部 (style.css, 38px at 8px), then ⚙, then 📚. 🖍 is higher still and at
 * the top of the window (faben_read.css .fb-marks-fab) - the order the design
 * note asks for, read down the edge of the screen.
 */

:root {
  --reading-fab-size: 40px;
  --reading-fab-right: 15px;
  /* Clear of 返回顶部 and its own safe-area cushion. */
  --reading-fab-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
}

.fb-settings-fab,
.site-notice-fab {
  align-items: center;
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(78, 13, 13, 0.16);
  color: #6f3717;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1em;
  height: var(--reading-fab-size);
  justify-content: center;
  padding: 0;
  position: fixed;
  right: var(--reading-fab-right);
  width: var(--reading-fab-size);
  z-index: 80;
}

/* Present but quiet: it is a way to turn things off, not something to reach
   for, and the text is what the page is for. */
.fb-settings-fab {
  bottom: var(--reading-fab-bottom);
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.fb-settings-fab:hover,
.fb-settings-fab:focus-visible {
  opacity: 1;
}

.fb-settings-fab:focus-visible,
.site-notice-fab:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 2px;
}

.site-notice-fab {
  bottom: calc(var(--reading-fab-bottom) + var(--reading-fab-size) + 8px);
}

.site-notice-fab[hidden] {
  display: none;
}

/* Nothing running and nothing unread: still the way back to earlier searches,
   drawn as quietly as the ⚙ under it. */
.site-notice-fab--quiet {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.site-notice-fab--quiet:hover,
.site-notice-fab--quiet:focus-visible {
  opacity: 1;
}

/* Something is being searched for: a thin ring going round, and no number -
   there is nothing to count yet. */
.site-notice-fab--busy::after {
  animation: site-notice-spin 1.6s linear infinite;
  border: 2px solid rgba(190, 113, 35, 0.25);
  border-radius: 999px;
  border-top-color: #be7123;
  content: "";
  inset: -4px;
  position: absolute;
}

@keyframes site-notice-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-notice-fab--busy::after {
    animation-duration: 6s;
  }
}

/* How many finished searches the reader has not opened. A number rather than a
   dot: one search is one result, and 「2」 says what a dot would make them press
   to find out. */
.site-notice-fab__n {
  background-color: #be7123;
  border-radius: 999px;
  color: #fff;
  font-size: 0.68em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 16px;
  padding: 2px 4px;
  position: absolute;
  right: -3px;
  top: -3px;
}

.site-notice-fab__n[hidden] {
  display: none;
}

/* --------------------------------------------------------- the two panels */

.fb-settings,
.site-notice {
  background-color: #fdfaf2;
  border: 1px solid #e6dcc0;
  border-radius: 12px;
  bottom: calc(var(--reading-fab-bottom) + var(--reading-fab-size) + 10px);
  box-shadow: 0 10px 30px rgba(40, 30, 15, 0.18);
  max-height: min(70vh, 560px);
  max-width: calc(100vw - 24px);
  overflow-y: auto;
  padding: 10px 14px 14px;
  position: fixed;
  right: var(--reading-fab-right);
  width: 310px;
  z-index: 95;
}

.fb-settings[hidden],
.site-notice[hidden] {
  display: none;
}

.fb-settings__head,
.site-notice__head {
  align-items: center;
  border-bottom: 1px solid #ece3cd;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.fb-settings__title,
.site-notice__title {
  color: #4a4436;
  font-size: 0.95em;
}

.fb-settings__close,
.site-notice__close {
  background-color: transparent;
  border: 0;
  color: #8a7f68;
  cursor: pointer;
  font-size: 1em;
  padding: 2px 6px;
}

.fb-settings__group {
  border: 0;
  margin: 0 0 10px;
  padding: 0;
}

.fb-settings__legend {
  color: #8a7f68;
  font-size: 0.78em;
  padding: 0 0 4px;
}

.fb-settings__row {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 8px;
  padding: 5px 2px;
}

.fb-settings__row--size {
  align-items: center;
  cursor: default;
  justify-content: space-between;
}

.fb-settings__label {
  color: #3f3a2e;
  font-size: 0.88em;
  line-height: 1.35;
}

.fb-settings__note {
  color: #8a7f68;
  display: block;
  font-size: 0.85em;
}

.fb-settings__size {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.fb-settings__step {
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 6px;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
  min-width: 32px;
  padding: 3px 6px;
}

.fb-settings__value {
  color: #4a4436;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: center;
}

/* The 版面 row: three picks, one lesson shape. */
.fb-settings__row--view {
  align-items: flex-start;
  cursor: default;
  flex-direction: column;
  gap: 4px;
}

.fb-settings__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fb-settings__pick {
  align-items: center;
  color: #3f3a2e;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85em;
  gap: 4px;
}

/* One level under 📚 相关讨论, and about what opening it does. */
.fb-settings__row--under {
  padding-left: 18px;
}

/* A row this page has no use for. Grey, and still there: 跟读 on a 法本 page
   governs the next 学习页, and a panel that hid it would say the setting had
   gone away. Only the rows that genuinely cannot do anything - the ones that
   need an account - are disabled as well, which the script does. */
.fb-settings__group.is-idle,
.fb-settings__row.is-idle {
  opacity: 0.45;
}

.fb-settings__local {
  border-top: 1px solid #ece3cd;
  color: #8a7f68;
  font-size: 0.78em;
  margin: 8px 0 0;
  padding-top: 8px;
}

/* ------------------------------------------------------------ 📚 the list */

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

.site-notice__row {
  border-bottom: 1px solid #f1eadb;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 2px;
}

.site-notice__row:last-child {
  border-bottom: 0;
}

.site-notice__quote {
  color: #3f3a2e;
  font-size: 0.86em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-notice__where {
  color: #8a7f68;
  font-size: 0.74em;
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-notice__state {
  align-items: baseline;
  color: #8a7f68;
  display: flex;
  font-size: 0.78em;
  gap: 8px;
  justify-content: space-between;
}

.site-notice__go {
  background-color: transparent;
  border: 0;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  padding: 0;
  text-decoration: underline;
}

.site-notice__empty {
  color: #8a7f68;
  font-size: 0.82em;
  margin: 6px 0;
}

/* 别的课: the line between this text's searches and what is running or unread
   on other texts. */
.site-notice__group {
  border-top: 1px solid #ece5d3;
  color: #8a7f68;
  font-size: 0.74em;
  letter-spacing: 0.04em;
  list-style: none;
  margin: 6px 0 2px;
  padding-top: 6px;
}

/* ----------------------------------------------- 📚 相关讨论, in a drawer */

/* `fb-related-drawer`, not `fb-drawer`: that one is the 课程目录's on the same
   page, and sharing the name once already left a drawer permanently invisible
   under its `visibility: hidden` (see faben_read.css). */
.fb-related-drawer {
  background-color: #fdfaf2;
  border-left: 1px solid #e6dcc0;
  border-top: 1px solid #e6dcc0;
  border-top-left-radius: 10px;
  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: 4rem;
  width: 400px;
  z-index: 90;
}

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

/* On a desk the drawer stood over the right third of the text: 回到原文
   scrolled to a paragraph whose every line ran on under it. The page makes
   room instead, the way it does for the note desk (html.note-is-open). The
   class is reading-related.js's. */
@media screen and (min-width: 701px) {
  html.related-is-open .content {
    padding-right: min(400px, 92vw);
  }
}

/* On a phone it was the whole window: the reader pressed 回到原文 and the
   paragraph scrolled to somewhere behind the drawer. A sheet at the foot
   instead, so the text it is about stays on the screen above it. */
@media screen and (max-width: 700px) {
  .fb-related-drawer {
    border-left: 0;
    border-top-right-radius: 10px;
    height: 62vh;
    max-width: none;
    top: auto;
    width: 100%;
  }
}

.fb-related__head {
  align-items: center;
  border-bottom: 1px solid #ece3cd;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 14px 0;
}

.fb-related__title {
  color: #4a4436;
  font-size: 0.95em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-related__close {
  background-color: transparent;
  border: 0;
  color: #8a7f68;
  cursor: pointer;
  font-size: 1em;
  padding: 2px 6px;
}

/* The quote at the head of the drawer, and the way back to it: 📚 ends the
   selection, so without a visible way back the reader is holding a paragraph
   they can no longer see. Said in words rather than left as a title on a line
   that reads as plain text. */
.fb-related__search {
  display: inline-block;
  margin: 10px 0 2px;
}

.fb-related__jump {
  background: none;
  border: 0;
  color: #6f3717;
  cursor: pointer;
  font: inherit;
  font-size: 0.8em;
  padding: 0;
  text-decoration: underline;
}

.fb-related__back {
  color: #8a6d3b;
  margin-left: 6px;
  white-space: nowrap;
}

.fb-related__quote:hover .fb-related__back,
.fb-related__quote:focus-visible .fb-related__back {
  text-decoration: underline;
}

.fb-related__quote {
  background: none;
  border: 0;
  border-bottom: 1px solid #ece3cd;
  color: #6b6350;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 0.82em;
  line-height: 1.5;
  margin: 0;
  padding: 6px 14px 10px;
  text-align: left;
  width: 100%;
}

.fb-related__tabs {
  border-bottom: 1px solid #ece3cd;
  display: flex;
  gap: 4px;
  padding: 0 10px;
}

.fb-related__tab {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8a7f68;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86em;
  padding: 8px 8px 6px;
}

.fb-related__tab[aria-selected="true"] {
  border-bottom-color: #be7123;
  color: #6f3717;
}

.fb-related__panes {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
}

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

.fb-related__shelf {
  color: #8a7f68;
  font-size: 0.8em;
  margin: 12px 0 4px;
}

.fb-related__shelf:first-child {
  margin-top: 2px;
}

/* The folded shelf: its summary is drawn as a shelf name with a marker. */
.fb-related__loose {
  margin-top: 14px;
}

.fb-related__loose > summary {
  cursor: pointer;
  list-style: none;
}

.fb-related__loose > summary::before {
  content: "▸ ";
}

.fb-related__loose[open] > summary::before {
  content: "▾ ";
}

.fb-related__group {
  color: #8a7f68;
  font-size: 0.8em;
  margin: 12px 0 4px;
}

.fb-related__row {
  border-bottom: 1px solid #f1eadb;
  padding: 7px 0;
}

.fb-related__row:last-child {
  border-bottom: 0;
}

.fb-related__name {
  color: #3f3a2e;
  font-size: 0.86em;
  line-height: 1.4;
}

.fb-related__why {
  color: #8a7f68;
  font-size: 0.78em;
}

.fb-related__text {
  color: #6b6350;
  font-size: 0.82em;
  line-height: 1.55;
  margin: 3px 0 0;
}

.fb-related__acts {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.fb-related__open,
.fb-related__pin {
  background-color: transparent;
  border: 0;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8em;
  padding: 0;
  text-decoration: underline;
}

.fb-related__pin[disabled] {
  color: #9a917c;
  cursor: default;
  text-decoration: none;
}

.fb-related__wait,
.fb-related__empty,
.fb-related__failed,
.fb-related__notice {
  color: #8a7f68;
  font-size: 0.84em;
  line-height: 1.6;
  margin: 8px 0;
}

.fb-related__failed {
  color: #8a4b26;
}

/* Something that costs money was not available - the search still ran, on the
   free path. Said once, quietly, above the results it did produce. */
.fb-related__notice {
  background-color: #fbf3e2;
  border-radius: 6px;
  padding: 6px 8px;
}

.fb-related__again {
  background-color: transparent;
  border: 0;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  padding: 0;
  text-decoration: underline;
}

.fb-related__ask {
  border-top: 1px solid #ece3cd;
  margin: 12px 0 0;
  padding-top: 10px;
}

/* ---------------------------------------------- 📎 what a 🖍 has hung on it */

/* One badge per highlight, at the end of what it paints. The paper's own text
   is what the offsets count into, so this is a sibling of the painted span and
   never inside it. */
.fb-mark__links {
  background-color: #fdf4e3;
  border: 1px solid #e3d3ad;
  border-radius: 999px;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72em;
  line-height: 1.2;
  margin: 0 2px;
  padding: 1px 6px;
  vertical-align: 0.1em;
}

.fb-mark__links:hover {
  border-color: #be7123;
}

.fb-links {
  background-color: #fdfaf2;
  border: 1px solid #e6dcc0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(40, 30, 15, 0.18);
  left: 0;
  /* A width, not only a cap: floated by its left edge, a panel without one
     shrank to whatever was left of the window when the window changed shape
     under it (a phone turned on its side) - a column of one character a line. */
  width: min(380px, 92vw);
  padding: 8px 10px;
  position: fixed;
  top: 0;
  z-index: 95;
}

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

.fb-links__title {
  color: #8a7f68;
  font-size: 0.78em;
  margin: 0 0 4px;
}

.fb-links__list {
  list-style: none;
  margin: 0;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0;
}

.fb-links__row {
  border-bottom: 1px solid #f1eadb;
  padding: 5px 0;
}

.fb-links__row:last-child {
  border-bottom: 0;
}

.fb-links__name {
  color: #3f3a2e;
  font-size: 0.84em;
  line-height: 1.4;
}

.fb-links__quote {
  color: #6b6350;
  font-size: 0.8em;
}

.fb-links__acts {
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

.fb-links__open,
.fb-links__drop,
.fb-links__more,
.fb-links__peek-toggle {
  background-color: transparent;
  border: 0;
  color: #6f3717;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78em;
  padding: 0;
  text-decoration: underline;
}

.fb-links__more {
  display: block;
  margin-top: 6px;
}

/* 展开: the passage, or a discussion's opening posts, unfolded under the
   row in place of its one-line quote. */
.fb-links__peek {
  color: #4a4536;
  font-size: 0.8em;
  line-height: 1.6;
  margin: 4px 0 2px;
}

.fb-links__peek p {
  margin: 0 0 4px;
}

.fb-links__peek b {
  color: #6f3717;
  font-weight: 600;
}

/* The count under a row of 这一篇的高亮, and the same line on 我的高亮笔记. */
.fb-drawer__links,
.fb-mark-links-note {
  color: #8a7f68;
  font-size: 0.78em;
}

@media screen and (max-width: 640px) {
  :root {
    --reading-fab-size: 38px;
    --reading-fab-right: 12px;
  }

  .fb-settings,
  .site-notice {
    width: calc(100vw - 24px);
  }
}

/* 📚 的那一段，抽屉开着的时候留在页面上。
   Painting the words themselves where the browser can (no element is inserted,
   so nothing that measures an offset into a paragraph sees anything new), and
   the paragraph where it cannot. Either way the reader can see where they were
   while they read what the drawer found. */
::highlight(fb-asked) {
  background: #fdf0c8;
  color: inherit;
}

.fb-u--asked {
  background: #fdf0c8;
  border-radius: 2px;
}

/* 💬 N, floating under 🖍 at the paper's right edge: how many discussions quoted
   this 法本. The same 44px circle as the other handles (faben_read.css
   .fb-marks-fab, notes.css .note-fab), so the three read as one set rather than
   as three inventions. Drawn by the template only when the count is not zero. */
.fb-threads-fab {
  align-items: center;
  --fab-edge: 18px;
  background-color: #fffdf6;
  border: 1px solid #d2c6ac;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(78, 13, 13, 0.16);
  color: #6f3717;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.82em;
  gap: 1px;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: calc(var(--fab-edge) + var(--fab-shift, 0px));
  /* Under 🖍, not beside it: one 44px circle and the 10px between them. The pair
     is a column down the paper's right edge, so this takes the same horizontal
     sums the 🖍 handle takes (faben_read.css) - the shift when the page carries
     a notebook, and the centred reading column on a wide screen. */
  top: 122px;
  width: 44px;
  z-index: 80;
}

body:has(.note-fab) .fb-threads-fab {
  --fab-shift: 54px;
}

@media screen and (min-width: 1280px) {
  .fb-threads-fab {
    --fab-edge: calc(max(8px, calc((100vw - var(--read-width, 100%) - 418px) / 2)) + 22px);
  }

  /* The docked notebook drops the 🖍 handle a few pixels; this one follows it,
     or the column is out of true. */
  body:has(.note-panel--read[data-note-docked="1"]) .fb-threads-fab {
    top: calc(70px + 1px + 12px - 2px - 8px + 54px);
  }
}

.fb-threads-fab:hover {
  border-color: #b5651d;
}

.fb-threads-fab__mark {
  font-size: 1.05em;
  line-height: 1;
}

.fb-threads-fab__n {
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (max-width: 720px) {
  .fb-threads-fab {
    height: 38px;
    top: 108px;
    width: 38px;
  }
}