/* =====================================================================
   MEROKALAM BLOG — SHARED COMPONENT LIBRARY
   ---------------------------------------------------------------------
   Every one of these classes used to be redefined, by hand, inside a
   <style> tag at the top of each individual blog post file. That is
   the actual reason font sizes and spacing drifted from post to post.
   This file is now the single source of truth. Change a component
   here once and every post that uses it updates automatically.

   Authoring: don't write this markup by hand. Use the Nunjucks macros
   in src/_includes/macros/components.njk (flowList, decisionWrap,
   checkboxList, goldList, checkList, dataTable, toolsLanding, faqBlock,
   relatedBlock, callout) — they output exactly this markup from data.
   ===================================================================== */

:root {
  --mk-blue: #2563eb;
  --mk-cyan: #0891b2;
  --mk-green: #16a34a;
  --mk-purple: #7c3aed;
  --mk-orange: #ea580c;
  --mk-pink: #db2777;
  --mk-amber: #d97706;
  --mk-slate: #475569;
  --mk-ink: #1e293b;
  --mk-body: #374151;
  --mk-muted: #64748b;
  --mk-border: #e2e8f0;
  --mk-bg-soft: #f8fafc;
  --mk-radius-sm: .6rem;
  --mk-radius-md: .9rem;
  --mk-radius-lg: 1.1rem;
  --mk-shadow-sm: 0 2px 8px rgba(15,23,42,.05);
  --mk-shadow-md: 0 10px 26px rgba(15,23,42,.08);
}
[data-theme="dark"] {
  --mk-ink: #e5e7eb;
  --mk-body: #cbd5e1;
  --mk-muted: #94a3b8;
  --mk-border: #2a3547;
  --mk-bg-soft: #111827;
}

/* Callouts ---------------------------------------------------------- */
.callout { border-radius: var(--mk-radius-md); padding: 1.05rem 1.3rem; margin: 1.2rem 0; border: 1px solid transparent; }
.callout p { margin: 0; font-size: .93rem; line-height: 1.7; color: inherit; }
.callout.success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.callout.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.callout.info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
[data-theme="dark"] .callout.success { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.3); color: #86efac; }
[data-theme="dark"] .callout.warn { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.32); color: #fcd34d; }
[data-theme="dark"] .callout.info { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.32); color: #93c5fd; }

/* Flow / step lists --------------------------------------------------*/
.flow-list { display: flex; flex-direction: column; margin: 1.2rem 0; }
.flow-step { display: flex; gap: 1rem; position: relative; padding-bottom: 1.05rem; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #dbeafe; }
[data-theme="dark"] .flow-step:not(:last-child)::before { background: #1e3a8a; }
.flow-num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--mk-blue), var(--mk-cyan)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .86rem; z-index: 1; box-shadow: 0 4px 10px rgba(37,99,235,.28); }
.flow-body { padding-top: .35rem; min-width: 0; }
.flow-body strong { display: block; color: var(--mk-ink); font-size: .94rem; margin-bottom: .15rem; }
.flow-body span { color: var(--mk-muted); font-size: .85rem; line-height: 1.6; }

