/* =========================================================================
   fase-f/mpi-1.1/styles.css
   Konsep Barisan Aritmetika & Beda — Fase F (SMK RPL), Inquiry Learning

   Hanya memuat gaya yang KHAS modul ini (papan log, alur penyelidikan,
   tab barisan, tabel data selisih, perbandingan hipotesis vs data).
   Pelacak selisih & lab barisan (.bar-tracker, .bar-lab, .bar-lompatan)
   serta design system dasar berasal dari shared/base.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tahap 1 — tujuan, alur penyelidikan, papan log
   ------------------------------------------------------------------------- */

.bar-tp {
  margin: 0;
}

.bar-alur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: alur;
}

.bar-alur li {
  counter-increment: alur;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
}

.bar-alur li::before {
  content: counter(alur) '. ';
  color: var(--color-primary-strong);
}

.bar-judul {
  margin-top: 0;
}

.bar-papan {
  display: grid;
  gap: var(--space-3);
}

.bar-kartu {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.bar-kartu .seq-tiles {
  margin: var(--space-2) 0 0;
}

.bar-kartu__judul {
  margin: 0;
  font-weight: 700;
}

.bar-kartu__satuan {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.bar-label-atas {
  display: block;
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   Tahap 4 — tab barisan & tabel data selisih
   ------------------------------------------------------------------------- */

.ctx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ctx-tab {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.ctx-tab:hover {
  border-color: var(--color-primary);
}

.ctx-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.ctx-tab.is-done:not(.is-active) {
  border-color: var(--color-success);
  color: var(--color-success-strong);
}

.bar-tabel-wrap {
  overflow-x: auto;
}

.bar-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bar-tabel th,
.bar-tabel td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.bar-tabel thead th {
  background: var(--color-bg-grid);
}

.bar-tabel tbody th {
  font-weight: 600;
}

.bar-tabel__mono {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Tahap 6 — hipotesis vs data
   ------------------------------------------------------------------------- */

.bar-banding {
  display: grid;
  gap: var(--space-3);
}

.bar-banding__row {
  padding: var(--space-3);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
}

.bar-banding__row--beda {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.bar-banding__row p {
  margin: 0;
}

.bar-banding__label {
  font-weight: 700;
}

.bar-banding__dugaan span,
.bar-banding__data span {
  font-weight: 600;
}

.bar-kutip {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-grid);
  font-style: italic;
}