/* OptionGap — mobile-only refinements.
   Loaded LAST so these override per-tab styles, but ONLY inside media
   queries: desktop (>768px) rendering is byte-for-byte unaffected.
   styles.css already reflows the header/nav at 768px; this file handles
   tab content. Stock Options reuses .opt-* classes, so the options rules
   cover both tabs. */

@media (max-width: 768px) {

  /* ── Shell ─────────────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  .og-ft {
    flex-wrap: wrap; justify-content: center; text-align: center;
    gap: 4px 10px; padding: 14px 12px 22px;
  }
  .og-ft-sp { display: none; }

  /* ── Home ──────────────────────────────────────────────────────── */
  .home-hero-r svg { width: 100%; height: auto; }
  .home-cosmic { margin-top: 8px; }
  .home-cosmic-p { font-size: 13px; }
  .home-cosmic-btn { width: 100%; justify-content: center; }
  .home-cosmic-cap { white-space: normal; }

  /* ── Index / Stock Options ─────────────────────────────────────── */
  .opt-stats { grid-template-columns: repeat(2, 1fr); }
  .opt-spot-px { font-size: 24px; }
  .opt-subnav {
    align-self: stretch; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .opt-subnav::-webkit-scrollbar { display: none; }
  .opt-subnav button { white-space: nowrap; }
  .opt-chain-scroll { max-height: 68vh; }
  .opt-chain { font-size: 11.5px; }
  .opt-chain th, .opt-chain td { padding: 0 8px; }
  .dg-summary { grid-template-columns: repeat(2, 1fr); }

  /* ── VIX ───────────────────────────────────────────────────────── */
  .vix-live-card { grid-template-columns: 1fr; gap: 12px; }
  .vix-calc-inputs { grid-template-columns: 1fr 1fr; }

  /* ── Admin ─────────────────────────────────────────────────────── */
  .og-admin-subtabs {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .og-admin-subtabs::-webkit-scrollbar { display: none; }
  .og-admin-subtab { white-space: nowrap; flex-shrink: 0; }
  .og-admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .og-admin-config-row { flex-wrap: wrap; }
  .og-uni-form-grid, .og-uni-fields-grid { grid-template-columns: 1fr; }
  .og-ticker-row { grid-template-columns: 22px 1fr 64px 1fr 64px; gap: 6px; }
}

@media (max-width: 480px) {
  /* Tighter phones */
  .opt-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt-stat-v { font-size: 16px; }
  .vix-calc-inputs { grid-template-columns: 1fr; }
  .dg-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-cosmic { padding: 18px 16px; }
  .home-cosmic-h { font-size: 22px; }
}