/*
 * Dark Mode styles — kosalnith.github.io
 * Palette: bg #141413 | text #f7f6f3 | accent #8c1514
 */

/* ═══════════════════════════════════════════════════════════════
   TOGGLE LI — strip nav link styling from our container li
   ═══════════════════════════════════════════════════════════════ */

li.dm-toggle-li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* On desktop: match the 36px right-margin gap of other nav items */
@media only screen and (min-width: 992px) {
  li.dm-toggle-li {
    margin: 0 36px 0 0 !important;
    align-self: center !important;
  }
}

/* On mobile, show inside the open dropdown */
@media (max-width: 991px) {
  /* ── Dark mode toggle li — match nav item style ── */
  li.dm-toggle-li {
    display: flex !important;
    align-items: center !important;
    padding: 1.2rem 2.4rem !important;
    border-bottom: 1px solid #53565a !important;
  }

  html.dark-mode li.dm-toggle-li {
    border-bottom-color: #3a3836 !important;
  }

  /* ── Dark mode toggle button — icon only, no label, no border box ── */
  li.dm-toggle-li .dm-toggle {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f7f6f3 !important;
  }

  html.dark-mode li.dm-toggle-li .dm-toggle {
    color: #f7f6f3 !important;
  }

  li.dm-toggle-li .dm-toggle:hover,
  li.dm-toggle-li .dm-toggle:focus {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    outline: none !important;
  }

  /* No text label — icon only */
  li.dm-toggle-li .dm-toggle::after {
    content: none !important;
  }

  /* Icon clearly visible at nav scale */
  li.dm-toggle-li .dm-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
  }

  /* ── Search li — match nav item style ── */
  .su-multi-menu .su-multi-menu__menu-lv1 li:has(#site-search-btn) {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #53565a !important;
  }

  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 li:has(#site-search-btn) {
    border-bottom-color: #3a3836 !important;
  }

  /* ── Search button — strip pill, look like a nav link ── */
  #site-search-btn {
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.2rem 2.4rem !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
  }

  #site-search-btn:hover {
    background: rgba(140, 21, 21, 0.06) !important;
    border: none !important;
  }

  #site-search-btn span {
    color: inherit !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
  }

  html.dark-mode #site-search-btn {
    color: #dddddd !important;
  }

  html.dark-mode #site-search-btn span {
    color: #dddddd !important;
  }

  /* ── Mobile ordering: search above dark/light mode toggle ──
     These order rules guarantee correct order regardless of
     JS injection timing.                                        */
  .su-multi-menu .su-multi-menu__menu-lv1 {
    display: flex !important;
    flex-direction: column !important;
  }

  .su-multi-menu .su-multi-menu__menu-lv1 li:has(#site-search-btn) {
    order: 98 !important;
  }

  .su-multi-menu .su-multi-menu__menu-lv1 li.dm-toggle-li {
    order: 99 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BUTTON — move to the left of the nav row
   The search <li> is injected by search.js as .su-mobile-site-search
   or a search-block <li>. We use order to push it before the other
   items while keeping the <ul> flex layout intact.
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (min-width: 992px) {
  /* Make the nav <ul> a flex row (it already is, this ensures order works) */
  .su-multi-menu .su-multi-menu__menu-lv1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Push the search li to the far left */
  .su-multi-menu .su-multi-menu__menu-lv1 li.su-mobile-site-search,
  .su-multi-menu .su-multi-menu__menu-lv1 li.dm-search-li,
  .su-multi-menu .su-multi-menu__menu-lv1 li:has(.su-site-search),
  .su-multi-menu .su-multi-menu__menu-lv1 li:has([class*="search"]) {
    order: -1 !important;
    margin: 0 36px 0 0 !important;
  }

  /* All other nav items keep their natural order */
  .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item {
    order: 0 !important;
  }

  /* Dark mode toggle — left gap matches other nav item spacing */
  .su-multi-menu .su-multi-menu__menu-lv1 > li.dm-toggle-li {
    order: 1 !important;
    margin: 0 0 0 36px !important;
    align-self: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTON  (always present, both modes)
   ═══════════════════════════════════════════════════════════════ */

.dm-toggle {
  /* Reset the site's global button styles */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1.5px solid #767270 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: #2e2d29 !important;
  box-shadow: none !important;
  font-size: 0 !important;         /* hide any text */
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0;
  vertical-align: middle;
}

.dm-toggle:hover,
.dm-toggle:focus {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: #2e2d29 !important;
  outline: none !important;
  text-decoration: none !important;
}

.dm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   LOCKUP — "Kosal | Nith." inline on one line (light + dark)
   ═══════════════════════════════════════════════════════════════ */

/* "Kosal" color */
.su-lockup__wordmark {
  color: #a60101 !important;
}

/* Root cause:
   - .su-lockup--option-a > a has flex-direction:column (no MQ)
     which overrides the row set by .su-lockup > a at 768px
   - .su-lockup--option-a .su-lockup__cell2 has order:3
     which pushes "Nith." below "Kosal"

   Use the ID for highest specificity to win the cascade.        */
@media only screen and (min-width: 768px) {
  #block-stanford-basic-branding.su-lockup--option-a > a {
    display: flex !important;
    flex-direction: row !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
  }

  #block-stanford-basic-branding .su-lockup__cell2 {
    -webkit-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important;
    align-self: flex-end !important;
  }

  #block-stanford-basic-branding .su-lockup__cell1 {
    align-self: flex-end !important;
  }
}

