/* Hand-authored rules, layered on top of site.css. site.css began as a one-shot
   PurgeCSS + minify of the old Webflow stylesheets, but there is no regeneration
   step — it is now hand-maintained too. Prefer adding new rules here; edit
   site.css directly only for surgery on the inherited Webflow base. */

/* Filter dropdowns (Coins/Type): site.css lays the scroll area out as
   column-reverse, which parks the initial scroll at the END of the list — so
   opening Coins showed the last coins, not the first. The markup now orders
   the list before the Clear button, so switch to a normal column: the list
   opens at the top (first coin) and the sticky Clear button stays at the
   bottom. */
.filter_dropdown .filter_form {
  flex-direction: column;
}

/* Coin-filter search box — pinned at the top of the Coins dropdown (the list
   grew long enough to need it). Sits above the scrollable checkbox list; the
   list scrolls under it. app.js filters rows by substring on the coin code. */
.coin-search-wrap {
  padding: 8px;
  border-bottom: 1px solid #eceef2;
  background: #fff;
}
.coin-search {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e4eaec;
  border-radius: 6px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  color: #1a2332;
  outline: none;
  transition: border-color 0.12s ease;
}
.coin-search:focus {
  border-color: #1d61fe;
}
.coin-search::placeholder {
  color: #96a4ab;
}
.coin-search-empty {
  padding: 12px 14px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  color: #8592a8;
}

/* 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.
   White circle in light mode, grey in dark. Coins without an icon get an
   invisible spacer of the same size so every name lines up. */
.coin-icon {
  display: inline-block;
  width: 19px;
  height: 19px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e7eaf0;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 9px;
}
.coin-icon-empty {
  background: transparent;
  border-color: transparent;
}
[data-theme="dark"] .coin-icon {
  background: #28324a;
  border-color: #38466680;
}
[data-theme="dark"] .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;
}

/* Footer "Instruments" links — icon to the left of each tool name. Best
   ASICs/GPUs/CPUs reuse pool.kryptex.com's hardware nav icons; Calculator/
   Overclocking DB are redrawn in the same two-tone style to match
   kryptex.com's own Tools menu (see static/images/tool-*.svg). */
.link-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-footer-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Home cards: site.css hardcodes a fixed .card height (330px). Clamp the
   description to 3 lines (ellipsis beyond that) so every card takes the
   same height regardless of how long its description text is. */
.card-p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Coins/Type rows on home cards: home.njk caps the Coins value to 4 entries
   (see the `take` filter), rolling the rest into a "+N" badge. Type is never
   capped/truncated — at the default 12px font a full 4-vendor list
   ("NVIDIA, AMD, INTEL, CPU") didn't fit the 3-column card width and wrapped
   to a second line; dropping to 11px gives it (and the 4-coin row) real
   headroom on one line at desktop and mobile widths. */
.card-info .text-block-3,
.card-info .content_card-info-text,
.card-info .coins-counter {
  font-size: 11px;
}

/* Home card grid: at tablet widths (768-991px) the container shrinks to
   728px (site.css) but the grid is still 3 columns, squeezing each card to
   ~190px — too narrow for the Coins/Type rows above to stay on one line no
   matter the font size. Desktop/mobile are the priority; tablet just needs
   to not be broken, so drop to 2 columns in that range instead of chasing
   a 3rd column that doesn't have room for its content. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .collection-item-3.w-col-4 {
    width: 50%;
  }
}

/* Terminal/CLI help blocks in the prose — Markdown fenced code blocks render 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: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  background: #f6f7f9;
  border: 1px solid #e7e9ee;
  border-radius: 8px;
  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: #1d61fe;
  font-weight: 600;
}

/* Prose headings. The content uses <h1>…<h4> as in-article section dividers
   (the page title is the download heading), and several <h1>s per page at the
   global 38px read as shouty. Scale them to a calmer hierarchy. */
.prose h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 30px 0 12px;
}
.prose h2 {
  font-size: 21px;
  line-height: 1.3;
  margin: 26px 0 10px;
}
.prose h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 22px 0 8px;
}
.prose h4 {
  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 #e1e6f0;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: #f3f6fc;
  font-weight: 600;
  color: #101e3c;
}
/* 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;
  }
}

/* Language switch — a small dropdown, styled after pool.kryptex.com's locale
   picker (bordered chip trigger + a list of badge+name rows). Only languages
   with real content are links; the rest show a "Soon" tag and aren't
   clickable — see languages.js for the list and the `available` flag. */
