/* Mobile-first. Base rules describe the phone layout; the desktop sidebar is
   restored at the 64em breakpoint near the bottom of this file.

   Breakpoints:
     phone    up to 44.9375em (719px)   drawer nav, stacked, no floats
     tablet   45em to 63.9375em         drawer nav, floats return
     desktop  from 64em (1024px)        permanent sidebar
   64em is the desktop cutoff because 260px of sidebar plus an 800px text
   column needs 1060px; below that the permanent sidebar squeezes the prose. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #fafafa;
  --color-surface: #fff;
  --color-surface-alt: #f0f0f0;
  --color-code-bg: #eee;
  --color-sidebar: #1a1a2e;
  --color-sidebar-text: #ccc;
  --color-sidebar-active: #e94560;
  --color-text: #333;
  --color-text-muted: #666;
  --color-heading: #1a1a2e;
  --color-link: #1a1a2e;
  --color-border: #ddd;
  --sidebar-width: 260px;
  --topbar-height: 3.5rem;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Tells the browser which way to paint scrollbars, form controls and
     caret. Without it the UA paints a light scrollbar over a dark page. */
  color-scheme: light;
}

/* The dark palette is written twice on purpose: once for "follow the system"
   (no explicit choice stored) and once for an explicit dark choice. CSS has no
   way to share one declaration block across a media query boundary. Keep the
   two lists in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #14141f;
    --color-surface: #1e1e2e;
    --color-surface-alt: #26263a;
    --color-code-bg: #26263a;
    --color-text: #d8d8dd;
    --color-text-muted: #9a9aa6;
    --color-heading: #eaeaf2;
    --color-link: #c8c8f0;
    --color-border: #35354a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #14141f;
  --color-surface: #1e1e2e;
  --color-surface-alt: #26263a;
  --color-code-bg: #26263a;
  --color-text: #d8d8dd;
  --color-text-muted: #9a9aa6;
  --color-heading: #eaeaf2;
  --color-link: #c8c8f0;
  --color-border: #35354a;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 0.6rem 1rem;
  background: var(--color-sidebar);
  color: #fff;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Mobile top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--topbar-height);
  padding-right: 0.25rem;
  background: var(--color-sidebar);
  color: #fff;
}

.nav-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* Three bars drawn from one element so there is no icon font to load. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.topbar-title {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.topbar-crumb {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Theme toggle ---------- */

/* Cycles system → light → dark. Rendered twice — once in the mobile top bar,
   once in the sidebar header for desktop — and the script keeps both in sync. */
.theme-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show only the block matching the current mode. Absent attribute = system.
   Each block holds an icon and, in the labelled variant, its name. */