/* Decision / comparison cards ---------------------------------------*/
.decision-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin: 1.2rem 0; }
.decision-card { background: #fff; border: 1px solid var(--mk-border); border-top: 3px solid var(--mk-border); border-radius: var(--mk-radius-md); padding: 1.2rem 1.3rem; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.decision-card:hover { box-shadow: var(--mk-shadow-md); }
[data-theme="dark"] .decision-card { background: #0f172a; }
.decision-card h4 { margin: 0 0 .7rem; font-size: 1rem; color: var(--mk-ink); }
.decision-card.pass { border-top-color: var(--mk-green); }
.decision-card.pass h4 { color: var(--mk-green); }
.decision-card.ng { border-top-color: var(--mk-amber); }
.decision-card.ng h4 { color: var(--mk-amber); }
.decision-card .decision-big { font-size: 1.4rem; font-weight: 800; margin: 0 0 .5rem; }
.decision-card .decision-text { font-size: .86rem; color: var(--mk-body); line-height: 1.65; margin: 0; }

/* Checkbox / feature grids -------------------------------------------*/
.checkbox-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .65rem; margin: 1.2rem 0; }
.checkbox-item { position: relative; display: block; background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); padding: .8rem .95rem .8rem 2.95rem; font-size: .87rem; color: var(--mk-body); line-height: 1.55; transition: border-color .15s, box-shadow .15s; }
.checkbox-item:hover { border-color: #93c5fd; box-shadow: var(--mk-shadow-sm); }
[data-theme="dark"] .checkbox-item { background: #0f172a; }
.checkbox-item .cb-mark { position: absolute; left: .95rem; top: .82rem; width: 22px; height: 22px; border-radius: 6px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.22); color: var(--mk-green); display: flex; align-items: center; justify-content: center; }
.checkbox-item .cb-mark svg { width: 13px; height: 13px; display: block; }

/* Gold / positive-note rows ------------------------------------------*/
.gold-list { display: flex; flex-direction: column; gap: .75rem; margin: 1.2rem 0; }
.gold-row { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--mk-green); border-radius: var(--mk-radius-sm); padding: .95rem 1.1rem; }
.gold-row strong { display: block; color: #14532d; font-size: .93rem; margin-bottom: .25rem; }
.gold-row p { margin: 0; font-size: .86rem; color: #166534; line-height: 1.6; }
[data-theme="dark"] .gold-row { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
[data-theme="dark"] .gold-row strong { color: #86efac; }
[data-theme="dark"] .gold-row p { color: #bbf7d0; }

/* Trouble / caution rows ----------------------------------------------*/
.trouble-list { display: flex; flex-direction: column; gap: .75rem; margin: 1.2rem 0; }
.trouble-row { background: #fff; border: 1px solid var(--mk-border); border-left: 4px solid var(--mk-amber); border-radius: var(--mk-radius-sm); padding: .9rem 1.1rem; }
.trouble-row strong { display: block; color: var(--mk-ink); font-size: .93rem; margin-bottom: .25rem; }
.trouble-row p { margin: 0; font-size: .86rem; color: var(--mk-body); line-height: 1.6; }
[data-theme="dark"] .trouble-row { background: #0f172a; }

/* Source / check-list rows --------------------------------------------*/
.check-list { display: flex; flex-direction: column; gap: .85rem; margin: 1.2rem 0; }
.check-row { display: flex; align-items: center; gap: 1.1rem; background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); padding: 1.1rem 1.3rem; flex-wrap: wrap; }
[data-theme="dark"] .check-row { background: #0f172a; }
.check-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.check-icon svg { width: 22px; height: 22px; display: block; }
.check-body { flex: 1 1 260px; min-width: 0; }
.check-name { font-size: .98rem; font-weight: 800; color: var(--mk-ink); margin: 0; }
.check-name a { color: inherit; text-decoration: none; }
.check-name a:hover { text-decoration: underline; }
.check-meta { font-size: .78rem; color: var(--mk-muted); margin: .15rem 0 .4rem; }
.check-desc { font-size: .85rem; color: var(--mk-body); line-height: 1.6; margin: 0; }
.check-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--mk-blue), var(--mk-cyan)); padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) {
  .check-row { align-items: flex-start; }
  .check-body { flex: 1 1 calc(100% - 64px); }
  .check-badge { flex: 0 0 calc(100% - 64px); max-width: calc(100% - 64px); margin: .6rem 0 0 calc(46px + 1.1rem); text-align: center; box-sizing: border-box; }
}

/* Data tables ----------------------------------------------------------*/
.blog-table-wrap { clear: both; margin: 1.2rem 0; overflow-x: auto; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); }
.blog-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.blog-table th { text-align: left; background: var(--mk-bg-soft); color: var(--mk-ink); font-weight: 800; padding: .8rem 1rem; border-bottom: 1px solid var(--mk-border); white-space: nowrap; }
.blog-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--mk-border); color: var(--mk-body); vertical-align: top; }
.blog-table tr:last-child td { border-bottom: none; }
.blog-table tr.hl td { background: rgba(37,99,235,.035); }
[data-theme="dark"] .blog-table tr.hl td { background: rgba(37,99,235,.08); }

/* Tools cross-promo landing --------------------------------------------*/
.mk-tools-landing { margin: 1.5rem 0 1.7rem; padding: 1.2rem; border: 1px solid #bfdbfe; border-radius: var(--mk-radius-lg); background: linear-gradient(135deg, #eff6ff 0%, #fff 58%, #ecfeff 100%); box-shadow: var(--mk-shadow-md); }
.mk-tools-landing-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; }
.mk-tools-kicker { margin: 0 0 .25rem; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-blue); }
.mk-tools-landing h2 { margin: 0; font-size: 1.15rem; color: #0f172a; }
.mk-tools-landing p { margin: .35rem 0 0; color: #475569; font-size: .9rem; line-height: 1.6; }
.mk-tools-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .55rem .9rem; border-radius: .7rem; border: 1px solid #bfdbfe; background: #fff; color: #1d4ed8; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mk-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: .75rem; margin-top: 1rem; }
.mk-tool-card { display: block; padding: .95rem 1rem; border: 1px solid #dbeafe; border-radius: .85rem; background: rgba(255,255,255,.9); text-decoration: none; color: var(--mk-ink); transition: box-shadow .15s, border-color .15s; }
.mk-tool-card strong { display: block; margin-bottom: .25rem; color: #1d4ed8; font-size: .92rem; }
.mk-tool-card span { display: block; color: #475569; font-size: .83rem; line-height: 1.55; }
.mk-tool-card:hover { border-color: #93c5fd; background: #fff; box-shadow: var(--mk-shadow-md); }
[data-theme="dark"] .mk-tools-landing { background: linear-gradient(135deg,#0f2547 0%,#111827 62%,#083344 100%); border-color: #1e3a8a; }
[data-theme="dark"] .mk-tools-landing h2, [data-theme="dark"] .mk-tool-card { color: #e5e7eb; }
[data-theme="dark"] .mk-tools-landing p, [data-theme="dark"] .mk-tool-card span { color: #cbd5e1; }
[data-theme="dark"] .mk-tools-cta, [data-theme="dark"] .mk-tool-card { background: #0f172a; border-color: #334155; }
@media (max-width: 640px) {
  .mk-tools-landing { padding: 1rem; }
  .mk-tools-landing-head { grid-template-columns: 1fr; }
  .mk-tools-cta { width: 100%; box-sizing: border-box; }
  .mk-tools-grid { grid-template-columns: 1fr; }
}

/* Interactive tool boxes (calculators, stage helpers) -------------------*/
.nb-tool { background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); padding: 1.4rem 1.5rem; margin: 1.2rem 0; }
[data-theme="dark"] .nb-tool { background: #0f172a; }
.nb-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; margin-bottom: 1rem; }
.nb-field { display: flex; flex-direction: column; gap: .35rem; }
.nb-field label { font-size: .78rem; font-weight: 700; color: var(--mk-slate); }
.nb-field input[type="date"], .nb-field input[type="number"], .nb-field input[type="text"], .nb-field select { font-size: .9rem; padding: .55rem .7rem; border: 1px solid var(--mk-border); border-radius: .6rem; color: var(--mk-ink); background: var(--mk-bg-soft); }
.nb-btn { font-size: .85rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--mk-blue), var(--mk-cyan)); border: none; padding: .65rem 1.3rem; border-radius: .6rem; cursor: pointer; transition: transform .1s, box-shadow .15s; }
.nb-btn:hover { box-shadow: 0 8px 18px rgba(37,99,235,.28); transform: translateY(-1px); }
.nb-result { margin-top: 1rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: .7rem; padding: 1rem 1.2rem; display: none; }
.nb-result.show { display: block; }
[data-theme="dark"] .nb-result { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.3); }
.nb-result .nb-r-label { font-size: .76rem; font-weight: 700; color: #166534; text-transform: uppercase; letter-spacing: .03em; }
.nb-result .nb-r-date { font-size: 1.3rem; font-weight: 800; color: #14532d; margin: .25rem 0; }
.nb-result p { font-size: .8rem; color: #166534; margin: .4rem 0 0; }
[data-theme="dark"] .nb-result .nb-r-label, [data-theme="dark"] .nb-result .nb-r-date, [data-theme="dark"] .nb-result p { color: #bbf7d0; }
.nb-note { font-size: .78rem; color: var(--mk-muted); margin-top: .9rem; }

.stage-tabs { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.stage-opt { text-align: left; font-size: .86rem; font-weight: 700; padding: .7rem 1rem; border-radius: .6rem; border: 1px solid var(--mk-border); background: var(--mk-bg-soft); color: var(--mk-body); cursor: pointer; transition: background .15s, color .15s; }
.stage-opt.active { background: linear-gradient(135deg, var(--mk-blue), var(--mk-cyan)); color: #fff; border-color: transparent; }
.stage-output { background: #eff6ff; border: 1px solid #dbeafe; border-radius: .7rem; padding: 1rem 1.2rem; display: none; }
.stage-output.show { display: block; }
[data-theme="dark"] .stage-output { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.3); }
.stage-output .so-label { font-size: .76rem; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: .03em; }
.stage-output p { font-size: .86rem; color: #1e3a8a; margin: .4rem 0 0; line-height: 1.6; }
[data-theme="dark"] .stage-output .so-label, [data-theme="dark"] .stage-output p { color: #93c5fd; }

/* Related links footer strip -------------------------------------------*/
.blog-related { margin: 2rem 0; padding: 1.3rem 1.4rem; background: var(--mk-bg-soft); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); }
.blog-related h3 { margin: 0 0 .9rem; font-size: 1.02rem; color: var(--mk-ink); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: .6rem; }
.rel-link { display: block; padding: .7rem .9rem; background: #fff; border: 1px solid var(--mk-border); border-radius: .7rem; font-weight: 700; font-size: .87rem; text-decoration: none; color: var(--rel-color, var(--mk-blue)); border-left: 3px solid var(--rel-color, var(--mk-blue)); transition: box-shadow .15s, transform .15s; }
.rel-link:hover { box-shadow: var(--mk-shadow-sm); transform: translateX(2px); }
[data-theme="dark"] .rel-link { background: #0f172a; }

/* WPM / skill-progress stat list (e.g. "Net WPM: Day 1" -> "After 8 weeks").
   Named .mk-wpm-progress (not .mk-progress) to avoid colliding with the
   sitewide reading-progress bar in blog-redesign.css, which uses
   .mk-progress for a fixed position:fixed top-of-page bar -- reusing that
   name here caused this component to inherit position:fixed and overlay
   the article instead of rendering inline. */
.mk-wpm-progress { display: flex; flex-direction: column; gap: 1rem; margin: 1.3rem 0; }
.mk-prog-item { background: #fff; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-md); padding: 1rem 1.2rem; }
[data-theme="dark"] .mk-prog-item { background: #0f172a; }
.pi-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .88rem; }
.pi-top span:first-child { font-weight: 700; color: var(--mk-ink); }
.pi-top .pr { font-weight: 800; color: var(--mk-blue); white-space: nowrap; }
.pi-track { position: relative; height: 8px; border-radius: 999px; background: var(--mk-bg-soft); margin-top: .6rem; overflow: hidden; }
.pi-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mk-blue), var(--mk-cyan)); }

/* Device illustration thumbnail -- original vector artwork (a generic
   phone/laptop silhouette with a colored screen accent), not photography.
   Used on product-review posts (iPhone/mobile/laptop buying guides) next
   to each featured model so readers get a quick visual, without using any
   copyrighted manufacturer photography. flex:0 0 auto sizing lets it drop
   into an existing flex row (e.g. .phone-card-top) or stack as a block
   above a card's text without disrupting that card's own layout. */
.mk-device-shot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--mk-bg-soft); border: 1px solid var(--mk-border); border-radius: 12px; padding: .5rem .7rem; margin: 0; }
[data-theme="dark"] .mk-device-shot { background: #0f172a; }
.mk-device-shot svg { display: block; }

/* Float layout: image sits at the left of the section, prose text wraps to its right -- used right before a single flowing <p> (iPhone series intros, per-model write-ups in the mobile buying guide). .blog-table-wrap has clear:both above so a price table that follows always starts full-width below the image, never squeezed beside it. Falls back to a plain block above the text on narrow screens, where there isn't enough width left beside the image for the wrap to look good. */
.mk-device-shot.mk-shot-float { float: left; margin: 0 1.1rem .75rem 0; }
@media (max-width: 480px) { .mk-device-shot.mk-shot-float { float: none; margin: 0 0 .8rem; } }

/* Flex layout: image sits beside a product card's stacked head text (rank/tier, name, tag, price). Wrap a card's existing head lines in .mk-card-head-text inside a .mk-card-head row next to the image. */
.mk-card-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .2rem; }
.mk-card-head-text { flex: 1; min-width: 0; }