/* ============================================================================
   md-front — the page stylesheet, built on the UI kit in kit.css:

     1. TOKENS — the site's variable names, aliased to the UI kit
        (static/css/kit.css, loaded first): colors/shadows for both themes,
        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.
   ========================================================================== */

/* === 1. TOKENS ============================================================ */
/* The site's tokens are aliases of the UI kit (static/css/kit.css, ported
   from Figma). Light and dark values live in the kit; the names below stay
   so the existing rules keep working while pages move onto kit components. */
:root {
  /* Palette */
  --c-bg: var(--k-surface-sheet);
  --c-surface: var(--k-surface-s1);
  --c-card: var(--k-surface-raised);
  --c-tag: var(--k-surface-s2);
  --c-text: var(--k-text-high);
  --c-muted: var(--k-text-med);
  --c-border: var(--k-outline-med);
  --c-border-strong: var(--k-outline-high);
  --c-accent: var(--k-primary-med);
  --c-accent-soft: var(--k-primary-base-alpha);
  --c-quote: var(--k-text-primary-high);
  --c-hero-bg: var(--k-brand-500);
  --c-underline: #fdd458;
  --c-ok: var(--k-success-med);
  --c-ring: rgba(29, 97, 254, 0.25);
  --c-shadow: var(--k-e3);
  --c-shadow-pop: var(--k-e5);

  /* Typography */
  --font: var(--k-font);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Layout: page column shared by the header, main container and footer. */
  --w-page: 1280px;
  --w-gutter: 32px;

  /* Radii — the kit's small_component steps */
  --r-xs: var(--k-rc-xs);
  --r-sm: var(--k-rc-sm);
  --r-md: var(--k-rc-md);
  --r-lg: var(--k-rc-lg);
  --r-xl: var(--k-rc-xl);
  --r-2xl: var(--k-rb-xs);
  --r-full: var(--k-r-round);
}

[data-theme="dark"] {
  /* The dark accent is too glaring as a large surface — deep brand blue. */
  --c-hero-bg: var(--k-brand-700);
  --c-ring: rgba(59, 120, 255, 0.35);
}

/* === 2. BASE ============================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
/* Sticky footer: the page is a full-height column and <main> takes the
   slack, so a short page still ends with the footer at the screen bottom. */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--k-surface-canvas);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
}
body > main {
  flex: 1 0 auto;
}
/* Airy frame: header and main form one white sheet with big rounded corners
   on the pale blue canvas; the footer is a blue panel under it. */
/* Bento frame: no sheet — the header and the cards sit straight on the grey
   canvas. */
body > .sh,
body > main {
  margin-left: 12px;
  margin-right: 12px;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body > main {
  /* The hero glow bleeds past the column; clip it without making a scroll
     container (dropdown panels still overflow vertically). */
  overflow-x: clip;
}
@media (max-width: 599px) {
  body > .sh, body > main { margin-left: 6px; margin-right: 6px; }
}
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-inline-start: 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. */
/* Untitled UI container: 1280px with 32px gutters (1216px content), 20px on
   phones. */
.md-container {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--w-gutter);
}
@media (max-width: 767px) {
  :root {
    --w-gutter: 20px;
  }
}

/* --- Navigation (partials/site-header.njk) ---------------------------------- */
/* Uses logical properties (inline-start/end), so the bar mirrors on RTL
   pages by itself. Sits straight on the canvas, no card: the logo on the left; on the right
   plain dark text links (the current one on a faint ink tile, not a pill), a
   "/" and the language and theme controls as borderless ghost buttons. */
/* Top padding equals the page's 12px below the bar, so the links sit midway
   between the window edge and the hero card. */
.sh { padding-top: 12px; }
.sh-inner {
  display: flex;
  align-items: center;
  height: 56px;
  max-width: calc(var(--w-page) - 2 * var(--w-gutter));
  padding-block: 0;
  padding-inline: 8px 4px;
}
.sh-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--k-sp-md);
  color: var(--k-text-high);
  text-decoration: none;
}
/* Logotype (static/images/md-logo-{light,dark}.png, 320×48: GPU mark +
   name): black text on the light theme, white on the dark one. */
