/*
 * ═══════════════════════════════════════════════════════════════
 * ANIMALSSS — GLOBAL MANDI RATES STYLESHEET
 * Gaongram Tech Private Limited © 2025
 * ═══════════════════════════════════════════════════════════════
 * Color palette matches base.html:
 *   Primary (amber): #d97706
 *   Hero gradient: #fef3c7 → #fde68a → #fbbf24 → #d97706
 *   Card bg: #ffffff (light), #1e293b (dark)
 *   Text: #0f172a, #475569, #334155
 * ═══════════════════════════════════════════════════════════════
 */

/* =============================================
   CSS CUSTOM PROPERTIES (matches base.html)
   ============================================= */
:root {
  --mandi-radius: 12px;
  --mandi-shadow: 0 2px 12px rgba(0,0,0,.06);
  --mandi-shadow-hover: 0 8px 28px rgba(0,0,0,.1);
  --mandi-transition: .2s ease;
  --mandi-max-width: 1280px;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.mandi-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 24px;
  font-size: 13px;
  max-width: var(--mandi-max-width);
  margin: 0 auto;
}
.mandi-breadcrumb a {
  color: var(--mandi-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--mandi-transition);
}
.mandi-breadcrumb a:hover { opacity: .75; }
.mandi-breadcrumb i.fa-chevron-right {
  font-size: 10px;
  opacity: .4;
}
.mandi-breadcrumb span { font-weight: 600; }

/* =============================================
   HERO (Home Page)
   ============================================= */
.mandi-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 24px 70px;
  text-align: center;
}
.mandi-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--g-200) 30%, var(--primary-bright) 70%, var(--primary) 100%);
  z-index: 0;
}
.mandi-hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.mandi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.mandi-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 10px; }
.mandi-highlight { color: var(--mandi-primary-dark); position: relative; }
.mandi-hero-sub {
  font-size: 16px;
  opacity: .8;
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* Stats Row */
.mandi-stats-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.mandi-stat-item {
  text-align: center;
  /* .25 → .32. The four tiles sit at four different points of a 135deg gradient
     whose last stop is --primary, so the rightmost tile is the darkest ground on
     this band, and its 12px label at `opacity:.7` measured 4.41:1 there — the
     first three tiles pass and only the fourth does not. Seven more points of
     white lift the whole row: with the label's alpha at .85 the worst tile of the
     worst palette is 4.60:1, and the 26px number on the same ground is 5.73:1. */
  background: rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
  padding: 12px 24px;
  border-radius: var(--mandi-radius);
  min-width: 100px;
}
.mandi-stat-num { font-size: 26px; font-weight: 700; display: block; }
/* opacity .7 → .85: see .mandi-stat-item above for the measurement. A flat dim
   token is not an option here — --ink-2 is 2.20:1 and --ink-3 1.38:1 on that
   tile — so the dimming has to stay an alpha, just a lighter one. The size, the
   uppercasing and the letter-spacing carry the rest of the hierarchy. */
.mandi-stat-label { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }

/* Search */
.mandi-search-wrap {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
.mandi-search-wrap input {
  width: 100%;
  padding: 14px 48px 14px 20px;
  border-radius: 30px;
  border: 2px solid transparent;
  font-size: 15px;
  outline: none;
  transition: all var(--mandi-transition);
}
.mandi-search-wrap input:focus { border-color: var(--mandi-primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.12); }
.mandi-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .4;
  pointer-events: none;
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.mandi-section {
  max-width: var(--mandi-max-width);
  margin: 0 auto 48px;
  padding: 0 24px;
}
.mandi-section-hdr {
  text-align: center;
  margin-bottom: 28px;
}
.mandi-section-hdr h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.mandi-section-hdr h2 i { color: var(--mandi-primary); }
/* Every secondary label in this stylesheet used to dim itself with `opacity`
   instead of picking a dimmer colour, and the dark theme then ALSO handed it
   --dim. The two multiply: --dim (#8a8077) on a --header card is a fine 4.75:1
   on its own, but at opacity .55 it blends 45% of the near-black card back into
   the glyph and lands at 2.0:1 — which is why one selector, .mandi-com-cat,
   accounted for 489 of this page's unreadable runs. --ink-3 is the token for
   exactly this tier (secondary but readable): 6.9:1 on --surface, 7.9:1 on the
   darker --header, 4.8:1 on the light theme's near-white card. So the dimming
   moves from opacity into the colour, once, everywhere.
   The one holdout is .mandi-stat-label — see its dark override below. */
.mandi-section-hdr p { font-size: 14px; color: var(--ink-3); margin: 0; }

/* =============================================
   CATEGORY CARDS (Home)
   ============================================= */
.mandi-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.mandi-cat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 20px 14px;
  text-align: center;
  text-decoration: none;
  transition: all var(--mandi-transition);
  box-shadow: var(--mandi-shadow);
}
.mandi-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mandi-shadow-hover);
  border-color: var(--mandi-primary);
}
.mandi-cat-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.mandi-cat-card h3 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.mandi-cat-stat { font-size: 12px; color: var(--ink-3); }

