/* Minimal MVP CSS. Keep layout clean & consistent. */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Mobile config bar: hidden on desktop */
.ws-mobile-config-bar { display: none; }

/* ===== MOBILE RESPONSIVE (< 768px) — desktop untouched ===== */
@media (max-width: 767px) {

  /* Show the configure & run button on mobile */
  .ws-mobile-config-bar { display: block; margin-bottom: 12px; }

  /* Reduce main page padding */
  .ws-mobile-px { padding-left: 16px !important; padding-right: 16px !important; }

  /* Sidebar: hidden by default on mobile, shown as overlay */
  #config-panel {
    position: fixed !important;
    top: 56px; /* below navbar */
    left: 0;
    bottom: 0;
    z-index: 80;
    width: 307px !important;
    min-width: 307px !important;
    background: #f8fafc;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease !important;
    overflow-y: auto !important;
  }
  #config-panel.mobile-open {
    transform: translateX(0) !important;
  }
  /* Hide the desktop toggle circle on mobile */
  #config-toggle-btn { display: none !important; }

  /* Backdrop when sidebar is open */
  #mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: 56px;
    z-index: 79;
    background: rgba(0,0,0,0.3);
  }
  #mobile-sidebar-backdrop.active { display: block; }

  /* Top bar: stack vertically */
  .ws-topbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .ws-topbar > * { width: 100%; }
  .ws-topbar-right { justify-content: flex-start !important; flex-wrap: wrap; }

  /* Headline card: stack TI + metrics vertically */
  .ws-headline-flex {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .ws-headline-metrics {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* Cards grid: 2 columns on phones wider than 480px */
  .ws-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Narrative + Religious card bottom row: stack */
  .ws-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  .ws-bottom-grid > *:first-child {
    grid-column: span 1 !important;
  }
}

/* Very small phones (< 480px): single column cards */
@media (max-width: 479px) {
  .ws-cards-grid {
    grid-template-columns: 1fr !important;
  }
}