.sh-logo { display: block; width: auto; height: 25px; }
.sh-logo--dark,
[data-theme="dark"] .sh-logo--light { display: none; }
[data-theme="dark"] .sh-logo--dark { display: block; }
.sh-brand { margin-inline-end: auto; }
.sh-nav { display: flex; align-items: center; }
.sh-links { display: flex; align-items: center; gap: 4px; }
.sh-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--k-text-high);
  font-size: 15px;
  font-weight: var(--k-fw-normal);
  line-height: var(--u-lh-tmd);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.sh-link:hover { background: rgba(17, 17, 17, 0.05); }
.sh-link.is-current { background: rgba(17, 17, 17, 0.08); }
[data-theme="dark"] .sh-link:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .sh-link.is-current { background: rgba(255, 255, 255, 0.1); }
.sh-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sh-tools::before {
  content: "/";
  margin-block: 0;
  margin-inline: 10px 12px;
  color: var(--k-text-low);
  font-size: 15px;
}
.sh .theme-toggle.k-btn,
.sh .lang-badge.k-btn {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--k-text-high);
}
.sh .theme-toggle.k-btn { width: 40px; }
.sh .theme-toggle.k-btn:hover,
.sh .lang-badge.k-btn:hover { background: rgba(17, 17, 17, 0.05); }
[data-theme="dark"] .sh .theme-toggle.k-btn:hover,
[data-theme="dark"] .sh .lang-badge.k-btn:hover { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 599px) {
  .sh { padding-top: 6px; }
  .sh-tools::before { margin-inline: 2px 4px; }
  /* Three links and the tools do not fit a phone in every language
     ("Оборудование"): the logo already leads home, so Miners drops out, and
     the language button loses its globe. */
  .sh-link-home { display: none; }
  .sh .lang-badge .lang-globe { display: none; }
  .sh-inner { height: 48px; padding-inline: var(--w-gutter) 12px; }
  /* Phones: the GPU mark only — the logotype cropped to its first 53px of 320. */
  .sh-logo { width: 28px; height: 25px; object-fit: cover; object-position: left center; }
  .sh-link { height: 36px; padding: 0 10px; }
  .sh .theme-toggle.k-btn, .sh .lang-badge.k-btn { height: 36px; }
  .sh .theme-toggle.k-btn { width: 36px; }
}
/* Narrow phones, long labels (ru at 360px): tighter link padding. */
@media (max-width: 399px) {
  .sh-inner { padding-inline-end: 4px; }
  .sh-link { padding: 0 8px; }
  .sh-tools::before { margin-inline: 2px; }
}
@media (max-width: 359px) {
  .sh-inner { padding-inline-end: 0; }
  .sh-link { padding: 0 6px; }
  .sh-tools::before, .sh .lang-badge .lang-chevron { display: none; }
  .sh-links { gap: 0; }
  .sh-tools { gap: 0; }
}

/* --- Theme toggle (header) — a kit tertiary icon button ------------------- */
.theme-toggle .theme-icon {
  width: 16px;
  height: 16px;
}
.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;
}
/* The language toggle is a kit tertiary button (.k-btn--sm). */
.lang-badge {
  gap: var(--k-sp-xs);
  font-size: var(--k-fs-caption2);
  font-weight: var(--k-fw-semibold);
  letter-spacing: 0.02em;
}
.lang-toggle {
  cursor: pointer;
}
.lang-badge .lang-globe {
  /* Same footprint as .theme-icon so the two header buttons read as a pair. */
  width: 16px;
  height: 16px;
  color: var(--c-muted);
  flex: none;
}
.lang-badge .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);
  inset-inline-end: 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);
}
/* dir="auto" keeps each name's own word order, but would also push an
   Arabic or Persian name to the far edge of the stretched box: "start" here
   is the list's (the page's) start, so every name sits next to its badge. */