.lang-change {
  position: relative;
}
.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
  background: #fff;
  color: #101e3c;
  font-family: Montserrat, sans-serif;
  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: #1d61fe;
  background: #f8f9f9;
}
.lang-toggle {
  cursor: pointer;
}
.lang-chevron {
  color: #616d82;
  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: #fff;
  border: 1px solid #eceef2;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(31, 45, 61, 0.18);
}
.lang-change.is-open .lang-list {
  display: block;
}
.lang-list-title {
  padding: 6px 10px 4px;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #616d82;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  color: #101e3c;
  text-decoration: none;
}
a.lang-item:hover {
  background: #f5f8ff;
}
.lang-item.is-current {
  background: #ebf1ff;
  font-weight: 600;
}
.lang-item.is-disabled {
  color: #b2bac6;
  cursor: default;
}
.lang-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 4px;
  border-radius: 5px;
  background: #f1f3f6;
  font-size: 10px;
  font-weight: 700;
  color: #101e3c;
}
.is-disabled .lang-item-badge {
  color: #b2bac6;
  background: #f6f7f9;
}
.lang-item-name {
  flex: 1;
}
.lang-item-soon {
  font-size: 10px;
  font-weight: 600;
  color: #8592a8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 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;
}
.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: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* Download card: roomier padding + spacing in the stacked variant */
.title-w-btn {
  padding: 28px 32px;
}
.title-w-btn.bottom {
  padding: 32px;
  row-gap: 20px;
  align-items: center;
}
.title-w-btn.bottom .title-main-inner {
  justify-content: center;
}
@media screen and (max-width: 479px) {
  .title-w-btn {
    padding: 20px;
  }
}

/* Intro banner: smaller text than inherited 18px */
.prose blockquote {
  font-size: 15px;
  line-height: 20px;
}

/* ============================================================================
   Dark theme. site.css is a hand-maintained Webflow export with hard-coded
   light colors, so rather than refactor all of it into variables we layer a
   scoped override here, keyed off data-theme="dark" on <html> (set before
   paint by head-icons.njk, toggled by app.js). Palette mirrors
   pool.kryptex.com's dark theme (dark navy page, lighter navy surfaces).
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  margin-right: 10px;
  border: 1px solid #dfe3ea;
  border-radius: 6px;
  background: #fff;
  color: #616d82;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.theme-icon {
  width: 15px;
  height: 15px;
}
.theme-toggle:hover {
  color: #1d61fe;
  border-color: #1d61fe;
}
.theme-icon-sun {
  display: none;
}

/* The CoinTraffic banner is a fixed 728px-wide ad iframe. On narrow screens it
   overflowed the viewport, forcing a horizontal page scroll and throwing off
   viewport-anchored positioning (the language dropdown landed off-screen).
   Clip it to its container so it can never widen the page. */
.cointraffic-b {
  overflow: hidden;
}

/* Mobile header: there are only a few nav items (Miners, theme toggle,
   language), so drop the hamburger and lay them out inline on the top bar like
   desktop. The container becomes a flex row: logo on the left, the nav group
   on the right, all vertically centered. */
@media screen and (max-width: 991px) {
  .w-nav-button {
    display: none !important;
  }
  .container-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
  }
  /* Webflow's clearfix pseudo-elements would become flex items and eat the
     space-between edges, pushing logo + nav toward the middle. */
  .container-2::before,
  .container-2::after {
    display: none;
  }
  .container-2 .image {
    margin-top: 0;
  }
  .w-nav-menu {
    display: flex !important;
    position: static;
    inset: auto;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .nav-menu .nav-link-always-active {
    margin: 0;
    padding: 0;
  }
  .nav-menu .theme-toggle,
  .nav-menu .lang-change {
    margin: 0;
  }
  .nav-menu .lang-change {
    left: 0;
  }
}

/* Card version ("Version 5"): never let the number wrap under the label. */
.version-card-head {
  white-space: nowrap;
}
[data-theme="dark"] .theme-icon-moon {
  display: none;
}
[data-theme="dark"] .theme-icon-sun {
  display: block;
}

