/* ============================================================
 * codehaks-theme.css
 * Bootstrap 5.3+ theme overrides for Codehaks
 * Lapis palette · Paper background · Persian-first
 *
 * Usage:
 *   <link rel="stylesheet" href="bootstrap.min.css">
 *   <link rel="stylesheet" href="codehaks-theme.css">
 *
 * For Persian / RTL pages, use bootstrap.rtl.min.css instead.
 * ============================================================ */

/* ── Brand tokens ───────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  /* Codehaks tokens (own namespace, prefix --ck-) */
  --ck-ink:          #0E1320;
  --ck-ink-soft:     #1A2238;
  --ck-paper:        #EFECE3;
  --ck-paper-soft:   #E8E4D7;
  --ck-card:         #FFFFFF;
  --ck-stone:        #5F6371;
  --ck-line:         #D2D2D2;
  --ck-line-soft:    rgba(14, 19, 32, 0.10);

  --ck-accent:       #1F3D7A;
  --ck-accent-deep:  #142B5C;
  --ck-accent-soft:  #DCE3F2;
  --ck-accent-ink:   #FFFFFF;

  /* Persian-tile blue (RGB triplet for Bootstrap rgba() compositing) */
  --ck-accent-rgb:   31, 61, 122;
  --ck-ink-rgb:      14, 19, 32;
  --ck-paper-rgb:    239, 236, 227;

  /* Type stacks */
  --ck-sans: "Space Grotesk", "Vazirmatn", system-ui, sans-serif;
  --ck-fa:   "Vazirmatn", "Space Grotesk", system-ui, sans-serif;
  --ck-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Bootstrap variable overrides ─────────────────────────── */
  --bs-primary:        var(--ck-accent);
  --bs-primary-rgb:    var(--ck-accent-rgb);
  --bs-primary-text-emphasis:   var(--ck-accent-deep);
  --bs-primary-bg-subtle:       var(--ck-accent-soft);
  --bs-primary-border-subtle:   #B8C4E0;

  --bs-secondary:       var(--ck-stone);
  --bs-secondary-rgb:   95, 99, 113;

  --bs-success:         #2A6B4F;
  --bs-success-rgb:     42, 107, 79;
  --bs-info:            #2D6A9F;
  --bs-info-rgb:        45, 106, 159;
  --bs-warning:         #C68F2E;
  --bs-warning-rgb:     198, 143, 46;
  --bs-danger:          #B23A2F;
  --bs-danger-rgb:      178, 58, 47;

  --bs-light:           var(--ck-paper);
  --bs-light-rgb:       var(--ck-paper-rgb);
  --bs-dark:            var(--ck-ink);
  --bs-dark-rgb:        var(--ck-ink-rgb);

  --bs-body-bg:         var(--ck-paper);
  --bs-body-bg-rgb:     var(--ck-paper-rgb);
  --bs-body-color:      var(--ck-ink);
  --bs-body-color-rgb:  var(--ck-ink-rgb);
  --bs-emphasis-color:  var(--ck-ink);
  --bs-secondary-color: var(--ck-stone);
  --bs-tertiary-color:  #8A8F9C;

  --bs-body-font-family: var(--ck-fa);
  --bs-body-font-size:   1.0625rem;     /* 17px */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;

  --bs-heading-color:    var(--ck-ink);

  --bs-link-color:       var(--ck-accent);
  --bs-link-color-rgb:   var(--ck-accent-rgb);
  --bs-link-hover-color: var(--ck-accent-deep);
  --bs-link-hover-color-rgb: 20, 43, 92;

  --bs-border-color:        var(--ck-line);
  --bs-border-color-translucent: var(--ck-line-soft);
  --bs-border-radius:       0;
  --bs-border-radius-sm:    0;
  --bs-border-radius-lg:    0;
  --bs-border-radius-xl:    0;
  --bs-border-radius-xxl:   0;
  --bs-border-radius-pill:  0;
  --bs-border-width:        1px;

  --bs-focus-ring-color:    rgba(var(--ck-accent-rgb), 0.30);
  --bs-focus-ring-width:    2px;
  --bs-focus-ring-opacity:  1;

  --bs-code-color:       var(--ck-accent-deep);
  --bs-highlight-bg:     rgba(var(--ck-accent-rgb), 0.14);

  --bs-font-monospace:   var(--ck-mono);
  --bs-font-sans-serif:  var(--ck-sans);
}