.lang-item-name {
  flex: 1;
  text-align: start;
}
.lang-item-soon {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Footer (partials/footer.njk) ----------------------------------------- */
/* A bento card like the rest of the page: brand + blurb on the left, three
   link columns on the right, the copyright on a dashed rule at the foot. */
.sf {
  padding: 0 12px 12px;
  font-family: var(--font);
}
/* Black card, light text (same in both themes). */
.sf-top,
.sf-bottom {
  background: #111111;
}
[data-theme="dark"] .sf-top,
[data-theme="dark"] .sf-bottom {
  background: #000000;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.sf-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 48px;
  margin-top: 0;
  padding-top: 32px;
  padding-bottom: 24px;
  border-radius: 28px 28px 0 0;
}
.sf-bottom {
  padding-top: 0;
  padding-bottom: 24px;
  border-radius: 0 0 28px 28px;
}
/* The two halves are one card inside the page column. */
.sf-top.md-container,
.sf-bottom.md-container {
  max-width: calc(var(--w-page) - 2 * var(--w-gutter));
  padding-left: 32px;
  padding-right: 32px;
}
.sf-about { max-width: 300px; }
.sf-brand { display: inline-flex; align-items: center; gap: var(--k-sp-md); text-decoration: none; }
/* The footer is always black: the dark-theme logotype. */
.sf-logo { display: block; flex: none; width: auto; height: 26px; }
.sf-blurb { margin: 10px 0 0; color: rgba(255, 255, 255, 0.55); font-size: var(--u-fs-tsm); line-height: var(--u-lh-tsm); }
.sf-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px 56px;
}
.sf-col-title {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--u-fs-txs);
  font-weight: var(--k-fw-medium);
  line-height: var(--u-lh-txs);
}
.sf-col ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-normal);
  line-height: var(--u-lh-tsm);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.sf-link:hover { opacity: 0.6; }
.sf-link-icon { flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, 0.5); }
.sf-link-vendor { display: inline-flex; width: 16px; justify-content: center; }
.sf-link-vendor .vendor-icon { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
/* Try Kryptex: a black pill, the page's strong accent. */
.sf-link-cta {
  white-space: nowrap;
  height: 32px;
  margin-top: 4px;
  padding-block: 0;
  padding-inline: 14px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-weight: var(--k-fw-medium);
}
.sf-link-cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.sf-link-cta:hover { opacity: 1; }
.sf-link-cta:hover svg { transform: translateX(2px); }
.sf-copy {
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--u-fs-txs);
  line-height: var(--u-lh-txs);
}
@media (max-width: 899px) {
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 599px) {
  .sf { padding: 0 6px 6px; }
  .sf-top.md-container, .sf-bottom.md-container { padding-left: 20px; padding-right: 20px; }
  .sf-top { padding-top: 24px; border-radius: 24px 24px 0 0; }
  .sf-bottom { border-radius: 0 0 24px 24px; }
  .sf-cols { gap: 20px 16px; }
}

/* --- 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. */
/* Outlined (no fill) bento card in the page column, with a small "Ad" label;
   collapsed entirely until the banner iframe is there (no ad, an ad blocker,
   or the phone placement left empty). */
.cointraffic-b {
  display: none;
  position: relative;
  max-width: calc(var(--w-page) - 2 * var(--w-gutter));
  margin-bottom: 12px;
  padding: 36px 24px 24px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 28px;
  overflow: hidden;
}
[data-theme="dark"] .cointraffic-b { border-color: rgba(255, 255, 255, 0.14); }
.cointraffic-b:has(iframe) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cointraffic-label {
  position: absolute;
  top: 12px;
  inset-inline-start: 20px;
  color: var(--k-text-low);
  font-size: var(--u-fs-txs);
  line-height: var(--u-lh-txs);
}
.cointraffic-b iframe { display: block; max-width: 100%; border-radius: 8px; }
@media (max-width: 599px) {
  .cointraffic-b { margin-left: 6px; margin-right: 6px; padding: 32px 12px 12px; border-radius: 24px; }
}
/* 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-inline-end: 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-inline-end: 3px;
  vertical-align: -1px;
}

/* --- 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-*) ================================================== */
/* The production layout (blue hero card, toolbar, card grid) on the airy kit. */
.mdh-main {
  padding-top: 12px;
  padding-bottom: 48px;
  font-family: var(--font);
}

/* Home layout around the kit components: the catalog block under the hero,
   its toolbar (heading left, search and dropdowns right) and the phone
   stacking of that toolbar. */
.mdh-catalog { padding-top: 55px; }
.mdh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}
.mdh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-sp-md);
}
.mdh-dd-types .k-dd-panel { width: 220px; }
.mdh-dd-sort .k-dd-panel { width: 240px; }
.mdh-dd-sort .k-dd-toggle .mdh-sort-icon { width: 16px; height: 16px; }
/* Phones: the sort pill is the icon alone, so the three pills keep one row
   (the open menu marks the current choice). */