/* =============================================
   COMMODITY GRID (Home)
   ============================================= */
.mandi-com-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.mandi-com-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--mandi-transition);
  box-shadow: var(--mandi-shadow);
}
.mandi-com-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mandi-shadow-hover);
  border-color: var(--mandi-primary);
}
.mandi-com-icon { font-size: 28px; flex-shrink: 0; }
.mandi-com-info { min-width: 0; }
.mandi-com-name { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.mandi-com-cat { font-size: 11px; color: var(--ink-3); }
.mandi-com-countries {
  font-size: 11px;
  color: var(--mandi-primary);
  font-weight: 500;
  margin-top: 2px;
}

/* =============================================
   TOP MOVERS (Home)
   ============================================= */
.mandi-movers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.mandi-mover-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: var(--mandi-shadow);
  transition: all var(--mandi-transition);
}
.mandi-mover-card:hover { box-shadow: var(--mandi-shadow-hover); transform: translateY(-2px); }
.mandi-mover-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mandi-mover-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.mandi-mover-flag { font-size: 16px; }
.mandi-mover-price { font-size: 13px; margin-bottom: 4px; }
.mandi-mover-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}
.mandi-mover-change.up { color: var(--mandi-green); background: var(--mandi-green-light); }
.mandi-mover-change.down { color: var(--mandi-red); background: var(--mandi-red-light); }
.mandi-mover-change.stable { color: var(--ink-3); background: var(--surface-2); }
.mandi-mover-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink-3);
}
.mandi-mover-market { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================
   PRICE TABLE (Home)
   ============================================= */
.mandi-table-wrap {
  overflow-x: auto;
  border-radius: var(--mandi-radius);
  box-shadow: var(--mandi-shadow);
}
.mandi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mandi-table thead th {
  background: var(--surface-2);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  border-bottom: 2px solid var(--line);
}
.mandi-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.mandi-table tbody tr:hover td { background: var(--primary-soft); }
.mandi-td-name a { color: var(--mandi-primary); font-weight: 600; text-decoration: none; }
.mandi-td-name a:hover { text-decoration: underline; }
.mandi-td-price strong { color: var(--mandi-primary); font-size: 14px; }

/* Trend Tags */
.mandi-trend-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.mandi-trend-tag.up { color: var(--mandi-green); background: var(--mandi-green-light); }
.mandi-trend-tag.down { color: var(--mandi-red); background: var(--mandi-red-light); }
.mandi-trend-tag.stable { color: var(--ink-3); background: var(--surface-2); }

/* =============================================
   COUNTRY SELECTOR (Home)
   ============================================= */
.mandi-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.mandi-country-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 16px 10px;
  text-align: center;
  text-decoration: none;
  transition: all var(--mandi-transition);
  box-shadow: var(--mandi-shadow);
}
.mandi-country-card:hover { transform: translateY(-2px); box-shadow: var(--mandi-shadow-hover); border-color: var(--mandi-primary); }
.mandi-cc-flag { font-size: 32px; display: block; margin-bottom: 6px; }
.mandi-cc-name { font-size: 13px; font-weight: 600; color: var(--ink); display: block; }
.mandi-cc-currency { font-size: 11px; color: var(--ink-3); }
/* The country currently filtered on, so the selection is visible without
   having to re-read the URL. */
