/* ============================================================================
   md-front — the ONE global stylesheet. The whole UI system lives here:

     1. TOKENS — design variables. Colors/shadows (light + dark theme),
        typography, radius scale. Every rule below builds on these; never
        hard-code a color or radius twice. The only literal colors allowed
        outside TOKENS are the on-accent whites inside the blue hero card.
     2. BASE — reset + element defaults (the Webflow legacy is fully gone;
        this section is hand-authored).
     3. UI — cross-page components: container, header (sh-*), theme toggle,
        language switch, footer (sf-*), coin/vendor icons, the Kryptex Pool
        banner, ad slot, lightbox.
     4. HOMEPAGE — mdh-*: hero card, toolbar/filters, miner cards grid.
     5. INNER — mdi-*: download panel, sidebar TOC, info block, 404.
     6. PROSE — article typography for section bodies.

   Naming: sh-/sf- = shared header/footer, mdh- = home, mdi- = inner pages.
   State classes: .is-current, .is-open, .is-on, .has-selection.
   ========================================================================== */

/* === 1. TOKENS ============================================================ */
:root {
  /* Palette */
  --c-bg: #ffffff;
  --c-surface: #f7f9fc;
  --c-card: #ffffff;
  --c-tag: #f1f4f9;
  --c-text: #101e3c;
  --c-muted: #5d6b84;
  --c-border: #e5e9f1;
  --c-border-strong: #d4dbe7;
  --c-accent: #1d61fe;
  --c-accent-soft: #eef3ff;
  --c-quote: #314ea0;
  --c-hero-bg: var(--c-accent);
  --c-underline: #fdd458;
  --c-ok: #27c46d;
  --c-ring: rgba(29, 97, 254, 0.25);
  --c-shadow: 0 8px 24px rgba(16, 30, 60, 0.07);
  --c-shadow-pop: 0 14px 34px rgba(31, 45, 61, 0.18);

  /* Typography */
  --font: "Google Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-full: 999px;
}
[data-theme="dark"] {
  --c-bg: #060c1d;
  --c-surface: #0f1a33;
  --c-card: #0f1a33;
  --c-tag: #17223d;
  --c-text: #e8ecf4;
  --c-muted: #93a1ba;
  --c-border: #24314e;
  --c-border-strong: #354362;
  --c-accent: #4f86ff;
  --c-accent-soft: #17274a;
  --c-quote: #b9c9f5;
  /* The dark accent is too glaring as a large surface — deep brand blue. */
  --c-hero-bg: #17429e;
  --c-ring: rgba(79, 134, 255, 0.35);
  --c-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --c-shadow-pop: 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* === 2. BASE ============================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
b,
strong {
  font-weight: 700;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
h1,
h2,
h3,
h4,
h5 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
blockquote {
  margin: 0 0 10px;
  padding: 10px 20px;
}
figure {
  margin: 0 0 10px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
code,
pre {
  font-family: var(--font-mono);
  font-size: 1em;
}
pre {
  overflow: auto;
}
button,
input,
select {
  color: inherit;
  font: inherit;
  margin: 0;
}
button,
[type="button"],
[type="reset"] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
input {
  line-height: normal;
}
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* Only the weight: block display and margins on <label> leaked into the
   label-based controls (search field, dropdown rows) and skewed their
   vertical alignment. */
label {
  font-weight: 700;
}
/* Touch: the default grey tap flash fights our own hover/active states. */
a,
button,
label {
  -webkit-tap-highlight-color: transparent;
}

/* === 3. UI ================================================================ */

/* Shared page container — aligned with the header/footer inners. */
.md-container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Header (partials/site-header.njk) ------------------------------------ */
.sh {
  background: var(--c-bg);
}
.sh-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 940px;
  height: 58px;
  margin: 0 auto;
  padding: 0 20px;
}
.sh-brand {
  display: inline-flex;
  align-items: center;
}
.sh-brand img {
  display: block;
  height: 34px;
  width: auto;
  /* Optical: the mark's bottom "shadow" tab weighs it down — the geometric
     center matches the nav, but the eye reads it lower. */
  transform: translateY(-2px);
}
.sh-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sh-link {
  padding: 6px 11px;
  border-radius: var(--r-sm);
  color: var(--c-muted);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.sh-link:hover {
  color: var(--c-text);
  background: var(--c-surface);
}
.sh-link.is-current {
  color: var(--c-accent);
  background: var(--c-accent-soft);
}
.sh-sep {
  width: 1px;
  height: 18px;
  background: var(--c-border);
}
/* Phones: taller header controls — 30px chips are under Apple's 44px tap
   guidance; 36px plus the row's padding gets close without bloating the bar. */
@media (max-width: 599px) {
  .theme-toggle {
    width: 40px;
    height: 36px;
  }
  .lang-badge {
    min-width: 44px;
    height: 36px;
  }
  .sh-link {
    padding: 9px 13px;
  }
}

/* --- Theme toggle (header) ------------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-card);
  color: var(--c-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-icon {
  width: 15px;
  height: 15px;
}
.theme-toggle:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.theme-icon-sun {
  display: none;
}
[data-theme="dark"] .theme-icon-moon {
  display: none;
}
[data-theme="dark"] .theme-icon-sun {
  display: block;
}

/* --- Language switch (header) --------------------------------------------- */
.lang-change {
  display: flex;
  align-items: center;
  position: relative;
}
.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 38px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-card);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.lang-badge:hover {
  border-color: var(--c-accent);
  background: var(--c-surface);
}
.lang-toggle {
  cursor: pointer;
}
.lang-globe {
  /* Same footprint as .theme-icon so the two header buttons read as a pair. */
  width: 15px;
  height: 15px;
  color: var(--c-muted);
  flex: none;
}
.lang-chevron {
  width: 11px;
  height: 11px;
  color: var(--c-muted);
  transition: transform 0.15s ease-in-out;
}
.lang-change.is-open .lang-chevron {
  transform: rotate(180deg);
}
.lang-list {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 950;
  width: 200px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--c-shadow-pop);
}
.lang-change.is-open .lang-list {
  display: block;
}
.lang-list-title {
  padding: 6px 10px 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
}
a.lang-item:hover {
  background: var(--c-surface);
}
.lang-item.is-current {
  background: var(--c-accent-soft);
  font-weight: 600;
}
.lang-item.is-disabled {
  color: var(--c-muted);
  opacity: 0.6;
  cursor: default;
}
.lang-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--c-tag);
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text);
}
.lang-item-name {
  flex: 1;
}
.lang-item-soon {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Footer (partials/footer.njk) ----------------------------------------- */
.sf {
  font-family: var(--font);
}
.sf-top {
  border-top: 1px solid var(--c-border);
  padding: 26px 0;
}
.sf-inner {
  display: flex;
  flex-wrap: wrap;
  /* Brand sits on the top line of the (possibly two-row) nav, not centered. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 28px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Brand block on the left: logo + site name. */
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sf-brand img {
  display: block;
  height: 28px;
  width: auto;
  flex: none;
}
.sf-brand-name {
  color: var(--c-text);
  font-size: 14.5px;
  font-weight: 600;
}
/* Navigation on the right: tool links + the Kryptex CTA. */
.sf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 22px;
  max-width: 560px;
}
.sf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}
.sf-link:hover {
  color: var(--c-accent);
}
.sf-link-icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.sf-link-cta {
  color: var(--c-accent);
  font-weight: 700;
}
.sf-bottom {
  padding: 0 0 22px;
}
.sf-bottom .sf-inner {
  display: block;
  color: var(--c-muted);
  font-size: 12px;
}
@media (max-width: 599px) {
  .sf-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .sf-nav {
    justify-content: flex-start;
    gap: 12px 20px;
    max-width: none;
  }
  .sf-link {
    min-height: 30px;
  }
}