@media (max-width: 599px) {
  .mdh-controls { gap: 6px; }
  .mdh-controls .k-dd-toggle.k-btn { padding: 0 12px 0 16px; }
  .mdh-dd-sort .k-dd-toggle.k-btn { width: 40px; padding: 0; }
  .mdh-dd-sort .k-dd-chevron { display: none; }
  .mdh-dd-sort [data-sort-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 599px) {
  .mdh-main { padding-top: 6px; padding-bottom: 48px; }
  .mdh-catalog { padding-top: 36px; }
}
@media (max-width: 767px) {
  .mdh-toolbar { flex-direction: column; align-items: stretch; }
  .mdh-controls { position: relative; }
  .k-search, .k-search.k-input { width: 100%; }
  .k-dd { position: static; }
  .k-dd-panel { left: 0; right: 0; width: auto; }
  .k-search input, .k-dd-search input { font-size: 16px; }
  .k-kbd { display: none; }
}

/* === 5. INNER (mdi-*) ===================================================== */
/* Miner, coin, hardware, index and 404 pages: the home page's canvas and
   kit components — a page hero (k-hero--page), light bento cards for the
   content, the miner card grid straight on the canvas. */
.mdi-main {
  padding: 12px 0 72px;
  font-family: var(--font);
}
/* A bento block right under the hero or another block in the page column
   (not inside the miner page aside, which spaces its cards with a gap). */
.mdi-main .md-container > .k-hero + .k-bento,
.mdi-main .md-container > .k-bento + .k-bento { margin-top: 12px; }

/* --- Miner page hero: logo tile + "Download X", OS buttons on the right --- */
.mdi-hero .k-hero-cols { align-items: center; }
.mdi-download-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The platform logo(s) in place of a download arrow: Windows and HiveOS in
   their colours, Linux and mmpOS in the button's text colour. */
.mdi-dl.k-btn { gap: 9px; }
.mdi-dl-os { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.mdi-dl .os-icon { width: 18px; height: 18px; fill: currentColor; }

/* The repeat under the article: a soft tile with the logo, title, buttons. */
.mdi-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 32px;
  padding-block: 16px;
  padding-inline: 20px 16px;
  border-radius: 20px;
  background: var(--k-surface-soft);
}
.mdi-download-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mdi-download-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; object-fit: contain; }
.mdi-download-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.mdi-download-title {
  margin: 0;
  color: var(--k-text-high);
  font-size: 20px;
  font-weight: var(--k-fw-medium);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.mdi-download-version { color: var(--k-text-low); font-size: var(--u-fs-tsm); }

/* --- Contents + information (left), article (right) ---------------------- */
.mdi-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
}
.mdi-aside {
  position: sticky;
  top: 12px;
  display: flex;
  flex: 0 0 280px;
  flex-direction: column;
  gap: 12px;
}
.mdi-aside .k-bento { padding: 20px; }
.mdi-aside-title {
  margin: 0 0 10px;
  padding: 0 10px;
  color: var(--k-text-low);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-medium);
}
.mdi-info .mdi-aside-title { padding: 0; }
/* Kryptex Pool at the foot of the sidebar: an ink card at the sidebar's
   text size, the name over the tagline, a round arrow button on the right
   that turns towards "open" on hover. */
.mdi-pool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 18px;
  padding-inline: 20px 60px;
  border-radius: 24px;
  background: var(--k-ink);
  color: var(--k-surface-sheet);
  text-decoration: none;
}
.mdi-pool-title { font-size: 15px; font-weight: var(--k-fw-medium); line-height: 22px; }
.mdi-pool-tagline { opacity: 0.6; font-size: 13px; line-height: 18px; }
.mdi-pool-arrow {
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--k-surface-sheet);
  color: var(--k-ink);
}
.mdi-pool-arrow svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.mdi-pool:hover .mdi-pool-arrow svg { transform: translateX(2px) rotate(-45deg); }
.mdi-pool:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px; }
.mdi-toc { display: flex; flex-direction: column; gap: 2px; }
/* Like the header links: plain ink text, the current one on a soft tile. */
.mdi-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--k-text-high);
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.mdi-toc-icon { flex: none; width: 16px; height: 16px; color: var(--k-text-low); }
.mdi-toc-link:hover { background: var(--k-surface-soft); }
.mdi-toc-link.is-current { background: var(--k-surface-soft-hover); font-weight: var(--k-fw-medium); }
.mdi-toc-link.is-current .mdi-toc-icon { color: var(--k-text-high); }
.mdi-info-row + .mdi-info-row { margin-top: 16px; }
.mdi-info-label {
  margin-bottom: 8px;
  color: var(--k-text-low);
  font-size: 13px;
}
.mdi-info-value { color: var(--k-text-high); font-size: var(--u-fs-tsm); line-height: 1.5; }
.mdi-info-coins .k-chip { height: 28px; padding: 0 10px; font-size: 13px; }
.mdi-article { flex: 1; min-width: 0; padding: 40px; }