/* ── Dark mode (optional) ───────────────────────────────────── */
[data-bs-theme="dark"] {
  --ck-ink:          #F5F2EB;
  --ck-paper:        #0B0E16;
  --ck-card:         #141823;
  --ck-stone:        #8A8F9C;
  --ck-line:         #2A2F3C;
  --ck-line-soft:    rgba(245, 242, 235, 0.10);

  --ck-accent:       #5179C8;
  --ck-accent-deep:  #3D5FAA;
  --ck-accent-soft:  #1C2540;
  --ck-accent-ink:   #0B0E16;
  --ck-accent-rgb:   81, 121, 200;
  --ck-ink-rgb:      245, 242, 235;
  --ck-paper-rgb:    11, 14, 22;

  --bs-body-bg:    var(--ck-paper);
  --bs-body-color: var(--ck-ink);
  --bs-emphasis-color:  var(--ck-ink);
  --bs-heading-color:   var(--ck-ink);

  --bs-link-color:       var(--ck-accent);
  --bs-link-hover-color: #6E8FD4;

  --bs-border-color: var(--ck-line);
  --bs-primary:      var(--ck-accent);
  --bs-primary-rgb:  var(--ck-accent-rgb);

  --bs-tertiary-bg:  var(--ck-card);
  --bs-secondary-bg: #1A1F2C;
}

/* ── Base typography ────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ck-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--ck-fa);
  letter-spacing: 0;
}

h1, .h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; }
h3, .h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.2; }

code, kbd, samp, pre {
  font-family: var(--ck-mono);
}
code:not(pre code) {
  background: rgba(var(--ck-accent-rgb), 0.10);
  padding: 0.1em 0.4em;
  color: var(--ck-accent-deep);
}

::selection { background: var(--ck-accent); color: var(--ck-accent-ink); }

/* ── Buttons — Codehaks treatment ───────────────────────────── */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.375rem;
  --bs-btn-font-size: 0.9375rem;
  letter-spacing: -0.005em;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-color: var(--ck-accent-ink);
  --bs-btn-bg: var(--ck-accent);
  --bs-btn-border-color: var(--ck-accent);
  --bs-btn-hover-color: var(--ck-accent-ink);
  --bs-btn-hover-bg: var(--ck-accent-deep);
  --bs-btn-hover-border-color: var(--ck-accent-deep);
  --bs-btn-active-bg: var(--ck-accent-deep);
  --bs-btn-active-border-color: var(--ck-accent-deep);
  --bs-btn-disabled-bg: var(--ck-accent);
  --bs-btn-disabled-border-color: var(--ck-accent);
}

.btn-dark {
  --bs-btn-bg: var(--ck-ink);
  --bs-btn-border-color: var(--ck-ink);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
}

.btn-outline-primary {
  --bs-btn-color: var(--ck-accent);
  --bs-btn-border-color: var(--ck-accent);
  --bs-btn-hover-color: var(--ck-accent-ink);
  --bs-btn-hover-bg: var(--ck-accent);
  --bs-btn-hover-border-color: var(--ck-accent);
}

.btn-outline-dark {
  --bs-btn-color: var(--ck-ink);
  --bs-btn-border-color: var(--ck-ink);
  --bs-btn-hover-color: var(--ck-paper);
  --bs-btn-hover-bg: var(--ck-ink);
  --bs-btn-hover-border-color: var(--ck-ink);
}

