/* ---------------------------------------------------------------------------
   Destiny 2 Boss Book -- theme.

   The palette is ported verbatim from the life-tracker app: a near-black
   ground rising through a purple-tinted stack of surfaces, with a single
   lifted lavender as the one bright thing on screen.

   Honkit ships the 2016-era GitBook theme, which is light by default and
   assumes a white page. So this file does two jobs: it recolours everything,
   and it undoes layout decisions from that theme that no longer make sense on
   a dark ground (hairline borders that vanish, a summary that reads as a
   separate document, blockquote bars that fight the surface stack).

   The fontsettings plugin is switched off in book.json ("-fontsettings").
   It offered the reader a white/sepia/night switch, which this book does not
   want -- it has one look. It also shipped
   `.book.color-theme-2 .book-summary ul.summary li a`, which collided with
   the sidebar rules here and made the summary colours depend on load order.
   Turning it off removes the switcher, its CSS and its JS in one go.

   The `.color-theme-*` selectors kept below are harmless belt-and-braces: if
   the plugin is ever re-enabled, the sidebar still looks right.
--------------------------------------------------------------------------- */

/* Per-activity badge and detail text for the sidebar cards. Generated from
   tools/data.mjs by `npm run generate`. */
@import url('activities.css');

:root {
  --color-ground: #070609;
  --color-surface: #110f15;
  --color-surface-2: #1b1821;
  --color-surface-3: #25212c;
  --color-line: #322b3b;
  --color-line-strong: #413a4b;

  --color-ink: #edeaf0;
  --color-ink-muted: #a8a2ae;
  --color-ink-dim: #787280;

  --color-accent: #c4bdcb;
  --color-accent-dim: #9387a1;

  --color-good: #8fb8a0;
  --color-warn: #c7a480;
  --color-danger: #d48f92;

  --radius-card: 1rem;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}

/* --- Ground ---------------------------------------------------------------
   Every one of these carries a background in the default theme, so all of
   them have to be reset or the white shows through between panels. */

/* Tells the browser this is a dark document. Without it the OS paints
   scrollbars, the search field and every other native control in light mode,
   which is where the stray white edges come from. */
html {
  color-scheme: dark;
}

html,
body,
.book,
.book.font-family-0,
.book.font-family-1,
.book-body,
.book-body .body-inner,
.book .book-body .page-wrapper .page-inner section.normal {
  background: var(--color-ground);
  color: var(--color-ink);
}

/* --- Scrollbars -----------------------------------------------------------
   The sidebar and the page body both scroll. color-scheme above already makes
   them dark; these make them quiet as well, so a 53-entry sidebar does not
   have a bright bar running down it. */

.book-summary,
.book-body .body-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
}

.book-summary::-webkit-scrollbar,
.book-body .body-inner::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.book-summary::-webkit-scrollbar-track,
.book-body .body-inner::-webkit-scrollbar-track {
  background: transparent;
}

.book-summary::-webkit-scrollbar-thumb,
.book-body .body-inner::-webkit-scrollbar-thumb {
  background: var(--color-line-strong);
  border-radius: 6px;
  /* A transparent border inset from the track keeps the thumb from touching
     the sidebar edge. */
  border: 2px solid transparent;
  background-clip: content-box;
}

.book-summary::-webkit-scrollbar-thumb:hover,
.book-body .body-inner::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-dim);
  background-clip: content-box;
}

body,
.book {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The reader's white/sepia/night choice. Pinned, so the book looks the same
   whichever is selected. */
.book.color-theme-1 .book-body,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal,
.book.color-theme-2 .book-body,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
  background: var(--color-ground);
  color: var(--color-ink);
}

.book.color-theme-1 .book-summary,
.book.color-theme-2 .book-summary {
  background: var(--color-surface);
  color: var(--color-ink-muted);
}

/* --- Sidebar --------------------------------------------------------------
   One step up from the ground, with a real edge. The default theme separates
   it with a hairline that is invisible at these lightness levels. */

.book .book-summary {
  background: var(--color-surface);
  border-right: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}

/* The summary is three levels deep -- section, activity, boss -- and the
   default theme renders all three at nearly the same weight, which turns 21
   activities and 53 bosses into one undifferentiated column. Each level gets
   its own treatment below so the hierarchy is readable at a glance. */

.book .book-summary ul.summary {
  padding-bottom: 40px;
}