@media (max-width: 1023px) {
  .mdi-aside { flex-basis: 240px; }
  .mdi-article { padding: 32px; }
}
@media (max-width: 767px) {
  .mdi-hero .k-hero-cols { align-items: stretch; }
  .mdi-hero .mdi-download-actions,
  .mdi-download .mdi-download-actions { width: 100%; }
  .mdi-download-actions .mdi-dl { flex: 1; }
  .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: 12px;
    margin-top: 12px;
  }
  /* The aside dissolves: its children become items of the column layout, so
     the contents can move above the article and Information below it. */
  .mdi-aside { display: contents; }
  /* Contents become a sticky, horizontally scrollable row of outlined pills
     on the canvas, the current one filled with ink — the home toolbar's
     dropdown pills. Section switching stays one thumb-reach away. */
  .mdi-toc.k-bento {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 500;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--w-gutter));
    padding: 8px var(--w-gutter);
    border-radius: 0;
    background: var(--k-surface-canvas);
  }
  .mdi-toc::-webkit-scrollbar { display: none; }
  .mdi-toc .mdi-aside-title { display: none; }
  .mdi-toc-link {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(17, 17, 17, 0.16);
    border-radius: var(--k-r-round);
    font-size: var(--u-fs-tsm);
    white-space: nowrap;
  }
  [data-theme="dark"] .mdi-toc-link { border-color: rgba(255, 255, 255, 0.16); }
  .mdi-toc-link:hover { background: transparent; border-color: rgba(17, 17, 17, 0.32); }
  .mdi-toc-link.is-current,
  [data-theme="dark"] .mdi-toc-link.is-current { border-color: var(--k-ink); background: var(--k-ink); color: var(--k-surface-sheet); }
  .mdi-toc-link.is-current .mdi-toc-icon { color: currentColor; }
  .mdi-info { order: 1; }
  .mdi-pool { order: 2; }
  .mdi-article { padding: 24px 20px; }
}
@media (max-width: 599px) {
  .mdi-main { padding: 6px 0 48px; }
}

/* --- 404 -------------------------------------------------------------------- */
.mdi-404 {
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 420px;
  text-align: center;
}
.mdi-404::after { background: radial-gradient(ellipse 46% 60% at 50% 50%, var(--k-pastel-slate) 40%, transparent 100%); }
.mdi-404 img { width: 56px; height: 56px; }
.mdi-404 .k-hero-title { font-size: 96px; }
.mdi-404 .k-lead { flex: none; }
.mdi-404 .k-btn { margin-top: 12px; }

/* === 6. PROSE (article bodies) ============================================ */
.prose {
  /* The page column is wide (1600px); keep article lines readable. */
  max-width: 860px;
  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-inline-start: 24px;
}
.prose li {
  margin: 4px 0;
}
.prose a {
  color: var(--k-text-high);
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.prose a:hover { text-decoration-color: currentColor; }
[data-theme="dark"] .prose a { text-decoration-color: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .prose a:hover { text-decoration-color: currentColor; }
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto;
  border-radius: 16px;
}
.prose figure {
  margin: 18px 0;
}
.prose blockquote {
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--k-surface-tile);
  color: var(--k-text-high);
  font-size: 15px;
  line-height: 1.6;
}

/* 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(--k-surface-soft);
  border: 0;
  border-radius: 16px;
  padding: 16px 18px;
  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 semibold ink (no background, no
   colour: ink is the UI's only accent), which keeps punctuation tight
   (e.g. "AMD,"). */