.btn-link {
  --bs-btn-color: var(--ck-accent);
  --bs-btn-hover-color: var(--ck-accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--ck-accent);
  border-radius: 0;
  padding-bottom: 2px;
}
.navbar .btn-link,
.btn-link.nav-link {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--ck-paper);
  border: 1px solid var(--ck-line);
  color: var(--ck-ink);
  font-family: var(--ck-fa);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
}
.form-control:focus, .form-select:focus {
  background-color: var(--ck-card);
  border-color: var(--ck-accent);
  box-shadow: 0 0 0 2px rgba(var(--ck-accent-rgb), 0.20);
}
.form-control::placeholder { color: var(--ck-stone); opacity: 0.7; }

.form-label {
  font-family: var(--ck-fa);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ck-stone);
  margin-bottom: 0.375rem;
}

.input-group-text {
  background: var(--ck-ink);
  color: var(--ck-paper);
  border-color: var(--ck-ink);
  font-family: var(--ck-mono);
  font-size: 0.875rem;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  border-radius: 0;
}
.card-header, .card-footer {
  background: transparent;
  border-color: var(--ck-line-soft);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.3em 0.65em;
}
.badge.text-bg-primary { background: var(--ck-accent) !important; color: var(--ck-accent-ink) !important; }
.badge.text-bg-dark    { background: var(--ck-ink) !important; color: var(--ck-paper) !important; }
.badge.text-bg-light   { background: var(--ck-paper-soft) !important; color: var(--ck-ink) !important; border: 1px solid var(--ck-line); }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
  background: var(--ck-paper);
  border-bottom: 1px solid var(--ck-line);
  padding: 1rem 0;
}
.navbar-brand {
  font-family: var(--ck-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.375rem;
  display: inline-flex; align-items: center; gap: 0.625rem;
}
.navbar a,
.navbar a:hover,
.navbar a:focus,
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-brand,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus,
.navbar .btn-link,
.navbar .btn-link:hover,
.navbar .btn-link:focus {
  text-decoration: none !important;
}
.nav-link {
  color: var(--ck-ink);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color 120ms ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--ck-accent);
}

/* ── Progress ───────────────────────────────────────────────── */
.progress {
  background: var(--ck-line);
  border-radius: 0;
  height: 4px;
}
.progress-bar {
  background: var(--ck-accent);
  border-radius: 0;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: 0;
  border-width: 1px;
  padding: 1rem 1.25rem;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ck-line);
}
.table > :not(caption) > * > * {
  padding: 0.875rem 1rem;
}
/* Table headers carry Persian copy; JetBrains Mono has no Persian glyphs,
   so use Vazirmatn with tabular figures (same pattern as .ck-num /
   .ck-feed-meta). uppercase + wide tracking are latin-only effects so they
   only apply to ltr tables (e.g. dashboards with English columns). */
.table thead th {
  font-family: var(--ck-fa);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ck-stone);
  font-weight: 600;
  border-bottom: 1px solid var(--ck-ink);
}
[dir="ltr"] .table thead th {
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
  --bs-pagination-border-radius: 0;
  --bs-pagination-color: var(--ck-ink);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--ck-line);
  --bs-pagination-hover-color: var(--ck-accent-ink);
  --bs-pagination-hover-bg: var(--ck-ink);
  --bs-pagination-hover-border-color: var(--ck-ink);
  --bs-pagination-active-bg: var(--ck-accent);
  --bs-pagination-active-border-color: var(--ck-accent);
}

/* ── List group ─────────────────────────────────────────────── */
.list-group-item {
  background: var(--ck-card);
  border-color: var(--ck-line);
  border-radius: 0 !important;
}

/* ── Codehaks extension utilities ───────────────────────────── */

/* Small eyebrow label — uses Vazirmatn so Persian glyphs render at the
   intended size (JetBrains Mono has no Persian digits or letters and the
   browser falls back to a tiny system font). text-transform is a no-op for
   Persian, so drop it; in RTL pages the dot rendered after the text feels
   right with the natural reading order. */
.ck-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ck-fa);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ck-stone);
}
.ck-eyebrow .ck-eyebrow-dot {
  width: 6px; height: 6px; background: var(--ck-accent);
}