.mandi-country-card.is-active {
  border-color: var(--mandi-primary);
  box-shadow: 0 0 0 2px var(--mandi-primary-light);
}

/* =============================================
   SOURCE ATTRIBUTION (Home)
   ============================================= */
.mandi-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mandi-src-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.mandi-src-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 760px;
}

/* Per-row provenance in the country/commodity tables. */
.mandi-td-grade { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.mandi-td-asof { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.mandi-td-asof.is-stale { color: var(--primary-strong); }
.mandi-td-src { display: block; font-size: 11px; color: var(--ink-3); }
.mandi-trend-caveat { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* =============================================
   LIVESTOCK PRICE PAGES FOR THIS COUNTRY
   One chip per /animals/<name>/<cc>/ page the country actually has. Sized to
   read as navigation rather than as a tag cloud — these are the pages that
   answer "goat rate in <country>", so they get real hit areas.
   ============================================= */
.mandi-animals-sub {
  margin: -6px 0 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 760px;
}
.mandi-animals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mandi-animal-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 116px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.mandi-animal-chip:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.mandi-animal-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.mandi-animal-rows {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .mandi-animal-chip { transition: none; }
  .mandi-animal-chip:hover { transform: none; }
}

/* =============================================
   CTA SECTION (Home & Country)
   ============================================= */
.mandi-cta {
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--g-200) 100%);
  padding: 48px 24px;
  text-align: center;
  border-radius: var(--mandi-radius);
  margin: 0 24px 48px;
  max-width: var(--mandi-max-width);
}
.mandi-cta-content { max-width: 500px; margin: 0 auto; }
.mandi-cta-content h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.5rem; }
.mandi-cta-content h2 i { color: var(--mandi-primary); }
.mandi-cta-content p { color: var(--ink-2); margin: 0 0 20px; font-size: 14px; }

.mandi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mandi-primary);
  color: var(--primary-ink);
  padding: 12px 28px;
  border-radius: 28px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all var(--mandi-transition);
}
.mandi-btn-primary:hover { background: var(--mandi-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--primary-rgb),.3); }

/* =============================================
   EMPTY STATE
   ============================================= */
.mandi-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.mandi-empty i { font-size: 48px; display: block; margin-bottom: 12px; }
.mandi-empty p { font-size: 15px; }
.mandi-empty code { background: var(--surface-2); padding: 2px 8px; border-radius: 4px; font-size: 13px; }

/* =============================================
   ═══════════ COMMODITY DETAIL PAGE ═══════════
   ============================================= */

/* Commodity Hero */
.mandi-com-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: var(--mandi-max-width);
  margin: 0 auto 36px;
  padding: 32px 24px;
  flex-wrap: wrap;
}
.mandi-com-hero-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mandi-com-hero-icon { font-size: 56px; flex-shrink: 0; }
.mandi-com-hero-badge {
  display: inline-block;
  background: var(--mandi-primary-light);
  color: var(--mandi-primary-dark);
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.mandi-com-hero-left h1 { font-size: 1.7rem; margin: 0 0 4px; color: var(--ink); }
.mandi-com-hero-date { font-size: 13px; color: var(--ink-3); margin: 0; }
.mandi-com-hero-right { flex-shrink: 0; }
.mandi-com-global-avg {
  text-align: center;
  background: linear-gradient(135deg, var(--mandi-primary-light), var(--g-200));
  padding: 20px 32px;
  border-radius: var(--mandi-radius);
  box-shadow: var(--mandi-shadow);
}
.mandi-avg-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
.mandi-avg-num { font-size: 2rem; font-weight: 700; color: var(--ink); display: block; }
.mandi-avg-note { font-size: 11px; color: var(--ink-3); }

/* Country Rates Grid */
.mandi-country-rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.mandi-country-rate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  overflow: hidden;
  box-shadow: var(--mandi-shadow);
  transition: all var(--mandi-transition);
}
.mandi-country-rate-card:hover { box-shadow: var(--mandi-shadow-hover); }

