/* ---------- Mobile: hamburger topbar (hidden on desktop) ---------- */
  .mobile-topbar { display: none; }
  .sidebar-backdrop { display: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px) {
    #appScreen { position: relative; }
    .mobile-topbar {
      display: flex; align-items: center; gap: 12px;
      position: sticky; top: 0; z-index: 60;
      background: #fff; border-bottom: 1px solid var(--border);
      padding: 12px 16px;
    }
    .mobile-topbar-brand { display: flex; align-items: center; gap: 8px; }
    .mobile-topbar-brand .brand-seal { width: 26px; height: 26px; }
    .mobile-topbar-brand .brand-nexus { height: 14px; width: auto; }
    .hamburger-btn {
      background: transparent; border: none; padding: 6px; cursor: pointer;
      display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px;
    }
    .hamburger-btn span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

    #appScreen { flex-direction: column; }
    #appScreen main { margin-left: 0; }
    .sidebar {
      position: fixed; top: 0; left: 0; height: 100vh; width: 250px; max-width: 82vw;
      transform: translateX(-100%); transition: transform .25s ease; z-index: 100;
      box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    .sidebar .brand { display: none; } /* shown instead in the mobile topbar */
    .mobile-nav-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
      display: block; position: fixed; inset: 0; background: rgba(16,26,61,0.45);
      opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 90;
    }
    .mobile-nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

    main { padding: 16px; }
    h1 { font-size: 18px; }
    .card { padding: 16px; }

    /* Stack filter/form rows instead of horizontal-scrolling them */
    .inline-form { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 12px; }
    .inline-form .field { flex: 1 1 auto; width: 100%; }
    .inline-form button { width: 100%; }

    /* Contain wide tables with horizontal scroll instead of breaking the layout */
    .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    /* Long-text tables (e.g. survey question manager) should wrap instead of truncating off-screen */
    .card table.wrap-table { display: table; overflow-x: visible; white-space: normal; }
    .card table.wrap-table tbody, .card table.wrap-table thead, .card table.wrap-table tr { display: table-row-group; }
    .card table.wrap-table thead { display: table-header-group; }
    .card table.wrap-table tr { display: table-row; }
    .card table.wrap-table th, .card table.wrap-table td { display: table-cell; white-space: normal; word-break: break-word; }

    .modal-overlay { padding: 12px; }
    .modal-card { padding: 18px 16px; max-height: 90vh; }
    .modal-header h2 { font-size: 15px; }

    .login-card { padding: 28px 22px; }
    #loginScreen {
      padding: 16px;
      align-items: flex-start;
      overflow-y: auto;
      min-height: 100dvh; /* shrinks with the on-screen keyboard where supported; falls back to the 100vh set above where not */
    }
    .login-shell { box-shadow: 0 20px 50px rgba(0,0,0,0.25); border-radius: 16px; min-height: 0; margin-top: 24px; }
    .login-panel-right { display: none; }
    .login-panel-left { flex: 1 1 auto; padding: 28px 22px; }
    .login-panel-left::after { display: none; }
    .login-panel-left .login-card { max-width: 380px; }

    .pay-stats, .survey-legend { font-size: 12px; }
    .cro-item-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cro-scale-inline { align-self: flex-end; }
    .survey-scale { flex-direction: column; align-items: stretch; }
    .survey-scale-label { max-width: none; text-align: center; }
    .survey-scale-opt { flex: 1 1 auto; font-size: 13px; padding: 12px 16px; }
  }

  @media (max-width: 480px) {
    main { padding: 12px; }
    .card { padding: 14px; }
    .btn.small { padding: 9px 12px; font-size: 12.5px; }
    /* Vertical stepper instead of a horizontal scroll strip — fits the screen without scrolling sideways */
    .stepper { flex-direction: column; overflow-x: visible; align-items: stretch; gap: 0; padding: 12px 4px; }
    .step-row { flex-direction: column; align-items: stretch; width: 100%; }
    .step {
      display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto;
      align-items: start; column-gap: 12px; row-gap: 2px; min-width: 0; width: 100%; padding: 8px 0;
    }
    .step-circle { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; font-size: 15px; align-self: start; }
    .step-label { grid-column: 2; grid-row: 1; max-width: none; text-align: left; margin-top: 0; }
    .step-meta { grid-column: 2; grid-row: 2; max-width: none; text-align: left; margin-top: 0; }
    .step-detail { grid-column: 2; grid-row: 3; }
    .step-line { display: none; }
  }