[data-theme="dark"] {
  --d-bg: #060c1d;
  --d-surface: #0f1a33;
  --d-surface-2: #17223d;
  --d-text: #e8ecf4;
  --d-muted: #93a1ba;
  --d-border: #24314e;
  --d-accent: #4f86ff;
  --d-tint: #17274a;
}

[data-theme="dark"] body,
[data-theme="dark"] .section,
[data-theme="dark"] .column {
  background-color: var(--d-bg);
  color: var(--d-text);
}

/* Header */
[data-theme="dark"] .navigation,
[data-theme="dark"] .navbar-2 {
  background-color: var(--d-bg);
}
[data-theme="dark"] .container-2 {
  box-shadow: 0 1px 0 0 var(--d-border);
}
[data-theme="dark"] .nav-link-always-active {
  color: var(--d-muted);
}
[data-theme="dark"] .nav-link-always-active:hover,
[data-theme="dark"] .nav-link-always-active.w--current {
  color: var(--d-text);
}
[data-theme="dark"] .theme-toggle {
  background: var(--d-surface);
  border-color: var(--d-border);
  color: var(--d-muted);
}
[data-theme="dark"] .theme-toggle:hover {
  color: var(--d-accent);
  border-color: var(--d-accent);
}
[data-theme="dark"] .nav-menu {
  background-color: var(--d-bg);
}

/* Hero banner: the bright brand blue (#1d61fe) is too vivid against the dark
   page, so dim it to a calmer, deeper blue in dark mode. */
[data-theme="dark"] .head-home {
  background-color: #17429e;
}