/* --- Ad slot (CoinTraffic, footer.njk) ------------------------------------- */
/* The banner is a fixed 728px-wide iframe; clip it so it can never force a
   horizontal page scroll on narrow screens. */
.cointraffic-b {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}
/* Clearfix for the ad's embed wrapper (injected markup expects it). */
.w-embed::before,
.w-embed::after {
  content: " ";
  display: table;
}
.w-embed::after {
  clear: both;
}

/* --- Coin / vendor icons (filters + cards + inner sidebar) ----------------- */

/* Coin logo before each name in the Coins filter — a round chip so the mixed
   icon set (some with their own backgrounds, some flat) reads consistently.
   Coins without an icon get an invisible spacer of the same size so every
   name lines up. */
.coin-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 50%;
  background: var(--c-tag);
  border: 1px solid var(--c-border);
  object-fit: contain;
  vertical-align: middle;
}
.coin-icon-empty {
  background: transparent;
  border-color: transparent;
}

/* Coin logo before each coin name on the miner cards (mirrors .vendor-icon in
   the Type field). Small round-cropped icon; the coin art is already colored,
   so no chip background is needed here. */
.coin-icon-card {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  vertical-align: -3px;
  border-radius: 50%;
  object-fit: contain;
}

/* GPU/CPU vendor logo next to its name in the "Type" field (card + sidebar).
   Sized to sit on the text baseline instead of the SVG's own tall viewBox. */