.theme-toggle .theme-icon {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

:root:not([data-theme]) .theme-toggle .theme-icon-system,
:root[data-theme="light"] .theme-toggle .theme-icon-light,
:root[data-theme="dark"] .theme-toggle .theme-icon-dark {
  display: flex;
}

.theme-name {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* The sidebar copy is desktop-only: on mobile the drawer is a navigation
   surface and the top bar already carries a toggle. */
.sidebar .theme-toggle {
  display: none;
}

@media (min-width: 64em) {
  .sidebar .theme-toggle {
    display: flex;
    margin: 0.85rem auto 0;
    padding: 0.35rem 0.75rem;
    min-height: 0;
    color: var(--color-sidebar-text);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.5);
}

.scrim[hidden] {
  display: none;
}

/* ---------- Sidebar / drawer ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: min(80vw, 300px);
  padding: 1.5rem 0;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  /* The sidebar is dark in both themes, so its scrollbar must be too. */
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar {
    transition: transform 0.2s ease;
  }
}

body.nav-open .sidebar {
  transform: translateX(0);
}

body.nav-open {
  overflow: hidden;
}

.sidebar-header {
  padding: 0.75rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
  text-align: center;
}

.sidebar-logo {
  display: block;
  margin-bottom: 0.5rem;
}

.sidebar-logo img {
  display: block;
  margin: 0 auto;
  max-width: 100px;
  height: auto;
  background: #fff;
  border-radius: 4px;
  padding: 5px 7px 4px 4px;
}

.sidebar-title {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
}

.nav-list,
.nav-pages {
  list-style: none;
}

.nav-section {
  margin-bottom: 1.25rem;
}

.nav-section-title {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

/* Roomy enough to hit with a thumb; tightened again at desktop. */
.nav-link {
  display: block;
  padding: 0.6rem 1.25rem 0.6rem 1.75rem;
  color: var(--color-sidebar-text);
  text-decoration: none;
  font-size: 0.95rem;
  border-left: 2px solid transparent;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.active {
  color: var(--color-sidebar-active);
  border-left-color: var(--color-sidebar-active);
  background: rgba(233, 69, 96, 0.08);
}

/* Indent applies at every level, so third-level entries (Plugins ›
   Editorials › a page) are distinguishable from their parent. */
.nav-pages .nav-pages {
  margin-left: 1.75rem;
}

.nav-pages .nav-pages>li>.nav-link {
  padding-left: 0.75rem;
  font-size: 0.9rem;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
}

.nav-pages .nav-pages>li>.nav-link.active {
  border-left-color: var(--color-sidebar-active);
}

/* ---------- Content ---------- */

.content {
  padding: 1rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.content-wide {
  max-width: none;
}

.content h1 {
  font-size: 1.6rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  overflow-wrap: break-word;
}

/* Every heading below h1 starts a new band of the page, so none of them may
   sit beside a floated screenshot from the section above. Declaring it once
   here is what lets a page place consecutive screenshots without each one
   needing its own clear. */
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  clear: both;
  color: var(--color-heading);
}

/* The mobile topbar is sticky, so an #anchor jump would otherwise park the
   heading underneath it. scroll-margin-top pads the browser's idea of where
   the target starts; nothing about the layout moves. */
.content :is(h1, h2, h3, h4, h5, h6, [id]) {
  scroll-margin-top: calc(var(--topbar-height) + 0.75rem);
}

.content h2 {
  font-size: 1.3rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.content h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.content h4 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

.content a.heading-anchor {
  color: inherit;
  text-decoration: none;
}

.content a.heading-anchor:hover,
.content a.heading-anchor:focus {
  color: inherit;
  text-decoration: underline;
}

.heading-anchor::after {
  content: "¶";
  margin-left: 0.5rem;
  color: inherit;
  text-decoration: none !important;
  font-weight: 400;
  opacity: 0;
}

.heading-anchor:hover::after,
.heading-anchor:focus::after {
  opacity: 1;
}

.content p {
  margin-bottom: 1rem;
}

.content a {
  color: var(--color-link);
  text-decoration: underline;
  overflow-wrap: break-word;
}

.content a:hover {
  color: var(--color-sidebar-active);
}

.content ul,
.content ol {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.content li {
  margin-bottom: 0.25rem;
}

.content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  overflow-wrap: break-word;
}

.content pre {
  background: #1a1a2e;
  color: #eee;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  /* Code blocks are dark in both themes; keep their scrollbar dark too. */
  color-scheme: dark;
}

.content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  overflow-wrap: normal;
}

.content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border-radius: 6px;
}

/* LCD screenshots and similar figures: narrow on desktop, full-bleed on phone
   where there is no width to spare. Replaces inline width styles in markdown. */
.content img.figure-narrow {
  width: 100%;
}

.content img.plugin-screenshot {
  width: 80%;
}

/* Figures that outgrow the prose column: never narrower than the text, and on
   desktop up to 90% of the space left beside the sidebar. See the 64em block
   for the overhang. */
.content .figure-wide {
  width: 100%;
  margin: 1.5rem 0 2.5rem;
}

.content .figure-wide img,
.content img.figure-wide {
  display: block;
  width: 100%;
  margin: 0;
}

.content .figure-wide figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: center;
}

.content blockquote {
  border-left: 3px solid var(--color-sidebar-active);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--color-text-muted);
}

/* Wide markdown tables scroll inside their own box rather than pushing the
   page sideways. display:block is what makes the table a scroll container. */
.content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.content th,
.content td {
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.9rem;
}

.content th {
  background: var(--color-surface-alt);
  font-weight: 600;
}

/* ---------- Prev / next pager ---------- */

.pager {
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Scoped under .content so it beats the generic `.content a` link styling. */
.content .pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-heading);
}

.content .pager-link:hover {
  border-color: var(--color-sidebar-active);
  color: var(--color-sidebar-active);
}

.pager-next {
  text-align: right;
}