.mandi-crc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.mandi-crc-flag { font-size: 28px; flex-shrink: 0; }
.mandi-crc-header h3 { font-size: 15px; margin: 0; color: var(--ink); }
.mandi-crc-currency { font-size: 11px; color: var(--ink-3); display: block; }
.mandi-crc-link {
  margin-left: auto;
  color: var(--mandi-primary);
  font-size: 14px;
  opacity: .6;
  transition: opacity var(--mandi-transition);
}
.mandi-crc-link:hover { opacity: 1; }

.mandi-crc-avg {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mandi-crc-avg-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.mandi-crc-avg-price { font-size: 1.3rem; font-weight: 700; color: var(--mandi-primary); }

/* Market Rows */
.mandi-crc-markets { padding: 6px 0; }
.mandi-crc-market-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.mandi-crc-market-row:last-child { border-bottom: none; }
.mandi-crc-market-info { min-width: 0; flex: 1; }
.mandi-crc-market-name { display: block; font-weight: 500; color: var(--ink); }
.mandi-crc-state { font-size: 11px; color: var(--ink-3); }
.mandi-crc-market-price { text-align: right; flex-shrink: 0; }
.mandi-crc-price-range { display: block; font-weight: 600; color: var(--ink); }
.mandi-crc-unit { font-size: 11px; color: var(--ink-3); }
.mandi-crc-trend { flex-shrink: 0; }
.mandi-crc-trend.up { color: var(--mandi-green); }
.mandi-crc-trend.down { color: var(--mandi-red); }
.mandi-crc-trend.stable { color: var(--ink-3); }

.mandi-crc-more {
  padding: 12px 18px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* Chart Wrap */
.mandi-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 24px;
  box-shadow: var(--mandi-shadow);
  height: 320px;
  position: relative;
}
.mandi-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* Related Commodities */
.mandi-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.mandi-related-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--mandi-radius);
  padding: 16px 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all var(--mandi-transition);
  box-shadow: var(--mandi-shadow);
}
.mandi-related-card:hover { box-shadow: var(--mandi-shadow-hover); border-color: var(--mandi-primary); transform: translateY(-2px); }
.mandi-rel-icon { font-size: 24px; }
.mandi-rel-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.mandi-rel-arrow { margin-left: auto; color: var(--mandi-primary); opacity: .4; transition: opacity var(--mandi-transition); }
.mandi-related-card:hover .mandi-rel-arrow { opacity: 1; }

/* =============================================
   ═══════════ COUNTRY PAGE ═══════════
   ============================================= */

.mandi-country-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: var(--mandi-max-width);
  margin: 0 auto 32px;
  padding: 32px 24px;
  flex-wrap: wrap;
}
.mandi-country-hero-left { display: flex; align-items: center; gap: 16px; }
.mandi-country-hero-flag { font-size: 52px; }
.mandi-country-hero-left h1 { font-size: 1.7rem; margin: 0 0 4px; color: var(--ink); }
.mandi-country-hero-date { font-size: 13px; color: var(--ink-3); margin: 0; }

.mandi-country-stats { display: flex; gap: 24px; }
.mandi-cs-item { text-align: center; }
.mandi-cs-num { font-size: 1.8rem; font-weight: 700; color: var(--mandi-primary); display: block; }
.mandi-cs-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }

