/* ============================================================
   AI Talent Mapping — Responsive Rules
   Breakpoints: <576 (xs) · 576-767 (sm) · 768-991 (md)
                992-1199 (lg) · >=1200 (xl/xxl)
   ============================================================ */

/* ---------- <576px : xs (handphone kecil) ---------- */
@media (max-width: 575.98px) {
  .hero-section { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .network-art { max-width: 280px; margin-inline: auto; }

  .wizard-track { gap: 0; }
  .wizard-label { font-size: .68rem; max-width: 4.2rem; }
  .wizard-circle { width: 32px; height: 32px; font-size: .82rem; }
  .wizard-step::before { top: 15px; }

  .rec-path { flex-direction: column; }
  .rec-path-arrow { transform: rotate(90deg); justify-content: center; padding: .15rem 0; }

  .auth-card { padding: 1.5rem 1.25rem; box-shadow: none; border: 1px solid var(--c-border); }

  /* Dashboard charts: force explicit height + no aspect ratio lock to avoid overflow */
  .chart-box { height: 220px; }

  .table-responsive-stack thead { display: none; }
  .history-table-wrap { display: none; }
  .history-cards-wrap { display: block; }

  /* Sesi 3: error box Step 3 (pesan + tombol "Coba Lagi") ditumpuk vertikal di hp kecil */
  #step3Error .d-flex { flex-direction: column; align-items: stretch !important; gap: .75rem; }
  #step3Error .btn-soft { width: 100%; }

  /* Sesi 3: badge readiness & context bar ikut menyusut rapi */
  .card-sage.rounded-3 { font-size: .82rem; }
}

/* ---------- 576–767px : sm (handphone besar) ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .network-art { max-width: 320px; margin-inline: auto; }
  .rec-path { flex-direction: column; }
  .rec-path-arrow { transform: rotate(90deg); justify-content: center; padding: .15rem 0; }
  .chart-box { height: 240px; }
  .wizard-label { font-size: .72rem; max-width: 5.4rem; }

  .history-table-wrap { display: none; }
  .history-cards-wrap { display: block; }
}

/* ---------- 768–991px : md (tablet portrait) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .rec-path { flex-wrap: wrap; }
  .rec-path-step { flex: 1 1 45%; }
  .rec-path-arrow { display: none; }
  .chart-box { height: 260px; }

  .history-table-wrap { display: none; }
  .history-cards-wrap { display: block; }
}

/* ---------- 992–1199px : lg (laptop kecil / tablet landscape) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .chart-box { height: 280px; }
  .hero-headline { font-size: 2.6rem; }

  .history-table-wrap { display: block; }
  .history-cards-wrap { display: none; }
}

/* ---------- ≥1200px : xl/xxl (laptop standar & monitor wide) ---------- */
@media (min-width: 1200px) {
  .chart-box { height: 300px; }

  .history-table-wrap { display: block; }
  .history-cards-wrap { display: none; }
}

/* ---------- ≥1400px : xxl (monitor lebar) ---------- */
@media (min-width: 1400px) {
  .container-narrow { max-width: 1180px; }
}

/* Default (desktop-first fallback) for history toggle when no breakpoint matched inline above */
@media (min-width: 768px) {
  .history-cards-wrap { display: none; }
  .history-table-wrap { display: block; }
}
@media (max-width: 767.98px) {
  .history-table-wrap { display: none; }
  .history-cards-wrap { display: block; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step-pane.is-visible { animation: none; }
  .btn-brand:hover { transform: none; }
}