/* Pool cross-link band */
[data-theme="dark"] .pool-ext-block {
  box-shadow: 0 1px 0 0 var(--d-border);
}
[data-theme="dark"] .pool-ext-link {
  color: var(--d-accent);
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .card-main {
  border-color: var(--d-border);
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .card-main:hover {
  background-color: var(--d-surface);
}
[data-theme="dark"] .h3-card,
[data-theme="dark"] .text-block-3,
[data-theme="dark"] .version-top,
[data-theme="dark"] .update-card-data,
[data-theme="dark"] .heading-miners,
[data-theme="dark"] .heading-9,
[data-theme="dark"] .dropdown-text,
[data-theme="dark"] .dropdown-text.coins,
[data-theme="dark"] .coins-btn {
  color: var(--d-text);
}
[data-theme="dark"] .card-p,
[data-theme="dark"] .version-top.version,
[data-theme="dark"] .update-card-data.date,
[data-theme="dark"] .coins-counter {
  color: var(--d-muted);
}
[data-theme="dark"] .content_card-info-text {
  background-color: var(--d-surface-2);
  border-color: var(--d-border);
  color: var(--d-muted);
}
[data-theme="dark"] .card-btn {
  background-color: var(--d-surface-2);
  color: var(--d-accent);
}
[data-theme="dark"] .card-btn:hover {
  background-color: var(--d-accent);
  color: #fff;
}

/* Filter dropdowns (coins/type) + search */
[data-theme="dark"] .form-block-2,
[data-theme="dark"] .filter_dropdown .w-dropdown-list.w--open .form-block-2 {
  background-color: var(--d-surface);
  border-color: var(--d-border);
}
[data-theme="dark"] .coin-search-wrap {
  background-color: var(--d-surface);
  border-bottom-color: var(--d-border);
}
[data-theme="dark"] .coin-search {
  background-color: var(--d-surface-2);
  border-color: var(--d-border);
  color: var(--d-text);
}
[data-theme="dark"] .coin-search::placeholder {
  color: var(--d-muted);
}
[data-theme="dark"] .coin-search-empty {
  color: var(--d-muted);
}
[data-theme="dark"] .filter_dropdown .checkbox_field {
  border-bottom-color: var(--d-border);
}
[data-theme="dark"] .filter_dropdown .checkbox_field:hover {
  background-color: var(--d-surface-2);
}
[data-theme="dark"] .checkbox_label {
  color: var(--d-text);
}
[data-theme="dark"] .reset-link {
  background-color: var(--d-surface-2);
  color: var(--d-accent);
  border-top-color: var(--d-border);
}
[data-theme="dark"] .reset-link:hover {
  background-color: var(--d-tint);
}
[data-theme="dark"] .filter_empty {
  background-color: var(--d-surface);
}
[data-theme="dark"] .empty-text {
  color: var(--d-text);
}

/* Language switch */
[data-theme="dark"] .lang-badge {
  background: var(--d-surface);
  border-color: var(--d-border);
  color: var(--d-text);
}
[data-theme="dark"] .lang-badge:hover {
  border-color: var(--d-accent);
  background: var(--d-surface-2);
}
[data-theme="dark"] .lang-list {
  background: var(--d-surface);
  border-color: var(--d-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .lang-item {
  color: var(--d-text);
}
[data-theme="dark"] a.lang-item:hover {
  background: var(--d-surface-2);
}
[data-theme="dark"] .lang-item.is-current {
  background: var(--d-tint);
}
[data-theme="dark"] .lang-item-badge {
  background: var(--d-surface-2);
  color: var(--d-text);
}
[data-theme="dark"] .lang-list-title,
[data-theme="dark"] .lang-item-soon {
  color: var(--d-muted);
}

/* Inner (miner) pages */
[data-theme="dark"] .title-w-btn {
  background-color: var(--d-surface);
  border-color: var(--d-border);
}
[data-theme="dark"] .heading-title-in,
[data-theme="dark"] .inner-title-sidebar,
[data-theme="dark"] .inner-title-sidebar-m,
[data-theme="dark"] .text-block-14 {
  color: var(--d-text);
}
[data-theme="dark"] .text-block-15,
[data-theme="dark"] .tag {
  color: var(--d-muted);
}
[data-theme="dark"] .link-sidebar {
  color: var(--d-accent);
}
[data-theme="dark"] .head-download-link {
  background-color: var(--d-tint);
  border-color: var(--d-accent);
  color: var(--d-accent);
}

/* Prose (article body) */
[data-theme="dark"] .prose {
  color: var(--d-text);
}
[data-theme="dark"] .prose mark {
  color: var(--d-accent);
}
[data-theme="dark"] .prose blockquote {
  background-color: var(--d-tint);
  color: #b9c9f5;
}
[data-theme="dark"] pre {
  background: var(--d-surface-2);
  border-color: var(--d-border);
}
[data-theme="dark"] .prose th,
[data-theme="dark"] .prose td {
  border-color: var(--d-border);
}
[data-theme="dark"] .prose thead th {
  background: var(--d-surface-2);
  color: var(--d-text);
}

/* Footer */
[data-theme="dark"] .footer-top-2 {
  background-color: var(--d-surface);
  box-shadow: 0 -1px 0 0 var(--d-border);
}
[data-theme="dark"] .footer-rights,
[data-theme="dark"] .footer-bottom {
  background-color: var(--d-bg);
}
[data-theme="dark"] .footer-main {
  border-top-color: var(--d-border);
}
[data-theme="dark"] .text-block-10,
[data-theme="dark"] .footer-rights {
  color: var(--d-muted);
}
[data-theme="dark"] .link-sm {
  color: var(--d-accent);
}
[data-theme="dark"] .link-sm.link-footer,
[data-theme="dark"] .text-block-38 {
  color: var(--d-text);
}
[data-theme="dark"] .btn-footer-kryptex-2 {
  background-color: var(--d-tint);
  color: var(--d-accent);
}
[data-theme="dark"] .btn-footer-kryptex-2:hover {
  background-color: var(--d-surface-2);
}

/* Footer (mobile): the return-to-home logo used to drop below the "Try Kryptex"
   button and float off to the left. Keep the button and logo on one row with
   the logo on the right (as on desktop); the Instruments list takes the full
   first row above them. */
@media screen and (max-width: 767px) {
  .footer-top-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 26px;
  }
  .footer-top-inner .flex-block {
    flex-basis: 100%;
  }
  .footer-top-2 .btn-footer-kryptex-2,
  .footer-top-2 .brand-link-2.footer-sm,
  .footer-top-2 .image.footer-sm {
    margin-top: 0;
  }
  .footer-top-2 .brand-link-2.footer-sm {
    float: none;
  }
}