/* Filter Pills */
.mandi-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mandi-pill {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--surface);
  transition: all var(--mandi-transition);
}
.mandi-pill:hover { border-color: var(--mandi-primary); color: var(--mandi-primary); }
.mandi-pill.active { background: var(--mandi-primary); color: var(--primary-ink); border-color: var(--mandi-primary); }

/* =============================================
   ═══════════ DARK THEME ═══════════
   ═══════════════════════════════════════════════════════════════ */
html.theme-dark .mandi-hero-bg {
  /* The last stop was #0f3460 — pre-redesign navy, left behind when the palette
     went warm, so the dark hero faded from brown into blue. --g-900 is the next
     step down the accent ramp the other two stops already walk.

     The MIDDLE stop was --g-800, and that was the real reason four separate
     labels on this band read as unreadable. The --g-* ramp is deliberately
     theme-independent (see the note above its aliases in theme.css: 39 gradients
     read those steps directly and a gradient stop should not move when the theme
     flips) — so --g-800, #694f36 in brown, is a MID brown on a band whose other
     two stops are near-black, and it is where the hero's text actually sits. A
     near-white ink at --header-dim's .68 alpha measures 3.78-4.07:1 there across
     the palettes and --ink-3 lands at 2.74-3.03:1. --g-950 is the ramp's darkest
     step, so the band now runs dark → darkest → mid instead of dark → mid →
     dark, and its worst stop for text is the --g-900 tail: --header-dim clears
     4.60:1 there at the thinnest palette (green) and 4.85:1 at the widest. */
  background: linear-gradient(135deg, var(--header) 0%, var(--g-950) 55%, var(--g-900) 100%);
}
html.theme-dark .mandi-hero h1 { color: var(--header-dim); }
/* .mandi-hero-sub is the second element in this file to be dimmed TWICE — its
   base rule carries `opacity: .8` and this override then hands it --header-dim,
   whose own alpha is .68. The two multiply to an effective .54 and the line
   measured 4.33:1 on the band's lightest stop against the 4.5 a 16px run needs;
   at the token's own .68 it is 5.84:1. Same mechanism, same cure as
   .mandi-stat-label below: cancel the opacity, keep the colour. */
html.theme-dark .mandi-hero-sub { color: var(--header-dim); opacity: 1; }
/* The badge and the stat tiles washed themselves with translucent WHITE, which
   on a dark band lightens exactly the patch its own label has to be read on —
   the opposite of what a frosted wash is for here. 10% white under --header-dim
   was 3.21:1 and 8% white under --ink-3 was 2.35:1. A black wash of the same
   weight reads as the same recessed tile and moves the ground the other way, so
   the two inks keep the hierarchy they were chosen for (label dimmer than value,
   value dimmer than heading) instead of all three having to go near-white.
   Measured on the band's worst stop, all nine palettes: badge 5.58-5.78:1,
   label 4.80-5.03:1, stat number 6.60-8.72:1 against its large-text 3.0. */
html.theme-dark .mandi-hero-badge { background: rgba(0,0,0,.22); color: var(--header-dim); }
html.theme-dark .mandi-stat-item { background: rgba(0,0,0,.28); }
html.theme-dark .mandi-stat-num { color: var(--accent-ink); }
/* .mandi-stat-label is dimmed by an alpha in light and by a token in dark,
   because its ground flips from a translucent-white tile over a BRIGHT hero
   gradient in light to a recessed tile over a near-black one in dark. In light
   the alpha is the only mechanism that works at all — a flat --ink-3 is 1.38:1
   on the darkest tile — but multiplied into --ink-3 in dark it would give
   1.48:1, so this override has to cancel the opacity rather than merely recolour
   on top of it. */
html.theme-dark .mandi-stat-label { color: var(--ink-3); opacity: 1; }

