/* ============================================================
   SkyNimbus -- unified responsive layer  (sn-responsive.css)
   Patch: P52  (mobile-responsive: marketing + app)
   ------------------------------------------------------------
   Linked by index/support/privacy/policies/contact/login/
   onboarding.html AND by the SPA shell (skynimbus_shell.html).
   Loaded AFTER each page's inline <style>, so equal/!important
   rules here win the cascade. Marketing fixes key off
   marketing-only classes, app fixes off app-only classes, so
   neither surface affects the other.
   ============================================================ */

/* ===== 1a. LANDING PAGE: comparison table (6 cols) ===== */
@media (max-width: 760px) {
  .compare { position: relative; }
  .compare-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .compare-inner::-webkit-scrollbar { height: 7px; }
  .compare-inner::-webkit-scrollbar-thumb { background: rgba(124,58,237,.5); border-radius: 4px; }
  .compare-table { min-width: 460px; font-size: 9px; }
  .compare-table th, .compare-table td { padding: 6px 5px; }
  .compare-table th:first-child, .compare-table td:first-child { width: 96px; }
  .compare-inner::after {
    content: ''; position: sticky; float: right; top: 0; right: 0;
    width: 28px; height: 100%; margin-left: -28px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.92));
  }
}

/* ===== 1b. LANDING PAGE: pricing cards ===== */
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-price {
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1.1;
    word-break: break-word;
  }
}

/* ===== 1c. APP SHELL (skynimbus_shell.html) ===== */
@media (max-width: 768px) {
  nav.sidebar {
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    left: -260px !important;
  }
  nav.sidebar.mobile-open { left: 0 !important; }
  .status-bar { left: 0 !important; }
  .tb-logo { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; }
  .tb-logo .logo-words { display: none !important; }
  .tb-chevron { display: none !important; }
  .tb-search { display: none !important; }
  .tb-right .tb-live { display: none !important; }
  .controls-bar { flex-wrap: wrap !important; height: auto !important; row-gap: 6px !important; }
  /* fixed-height ctx-header clipped its wrapped action buttons under
     .page-scroll (unclickable controls + banner overlap); let it grow */
  .ctx-header { height: auto !important; min-height: 44px !important; }
}

/* ===== 2. SHARED GUARDS ===== */
@media (max-width: 600px) {
  img { max-width: 100%; height: auto; }
  .plan-price, .price, code, .mono { overflow-wrap: anywhere; }
}