.vendor-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}

/* --- Kryptex Pool cross-link (home hero + inner pages) --------------------- */
.mdh-pool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding: 14px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  /* Barely-blue tint. */
  background: var(--c-accent-soft);
  font-family: var(--font);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mdh-pool:hover {
  border-color: var(--c-border-strong);
}
.mdh-pool:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 2px;
}
/* One text run: "Kryptex Pool: tagline" — no flex gap between the parts. */
.mdh-pool-copy {
  display: block;
  min-width: 0;
}
/* Uniform text: the label and the tagline read as one sentence. */
.mdh-pool-title,
.mdh-pool-tagline {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
}
.mdh-pool-arrow {
  color: var(--c-accent);
  flex: none;
  transition: transform 0.15s ease;
}
.mdh-pool-arrow svg {
  display: block;
  width: 15px;
  height: 15px;
}
.mdh-pool:hover .mdh-pool-arrow {
  transform: translateX(3px);
}
.mdi-pool {
  margin-top: 12px;
}

/* --- Lightbox (click-to-zoom prose images, app.js) -------------------------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(16, 30, 60, 0.9);
  cursor: zoom-out;
}
.lightbox-overlay img {
  max-width: 96vw;
  max-height: 92vh;
  border-radius: var(--r-xs);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* === 4. HOMEPAGE (mdh-*) ================================================== */
.mdh-main {
  background: var(--c-bg);
  font-family: var(--font);
  padding-bottom: 72px;
}

/* --- Hero band ------------------------------------------------------------ */
/* The hero is a rounded accent-blue card constrained to the content grid —
   same width as the catalog below. Everything inside sits on the brand blue,
   so the text/pills use on-accent whites instead of the page tokens.
   overflow:hidden clips the full-bleed pool strip to the card radius. */
.mdh-hero-band {
  position: relative;
  overflow: hidden;
  padding: 0 40px;
  background: var(--c-hero-bg);
  border-radius: var(--r-2xl);
}
.mdh-hero {
  position: relative;
  padding: 55px 0 50px;
}
/* Editorial two-column top row: the title on the left, the lead on the right,
   both aligned to the top. */
.mdh-hero-cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  /* Clear the absolutely-positioned fact pills in the top-right corner. */
  padding-top: 20px;
}
/* Desktop: the fact pills sit absolutely in the hero's top-right corner, so
   their wrapper dissolves; phones restore it as a centered flow row. */