.pager-dir {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.pager-title {
  font-weight: 600;
}

/* Content that only makes sense alongside the desktop layout — currently the
   text-selection "Suggest edit" affordance, which is hidden below 64em too.
   Keep this breakpoint and .suggest-edit-btn's in step. */
.desktop-only {
  display: none;
}

/* ---------- Selection-based edit button (pointer devices only) ---------- */

.suggest-edit-btn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  margin-left: 0.75rem;
  padding: 0.35rem 0.7rem;
  background: var(--color-sidebar);
  color: #fff;
  font-size: 0.8rem;
  font-family: var(--font-body);
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.suggest-edit-btn:hover {
  background: var(--color-sidebar-active);
}

.open-editor-btn {
  background: #0e639c;
  /* VS Code blue */
}

.open-editor-btn:hover {
  background: #1177bb;
}

/* ---------- Tablet ---------- */

@media (min-width: 45em) {
  .content {
    padding: 1.5rem;
  }

  .content h1 {
    font-size: 1.85rem;
  }

  .content h2 {
    font-size: 1.4rem;
  }

  .content h3 {
    font-size: 1.15rem;
  }

  .content img {
    width: 80%;
  }

  .content img.figure-narrow {
    width: 70%;
  }

  /* Floats only make sense once there is a text column left beside them. */
  .content img.plugin-screenshot {
    float: right;
    width: auto;
    max-width: 200px;
    max-height: 280px;
    margin: 0 0 1rem 1.5rem;
  }

  .content img.nudge-right {
    position: relative;
    left: 25px;
  }

  .content img.nudge-left {
    position: relative;
    right: -35px;
  }

  .pager {
    grid-template-columns: 1fr 1fr;
  }

  /* Keep next hard right even when there is no previous page. */
  .pager-next:only-child {
    grid-column: 2;
  }
}

/* ---------- Desktop: permanent sidebar ---------- */

@media (min-width: 64em) {

  .topbar,
  .scrim,
  .nav-toggle {
    display: none;
  }

  /* No sticky topbar here, so anchors only need breathing room. */
  .content :is(h1, h2, h3, h4, h5, h6, [id]) {
    scroll-margin-top: 1rem;
  }

  /* The sidebar is out of flow, so the shell reserves its width with padding
     and the content column centres itself in what is left over. */
  .layout {
    min-height: 100vh;
    padding-left: var(--sidebar-width);
  }

  .sidebar {
    width: var(--sidebar-width);
    transform: none;
    transition: none;
  }

  body.nav-open {
    overflow: auto;
  }

  .nav-link {
    padding: 0.3rem 1.25rem 0.3rem 1.75rem;
    font-size: 0.9rem;
  }

  .nav-section-title {
    padding: 0.25rem 1.25rem;
  }

  .nav-pages .nav-pages>li>.nav-link {
    font-size: 0.85rem;
  }

  .content {
    padding: 2rem 3rem;
  }

  /* The prose column is centred in the space beside the sidebar, so a figure
     centred on that column is also centred in that space. Widen it to 75% of
     the space (never below the column width) and pull the negative half of the
     difference off the left edge to keep it centred. */
  .content .figure-wide {
    --figure-wide-width: max(100%, calc((100vw - var(--sidebar-width)) * 0.75));
    width: var(--figure-wide-width);
    margin-left: calc((100% - var(--figure-wide-width)) / 2);
  }

  /* Enough room for the prose column, so tables can lay out normally again. */
  .content table {
    display: table;
    width: auto;
  }

  .suggest-edit-btn.visible {
    display: block;
  }

  .desktop-only {
    display: revert;
  }
}

/* --- Search ------------------------------------------------------------ */

.search-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 2rem);
  margin: 0 1rem 0.75rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-sidebar-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  cursor: pointer;
}

.search-open:hover {
  background: rgba(255, 255, 255, 0.12);
}

.search-open svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.search-open span {
  flex: 1;
  text-align: left;
}