html.theme-dark .mandi-section-hdr h2 { color: var(--header-dim); }
html.theme-dark .mandi-section-hdr p { color: var(--ink-3); }

html.theme-dark .mandi-search-wrap input {
  background: var(--header);
  color: var(--header-dim);
  border-color: var(--line-2);
}
html.theme-dark .mandi-search-wrap input::placeholder { color: var(--ink-2); }

html.theme-dark .mandi-cat-card,
html.theme-dark .mandi-com-card,
html.theme-dark .mandi-mover-card,
html.theme-dark .mandi-country-card {
  background: var(--header);
  border-color: var(--line-2);
}
html.theme-dark .mandi-cat-card h3,
html.theme-dark .mandi-com-name,
html.theme-dark .mandi-mover-name,
html.theme-dark .mandi-cc-name { color: var(--header-dim); }
html.theme-dark .mandi-cat-stat,
html.theme-dark .mandi-com-cat { color: var(--ink-3); }
html.theme-dark .mandi-src-chip {
  background: var(--header);
  border-color: var(--line-2);
  color: var(--header-dim);
}
html.theme-dark .mandi-src-note { color: var(--ink-3); }

/* Same treatment as .mandi-src-chip: --surface/--ink do not flip on their own in
   this stylesheet, so a card built from them is white-on-white in dark mode. */
html.theme-dark .mandi-animal-chip {
  background: var(--header);
  border-color: var(--line-2);
}
html.theme-dark .mandi-animal-name { color: var(--header-dim); }
html.theme-dark .mandi-animal-rows,
html.theme-dark .mandi-animals-sub { color: var(--ink-3); }
html.theme-dark .mandi-com-countries { color: var(--accent-ink); }

html.theme-dark .mandi-mover-price { color: var(--header-dim); }

html.theme-dark .mandi-table-wrap { background: var(--header); }
html.theme-dark .mandi-table thead th {
  background: var(--header);
  color: var(--ink-3);
  border-bottom-color: var(--line-2);
}
html.theme-dark .mandi-table tbody td {
  color: var(--header-dim);
  border-bottom-color: var(--line-2);
}
html.theme-dark .mandi-table tbody tr:hover td { background: rgba(var(--warn-rgb),.06); }
html.theme-dark .mandi-td-name a { color: var(--accent-ink); }
html.theme-dark .mandi-td-price strong { color: var(--accent-ink); }

html.theme-dark .mandi-country-rate-card,
html.theme-dark .mandi-related-card,
html.theme-dark .mandi-chart-wrap { background: var(--header); border-color: var(--line-2); }
html.theme-dark .mandi-crc-header { background: var(--header); border-bottom-color: var(--line-2); }
html.theme-dark .mandi-crc-header h3 { color: var(--header-dim); }
html.theme-dark .mandi-crc-currency { color: var(--ink-3); }
html.theme-dark .mandi-crc-avg { border-bottom-color: var(--line-2); }
html.theme-dark .mandi-crc-avg-price { color: var(--accent-ink); }
html.theme-dark .mandi-crc-market-name { color: var(--header-dim); }
html.theme-dark .mandi-crc-price-range { color: var(--header-dim); }
html.theme-dark .mandi-crc-market-row { border-bottom-color: var(--line-2); }

html.theme-dark .mandi-com-hero-left h1 { color: var(--header-dim); }
html.theme-dark .mandi-com-global-avg { background: linear-gradient(135deg, var(--header), var(--g-800)); }
html.theme-dark .mandi-avg-num { color: var(--accent-ink); }
html.theme-dark .mandi-avg-label,
html.theme-dark .mandi-avg-note { color: var(--ink-3); }

html.theme-dark .mandi-country-hero-left h1 { color: var(--header-dim); }
html.theme-dark .mandi-cs-num { color: var(--accent-ink); }
html.theme-dark .mandi-cs-label { color: var(--ink-3); }