.prose mark {
  background: none;
  color: var(--k-text-high);
  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;
  font-weight: var(--k-fw-medium);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 32px 0 12px;
}
.prose h3 {
  font-weight: var(--k-fw-medium);
  letter-spacing: -0.02em;
  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: start;
  vertical-align: top;
}
.prose thead th {
  background: var(--k-surface-soft);
  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;
}

/* === 7. COIN, HARDWARE AND INDEX PAGES ===================================== */
/* /{lang}/{coin}/, /{lang}/{hardware}/ and their indexes: a page hero, then
   bento blocks and the miner card grid from the kit. */

/* Pool block: copy left, the address on a white tile right. */
.md-coin-pool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 20px 48px;
}
.md-coin-pool-copy p {
  margin: 10px 0 0;
  color: var(--k-text-med);
  font-size: 15px;
  line-height: 1.6;
}
.md-coin-pool-addr { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.md-coin-pool-code {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  padding-inline: 18px 10px;
  border-radius: 16px;
  background: var(--k-surface-tile);
}
.md-coin-pool-code code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  color: var(--k-text-high);
  font: 14px/20px var(--font-mono);
  white-space: nowrap;
  scrollbar-width: none;
}
/* Copy the pool address: a soft pill, a check and "Copied" for a moment. */
.md-copy.k-btn { flex: none; gap: 6px; }
.md-copy svg { width: 16px; height: 16px; }
.md-copy .md-copy-done,
.md-copy.is-copied .md-copy-icon { display: none; }
.md-copy.is-copied .md-copy-done { display: block; }
.md-copy.is-copied { --b-bg: var(--k-ink); --b-bg-h: var(--k-ink); --b-tx: var(--k-surface-sheet); --b-tx-h: var(--k-surface-sheet); }
/* Code blocks in articles (app.js wraps each <pre>): an icon-only copy
   button top right, white on the grey block; the text keeps clear of it. */
.prose-code { position: relative; margin: 16px 0; }
.prose-code pre { margin: 0; padding-right: 56px; }
.prose-copy.k-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; --b-bg: var(--k-surface-card); --b-bg-h: var(--k-surface-soft-hover); }
.prose-copy.k-btn.is-copied { --b-bg: var(--k-ink); --b-bg-h: var(--k-ink); --b-tx: var(--k-surface-sheet); --b-tx-h: var(--k-surface-sheet); }
/* Phones: the icon alone, so the address keeps the width. */
@media (max-width: 599px) {
  .md-copy.k-btn { width: 36px; padding: 0; }
  .md-copy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.md-coin-pool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--k-ink);
  font-size: var(--u-fs-tsm);
  font-weight: var(--k-fw-medium);
  text-decoration: none;
}
.md-coin-pool-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.md-coin-pool-link:hover svg { transform: translateX(3px); }

/* Coins a hardware type supports: a heading over a row of chip links. */
.md-hw-coins .k-heading { margin-bottom: 16px; }
.md-tag-links,
.mdi-info-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.md-tag-links .k-chip { height: 32px; padding: 0 12px; font-size: var(--u-fs-tsm); }
.md-tag-links .coin-icon-card { width: 16px; height: 16px; }

/* How-to under the grid. */
.md-coin-howto { margin-top: 32px; }

/* Coins / hardware index: light tiles on the canvas. */
.md-index { padding-top: 32px; }
.md-coin-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.md-coin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding-block: 0;
  padding-inline: 18px 14px;
  border-radius: 20px;
  background: var(--k-surface-card);
  color: var(--k-text-high);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