.search-open kbd {
  padding: 0.05rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Map Pagefind's component tokens onto the manual's palette so the modal
   follows the theme toggle. */
pagefind-modal {
  --pf-font: var(--font-body);
  --pf-background: var(--color-surface);
  --pf-text: var(--color-text);
  --pf-text-secondary: var(--color-text);
  --pf-text-muted: var(--color-text-muted);
  --pf-border: var(--color-border);
  --pf-border-focus: var(--color-sidebar-active);
  --pf-outline-focus: var(--color-sidebar-active);
  --pf-hover: var(--color-surface-alt);
  --pf-skeleton: var(--color-surface-alt);
  --pf-border-radius: 6px;
  --pf-modal-max-width: 44rem;
  --pf-modal-top: 8vh;
  --pf-results-gap: 1.5rem;
  --pf-result-title-font-size: 1rem;
  --pf-result-excerpt-font-size: 0.9rem;
  --pf-summary-font-size: 0.8rem;
}

/* The results pane is the one element in the modal that scrolls, and Pagefind
   gives it a pf- class, so its `all: revert` reset (specificity 0,2,1) drops
   both the color-scheme it would otherwise inherit and any scrollbar-color we
   set on it — the UA then paints a light track over the dark modal. Restate
   both behind Pagefind's own :is(*, #\#) specificity trick, which is the only
   way an author rule outranks that reset. */
:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-body {
  color-scheme: inherit;
  scrollbar-color: var(--color-border) transparent;
}

/* Pagefind's own 8px reads as a caption attached to the first result. Same
   specificity trick: .pf-summary is inside its reset's reach. */
:is(*, #\#):is(*, #\#):is(*, #\#) pagefind-modal-body .pf-summary {
  margin-bottom: 0.9rem;
}

/* Default is a solid yellow fill, which is loud on light and unreadable on
   dark. Underline the hit instead and let it inherit body colour. */
pagefind-modal mark {
  color: inherit;
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -0.4em 0 color-mix(in srgb, var(--color-sidebar-active) 28%, transparent);
}

/* Pagefind resets every pf-* class with `all: revert` at a specificity author
   rules cannot outrank, so anything we style carries an ms- prefix instead.
   That also means replacing the typography .pf-result-title used to supply, and
   the card .pf-result-card used to draw. Doing the card ourselves is deliberate:
   Pagefind's .pf-result-link stretches an absolute ::after over the whole card,
   which would swallow the clicks meant for the section rows inside it. Colour
   has to be stated here too — .pf-result above is reset, so its reverted UA
   colour is what any `inherit` would pick up. */
.ms-card {
  padding: 0.6rem 0.75rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--pf-border-radius, 6px);
}

.ms-card:has(a[data-pf-selected]) {
  border-color: var(--color-sidebar-active);
}

.ms-result-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--pf-result-title-font-size, 1rem);
  font-weight: 500;
  line-height: 1.4;
}

.ms-result-section,
.ms-result-sep {
  flex: none;
  font-weight: 500;
  color: var(--color-sidebar-active);
}

.ms-result-link {
  color: var(--color-text);
  text-decoration: none;
}

.ms-result-link:hover {
  text-decoration: underline;
}

/* Only shown when the match sits above the page's first heading and so belongs
   to no section row. */
.ms-result-excerpt {
  margin: 0.3rem 0 0;
  font-size: var(--pf-result-excerpt-font-size, 0.9rem);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The page title is a heading over its matching sections, not a result competing
   with them: each row below is one heading plus the excerpt from inside it, so
   the row a reader clicks is the text they land on. */
.ms-hits {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.ms-hit {
  margin: 0;
}

.ms-hit-link {
  display: block;
  padding: 0.3rem 0.4rem 0.35rem 0.6rem;
  color: var(--color-text);
  text-decoration: none;
  border-left: 2px solid var(--color-border);
  border-radius: 0 4px 4px 0;
}

.ms-hit-link:hover,
.ms-hit-link:focus-visible,
.ms-hit-link[data-pf-selected] {
  background: var(--color-surface-alt);
  border-left-color: var(--color-sidebar-active);
}

.ms-hit-heading {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Two lines is enough context to recognise the passage; beyond that a long
   section pushes the next page's rows off the screen. */
.ms-hit-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--pf-result-excerpt-font-size, 0.9rem);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Marks that highlight.js writes into the body after a search result lands.
   Louder than the modal's underline — findable while skimming a long page —
   with the match under the reader's cursor in the accent colour. */
mark.pagefind-highlight {
  color: inherit;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-sidebar-active) 26%, transparent);
  scroll-margin-top: calc(var(--topbar-height) + 2rem);
}

mark.pagefind-highlight-current {
  color: var(--color-surface);
  background: var(--color-sidebar-active);
}

.match-nav {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.4rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

.match-nav-count {
  padding: 0 0.4rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.match-nav-btn {
  width: 1.7rem;
  height: 1.7rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
}

.match-nav-btn:hover,
.match-nav-btn:focus-visible {
  background: var(--color-surface-alt);
}