/* Topic chip with diagonal cut corner (the logo motif) */
.ck-cuttag {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.875rem 0.3rem 1.125rem;
  background: var(--ck-paper);
  border: 1px solid var(--ck-line);
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ck-ink);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}
.ck-cuttag.ck-cuttag-accent {
  background: var(--ck-accent);
  color: var(--ck-accent-ink);
  border-color: var(--ck-accent);
}
.ck-cuttag.ck-cuttag-dark {
  background: var(--ck-ink);
  color: var(--ck-paper);
  border-color: var(--ck-ink);
}
[dir="rtl"] .ck-cuttag {
  padding: 0.3rem 1.125rem 0.3rem 0.875rem;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

/* Surface — a card with editorial padding */
.ck-surface {
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Paper-soft section background */
.ck-bg-paper-soft { background: var(--ck-paper-soft); }
.ck-bg-paper      { background: var(--ck-paper); }
.ck-bg-ink        { background: var(--ck-ink); color: var(--ck-paper); }
.ck-bg-accent     { background: var(--ck-accent); color: var(--ck-accent-ink); }

.ck-text-stone    { color: var(--ck-stone) !important; }
.ck-text-accent   { color: var(--ck-accent) !important; }
.ck-text-ink      { color: var(--ck-ink) !important; }

/* Make muted text readable on dark sections: stone is a dark grey that
   disappears against --ck-ink. Reuse the paper color at 75% opacity so the
   utility stays meaningfully "muted" without becoming invisible. */
.ck-bg-ink .ck-text-stone { color: rgba(var(--ck-paper-rgb, 239, 236, 227), 0.72) !important; }

.ck-mono { font-family: var(--ck-mono) !important; letter-spacing: 0.02em; }
.ck-fa   { font-family: var(--ck-fa) !important; }
.ck-sans { font-family: var(--ck-sans) !important; }

/* Persian numerals — Vazirmatn with tabular figures so digits align like
   mono but keep proper Persian glyphs (JetBrains Mono lacks ۰-۹). Use this
   anywhere Persian digits show up: prices, durations, counters, dates. */
.ck-num {
  font-family: var(--ck-fa);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* Multi-line truncation utility. Safety net for ShortDescription on cards
   so an over-eager admin paste doesn't blow up the layout. */
.ck-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status screen for 404 / 403 / 500 */
.ck-status-screen {
  max-width: 560px;
  margin: 4rem auto;
  text-align: center;
  padding: 0 1rem;
}
.ck-status-screen__code {
  font-family: var(--ck-fa);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 5rem;
  font-weight: 600;
  color: var(--ck-line);
  line-height: 1;
  letter-spacing: -0.04em;
}
.ck-status-screen__symbol {
  font-size: 2.5rem;
  color: var(--ck-accent);
  margin: 0.25rem 0 1rem;
  line-height: 1;
}

/* Dashboard welcome strip — paper-soft band that sits below the page
   title and frames the welcome / subscription line. */
.ck-dashboard-header {
  background: var(--ck-paper-soft);
  border: 1px solid var(--ck-line-soft);
  padding: 0.875rem 1.25rem;
}

/* Dashboard achievement badge */
.ck-achievement {
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  padding: 0.875rem 0.75rem;
  text-align: center;
  height: 100%;
}
.ck-achievement__icon {
  font-size: 1.5rem;
  color: var(--ck-line);
  margin-bottom: 0.25rem;
  line-height: 1;
}
.ck-achievement__title {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--ck-stone);
}
.ck-achievement__subtitle {
  font-size: 0.6875rem;
  color: var(--ck-stone);
  opacity: 0.7;
  margin-top: 0.125rem;
}
.ck-achievement--earned {
  background: var(--ck-accent);
  border-color: var(--ck-accent);
}
.ck-achievement--earned .ck-achievement__icon,
.ck-achievement--earned .ck-achievement__title,
.ck-achievement--earned .ck-achievement__subtitle {
  color: var(--ck-accent-ink);
  opacity: 1;
}

/* Markdown / editorial prose blocks */
.ck-prose { line-height: 1.85; }
.ck-prose p { margin-bottom: 1rem; }
.ck-prose h2, .ck-prose h3, .ck-prose h4 { margin-top: 1.75rem; margin-bottom: 0.75rem; }
.ck-prose ul, .ck-prose ol { padding-inline-start: 1.5rem; margin-bottom: 1rem; }
.ck-prose blockquote {
  border-inline-start: 3px solid var(--ck-accent);
  padding: 0.25rem 1rem;
  color: var(--ck-stone);
  background: var(--ck-paper-soft);
}
.ck-prose pre {
  background: var(--ck-ink);
  color: var(--ck-paper);
  padding: 1rem;
  overflow-x: auto;
  direction: ltr;
  text-align: start;
  font-family: var(--ck-mono);
  font-size: 0.875rem;
}
.ck-prose pre code { background: transparent; color: inherit; padding: 0; }
.ck-prose code:not(pre code) {
  background: rgba(var(--ck-accent-rgb), 0.10);
  color: var(--ck-accent-deep);
  padding: 0.1em 0.4em;
  font-family: var(--ck-mono);
  font-size: 0.875em;
  direction: ltr;
  unicode-bidi: isolate;
}
.ck-prose img { max-width: 100%; height: auto; }
.ck-prose a { color: var(--ck-accent); }

/* ── Feed (Telegram-channel-style narrow column) ───────────── */
.ck-feed-column {
  max-width: 520px;
  margin-inline: auto;
}
.ck-feed-post {
  background: var(--ck-card);
  border: 1px solid var(--ck-line);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.ck-feed-post header { margin-bottom: 0.75rem; }
/* Feed dates carry Persian digits (۰-۹), which JetBrains Mono lacks.
   Mirror .ck-num: Vazirmatn with tabular figures for mono-like alignment
   while keeping proper Persian glyphs. */
.ck-feed-meta {
  font-family: var(--ck-fa);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 0.75rem;
  color: var(--ck-stone);
  letter-spacing: 0.02em;
}
.ck-feed-images {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.ck-feed-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border: 1px solid var(--ck-line);
  display: block;
}
.ck-feed .ck-prose { font-size: 0.9375rem; }
.ck-feed .ck-prose p:last-child { margin-bottom: 0; }
.ck-feed-cta {
  background: var(--ck-paper-soft);
  border: 1px solid var(--ck-line-soft);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.ck-feed-cta h2 { font-size: 0.9375rem; margin: 0 0 0.25rem; }
.ck-feed-cta p  { font-size: 0.8125rem; margin: 0 0 0.75rem; color: var(--ck-stone); }
.ck-feed-pager { max-width: 520px; margin-inline: auto; }

/* Watch-page playlist sidebar */
.ck-watch-playlist .list-group-item {
  background: var(--ck-card);
  border-color: var(--ck-line);
  font-size: 0.9375rem;
}
.ck-watch-playlist .list-group-item.active {
  background: var(--ck-ink);
  color: var(--ck-paper);
  border-color: var(--ck-ink);
}
.ck-watch-playlist .list-group-item.active a { color: var(--ck-paper); }
.ck-watch-playlist .list-group-item a { color: var(--ck-ink); }
.ck-watch-playlist .list-group-item a:hover { color: var(--ck-accent); }

/* Admin sidebar */
.ck-admin-sidebar .list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ck-line-soft);
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--ck-ink);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.ck-admin-sidebar .list-group-item:last-child { border-bottom: 0; }
.ck-admin-sidebar .list-group-item:hover {
  background: var(--ck-paper-soft);
  color: var(--ck-accent);
}
.ck-admin-sidebar .list-group-item.active {
  background: var(--ck-ink);
  color: var(--ck-paper);
  border-color: var(--ck-ink);
}
.ck-admin-sidebar__title { padding: 0 0.25rem; }

/* Strong horizontal rule */
.ck-rule {
  height: 1px;
  background: var(--ck-ink);
  border: 0;
  margin: 2rem 0;
}
.ck-rule.soft { background: var(--ck-line); }

/* Card-number chunks for card-to-card payment. Four 4-digit groups, each
   in its own tinted pill so the user can read+type the number into their
   bank app without losing their place. Tabular Persian digits, slightly
   bigger than body copy. */
.ck-card-chunks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  direction: ltr;
}
.ck-card-chunk {
  font-family: var(--ck-fa);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  user-select: all;
}
.ck-card-chunk--1 { background: #DCE3F2; color: #142B5C; border-color: #B7C3E3; }
.ck-card-chunk--2 { background: #E8E4D7; color: #5F4B1F; border-color: #C9C1A4; }
.ck-card-chunk--3 { background: #DDEDD7; color: #2F5A2A; border-color: #B5D2AB; }
.ck-card-chunk--4 { background: #F2DCE2; color: #6B1F36; border-color: #E0B5BF; }

/* Honeypot — must be invisible to humans but still in the DOM/tab order
   trap. position:absolute + offscreen rather than display:none so naive
   bots that skip hidden inputs still see (and fill) it. */
.ck-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bot-challenge widget — small inline status while the PoW runs. */
.ck-bot-challenge { padding: 0.5rem 0.75rem; border: 1px dashed var(--ck-line); border-radius: 0.5rem; }
.ck-bot-challenge--ok { border-color: var(--ck-accent-soft); background: var(--ck-accent-soft); }

/* ============================================================
   Markdown editor partial (admin)
   ============================================================ */
.ck-md-editor {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
}

.ck-md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.ck-md-toolbar button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
}

.ck-md-toolbar button:hover,
.ck-md-toolbar button:focus-visible {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    outline: none;
}

.ck-md-toolbar .ck-md-sep {
    width: 1px;
    background: var(--bs-border-color);
    margin: 0.125rem 0.25rem;
    align-self: stretch;
}

.ck-md-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem 0;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.ck-md-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bs-secondary-color);
    font: inherit;
    padding: 0.35rem 0.75rem;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    cursor: pointer;
}

.ck-md-tab.is-active {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-bottom-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    position: relative;
    bottom: -1px;
}

.ck-md-source {
    border: none;
    border-radius: 0;
    resize: vertical;
}

.ck-md-source:focus {
    box-shadow: none;
    outline: none;
}

.ck-md-preview {
    padding: 0.75rem 1rem;
    min-height: 8rem;
}

.ck-md-editor.ck-md-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--bs-body-bg);
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.ck-md-editor.ck-md-fullscreen .ck-md-source,
.ck-md-editor.ck-md-fullscreen .ck-md-preview {
    flex: 1 1 auto;
    overflow: auto;
}

/* ============================================================
   Markdown body (preview + public render)
   ============================================================ */
.markdown-body {
    line-height: 1.85;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.markdown-body p { margin-bottom: 0.85em; }

.markdown-body ul,
.markdown-body ol { padding-inline-start: 1.5em; margin-bottom: 0.85em; }

.markdown-body blockquote {
    margin: 0.85em 0;
    padding: 0.5em 1em;
    border-inline-start: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
}

.markdown-body code {
    background: var(--bs-tertiary-bg);
    padding: 0.1em 0.35em;
    border-radius: var(--bs-border-radius-sm);
    font-family: var(--bs-font-monospace);
    direction: ltr;
    unicode-bidi: isolate;
}

.markdown-body pre {
    background: var(--bs-tertiary-bg);
    padding: 0.85em 1em;
    border-radius: var(--bs-border-radius);
    overflow-x: auto;
    direction: ltr;
}

.markdown-body pre code {
    background: transparent;
    padding: 0;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--bs-border-color);
    margin: 1.5em 0;
}

.markdown-body a { color: var(--ck-accent, var(--bs-link-color)); }

.markdown-body img { max-width: 100%; height: auto; }

.markdown-body table {
    border-collapse: collapse;
    margin: 0.85em 0;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--bs-border-color);
    padding: 0.4em 0.65em;
}