.dm-icon svg {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES  (html.dark-mode prefix on everything)
   ═══════════════════════════════════════════════════════════════ */

html.dark-mode {
  --dm-bg:        #141413;
  --dm-bg-alt:    #1e1d1c;
  --dm-bg-card:   #242322;
  --dm-bg-nav:    #1a1918;
  --dm-text:      #D6D6D6;
  --dm-text-mute: #dcdad8;
  --dm-accent:    #8c1514;
  --dm-accent-lt: #c04040;
  --dm-border:    #3a3836;

  /* Links throughout the page use the accent red in dark mode */
  --dm-link:       #cc2222;
  --dm-link-hover: #ff6600;
}

/* ── Page base ─────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Masthead ──────────────────────────────────────────────────── */
html.dark-mode .su-masthead {
  background-color: var(--dm-bg-nav) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55) !important;
}

html.dark-mode .su-masthead > section:last-of-type {
  background-color: var(--dm-bg-nav) !important;
}

/* Brand bar */
html.dark-mode .su-brand-bar {
  background-color: var(--dm-accent) !important;
}

/* Lockup text */
html.dark-mode .su-lockup__wordmark {
  color: #a60101 !important;
}
html.dark-mode .su-lockup__line1,
html.dark-mode .su-lockup__line2,
html.dark-mode .su-lockup__line3,
html.dark-mode .su-lockup__line4,
html.dark-mode .su-lockup__line5 {
  color: var(--dm-text) !important;
}
html.dark-mode .su-lockup__cell1,
html.dark-mode .su-lockup__cell2 {
  border-color: var(--dm-border) !important;
}

/* ── Navigation ────────────────────────────────────────────────── */
html.dark-mode .su-multi-menu .su-multi-menu__menu,
html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 {
  background-color: var(--dm-bg-nav) !important;
}