html.theme-dark .mandi-pill { background: var(--header); border-color: var(--line-2); color: var(--ink-2); }
html.theme-dark .mandi-pill:hover { border-color: var(--primary-bright); color: var(--accent-ink); }
html.theme-dark .mandi-pill.active { background: var(--primary); color: var(--primary-ink); }

html.theme-dark .mandi-rel-name { color: var(--header-dim); }

html.theme-dark .mandi-empty { color: var(--ink-3); }
html.theme-dark .mandi-empty code { background: var(--header); color: var(--accent-ink); }

html.theme-dark .mandi-cta { background: linear-gradient(135deg, var(--header), var(--g-800)); }
html.theme-dark .mandi-cta h2 { color: var(--header-dim); }
html.theme-dark .mandi-cta p { color: var(--ink-3); }

html.theme-dark .mandi-mover-change.stable { background: rgba(107,114,128,.15); color: var(--ink-3); }

html.theme-dark .mandi-breadcrumb a { color: var(--accent-ink); }
html.theme-dark .mandi-breadcrumb span { color: var(--header-dim); }

/* =============================================
   ═══════════ RESPONSIVE ═══════════
   ============================================= */
@media (max-width: 768px) {
  .mandi-hero { padding: 40px 16px 50px; }
  .mandi-hero h1 { font-size: 1.7rem; }
  .mandi-hero-sub { font-size: 14px; }
  .mandi-stats-row { gap: 16px; }
  .mandi-stat-item { padding: 10px 16px; }
  .mandi-stat-num { font-size: 22px; }

  .mandi-section { padding: 0 16px; margin-bottom: 36px; }
  .mandi-section-hdr h2 { font-size: 1.3rem; }

  .mandi-cat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .mandi-com-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mandi-movers-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .mandi-com-hero { flex-direction: column; align-items: flex-start; }
  .mandi-com-hero-right { width: 100%; }
  .mandi-com-global-avg { width: 100%; }
  .mandi-com-hero-left h1 { font-size: 1.4rem; }

  .mandi-country-rates-grid { grid-template-columns: 1fr; }
  .mandi-country-hero { flex-direction: column; align-items: flex-start; }
  .mandi-country-stats { gap: 16px; }
  .mandi-cs-num { font-size: 1.4rem; }

  .mandi-chart-wrap { height: 240px; padding: 16px; }

  .mandi-related-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  .mandi-filter-pills { gap: 6px; }
  .mandi-pill { padding: 6px 14px; font-size: 12px; }
}

@media (max-width: 480px) {
  .mandi-hero { padding: 32px 12px 40px; }
  .mandi-hero h1 { font-size: 1.4rem; }
  .mandi-stats-row { gap: 10px; }
  .mandi-stat-item { padding: 8px 12px; min-width: 70px; }
  .mandi-stat-num { font-size: 18px; }

  .mandi-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .mandi-com-grid { grid-template-columns: 1fr; }
  .mandi-movers-grid { grid-template-columns: 1fr 1fr; }

  .mandi-country-rates-grid { grid-template-columns: 1fr; }

  .mandi-breadcrumb { font-size: 12px; padding: 10px 12px; }
}
/* ── Skeletons for deferred blocks ──────────────────────────────────────────
   The dashboard and the country pages both send their bulk in a second request
   (see static/js/mandi-defer.js), so both need placeholders. Sized roughly to
   the real content so the page does not jump when it lands. */
.mandi-skel {
  background: #e9edf2;
  border-radius: 10px;
  animation: mandi-pulse 1.4s ease-in-out infinite;
}
@keyframes mandi-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.mandi-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mandi-skel-card { height: 104px; }
.mandi-skel-row { height: 18px; max-width: 320px; margin: 0 auto 18px; }
.mandi-skel-wrap { padding: 24px 0; }
.mandi-skel-note { text-align: center; color: var(--ink-3); font-size: 14px; }
@media (prefers-color-scheme: dark) { .mandi-skel { background: #26303c; } }