/* Ink under the pointer, like the miner cards. */
.md-coin-item:hover { background: #111; color: #f4f4f2; }
.md-coin-item:hover .md-coin-item-ticker { color: rgba(244, 244, 242, 0.55); }
.md-coin-item:hover .k-chip { --t-bg: rgba(255, 255, 255, 0.12); --t-tx: #f4f4f2; }
.md-coin-item:hover .vendor-icon:not(img) { color: #f4f4f2; }
/* Black coin marks (Pearl, Ergo) would vanish on the ink tile: a white disc. */
.md-coin-item:hover > img:first-child { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; }
[data-theme="dark"] .md-coin-item:hover { background: #f4f4f2; color: #111; }
[data-theme="dark"] .md-coin-item:hover .md-coin-item-ticker { color: rgba(17, 17, 17, 0.55); }
[data-theme="dark"] .md-coin-item:hover .k-chip { --t-bg: rgba(0, 0, 0, 0.07); --t-tx: #111; }
[data-theme="dark"] .md-coin-item:hover .vendor-icon:not(img) { color: #111; }
.md-coin-item > svg,
.md-coin-item > img:first-child,
.md-coin-item .coin-icon { flex: none; width: 24px; height: 24px; }
.md-coin-item-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--k-fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-coin-item-ticker { flex: none; margin-inline-start: auto; color: var(--k-text-low); font-size: 13px; white-space: nowrap; }
.md-coin-item-count { margin-inline-start: auto; }
.md-coin-item-ticker + .k-chip { margin-inline-start: 0; }
.md-coin-item .k-chip { flex: none; height: 26px; padding: 0 9px; font-size: 12px; }

@media (max-width: 1023px) {
  .md-coin-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .md-coin-pool { grid-template-columns: minmax(0, 1fr); }
  .md-coin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* minmax(0, …): a plain 1fr column will not shrink below a long coin name.
   Phones get one column, so names and tickers ("XTM-RX") are not cut. */
@media (max-width: 480px) {
  .md-coin-list { grid-template-columns: minmax(0, 1fr); }
  .md-index { padding-top: 20px; }
}

/* === RTL (ar, fa) =========================================================
   Pages in right-to-left languages get dir="rtl" on <html> (site.js `rtl`).
   Flex and grid rows flip on their own, and the components use logical
   properties (inline-start/end) for their side offsets and spacing, so they
   mirror by themselves. This block covers the rest: the Arabic-script font,
   code that must stay left-to-right, mixed-script dates, the hero pattern's
   fade and the arrows that point "forward". */
html:lang(ar),
html:lang(fa) {
  --font: "Vazirmatn", "Google Sans", "Segoe UI", Tahoma, sans-serif;
}
[dir="rtl"] body { font-family: var(--font); }

/* Code, commands and tickers stay left-to-right inside an RTL page. */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .k-dd-link-meta,
[dir="rtl"] .md-coin-item-ticker { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] pre { text-align: left; }
/* Monospace fonts have no Arabic script, and the system hands it to Courier
   New, which draws the letters unjoined. Translated help text inside code
   blocks gets Vazirmatn through a face limited to the Arabic range (listed
   first, so Latin keeps the monospace font and the columns line up). Same
   file as Google Fonts' Vazirmatn Arabic subset; it only loads where Arabic
   text sits in code. */
@font-face {
  font-family: "MD Arabic Code";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/vazirmatn/v16/Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
[dir="rtl"] pre,
[dir="rtl"] code { font-family: "MD Arabic Code", var(--font-mono); }
/* "UPD 16 أكتوبر" mixes a Latin label and an Arabic month: keep it one
   left-to-right run so the parts do not swap places. */
[dir="rtl"] .upd { direction: ltr; unicode-bidi: isolate; }

/* Hero pattern: the fade runs towards the text, which starts on the right. */
[dir="rtl"] .k-hero::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 30%, var(--k-pastel-slate) 78%),
    linear-gradient(270deg, var(--k-pastel-slate) 0%, var(--k-pastel-slate) 30%, transparent 75%);
}

/* Forward arrows (row link, miner card, sidebar pool card, coin pool link,
   footer CTA, the "All coins →" glyph) are mirrored, with each hover motion
   applied inside the mirror so it runs the other way too. */
[dir="rtl"] .md-arrow { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .k-rowlink-arrow,
[dir="rtl"] .sf-link-cta svg,
[dir="rtl"] .md-coin-pool-link svg,
[dir="rtl"] .mdi-pool-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .k-rowlink:hover .k-rowlink-arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .md-coin-pool-link:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .sf-link-cta:hover svg { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .mdi-pool:hover .mdi-pool-arrow svg { transform: scaleX(-1) translateX(2px) rotate(-45deg); }
[dir="rtl"] .k-mcard-arrow { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .k-mcard:hover .k-mcard-arrow,
[dir="rtl"] .k-mcard:focus-visible .k-mcard-arrow { transform: scaleX(-1); }