/* ============================================================
   Shared basic-strategy chart vocabulary.
   Loaded by every page that renders inc/strategy-engine-ssr.php output:
   the Basic Strategy Engine page and the live-blackjack-game v2 pages.
   Page-specific behavior stays in the page stylesheet (the engine adds
   cell interactivity, dark theme, and print rules on top of this).
   ============================================================ */

/* summary strip: rule chips + edge readout */
.bse-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bji-space-3);
  padding: var(--bji-space-4) var(--bji-space-5);
}
.bse-summary { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); }
.bse-summary span {
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-800);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-pill);
  padding: 3px 12px;
}
.bse-edge {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--bji-space-2);
  white-space: nowrap;
}
.bse-edge .k { font-size: var(--bji-text-xs); color: var(--bji-text-muted); font-weight: var(--bji-weight-semibold); }
.bse-edge .v {
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .bse-edge { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* charts */
.bse-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-5);
  padding: var(--bji-space-5);
  padding-top: var(--bji-space-2);
}
@media (max-width: 900px) { .bse-charts { grid-template-columns: 1fr; } }
.bse-chart-card:first-child { grid-row: span 2; }
.bse-chart-card h3 {
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-bold);
  margin: 0 0 var(--bji-space-2);
}
.bse-scroll { overflow-x: auto; }

.bse-grid {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  min-width: 430px;
  table-layout: fixed;
}
.bse-grid th, .bse-grid td {
  text-align: center;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  padding: 0;
  height: 30px;
  border-radius: 4px;
}
.bse-grid thead th {
  color: var(--bji-text-muted);
  background: var(--bji-gray-100);
  font-weight: var(--bji-weight-bold);
}
.bse-grid thead th.corner {
  background: none;
  text-align: left;
  font-weight: var(--bji-weight-medium);
  color: var(--bji-text-faint);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: 44px;
}
.bse-grid tbody th {
  background: var(--bji-gray-100);
  color: var(--bji-text);
  width: 44px;
}
.bse-grid td { color: #fff; }

/* compact cells on phones: the full 11-column grid fits the viewport
   with no horizontal scroll */
@media (max-width: 560px) {
  .bse-charts {
    padding: var(--bji-space-2) var(--bji-space-3) var(--bji-space-4);
    gap: var(--bji-space-4);
  }
  .bse-grid { min-width: 0; border-spacing: 1px; }
  .bse-grid th, .bse-grid td {
    height: 26px;
    font-size: 0.62rem;
    border-radius: 3px;
  }
  .bse-grid thead th.corner { font-size: 0.5rem; width: 30px; }
  .bse-grid tbody th { width: 30px; }
  .bse-status { padding-inline: var(--bji-space-3); }
  .bse-foot { padding-inline: var(--bji-space-3); }
}

/* action colors: letters carry the meaning, color reinforces it */
.a-hit       { background: var(--bji-green-500); }
.a-stand     { background: var(--bji-red-500); }
.a-double    { background: var(--bji-blue-600); }
.a-split     { background: #7c53c9; }
.a-surrender { background: var(--bji-amber-500); }

/* legend row */
.bse-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-3) var(--bji-space-5);
  padding: var(--bji-space-4) var(--bji-space-5);
  border-top: 1px solid var(--bji-border);
  background: var(--bji-surface-sunken);
}
.bse-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2) var(--bji-space-4);
}
.bse-key {
  display: inline-flex;
  align-items: center;
  gap: var(--bji-space-2);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-muted);
}
.bse-key i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: var(--bji-weight-bold);
  color: #fff;
  border-radius: 4px;
  min-width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}