/* Shared by the main site and the separate 千江月 shell. Opaque, muted tints
   keep overlapping marks from accumulating colour over the reading paper.
   Keep saved colour IDs unchanged: this only changes how they are painted. */
:root {
  --highlight-yellow: #eee4c4;
  --highlight-green: #e3eadb;
  --highlight-blue: #e1e8ec;
  --highlight-pink: #efe2e4;
  --highlight-yellow-edge: #b7a572;
  --highlight-green-edge: #a0b08f;
  --highlight-blue-edge: #94a9b3;
  --highlight-pink-edge: #b79b9f;
  /* The same four as a line under the words (划线, 波浪线): a 2px line has to
     carry the colour a whole tint did, so these are a step darker than -edge. */
  --highlight-yellow-line: #b08a2c;
  --highlight-green-line: #6d8f58;
  --highlight-blue-line: #5b84a0;
  --highlight-pink-line: #b06a78;
  --highlight-search: #eee2b9;
  --highlight-locate: #e8ddbd;
  --highlight-selection: #d5e0dc;
  --highlight-selection-ink: #29332e;
}

/* A live selection is distinct from a saved annotation. Explicit foreground
   also keeps selected links and imported coloured text readable. */
::-moz-selection {
  background-color: var(--highlight-selection);
  color: var(--highlight-selection-ink);
}

::selection {
  background-color: var(--highlight-selection);
  color: var(--highlight-selection-ink);
}

/* 底色 / 划线 / 波浪线 - bsa_utils.reading_marks.STYLE_CHOICES. Each button is a
   「文」 drawn the way it would draw the reader's words, which says more than
   three names would. The same buttons on every reader's selection bar, panel
   and notebook (shared_components/_hl_pens.html), so they are defined once. */
.hl-pens {
  display: inline-flex;
  gap: 3px;
}

.hl-pen {
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #4a4436;
  cursor: pointer;
  display: inline-flex;
  font-family: "Songti SC", "SimSun", "宋体", serif;
  font-size: 15px;
  height: 26px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 26px;
}

.hl-pen:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.hl-pen[aria-pressed="true"] {
  border-color: currentColor;
}

.hl-pen:focus-visible {
  outline: 2px solid #be7123;
  outline-offset: 1px;
}

/* On the dark bars and panels over the text. */
.fb-sel .hl-pen,
.fb-panel .hl-pen,
.qjy-sel .hl-pen,
.qjy-panel .hl-pen,
.dz-sel .hl-pen,
.dz-panel .hl-pen {
  color: #f5efe2;
}

.fb-sel .hl-pen:hover,
.fb-panel .hl-pen:hover,
.qjy-sel .hl-pen:hover,
.qjy-panel .hl-pen:hover,
.dz-sel .hl-pen:hover,
.dz-panel .hl-pen:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* The one on the selection bar steps through the three; a hairline round it
   says it is a control and not a fifth colour. */
.hl-pen--turn {
  border-color: rgba(255, 255, 255, 0.35);
  height: 22px;
  margin-left: 3px;
  width: 22px;
}

.hl-pen__glyph {
  padding: 0 1px 2px;
}

.hl-pen__glyph--s0 {
  background-color: var(--highlight-yellow);
  border-radius: 2px;
  color: #2f2a20;
}

.hl-pen__glyph--s1,
.hl-pen__glyph--s2 {
  text-decoration-color: var(--highlight-yellow-line);
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

.hl-pen__glyph--s1 {
  text-decoration-thickness: 2px;
}

.hl-pen__glyph--s2 {
  text-decoration-style: wavy;
  text-decoration-thickness: 1.5px;
}

/* A mark's words quoted somewhere else - a drawer row, a card on 我的高亮 - drawn
   with the reader's pen too, so a 波浪线 passage is still one in the list. The
   tint stays the rule beside the quote that each list already draws. */
.hl-quote--c0 {
  --hl-quote-line: var(--highlight-yellow-line);
}

.hl-quote--c1 {
  --hl-quote-line: var(--highlight-green-line);
}

.hl-quote--c2 {
  --hl-quote-line: var(--highlight-blue-line);
}

.hl-quote--c3 {
  --hl-quote-line: var(--highlight-pink-line);
}

.hl-quote--s1,
.hl-quote--s2 {
  text-decoration-color: var(--hl-quote-line, var(--highlight-yellow-line));
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.3em;
}

.hl-quote--s1 {
  text-decoration-thickness: 1.5px;
}

.hl-quote--s2 {
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}