/* ============================================================
   Blog Supply Snapshot — scoped styles
   Ported from the ArthaBase area report (Algo.js / data.html)
   ============================================================ */

:root {
  --bs-bg: #f8f7f4;
  --bs-card: #fff;
  --bs-text: #0f172a;
  --bs-text-sec: #475569;
  --bs-muted: #5b6578;
  --bs-muted-light: #94a3b8;
  --bs-border: rgba(0,0,0,0.10);
  --bs-border2: rgba(0,0,0,0.05);
  --bs-accent: #c05621;
  --bs-success: #34d399;
  --bs-radius: 10px;
  --bs-gap: 12px;
  --bs-font: 'DM Sans', -apple-system, sans-serif;
  --bs-font-mono: 'Spline Sans Mono', 'Roboto Mono', monospace;
}

/* ── Container ─────────────────────────────────────────── */
.bs-section {
  margin: 2rem 0;
}

.bs-cc {
  background: var(--bs-card);
  border-radius: var(--bs-radius);
  border: 1px solid var(--bs-border2);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .bs-cc { padding: 1rem 1.15rem; margin-bottom: var(--bs-gap); }
}

/* ── Chart header ──────────────────────────────────────── */
.bs-ch-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.bs-ch-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-text);
}

.bs-ch-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--bs-accent);
  background: rgba(192,86,33,.08);
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Note ──────────────────────────────────────────────── */
.bs-note {
  font-size: 12px;
  color: var(--bs-muted);
  margin-top: .5rem;
  line-height: 1.5;
}

.bs-cc > .bs-note {
  border-top: 1px solid var(--bs-border2);
  padding-top: .75rem;
  margin-top: .75rem;
}

/* ── KPI grid ──────────────────────────────────────────── */
.bs-kgrid {
  display: grid;
  gap: var(--bs-gap);
  margin-bottom: 1rem;
}

.bs-kgrid-3 { grid-template-columns: repeat(3, 1fr); }
.bs-kgrid-4 { grid-template-columns: repeat(4, 1fr); }
.bs-kgrid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .bs-kgrid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .bs-kgrid-3, .bs-kgrid-4, .bs-kgrid-6 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .bs-kgrid-3, .bs-kgrid-4 { grid-template-columns: 1fr; }
}

.bs-kcard {
  background: var(--bs-card);
  border-radius: var(--bs-radius);
  border: 1px solid var(--bs-border2);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
  padding: .9rem 1rem;
}

.bs-kcard-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--bs-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .35rem;
}

.bs-kcard-val {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--bs-font-mono);
  color: var(--bs-text);
  line-height: 1.2;
}

.bs-kcard-sub {
  font-size: 11px;
  color: var(--bs-muted);
  margin-top: .25rem;
}

/* ── Insight card grid (read-cards) ────────────────────── */
.bs-read-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bs-gap);
  margin: 0 0 1rem;
}

.bs-read-grid-2 { grid-template-columns: repeat(2, 1fr); }

.bs-read {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  border: 1px solid var(--bs-border2);
  border-radius: var(--bs-radius);
  background: var(--bs-card);
  padding: 1rem 1.1rem;
}

.bs-read-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(148,163,184,.12);
  color: #64748b;
  flex-shrink: 0;
  margin-top: 2px;
}

.bs-read-icon svg { width: 16px; height: 16px; }

.bs-read-neutral .bs-read-icon { background: rgba(148,163,184,.14); color: #64748b; }
.bs-read-warn .bs-read-icon    { background: rgba(234,179,8,.16);  color: #a16207; }
.bs-read-good .bs-read-icon    { background: rgba(52,211,153,.14); color: #047857; }

.bs-read-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--bs-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .35rem;
}

.bs-read-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--bs-text);
  margin-bottom: .35rem;
}

.bs-read p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bs-text-sec);
  margin: 0;
}

@media (max-width: 760px) {
  .bs-read-grid, .bs-read-grid-2 { grid-template-columns: 1fr; }
}

