/* 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. */

/* 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;
}