/**
 * df-table.css
 *
 * Dataframe-style table that mimics a pandas DataFrame printed in Jupyter:
 * sans-serif, bold header with a thick bottom rule, alternating row bands.
 *
 * Usage: <table class="df-table">
 *   Columns: index | value | notes (notes is optional)
 *   Optional: style="--df-table-gutter: 12%" to control the right inset
 */

.post-content table.df-table {
  width: calc(100% - var(--df-table-gutter, 12%));
  max-width: calc(100% - var(--df-table-gutter, 12%));
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  margin: 1rem var(--df-table-gutter, 12%) 1.35rem 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.98em;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .post-content table.df-table {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.post-content table.df-table thead tr {
  background: transparent;
  border: 0;
}
.post-content table.df-table th {
  padding: 0.45em 0.8em 0.42em 0.8em;
  background: transparent;
  border: 0;
  color: #000000;
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
}
/* Index header cell is blank — keep it there for alignment but invisible */
.post-content table.df-table th:first-child {
  width: 1%;
  min-width: 0;
  padding-left: 0.1em;
  padding-right: 0.25em;
  color: transparent;
}

/* ── Body rows — alternating stripes like pandas HTML output ────────────── */
.post-content table.df-table tbody tr {
  background: transparent;
  border: 0;
}
/* The screenshot's first data row is shaded, so the odd/even order is intentional. */
.post-content table.df-table tbody tr:nth-child(odd) {
  background: #f5f5f5;
}
.post-content table.df-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.post-content table.df-table td {
  padding: 0.42em 0.8em;
  border: 0;
  background: transparent;
  color: #000000;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.post-content table.df-table tr:last-child td {
  border-bottom: 0;
}

/* ── Index cell — plain, same visual weight as the screenshot ───────────── */
.post-content table.df-table td:first-child {
  width: 1%;
  padding-left: 0.1em;
  padding-right: 0.25em;
  color: #6b7280;
  font-size: 0.8em;
  text-align: left;
  user-select: none; /* index isn't content — don't copy it accidentally */
}

/* Give the primary value column more room than the compact index column. */
.post-content table.df-table th:nth-child(2),
.post-content table.df-table td:nth-child(2) {
  width: 18%;
  text-align: center;
}

/* ── Notes cell — italic prose, same font ───────────────────────────────── */
.post-content table.df-table td:nth-child(3) {
  font-style: italic;
  color: #555555;
  white-space: normal; /* allow notes to wrap */
}
.post-content table.df-table th:nth-child(3) {
  font-style: normal;
}