.mdh-hero-foot {
  display: contents;
}
.mdh-hero-title {
  /* Keep the title at its natural width in the two-column row — the lead is
     the flexible one; otherwise long RU lines fold to three rows. */
  flex: none;
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 4.6vw, 33px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
/* Both title lines carry the brand yellow underline; the sparkles sit after
   the second line, outside the underlined spans. Em-based offset/thickness so
   the underline scales with the clamp()ed font and never strikes through the
   next line on small screens. */
.mdh-hero-title .u {
  text-decoration: underline;
  text-decoration-color: var(--c-underline);
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.3em;
}
.mdh-hero-title .spark {
  text-decoration: none;
  font-size: 0.8em;
}
.mdh-lead {
  flex: 0 1 460px;
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14.5px;
  line-height: 1.65;
}
.mdh-meta {
  position: absolute;
  top: 16px;
  right: -25px;
  display: flex;
  gap: 8px;
  /* A notch smaller than the regular pill size. */
  transform: scale(0.85);
  transform-origin: top right;
}
/* On-accent glass pill: the hero band is brand blue in both themes. */
.mdh-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
}
/* Dot + label as one unit so the pill's content never splits oddly. */
.mdh-pill-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mdh-pill strong {
  color: #fff;
  font-weight: 600;
}
.mdh-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ok);
  flex: none;
}

/* Pool link is the band's bottom strip: full parent width (bleeds through the
   band padding), a hairline top border, centered copy on the accent blue. */
.mdh-hero-band .mdh-pool {
  position: relative;
  justify-content: center;
  margin: 0 -40px;
  padding: 15px 40px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
}
.mdh-hero-band .mdh-pool-copy {
  flex: none;
}
.mdh-hero-band .mdh-pool-title,
.mdh-hero-band .mdh-pool-tagline {
  color: #fff;
}
.mdh-hero-band .mdh-pool-arrow {
  /* Pinned to the strip's right edge; copy stays centered. */
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}
.mdh-hero-band .mdh-pool:hover .mdh-pool-arrow {
  transform: translateY(-50%) translateX(3px);
}

/* --- Toolbar (heading + filters) ------------------------------------------- */
/* One row: the heading on the left, all filters right-aligned opposite it;
   wraps when the viewport can't fit both. */
.mdh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 40px 0 12px;
}
.mdh-toolbar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.mdh-h2 {
  margin: 0;
  color: var(--c-text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mdh-count {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 19px;
}
.mdh-controls {
  display: flex;
  /* No internal wrapping on desktop: the filter row either fits beside the
     heading or drops below it as ONE unit — long RU labels (or the visible
     Clear button) used to orphan a single chip onto a second line. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
}

/* Search-by-name — compact fixed width; the placeholder is a single word. */
.mdh-search {
  position: relative;
  flex: none;
  width: 100px;
}
.mdh-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}
.mdh-search input {
  width: 100%;
  height: 32px;
  padding: 0 12px 0 33px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-card);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mdh-search input::placeholder {
  color: var(--c-muted);
}
.mdh-search input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-ring);
}

/* Small screens: the toolbar stacks and the search takes a full row. */
@media (max-width: 767px) {
  .mdh-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .mdh-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex: none;
  }
  .mdh-search {
    width: 100%;
  }
}

/* Type chips — bordered pills, slightly squatter than the default control so
   the whole filter row sits on one horizontal axis with the search field. */