.book .book-summary ul.summary li a,
.book .book-summary ul.summary li span {
  border-bottom: none;
  transition: color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Every colour rule below is repeated for `.book`, `.book.color-theme-1` and
   `.book.color-theme-2`. That is not redundancy: the fontsettings plugin ships
   `.book.color-theme-2 .book-summary ul.summary li a`, which ties a plain
   `.book ... > li.chapter > a` on specificity and then wins or loses on load
   order. Adding the theme class makes these rules strictly more specific, so
   the sidebar looks the same whichever theme the reader picks. */

/* Level 1: section headers (Features / Raids / Dungeons / The Pantheon).
   A rule above each one does the separating, so the groups read as blocks. */
.book .book-summary .part-header,
.book.color-theme-1 .book-summary .part-header,
.book.color-theme-2 .book-summary .part-header {
  color: var(--color-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 10px;
  font-weight: 700;
  padding: 16px 18px 10px;
  margin-top: 26px;
  /* Stronger than the per-activity separator below, so a section break
     outranks the divider between two activities inside it. */
  border-top: 1px solid var(--color-line-strong);
  /* Sits on the sidebar itself, outside the activity cards. */
  background: transparent;
  margin-left: 12px;
  margin-right: 12px;
  padding-left: 4px;

  /* It is a <summary>, so it is the click target for its section. */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

/* Both halves of hiding the native disclosure triangle: the standard property
   and the WebKit pseudo-element. */
.book .book-summary .part-header::-webkit-details-marker {
  display: none;
}

.book .book-summary .part-header:hover {
  color: var(--color-ink);
}

/* The chevron: down when the section is open, right when it is closed. */
.book .book-summary .part-header::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.15s ease;
}

.book .book-summary .part-details:not([open]) > .part-header::after {
  transform: rotate(-45deg) translate(-1px, 1px);
}

.book .book-summary ul.summary > li.part {
  list-style: none;
}

.book .book-summary .part-articles {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each activity is a card rather than a run of list rows, so where one raid
   ends and the next begins is unmissable.

   Applied to every top-level chapter, then undone for the two that are not
   activities. SUMMARY.md is generated, so the positions are fixed: 1 is the
   book title and 3 is the Features tab. */
.book .book-summary .part-articles > li.chapter {
  margin: 0 12px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.book .book-summary .part-articles > li.chapter:hover {
  border-color: var(--color-line-strong);
}

/* The card holding the page you are on. */
.book .book-summary .part-articles > li.chapter:has(li.active),
.book .book-summary .part-articles > li.chapter.active {
  border-color: var(--color-accent-dim);
  background: var(--color-surface-3);
}

/* The book title sits in the one part that has no heading, so it is the only
   chapter that is still a direct child of ul.summary. That makes it easy to
   exempt from the card treatment. */
.book .book-summary ul.summary > li.chapter {
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Level 2: the activity card.
   Each activity is a self-contained pill holding a badge, its name, a line of
   detail and its bosses. The badge and detail text come from
   styles/activities.css, which tools/generate.mjs writes from data.mjs. */
.book .book-summary .part-articles > li.chapter > a,
.book.color-theme-1 .book-summary .part-articles > li.chapter > a,
.book.color-theme-2 .book-summary .part-articles > li.chapter > a {
  position: relative;
  color: var(--color-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Left padding clears the badge; bottom clears the detail line. */
  padding: 14px 14px 5px 58px;
  /* The theme truncates summary links to one line. The card is two. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* The activity's own key art, behind the card header.
   Destinypedia's activity images are wide 16:9 cinematics, so they are used as
   a banner rather than squeezed into a 34px icon, where they would be
   unreadable. A scrim keeps the text legible and lets each raid's colour
   through on the right: King's Fall reads orange, Last Wish teal. */
.book .book-summary .part-articles > li.chapter[data-level] > a {
  background-image: linear-gradient(
      90deg,
      rgba(var(--scrim), 0.97) 0%,
      rgba(var(--scrim), 0.9) 45%,
      rgba(var(--scrim), 0.55) 100%
    ),
    var(--logo, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* The scrim matches the card underneath it, so the two do not band where the
   gradient is at its most opaque. */
.book .book-summary .part-articles > li.chapter {
  --scrim: 27, 24, 33; /* --color-surface-2 */
}

.book .book-summary .part-articles > li.chapter:has(li.active),
.book .book-summary .part-articles > li.chapter.active {
  --scrim: 37, 33, 44; /* --color-surface-3 */
}

/* The badge: the activity's final boss, framed like an avatar.
   Boss portraits are tall character shots, so a square crop biased towards the
   top lands on the head. That gives every card a face rather than two or three
   letters floating in an empty tile. --icon is set per activity in the
   generated activities.css; the abbreviation survives as the alt-text tile
   fetch-images.mjs writes when there is no portrait. */
.book .book-summary .part-articles > li.chapter[data-level] > a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 34px;
  height: 34px;
  background-color: var(--color-surface-3);
  background-image: var(--icon, none);
  background-size: cover;
  background-position: center 22%;
  border: 1px solid var(--color-line-strong);
  border-radius: 8px;
  box-sizing: border-box;
}

.book .book-summary .part-articles > li.chapter:hover > a::before {
  border-color: var(--color-accent-dim);
}

/* The detail line: where the activity is, and how many bosses it holds. */
.book .book-summary .part-articles > li.chapter[data-level] > a::after {
  content: var(--detail, "");
  display: block;
  margin-top: 2px;
  color: var(--color-ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Colour only. `background: transparent` here would be the shorthand, which
   resets background-image and made the key art vanish on hover. */
.book .book-summary .part-articles > li.chapter > a:hover,
.book.color-theme-1 .book-summary .part-articles > li.chapter > a:hover,
.book.color-theme-2 .book-summary .part-articles > li.chapter > a:hover {
  color: var(--color-accent);
}

.book .book-summary .part-articles > li.chapter > a:hover::before {
  border-color: var(--color-accent-dim);
  color: var(--color-accent);
}

/* Level 3: the bosses, inside the card. A rule under the card header sets
   them off, and they sit flush with the name above rather than on a rail --
   the card edge already does the containing. */
.book .book-summary .part-articles > li.chapter > ul {
  margin: 8px 0 0;
  padding: 4px 0 6px;
  border-top: 1px solid var(--color-line);
}

.book .book-summary .part-articles > li.chapter > ul li a,
.book.color-theme-1 .book-summary .part-articles > li.chapter > ul li a,
.book.color-theme-2 .book-summary .part-articles > li.chapter > ul li a {
  color: var(--color-ink-muted);
  font-size: 12.5px;
  font-weight: 400;
  padding: 6px 14px 6px 58px;
  line-height: 1.35;
  white-space: normal;
}

.book .book-summary .part-articles > li.chapter > ul li a:hover,
.book.color-theme-1 .book-summary .part-articles > li.chapter > ul li a:hover,
.book.color-theme-2 .book-summary .part-articles > li.chapter > ul li a:hover {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

/* The current page. The accent bar sits exactly on the guide rail, so the
   active boss reads as a marker on the list rather than a separate block. */
.book .book-summary .part-articles > li.chapter > ul li.active > a,
.book.color-theme-1 .book-summary .part-articles > li.chapter > ul li.active > a,
.book.color-theme-2 .book-summary .part-articles > li.chapter > ul li.active > a {
  color: var(--color-ink);
  background: var(--color-surface-2);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* An active activity index page, which has no rail to sit on. */
.book .book-summary .part-articles > li.chapter.active > a,
.book.color-theme-1 .book-summary .part-articles > li.chapter.active > a,
.book.color-theme-2 .book-summary .part-articles > li.chapter.active > a {
  color: var(--color-accent);
}

/* The book title, pinned above the sections.
   Scoped to a direct child of ul.summary on purpose. The title lives in the
   one part that has no heading, so it is the only chapter outside a
   .part-articles wrapper. Written as `.part-articles > li.chapter:first-child`
   this matched the first card of every section instead, giving those cards the
   title's padding and tucking their names under the badge. */
.book .book-summary ul.summary > li.chapter:first-child > a {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  padding: 18px 18px 14px;
}

/* "Features and What They Do" sits above every activity list. It gets no top
   rule (nothing above it to separate from) and its one link is styled as a
   standalone tab rather than a list item, so it reads as a destination instead
   of the first entry in a long column.

   Addressed by position, not class: `li.header:first-of-type` would not work,
   because :first-of-type counts li elements and the first li is the book
   title. SUMMARY.md is generated, so these indices are fixed -- item 1 is the
   title, 2 is this header, 3 is its link. */
.book .book-summary .part-details[data-part^="Features"] > .part-header {
  margin-top: 4px;
  border-top: none;
  padding-top: 4px;
}

/* The Features entry is a card like the rest, but it has no artwork, no badge
   and no boss count, so those pseudo-elements are switched off and the left
   padding that cleared the badge is taken back.

   Scoped through .part-articles to outrank the badge rule, which is
   `.part-articles > li.chapter[data-level] > a::before`. Written any shorter
   this loses on specificity and an empty badge box sits over the label,
   which is what clipped "Features" down to "ures". */
.book .book-summary .part-articles > li.chapter[data-level="2.1"] > a::before,
.book .book-summary .part-articles > li.chapter[data-level="2.1"] > a::after {
  content: none;
  display: none;
}

.book .book-summary .part-articles > li.chapter[data-level="2.1"] > a {
  background-image: none;
}

.book .book-summary .part-articles > li.chapter[data-level="2.1"] > a,
.book.color-theme-1 .book-summary .part-articles > li.chapter[data-level="2.1"] > a,
.book.color-theme-2 .book-summary .part-articles > li.chapter[data-level="2.1"] > a {
  margin: 0;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.book .book-summary .part-articles > li.chapter[data-level="2.1"] > a:hover,
.book.color-theme-1 .book-summary .part-articles > li.chapter[data-level="2.1"] > a:hover,
.book.color-theme-2 .book-summary .part-articles > li.chapter[data-level="2.1"] > a:hover {
  color: var(--color-accent);
  background-color: transparent;
}

.book .book-summary ul.summary li.divider {
  background: var(--color-line);
  margin: 0;
}

/* --- Search ---------------------------------------------------------------
   The field is a bare <input> inside #book-search-input, not `.book-search
   input` as the class names suggest. Targeting the wrong one is why it stayed
   a white box. */

.book .book-summary #book-search-input {
  padding: 12px 14px;
  margin: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.book .book-summary #book-search-input input,
.book .book-summary #book-search-input input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  padding: 8px 11px;
  font-size: 13px;
  font-family: var(--font-sans);
  box-shadow: none;
  outline: none;
}

.book .book-summary #book-search-input input:focus {
  border-color: var(--color-accent-dim);
  background: var(--color-surface-3);
}

.book .book-summary #book-search-input input::placeholder {
  color: var(--color-ink-dim);
}

/* Chrome draws its own clear-field cross in the OS colour. */
.book .book-summary #book-search-input input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.4);
}

/* --- Type ----------------------------------------------------------------- */

.markdown-section {
  color: var(--color-ink);
  max-width: 860px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom: none;
}

.markdown-section h1 {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* The section rules on a boss page are structural -- they separate empty
   areas you are going to fill in, so they need to be visible. */
.markdown-section h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.markdown-section h1 + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 2rem;
}

.markdown-section p,
.markdown-section li {
  color: var(--color-ink);
}

/* Links.
   The default theme sets its blue at
   `.book .book-body .page-wrapper .page-inner section.normal a`, which beats a
   plain `.markdown-section a` on specificity. These selectors match its weight
   so the accent wins, including under the reader's white/sepia/night choice. */
.markdown-section a,
.book .book-body .page-wrapper .page-inner section.normal a,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal a,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-strong);
}

.markdown-section a:hover,
.book .book-body .page-wrapper .page-inner section.normal a:hover,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal a:hover,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

/* Table links are already in a bordered row; an underline on each one turns a
   boss list into a stack of rules. */
.markdown-section table a {
  border-bottom: none;
}

.markdown-section table a:hover {
  border-bottom: 1px solid var(--color-accent);
}

.markdown-section hr {
  border: none;
  border-top: 1px solid var(--color-line);
}

.markdown-section strong {
  color: var(--color-ink);
}

/* --- Boss portraits -------------------------------------------------------
   Portraits are tall infobox crops of wildly differing sizes, so they are
   capped and centred rather than left to run the width of the column. */

.markdown-section img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  margin: 0 auto 2rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* The activity's opening shot, at the top of a raid or dungeon page.
   Full width and letterboxed rather than height-capped and centred: this art
   is wide cinematic key art, where a boss portrait is a tall character shot.
   object-fit keeps the crop centred instead of squashing the image. */
.markdown-section img.activity-hero {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center;
  margin: 0 0 2rem;
}

@media (max-width: 600px) {
  .markdown-section img.activity-hero {
    max-height: 160px;
  }
}

/* --- Tables ---------------------------------------------------------------
   Every boss page opens with a fact table and every index is a boss list, so
   these carry a lot of the book. */

.markdown-section table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.markdown-section table th {
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 10px 14px;
}

.markdown-section table td {
  background: var(--color-surface);
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 10px 14px;
  color: var(--color-ink);
}

.markdown-section table tr:last-child td {
  border-bottom: none;
}

/* The default theme gives every row a white background and stripes the even
   ones grey. Against this palette that reads as a rendering fault, so rows are
   flat and the hairline does the separating.

   `tr` is included, not just `td`: the row's own white showed through at the
   cell edges even though the cells were dark. */
.markdown-section table tr,
.markdown-section table tr:nth-child(2n),
.markdown-section table tr:nth-child(2n) td {
  background: var(--color-surface);
}

/* --- Callouts -------------------------------------------------------------
   Blockquotes, used for the vaulted-raid warnings and the unverified Pantheon
   split. Core Honkit has no hint block and this book runs no plugins, so the
   blockquote carries that job. */

.markdown-section blockquote {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent-dim);
  border-radius: var(--radius-card);
  color: var(--color-ink-muted);
  padding: 14px 18px;
  margin: 1.5rem 0;
}

.markdown-section blockquote p {
  color: var(--color-ink-muted);
  margin: 0;
}

/* The "Vaulted" / "Note" lead-in. */
.markdown-section blockquote strong {
  color: var(--color-accent);
}

/* --- Code ----------------------------------------------------------------- */

.markdown-section code {
  background: var(--color-surface-2);
  color: var(--color-accent);
  border: 1px solid var(--color-line);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.markdown-section pre {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 16px;
}

.markdown-section pre > code {
  background: transparent;
  border: none;
  color: var(--color-ink);
  padding: 0;
}

/* --- Chrome --------------------------------------------------------------- */

.book .book-header {
  background: transparent;
  color: var(--color-ink-dim);
  border-bottom: 1px solid var(--color-line);
}

.book .book-header h1 {
  color: var(--color-ink-dim);
  font-size: 13px;
  font-weight: 500;
}

.book .book-header a,
.book .book-header a:hover {
  color: var(--color-ink);
}

.book .book-header .btn {
  color: var(--color-ink-dim);
}

.book .book-header .btn:hover {
  color: var(--color-ink);
  background: var(--color-surface-2);
  border-radius: 6px;
}

/* Previous/next page arrows. */
.book .book-body .navigation {
  color: var(--color-ink-dim);
}

.book .book-body .navigation:hover {
  color: var(--color-accent);
}

/* Dropdowns: the font-settings and share menus. */
.book .dropdown-menu {
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  color: var(--color-ink);
}

.book .dropdown-menu .buttons .button {
  color: var(--color-ink-muted);
  border-color: var(--color-line);
}

.book .dropdown-menu .buttons .button:hover {
  color: var(--color-accent);
}

.book .dropdown-menu.dropdown-left:before,
.book .dropdown-menu:before {
  border-bottom-color: var(--color-line);
}

/* Search results. */
.book .book-body .page-wrapper .page-inner section.normal .search-results .has-results .search-results-item {
  border-bottom: 1px solid var(--color-line);
}

::selection {
  background: rgba(196, 189, 203, 0.35);
}

/* --- Watermark ------------------------------------------------------------
   Sits in the bottom-right of every page: the MxC mark and the Discord handle.

   The logo is a navy glyph on transparency, which would be all but invisible
   on this ground, so it is painted through its own alpha channel with
   mask-image instead of being shown directly. That way it takes the accent
   colour and needs no recoloured copy of the file.

   Fixed rather than absolute so it stays put while a long boss list scrolls,
   and pointer-events: none so it never sits between you and a link. */

/* The watermark drifts: it fades in somewhere, holds, fades out, and the next
   position is picked while it is invisible, so the move is never seen. The
   animation only drives opacity; summary.html sets the coordinates on each
   cycle, which is what makes the placement random rather than a fixed loop.

   pointer-events: none throughout, so it can never sit between you and a link. */

/* Opacity is driven from script rather than a keyframe animation, and starts
   visible. A keyframe starting at 0 leaves the watermark permanently invisible
   anywhere the animation does not run, which includes backgrounded tabs. This
   way the worst case is a mark that sits still. */
.book-watermark {
  position: fixed;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  /* Resting value. The fade is run by the script with animate(), not by a CSS
     transition: the transition was silently not firing for some people, which
     made the marks blink between full and nothing. No transition here on
     purpose, or it would fight the animation. */
  opacity: 0.14;
  will-change: opacity;
}

.book-watermark__mark {
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--color-accent);
  -webkit-mask-image: url("../assets/brand/mxc-logo.png");
  mask-image: url("../assets/brand/mxc-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.book-watermark__text {
  color: var(--color-ink-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Reduced motion does not stop the watermark moving, it eases it off: the
   script picks a slower fade and a longer pause between marks. Killing it
   outright left the marks frozen on any machine with system animations turned
   off, which is most of them.

   No duration override here on purpose. The script sets it per element, and a
   media query fighting that is what made the fades and the timers disagree. */

@media (max-width: 600px) {
  .book-watermark {
    display: none;
  }
}

/* --- Main logo ------------------------------------------------------------
   Sits above the book title in the sidebar, so the mark is on screen without
   taking a slot in the nav. */

.book .book-summary .book-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--color-line);
}

.book .book-summary .book-brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  background-color: var(--color-accent);
  -webkit-mask-image: url("../assets/brand/mxc-logo.png");
  mask-image: url("../assets/brand/mxc-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.book .book-summary .book-brand__name {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.book .book-summary .book-brand__sub {
  display: block;
  color: var(--color-ink-dim);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* The generated title entry duplicates the brand block above it. */
.book .book-summary ul.summary > li.chapter:first-child {
  display: none;
}

/* --- Resizable sidebar ----------------------------------------------------
   The default theme hardcodes 300px in several places. Everything is driven
   off --sidebar-w instead, so the drag handle only has to change one value. */

.book.with-summary .book-summary {
  width: var(--sidebar-w, 340px);
}

.book.with-summary .book-body {
  left: var(--sidebar-w, 340px);
}

/* The grab strip, sitting on the sidebar's right edge. */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
}

.sidebar-resizer:hover::after,
.sidebar-resizer.is-dragging::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;
  height: 100%;
  background: var(--color-accent-dim);
}

/* Kills text selection and hover flicker while dragging. */
body.is-resizing,
body.is-resizing * {
  user-select: none !important;
  cursor: col-resize !important;
}

body.is-resizing .book-summary,
body.is-resizing .book-body {
  transition: none !important;
}

/* --- Blue sweep -----------------------------------------------------------
   theme-default hardcodes #4183c4 / #008cff in a handful of places that the
   rules above do not reach: the summary's active and hover states under each
   colour theme, search-result titles, and the header buttons. Left alone,
   these are the only blue on an otherwise purple page. */

/* Colour only. The hierarchy rules above own background and the accent bar,
   so this must not set either, or every level gets the same active fill and
   the three-level structure collapses again. */
.book.color-theme-1 .book-summary ul.summary li a:hover,
.book.color-theme-1 .book-summary ul.summary li.active > a,
.book.color-theme-2 .book-summary ul.summary li a:hover,
.book.color-theme-2 .book-summary ul.summary li.active > a {
  color: var(--color-ink);
}

/* Search results: the hit title and the term highlight. */
.book .book-body .page-wrapper .page-inner section.normal .search-results .search-results-item h3 a,
.book .book-body .page-wrapper .page-inner section.normal .search-results .search-results-item .search-results-item-body em {
  color: var(--color-accent);
  font-style: normal;
}

.book .book-header a.btn:hover,
.book .book-header .btn:hover,
.book .book-header h1 a:hover {
  color: var(--color-accent);
}

/* Anything still falling through to a raw anchor. */
.book a {
  color: var(--color-accent);
}

/* The theme's "Published with HonKit" footer. Unscoped on purpose: the link
   sits in an unclassed wrapper outside `.book`, so scoping it to `.book` or
   `.page-inner` misses it entirely. */
.gitbook-link,
.page-footer {
  display: none !important;
}

/* --- Print ----------------------------------------------------------------
   A dark ground is not a printable one. */

@media print {
  html,
  body,
  .book,
  .book-body,
  .markdown-section,
  .markdown-section table td,
  .markdown-section table th {
    background: #fff !important;
    color: #000 !important;
  }
}