/* Bartender-styled chart card, embedded inline within index.html/
   arabic-asr.html's existing light-themed .chart-card/.chart-mount shells
   (see js/charts.js). Fully self-contained — explicit dark colors, not this
   site's --surface/--border/--text-* tokens — so it renders correctly as a
   dark island inside a light page rather than depending on a page-level
   theme class. recommender.html doesn't load this file. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

/* Sharp corners (cardRadius: 0), distinct from styles.css's rounded
   .chart-card, matching Bartender's own card convention. */
.bt-card {
  background: #15151b;
  border: 1px solid #232330;
  border-radius: 0;
  overflow: hidden;
}
.bt-card-body {
  padding: 10px 4px 4px;
}
.bt-empty {
  color: #8a8a8a;
  font-size: 0.82rem;
  padding: 24px 16px;
  text-align: center;
}

.bt-wide-card {
  margin-bottom: 20px;
}

/* JetBrains Mono is used inline via G2Plot chart configs (js/charts.js) for
   on-chart numeric labels; this class is for any surrounding HTML that
   should match (e.g. n= counts, captions quoting a metric value). */
.bt-mono {
  font-family: 'JetBrains Mono', monospace;
}