.mdh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-card);
  color: var(--c-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease,
    color 0.12s ease;
}
.mdh-chip:hover {
  border-color: var(--c-border-strong);
}
.mdh-chip:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 1px;
}
.mdh-chip.is-on {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.mdh-chip .vendor-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* Coins dropdown */
.mdh-dd {
  position: relative;
}
.mdh-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mdh-dd-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.mdh-dd.is-open .mdh-dd-chevron {
  transform: rotate(180deg);
}
.mdh-dd.has-selection .mdh-dd-toggle {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.mdh-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  /* Centered under the trigger chip on every desktop width. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: 250px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
  box-shadow: var(--c-shadow-pop);
  overflow: hidden;
}
.mdh-dd.is-open .mdh-dd-panel {
  display: block;
}
/* Narrow desktops: a panel centered on the right-edge chip would poke past
   the viewport — hug the row's right edge instead until there's room. */
@media (min-width: 768px) and (max-width: 1119px) {
  .mdh-dd-panel {
    left: auto;
    right: -8px;
    transform: none;
  }
}
.mdh-dd-search {
  padding: 8px;
  border-bottom: 1px solid var(--c-border);
}
.mdh-dd-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s ease;
}
.mdh-dd-search input:focus {
  border-color: var(--c-accent);
}
.mdh-dd-search input::placeholder {
  color: var(--c-muted);
}
.mdh-dd-list {
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
}
.mdh-check {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 7+7 keeps the approved row rhythm now that the label margin is gone. */
  padding: 7px 9px;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 13px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.mdh-check:hover {
  background: var(--c-surface);
}
.mdh-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--c-accent);
  flex: none;
}
.mdh-check .coin-icon {
  margin-right: 0;
}
.mdh-dd-empty {
  padding: 12px 14px;
  color: var(--c-muted);
  font-size: 13px;
}
.mdh-dd-clear {
  display: block;
  padding: 10px 14px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.mdh-dd-clear:hover {
  background: var(--c-accent-soft);
}

/* Reset-all — appears only when a filter is active */
.mdh-reset {
  border: 0;
  background: none;
  padding: 0 6px;
  color: var(--c-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mdh-reset:hover {
  color: var(--c-accent);
}
.mdh-reset[hidden] {
  display: none;
}

/* --- Cards grid ------------------------------------------------------------ */
.mdh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mdh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}
/* Hover affordance: a quiet accent arrow slides in at the top-right corner.
   Nucleo arrow-right as a mask so it takes the accent token as its color. */
.mdh-card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 15px;
  height: 15px;
  background: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12H21' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/%3E%3Cpath d='M14 19L21 12L14 5' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12H21' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/%3E%3Cpath d='M14 19L21 12L14 5' stroke='black' stroke-width='2' stroke-linecap='square' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mdh-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.mdh-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--c-shadow);
  transform: translateY(-2px);
}
/* Touch feedback: hover is invisible on phones, a light press-in is not. */
.mdh-card:active {
  transform: scale(0.985);
  transition-duration: 0.06s;
}
.mdh-card:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 2px;
}
.mdh-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.mdh-card-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  object-fit: contain;
  flex: none;
  background: var(--c-tag);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.mdh-card-id {
  display: block;
  flex: 1;
  min-width: 0;
}
.mdh-card-name {
  display: block;
  margin: 0;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdh-card-sub {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdh-card-sub .upd {
  opacity: 0.85;
}
.mdh-card-desc {
  margin: 2px 0 0;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdh-card-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Pin the chips to the card's bottom edge so a grid row of cards keeps its
     coins/type rows aligned regardless of description length. */
  margin-top: auto;
}
.mdh-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mdh-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--c-tag);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.mdh-tag.more {
  color: var(--c-muted);
}
.mdh-tag .coin-icon-card {
  margin-right: 0;
  vertical-align: 0;
}
.mdh-tag .vendor-icon {
  margin-right: 0;
  vertical-align: 0;
}

/* Empty state */
.mdh-empty {
  padding: 56px 20px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-xl);
  text-align: center;
}
.mdh-empty img {
  width: 44px;
  height: 44px;
}
.mdh-empty-title {
  margin-top: 12px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}
.mdh-empty-sub {
  margin-top: 4px;
  color: var(--c-muted);
  font-size: 13px;
}