/* ── Chart grid ────────────────────────────────────────── */
.bs-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-gap);
  margin-bottom: 1rem;
}

.bs-chart-grid .bs-cc { margin-bottom: 0; }

@media (max-width: 780px) {
  .bs-chart-grid { grid-template-columns: 1fr; }
}

/* ── Table wrapper ─────────────────────────────────────── */
.bs-twrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--bs-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  background: var(--bs-card);
}

.bs-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.bs-tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--bs-border);
  white-space: nowrap;
}

.bs-tbl td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--bs-border2);
  color: var(--bs-text-sec);
}

.bs-tbl tr:hover td { background: rgba(0,0,0,.02); }

.bs-tbl-name {
  font-weight: 700;
  color: var(--bs-text) !important;
  min-width: 120px;
}

.bs-tbl-mono {
  font-family: var(--bs-font-mono);
  font-weight: 700;
  color: var(--bs-text) !important;
  white-space: nowrap;
}

/* ── Supply Explorer ───────────────────────────────────── */
.bs-sale-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.bs-sale-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--bs-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.bs-sale-controls select {
  width: 100%;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: var(--bs-bg);
  color: var(--bs-text);
  font-size: 13px;
  font-family: var(--bs-font);
  padding: 8px 10px;
  outline: none;
}

.bs-sale-controls select:focus { border-color: var(--bs-accent); }

@media (max-width: 780px) { .bs-sale-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bs-sale-controls { grid-template-columns: 1fr; } }

/* Heatmap */
.bs-heatmap-wrap {
  margin: 0 0 16px;
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  background: var(--bs-bg);
  overflow: hidden;
}

.bs-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 6px;
  font-size: 10px;
  font-weight: 800;
  color: var(--bs-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

#bs-sale-heatmap {
  min-height: 220px;
  height: 280px;
  width: 100%;
}

.bs-heatmap-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: #64748b;
  font-size: 12px;
  padding: 20px;
  text-align: center;
}

.bs-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bs-muted);
}

.bs-heatmap-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  font-style: normal;
}

@media (max-width: 640px) {
  #bs-sale-heatmap { height: 240px; min-height: 200px; }
}

/* Explorer table */
.bs-sale-table { min-width: 980px; }
.bs-sale-table th, .bs-sale-table td { white-space: nowrap; }

.bs-sale-table th[data-sale-sort] {
  cursor: pointer;
  user-select: none;
}

.bs-sale-table th[data-sale-sort]:hover { color: var(--bs-accent); }
.bs-sale-sort-active { color: var(--bs-accent) !important; }

/* ── Area section ──────────────────────────────────────── */
.bs-area-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}

.bs-area-count {
  font-size: 12px;
  color: var(--bs-muted);
  font-weight: 500;
  background: rgba(0,0,0,.05);
  border-radius: 99px;
  padding: 2px 9px;
}

.bs-area-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-gap);
  margin-bottom: 1rem;
}

@media (max-width: 700px) {
  .bs-area-charts { grid-template-columns: 1fr; }
}

/* ── Show more button ──────────────────────────────────── */
.bs-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  background: var(--bs-card);
  color: var(--bs-accent);
  font-family: var(--bs-font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.bs-show-more-btn:hover {
  background: rgba(192,86,33,.06);
  border-color: var(--bs-accent);
}

/* ── Methodology note ──────────────────────────────────── */
.bs-methodology {
  background: rgba(0,0,0,.025);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  font-size: 12px;
  color: var(--bs-muted);
  line-height: 1.6;
  margin: 1.5rem 0;
}

.bs-methodology strong { color: var(--bs-text-sec); }

/* ── Signal badges ─────────────────────────────────────── */
.bs-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.bs-badge-warn { background: rgba(234,179,8,.18);  color: #a16207; }
.bs-badge-good { background: rgba(52,211,153,.15); color: #047857; }
.bs-badge-neutral { background: rgba(148,163,184,.18); color: #64748b; }