html.dark-mode .su-multi-menu .su-multi-menu__menu .su-multi-menu__link {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .su-multi-menu .su-multi-menu__menu .su-multi-menu__link:hover,
html.dark-mode .su-multi-menu .su-multi-menu__menu .su-multi-menu__link:focus {
  color: var(--dm-text) !important;
}

/* Top-level desktop nav items */
@media only screen and (min-width: 992px) {
  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item > .su-multi-menu__link {
    color: var(--dm-text) !important;
    border-bottom-color: var(--dm-border) !important;
  }

  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item > .su-multi-menu__link:hover,
  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item > .su-multi-menu__link:focus {
    color: var(--dm-accent-lt) !important;
  }

  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item--current > .su-multi-menu__link,
  html.dark-mode .su-multi-menu .su-multi-menu__menu-lv1 > .su-multi-menu__item--active-trail > .su-multi-menu__link {
    color: var(--dm-text) !important;
  }
}

/* Hamburger toggle icon */
html.dark-mode .su-multi-menu__nav-toggle {
  color: var(--dm-text) !important;
}

/* Search input */
html.dark-mode .su-site-search__input {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .su-site-search__input::placeholder {
  color: var(--dm-text-mute) !important;
  opacity: 1;
}
html.dark-mode .su-site-search__submit {
  filter: invert(0.8) !important;
}

/* Search button styling in dark mode */
html.dark-mode .su-site-search {
  background-color: transparent !important;
}

/* ── Links — apply dark color to all anchors, override exceptions ── */
/* Inverted pattern: fewer :not() = faster style matching.            */
html.dark-mode a {
  color: var(--dm-link) !important;
}

html.dark-mode a:hover,
html.dark-mode a:focus {
  color: var(--dm-link-hover) !important;
}

/* Exceptions: buttons, nav, footer — override back to their own colors */
html.dark-mode a.button,
html.dark-mode a.su-button,
html.dark-mode a.su-button--big,
html.dark-mode a.su-button--secondary {
  color: #f7f6f3 !important;
}

html.dark-mode a.button:hover,
html.dark-mode a.button:focus,
html.dark-mode a.su-button:hover,
html.dark-mode a.su-button:focus,
html.dark-mode a.su-button--big:hover,
html.dark-mode a.su-button--big:focus {
  color: #f7f6f3 !important;
}

/* Nav links should NOT use the red accent — override back to text */
html.dark-mode .su-multi-menu a,
html.dark-mode .su-multi-menu .su-multi-menu__link,
html.dark-mode .su-brand-bar a,
html.dark-mode .su-global-footer a,
html.dark-mode .su-local-footer a {
  color: inherit !important;
}

html.dark-mode .su-multi-menu a:hover,
html.dark-mode .su-multi-menu .su-multi-menu__link:hover,
html.dark-mode .su-multi-menu a:focus,
html.dark-mode .su-multi-menu .su-multi-menu__link:focus {
  color: var(--dm-accent-lt) !important;
}

/* ── Body / content ────────────────────────────────────────────── */
html.dark-mode main,
html.dark-mode .page-content,
html.dark-mode #page-content,
html.dark-mode .node,
html.dark-mode .block-system,
html.dark-mode .paragraph-item,
html.dark-mode .ptype-stanford-layout,
html.dark-mode .layout,
html.dark-mode .layout__region,
html.dark-mode .jumpstart-ui--one-column,
html.dark-mode .main-region,
html.dark-mode .content,
html.dark-mode .field-block,
html.dark-mode .dialog-off-canvas-main-canvas {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Typography ────────────────────────────────────────────────── */
html.dark-mode h1, html.dark-mode h2,
html.dark-mode h3, html.dark-mode h4,
html.dark-mode h5, html.dark-mode h6 {
  color: var(--dm-text) !important;
}

html.dark-mode p {
  color: var(--dm-text) !important;
}

/* ── Cards ─────────────────────────────────────────────────────── */
html.dark-mode .su-card {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

/* ── Tables ────────────────────────────────────────────────────── */
html.dark-mode table tbody tr,
html.dark-mode table thead tr,
html.dark-mode table thead + tbody {
  border-color: var(--dm-border) !important;
}

html.dark-mode table th,
html.dark-mode table td {
  color: var(--dm-text) !important;
}

/* ── Footer ────────────────────────────────────────────────────── */
html.dark-mode .su-local-footer {
  background-color: var(--dm-bg-nav) !important;
  color: #ffffff !important;
}

html.dark-mode .su-local-footer *,
html.dark-mode .su-local-footer a,
html.dark-mode .su-local-footer a:hover,
html.dark-mode .su-local-footer a:focus {
  color: #ffffff !important;
}

html.dark-mode .su-global-footer {
  background-color: var(--dm-accent) !important;
  color: #ffffff !important;
}

html.dark-mode .su-global-footer *,
html.dark-mode .su-global-footer a,
html.dark-mode .su-global-footer a:hover,
html.dark-mode .su-global-footer a:focus,
html.dark-mode .su-global-footer__copyright {
  color: #ffffff !important;
}

/* Bottom <footer> element (copyright, social icons, nav links) */
html.dark-mode footer,
html.dark-mode footer *,
html.dark-mode footer a,
html.dark-mode footer a:hover,
html.dark-mode footer a:focus {
  color: #ffffff !important;
}

/* ── Inputs ────────────────────────────────────────────────────── */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ── Captions ──────────────────────────────────────────────────── */
html.dark-mode .su-media__caption,
html.dark-mode .su-caption,
html.dark-mode .su-credits {
  color: var(--dm-text-mute) !important;
}

/* ── Red buttons — force light text so it stays legible ─────── */
/* The site's own red buttons (su-button, generic buttons).      */
/* Note: the Twitter/X "Follow" button is an iframe widget from  */
/* Twitter — its internal text colour cannot be changed via CSS. */
html.dark-mode [type=button],
html.dark-mode [type=submit],
html.dark-mode [type=image],
html.dark-mode button,
html.dark-mode .su-button,
html.dark-mode .su-button--big,
html.dark-mode .su-button--secondary,
html.dark-mode .su-cta .su-cta__button {
  color: #f7f6f3 !important;
}

/* Exclude the dark-mode toggle itself (transparent bg — no need) */
html.dark-mode .dm-toggle {
  color: #f7f6f3 !important;
  border-color: #b8b4ae !important;
}

html.dark-mode .dm-toggle:hover,
html.dark-mode .dm-toggle:focus {
  background-color: rgba(247,246,243,0.1) !important;
  border-color: #f7f6f3 !important;
}

/* ── Smooth transitions ────────────────────────────────────────── */
/* Scoped only to structural elements that actually change on theme toggle.
   Removed: html, body, a — applying transitions globally to every anchor
   forces the browser to evaluate them on every interaction across the page. */
.su-masthead,
.su-brand-bar,
.su-local-footer,
.su-global-footer,
.su-card {
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Nav links get a targeted hover transition only — not a global one */
.su-multi-menu .su-multi-menu__link {
  transition: color 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL / HIGHLIGHT TEMPLATE
   Used by personal.html, work.html, friends.html, explore.html
   and any page built with section.panel + div.highlight layout.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page & section backgrounds ────────────────────────────────── */
html.dark-mode section.panel,
html.dark-mode section.panel.theme--white,
html.dark-mode .grid-container,
html.dark-mode section.highlight {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Section header text ────────────────────────────────────────── */
html.dark-mode section.panel > header,
html.dark-mode section.panel > header h2,
html.dark-mode section.panel > header p {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Highlight card headings & body text ────────────────────────── */
html.dark-mode section.highlight h3,
html.dark-mode section.highlight p,
html.dark-mode section.highlight span {
  color: var(--dm-text) !important;
}

/* ── Jump links (the "Read more ›" style links) ─────────────────── */
html.dark-mode .highlight-link a.jump-link,
html.dark-mode a.jump-link {
  color: var(--dm-accent-lt) !important;
}

html.dark-mode .highlight-link a.jump-link:hover,
html.dark-mode a.jump-link:hover {
  color: var(--dm-link-hover) !important;
}

/* ── Figure captions inside highlights ─────────────────────────── */
html.dark-mode section.highlight figcaption,
html.dark-mode section.highlight .su-media__caption {
  color: var(--dm-text-mute) !important;
}

/* ── Any explicit white/light background overrides in the template ── */
html.dark-mode [class*="theme--white"],
html.dark-mode [class*="theme--light"] {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESEARCH PAGE TEMPLATE
   Used by research.html — custom research.css classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Page & container backgrounds ──────────────────────────────── */
html.dark-mode .research-container,
html.dark-mode .research-sidebar,
html.dark-mode .main-content,
html.dark-mode .two-columns,
html.dark-mode .search-section,
html.dark-mode #pubListView,
html.dark-mode #pubDetailView,
html.dark-mode .detail-container,
html.dark-mode .detail-main,
html.dark-mode .detail-sidebar {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* ── Research title & headings ──────────────────────────────────── */
html.dark-mode .research-title,
html.dark-mode .research-header,
html.dark-mode .search-heading,
html.dark-mode .search-subtext,
html.dark-mode .filter-section-label,
html.dark-mode .filter-heading,
html.dark-mode .sort-bar,
html.dark-mode .result-count,
html.dark-mode .detail-nav-row,
html.dark-mode .detail-breadcrumb {
  color: var(--dm-text) !important;
  background-color: var(--dm-bg) !important;
}

/* ── Type pills (Journal article, Working paper…) ───────────────── */
html.dark-mode .type-pill {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .type-pill:hover,
html.dark-mode .type-pill.active {
  background-color: var(--dm-accent) !important;
  color: #f7f6f3 !important;
  border-color: var(--dm-accent) !important;
}

html.dark-mode .pill-number,
html.dark-mode .pill-label {
  color: inherit !important;
}

/* ── More dropdown ──────────────────────────────────────────────── */
html.dark-mode .more-dropdown,
html.dark-mode .more-item {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .more-item:hover {
  background-color: var(--dm-bg-alt) !important;
}

/* ── Filter sidebar ─────────────────────────────────────────────── */
html.dark-mode .filter-group {
  background-color: var(--dm-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .custom-check,
html.dark-mode .custom-check-left,
html.dark-mode .custom-check span {
  color: var(--dm-text) !important;
}

html.dark-mode .check-box {
  border-color: var(--dm-border) !important;
  background-color: var(--dm-bg-alt) !important;
}

html.dark-mode .count-badge {
  color: var(--dm-text-mute) !important;
}

html.dark-mode .show-more-btn,
html.dark-mode .toggle-sdg,
html.dark-mode .toggle-type {
  color: var(--dm-accent-lt) !important;
  background: none !important;
}

/* ── Year range slider ──────────────────────────────────────────── */
html.dark-mode .year-track-outer,
html.dark-mode .year-track {
  background-color: var(--dm-border) !important;
}

html.dark-mode .year-fill {
  background-color: var(--dm-accent-lt) !important;
}

html.dark-mode .year-minmax {
  color: var(--dm-text-mute) !important;
}

/* ── Search input ───────────────────────────────────────────────── */
html.dark-mode .search-input-wrapper {
  background-color: var(--dm-bg-alt) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .search-input-wrapper i {
  color: var(--dm-text-mute) !important;
}

html.dark-mode #searchInput {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text) !important;
}

html.dark-mode #searchInput::placeholder {
  color: var(--dm-text-mute) !important;
}

html.dark-mode .search-btn {
  background-color: var(--dm-accent) !important;
  color: #f7f6f3 !important;
  border-color: var(--dm-accent) !important;
}

/* ── Sort bar & links ───────────────────────────────────────────── */
html.dark-mode .sort-link,
html.dark-mode .export-link {
  color: var(--dm-accent-lt) !important;
}

/* ── Publication cards (rendered by research_app.js) ───────────── */
html.dark-mode .pub-card,
html.dark-mode .pub-item,
html.dark-mode [class*="pub-"] {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html.dark-mode .pub-card:hover,
html.dark-mode .pub-item:hover {
  border-color: var(--dm-accent-lt) !important;
}

html.dark-mode .pub-title,
html.dark-mode [class*="pub-title"] {
  color: var(--dm-text) !important;
}

html.dark-mode .pub-authors,
html.dark-mode .pub-journal,
html.dark-mode .pub-year,
html.dark-mode .pub-meta,
html.dark-mode [class*="pub-meta"],
html.dark-mode [class*="pub-author"],
html.dark-mode [class*="pub-year"] {
  color: var(--dm-text-mute) !important;
}

html.dark-mode .pub-tag,
html.dark-mode .pub-badge,
html.dark-mode [class*="pub-tag"],
html.dark-mode [class*="pub-badge"] {
  background-color: var(--dm-bg-alt) !important;
  color: var(--dm-text-mute) !important;
  border-color: var(--dm-border) !important;
}

/* ── Pagination ─────────────────────────────────────────────────── */
html.dark-mode .pagination,
html.dark-mode .pagination button,
html.dark-mode .pagination a {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .pagination .active,
html.dark-mode .pagination button.active {
  background-color: var(--dm-accent) !important;
  color: #f7f6f3 !important;
}

/* ── Mobile filter bar ──────────────────────────────────────────── */
html.dark-mode .mobile-filter-bar,
html.dark-mode .mobile-filter-toggle {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

html.dark-mode .mobile-filter-badge {
  background-color: var(--dm-accent) !important;
  color: #f7f6f3 !important;
}

html.dark-mode .mobile-result-count {
  color: var(--dm-text-mute) !important;
}

/* ── Filter backdrop ────────────────────────────────────────────── */
html.dark-mode .filter-backdrop.active {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* ── Back link ──────────────────────────────────────────────────── */
html.dark-mode .back-link {
  color: var(--dm-accent-lt) !important;
}