/* --- Breakpoints ------------------------------------------------------------ */
@media (max-width: 899px) {
  .mdh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px) {
  .mdh-main {
    padding-bottom: 48px;
  }
  .mdh-hero-band {
    padding: 0 18px;
    border-radius: var(--r-xl);
  }
  .mdh-hero {
    padding: 28px 0 22px;
  }
  /* Phones: everything in the hero is centered; the pills are back in flow,
     so no top clearance is needed. */
  .mdh-hero-cols {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 0;
    text-align: center;
  }
  /* More air between the underlined lines at the small size. */
  .mdh-hero-title {
    line-height: 1.35;
  }
  .mdh-lead {
    flex: none;
    margin: 0;
  }
  .mdh-hero-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
  }
  .mdh-meta {
    position: static;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mdh-hero-band .mdh-pool {
    margin: 0 -18px;
    padding: 13px 18px;
  }
  .mdh-hero-band .mdh-pool-copy {
    align-items: center;
    text-align: center;
  }
  .mdh-hero-band .mdh-pool-arrow {
    display: none;
  }
  .mdh-grid {
    grid-template-columns: 1fr;
  }
  /* The coins panel is wider than its trigger chip; anchor it to the whole
     controls row instead so it spans the container and never leaves the
     viewport. */
  .mdh-controls {
    position: relative;
  }
  .mdh-dd {
    position: static;
  }
  .mdh-dd-panel {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
  }
  /* iOS zooms into inputs whose font-size is below 16px — keep the page
     steady when the search fields get focus. */
  .mdh-search input,
  .mdh-dd-search input {
    font-size: 16px;
  }
  .mdh-pool-copy {
    flex-direction: column;
    gap: 1px;
  }
}

/* === 5. INNER (mdi-*) ===================================================== */
.mdi-main {
  background: var(--c-bg);
  font-family: var(--font);
  padding: 28px 0 72px;
}

/* Download panel — the page "hero": identity left, OS buttons right. */
.mdi-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card);
}
.mdi-download.bottom {
  margin-top: 28px;
}
.mdi-download-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mdi-download-logo {
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  object-fit: contain;
  flex: none;
  background: var(--c-tag);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.mdi-download-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.mdi-download-title {
  margin: 0;
  color: var(--c-text);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mdi-download.bottom .mdi-download-title {
  font-size: 19px;
}
.mdi-download-version {
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 600;
}
.mdi-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Primary (download) button. */
.mdi-dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mdi-dl:hover {
  box-shadow: 0 6px 16px var(--c-ring);
  transform: translateY(-1px);
}
.mdi-dl:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 2px;
}
.mdi-dl:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition-duration: 0.06s;
}
.mdi-dl-icon {
  width: 14px;
  height: 14px;
}

/* Sidebar + article */
.mdi-layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  margin-top: 36px;
}
.mdi-aside {
  position: sticky;
  top: 24px;
  flex: 0 0 218px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mdi-aside-title {
  margin-bottom: 8px;
  color: var(--c-text);
  font-size: 14.5px;
  font-weight: 700;
}
.mdi-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mdi-toc-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  margin-left: -11px;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.mdi-toc-icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.mdi-toc-link:hover {
  color: var(--c-text);
  background: var(--c-surface);
}
.mdi-toc-link.is-current {
  color: var(--c-accent);
  background: var(--c-accent-soft);
  font-weight: 600;
}
.mdi-info-row {
  margin-bottom: 12px;
}
.mdi-info-label {
  margin-bottom: 3px;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mdi-info-value {
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.5;
}
.mdi-article {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .mdi-main {
    padding-top: 16px;
    padding-bottom: 48px;
  }
  .mdi-layout {
    flex-direction: column;
    /* In column direction the desktop flex-start would shrink the article to
       its content width, so wide <pre> blocks pushed the whole page sideways.
       Stretch keeps children at container width; pre scrolls internally. */
    align-items: stretch;
    gap: 28px;
    margin-top: 28px;
  }
  /* The aside dissolves: its children become items of the column layout, so
     the TOC can move above the article and Information below it. */
  .mdi-aside {
    display: contents;
  }
  /* TOC becomes a sticky, edge-to-edge, horizontally scrollable chip bar —
     section switching stays one thumb-reach away while reading. */
  .mdi-toc {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 500;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 10px 20px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
  }
  .mdi-toc::-webkit-scrollbar {
    display: none;
  }
  .mdi-toc .mdi-aside-title {
    display: none;
  }
  .mdi-toc-link {
    flex: none;
    margin-left: 0;
    padding: 7px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    background: var(--c-card);
    white-space: nowrap;
  }
  .mdi-toc-link.is-current {
    border-color: var(--c-accent);
  }
  .mdi-info {
    order: 1;
  }
  .mdi-download {
    padding: 16px;
  }
  .mdi-download-logo {
    width: 40px;
    height: 40px;
  }
  .mdi-download-title {
    font-size: 20px;
  }
  .mdi-download-actions {
    width: 100%;
  }
  .mdi-download-actions .mdi-dl {
    flex: 1;
    justify-content: center;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* --- 404 -------------------------------------------------------------------- */
.mdi-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44vh;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.mdi-404 img {
  width: 56px;
  height: 56px;
}
.mdi-404-code {
  margin: 14px 0 2px;
  color: var(--c-text);
  font-size: 40px;
  font-weight: 500;
}
.mdi-404-text {
  color: var(--c-muted);
  font-size: 14px;
}
.mdi-404 .mdi-dl {
  margin-top: 18px;
}

/* === 6. PROSE (article bodies) ============================================ */
.prose {
  color: var(--c-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
}
.prose p {
  margin: 0 0 4px;
}
.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 24px;
}
.prose li {
  margin: 4px 0;
}
.prose a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto;
  border-radius: var(--r-md);
}
.prose figure {
  margin: 18px 0;
}
.prose blockquote {
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-quote);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Terminal/CLI help blocks — Markdown fenced code renders as <pre><code>.
   Monospace so columns line up; scroll long lines instead of breaking the
   layout. */
pre {
  overflow-x: auto;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 16px;
  margin: 16px 0;
  -webkit-overflow-scrolling: touch;
}

/* Inline highlights — the terms the old Webflow content wrapped in <sup> as a
   styling hack, now semantic <mark>. Plain bold-coloured inline text (no
   background): matches the old site and keeps punctuation tight (e.g. "AMD,"). */
.prose mark {
  background: none;
  color: var(--c-accent);
  font-weight: 600;
}

/* Prose headings. The download panel owns the page <h1>; article sections
   begin at <h2> and retain a clear visual hierarchy below it. */
.prose h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 30px 0 12px;
}
.prose h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 26px 0 10px;
}
.prose h4 {
  font-size: 18px;
  line-height: 1.35;
  margin: 22px 0 8px;
}
.prose h5 {
  font-size: 16px;
  line-height: 1.4;
  margin: 18px 0 8px;
}
.prose :first-child {
  margin-top: 0;
}

/* Tables (recovered from stray Markdown pipe-tables in some descriptions). */
.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 18px 0;
  font-size: 0.92em;
}
.prose th,
.prose td {
  border: 1px solid var(--c-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: var(--c-surface);
  font-weight: 600;
  color: var(--c-text);
}
/* Wide tables (e.g. the xmrig 5-column algorithm list) scroll on small screens
   instead of breaking the layout. */
@media (max-width: 600px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Click-to-zoom prose images. Each <img> is wrapped in <a class="img-zoom">;
   app.js builds the full-screen overlay on demand (no dependency). */
.prose .img-zoom {
  display: block;
  cursor: zoom-in;
}